/* 町家 — a property site with a film at the top of it.
   Warm, not ink: this is the one brief in the portfolio that must not be cold.

   Type rule, after a legibility pass: display type is Cormorant at 500/600 and
   never below 20px; everything functional — nav, labels, specs, captions, form —
   is Inter at 500/600/700. A 300-weight serif at 10px over a photograph is
   unreadable, which is exactly what the first pass shipped. */
:root{
  --ink:#17120E;         /* warm near-black */
  --washi:#F4EFE6;       /* paper */
  --sugi:#8A5A34;        /* cedar */
  --ai:#2E3A55;          /* indigo, from the noren */
  --koke:#55643F;        /* moss — the only green */
  --akari:#E8B05C;       /* lamplight — the only accent */
  --ui:rgba(244,239,230,.92);
  --ui-dim:rgba(244,239,230,.66);
  --rule:rgba(23,18,14,.16);
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Cormorant Garamond",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --jp:"Noto Serif JP",serif;
  --pad:clamp(20px,5vw,72px);
}

*{box-sizing:border-box}
/* overflow-x MUST live on html, not body: setting it on body makes CSS compute
   body's overflow-y to auto, which turns body into its own scroll container,
   collapses html to zero height and kills document scrolling entirely. */
html{scroll-behavior:smooth; overflow-x:hidden}
body{
  margin:0; background:var(--ink); color:var(--washi);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}

/* ---------- the film layer ---------- */
#film,#motes{position:fixed; inset:0; width:100vw; height:100vh; display:block}
#film{z-index:1}
#motes{z-index:2; pointer-events:none}

#grain{
  position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/></filter>\
<rect width='160' height='160' filter='url(%23n)'/></svg>");
}
#vignette{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(ellipse at 50% 48%,transparent 42%,rgba(8,5,3,.55) 100%);
  transition:opacity .5s ease;
}
body.past-film #grain,body.past-film #vignette,
body.past-film #film,body.past-film #motes{opacity:0; pointer-events:none}

/* ---------- masthead / nav ---------- */
#mast{
  position:fixed; inset:0 0 auto 0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:18px var(--pad);
  transition:background .4s ease,border-color .4s ease,padding .4s ease;
  border-bottom:1px solid transparent;
}
body.past-film #mast{
  background:rgba(244,239,230,.96); border-bottom-color:var(--rule);
  color:var(--ink); backdrop-filter:blur(8px);
  padding-top:14px; padding-bottom:14px;
}
.brand{display:flex; align-items:baseline; gap:12px; text-decoration:none}
.mark{font-family:var(--jp); font-weight:600; font-size:21px; letter-spacing:.14em}
.mark-latin{font-size:11px; font-weight:600; letter-spacing:.2em; color:var(--ui-dim)}
body.past-film .mark-latin{color:rgba(23,18,14,.6)}

.mast-nav{display:flex; align-items:center; gap:26px}
.mast-nav a{
  font-size:14px; font-weight:500; text-decoration:none; color:var(--ui);
  opacity:0; pointer-events:none; transition:opacity .4s ease,color .2s ease;
}
body.past-film .mast-nav a{opacity:1; pointer-events:auto; color:var(--ink)}
.mast-nav a:hover{color:var(--sugi)}
.mast-cta{
  padding:9px 18px; border-radius:999px;
  background:var(--ink); color:var(--washi)!important; font-weight:600!important;
}
.mast-cta:hover{background:var(--sugi)}

/* ---------- film HUD ---------- */
#depth{
  position:fixed; z-index:6; left:var(--pad); bottom:26px;
  font-family:var(--mono); font-size:13px; font-weight:500;
  color:var(--ui); letter-spacing:.02em; transition:opacity .4s ease;
}
#depth .unit{opacity:.7; margin-left:8px; font-size:11px; letter-spacing:.1em}

#chapter{
  position:fixed; z-index:6; right:var(--pad); top:50%; transform:translateY(-50%);
  writing-mode:vertical-rl; text-orientation:mixed;
  display:flex; align-items:center; gap:14px; transition:opacity .5s ease;
}
#chapter-jp{font-family:var(--jp); font-weight:600; font-size:28px; letter-spacing:.28em}
#chapter-en{font-size:11px; font-weight:600; letter-spacing:.26em; color:var(--ui-dim)}

