/* 図 — off-white, black, and one drafting red.
   No serif anywhere. That is the whole separation from the machiya site. */
:root{
  --paper:#F2F0EB;
  --paper-2:#E8E5DE;
  --ink:#0E0E0D;
  --red:#D6301F;          /* drafting red — dimensions, annotation, the cursor */
  --grey:rgba(14,14,13,.58);
  --rule:rgba(14,14,13,.16);
  --sans:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --pad:clamp(20px,5vw,72px);
}

*{box-sizing:border-box}
html{overflow-x:hidden; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2{margin:0; font-weight:600; letter-spacing:-.02em}

/* ---------- masthead ---------- */
#mast{
  position:fixed; inset:0 0 auto 0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--pad); gap:24px;
  background:rgba(242,240,235,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent; transition:border-color .3s ease;
}
body.scrolled #mast{border-bottom-color:var(--rule)}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.glyph{font-size:20px; font-weight:600}
.brandname{font-size:13px; font-weight:700; letter-spacing:.26em}
.mast-nav{display:flex; align-items:center; gap:24px}
.mast-nav a{font-size:14px; font-weight:500; text-decoration:none}
.mast-nav a:hover{color:var(--red)}
.cta{
  padding:9px 18px; border-radius:999px; background:var(--ink);
  color:var(--paper)!important; font-weight:600!important;
}
.cta:hover{background:var(--red)}

/* ---------- act 1: drawn, then built ----------
   Full-bleed photograph with the derived drawing wiped across it. The two are in
   exact registration, so the scan line reads as one image changing state rather
   than two images crossfading. */
#wipe-scroll{height:340vh; position:relative}
#wipe-stage{position:sticky; top:0; height:100vh; overflow:hidden; background:var(--ink)}
#w-photo,#w-line{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  user-select:none; -webkit-user-drag:none;
}
/* the drawing occupies everything LEFT of the edge; clip-path is driven in JS */
#w-line{clip-path:inset(0 62% 0 0)}
#w-edge{
  position:absolute; top:0; bottom:0; left:38%; width:2px; z-index:3;
  background:var(--red); box-shadow:0 0 22px rgba(214,48,31,.55);
}
.w-handle{
  position:absolute; top:50%; left:50%; width:44px; height:44px;
  margin:-22px 0 0 -22px; border-radius:50%; background:var(--red);
  display:grid; place-items:center; cursor:ew-resize; pointer-events:auto;
}
.w-handle::before{
  content:"‹ ›"; color:var(--paper); font-size:15px; font-weight:700;
  letter-spacing:.06em; line-height:1;
}
#wipe-stage{cursor:ew-resize}

.w-copy{
  position:absolute; left:var(--pad); bottom:clamp(96px,14vh,150px); z-index:4;
  max-width:min(760px,64vw); pointer-events:none;
  transition:opacity .45s ease,transform .45s ease;
}
.w-copy.off{opacity:0; transform:translateY(-12px)}
.w-copy .kicker{color:var(--red); text-shadow:0 1px 14px rgba(0,0,0,.4)}
.w-copy h1{
  font-size:clamp(46px,8.2vw,132px); line-height:.9; letter-spacing:-.045em;
  color:var(--paper); text-shadow:0 3px 44px rgba(0,0,0,.5);
}
.w-copy h1 em{font-style:normal; color:var(--red)}

.w-tag{
  position:absolute; top:calc(var(--pad) + 44px); z-index:4; margin:0;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  color:var(--ink); background:rgba(242,240,235,.9); padding:6px 10px;
}
.w-tag-l{left:var(--pad)}
.w-tag-r{right:var(--pad); color:var(--paper); background:rgba(14,14,13,.72)}

