/* ============================================================
   BOGEN PHOTO — field notes on cameras & gear
   cool slate / copper / off-white · Bricolage + Newsreader + Plex Mono
   ============================================================ */



:root{
  --paper:#F2F3EF;
  --paper-2:#E9ECE5;
  --panel:#E2E6DE;
  --ink:#182028;
  --ink-2:#2C3844;
  --slate:#51616F;
  --slate-soft:#7A8894;
  --line:#D2D7CE;
  --line-dark:#39434D;
  --copper:#B26A3C;
  --copper-deep:#8F4F28;
  --copper-pale:#E6D3C2;
  --night:#161D25;
  --night-2:#1F2933;
  --paper-on-night:#EDEFE9;
  --serif:'Newsreader', Georgia, serif;
  --disp:'Bricolage Grotesque', 'Avenir Next', sans-serif;
  --mono:'IBM Plex Mono', 'SFMono-Regular', monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:23px;
  line-height:1.66;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--copper-deep); text-decoration-color:rgba(178,106,60,.45); text-underline-offset:3px; }
a:hover{ color:var(--copper); text-decoration-color:var(--copper); }
h1,h2,h3,h4{ font-family:var(--disp); line-height:1.08; margin:0 0 .5em; color:var(--ink); letter-spacing:-.01em; text-wrap:balance; }
p{ margin:0 0 1.25em; text-wrap:pretty; }
::selection{ background:var(--copper-pale); color:var(--copper-deep); }

