@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,400&family=Manrope:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper:#FBFAF7;
  --paper-warm:#F2EFE7;
  --ink:#151310;
  --ink-soft:#3B372F;
  --muted:#847C6C;
  --line:#E4DFD2;
  --line-strong:#151310;
  --brass:#7A5C3E;
  --brass-light:#A6835C;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Manrope',sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
ul{list-style:none;}
h1,h2,h3,h4{
  font-family:'Fraunces',serif;
  font-weight:400;
  letter-spacing:-0.01em;
}
.mono{
  font-family:'IBM Plex Mono',monospace;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.wrap{max-width:1320px; margin:0 auto; padding:0 48px;}

/* ---------- tag / category label (signature element, used sparingly) ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--brass);
}
.tag::before{
  content:'';
  width:16px; height:1px;
  background:var(--brass);
}

/* ---------- header ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:30px 0;
  transition:padding .3s ease, background .3s ease, border-color .3s ease;
  mix-blend-mode:normal;
}
header.solid{
  background:rgba(251,250,247,0.92);
  backdrop-filter:blur(10px);
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
nav{display:flex; align-items:center; justify-content:space-between;}
.brand{display:flex; flex-direction:column; align-items:center; line-height:1.15;}
.logo{
  font-family:'Fraunces',serif;
  font-size:26px;
  letter-spacing:0.01em;
  color:var(--ink-onhero, var(--ink));
}
.tagline{
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;
  letter-spacing:0.06em;
  margin-top:4px;
  opacity:0.72;
  white-space:nowrap;
  text-align:center;
}
header.light .logo, header.light .nav-links a, header.light .nav-toggle, header.light .tagline, header.light .dropdown-toggle{color:#fff;}
header.solid .logo, header.solid .nav-links a, header.solid .nav-toggle, header.solid .tagline, header.solid .dropdown-toggle{color:var(--ink);}
.logo em{font-style:normal; color:var(--brass-light);}
@media (max-width:960px){ .tagline{display:none;} }
.nav-links{display:flex; align-items:center; gap:22px;}
.nav-links a{
  font-size:12.5px;
  letter-spacing:0.02em;
  transition:opacity .25s ease;
  opacity:0.78;
  white-space:nowrap;
}
.nav-links a:hover, .nav-links a.active{opacity:1;}
.nav-links a.active{border-bottom:1px solid currentColor; padding-bottom:3px;}
.nav-toggle{display:none; background:none; border:none; font-size:24px; cursor:pointer;}
.nav-cta{
  border:1px solid currentColor;
  padding:8px 18px;
  font-size:12.5px !important;
  letter-spacing:0.04em;
  opacity:1 !important;
}
.nav-cta:hover{background:var(--brass); border-color:var(--brass); color:#fff !important;}
@media (max-width:960px){ .nav-cta{border-color:#EFE9DC;} }

.has-dropdown{position:relative;}
.dropdown-toggle{
  font-family:inherit; font-size:12.5px; letter-spacing:0.02em; color:inherit;
  background:none; border:none; padding:0; cursor:pointer; opacity:0.78;
  transition:opacity .25s ease;
}
.dropdown-toggle:hover{opacity:1;}
.has-dropdown.open .dropdown-toggle, .has-dropdown:hover .dropdown-toggle{opacity:1;}
.has-dropdown > .dropdown-toggle::after{content:" ▾"; font-size:9px; opacity:0.7;}
.dropdown{
  display:none; position:absolute; top:100%; left:0; margin-top:14px;
  background:var(--paper); border:1px solid var(--line); min-width:190px;
  box-shadow:0 8px 24px rgba(0,0,0,0.08); z-index:80; padding:6px 0;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown, .has-dropdown.open .dropdown{display:block;}
.dropdown li{list-style:none;}
.dropdown a{
  display:block; padding:11px 18px; font-size:12.5px; color:var(--ink) !important;
  opacity:1 !important; white-space:nowrap;
}
.dropdown a::after{content:none;}
.dropdown a:hover{background:var(--paper-warm);}

@media (max-width:960px){
  .wrap{padding:0 24px;}
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:80%; max-width:340px;
    background:var(--ink); flex-direction:column; align-items:flex-start;
    padding:110px 32px 40px; gap:26px;
    transform:translateX(100%); transition:transform .35s ease;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{color:#EFE9DC !important; opacity:0.85;}
  .dropdown-toggle{color:#EFE9DC !important; opacity:0.85;}
  .nav-toggle{display:block;}
  .has-dropdown{width:100%;}
  .dropdown{
    display:block; position:static; margin:14px 0 0 0; padding:0 0 0 16px;
    background:none; border:none; box-shadow:none;
  }
  .dropdown a{color:#EFE9DC !important; opacity:0.7 !important; padding:8px 0; font-size:12px;}
}

/* ---------- page header (interior pages) ---------- */
.page-head{
  padding:180px 0 70px;
  border-bottom:1px solid var(--line);
}
.page-head h1{
  font-size:clamp(36px,5vw,64px);
  font-weight:400;
  max-width:16ch;
}
.page-head p{
  color:var(--muted);
  font-size:16px;
  max-width:48ch;
  margin-top:18px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px;
  font-size:13.5px; letter-spacing:0.03em; font-weight:600;
  border-radius:0;
  transition:all .25s ease;
  cursor:pointer; border:1px solid var(--ink);
}
.btn-dark{background:var(--ink); color:var(--paper);}
.btn-dark:hover{background:var(--brass); border-color:var(--brass);}
.btn-outline{border:1px solid var(--ink); color:var(--ink); background:transparent;}
.btn-outline:hover{background:var(--ink); color:var(--paper);}
.btn-outline-light{border:1px solid rgba(255,255,255,0.55); color:#fff;}
.btn-outline-light:hover{background:#fff; color:var(--ink);}

/* ---------- footer ---------- */
footer{background:var(--ink); color:#EFE9DC; padding:80px 0 30px;}
.foot-top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:56px; border-bottom:1px solid rgba(239,233,220,0.14);
}
@media (max-width:900px){
  .foot-top{grid-template-columns:1fr 1fr; gap:32px 24px;}
}
@media (max-width:600px){
  footer{padding:56px 0 24px;}
  .foot-top{grid-template-columns:1fr; gap:32px; padding-bottom:36px;}
}
.foot-brand .logo{color:#EFE9DC; margin-bottom:16px; display:block; font-size:22px;}
.foot-brand p{color:#AFA692; font-size:14px; max-width:32ch;}
.foot-col h5{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color:#AFA692; margin-bottom:18px;
}
.foot-col a, .foot-col span{
  display:block; font-size:14.5px; color:#EFE9DC; opacity:0.85; margin-bottom:10px;
}
.foot-col a:hover{opacity:1; color:var(--brass-light);}
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:24px; font-size:12.5px; color:#8A8271; flex-wrap:wrap; gap:12px;
}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1; transform:none; transition:none;} html{scroll-behavior:auto;}}

:focus-visible{outline:2px solid var(--brass); outline-offset:3px;}

section{padding:110px 0;}
@media (max-width:960px){ section{padding:70px 0;} .page-head{padding:140px 0 50px;} }