.beat-note{
  position:absolute; left:var(--pad); bottom:40px; margin:0; z-index:4;
  font-family:var(--mono); font-size:12px; letter-spacing:.02em;
  color:var(--paper); text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.scrollcue{
  position:absolute; right:var(--pad); bottom:40px; margin:0; z-index:4;
  font-size:11px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--paper); transition:opacity .4s ease; text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.scrollcue.off{opacity:0}

/* the axonometric now lives in the Plan section, where a sparse technical
   diagram is correct rather than thin */
.axo-wrap{margin-top:clamp(28px,4vw,56px)}
#axo{width:100%; height:auto; aspect-ratio:940/520; display:block; cursor:grab}

/* ---------- act 2: the dissolve and film ---------- */
#film-scroll{position:relative}
#film-stage{position:sticky; top:0; height:100vh; overflow:hidden; background:var(--paper)}
#film,#lineplate{position:absolute; inset:0; width:100%; height:100%; display:block}
#film{object-fit:cover}
#lineplate{object-fit:cover; pointer-events:none}
.film-note{
  position:absolute; left:var(--pad); bottom:74px; margin:0; z-index:2;
  font-family:var(--mono); font-size:12px; letter-spacing:.02em;
  color:var(--ink); mix-blend-mode:difference; filter:invert(1);
}

/* ---------- act 3: the page ---------- */
#page{position:relative; z-index:5; background:var(--paper)}
.band{padding:clamp(64px,9vw,132px) 0; border-bottom:1px solid var(--rule)}
.band.dark{background:var(--ink); color:var(--paper); border-bottom-color:rgba(242,240,235,.14)}
.wrap{max-width:1240px; margin:0 auto; padding:0 var(--pad)}
.two{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
     gap:clamp(28px,5vw,84px); align-items:start}
.eyebrow{margin:0 0 16px; font-size:12px; font-weight:700; letter-spacing:.22em;
         text-transform:uppercase; color:var(--red)}
.band h2{font-size:clamp(30px,4vw,52px); line-height:1.08}
.col p{margin:0 0 20px; font-size:17px; line-height:1.72}
.note{font-size:14.5px; color:var(--grey)}
.band.dark .note{color:rgba(242,240,235,.62)}

.stats{display:grid; grid-template-columns:repeat(6,1fr); gap:20px;
       margin-top:clamp(40px,5vw,72px)}
.stats div{border-top:2px solid var(--ink); padding-top:14px}
.stats .n{display:block; font-family:var(--mono); font-size:clamp(20px,2.2vw,30px); font-weight:500}
.stats .l{display:block; margin-top:6px; font-size:12px; font-weight:600;
          letter-spacing:.12em; text-transform:uppercase; color:var(--grey)}

.spec-list{margin:0; display:grid; grid-template-columns:1fr 1fr; gap:0 44px}
.spec-list div{display:flex; justify-content:space-between; gap:16px;
               padding:13px 0; border-bottom:1px solid rgba(242,240,235,.16)}
.spec-list dt{font-size:13px; font-weight:600; letter-spacing:.1em;
              text-transform:uppercase; color:rgba(242,240,235,.62)}
.spec-list dd{margin:0; font-family:var(--mono); font-size:14px; text-align:right}
.price{margin:34px 0 0; font-family:var(--mono); font-size:clamp(22px,2.4vw,30px); font-weight:500}
.price span{display:block; font-family:var(--sans); font-size:12px; font-weight:700;
            letter-spacing:.2em; text-transform:uppercase;
            color:rgba(242,240,235,.62); margin-bottom:8px}

.near{list-style:none; margin:6px 0 0; padding:0}
.near li{display:flex; gap:20px; padding:13px 0; border-bottom:1px solid var(--rule); font-size:16px}
.near span{font-family:var(--mono); font-size:13px; min-width:62px; color:var(--red); font-weight:500}

.form{display:grid; gap:18px}
.form label{display:grid; gap:8px; font-size:12px; font-weight:700;
            letter-spacing:.14em; text-transform:uppercase; color:var(--grey)}
.form input{font-family:var(--sans); font-size:16px; font-weight:400; color:var(--ink);
            background:transparent; border:0; border-bottom:1.5px solid var(--rule);
            padding:10px 2px; letter-spacing:0; text-transform:none}
.form input:focus{outline:0; border-bottom-color:var(--red)}
.form button{justify-self:start; margin-top:10px; padding:15px 34px; border:0;
             border-radius:999px; background:var(--ink); color:var(--paper);
             font-family:var(--sans); font-size:14px; font-weight:600; cursor:pointer}
.form button:hover{background:var(--red)}
.form-msg{margin:0; font-size:14.5px; font-weight:500; min-height:1.2em; color:var(--red)}

.foot{background:var(--ink); color:var(--paper); border-bottom:0}
.foot-in{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:28px; align-items:end}
.foot .note{color:rgba(242,240,235,.62)}
.foot .note p{margin:0 0 6px}
.foot .dim{opacity:.5; text-align:right}
.ns{padding:40px; text-align:center}

@media (max-width:960px){
  .two{grid-template-columns:1fr; gap:28px}
  .stats{grid-template-columns:repeat(3,1fr)}
  .spec-list{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr; align-items:start}
  .foot .dim{text-align:left}
  .beat{max-width:none; right:var(--pad)}
}
@media (max-width:720px){
  body{font-size:16px}
  .mast-nav a:not(.cta){display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  #axo-scroll{height:480vh}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }


/* ================= four-act staging ================= */
/* Each act is a tall scroller with a sticky, full-bleed stage inside it. */
#hero-scroll,#draw-scroll,#film-scroll{position:relative}
#hero-stage,#draw-stage,#film-stage{
  position:sticky; top:0; height:100vh; overflow:hidden; background:var(--paper);
}
#hero,#film{position:absolute; inset:0; width:100%; height:100%; display:block}
#plate-photo,#plate-line,#film-line{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; pointer-events:none;
}
#draw-stage #axo{
  position:absolute; left:0; right:0; bottom:4%; top:14%;
  width:100%; height:82%;
}

