/* ATSU — fictional letterpress shop (Novaia Labs concept). */
:root { --bed:#262628; --bed2:#1d1d1f; --paper:#efebe2; --ink:#1c1c21; --mute:#77736b; --verm:#b8432b; --light:#ece8df; --g:32px; --ix:7vw; --iy:12svh; }
* { box-sizing:border-box; margin:0; padding:0; }
html { background:var(--bed); scroll-behavior:smooth; }
.rm, .rm * { scroll-behavior:auto !important; }
body { font-family:"Zen Kaku Gothic New", "Hiragino Sans", sans-serif; color:var(--light); background:var(--bed); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body.en { font-family:"Libre Caslon Text", Georgia, serif; }
img { display:block; max-width:100%; }
[hidden] { display:none !important; }
a { color:inherit; }
:focus-visible { outline:2px solid #e0735a; outline-offset:3px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:absolute; left:12px; top:-60px; z-index:50; background:var(--paper); color:var(--ink); padding:10px 14px; }
.skip:focus { top:12px; }
.mono { font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.min { font-family:"Shippori Mincho B1", "Hiragino Mincho ProN", serif; font-weight:800; letter-spacing:.02em; }
body.en .min { font-family:"Libre Caslon Text", Georgia, serif; font-weight:700; letter-spacing:-.01em; }
.touch-hint { display:none; } @media (hover:none) { .touch-hint { display:inline; } .pointer-hint { display:none; } }

/* nav */
.nav { position:fixed; z-index:20; top:0; left:0; right:0; display:flex; align-items:baseline; justify-content:space-between; padding:22px var(--g); color:#fff; mix-blend-mode:difference; pointer-events:none; }
.nav a { pointer-events:auto; text-decoration:none; }
.nav .brand { font-family:"Shippori Mincho B1", serif; font-weight:800; font-size:20px; letter-spacing:.04em; }
.nav .brand small { font-family:"Zen Kaku Gothic New", sans-serif; font-weight:400; font-size:11px; margin-left:12px; letter-spacing:.1em; }
.nav ul { list-style:none; display:flex; gap:26px; font-size:13px; }
.nav li:last-child a { text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }

/* 01 hero (approved proof v3) */
.hero { position:relative; height:100svh; min-height:520px; overflow:hidden; touch-action:pan-y; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; cursor:pointer; outline:none; background:var(--bed); }
.hero:focus-visible { box-shadow:inset 0 0 0 2px #e0735a; }
.hero canvas { position:absolute; inset:0; width:100%; height:100%; display:block; transform-origin:50% 50%; }
.hero-fallback, .hero-fallback img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.peekbar { position:absolute; left:var(--ix); right:var(--ix); top:0; height:calc(var(--iy) + 40px); background:linear-gradient(#f3efe6, #e9e4d9); box-shadow:0 8px 24px rgba(0,0,0,.45); transform:translateY(-100%); pointer-events:none; z-index:1; }
.hero .ui { position:absolute; z-index:5; left:calc(var(--ix) + 32px); right:calc(var(--ix) + 32px); bottom:calc(var(--iy) + 28px); color:var(--light); transition:color .35s; }
.hero .ui.onpaper { color:var(--ink); }
.hero .ui p { font-size:15px; line-height:1.9; max-width:31em; }
body.en .hero .ui p { font-size:16px; line-height:1.6; }
.hero .ui .mono { font-size:12px; }
.state { display:flex; align-items:center; gap:12px; margin-top:20px; font-size:13px; min-height:46px; }
.ring { width:46px; height:46px; position:relative; flex:none; }
.ring svg { position:absolute; inset:0; transform:rotate(-90deg); }
.ring::after { content:""; position:absolute; left:19px; top:19px; width:8px; height:8px; border-radius:50%; background:currentColor; }
.lead { transition:opacity .4s; } .after { opacity:0; visibility:hidden; transition:opacity .6s .2s; position:absolute; left:0; bottom:0; }
.printed .lead, .lifting .lead { opacity:0; transition-duration:.15s; } .printed .after { opacity:1; visibility:visible; }
.hint { margin-top:12px; color:var(--mute); }
button.again { font:inherit; background:none; border:0; border-bottom:1px solid currentColor; color:inherit; padding:2px 0; cursor:pointer; margin-left:16px; text-transform:inherit; letter-spacing:inherit; }
.hero .next { position:absolute; z-index:5; right:calc(var(--ix) + 32px); bottom:calc(var(--iy) + 32px); color:var(--mute); text-decoration:none; opacity:0; transition:opacity .6s .6s; }
.printed .next { opacity:1; }
.hero .tag { position:absolute; z-index:5; left:var(--g); bottom:22px; color:#8f8b83; }
.nogl .lead { display:none; }

/* shared chapter type */
.chap { display:flex; gap:12px; align-items:baseline; color:#8f8b83; } .chap b { color:#e0735a; font-weight:500; }
.paper .chap, .work .chap { color:#5e5a52; } .paper .chap b, .work .chap b { color:#a23a22; }
h2 { font-size:clamp(40px, 5vw, 76px); line-height:1.18; }
body.en h2 { font-size:clamp(36px, 4.4vw, 66px); line-height:1.08; }
.body { font-size:15px; line-height:2; max-width:28em; }
body.en .body { font-size:17px; line-height:1.6; max-width:27em; }
picture.bg { display:block; }
picture.bg, picture.bg img { position:absolute; inset:0; width:100%; height:100%; }
body.ja .nw { white-space:nowrap; }
picture.bg img { object-fit:cover; transform:scale(var(--s, 1)) translateY(var(--y, 0)); transition:transform .2s linear; will-change:transform; }

/* 02 type */
.type { position:relative; height:100vh; min-height:640px; overflow:hidden; background:var(--bed2); }
.type::before { content:''; position:absolute; z-index:1; inset:0; background:radial-gradient(70% 80% at 0% 0%, rgba(24,22,20,.85), rgba(24,22,20,0) 70%); pointer-events:none; }
.type .txt { position:absolute; z-index:2; left:var(--g); top:120px; width:min(520px, 38vw); display:flex; flex-direction:column; gap:24px; }
.steps { list-style:none; display:flex; gap:22px; border-top:1px solid #5a5650; padding-top:12px; font-size:13px; color:#8f8b83; }
.steps li { transition:color .5s; } .steps li.on { color:var(--light); }
.steps li span { font-family:"IBM Plex Mono", monospace; font-size:12px; letter-spacing:.08em; margin-right:8px; color:#8f8b83; }
.steps li i { display:none; font-style:normal; }

/* 03 paper & ink */
.paper { position:relative; height:110vh; min-height:680px; background:var(--paper); color:var(--ink); overflow:hidden; }
.paper .stage { position:absolute; inset:0; touch-action:pan-y; }
.paper .stage img, .paper canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.paper canvas { opacity:0; transition:opacity .26s; } .paper canvas.on { opacity:1; }
.paper .lh { position:absolute; left:var(--g); bottom:40px; color:#4e4a43; }
.paper .txt { position:absolute; right:var(--g); bottom:80px; width:min(540px, 40vw); display:flex; flex-direction:column; gap:22px; background:rgba(239,235,226,.0); }
.stocks { display:flex; gap:10px; flex-wrap:wrap; }
.stocks button { font:inherit; font-size:13px; color:var(--ink); background:rgba(239,235,226,.75); border:1px solid rgba(28,28,33,.35); border-radius:999px; padding:9px 14px; cursor:pointer; text-align:left; backdrop-filter:blur(2px); }
.stocks button small { display:none; }
.stocks button[aria-pressed="true"] { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.stocks button[aria-pressed="true"] small { display:block; position:absolute; margin-top:12px; color:#4e4a43; font-size:12px; white-space:nowrap; }
.stocks { position:relative; padding-bottom:30px; }

/* 04 printed work — a gallery: distance, angle and light change per scene */
.work { background:var(--paper); color:var(--ink); }
.work .head { display:grid; grid-template-columns:5fr 7fr; gap:var(--g); padding:140px var(--g) 110px; }
.work .head .body { align-self:end; }
.scene { position:relative; height:100vh; min-height:620px; overflow:hidden; background:#141414; color:var(--light); }
.scene::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(100deg, rgba(255,250,240,0) 35%, rgba(255,250,240,.13) 50%, rgba(255,250,240,0) 65%); transform:translateX(-120%); }
.scene.lit::after { animation:sweep 2.2s ease-out 1 forwards; }
@keyframes sweep { to { transform:translateX(120%); } }
.scene .lab { position:absolute; z-index:2; }
.scene dl { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:13px; margin-top:14px; }
.scene dt { color:#9a968e; } .note { color:#e0735a; }
.sc-card .lab { left:var(--g); bottom:34px; color:#4e4a43; }
.sc-macro .lab { right:var(--g); bottom:34px; color:#2f2c28; text-align:right; background:rgba(239,235,226,.82); padding:10px 12px; }
.sc-far .cap { position:absolute; z-index:2; left:var(--g); top:50%; transform:translateY(-50%); width:min(420px, 34vw); }
.sc-far .cap h3 { font-size:clamp(34px, 3.6vw, 54px); line-height:1.2; margin-top:8px; }
.sc-far .cap .mono { color:#9a968e; }
.sc-spec { height:120vh; color:var(--ink); }
.sc-spec .cap { position:absolute; z-index:2; right:var(--g); bottom:40px; width:320px; background:rgba(239,235,226,.86); padding:16px 18px; }
.sc-spec .cap dt { color:#6c685f; } .sc-spec .note, .sc-card .note { color:var(--verm); }
.work-end { padding:40px var(--g) 64px; color:#5e5a52; line-height:1.8; }

/* 05 closing */
.close { position:relative; min-height:100vh; display:grid; grid-template-columns:7fr 5fr; background:var(--bed2); overflow:hidden; }
.close picture.bg { position:relative; inset:auto; min-height:100vh; }
.close .txt { padding:150px var(--g) 60px; display:flex; flex-direction:column; gap:26px; }
.credit { background:var(--bed2); color:#a8a49b; padding:56px var(--g) 64px; border-top:1px solid #3a3835; display:grid; gap:14px; font-size:13px; line-height:1.9; }
.credit h2 { font-size:12px; color:#d8d4cb; }
.credit p { max-width:62em; } .credit a { color:#d8d4cb; }
.noscript { position:fixed; bottom:0; left:0; right:0; background:var(--paper); color:var(--ink); padding:12px var(--g); z-index:60; }

/* ── mobile: own compositions ── */
@media (max-width:699px) {
  :root { --g:20px; --ix:4.5vw; --iy:9svh; }
  .nav { padding:18px 20px; } .nav .brand small { display:none; } .nav li:not(:last-child) { display:none; }
  .hero .ui { left:calc(var(--ix) + 18px); right:calc(var(--ix) + 18px); bottom:calc(var(--iy) + 20px); }
  .hero .ui p { font-size:14px; } .hero .tag { left:20px; bottom:14px; font-size:9.5px; } .hero .next { display:none; }
  h2 { font-size:38px; } body.en h2 { font-size:34px; }
  .type { height:auto; min-height:0; } .type::before { display:none; }
  .type picture.bg { position:relative; height:calc(100vw * 1.7777); }
  .type .txt { position:static; width:auto; padding:36px 20px 64px; }
  .steps { flex-direction:column; gap:14px; } .steps li i { display:block; margin-top:2px; }
  .paper { height:auto; min-height:0; } .paper .stage { position:relative; height:120vw; }
  .paper .lh { left:20px; bottom:14px; background:rgba(239,235,226,.85); padding:6px 8px; }
  .paper .txt { position:static; width:auto; padding:32px 20px 72px; }
  .stocks button[aria-pressed="true"] small { position:static; white-space:normal; margin-top:6px; color:#d8d4cb; }
  .stocks { padding-bottom:0; } .stocks button { flex:1 1 100%; }
  .work .head { display:block; padding:90px 20px 56px; } .work .head .body { margin-top:20px; }
  .scene { height:auto; min-height:0; aspect-ratio:auto; display:flex; flex-direction:column; }
  .scene picture.bg { position:relative; height:calc(100vw * 1.7777); }
  .scene .lab, .sc-far .cap, .sc-spec .cap { position:static; transform:none; width:auto; padding:18px 20px 30px; background:none; text-align:left; }
  .sc-card .lab, .sc-macro .lab { color:#4e4a43; background:var(--paper); }
  .sc-far .cap { background:#141414; } .sc-spec { height:auto; } .sc-spec .cap { background:var(--paper); }
  .close { display:block; } .close picture.bg { min-height:0; height:calc(100vw * 1.7777); } .close .txt { padding:44px 20px 40px; }
}
@media (min-width:700px) and (max-width:1024px) { /* tablet */
  .type .txt { width:min(420px, 46vw); } .paper .txt { width:min(520px, 56vw); }
  .sc-far .cap { width:min(380px, 44vw); }
}
@media (prefers-reduced-motion: reduce) {
  picture.bg img { transform:none !important; transition:none; } .scene::after { display:none; }
  .lead, .after, .next, .paper canvas, .steps li { transition:none; }
}

/* tap targets (≥ 44 px) */
.nav a { display:inline-block; padding:12px 8px; margin:-12px -8px; }
.stocks button { min-height:44px; }
button.again { min-height:44px; padding:12px 4px; }
.credit a { display:inline-block; padding:12px 8px; margin:-12px -8px; }
.hero .next { padding:12px 0; }