/* Terra Naza design tokens. Basis: DESIGN_DIRECTION.md (mood board 2026-08-27). */
:root{
  --bone:#EFE9DE; --plaster:#F7F3EA; --clay:#A8663B; --umber:#241C14;
  --umber-2:#2E241A; --ash:#6E655A; --ink:#1E1912; --paper-ink:#F1EBE0;
  --paper-soft:#C9BFAE; --ember:#CE6E24; --line:rgba(110,101,90,.32);
  --line-dark:rgba(201,191,174,.22);
}
*{margin:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bone);color:var(--ink);
  font-family:Newsreader,Georgia,serif;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
body.dark{color:var(--paper-ink);background:var(--umber)
  radial-gradient(120% 140% at 20% 0%,#452A12 0%,#2B1808 52%,#170D05 100%);
  background-attachment:fixed}

/* Akogare hero (V1, locked 2026-08-27) */
.akohero{position:relative;min-height:86vh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:60px 20px}
.akohero .bg{position:absolute;inset:0;background:url("assets/nara_dark_profile.jpg")
  center 44%/cover no-repeat;filter:sepia(.25) saturate(1.05) brightness(.9)}
.akohero .wash{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(24,13,5,.74),rgba(90,52,14,.30) 45%,rgba(24,13,5,.84))}
.akohero>*{position:relative}
.akohero .ring{width:46px;height:60px;border:1.5px solid #F3E9D2;
  border-radius:50%/46%;display:flex;align-items:center;justify-content:center;
  font-family:Italiana,serif;font-size:20px;color:#F3E9D2;margin-bottom:14px}
.akohero .since{font-family:Archivo,sans-serif;font-size:10px;
  letter-spacing:.3em;color:#DCC9A6;margin-bottom:clamp(28px,5vh,56px)}
.akohero h1{font-family:Italiana,serif;font-weight:400;color:#F3E9D2;
  font-size:clamp(52px,10.5vw,168px);line-height:.92;letter-spacing:.06em;
  white-space:nowrap}
.akohero .sub{font-family:Archivo,sans-serif;color:#F3E9D2;
  font-size:clamp(11px,1.1vw,15px);letter-spacing:.42em;margin-top:30px}
.akohero .blurb{font-family:Archivo,sans-serif;font-size:10.5px;
  letter-spacing:.18em;line-height:2;margin-top:24px;max-width:640px;
  color:#C9B592;text-transform:uppercase}
.akohero .btn{margin-top:38px;border-color:#DCC9A6;color:#F3E9D2}
.akohero .btn:hover{background:#DCC9A6;color:#241505}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

.lab{font-family:Archivo,Arial,sans-serif;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ash)}
.dark .lab{color:var(--paper-soft)}
.wordmark{font-family:Italiana,Fraunces,serif;font-size:21px;letter-spacing:.3em;
  text-transform:uppercase;white-space:nowrap}
.display{font-family:Fraunces,Georgia,serif;font-weight:300;text-wrap:balance}

header.nav{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;row-gap:12px;
  padding:24px clamp(20px,5vw,56px);border-bottom:1px solid var(--line)}
.dark header.nav{border-color:var(--line-dark)}
header.nav .links{display:flex;gap:clamp(12px,3vw,34px);flex-wrap:wrap;
  row-gap:8px}
header.nav .links a:hover{color:var(--clay)}

.beads{display:flex;gap:5px;justify-content:center;padding:10px 0}
.beads i{width:7px;height:7px;border-radius:50%;display:block}

.sect{padding:clamp(48px,8vw,88px) clamp(20px,5vw,56px)}
.sect h2{font-family:Fraunces,serif;font-weight:300;
  font-size:clamp(30px,4vw,44px);margin:8px 0 30px}
.hairline-top{border-top:1px solid var(--line)}
.dark .hairline-top{border-top:1px solid var(--line-dark)}

.btn{display:inline-block;font-family:Archivo,sans-serif;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;padding:15px 28px;
  border:1px solid var(--clay);color:var(--clay)}
.btn:hover{background:var(--clay);color:var(--bone)}
.dark .btn{border-color:var(--ember);color:var(--ember)}
.dark .btn:hover{background:var(--ember);color:var(--umber)}
.btn.solid{background:var(--clay);color:var(--bone)}
.btn.solid:hover{background:var(--ink)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:26px}
.card{background:var(--plaster);border:1px solid var(--line);
  transition:transform .25s ease}
.card:hover{transform:translateY(-4px)}
.card .ph{aspect-ratio:4/5;overflow:hidden}
.card img{width:100%;height:100%;object-fit:cover}
.card .m{display:flex;justify-content:space-between;align-items:baseline;
  padding:14px 16px;gap:10px}
.card .nm{font-family:Fraunces,serif;font-size:21px}
.card .pr{font-family:Archivo,sans-serif;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ash)}
.gone{color:var(--clay)}

footer{padding:30px clamp(20px,5vw,56px);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.dark footer{border-color:var(--line-dark)}

@media (max-width:520px){
  header.nav{flex-direction:column;align-items:center}
  header.nav .links{display:flex;flex-direction:column;align-items:center;
    width:auto;gap:9px}
  header.nav .links a.lab{font-size:10.5px;letter-spacing:.12em}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* melt a dark-studio video into the dark room, no visible box */
.melt{-webkit-mask-image:radial-gradient(ellipse 58% 54% at 50% 47%,
  #000 38%,transparent 76%);
  mask-image:radial-gradient(ellipse 58% 54% at 50% 47%,
  #000 38%,transparent 76%)}
/* framed film, hung like an artwork */
.filmframe{border:1px solid rgba(201,191,174,.18);
  box-shadow:0 34px 70px rgba(0,0,0,.55);background:#191009}