/* the mono annotation that runs under every stage */
.stage-note{
  position:absolute; left:var(--pad); bottom:70px; margin:0; z-index:4;
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.04em;
  color:var(--ink); background:rgba(242,240,235,.72); padding:6px 12px;
  border-radius:999px; backdrop-filter:blur(6px);
}
#hero-note,#film-note{color:var(--paper); background:rgba(14,14,13,.42)}

/* the hero title sits over the film, so it needs its own ground */
#hero-title{
  position:absolute; left:0; right:0; top:clamp(96px,15vh,160px); z-index:4;
  text-align:center; padding:0 var(--pad); color:var(--paper);
  text-shadow:0 2px 34px rgba(0,0,0,.5);
  transition:opacity .6s ease, transform .6s ease;
}
#hero-title.off{opacity:0; transform:translateY(-16px)}
#hero-title .kicker{color:var(--red)}
#hero-title .sub{color:rgba(242,240,235,.86)}
#hero-title h1{
  position:relative; display:inline-block;
  font-size:clamp(40px,6.4vw,98px); line-height:.96; letter-spacing:-.035em;
}
#hero-title h1 em{font-style:normal; color:rgba(242,240,235,.6)}

.scrollcue{
  position:absolute; right:var(--pad); bottom:74px; margin:0; z-index:4;
  font-size:11px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(242,240,235,.8);
}

/* ================= page reveals ================= */
/* The page was static while everything above it moved — three speeds beat one. */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
}


/* ============ hero legibility ============
   The pull-back's first frames are near-white at the top (bright sky reflected
   in the water) and near-black at the bottom. Off-white type with a shadow is
   invisible against the top half. A scrim between the canvas and the type
   guarantees contrast across EVERY frame of the sequence, not just the ones
   that happen to be dark. */
#hero-stage::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(8,8,7,.62) 0%,
      rgba(8,8,7,.38) 26%,
      rgba(8,8,7,.06) 52%,
      rgba(8,8,7,.00) 66%,
      rgba(8,8,7,.34) 100%);
  transition:opacity .6s ease;
}
body.past-hero #hero-stage::after{opacity:.25}

#hero-title{z-index:5}
#hero-title h1{
  font-weight:700;
  text-shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 40px rgba(0,0,0,.45);
}
#hero-title h1 em{color:rgba(242,240,235,.72)}
#hero-title .kicker{
  color:#FF6A4D;
  text-shadow:0 1px 10px rgba(0,0,0,.7);
}
#hero-title .sub{
  color:#fff; font-weight:500;
  text-shadow:0 1px 3px rgba(0,0,0,.6), 0 4px 24px rgba(0,0,0,.5);
}
.scrollcue{text-shadow:0 1px 10px rgba(0,0,0,.7)}


/* ================= NERO additions ================= */
#draw-scroll,#film-scroll{position:relative}
#draw-stage,#film-stage{
  position:sticky; top:0; height:100vh; overflow:hidden; background:var(--paper);
}
#film{position:absolute; inset:0; width:100%; height:100%; display:block}
#plate-line,#plate-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  pointer-events:none;
}
#draw-stage #axo{position:absolute; left:0; right:0; top:12%; bottom:6%;
                 width:100%; height:82%}

/* the title sits over the drawing, which is near-white — it needs a ground */
#hero-title{
  position:absolute; left:0; right:0; top:clamp(92px,14vh,150px); z-index:6;
  text-align:center; padding:0 var(--pad);
  transition:opacity .6s ease, transform .6s ease;
}
#hero-title.off{opacity:0; transform:translateY(-16px)}
#hero-title h1{
  position:relative; display:inline-block; font-weight:700;
  font-size:clamp(40px,6.4vw,98px); line-height:.96; letter-spacing:-.035em;
}
#hero-title h1 em{font-style:normal; color:var(--grey)}
#hero-title .sub{margin:24px auto 0; max-width:44ch; color:var(--grey)}

