/* tsumida.ai home (2026-10-31): one page that scrolls, the painted rooms one after another.
   Replaced the click-driven house walk (house.js / house.css, now in retired/), which hid the
   copy from search engines behind clicks. */
@font-face{font-family:'Kaisei Decol L';src:url(/fonts/KaiseiDecol-Latin.woff) format('woff');font-display:swap}
@font-face{font-family:'Zen Antique Soft L';src:url(/fonts/ZenAntiqueSoft-Latin.woff) format('woff');font-display:swap}
@font-face{font-family:'Yuji Syuku L';src:url(/fonts/YujiSyuku-Latin.woff) format('woff');font-display:swap}

:root{
  --sumi:#0a0b0f; --sumi-2:#11131b; --sumi-3:#181b25;
  --washi:#e9e1cd; --washi-dim:#a8a08c; --washi-faint:#6a665a;
  --shu:#cf3b2b; --shu-soft:#e0715f; --kin:#c99a4e; --lamp:#f2b766;
  --line:rgba(233,225,205,.12);
  --head:'Kaisei Decol L','Shippori Mincho','Hiragino Mincho ProN',serif;
  --body:'Zen Antique Soft L','Shippori Mincho','Hiragino Mincho ProN',serif;
  --hand:'Yuji Syuku L','Yuji Syuku','Shippori Mincho',serif;
  --jp:'Shippori Mincho','Hiragino Mincho ProN',serif;
  --brush:'Yuji Syuku','Shippori Mincho',serif;
  --gutter:clamp(16px,5.5vw,84px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-color:var(--washi-faint) var(--sumi)}
body{background:var(--sumi);color:var(--washi);font-family:var(--body);
  -webkit-font-smoothing:antialiased;overflow-x:clip;line-height:1.6}
img{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
::selection{background:var(--shu);color:#fff6e8}
:focus-visible{outline:1.5px solid var(--shu-soft);outline-offset:4px;border-radius:2px}
h1,h2,h3{font-family:var(--head);font-weight:400;text-wrap:balance;line-height:1.15}
p{text-wrap:pretty}
.jp{font-family:var(--jp)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the bar every draft shares: real links to real anchors */
.bar{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:18px var(--gutter);transition:background .5s var(--ease),backdrop-filter .5s}
.bar.solid{background:rgba(10,11,15,.86);backdrop-filter:blur(10px)}
.bar .brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.bar .brand img:first-child{width:28px}
.bar .brand img:last-child{width:112px;opacity:.92}
.bar nav{display:flex;gap:clamp(14px,2.6vw,36px)}
.bar nav a{font-family:var(--hand);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--washi-dim);text-decoration:none;padding:6px 0;transition:color .3s}
.bar nav a:hover{color:var(--washi)}
@media (max-width:640px){
  .bar .brand img:last-child{display:none}
  .bar nav a{font-size:11px;letter-spacing:.14em}
}

.foot{padding:56px var(--gutter) 40px;display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between;
  align-items:end;color:var(--washi-faint);font-family:var(--hand);font-size:12px;letter-spacing:.08em;
  border-top:1px solid var(--line)}
.foot a{color:var(--washi-dim);text-decoration:none}
.foot a:hover{color:var(--washi)}
.foot .links{display:flex;gap:22px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* A · THE SCENES, SCROLLED: the same painted rooms, now one after another down a normal page */
.room{position:relative;padding:clamp(96px,14vh,160px) var(--gutter);isolation:isolate}
.room::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--art) center / cover no-repeat;opacity:var(--a,.5)}
.room::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--sumi) 0%,rgba(10,11,15,.35) 18%,rgba(10,11,15,.35) 82%,var(--sumi) 100%)}
.room h2{font-size:clamp(40px,6vw,84px);display:flex;align-items:baseline;gap:.4em;flex-wrap:wrap}
.room h2 .jp{font-family:var(--brush);font-size:.62em;color:var(--shu-soft)}
.room .lede{max-width:46ch;color:var(--washi-dim);margin-top:14px;font-size:clamp(16px,1.3vw,19px)}

