/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ink:            #1B1815;
  --ink-soft:       #4A443C;
  --parchment:      #F5EFE3;
  --parchment-deep: #ECE2CE;
  --paper:          #FBF8F1;
  --brass:          #96723A;
  --brass-deep:     #74572B;
  --brass-line:     rgba(150,114,58,0.35);

  --slate:          #1E2229;
  --slate-deep:     #171A20;
  --slate-card:     #262B33;
  --steel:          #8FA9B4;
  --steel-bright:   #B9CDD4;
  --steel-line:     rgba(143,169,180,0.35);

  --bg: var(--parchment);
  --surface: var(--paper);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --accent: var(--brass);
  --accent-deep: var(--brass-deep);
  --line: var(--brass-line);

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --nav-h: 84px;
  --container: 1180px;
  --container-narrow: 760px;
}

body.theme-cool{
  --bg: var(--slate);
  --surface: var(--slate-card);
  --text: #EDEAE2;
  --text-soft: #B9B4A8;
  --accent: var(--steel);
  --accent-deep: var(--steel-bright);
  --line: var(--steel-line);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  transition:background .5s ease, color .5s ease;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }
img,svg{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; }

.container{ max-width:var(--container); margin:0 auto; padding:0 32px; }
.container.narrow{ max-width:var(--container-narrow); }
.center{ text-align:center; }
.center-block{ text-align:center; }

/* fine paper grain overlay */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:2000;
  opacity:0.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   TYPE
   ============================================================ */
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent-deep);
  margin:0 0 14px;
}
.eyebrow.center{ text-align:center; }

.display-xl{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.4rem, 5.2vw, 4.4rem);
  line-height:1.06;
  letter-spacing:-0.01em;
  margin:0 0 20px;
}
.display-md{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.7rem, 3vw, 2.5rem);
  line-height:1.14;
  margin:0 0 18px;
}
.ital{ font-style:italic; font-weight:400; color:var(--accent-deep); }

.lede{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.05rem, 1.6vw, 1.3rem);
  color:var(--text-soft);
  max-width:34ch;
  margin:0 0 24px;
}
.container.narrow .lede{ max-width:none; }

.body-copy{
  font-size:1.02rem;
  line-height:1.7;
  color:var(--text-soft);
  max-width:62ch;
  margin:0 0 18px;
}
.container.center .body-copy, .body-copy.center{ margin-left:auto; margin-right:auto; }
.body-copy.strong-line{ color:var(--text); font-weight:500; }
.body-copy.muted{ opacity:.8; }

.statement{
  font-family:var(--serif);
  font-size:clamp(1.3rem,2.4vw,1.8rem);
  line-height:1.4;
  margin:0 0 8px;
}
.statement-strong{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.3rem,2.4vw,1.8rem);
  color:var(--accent-deep);
  margin:0 0 32px;
}

.pull-quote{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.3rem,2.6vw,1.9rem);
  line-height:1.4;
  color:var(--text);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:28px 0;
  margin:32px 0;
}
.pull-quote-cool{ color:var(--steel-bright); }

.text-link{ color:var(--accent-deep); text-decoration:underline; text-underline-offset:3px; }
.gloss{ font-size:.85em; color:var(--text-soft); font-style:italic; }

.rule-top{
  width:44px; height:2px; background:var(--accent); margin:0 auto 28px;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:background .5s ease, border-color .5s ease;
}
.nav-inner{
  max-width:var(--container); margin:0 auto; padding:0 32px; height:100%;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-mark{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--text);
  font-family:var(--serif); font-size:1.05rem; letter-spacing:.01em;
}
.nav-mark .mark{ width:34px; height:34px; color:var(--accent); }
.nav-mark .mark text{ fill:currentColor; }

.nav-menu{ display:flex; align-items:center; gap:30px; }
.nav-menu > a{
  font-size:.86rem; text-decoration:none; color:var(--text-soft);
  letter-spacing:.02em; position:relative; padding:6px 0;
  transition:color .2s ease;
}
.nav-menu > a:hover, .nav-menu > a.active{ color:var(--text); }
.nav-menu > a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent);
}
.nav-cta{
  border:1px solid var(--line); border-radius:2px; padding:8px 16px !important; color:var(--text) !important;
}
.nav-cta:hover{ background:var(--accent); border-color:var(--accent); color:var(--surface) !important; }