.stage-note{
  position:absolute; left:var(--pad); bottom:70px; margin:0; z-index:5;
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.04em;
  color:var(--ink); background:rgba(242,240,235,.78); padding:6px 12px;
  border-radius:999px; backdrop-filter:blur(6px);
}
#film-note{color:var(--paper); background:rgba(14,14,13,.5)}
.scrollcue{
  position:absolute; right:var(--pad); bottom:74px; margin:0; z-index:5;
  font-size:11px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--grey); transition:opacity .4s ease;
}
.scrollcue.off{opacity:0}

/* ---- loader ---- */
#loader{
  position:fixed; inset:0; z-index:100; background:var(--paper);
  display:grid; place-items:center; transition:opacity .6s ease;
}
#loader.done{opacity:0; pointer-events:none}
.ld-in{display:flex; align-items:baseline; gap:14px}
.ld-n{font-family:var(--mono); font-size:clamp(48px,9vw,120px); font-weight:500;
      letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.ld-n::after{content:"%"; font-size:.4em; margin-left:.12em; color:var(--red)}
.ld-l{font-size:11px; font-weight:700; letter-spacing:.3em; color:var(--grey)}

/* ---- levels list ---- */
.levels{list-style:none; margin:10px 0 0; padding:0}
.levels li{
  display:flex; align-items:baseline; gap:16px; padding:14px 0;
  border-bottom:1px solid var(--rule); font-size:16px;
}
.levels span{
  font-family:var(--mono); font-size:13px; font-weight:500; color:var(--red);
  min-width:34px;
}
.levels em{margin-left:auto; font-style:normal; font-family:var(--mono);
           font-size:13px; color:var(--grey)}

/* ---- gallery ---- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
      margin-top:clamp(32px,4vw,56px)}
.grid figure{margin:0}
.grid .g-wide{grid-column:span 2}
.grid img{width:100%; aspect-ratio:16/10; object-fit:cover;
          transition:transform .6s ease}
.grid figure:hover img{transform:scale(1.02)}
.grid figcaption{margin-top:10px; font-size:13px; font-weight:500;
                 color:rgba(242,240,235,.62)}

@media (max-width:960px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:720px){
  .grid{grid-template-columns:1fr}
  .grid .g-wide{grid-column:span 1}
}


/* ================= hero: ink on paper =================
   Act 1's background is a near-white line drawing, so white type was invisible.
   Black type on the paper is both legible and correct for a drafting theme. A
   soft paper wash sits behind the block so the drawing's lines do not run
   through the letterforms. */
#hero-title{color:var(--ink)}
#hero-title::before{
  content:""; position:absolute; left:50%; top:-8%; transform:translateX(-50%);
  width:min(1180px,94vw); height:150%; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 62% 54% at 50% 42%,
    rgba(242,240,235,.95) 0%, rgba(242,240,235,.86) 45%,
    rgba(242,240,235,.55) 68%, rgba(242,240,235,0) 84%);
}
#hero-title h1{
  color:var(--ink); font-weight:700; text-shadow:none;
  font-size:clamp(42px,6.8vw,104px);
}
#hero-title h1 em{color:rgba(14,14,13,.34)}
#hero-title .kicker{color:var(--red); text-shadow:none}
#hero-title .sub{
  color:rgba(14,14,13,.62); font-weight:500; text-shadow:none;
  font-size:clamp(15px,1.35vw,18px); letter-spacing:.01em;
}
.underline path{stroke:var(--red); stroke-width:3.4}
.scrollcue{color:rgba(14,14,13,.5); text-shadow:none}

/* the film act is dark-ish behind the note only */
#film-note{color:var(--paper); background:rgba(14,14,13,.55)}

/* ================= footer credit ================= */
.credit{
  grid-column:1/-1; margin:34px 0 0; padding-top:22px;
  border-top:1px solid rgba(242,240,235,.16);
  display:flex; flex-wrap:wrap; gap:8px 14px; align-items:baseline;
  font-size:14px; color:rgba(242,240,235,.72);
}
.credit a{
  color:var(--paper); text-decoration:none; font-weight:600;
  border-bottom:1px solid rgba(242,240,235,.38); padding-bottom:1px;
  transition:border-color .2s ease,color .2s ease;
}
.credit a:hover{color:var(--red); border-bottom-color:var(--red)}
.credit .heart{color:var(--red)}

/* ================= polish ================= */
.mast-nav a{position:relative}
.mast-nav a:not(.cta)::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.mast-nav a:not(.cta):hover::after{transform:scaleX(1)}
.cta{transition:background .25s ease,transform .25s ease}
.cta:hover{transform:translateY(-1px)}
.form button{transition:background .25s ease,transform .25s ease}
.form button:hover{transform:translateY(-1px)}
::selection{background:var(--red); color:var(--paper)}