:root{
  --paper:#F6F2EA;
  --ink:#352E2A;
  --brown:#6B4F3A;
  --gold:#C8A97E;
  --cream:#F6F2EA;
  --hairline:rgba(107,79,58,.20);
  --hairline-light:rgba(246,242,234,.35);
  --display:'Canela Web','Prata',serif;
  --utility:'Inter',sans-serif;

  --size-nav:9px;
  --size-hero-logo:min(620px,78vw);
  --size-page-title:clamp(30px,4.2vw,52px);
  --size-index-entry:clamp(20px,2.6vw,30px);
  --size-body:clamp(16px,1.8vw,19px);
  --size-contact-sentence:clamp(25px,3.8vw,44px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--display);font-weight:300;font-size:var(--size-body);
  line-height:1.9;-webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold);color:#fff}
a:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

.label{
  font-family:var(--utility);font-weight:300;font-size:11px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--brown);
}

/* ---------- nav: small serif caps, SUNCE register ---------- */
nav{
  position:absolute;top:0;left:0;right:0;z-index:10;
  display:flex;justify-content:center;align-items:center;
  gap:44px;
  padding:34px 6vw;
}
nav a{
  font-family:var(--display);
  font-size:var(--size-nav);
  letter-spacing:.32em;text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  padding-bottom:5px;border-bottom:1px solid transparent;
  transition:border-color .5s;
}
nav a:hover{border-color:var(--gold)}
nav a.here{border-color:currentColor}
body.overhero nav a{color:var(--cream)}
body.light-hero nav a{color:#241F1B}

/* ---------- home hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  text-align:center;
  background-color:var(--paper);
  background-image:
    linear-gradient(rgba(246,242,234,.28), rgba(246,242,234,.06) 40%, rgba(246,242,234,.16)),
    url('images/hero.jpg');
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat,no-repeat;
}
.hero .logo svg{width:var(--size-hero-logo);height:auto;display:block}
.hero .line{
  margin-top:56px;
  font-family:var(--utility);font-weight:400;
  font-size:12px;letter-spacing:.46em;text-transform:uppercase;
  color:#352E2A;
}
.hero .doors{
  position:absolute;bottom:12vh;left:0;right:0;
  display:flex;justify-content:center;gap:18vw;
}
.hero .doors a{
  font-family:var(--display);font-size:12px;
  letter-spacing:.34em;text-transform:uppercase;
  color:var(--cream);text-decoration:none;
  padding-bottom:6px;border-bottom:1px solid var(--hairline-light);
  transition:border-color .5s;
}
.hero .doors a:hover{border-color:var(--gold)}
.fade{opacity:0;transform:translateY(12px);animation:rise 1.9s ease forwards}
.fade.d1{animation-delay:.7s}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- inner pages ---------- */
main.page{
  min-height:100vh;
  padding:22vh 8vw 20vh;
  max-width:1200px;margin:0 auto;
}
.page-head{margin-bottom:10vh}
.page-head h1{
  font-size:var(--size-page-title);
  font-weight:400;letter-spacing:.01em;
  margin-top:22px;
}
.page-head .intro{
  margin-top:4vh;max-width:34em;
  font-size:var(--size-body);color:var(--ink);
}

/* ---------- index rows ---------- */
.index{border-top:1px solid var(--hairline)}
.region-label{
  padding:7vh 0 2.5vh;
  border-bottom:1px solid var(--hairline);
  color:var(--gold);
}
.entry{
  display:grid;grid-template-columns:64px 1fr auto;
  align-items:baseline;gap:4vw;
  padding:5vh 0;border-bottom:1px solid var(--hairline);
  text-decoration:none;color:var(--ink);
}
.entry .numeral{font-family:var(--utility);font-weight:300;font-size:11px;letter-spacing:.3em;color:var(--gold)}
.entry .name{font-size:var(--size-index-entry);font-weight:400;line-height:1.35;transition:color .5s}
.entry:hover .name{color:var(--brown)}
.entry .meta{
  font-family:var(--utility);font-weight:300;font-size:11px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--brown);
  text-align:right;white-space:nowrap;
}
.entry.pending{opacity:.38}
.index-note{margin-top:5vh;font-style:italic;font-size:15px;color:var(--brown)}

/* ---------- prose pages ---------- */
.prose{max-width:36em;line-height:2.05}
.prose p + p{margin-top:2.2em}
.prose .opening{font-size:clamp(20px,2.4vw,26px);line-height:1.9;margin-bottom:2.6em}

.craft-item{
  padding:6.5vh 0;border-top:1px solid var(--hairline);
  display:grid;grid-template-columns:1fr 2fr;gap:6vw;max-width:56em;
}
.craft-item:last-of-type{border-bottom:1px solid var(--hairline)}
.craft-item h3{font-weight:400;font-size:clamp(21px,2.4vw,28px)}
.craft-item p{font-size:16px}

/* ---------- contact ---------- */
.contact{
  min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;
  padding:0 8vw;
}
.contact .sentence{
  font-size:var(--size-contact-sentence);
  line-height:1.65;max-width:19em;margin:10vh 0 12vh;
}
.contact .ways{display:flex;flex-direction:column;gap:20px;align-items:center}
.contact .ways a{
  color:var(--ink);text-decoration:none;font-size:16px;
  border-bottom:1px solid var(--hairline);padding-bottom:3px;
  transition:border-color .5s;
}
.contact .ways a:hover{border-color:var(--gold)}
.clock{width:54px;height:54px}
.clock circle{fill:none;stroke:var(--brown);stroke-width:1.3}
.clock line{stroke:var(--gold);stroke-width:1.5;stroke-linecap:round}

footer{
  padding:6vh 6vw;display:flex;justify-content:space-between;align-items:center;
}
footer .label{font-size:10px}
body.overhero footer{position:absolute;bottom:0;left:0;right:0;padding:4vh 6vw}
body.overhero footer .label{color:var(--cream);opacity:.7}
body.light-hero footer{position:absolute;bottom:0;left:0;right:0;padding:4vh 6vw}
body.light-hero footer .label{color:#352E2A}

.reveal{opacity:0;transform:translateY(24px);transition:opacity 1.2s ease,transform 1.2s ease}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .fade,.reveal{animation:none;transition:none;opacity:1;transform:none}
  html{scroll-behavior:auto}
}
@media (max-width:760px){
  nav{gap:22px;padding:26px 4vw;flex-wrap:wrap}
  nav a{letter-spacing:.2em;font-size:10px}
  .hero .doors{gap:12vw;bottom:14vh}
  main.page{padding:18vh 7vw 16vh}
  .entry{grid-template-columns:1fr;gap:8px;padding:4vh 0}
  .entry .meta{text-align:left}
  .craft-item{grid-template-columns:1fr;gap:14px}
}