/* ---- Font faces (host your .woff2 in /assets/fonts) ---- */
@font-face{
  font-family:"Geist";
  src:url("/assets/fonts/Geist-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Geist";
  src:url("/assets/fonts/Geist-Italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Fraunces";
  src:url("/assets/fonts/FrauncesVF.woff2") format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Fraunces";
  src:url("/assets/fonts/FrauncesVFI.woff2") format("woff2-variations");
  font-weight:100 900; font-style:italic; font-display:swap;
}

/* ---- Tokens ---- */
:root{
  --bg:#FAF9F6;        /* warm off-white */
  --ink:#111111;       /* near black */
  --muted:#6C6C6C;
  --rule:rgba(17,17,17,.10);

  --max:66ch;          /* measure */
  --step--3:clamp(.63rem,.6rem + .05vw,.7rem);
  --step--2:clamp(.75rem,.73rem + .1vw,.84rem);
  --step--1:clamp(.88rem,.86rem + .2vw,.96rem);
  --step-0: clamp(1rem,.98rem + .3vw,1.125rem);
  --step-1: clamp(1.25rem,1.12rem + .9vw,1.5rem);
  --step-2: clamp(1.75rem,1.55rem + 1.4vw,2rem);
  --step-3: clamp(2.25rem,1.9rem + 2vw,2.75rem);
  --step-4: clamp(3rem,2.5rem + 3vw,3.75rem);
  --step-5: clamp(4rem,3.3rem + 4vw,5rem);
  --step-6: clamp(5rem,4.1rem + 5vw,6.5rem);

  --lh-tight:1.15;
  --lh-body:1.55;

  --space-1:.5rem;
  --space-2:1rem;
  --space-3:1.5rem;
  --space-4:2.5rem;
  --space-5:4rem;
  --space-6:6rem;
  --space-7:8rem;
  --space-8:12rem;
  --space-9:16rem;
  --space-10:20rem;
}

/* ---- Global ---- */
*{ box-sizing:border-box; }
html{ hanging-punctuation:first last; text-rendering:optimizeLegibility; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 var(--step-0)/var(--lh-body) "Geist", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-kerning:normal; font-synthesis:none; font-feature-settings:"liga","kern";
  text-wrap:pretty;
}

.container{ max-width:var(--max); margin:0 auto; padding:var(--space-5) var(--space-2) var(--space-4); }
.flow > * + *{ margin-top:var(--space-3); }
.major-section{ margin-top:var(--space-8); }


/* ---- Header / Nav ---- */
.site-head{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "brand nav"
    "lede  nav";
  column-gap:var(--space-3);
  row-gap:0;
  align-items:start;
  max-width:var(--max); margin:0 auto; padding:var(--space-3) var(--space-2) 0;
}
.brand a{
  grid-area:brand; margin:0;
  font-family:"Fraunces", serif; font-weight:600; letter-spacing:-0.01em;
  font-size:var(--step-2); line-height:var(--lh-tight);
  text-decoration: none;
}
.lede{
  grid-area:lede; margin:0;
  color:var(--muted); font-size:var(--step--1);
  font-family:"Geist", sans-serif;
  padding-left:.4rem;
}
.nav{ grid-area:nav; }
.nav a{
  font-size:var(--step--3);
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink); text-decoration:none; margin-left:var(--space-2);
  border-bottom:1px solid transparent; padding-bottom:.15rem;
}
.nav a:focus-visible, .nav a:hover{ border-color:var(--rule); }


/* ---- Type ---- */
h1,h2,h3{
  font-family:"Fraunces", serif; font-weight:600; letter-spacing:-0.01em; margin:0;
}
h1{ font-size:var(--step-3); line-height:var(--lh-tight); text-wrap:balance; }
h2{
  font-size:var(--step-5); line-height:var(--lh-tight);
  padding-top:var(--space-4); border-top:1px solid var(--rule);
}
h3{ font-size:var(--step-0); margin-top:var(--space-3); }

/* small-caps labels */
.label{
  font-family:"Geist", sans-serif;
  text-transform:uppercase; letter-spacing:.08em; font-weight:500; color:var(--muted);
}

/* ---- Lists: em-dash marker + hanging indent ---- */
.dash-list{ padding-left:.5rem; list-style:none; margin:0; }
.dash-list li{
  position:relative; margin:.6rem 0; padding-left:1rem;
}
.dash-list li::before{
  content:"—"; position:absolute; left:0; top:0;
}

/* ---- Links ---- */
a{ color:inherit; text-decoration-thickness:.06em; text-underline-offset:.2em; }

/* ---- Footer ---- */
.site-foot{
  max-width:var(--max); margin:var(--space-5) auto var(--space-3);
  padding:var(--space-2); border-top:1px solid var(--rule); color:var(--muted);
}

/* ---- Responsive ---- */
@media (max-width:640px){
  .site-head{
    grid-template-columns:1fr;
    grid-template-areas:
      "brand"
      "lede"
      "nav";
  }
  .nav a{ margin-left:0; margin-right:var(--space-2); }
}

@media (min-width:900px){
  :root{ --space-5:6rem; } /* more breathing room on desktop */
}

/* ——— Netlify form (expensive + quiet) ——— */
.visually-hidden{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

.ol-form{ border-top:1px solid var(--rule); padding-top:var(--space-4); }
.ol-grid{ display:flex; flex-direction:column; gap:var(--space-3); }
.ol-row{ display:grid; gap:var(--space-3); grid-template-columns:1fr; align-items: end; }
@media (min-width: 720px){
  .ol-row{ grid-template-columns:1fr 1fr; }
}

.ol-field{ display:flex; flex-direction:column; gap:.35rem; }
.ol-field label{
  display: block;
  line-height: 1.2;
  font-size: var(--step--2);
  text-transform: uppercase; letter-spacing:.08em;
  color: var(--muted);
}

/* underline-only fields to match the text-first aesthetic */
.ol-input, .ol-textarea{
  -webkit-appearance:none; appearance:none;
  font: inherit; color: var(--ink);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--rule);
  padding: .7rem 0 .6rem;
}
.ol-input:focus, .ol-textarea:focus{
  outline: none;
  border-bottom-color: var(--ink);
  box-shadow: 0 3px 0 0 rgba(17,17,17,.06);
}
.ol-input::placeholder, .ol-textarea::placeholder{ color: #9a9a9a; }

/* select caret without breaking the minimal look */
select.ol-input{ background-image:none; }

/* button: restrained, typographic */
.ol-button{
  display:inline-block;
  margin-top: var(--space-3);
  padding: .7rem 1rem .65rem;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 8px;
  text-transform: uppercase; letter-spacing:.08em; font-size: var(--step--1);
  cursor: pointer;
}
.ol-button:hover, .ol-button:focus-visible{ background: rgba(17,17,17,.04); }

.ol-form-note{ color: var(--muted); font-size: var(--step--2); margin-top: .75rem; }