/* hero */
.hero{min-height:100svh;display:grid;align-items:center;padding:120px var(--gutter) 80px;position:relative;isolation:isolate;overflow:hidden}
.hero .art{position:absolute;inset:0;z-index:-2;background:url(/assets/hero/scene.webp?v=3) 100% 50% / cover no-repeat}
.hero .shade{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(10,11,15,.8) 0%,rgba(10,11,15,.35) 45%,transparent 70%),
  linear-gradient(0deg,var(--sumi) 0%,transparent 30%)}
.hero .fig{position:absolute;z-index:-1;right:12vw;bottom:0;height:min(84vh,82vw);width:auto;
  filter:drop-shadow(0 0 46px rgba(207,59,43,.22)) drop-shadow(0 12px 22px rgba(0,0,0,.55));
  animation:rise 2.2s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
.hero .copy{max-width:560px}
.hero .mark{width:min(440px,70vw)}
.hero h1{font-size:clamp(26px,2.8vw,40px);margin-top:28px;max-width:20ch}
.hero h1 b{font-weight:400;color:var(--shu-soft)}
.hero p{margin-top:16px;color:var(--washi-dim);max-width:40ch;font-size:clamp(16px,1.2vw,18px)}
.hero .go{display:inline-flex;gap:12px;align-items:center;margin-top:34px;font-family:var(--hand);
  letter-spacing:.16em;text-transform:uppercase;font-size:13px;text-decoration:none;
  padding:14px 22px;border:1px solid rgba(207,59,43,.6);background:rgba(207,59,43,.12);transition:background .3s}
.hero .go:hover{background:rgba(207,59,43,.3)}

/* projects: the hall, centred. Six lit lanterns hang in rows, each with its product's best App Store
   screen hanging under it on a cord; the words sit centred below, like the team's ema */
.projects{--art:url(/assets/hero/interior.webp);--a:.42;text-align:center}
.projects h2{justify-content:center}
.projects .lede{margin-inline:auto}
.plist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(72px,10vh,120px) clamp(28px,4vw,64px);
  margin:clamp(56px,8vh,96px) auto 0;max-width:1180px}
.proj{display:flex;flex-direction:column;align-items:center}
.proj:nth-child(3n+2){margin-top:clamp(0px,5vw,72px)}
.proj .hang{position:relative;width:54px;filter:drop-shadow(0 0 26px rgba(242,183,102,.5))}
.proj .hang span{position:absolute;inset:0;display:grid;place-items:center;writing-mode:vertical-rl;
  font-family:var(--brush);font-size:17px;color:#3a1d10;letter-spacing:.08em}
.proj .hang::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:26px;background:linear-gradient(var(--kin),rgba(201,154,78,.2))}
.proj .shot{display:block;margin-top:26px;width:min(250px,100%);aspect-ratio:600/1300;border-radius:24px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 34px 60px -24px rgba(0,0,0,.85),0 0 0 6px rgba(10,11,15,.5);
  transform-origin:50% -26px;transition:transform .8s var(--ease),box-shadow .8s var(--ease)}