.nav-drop{ position:relative; }
.nav-drop-trigger{
  background:none; border:none; color:var(--text-soft); font-family:inherit; font-size:.86rem;
  display:flex; align-items:center; gap:5px; padding:6px 0;
}
.nav-drop-trigger .caret{ font-size:10px; }
.nav-drop-trigger.active{ color:var(--text); }
.nav-drop-trigger.active .caret{ color:var(--accent); }
.nav-drop-panel{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
  background:var(--surface); border:1px solid var(--line); border-radius:2px;
  min-width:180px; padding:8px 0; opacity:0; visibility:hidden; transform-origin:top center;
  transition:opacity .18s ease, visibility .18s ease;
  box-shadow:0 18px 40px rgba(0,0,0,0.12);
}
.nav-drop:hover .nav-drop-panel,
.nav-drop-trigger[aria-expanded="true"] + .nav-drop-panel{ opacity:1; visibility:visible; }
.nav-drop-panel a{
  display:block; padding:9px 18px; font-size:.86rem; text-decoration:none; color:var(--text-soft);
}
.nav-drop-panel a:hover{ color:var(--accent-deep); background:var(--bg); }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px;
}
.nav-toggle span{ width:22px; height:1.5px; background:var(--text); display:block; }

/* ============================================================
   PAGES / ROUTING
   ============================================================ */
main{ padding-top:var(--nav-h); }
.page{ display:none; }
.page.active{ display:block; animation:pageIn .5s ease; }
@keyframes pageIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

.reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

.block{ padding:76px 0; }
.block.band{ background:var(--parchment-deep); }
.block.band-cool{ background:var(--slate-deep); }
.block.closing{ padding:100px 0 120px; border-top:1px solid var(--line); }
.block.closing-cool{ padding:100px 0 120px; border-top:1px solid var(--steel-line); }

/* ============================================================
   HERO (home)
   ============================================================ */
.hero{
  min-height:calc(100vh - var(--nav-h));
  display:grid; grid-template-columns:1.15fr 0.85fr; align-items:center; gap:40px;
  max-width:var(--container); margin:0 auto; padding:60px 32px;
}
.hero-inner{ max-width:560px; }
.hero .display-xl{ margin-bottom:22px; }
.hero-plate{ color:var(--accent); justify-self:center; width:100%; max-width:360px; }
.hero-svg{ width:100%; height:auto; }
.hero-photo-frame{
  position:relative; border:1px solid var(--line); padding:12px;
  aspect-ratio:4/5; width:100%;
}
.hero-photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-photo-badge{
  position:absolute; bottom:-16px; right:-16px;
  width:56px; height:56px; border-radius:50%;
  background:var(--parchment); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:1.2rem; color:var(--accent-deep);
}

/* generic photo frame used in split sections */
.photo-frame{ border:1px solid var(--line); padding:10px; }
.photo-frame img{ width:100%; height:100%; aspect-ratio:5/6; object-fit:cover; display:block; }
.photo-frame-cool{ border-color:var(--steel-line); }
.duotone-warm{ filter:sepia(0.28) saturate(1.15) hue-rotate(-6deg) brightness(0.94) contrast(1.05); }
.duotone-cool{ filter:grayscale(0.35) sepia(0.15) hue-rotate(165deg) saturate(1.3) brightness(0.78) contrast(1.08); }

