/* Brand system (see brand guidelines Page): Khaki, Bone, Chocolate (Khaki is also the accent on this site, per James); DM Serif Display + Archivo */
:root{
  --khaki:#C8B48E; --bone:#EFE8DA; --choc:#321C14; --choc-dark:#20120C; --choc-raised:#46291D;
  --accent:#C8B48E; /* = Khaki. James swapped the blue accent for khaki on the site */ --cocoa:#6B4A3A;
  --rule-dark:rgba(239,232,218,.18); --rule-light:rgba(50,28,20,.22);
  --display:"DM Serif Display",Georgia,"Times New Roman",serif;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--choc);background:var(--choc);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.eyebrow,.btn,.nav a:not(.wordmark),.lbl,.asof{font-family:var(--sans);text-transform:uppercase;letter-spacing:.18em;font-weight:600}
.rule{display:block;width:56px;height:5px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;margin:22px 0 0}

/* Nav: one site across home + media kit */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 6%;background:rgba(50,28,20,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule-dark)}
.wordmark{font-family:var(--display);font-weight:400;font-size:24px;letter-spacing:-.01em;line-height:.95;color:var(--bone)}
.nav-links{display:flex;gap:22px;flex-wrap:wrap}
.nav a:not(.wordmark){font-size:11.5px;color:rgba(239,232,218,.78)}
.about a:focus-visible{outline-color:var(--choc)}
.nav a:not(.wordmark):hover{color:var(--accent)}

/* Hero */
.hero{display:grid;background:var(--choc);color:var(--bone)}
.hero-photo img{width:100%;height:min(64svh,520px);min-height:380px;object-fit:cover;object-position:56% 22%}
.hero-text{padding:40px 6% 64px}
.eyebrow{font-size:12px;color:var(--accent);letter-spacing:.2em}
h1{font-family:var(--display);font-weight:400;font-size:clamp(56px,14vw,120px);line-height:.95;letter-spacing:-.01em;margin-top:14px;color:var(--bone)}
.hero .rule{color:var(--accent)}
.lede{font-family:var(--display);font-style:italic;font-size:clamp(20px,4.6vw,26px);line-height:1.35;color:var(--bone);margin-top:22px;max-width:24ch}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border-radius:2px;font-size:12px;border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn-khaki{background:var(--accent);color:var(--choc);border-color:var(--accent)}
.btn-khaki:hover{background:var(--bone);border-color:var(--bone)}
.btn-ghost{color:var(--bone);border-color:rgba(239,232,218,.4)}
.btn-ghost:hover{background:var(--bone);color:var(--choc)}

/* About (for people landing from Instagram) */
.about{background:var(--bone);padding:88px 6%}
.about-inner{max-width:640px}
.about .eyebrow{color:var(--cocoa)}
h2{font-family:var(--display);font-weight:400;font-size:clamp(36px,7vw,54px);line-height:1.05;margin-top:12px}
.about .rule{color:var(--choc)}
.about p{margin-top:26px;font-size:17px;line-height:1.7}
.about p+p{margin-top:16px}

/* The letter (coming soon; no signup form until Kit is set up) */
.letter{background:var(--choc);color:var(--bone);padding:96px 6%}
.letter-inner{max-width:620px}
.letter .rule{color:var(--accent)}
.letter h2{color:var(--bone)}
.letter p.sub{margin-top:22px;color:var(--bone);opacity:.9;font-size:17px;line-height:1.7}
.soon{margin-top:28px;font-size:17px;color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Footer: quiet brand handoff */
.site-footer{background:var(--choc-dark);color:var(--khaki);padding:48px 6% 40px;display:flex;flex-wrap:wrap;gap:24px 40px;justify-content:space-between;align-items:flex-end}
.foot-links{display:flex;flex-wrap:wrap;gap:12px 24px;font-size:13px}
.foot-links a{border-bottom:1px solid transparent}
.foot-links a.foot-quiet{opacity:.75}.foot-links a:hover{color:var(--bone);border-color:var(--accent)}
.copy{width:100%;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.7}

@media (min-width:900px){
  .hero{grid-template-columns:45fr 55fr;min-height:min(86vh,820px)}
  .hero-photo{order:2;position:relative}
  .hero-photo img{position:absolute;inset:0;height:100%;min-height:0;object-position:58% 30%}
  .hero-text{order:1;align-self:center;padding:96px 48px 96px clamp(48px,6.5vw,112px)}
  .about{padding:120px 6%}.letter{padding:128px 6%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Brand CTA (quiet, warm): intro + footer */
.btn-choc{background:var(--choc);color:var(--bone);border-color:var(--choc)}
.btn-choc:hover{background:var(--cocoa);border-color:var(--cocoa)}
.about-cta{margin-top:36px;padding-top:28px;border-top:1px solid var(--rule-light)}
.text-link{font-size:15px;color:var(--choc);border-bottom:1px solid var(--choc)}
.text-link:hover{color:var(--cocoa);border-color:var(--cocoa)}
.about .follow-link{margin-top:22px}
.foot-cta{display:flex;flex-direction:column;gap:14px;align-items:flex-start}

/* Tap targets: grow the hit area of small text links to >=44px without changing the layout */
.nav a,.text-link,.foot-links a{position:relative}
.nav a::after,.text-link::after,.foot-links a::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}

/* How I film (three pillars) */
.film{background:var(--choc-raised);color:var(--bone);padding:88px 6%}
.film-inner{max-width:none}
.film h2{color:var(--bone)}
.film .rule{color:var(--accent)}
.pillars{display:grid;grid-template-columns:1fr;gap:28px;margin-top:36px}
.pillar{border-top:1px solid var(--rule-dark);padding-top:20px}
.pillar h3{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.15;color:var(--khaki)}
.pillar p{margin-top:10px;font-size:17px;line-height:1.7;opacity:.9}
@media (min-width:900px){.film{padding:120px 6%}.pillars{grid-template-columns:repeat(3,1fr);gap:40px}}

/* How I film H2 (James via Katie 12:23 AM ET): underline "you’re there" only; same weight and colour as the heading; not a link. */
.h2-underline{text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:max(1px,.06em);text-underline-offset:.15em;text-decoration-skip-ink:auto;cursor:inherit}
/* How I film H2 (James via Katie 12:24 AM ET): never orphan a word when it wraps; one line from 1024px up (scales down to fit the content width, 54px max). */
.film h2{text-wrap:balance}
@media (min-width:1024px){.film h2{font-size:min(54px,3.9vw);white-space:nowrap}}
/* Newsletter h2: no orphan word (QA Low, 12:27 AM ET). */
.letter h2{text-wrap:balance}