:root{
    --ink: #0A0A0B;
    --ink-soft: #101012;
    --bone: #EDEBE6;
    --bone-dim: #9C9994;
    --brass: #C6A759;
    --brass-dim: #8A7640;
    --hair: rgba(237,235,230,0.10);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--ink);
    color:var(--bone);
    font-family:'Inter',sans-serif;
    font-weight:300;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--brass-dim); color:var(--ink);}
  .eyebrow{
    font-family:'Inter',sans-serif;
    font-size:0.68rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--bone-dim);
    font-weight:500;
  }
  h1,h2,h3{
    font-family:'Fraunces',serif;
    font-weight:400;
    letter-spacing:-0.01em;
    color:var(--bone);
  }
  /* NAV */
  nav{
    position:sticky; top:0;
    z-index:20;
    background:var(--ink);
    border-bottom:1px solid var(--hair);
  }
  .nav-inner{
    display:flex; justify-content:space-between; align-items:center;
    padding:1.6rem 3rem;
  }
  .brand{display:flex; align-items:center; gap:1.2rem;}
  .crest{
    width:auto;
    object-fit:contain;
    flex-shrink:0;
  }
  .crest{height:64px;}
  .wordmark{
    font-family:'Fraunces',serif;
    font-size:1rem;
    letter-spacing:0.04em;
    color:var(--bone);
  }
  nav ul{list-style:none; display:flex; gap:2.5rem;}
  nav a{
    color:var(--bone-dim);
    text-decoration:none;
    font-size:0.72rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    transition:color 0.4s ease;
  }
  nav a:hover{color:var(--bone);}
  /* HERO */
  .hero{
    padding:2.5rem 3rem 1.5rem;
    max-width:1200px;
    margin:0 auto;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    align-items:center;
    gap:2rem;
  }
  .hero-top{
    display:flex; flex-direction:column;
    align-items:flex-start;
    text-align:left;
    margin-bottom:2rem;
}
.hero-main{padding-bottom:1rem;}
.hero-crest{
    display:block;
    height:64px; width:auto;
    object-fit:contain;
    margin:0 0 1.6rem 0;
}
  .hero .eyebrow{margin-bottom:1rem;}
  .motto{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:1rem;
    color:var(--brass);
    letter-spacing:0.03em;
    margin-bottom:0.4rem;
  }
  .motto-translation{
    font-family:'Inter',sans-serif;
    font-style:normal;
    font-size:0.68rem;
    letter-spacing:0.05em;
    color:var(--brass-dim);
    margin-bottom:1.2rem;
  }
  .hero h1{
    font-size:clamp(2.4rem, 5.5vw, 4.4rem);
    max-width:14ch;
    line-height:1.08;
  }
  .hero-crest-large{
    width:100%;
    height:auto;
    object-fit:contain;
    justify-self:center;
  }
  /* ABOUT */
  .about{max-width:1200px; margin:0 auto; padding-top:2.5rem; padding-bottom:2.5rem;}
  .about .eyebrow{margin-bottom:1.2rem;}
  .about p{
    font-family:'Fraunces',serif;
    font-size:clamp(1.05rem, 1.8vw, 1.25rem);
    line-height:1.55;
    color:var(--bone-dim);
    max-width:72ch;
    font-weight:300;
  }
  .about p em{font-style:italic; color:var(--bone);}
  section{padding:4rem 3rem;}
  .rule{
    height:1px; background:var(--hair);
    max-width:1200px; margin:0 auto;
  }
  /* VISION */
  .vision{max-width:1200px; margin:0 auto;}
  .vision .eyebrow{margin-bottom:1.2rem;}
  .vision h2{font-size:clamp(1.7rem,3.4vw,2.6rem); max-width:20ch; margin-bottom:1.2rem; font-weight:300; color:var(--bone-dim);}
  .vision h2 em{font-style:italic; color:var(--bone);}
  .attribution{
    font-family:'Inter',sans-serif;
    font-size:0.72rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--brass-dim);
    font-style:normal;
  }
  .vision .attribution{margin-bottom:2rem;}
  .origin-attribution{margin-top:1.6rem;}
  .pillars{
    display:grid; grid-template-columns:repeat(4,1fr); gap:2.5rem;
  }
  .pillar{border-top:1px solid var(--hair); padding-top:1.4rem;}
  .pillar h3{font-size:1.05rem; font-weight:400; margin-bottom:0.7rem; color:var(--bone);}
  .pillar p{font-size:0.86rem; color:var(--bone-dim); font-weight:300; line-height:1.6;}
  /* SIGNATURE: ORIGIN NOTE — asymmetric, off-grid */
  .origin{
    max-width:1400px; margin:0 auto;
    display:grid; grid-template-columns:1fr 1fr;
    align-items:center;
    padding:4rem 3rem;
  }
  .origin-note{
    grid-column:2;
    max-width:36ch;
    opacity:0;
    transform:translateY(14px);
    transition:opacity 1.4s ease, transform 1.4s ease;
  }
  .origin-note.in{opacity:1; transform:translateY(0);}
  .origin-note p{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:clamp(1.3rem, 2.4vw, 1.9rem);
    line-height:1.5;
    color:var(--bone);
    font-weight:400;
  }
  .origin-note .origin-attribution{
    font-family:'Inter',sans-serif;
    font-size:0.72rem;
    font-style:normal;
    line-height:1.6;
    color:var(--brass-dim);
    margin-top:1.6rem;
  }
  .origin-note .mark{
    display:inline-block; width:2rem; height:1px; background:var(--brass);
    margin-bottom:1.6rem;
  }
  .origin-note .swap-note{
    margin-top:2rem;
    font-family:'Inter',sans-serif;
    font-style:normal;
    font-size:0.68rem;
    letter-spacing:0.05em;
    color:var(--brass-dim);
  }
  /* INITIATIVES */
  .initiatives{max-width:1200px; margin:0 auto;}
  .init-list{display:flex; flex-direction:column;}
  .init-row{
    display:grid; grid-template-columns:5rem 1fr 2fr;
    gap:2rem;
    padding:2.4rem 0;
    border-top:1px solid var(--hair);
    align-items:baseline;
  }
  .init-list .init-row:last-child{border-bottom:1px solid var(--hair);}
  .init-num{font-family:'Fraunces',serif; font-style:italic; color:var(--brass-dim); font-size:1rem;}
  .init-row h3{font-size:1.2rem; font-weight:400;}
  .init-row p{font-size:0.86rem; color:var(--bone-dim); max-width:52ch;}
  /* CORRESPONDENCE — removed for now, add back when office info is ready.
     Rules kept below (unused) for future reuse. */
  .office{
    max-width:900px; margin:0 auto;
    text-align:left;
  }
  .office .eyebrow{margin-bottom:1.2rem;}
  .office p.lead{
    font-family:'Fraunces',serif; font-style:italic;
    font-size:clamp(1.15rem,2vw,1.5rem);
    color:var(--bone-dim);
    max-width:38ch;
    margin-bottom:3rem;
    line-height:1.6;
  }
  .office-grid{display:flex; gap:5rem; flex-wrap:wrap;}
  .office-grid div h4{
    font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--brass-dim); margin-bottom:0.6rem; font-weight:500;
  }
  .office-grid div p{font-size:0.92rem; color:var(--bone); font-weight:300;}
  footer{
    padding:3rem; border-top:1px solid var(--hair);
    display:flex; justify-content:space-between; align-items:center;
    font-size:0.68rem; letter-spacing:0.05em; color:var(--bone-dim);
    flex-wrap:wrap; gap:1.2rem;
  }
  .footer-center{
    display:flex; align-items:center; gap:1rem;
  }
  .footer-motto{
    font-family:'Fraunces',serif;
    font-style:italic;
    color:var(--brass-dim);
    font-size:0.78rem;
    letter-spacing:0.03em;
  }
  .footer-motto-translation{
    font-family:'Inter',sans-serif;
    font-style:normal;
    font-size:0.62rem;
    letter-spacing:0.04em;
    color:var(--brass-dim);
    opacity:0.75;
  }
  .footer-motto-block{
    display:flex; flex-direction:column; align-items:center; gap:0.15rem;
  }
  .footer-grace{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:0.7rem;
    color:var(--brass-dim);
    opacity:0.85;
    margin-top:0.3rem;
  }
  .footer-mark{width:11px; height:11px; opacity:0.85; flex-shrink:0;}
  /* SECTION NAV — up/down pair */
  .section-nav{
    position:fixed; right:2rem; top:50%; transform:translateY(-50%);
    display:flex; flex-direction:column;
    border:1px solid var(--hair);
    border-radius:26px;
    background:rgba(10,10,11,0.6);
    backdrop-filter:blur(4px);
    overflow:hidden;
    z-index:20;
  }
  .section-nav-btn{
    width:44px; height:44px;
    border:none;
    background:transparent;
    color:var(--brass);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition:background 0.3s ease, color 0.3s ease;
  }
  .section-nav-btn:first-child{border-bottom:1px solid var(--hair);}
  .section-nav-btn:hover{background:rgba(198,167,89,0.12);}
  .section-nav-btn:disabled{opacity:0.3; cursor:default;}
  .section-nav-btn:disabled:hover{background:transparent;}
  .section-nav-btn svg{width:16px; height:16px;}
  @media(max-width:820px){
    .section-nav{right:1rem;}
    .section-nav-btn{width:38px; height:38px;}
    .section-nav-btn svg{width:14px; height:14px;}
  }
  .footer-sub{font-size:0.68rem; letter-spacing:0.08em;}
  @media(max-width:820px){
    .nav-inner{padding:1.2rem 1.4rem;}
    nav ul{display:none;}
    .hero{padding:3rem 1.4rem 2rem;}
    .hero-grid{grid-template-columns:1fr; gap:2.5rem;}
    .hero-crest-large{max-width:340px; margin:0 auto;}
    section{padding:2.5rem 1.4rem;}
    .pillars{grid-template-columns:1fr 1fr; gap:2rem;}
    .origin{grid-template-columns:1fr; padding:2.5rem 1.4rem;}
    .origin-note{grid-column:1;}
    .init-row{grid-template-columns:3rem 1fr; row-gap:0.4rem;}
    .init-row p{grid-column:2;}
    footer{padding:2rem 1.4rem; flex-direction:column; gap:0.6rem; text-align:center;}
    .footer-center{flex-direction:column; gap:0.5rem; margin:0.4rem 0;}
  }
  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
    .origin-note{opacity:1; transform:none;}
  }