/* page-hero background photography */
.page-hero.has-media{ position:relative; overflow:hidden; padding:130px 0 76px; }
.hero-media-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(0.5) saturate(1.05); z-index:0;
}
.hero-media-overlay{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(27,24,21,0.25) 0%, var(--parchment) 92%);
}
body.theme-cool .hero-media-overlay{
  background:linear-gradient(180deg, rgba(23,26,32,0.25) 0%, var(--slate) 92%);
}
.page-hero.has-media .container{ position:relative; z-index:1; }
.page-hero.has-media .display-xl,
.page-hero.has-media .eyebrow{ color:#F5EFE3; }
.page-hero.has-media .lede{ color:#E4DDCB; }
.page-hero.has-media .body-copy{ color:#D3CBB8; }
body.theme-cool .page-hero.has-media .eyebrow{ color:var(--steel-bright); }

.btn-row{ display:flex; gap:16px; flex-wrap:wrap; margin-top:8px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:.88rem; font-weight:500; letter-spacing:.01em;
  text-decoration:none; padding:13px 26px; border-radius:2px; border:1px solid transparent;
  transition:all .2s ease; cursor:pointer;
}
.btn-primary{ background:var(--ink); color:var(--parchment); border-color:var(--ink); }
.btn-primary:hover{ background:var(--accent-deep); border-color:var(--accent-deep); }
body.theme-cool .btn-primary{ background:var(--steel-bright); color:var(--slate-deep); border-color:var(--steel-bright); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent-deep); }
.btn-line{
  display:inline-block; margin-top:6px; padding:0 0 3px; border:none; border-bottom:1px solid var(--accent);
  background:none; color:var(--text); font-size:.9rem; font-weight:500;
}
.btn-line:hover{ color:var(--accent-deep); }
.btn-line-cool{ border-color:var(--steel); }
.btn-cool{ background:var(--steel-bright); color:var(--slate-deep); border-color:var(--steel-bright); }

/* ============================================================
   SPLIT SECTIONS
   ============================================================ */
.split-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center; }
.split.reverse .split-grid{ grid-template-columns:0.9fr 1.1fr; }
.split.reverse .split-text{ order:2; }
.split-figure{ color:var(--accent); opacity:.9; }
.block-cool{ background:var(--slate); color:#EDEAE2; }
.block-cool .body-copy{ color:#B9B4A8; }
.block-cool .body-copy.strong-line{ color:#EDEAE2; }
.block-cool .eyebrow{ color:var(--steel-bright); }
.block-cool .display-md{ color:#EDEAE2; }
.block-cool .split-figure{ color:var(--steel); }

/* ============================================================
   LOGO ROW
   ============================================================ */
.logo-caption{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-soft); margin:40px 0 18px; }
.logo-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px 28px;
  font-family:var(--serif); font-size:1rem; color:var(--text-soft);
  border-top:1px solid var(--line); padding-top:24px;
}
.logo-row em{ font-style:italic; opacity:.75; font-size:.85em; }

/* ============================================================
   CARDS / GRIDS
   ============================================================ */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:3px; padding:28px 26px;
}
.card h3{ font-family:var(--serif); font-weight:500; font-size:1.15rem; margin:0 0 10px; }
.card p{ font-size:.92rem; line-height:1.6; color:var(--text-soft); margin:0; }
.card-guide{ position:relative; }
.guide-tag{ font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--accent-deep); }
.card-guide h3{ margin-top:8px; }

/* ============================================================
   SHOP
   ============================================================ */
.shop-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.shop-card{
  background:var(--surface); border:1px solid var(--line); border-radius:3px; overflow:hidden;
  display:flex; flex-direction:column;
}
.shop-card-media{ aspect-ratio:4/3; overflow:hidden; }
.shop-card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.shop-card-body{ padding:24px 22px 26px; display:flex; flex-direction:column; flex:1; }
.shop-card-body h3{ font-family:var(--serif); font-weight:500; font-size:1.2rem; margin:8px 0 10px; }
.shop-card-body p{ font-size:.92rem; line-height:1.6; color:var(--text-soft); margin:0 0 20px; flex:1; }
.shop-card-footer{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.shop-price{ font-family:var(--mono); font-size:.95rem; color:var(--text); }

/* ============================================================
   LEDGER (numbered practice list)
   ============================================================ */
.ledger{ border-top:1px solid var(--line); }
.ledger-row{
  display:grid; grid-template-columns:64px 1fr; gap:20px;
  padding:30px 0; border-bottom:1px solid var(--line);
}
.ledger-num{
  font-family:var(--mono); font-size:.95rem; color:var(--accent); padding-top:4px;
}
.ledger-row h3{ font-family:var(--serif); font-weight:500; font-size:1.2rem; margin:0 0 8px; }
.ledger-row p{ font-size:.98rem; line-height:1.65; color:var(--text-soft); margin:0; max-width:60ch; }
.ledger-tight .ledger-row{ padding:22px 0; }
.ledger-cool .ledger-num{ color:var(--steel-bright); }

/* ============================================================
   STEPS (real sequence — Northbridge partnership process)
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin:40px 0; }
.step{ border-top:2px solid var(--steel-line); padding-top:16px; }
.step-num{ font-family:var(--mono); font-size:1.5rem; color:var(--steel-bright); }
.step h3{ font-family:var(--serif); font-weight:500; font-size:1.1rem; margin:8px 0; }
.step p{ font-size:.9rem; line-height:1.6; color:var(--text-soft); margin:0; }

/* ============================================================
   TIERS (partnership comparison)
   ============================================================ */
.tier-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.tier{ padding:32px 26px; border-left:1px solid var(--line); }
.tier:first-child{ border-left:none; }
.tier h3{ font-family:var(--serif); font-weight:500; font-size:1.15rem; margin:0 0 10px; }
.tier > p:not(.tier-detail){ font-size:.95rem; color:var(--text); margin:0 0 16px; }
.tier-detail{ font-size:.88rem; line-height:1.6; color:var(--text-soft); margin:0; }
.tier-mid{ background:var(--slate-card); }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero{ padding:80px 0 40px; }
.page-hero-cool{ background:var(--slate-deep); padding-bottom:60px; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-split{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:3px; overflow:hidden; margin-bottom:56px; }
.contact-option{ padding:30px 28px; }
.option-warm{ background:var(--paper); }
.option-cool{ background:var(--slate); color:#EDEAE2; }
.option-cool .eyebrow{ color:var(--steel-bright); }
.option-cool .body-copy{ color:#B9B4A8; }

.contact-form{ max-width:640px; margin:0 auto 60px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.contact-form label{ display:flex; flex-direction:column; gap:6px; font-size:.82rem; color:var(--text-soft); }
.contact-form label.full{ margin-bottom:18px; }
.contact-form input, .contact-form select, .contact-form textarea{
  font-family:var(--sans); font-size:.95rem; padding:11px 12px; border:1px solid var(--line);
  border-radius:2px; background:var(--surface); color:var(--text);
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
  outline:2px solid var(--accent); outline-offset:1px;
}
.form-note{ margin-top:16px; font-family:var(--serif); font-style:italic; color:var(--accent-deep); }

.direct-block{ text-align:center; max-width:var(--container-narrow); margin:0 auto 40px; }
.closing-line{ text-align:center; font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--accent-deep); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--ink); color:#D8D2C4; padding:56px 0 32px; }
.footer-mark{ font-family:var(--serif); font-size:1.3rem; margin-bottom:10px; }
.footer-contact{ font-size:.92rem; margin:0 0 24px; }
.footer-contact a{ color:#D8D2C4; text-decoration:underline; text-underline-offset:3px; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:18px; margin-bottom:28px; }
.footer-nav a{ font-size:.82rem; text-decoration:none; color:#B0A996; }
.footer-nav a:hover{ color:#D8D2C4; }
.footer-fine{ font-size:.76rem; color:#8B8574; margin:0; border-top:1px solid #33302A; padding-top:20px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px){
  .hero{ grid-template-columns:1fr; text-align:left; padding-top:40px; }
  .hero-plate{ display:none; }
  .split-grid{ grid-template-columns:1fr !important; }
  .split.reverse .split-text{ order:0; }
  .split-figure{ display:none; }
  .grid-3, .grid-4{ grid-template-columns:1fr 1fr; }
  .shop-grid{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr 1fr; }
  .tier-grid{ grid-template-columns:1fr; }
  .tier{ border-left:none; border-top:1px solid var(--line); }
  .tier:first-child{ border-top:none; }
  .contact-split{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
}

@media (max-width: 720px){
  .nav-menu{
    position:fixed; top:var(--nav-h); left:0; right:0; bottom:0;
    background:var(--bg); flex-direction:column; align-items:flex-start; gap:0;
    padding:20px 32px; transform:translateX(100%); transition:transform .3s ease;
    overflow-y:auto;
  }
  .nav-menu.open{ transform:translateX(0); }
  .nav-menu > a, .nav-drop{ width:100%; padding:16px 0; border-bottom:1px solid var(--line); }
  .nav-drop-panel{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; padding:0 0 0 14px; display:none; }
  .nav-drop.open .nav-drop-panel{ display:block; }
  .nav-cta{ margin-top:12px; text-align:center; }
  .nav-toggle{ display:flex; }
  .grid-3, .grid-4, .grid-2{ grid-template-columns:1fr; }
  .shop-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .block{ padding:56px 0; }
}