/* ---------- shared atoms ---------- */
.wrap{ width:min(1220px, 100% - 48px); margin-inline:auto; }
.kicker{
  font-family:var(--mono); font-size:16px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--copper-deep); margin:0 0 18px;
  display:flex; align-items:center; gap:14px;
}
.kicker::before{ content:""; width:34px; height:2px; background:var(--copper); flex:none; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--disp); font-weight:600; font-size:19px;
  background:var(--ink); color:var(--paper); text-decoration:none;
  padding:16px 30px; border-radius:2px; border:1.5px solid var(--ink);
  transition:background .18s, color .18s;
}
.btn::after{ content:"→"; font-family:var(--mono); }
.btn:hover{ background:transparent; color:var(--ink); }
.btn.btn-copper{ background:var(--copper); border-color:var(--copper); color:#fff; }
.btn.btn-copper:hover{ background:transparent; color:var(--copper-deep); }
.btn.btn-ghost{ background:transparent; color:var(--ink); }
.btn.btn-ghost:hover{ background:var(--ink); color:var(--paper); }
.on-night .btn-ghost{ color:var(--paper-on-night); border-color:var(--paper-on-night); }
.on-night .btn-ghost:hover{ background:var(--paper-on-night); color:var(--night); }

/* EXIF readout strip */
.exif{
  display:flex; flex-wrap:wrap; gap:10px 28px;
  font-family:var(--mono); font-size:16px; color:var(--slate);
  letter-spacing:.06em;
}
.exif span b{ color:var(--copper-deep); font-weight:600; }
.on-night .exif{ color:var(--slate-soft); }
.on-night .exif span b{ color:var(--copper); }

/* crop-mark frame for figures */
.cropframe{ position:relative; padding:16px; }
.cropframe::before, .cropframe::after,
.cropframe > .cf::before, .cropframe > .cf::after{
  content:""; position:absolute; width:22px; height:22px; border:0 solid var(--slate);
}
.cropframe::before{ top:0; left:0; border-top-width:2px; border-left-width:2px; }
.cropframe::after{ top:0; right:0; border-top-width:2px; border-right-width:2px; }
.cropframe > .cf::before{ bottom:0; left:0; border-bottom-width:2px; border-left-width:2px; }
.cropframe > .cf::after{ bottom:0; right:0; border-bottom-width:2px; border-right-width:2px; }

/* ============================================================
   HEADER
   ============================================================ */
.site-head{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{
  display:flex; align-items:center; gap:34px;
  min-height:76px; position:relative;
}
.brand{
  font-family:var(--disp); font-weight:800; font-size:27px;
  letter-spacing:-.02em; text-decoration:none; color:var(--ink);
  display:flex; align-items:baseline; gap:2px; flex:none;
}
.brand em{
  font-style:normal; color:var(--copper);
}
.brand small{
  font-family:var(--mono); font-weight:500; font-size:15px; letter-spacing:.22em;
  color:var(--slate); margin-left:12px; text-transform:uppercase;
  border-left:1px solid var(--line); padding-left:12px;
  translate:0 -2px;
}
.site-nav{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.site-nav a{
  font-family:var(--disp); font-weight:500; font-size:18px;
  color:var(--ink-2); text-decoration:none; padding:9px 14px; border-radius:2px;
  white-space:nowrap; flex:none;
}
.site-nav a:hover{ color:var(--copper-deep); background:var(--paper-2); }
.site-nav a.nav-cta{
  border:1.5px solid var(--ink); color:var(--ink); margin-left:10px;
}
.site-nav a.nav-cta:hover{ background:var(--ink); color:var(--paper); }
.nav-toggle{ position:absolute; opacity:0; pointer-events:none; }
.nav-btn{ display:none; }

@media (max-width:1140px){
  .brand small{ display:none; }
  .site-nav{ gap:2px; }
  .site-nav a{ font-size:16.5px; padding:8px 10px; }
  .site-nav a.nav-cta{ margin-left:6px; }
}

@media (max-width:880px){
  .site-head .wrap{ position:static; }
  .nav-btn{
    display:flex; flex-direction:column; justify-content:center; gap:6px;
    width:48px; height:48px; margin-left:auto; cursor:pointer;
    border:1px solid var(--line); border-radius:2px; padding:12px 11px;
    background:var(--paper);
  }
  .nav-btn i{ display:block; height:2px; background:var(--ink); transition:.2s; }
  .nav-toggle:checked ~ .nav-btn i:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-btn i:nth-child(2){ opacity:0; }
  .nav-toggle:checked ~ .nav-btn i:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
  .site-nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:2px solid var(--ink);
    padding:10px 20px 20px;
    box-shadow:0 24px 40px -20px rgba(24,32,40,.35);
  }
  .nav-toggle:checked ~ .site-nav{ display:flex; }
  .site-nav a{ font-size:21px; padding:14px 4px; border-bottom:1px solid var(--line); border-radius:0; }
  .site-nav a:last-child{ border-bottom:0; }
  .site-nav a.nav-cta{ margin:12px 8px 0; text-align:center; border-width:2px; }
}

/* ============================================================
   HOME — HERO
   ============================================================ */
.hero{
  background:var(--night); color:var(--paper-on-night);
  position:relative; overflow:hidden;
}
.hero .wrap{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(32px,5vw,80px); align-items:center;
  padding:clamp(64px,9vh,120px) 0 clamp(56px,8vh,104px);
}
.hero h1{
  color:var(--paper-on-night);
  font-size:clamp(46px, 6.2vw, 88px); font-weight:750; line-height:.98;
  margin:0 0 28px;
}
.hero h1 em{ font-style:normal; color:var(--copper); }
.hero .standfirst{
  font-size:clamp(23px, 1.6vw, 27px); line-height:1.55; color:#C6CCC4;
  max-width:34ch; margin-bottom:36px;
}
.hero .kicker{ color:var(--copper); }
.hero .kicker::before{ background:var(--copper); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:44px; }
.hero-exif{ border-top:1px solid var(--line-dark); padding-top:22px; }
.hero-fig{ position:relative; }
.hero-fig .cropframe{ padding:20px; }
.hero-fig img{ width:100%; aspect-ratio:4/5; object-fit:cover; filter:saturate(.88) contrast(1.04); }
.hero-fig figcaption{
  font-family:var(--mono); font-size:16px; color:var(--slate-soft);
  margin-top:16px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.hero-fig figcaption b{ color:var(--copper); font-weight:600; }
@media (max-width:880px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-fig{ order:-1; max-width:440px; }
  .hero-fig img{ aspect-ratio:5/4; }
}

/* ============================================================
   HOME — FIELD GUIDES (two feature panels)
   ============================================================ */
.guides{ padding:clamp(64px,9vh,110px) 0 clamp(40px,5vh,64px); }
.guides-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:44px; }
.guides-head h2{ font-size:clamp(34px,3.6vw,54px); margin:0; }
.guides-head p{ margin:0; max-width:42ch; color:var(--slate); font-size:21px; }
.guide-row{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.guide{
  position:relative; display:grid; grid-template-rows:auto 1fr auto;
  background:var(--night-2); color:var(--paper-on-night);
  padding:36px 36px 32px; min-height:420px; text-decoration:none;
  border-radius:2px; overflow:hidden; transition:translate .18s, box-shadow .18s;
}
.guide:hover{ translate:0 -4px; box-shadow:0 30px 50px -30px rgba(22,29,37,.55); }
.guide .g-tag{
  font-family:var(--mono); font-size:16px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--copper); margin-bottom:22px;
}
.guide h3{
  color:var(--paper-on-night); font-size:clamp(30px,2.8vw,44px); font-weight:700; line-height:1.04;
  max-width:14ch;
}
.guide p{ color:#B9C1BC; font-size:20px; max-width:44ch; align-self:end; margin:26px 0 0; }
.guide .g-go{
  margin-top:26px; font-family:var(--disp); font-weight:600; font-size:19px; color:var(--copper);
  display:flex; align-items:center; gap:10px;
}
.guide .g-go::after{ content:"→"; font-family:var(--mono); transition:translate .18s; }
.guide:hover .g-go::after{ translate:6px 0; }
.guide.guide-copper{ background:var(--copper-deep); }
.guide.guide-copper .g-tag,.guide.guide-copper .g-go{ color:#F4DCC7; }
.guide.guide-copper p{ color:#EBD2BC; }
.guide .g-num{
  position:absolute; right:22px; top:14px;
  font-family:var(--disp); font-weight:800; font-size:120px; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(237,239,233,.22);
}
@media (max-width:880px){
  .guides-head{ flex-direction:column; align-items:flex-start; }
  .guide-row{ grid-template-columns:1fr; }
  .guide{ min-height:0; }
}

/* ============================================================
   HOME — GEAR INDEX
   ============================================================ */
.gindex{ padding:clamp(48px,7vh,90px) 0; }
.gindex-grid{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(32px,5vw,80px); }
.gindex-intro{ position:sticky; top:110px; align-self:start; }
.gindex-intro h2{ font-size:clamp(34px,3.6vw,54px); }
.gindex-intro p{ color:var(--slate); font-size:21px; max-width:36ch; }
.gindex-list{ list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }
.gindex-list li{ border-bottom:1px solid var(--line); }
.gindex-list a{
  display:grid; grid-template-columns:74px minmax(0,1fr) auto;
  gap:20px; align-items:baseline; text-decoration:none;
  padding:26px 6px; color:var(--ink); transition:background .15s;
}
.gindex-list a:hover{ background:var(--paper-2); }
.gindex-list .ix-n{
  font-family:var(--disp); font-weight:800; font-size:34px;
  color:transparent; -webkit-text-stroke:1.4px var(--slate);
}
.gindex-list a:hover .ix-n{ color:var(--copper); -webkit-text-stroke:0px; }
.gindex-list .ix-t{ font-family:var(--disp); font-weight:650; font-size:clamp(22px,2vw,28px); line-height:1.15; }
.gindex-list .ix-t small{
  display:block; font-family:var(--serif); font-weight:400; font-size:19px;
  color:var(--slate); margin-top:8px; line-height:1.5;
}
.gindex-list .ix-cat{
  font-family:var(--mono); font-size:16px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--copper-deep); white-space:nowrap;
}
@media (max-width:960px){
  .gindex-grid{ grid-template-columns:1fr; }
  .gindex-intro{ position:static; }
  .gindex-list a{ grid-template-columns:52px minmax(0,1fr); }
  .gindex-list .ix-cat{ grid-column:2; }
  .gindex-list .ix-n{ font-size:27px; }
}

/* ============================================================
   HOME — CREDO (belief/mission/vision)
   ============================================================ */
.credo{ background:var(--panel); padding:clamp(56px,8vh,100px) 0; }
.credo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1.5px solid var(--ink); background:var(--ink); grid-gap:1.5px; }
.credo-cell{ background:var(--paper); padding:34px 30px 30px; }
.credo-cell h3{ font-size:25px; display:flex; align-items:baseline; gap:12px; }
.credo-cell h3::before{
  content:attr(data-n); font-family:var(--mono); font-size:16px; font-weight:600;
  color:var(--copper-deep); letter-spacing:.1em;
}
.credo-cell p{ font-size:20px; color:var(--ink-2); margin:0; }
.credo .kicker{ margin-bottom:26px; }
.credo-quote{
  margin:56px auto 0; max-width:900px; text-align:center;
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(26px,2.6vw,36px); line-height:1.4; color:var(--ink-2);
}
.credo-quote b{ color:var(--copper-deep); font-weight:600; }
@media (max-width:880px){ .credo-grid{ grid-template-columns:1fr; } }

/* ============================================================
   HOME — GALLERY BAND
   ============================================================ */
.galleryband{ background:var(--night); color:var(--paper-on-night); padding:clamp(56px,8vh,100px) 0; }
.galleryband h2{ color:var(--paper-on-night); font-size:clamp(32px,3.4vw,50px); max-width:22ch; }
.galleryband .g-lede{ color:#B9C1BC; font-size:21px; max-width:56ch; margin-bottom:44px; }
.shots{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.shots figure{ margin:0; position:relative; }
.shots img{ width:100%; height:100%; object-fit:cover; filter:saturate(.9); }
.shots figcaption{
  position:absolute; left:10px; bottom:10px;
  font-family:var(--mono); font-size:15.5px; letter-spacing:.05em;
  background:rgba(22,29,37,.82); color:var(--paper-on-night); padding:5px 10px;
}
.shots .s-a{ grid-column:span 5; aspect-ratio:4/3; }
.shots .s-b{ grid-column:span 4; aspect-ratio:1/1; }
.shots .s-c{ grid-column:span 3; aspect-ratio:3/4; }
.shots .s-d{ grid-column:span 3; aspect-ratio:3/4; }
.shots .s-e{ grid-column:span 4; aspect-ratio:1/1; }
.shots .s-f{ grid-column:span 5; aspect-ratio:4/3; }
@media (max-width:820px){
  .shots{ gap:12px; }
  .shots .s-a,.shots .s-f{ grid-column:span 12; aspect-ratio:16/10; }
  .shots .s-b,.shots .s-e{ grid-column:span 6; }
  .shots .s-c,.shots .s-d{ grid-column:span 6; aspect-ratio:1/1; }
}

/* ============================================================
   PARTNER CARDS (shared card, two distinct sections)
   ============================================================ */
.partner-card{
  background:#fff; border:1px solid var(--line); border-radius:2px;
  padding:22px 22px 20px; display:flex; flex-direction:column; gap:14px;
  position:relative;
}
.partner-card::before{
  content:""; position:absolute; top:0; left:22px; right:22px; height:3px;
  background:linear-gradient(90deg, var(--copper) 0 34%, transparent 34%);
}
.partner-logo{
  width:100%; height:64px; display:flex; align-items:center; justify-content:center;
  background:var(--paper-2); border-radius:2px; padding:10px 16px;
}
.partner-logo img{ width:100%; height:100%; object-fit:contain; }
.partner-name{ margin:0; font-size:22px; font-weight:700; }
.partner-name a{ color:var(--ink); text-decoration:none; }
.partner-name a:hover{ color:var(--copper-deep); }
.partner-desc{ position:relative; }
.partner-desc p{
  margin:0; font-size:18px; line-height:1.55; color:var(--ink-2);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.partner-more-toggle{ position:absolute; opacity:0; pointer-events:none; }
.partner-more-toggle:checked ~ p{ -webkit-line-clamp:80; }
.partner-more{
  display:inline-block; margin-top:8px; cursor:pointer;
  font-family:var(--mono); font-size:16px; color:var(--slate); letter-spacing:.04em;
}
.partner-more:hover{ color:var(--copper-deep); }
.partner-more::after{ content:"+ read more"; }
.partner-more-toggle:checked ~ .partner-more::after{ content:"– read less"; }
.partner-cta{
  margin-top:auto; align-self:flex-start;
  font-family:var(--disp); font-weight:600; font-size:17px;
  color:var(--copper-deep); text-decoration:none;
  border:1.5px solid var(--copper); padding:9px 18px; border-radius:2px;
}
.partner-cta:hover{ background:var(--copper); color:#fff; }

/* section 1 — “Carried in the bag” (light panel, grid) */
.recommended{ background:var(--paper-2); border-block:1px solid var(--line); padding:clamp(56px,8vh,96px) 0; }
.recommended .kicker{ justify-content:center; }
.recommended .kicker::before{ display:none; }
.recommended h2{ text-align:center; font-size:clamp(32px,3.4vw,48px); }
.recommended .rec-lede{ text-align:center; color:var(--slate); font-size:20px; max-width:56ch; margin:0 auto 46px; }
.rec-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:960px){ .rec-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .rec-grid{ grid-template-columns:1fr; } }

/* section 2 — “Partners & friends” (night band, ledger rail) */
.friends{ background:var(--night-2); padding:clamp(56px,8vh,96px) 0; color:var(--paper-on-night); }
.friends-head{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:28px; align-items:end; margin-bottom:42px; }
.friends-head h2{ color:var(--paper-on-night); font-size:clamp(32px,3.4vw,48px); margin:0; }
.friends-head p{ margin:0; color:#AEB7B1; font-size:20px; }
.friends .kicker{ color:var(--copper); }
.friends-rail{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; align-items:stretch; }
.friends .partner-card{ background:var(--paper); border-color:transparent; }
@media (max-width:1100px){ .friends-rail{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:880px){ .friends-head{ grid-template-columns:1fr; } .friends-rail{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .friends-rail{ grid-template-columns:1fr; } }

/* ============================================================
   ARTICLE / PAGE — shared editorial primitives
   ============================================================ */
.article-hero{ padding:clamp(56px,8vh,96px) 0 clamp(30px,4vh,44px); }
.article-hero h1{ font-size:clamp(38px,5vw,72px); font-weight:750; max-width:20ch; }
.article-hero .standfirst{
  font-size:clamp(23px,1.7vw,28px); line-height:1.55; color:var(--ink-2);
  max-width:32ch; font-weight:500;
}
.article-hero .exif{ margin-top:26px; padding-top:20px; border-top:1px solid var(--line); }
.crumbs{
  font-family:var(--mono); font-size:16px; letter-spacing:.04em; color:var(--slate);
  margin-bottom:26px; display:flex; flex-wrap:wrap; gap:8px;
}
.crumbs a{ color:var(--slate); }
.crumbs a:hover{ color:var(--copper-deep); }

.article-figure{ margin:0; }
.article-figure img{ width:100%; object-fit:cover; }
.article-figure figcaption{
  font-family:var(--mono); font-size:16px; color:var(--slate);
  padding:14px 2px 0; display:flex; gap:14px; justify-content:space-between; flex-wrap:wrap;
}
.article-figure figcaption b{ color:var(--copper-deep); font-weight:600; }

.prose{ width:min(790px, 100% - 48px); margin-inline:auto; padding:clamp(36px,5vh,64px) 0; }
.prose > p, .prose > ul, .prose > ol{ font-size:23px; }
.prose h2{ font-size:clamp(30px,3vw,42px); margin:1.7em 0 .6em; }
.prose h3{ font-size:clamp(24px,2.2vw,30px); margin:1.6em 0 .55em; }
.prose ul, .prose ol{ padding-left:1.2em; margin:0 0 1.4em; }
.prose li{ margin-bottom:.55em; }
.prose li::marker{ color:var(--copper); font-weight:600; }
.lead{ font-size:clamp(25px,1.9vw,29px); line-height:1.58; color:var(--ink-2); }
.dropcap::first-letter{
  font-family:var(--disp); font-weight:800; font-size:4.1em; line-height:.82;
  float:left; padding:8px 16px 0 0; color:var(--copper);
}
.pull{
  border:0; margin:2.2em 0; padding:0 0 0 28px; border-left:3px solid var(--copper);
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(26px,2.2vw,32px); line-height:1.42; color:var(--ink-2);
}
.pull cite{ display:block; margin-top:14px; font-family:var(--mono); font-style:normal; font-size:16px; color:var(--slate); }
.note{
  background:var(--paper-2); border:1px solid var(--line); border-radius:2px;
  padding:26px 28px; margin:2.2em 0; font-size:20px;
}
.note .note-k{
  font-family:var(--mono); font-size:16px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--copper-deep); display:block; margin-bottom:12px; font-weight:600;
}
.note p:last-child{ margin-bottom:0; }
.note ul{ margin:0; padding-left:1.15em; font-size:20px; }
.note li{ margin-bottom:.5em; }

/* takeaways / at-a-glance box */
.glance{
  background:var(--night-2); color:var(--paper-on-night); border-radius:2px;
  padding:30px 32px; margin:2.4em 0;
}
.glance .note-k{ color:var(--copper); font-family:var(--mono); font-size:16px; letter-spacing:.16em; text-transform:uppercase; display:block; margin-bottom:16px; font-weight:600; }
.glance ol, .glance ul{ margin:0; padding-left:1.2em; font-size:20px; line-height:1.55; }
.glance li{ margin-bottom:.6em; }
.glance li:last-child{ margin-bottom:0; }
.glance b{ color:#fff; }
.glance a{ color:var(--copper-pale); }

/* quick-fact card (real-world info add-on) */
.factcard{
  display:grid; grid-template-columns:auto 1fr; gap:6px 22px;
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--copper);
  padding:22px 26px; margin:1.6em 0 2.2em; font-size:18px;
}
.factcard dt{ font-family:var(--mono); font-size:16px; text-transform:uppercase; letter-spacing:.1em; color:var(--slate); }
.factcard dd{ margin:0; color:var(--ink-2); font-weight:500; }

/* spec / versus tables */
.versus{ width:100%; border-collapse:collapse; margin:2.2em 0; font-size:19px; }
.versus caption{
  caption-side:top; text-align:left; font-family:var(--mono); font-size:16px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--copper-deep);
  padding-bottom:14px; font-weight:600;
}
.versus th{
  font-family:var(--disp); font-weight:700; font-size:19px; text-align:left;
  border-bottom:2px solid var(--ink); padding:10px 14px;
}
.versus td{ border-bottom:1px solid var(--line); padding:12px 14px; vertical-align:top; }
.versus tr td:first-child{ font-family:var(--mono); font-size:16.5px; color:var(--slate); }

/* numbered review sections */
.numbered{ counter-reset:sec; }
.numbered .sec h2::before{
  counter-increment:sec; content:"0" counter(sec);
  font-family:var(--mono); font-weight:500; font-size:.48em;
  color:var(--copper); display:block; letter-spacing:.2em; margin-bottom:10px;
}

/* in-article map embed */
.mapbox{ margin:2.2em 0; }
.mapbox iframe{ width:100%; height:340px; border:0; display:block; filter:grayscale(.35) contrast(1.02); }
.mapbox .mapcap{ font-family:var(--mono); font-size:16px; color:var(--slate); padding-top:12px; }

/* further reading */
.further{ border-top:2px solid var(--ink); padding:clamp(44px,6vh,72px) 0 clamp(56px,8vh,88px); }
.further h2{ font-size:clamp(28px,3vw,40px); }
.further-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:34px; }
.further-grid a{
  text-decoration:none; background:#fff; border:1px solid var(--line); border-radius:2px;
  padding:24px 24px 20px; display:flex; flex-direction:column; gap:14px; color:var(--ink);
  transition:translate .15s, box-shadow .15s;
}
.further-grid a:hover{ translate:0 -3px; box-shadow:0 20px 34px -24px rgba(24,32,40,.4); }
.further-grid .f-tag{ font-family:var(--mono); font-size:15.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--copper-deep); }
.further-grid .f-t{ font-family:var(--disp); font-weight:650; font-size:22px; line-height:1.18; }
.further-grid .f-go{ margin-top:auto; font-family:var(--mono); font-size:16px; color:var(--slate); }
@media (max-width:880px){ .further-grid{ grid-template-columns:1fr; } }

/* ============================================================
   ABOUT PAGE ledger
   ============================================================ */
.ledger{ width:min(1000px,100% - 48px); margin-inline:auto; padding:clamp(30px,4vh,50px) 0; }
.ledger-row{
  display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(24px,4vw,64px); padding:clamp(36px,5vh,60px) 0;
  border-top:1px solid var(--line);
}
.ledger-row:first-child{ border-top:0; }
.ledger-mark{ position:sticky; top:110px; align-self:start; }
.ledger-mark .l-n{
  font-family:var(--mono); font-size:16px; letter-spacing:.2em; color:var(--copper-deep);
  display:block; margin-bottom:10px; text-transform:uppercase;
}
.ledger-mark h2{ font-size:clamp(30px,3.2vw,44px); margin:0; }
.ledger-body p{ font-size:22px; }
.ledger-body p:last-child{ margin-bottom:0; }
.ledger-body .lb-lead{ font-weight:500; color:var(--ink-2); }
@media (max-width:820px){
  .ledger-row{ grid-template-columns:1fr; gap:18px; }
  .ledger-mark{ position:static; }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid{
  display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:clamp(36px,6vw,90px); padding:clamp(40px,6vh,80px) 0 clamp(64px,9vh,110px);
  align-items:start;
}
.contact-copy p{ font-size:22.5px; }
.contact-channels{ list-style:none; margin:34px 0 0; padding:0; display:grid; gap:0; border-top:2px solid var(--ink); }
.contact-channels li{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:18px 4px; border-bottom:1px solid var(--line);
  font-size:20px; align-items:baseline;
}
.contact-channels .ch-k{ font-family:var(--mono); font-size:16px; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); }
.contact-form{
  background:var(--night-2); color:var(--paper-on-night); border-radius:2px;
  padding:clamp(28px,4vw,44px);
}
.contact-form h2{ color:var(--paper-on-night); font-size:clamp(26px,2.6vw,34px); }
.contact-form p{ color:#AEB7B1; font-size:19px; }
.contact-form label{
  display:block; font-family:var(--mono); font-size:16px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--copper); margin:22px 0 8px;
}
.contact-form input, .contact-form textarea{
  width:100%; background:var(--night); border:1px solid var(--line-dark); border-radius:2px;
  color:var(--paper-on-night); font-family:var(--serif); font-size:20px;
  padding:14px 16px;
}
.contact-form input:focus, .contact-form textarea:focus{ outline:2px solid var(--copper); outline-offset:1px; border-color:var(--copper); }
.contact-form button{
  margin-top:28px; cursor:pointer;
  font-family:var(--disp); font-weight:600; font-size:19px;
  background:var(--copper); color:#fff; border:1.5px solid var(--copper); border-radius:2px;
  padding:16px 30px; width:100%;
}
.contact-form button:hover{ background:transparent; color:var(--copper); }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; } }

/* ============================================================
   HOME — contact band
   ============================================================ */
.hail{ background:var(--copper-deep); color:#F7EBDF; padding:clamp(56px,8vh,96px) 0; }
.hail .wrap{ display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:40px; align-items:center; }
.hail h2{ color:#fff; font-size:clamp(32px,3.6vw,52px); max-width:20ch; margin:0; }
.hail p{ color:#F0D9C4; font-size:21px; margin:18px 0 0; max-width:52ch; }
.hail .kicker{ color:#F0D9C4; }
.hail .kicker::before{ background:#F0D9C4; }
.t-copper{ font-style:normal; color:var(--copper); }
.hail .btn{ background:#fff; border-color:#fff; color:var(--copper-deep); justify-self:end; }
.hail .btn:hover{ background:transparent; color:#fff; }
@media (max-width:820px){ .hail .wrap{ grid-template-columns:1fr; } .hail .btn{ justify-self:start; } }

/* ============================================================
   FOOTER — contact-forward, compact on mobile
   ============================================================ */
.site-foot{ background:var(--night); color:var(--paper-on-night); }
.site-foot .wrap{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(28px,5vw,80px); padding:clamp(48px,7vh,84px) 0 clamp(28px,4vh,40px);
}
.foot-contact .f-brand{
  font-family:var(--disp); font-weight:800; font-size:30px; color:var(--paper-on-night);
  text-decoration:none; letter-spacing:-.02em;
}
.foot-contact .f-brand em{ font-style:normal; color:var(--copper); }
.foot-contact address{
  font-style:normal; margin:20px 0 0; font-size:19px; color:#AEB7B1; line-height:1.7;
}
.foot-contact address a{ color:var(--paper-on-night); }
.foot-contact .f-hours{
  margin-top:18px; font-family:var(--mono); font-size:16px; color:var(--slate-soft); letter-spacing:.04em;
}
.foot-contact .f-hours b{ color:var(--copper); font-weight:600; }
.foot-links{ display:flex; flex-direction:column; gap:20px; }
.foot-links .fl-k{
  font-family:var(--mono); font-size:15.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--slate-soft); margin:0 0 6px;
}
.foot-links nav{ display:flex; flex-wrap:wrap; gap:6px 22px; }
.foot-links nav a{
  color:var(--paper-on-night); text-decoration:none; font-family:var(--disp);
  font-weight:500; font-size:18px;
}
.foot-links nav a:hover{ color:var(--copper); }
.colophon{
  border-top:1px solid var(--line-dark);
}
.colophon .wrap{
  display:flex; justify-content:space-between; gap:10px 24px; flex-wrap:wrap;
  padding:20px 0 26px; font-family:var(--mono); font-size:16px; color:var(--slate-soft);
}
.colophon a{ color:var(--slate-soft); }
.colophon a:hover{ color:var(--copper); }
@media (max-width:820px){
  .site-foot .wrap{ grid-template-columns:1fr; gap:26px; padding-block:40px 22px; }
  .foot-links{ flex-direction:row; flex-wrap:wrap; gap:10px 34px; }
  .foot-contact address{ margin-top:12px; }
  .colophon .wrap{ padding:16px 0 20px; }
}

/* ============================================================
   small screens, global
   ============================================================ */
@media (max-width:640px){
  body{ font-size:21.5px; }
  .wrap{ width:min(1220px, 100% - 36px); }
  .prose{ width:min(790px, 100% - 36px); }
  .prose > p, .prose > ul, .prose > ol{ font-size:21.5px; }
  .article-hero h1{ font-size:clamp(34px,9.4vw,46px); }
  .hero h1{ font-size:clamp(40px,11vw,54px); }
  .factcard{ grid-template-columns:1fr; gap:2px; }
  .factcard dt{ margin-top:12px; }
  .factcard dt:first-child{ margin-top:0; }
  .versus{ font-size:17.5px; display:block; overflow-x:auto; }
  .mapbox iframe{ height:280px; }
}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain}

/* sp-contain-guard: sponsor logos are wordmarks — never object-fit:cover (crops).
   object-fit ONLY. This block used to also set width:auto, padding:4px 10px,
   max-width:calc(100% - 20px) and min/max-height, which overrode Design's own frame and
   let every plate shrink-wrap its logo — the recurring "inconsistent sizing" and
   "lacks padding". Geometry belongs to Design. */
.sponsor img,.sponsor-box img,.sp-logo img{object-fit:contain!important;display:block;margin-left:auto;margin-right:auto;align-self:center}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
.partner-logo{flex-wrap:wrap!important}
.partner-logo > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.colophon .wrap{flex-wrap:wrap!important}
.colophon .wrap > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-blurb-stack: a slot holding BOTH a mark and our copy stacks them —
   a fixed-height row clips the mark once the copy is un-hidden. */
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)){flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;height:auto!important;min-height:0!important;overflow:visible!important;gap:8px}
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)) > img{align-self:flex-start}

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-blurb-size: the design never sized .sponsor-blurb, so it inherited body copy.
   Relative, so it still follows the design's scale. */
.sponsor .sponsor-blurb{font-size:.8em;line-height:1.45}
.sponsor .sp-brand{font-weight:700}

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
.sponsor.sponsor{justify-content:center!important}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name):not(.sponsor-box):not(.sp-logo):not(.sponsor__logo){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}
/* the mobile un-clamp is retired: the operator asked for "2-3 rows max" on phones, which is
   what the desktop rule above already does — so mobile simply keeps it. */
@media (max-width:640px){.sponsor.sponsor .sponsor-blurb{-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}}

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.rec-grid .partner-card .partner-logo.partner-logo{background:#121013!important;padding:8px 12px!important;box-sizing:border-box!important}
.rec-grid .partner-card.partner-card img{background:transparent!important;width:100%!important;padding:0!important}
.friends-rail .partner-card .partner-logo.partner-logo{background:#121013!important;padding:8px 12px!important;box-sizing:border-box!important}
.friends-rail .partner-card.partner-card img{background:transparent!important;width:100%!important;padding:0!important}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   3658px at 390, 27% of the whole page. Two columns bring it to
   2212px (40% shorter). Checked before writing: no new overflow, smallest mark still
   100px wide, longest blurb 3 lines, tile heights 316-368px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.rec-grid, .friends-rail), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .rec-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:22px!important}
    .rec-grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .rec-grid > * *{min-width:0!important;max-width:100%}
    .rec-grid img,.rec-grid svg{max-width:100%;height:auto}
  .friends-rail{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:22px!important}
    .friends-rail > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .friends-rail > * *{min-width:0!important;max-width:100%}
    .friends-rail img,.friends-rail svg{max-width:100%;height:auto}

}

/* op-odd-tier-lead: .friends-rail (5 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .friends-rail:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.numbered.prose > figure.article-figure > img,
  article.prose > figure.article-figure > img,
  div.shots > figure.s-a > img,
  div.shots > figure.s-b > img,
  div.shots > figure.s-c > img,
  div.shots > figure.s-d > img,
  div.shots > figure.s-e > img,
  div.shots > figure.s-f > img,
  div.wrap > figure.article-figure.cropframe > img,
  div.wrap > figure.cropframe.hero-fig > img){height:auto}
/* op-img-dims:end */
@media (min-width:881px) and (max-width:899px), (min-width:1141px) and (max-width:1259px){.brand small { display: none; }.site-nav { gap: 2px; }.site-nav a { font-size: 16.5px; padding: 8px 10px; }.site-nav a.nav-cta { margin-left: 6px; }.site-head .wrap { position: static; }.nav-btn { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 48px; height: 48px; margin-left: auto; cursor: pointer; border: 1px solid var(--line); border-radius: 2px; padding: 12px 11px; background: var(--paper); }.nav-btn i { display: block; height: 2px; background: var(--ink); transition: 0.2s; }.nav-toggle:checked ~ .nav-btn i:nth-child(1) { transform: translateY(8px) rotate(45deg); }.nav-toggle:checked ~ .nav-btn i:nth-child(2) { opacity: 0; }.nav-toggle:checked ~ .nav-btn i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }.site-nav { display: none; position: absolute; top: 100%; left: 0px; right: 0px; flex-direction: column; align-items: stretch; gap: 0px; background: var(--paper); border-bottom: 2px solid var(--ink); padding: 10px 20px 20px; box-shadow: rgba(24, 32, 40, 0.35) 0px 24px 40px -20px; }.nav-toggle:checked ~ .site-nav { display: flex; }.site-nav a { font-size: 21px; padding: 14px 4px; border-bottom: 1px solid var(--line); border-radius: 0px; }.site-nav a:last-child { border-bottom: 0px; }.site-nav a.nav-cta { margin: 12px 8px 0px; text-align: center; border-width: 2px; }}