#thresholds{
  position:fixed; z-index:6; left:50%; transform:translateX(-50%); bottom:24px;
  display:flex; align-items:center; transition:opacity .4s ease;
}
#thresholds button{
  appearance:none; border:0; background:transparent; cursor:pointer;
  width:42px; height:24px; padding:0; position:relative;
}
#thresholds button::before{
  content:""; position:absolute; left:0; top:50%; width:100%; height:1px;
  background:rgba(244,239,230,.3);
}
#thresholds button::after{
  content:""; position:absolute; left:50%; top:50%;
  width:4px; height:4px; margin:-2px 0 0 -2px; border-radius:50%;
  background:rgba(244,239,230,.55); transition:all .35s ease;
}
#thresholds button[aria-current="true"]::after{
  background:var(--akari); width:8px; height:8px; margin:-4px 0 0 -4px;
  box-shadow:0 0 14px var(--akari);
}
body.past-film #depth,body.past-film #chapter,
body.past-film #thresholds,body.past-film #close{opacity:0; pointer-events:none}

/* ---------- hero ---------- */
#hero{
  position:fixed; inset:0; z-index:6; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:28px; text-align:center;
  padding:0 24px; pointer-events:none;
  transition:opacity .7s ease,transform .7s ease;
  /* the aerial is bright and hazy; a text-shadow alone does not carry the
     middle line. This scrim dies with the hero so the film is never dimmed. */
  background:radial-gradient(ellipse 72% 58% at 50% 50%,
             rgba(12,8,5,.52) 0%, rgba(12,8,5,.28) 55%, transparent 80%);
}
#hero.off{opacity:0; transform:translateY(-18px)}
.hero-kicker{
  margin:0; font-size:12px; font-weight:600; letter-spacing:.34em;
  color:var(--ui); text-indent:.34em;
}
.hero-title{
  margin:0; font-family:var(--serif); font-weight:600;
  font-size:clamp(32px,5vw,68px); line-height:1.24; letter-spacing:.005em;
  text-shadow:0 2px 34px rgba(8,5,3,.7);
}
.hero-title em{font-style:italic; color:var(--akari)}
.hero-scroll{
  margin:0; font-size:12px; font-weight:600; letter-spacing:.22em;
  color:var(--ui); text-transform:uppercase;
}
.hero-scroll::after{
  content:""; display:block; width:1px; height:40px; margin:18px auto 0;
  background:linear-gradient(var(--ui),transparent);
}

/* ---------- the one breath of white ---------- */
#spec{
  position:fixed; inset:0; z-index:5; display:flex; align-items:center;
  justify-content:center; background:var(--washi); color:var(--ink);
  opacity:0; pointer-events:none; transition:opacity .45s ease; padding:var(--pad);
}
#spec.on{opacity:1}
.spec-inner{max-width:720px}

/* ---------- the film's last beat ---------- */
#close{
  position:fixed; inset:0; z-index:5; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:48px;
  opacity:0; pointer-events:none; transition:opacity .6s ease;
}
#close.on{opacity:1; pointer-events:auto}
.close-line{
  margin:0; text-align:center; font-family:var(--serif); font-weight:500;
  font-size:clamp(22px,2.6vw,32px); line-height:1.7;
  text-shadow:0 2px 30px rgba(8,5,3,.8);
}
.lamp{
  display:grid; place-items:center; width:190px; height:190px; border-radius:50%;
  text-decoration:none; color:var(--ink);
  background:radial-gradient(circle,#FCE6BE 0%,var(--akari) 56%,rgba(232,176,92,0) 78%);
  animation:breathe 3.4s ease-in-out infinite;
}
.lamp span{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase}
@keyframes breathe{
  0%,100%{transform:scale(1); filter:brightness(1)}
  50%{transform:scale(1.045); filter:brightness(1.14)}
}

/* ============ the page below the film ============ */
#scroller{position:relative; z-index:4}
#page{position:relative; z-index:8; background:var(--washi); color:var(--ink)}

.band{padding:clamp(64px,9vw,132px) 0; border-bottom:1px solid var(--rule)}
.band.dark{background:var(--ink); color:var(--washi); border-bottom-color:rgba(244,239,230,.12)}
.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 18px; font-size:12px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--sugi);
}
.band.dark .eyebrow,#spec .eyebrow{color:var(--akari)}
.h2{
  margin:0; font-family:var(--serif); font-weight:600;
  font-size:clamp(30px,4vw,52px); line-height:1.16;
}
.col-text p{margin:0 0 20px; font-size:17px; line-height:1.72}
.col-text em{font-style:italic; font-family:var(--serif); font-size:1.09em}
.lede{font-size:clamp(17px,1.5vw,20px); line-height:1.68; margin:20px 0 0; opacity:.86}
.note{font-size:14.5px; line-height:1.62; color:rgba(23,18,14,.66)}
.band.dark .note{color:var(--ui-dim)}

