/* ブランディングページ6案 共通（r.css のあとに読み込む）
   色はサイトのトークン（--bg / --fg / --muted / --line / --line-strong / --blue）だけを使い、
   黒⇄白の反転にそのまま追従する。文字サイズは 12/14/16/18/20/24/32/40/48/64/80 の11段階。 */

:root { --br-ease: cubic-bezier(.65, 0, .35, 1); --br-out: cubic-bezier(.16, .8, .12, 1); }

/* SVG: lines drawn by the timeline */
.br [data-draw] { stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--d, 0)); }
.br svg { overflow: visible; }
.br svg text { font-family: var(--f-jp); fill: var(--fg); }
.br svg .mono { font-family: var(--f-mono); letter-spacing: .08em; }
.br svg .en { font-family: var(--f-disp); }

/* things that come in with the timeline */
.br .br-fade { opacity: var(--d, 0); transform: translate3d(0, calc((1 - var(--d, 0)) * 18px), 0); }
.br .br-fadeonly { opacity: var(--d, 0); }

/* section heads shared by the variants (the English heading is the site's .big) */
.br-k { font-size: 14px; letter-spacing: .2em; color: var(--muted); margin: 0; }
.br-lead { font-family: var(--f-jp); font-weight: 400; font-size: 40px; line-height: 1.5; letter-spacing: .06em; color: var(--fg); margin: 0; }
.br-p { font-size: 16px; line-height: 2.1; letter-spacing: .06em; color: var(--muted); margin: 0; max-width: 40em; }
.br-p + .br-p { margin-top: 1em; }
.br-label { font: 400 12px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.br-h { display: grid; gap: 20px; }
@media (max-width: 900px) {
  .br-lead { font-size: 24px; line-height: 1.6; }
  .br-p { font-size: 14px; line-height: 2.05; }
}

/* buttons inside the figures: plain, no browser chrome */
.br button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
.br button:focus-visible, .br a:focus-visible, .br summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* pinned stages */
.br-scene { position: relative; }
.br-stage { position: sticky; top: var(--barh, 64px); height: calc(100vh - var(--barh, 64px)); height: calc(100svh - var(--barh, 64px)); overflow: hidden; }

/* FAQ shared: details with a drawn plus */
.br-faq { border-top: 1px solid var(--line-strong); }
.br-faq details { border-bottom: 1px solid var(--line); }
.br-faq summary { list-style: none; display: grid; grid-template-columns: 3.4em minmax(0, 1fr) 20px; align-items: baseline; gap: 12px; padding: 24px 0; cursor: pointer; }
.br-faq summary::-webkit-details-marker { display: none; }
.br-faq summary .q { font: 400 12px/1 var(--f-mono); letter-spacing: .1em; color: var(--muted); }
.br-faq summary b { font-weight: 500; font-size: 18px; line-height: 1.6; letter-spacing: .04em; }
.br-faq summary i { position: relative; align-self: center; width: 14px; height: 14px; }
.br-faq summary i::before, .br-faq summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform .5s var(--br-ease); }
.br-faq summary i::after { transform: rotate(90deg); }
.br-faq details[open] summary i::after { transform: rotate(0deg); }
.br-faq .a { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) 20px; gap: 12px; padding: 0 0 28px; }
.br-faq .a p { grid-column: 2; margin: 0; font-size: 16px; line-height: 2; letter-spacing: .05em; color: var(--muted); }
.br-faq .a p::before { content: "A"; font: 400 12px/1 var(--f-mono); color: var(--blue); margin-right: 14px; }
.br-faq summary:hover b { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
@media (max-width: 900px) {
  .br-faq summary { grid-template-columns: 2.8em minmax(0, 1fr) 16px; padding: 18px 0; }
  .br-faq summary b { font-size: 16px; }
  .br-faq .a { grid-template-columns: 2.8em minmax(0, 1fr) 16px; }
  .br-faq .a p { font-size: 14px; }
}

/* the draft copy (new in this round) can be marked from the preview */
html.br-mark .br [data-new] { background-image: linear-gradient(rgba(36, 72, 230, .14), rgba(36, 72, 230, .14)); background-repeat: no-repeat; box-shadow: inset 2px 0 0 #2448e6; }
html.br-mark.dk .br [data-new] { background-image: linear-gradient(rgba(143, 166, 255, .18), rgba(143, 166, 255, .18)); box-shadow: inset 2px 0 0 #8fa6ff; }
html.br-mark .br [data-new]:is(span, b, s, em) { box-shadow: none; }

/* keep long Japanese lines from breaking inside a phrase */
.br .ib { display: inline-block; }
.br .nw { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .br [data-draw] { transition: none; }
}