@view-transition { navigation: auto; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body.is-home { margin: 0; background: var(--ink); color: var(--ink); font: 400 clamp(1.05rem, .95rem + .4vw, 1.28rem)/1.65 var(--text); }
body.is-page { font-family: var(--text); padding-top: 84px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip { position: absolute; left: -999px; } .skip:focus { left: 12px; top: 12px; z-index: 60; background: #fff; color: #000; padding: 10px 14px; }
.top { position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; gap: 26px; padding: 12px clamp(16px, 3vw, 40px); color: var(--ink); background: color-mix(in oklab, var(--paper) 90%, transparent); backdrop-filter: blur(14px); }
.top a { color: inherit; text-decoration: none; }
.top__brand { display: flex; align-items: center; gap: 10px; margin-right: auto; font-family: var(--display); }
.top__brand svg { width: 46px; height: 46px; flex: none; }
.top__brand b { font-size: 1.28rem; font-weight: var(--dw); line-height: 1; letter-spacing: var(--ls); text-transform: var(--case); }
.top__nav { display: flex; gap: 22px; font-weight: 600; font-size: 1rem; }
.top__nav a { padding: 10px 2px; } .top__nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.top__tel { background: var(--ink); color: var(--paper) !important; font: var(--dw) 1.02rem var(--display); padding: 12px 18px; border-radius: var(--r); white-space: nowrap; }
.scrub { position: relative; height: 620vh; color: #fff; }
.scrub__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--ink); }
.scrub__canvas, .scrub__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scrub__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .32), rgb(0 0 0 / .16) 40%, rgb(0 0 0 / .68)); }
.chap { position: absolute; inset: auto clamp(16px, 4vw, 64px) clamp(84px, 13vh, 130px); max-width: 1500px; opacity: 0; transform: translateY(26px); transition: opacity .35s, transform .35s; pointer-events: none; }
.chap.on { opacity: 1; transform: none; pointer-events: auto; }
.eyebrow { font: 600 clamp(.95rem, .85rem + .4vw, 1.2rem) var(--text); margin: 0 0 12px; color: var(--accent); }
.mega { font: var(--dw) var(--mega)/.92 var(--display); letter-spacing: var(--ls); text-transform: var(--case); margin: 0; text-wrap: balance; }
.mega--sm { font-size: calc(var(--mega) * .72); line-height: .98; }
.mega em { font-style: var(--emstyle); color: var(--accent); }
.lead { max-width: 44ch; margin: 18px 0 22px; font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem); }
.cta, .btn { display: inline-block; font: var(--dw) clamp(1.05rem, 1rem + .4vw, 1.35rem) var(--display); padding: 15px 26px; border-radius: var(--r); text-decoration: none; }
.cta { background: var(--accent); color: var(--on); } .cta:hover { background: #fff; color: var(--ink); }
.btn { background: var(--ink); color: var(--paper); margin-top: 8px; } .btn:hover { background: var(--accent); color: var(--on); }
.scrub__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgb(255 255 255 / .2); } .scrub__bar span { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--accent); }
.ticker { overflow: hidden; background: var(--accent); color: var(--on); padding: 14px 0; }
.ticker div { display: flex; gap: 46px; width: max-content; font: var(--dw) clamp(1.3rem, 2.4vw, 2.2rem)/1 var(--display); text-transform: var(--case); animation: slide 42s linear infinite; }
@keyframes slide { to { transform: translateX(-50%); } }
.band { padding: clamp(70px, 10vw, 150px) clamp(16px, 4vw, 64px); background: var(--paper); color: var(--ink); }
.band--alt { background: #fff; } .band--ink { background: var(--ink); color: #fff; }
.in { max-width: 1400px; margin: 0 auto; }
.kick { font: 700 1rem var(--text); margin: 0 0 12px; color: var(--deep); } .band--ink .kick { color: var(--accent); }
.big { font: var(--dw) var(--big)/1 var(--display); letter-spacing: var(--ls); text-transform: var(--case); margin: 0 0 24px; text-wrap: balance; }
.mid { font: var(--dw) clamp(1.7rem, 3.2vw, 2.9rem)/1.06 var(--display); letter-spacing: var(--ls); margin: 0 0 14px; text-wrap: balance; }
.intro { max-width: 60ch; font-size: clamp(1.15rem, 1rem + .7vw, 1.55rem); }
.split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.split p a { color: var(--deep); font-weight: 600; text-underline-offset: 3px; }
.split figure { margin: 0; } .tall { display: block; width: 100%; height: clamp(360px, 46vw, 680px); object-fit: cover; border-radius: var(--r2); }
.steps { list-style: none; padding: 0; margin: 50px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0 40px; }
.step { border-top: 2px solid var(--accent); padding: 18px 0 30px; }
.step__n { font: var(--dw) clamp(2.6rem, 5vw, 4.4rem)/1 var(--display); color: var(--accent); }
.step h3 { font: var(--dw) 1.5rem/1.15 var(--display); margin: 12px 0 8px; } .step p { margin: 0; }
.mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; background: var(--paper); padding: 0 8px 8px; }
.mosaic figure { margin: 0; overflow: hidden; height: clamp(220px, 34vw, 520px); } .mosaic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; } .mosaic figure:hover img { transform: scale(1.05); }
.m0 { grid-column: span 7; } .m1 { grid-column: span 5; } .m2 { grid-column: span 5; } .m3 { grid-column: span 7; }
.filmband { position: relative; min-height: 86svh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--ink); padding: clamp(40px, 7vw, 90px) clamp(16px, 4vw, 64px); }
.film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.filmband__t { position: relative; width: 100%; } .filmband .big { max-width: 16ch; margin: 0; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(34px, 6vw, 90px); } .two p { margin: 0; }
.themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px 44px; margin: 30px 0; }
.themes h3 { font: var(--dw) 1.35rem/1.2 var(--display); margin: 0 0 8px; color: var(--deep); }
.themes ul { list-style: none; margin: 0; padding: 0; } .themes li { border-top: 1px solid color-mix(in oklab, var(--ink) 18%, transparent); } .themes a { display: block; padding: 11px 0; color: inherit; font-weight: 600; text-decoration: none; } .themes a:hover { text-decoration: underline; }
.faq details { border-top: 1px solid color-mix(in oklab, var(--ink) 18%, transparent); padding: 16px 0; } .faq summary { cursor: pointer; min-height: 44px; } .faq summary h3 { display: inline; font: var(--dw) clamp(1.2rem, 1rem + .9vw, 1.75rem)/1.2 var(--display); } .faq p { max-width: 70ch; margin: 12px 0 0; }
.link { color: inherit; font-weight: 600; text-underline-offset: 4px; }
.final { position: relative; overflow: hidden; background: var(--ink); color: #fff; padding: clamp(90px, 13vw, 190px) clamp(16px, 4vw, 64px); }
.final__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; } .final__in { position: relative; }
.tel { display: block; margin: 22px 0 14px; color: var(--accent); font: var(--dw) clamp(2.7rem, 10.5vw, 10rem)/1 var(--display); letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.addr { margin: 0 0 10px; }
.foot { background: #000; color: #e8e8e8; padding: 36px clamp(16px, 4vw, 64px) 96px; font: 400 1rem/1.5 var(--text); } .foot p { margin: 0 0 8px; } .foot a { color: inherit; } .foot__small { font-size: .9rem; color: #c4c4c4; }
.stick { display: none; position: fixed; inset: auto 12px calc(12px + env(safe-area-inset-bottom)); z-index: 45; text-align: center; background: var(--accent); color: var(--on); font: var(--dw) 1.12rem var(--display); padding: 16px; border-radius: 16px; text-decoration: none; }
@supports (animation-timeline: view()) {
  @keyframes rise { from { opacity: 0; transform: translateY(44px); } to { opacity: 1; transform: none; } }
  .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; }
}
@media (max-width: 760px) { .top__nav, .top__tel { display: none; } .stick { display: block; } .chap { inset-block-end: 96px; } .foot { padding-bottom: 110px; } .split { grid-template-columns: 1fr; } .m0, .m1, .m2, .m3 { grid-column: span 12; } .top__brand b { font-size: 1.1rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .scrub { height: 100svh; } .reveal, .ticker div { animation: none; } .chap { transition: none; } }
body.is-page .ph__t, body.is-page .prose h2, body.is-page .art-card__t { font-family: var(--display); font-weight: var(--dw); letter-spacing: var(--ls); }
.split > * { min-width: 0; } .big, .mega { overflow-wrap: break-word; }
.top__brand b { white-space: nowrap; }
@media (max-width: 1080px) { .top__nav { display: none; } .split { grid-template-columns: 1fr; } .tall { height: clamp(300px, 56vw, 560px); } }
@media (max-width: 480px) { .top__brand b { white-space: normal; font-size: 1rem; } }