.proj .shot img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.proj .shot img.fit{object-fit:contain;object-position:50% 50%;background:linear-gradient(#f9cfd6,#fde9e5)}
.proj:nth-child(odd) .shot{transform:rotate(-1.2deg)}
.proj:nth-child(even) .shot{transform:rotate(1.2deg)}
.proj:hover .shot{transform:rotate(0) translateY(-6px);box-shadow:0 44px 70px -24px rgba(0,0,0,.9),0 0 0 6px rgba(10,11,15,.5),0 0 60px -10px rgba(242,183,102,.35)}
.proj .hd{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:30px}
.proj .hd img{width:40px;height:40px;border-radius:10px}
.proj h3{font-size:clamp(26px,2.4vw,34px);white-space:nowrap}
.proj .rd{font-family:var(--hand);font-size:13px;color:var(--washi-faint);letter-spacing:.06em;margin-top:6px;text-wrap:balance}
.proj p{margin-top:14px;max-width:34ch;font-size:16px;color:var(--washi);text-wrap:balance}
.proj p.games{font-size:14px;color:var(--washi-dim);line-height:1.8}
.proj p.games a{white-space:nowrap;text-decoration-color:rgba(242,183,102,.5)}
.proj p.games a:hover{color:var(--lamp)}
.proj .meta{margin-top:16px;display:flex;flex-direction:column;gap:6px;align-items:center;font-family:var(--hand);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--washi-dim)}
.proj .meta a{color:var(--shu-soft);text-decoration:none;letter-spacing:.08em;text-transform:none;font-size:14px;overflow-wrap:anywhere}
.proj .meta a:hover{text-decoration:underline}

/* about: the kakejiku, read in place */
.about{--art:url(/assets/scenes/garden.webp);--a:.32;display:grid;justify-items:center}
.kake{width:min(560px,100%);filter:drop-shadow(0 30px 50px rgba(0,0,0,.6))}
.kake .km{background:url(/assets/mobile/kake_mid.webp) center / 100% auto repeat-y;padding:10px 17% 6px;color:#2a2219}
.kake h2{font-size:clamp(30px,3.6vw,44px);color:#1c1610;justify-content:center}
.kake h2 .jp{color:var(--shu)}
.kake p{margin-top:16px;font-size:17px;line-height:1.75}
.kake .hi{color:#9b2a1d}
.kake .seal{display:flex;align-items:center;gap:14px;margin:26px 0 8px;text-decoration:none}
.kake .seal img{width:54px}
.kake .seal b{display:block;font-weight:400;font-family:var(--head);font-size:18px}
.kake .seal span{font-family:var(--hand);font-size:14px;color:#6a5844}

/* team: the ema on the shrine rack, bios out in the open */
.team{--art:url(/assets/scenes/shrine.webp);--a:.42}
.ema-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(48px,7vh,80px);max-width:1180px}
.ema{text-align:center}
.ema .plq{position:relative;width:min(220px,100%);margin:0 auto}
.ema .plq .fam{position:absolute;inset:28% 0 0;display:grid;place-items:center;font-family:var(--brush);font-size:clamp(44px,5vw,72px);color:#2b2118;opacity:.85}
.ema h3{font-size:24px;margin-top:20px}
.ema .role{font-family:var(--hand);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--shu-soft);margin-top:6px}
.ema p{margin:12px auto 0;max-width:34ch;color:var(--washi-dim);font-size:16px}
.mail{display:inline-block;margin-top:56px;font-family:var(--head);font-size:clamp(22px,2.4vw,32px);color:var(--washi);text-decoration-color:var(--shu)}

@media (min-width:801px) and (max-width:1100px){.plist{grid-template-columns:repeat(2,minmax(0,1fr))}.proj:nth-child(3n+2){margin-top:0}}
@media (max-width:800px){
  .plist{grid-template-columns:1fr}
  .proj:nth-child(3n+2){margin-top:0}
  .ema-row{grid-template-columns:1fr;gap:56px}
  .hero{align-items:end}
  .hero .fig{right:-14vw;height:62svh;opacity:.55}
}

/* the way into the 3D walk (/interactive): a quiet tab on the right edge, a small line at the foot of the hero on phones */
.walk{position:fixed;z-index:19;right:0;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;
  display:flex;align-items:center;gap:10px;padding:18px 9px;font-family:var(--hand);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;text-decoration:none;color:var(--washi-faint);background:rgba(10,11,15,.55);
  border:1px solid var(--line);border-right:0;backdrop-filter:blur(6px);opacity:.75;
  transition:color .4s,opacity .4s,border-color .4s,padding .4s var(--ease)}
.walk-k{font-family:var(--brush);font-size:15px;letter-spacing:0;color:var(--kin);transition:color .4s,text-shadow .4s}
.walk:hover,.walk:focus-visible{opacity:1;color:var(--washi);border-color:rgba(242,183,102,.45);padding-right:14px}
.walk:hover .walk-k{color:var(--lamp);text-shadow:0 0 12px rgba(242,183,102,.8)}
.walk-m{display:none}
@media (max-width:800px){
  .walk{display:none}
  .walk-m{display:block;width:max-content;margin-top:18px;font-family:var(--hand);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--washi-faint);text-decoration:none}
  .walk-m span{font-family:var(--brush);color:var(--kin);letter-spacing:0;font-size:14px;margin-right:4px}
}