/* stats row */
.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}
.stat-n{display:block; font-family:var(--mono); font-size:clamp(20px,2.2vw,30px); font-weight:500}
.stat-l{
  display:block; margin-top:6px; font-size:12px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(23,18,14,.6);
}

/* 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;
  filter:saturate(.94); transition:transform .5s ease,filter .5s ease;
}
.grid figure:hover img{transform:scale(1.02); filter:saturate(1.04)}
.grid figcaption{
  margin-top:10px; font-size:13px; font-weight:500; color:var(--ui-dim);
  letter-spacing:.02em;
}

/* plan */
.plan-wrap{margin-top:clamp(36px,5vw,64px); overflow-x:auto}
#plan-svg{width:100%; min-width:620px; height:auto}
.plan-room rect,.plan-room line{fill:none; stroke:var(--ink); stroke-width:1.6}
.plan-room rect:first-child{fill:rgba(23,18,14,.035)}
.plan-niwa{fill:var(--koke)!important; opacity:.24; stroke:none!important}
.plan-axis{stroke:var(--sugi); stroke-width:2; stroke-dasharray:6 7}
.plan-label text{
  font-family:var(--jp); font-size:16px; font-weight:600; fill:var(--ink);
  text-anchor:middle;
}
.plan-label text.en{
  font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.14em;
  fill:rgba(23,18,14,.55);
}
.plan-label text.dim{
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.16em;
  fill:var(--sugi);
}

/* specification list */
.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 var(--rule);
}
.spec-list dt{
  font-size:13px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(23,18,14,.62);
}
.spec-list dd{margin:0; font-family:var(--mono); font-size:14px; text-align:right}
.price{margin:36px 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(23,18,14,.6);
  margin-bottom:8px;
}

/* neighbourhood */
.near{list-style:none; margin:6px 0 0; padding:0}
.near li{
  display:flex; gap:20px; padding:13px 0;
  border-bottom:1px solid rgba(244,239,230,.14); font-size:16px;
}
.near span{font-family:var(--mono); font-size:13px; min-width:66px; color:var(--akari); font-weight:500}

/* form */
.form{display:grid; gap:18px}
.form label{
  display:grid; gap:8px; font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(23,18,14,.62);
}
.form input,.form textarea{
  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,.form textarea:focus{outline:0; border-bottom-color:var(--sugi)}
.form button{
  justify-self:start; margin-top:10px; padding:15px 34px; border:0; border-radius:999px;
  background:var(--ink); color:var(--washi); font-family:var(--sans);
  font-size:14px; font-weight:600; letter-spacing:.06em; cursor:pointer;
  transition:background .2s ease;
}
.form button:hover{background:var(--sugi)}
.form-msg{margin:0; font-size:14.5px; font-weight:500; color:var(--koke); min-height:1.2em}

/* footer */
.foot{background:var(--ink); color:var(--washi); border-bottom:0}
.foot-in{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:28px; align-items:end}
.foot .note p{margin:0 0 6px}
.foot .dim{opacity:.5; text-align:right}

.ns{position:relative; z-index:9; padding:40px; text-align:center}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .two{grid-template-columns:1fr; gap:28px}
  .stats{grid-template-columns:repeat(3,1fr)}
  .grid{grid-template-columns:repeat(2,1fr)}
  .grid .g-wide{grid-column:span 2}
  .spec-list{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr; align-items:start}
  .foot .dim{text-align:left}
}
@media (max-width:720px){
  body{font-size:16px}
  .mast-nav a:not(.mast-cta){display:none}
  #chapter{right:14px}
  #chapter-jp{font-size:21px}
  .grid{grid-template-columns:1fr}
  .grid .g-wide{grid-column:span 1}
  .stats{grid-template-columns:repeat(2,1fr)}
  .lamp{width:158px; height:158px}
  #thresholds{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lamp{animation:none}
  .grid img{transition:none}
}