/* ============================================================
   THE HALFWAY HOOSE — DESIGN SYSTEM
   Cream / deep green / hot orange. Drawn, not shaded: hard offset
   shadows, 2px borders, zero radius except pills and stickers.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,75..125,100..900;1,75..125,100..900&family=Yellowtail&family=Space+Mono:wght@400;700&display=swap");

:root{
  --hh-cream:#F7F2E6;
  --hh-cream-deep:#EDE5D2;
  --hh-sand:#DCCFAE;
  --hh-green:#0B2B1C;
  --hh-green-mid:#17492F;
  --hh-turf:#2F7A4B;
  --hh-orange:#F4531B;
  --hh-orange-deep:#C63A0C;
  --hh-orange-soft:#FF7A44;
  --hh-chalk:#FFFDF7;
  --hh-ink:#0A1A12;
  --hh-slate:#5C6B60;

  --line-hairline:rgba(10,26,18,.16);
  --line-on-inverse:rgba(247,242,230,.22);

  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-script:"Yellowtail",cursive;
  --font-body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-mono:"Space Mono",ui-monospace,monospace;
  --display-stretch:112%;
  --display-tracking:-0.02em;
  --display-leading:0.88;
  --size-display-xl:112px;
  --size-display-l:72px;
  --size-display-m:48px;
  --size-display-s:34px;
  --size-body-l:19px;
  --size-body-m:16px;
  --size-body-s:14px;
  --size-label:12px;
  --label-tracking:0.14em;
  --leading-body:1.55;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  --gutter:24px; --page-max:1240px; --section-y:96px; --section-y-tight:56px;

  --radius-s:4px; --radius-pill:999px; --radius-sticker:14px;
  --border-bold:2px; --border-heavy:3px;
  --shadow-offset:4px 4px 0 var(--hh-green);
  --shadow-offset-lg:8px 8px 0 var(--hh-green);
  --shadow-offset-orange:4px 4px 0 var(--hh-orange);
  --shadow-photo:0 10px 24px rgba(10,26,18,.22);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:420ms;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--hh-cream);color:var(--hh-ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;line-height:var(--leading-body);}
.wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--gutter);}
a{color:inherit;}
img{max-width:100%;display:block;}

/* placeholder textures — turf stripe stands in for photography we don't have yet */
.ph-turf{background:repeating-linear-gradient(135deg,var(--hh-turf) 0 18px,#2a6f44 18px 36px);}
.ph-sand{background:repeating-linear-gradient(135deg,var(--hh-sand) 0 18px,#d2c39e 18px 36px);}
.ph-green{background:repeating-linear-gradient(135deg,var(--hh-green-mid) 0 18px,#133f28 18px 36px);}
.ph-label{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,253,247,.85);}

/* ---- eyebrow / labels ---- */
.eyebrow{font-family:var(--font-mono);font-size:var(--size-label);letter-spacing:var(--label-tracking);text-transform:uppercase;color:var(--hh-orange);}
.eyebrow.on-light{color:var(--hh-cream);}

/* ---- section heading ---- */
.section-heading h1,.section-heading h2{font-family:var(--font-display);font-weight:900;font-stretch:var(--display-stretch);line-height:var(--display-leading);letter-spacing:var(--display-tracking);text-transform:uppercase;color:var(--hh-green);margin-top:var(--space-3);}
.section-heading.tone-light h1,.section-heading.tone-light h2{color:var(--hh-cream);}
.section-heading.align-center{text-align:center;}
.section-heading h1 .script,.section-heading h2 .script{font-family:var(--font-script);font-weight:400;text-transform:none;letter-spacing:0;margin-left:.12em;display:inline-block;}
.section-heading .script-color{color:var(--hh-orange);}
.h-xl h1,.h-xl h2{font-size:clamp(48px,9vw,var(--size-display-xl));}
.h-l h1,.h-l h2{font-size:clamp(38px,6vw,var(--size-display-l));}
.h-m h1,.h-m h2{font-size:clamp(30px,4.6vw,var(--size-display-m));}
.h-s h1,.h-s h2{font-size:var(--size-display-s);}

/* ---- wordmark (no logo mark — set in type) ---- */
.wordmark{font-weight:400;font-size:inherit;text-decoration:none;display:inline-flex;align-items:baseline;gap:2px;line-height:1;}
.wordmark .w-half{font-family:var(--font-display);font-weight:900;font-stretch:var(--display-stretch);text-transform:uppercase;letter-spacing:-.02em;color:var(--hh-green);}
.wordmark .w-hoose{font-family:var(--font-script);color:var(--hh-orange);}
.wordmark.on-dark .w-half{color:var(--hh-cream);}
.wordmark-nav .w-half{font-size:26px;}
.wordmark-nav .w-hoose{font-size:30px;}
.wordmark-hero{display:inline-flex;align-items:baseline;gap:6px;line-height:.9;max-width:100%;flex-wrap:wrap;justify-content:center;}
.wordmark-hero .w-half{font-size:clamp(48px,9vw,112px);}
.wordmark-hero .w-hoose{font-size:clamp(54px,10vw,126px);}
.wordmark-foot{display:flex;align-items:baseline;justify-content:center;gap:6px;line-height:.82;transform:translateY(12%);overflow:hidden;}
.wordmark-foot .w-half{font-size:clamp(56px,13vw,168px);color:var(--hh-cream);letter-spacing:-.03em;}
.wordmark-foot .w-hoose{font-size:clamp(60px,14vw,182px);}

/* ---- header ---- */
.ticker{background:var(--hh-green);color:var(--hh-cream);text-align:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:8px 16px;}
header.site{position:sticky;top:0;z-index:20;}
.bar-shell{background:var(--hh-cream);border-bottom:var(--border-heavy) solid var(--hh-green);}
.bar{max-width:var(--page-max);margin:0 auto;padding:14px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);}
.nav{display:flex;align-items:center;gap:var(--space-6);}
.nav a{font-family:var(--font-body);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--hh-green);border-bottom:2px solid transparent;padding-bottom:3px;transition:border-color var(--dur-fast) linear,color var(--dur-fast) linear;}
.nav a:hover{color:var(--hh-orange-deep);}
.nav a.current{border-color:var(--hh-orange);}

/* ---- buttons ---- */
.btn{font-family:var(--font-body);font-weight:800;letter-spacing:.08em;text-transform:uppercase;border:var(--border-bold) solid var(--hh-green);border-radius:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);text-decoration:none;white-space:nowrap;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background var(--dur-fast) linear;}
.btn-sm{font-size:11px;padding:8px 14px;}
.btn-md{font-size:13px;padding:12px 22px;}
.btn-lg{font-size:15px;padding:16px 30px;}
.btn-primary{background:var(--hh-orange);color:var(--hh-green);box-shadow:var(--shadow-offset);}
.btn-primary:hover{background:var(--hh-orange-soft);transform:translate(-1px,-1px);}
.btn-primary:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--hh-green);}
.btn-secondary{background:var(--hh-cream);color:var(--hh-green);box-shadow:var(--shadow-offset);}
.btn-secondary:hover{transform:translate(-1px,-1px);}
.btn-secondary:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--hh-green);}
.btn-inverse{background:var(--hh-green);color:var(--hh-cream);border-color:var(--hh-cream);box-shadow:4px 4px 0 var(--hh-orange);}
.btn-inverse:hover{transform:translate(-1px,-1px);}
.btn-inverse:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--hh-orange);}
.btn-ghost{background:transparent;color:var(--hh-green);box-shadow:none;border-color:transparent;text-decoration:underline;text-underline-offset:4px;}

/* ---- tags / badges ---- */
/* .tag is worn by both <button> and <a> — categories with their own page are real
   links, the rest are buttons. line-height and text-decoration are pinned so the
   two render identically: a button gets line-height:normal from the UA font
   shorthand, while an <a> would otherwise inherit body's 1.55 and be underlined. */
.tag{font-family:var(--font-body);font-size:12px;font-weight:700;line-height:normal;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:8px 14px;border:var(--border-bold) solid var(--hh-green);border-radius:var(--radius-pill);background:transparent;color:var(--hh-green);cursor:pointer;transition:background var(--dur-fast) linear,color var(--dur-fast) linear;}
.tag:hover{background:var(--hh-cream-deep);}
.tag.selected{background:var(--hh-green);color:var(--hh-cream);}
.badge{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px 3px;border:1px solid var(--hh-green);border-radius:var(--radius-pill);display:inline-block;line-height:1.4;}
.badge-neutral{background:var(--hh-cream-deep);color:var(--hh-green);}
.badge-accent{background:var(--hh-orange);color:var(--hh-green);}
.badge-inverse{background:var(--hh-green);color:var(--hh-cream);}

/* ---- sticker ---- */
.sticker{display:inline-block;}
.sticker-inner{background:var(--hh-chalk);color:var(--hh-green);border:var(--border-heavy) solid var(--hh-green);border-radius:var(--radius-sticker);padding:10px 18px;box-shadow:var(--shadow-offset);text-align:center;}
.sticker-orange .sticker-inner{background:var(--hh-orange);}
.sticker-green .sticker-inner{background:var(--hh-green);color:var(--hh-cream);}
.sticker-label{font-family:var(--font-display);font-weight:900;font-stretch:var(--display-stretch);font-size:22px;line-height:1;text-transform:uppercase;letter-spacing:-.01em;}
.sticker-sub{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;margin-top:5px;}
.sticker-sm .sticker-label{font-size:16px;}
.sticker-sm .sticker-inner{padding:7px 13px;}

/* ---- forms ---- */
.field{display:flex;flex-direction:column;gap:var(--space-2);}
.field label{font-family:var(--font-body);font-size:var(--size-label);font-weight:700;letter-spacing:var(--label-tracking);text-transform:uppercase;color:var(--hh-green);}
.field input,.field select{font-family:var(--font-body);font-size:var(--size-body-m);padding:12px 14px;background:var(--hh-chalk);color:var(--hh-ink);border:var(--border-bold) solid var(--hh-green);border-radius:0;outline:none;}
.field select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230B2B1C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:32px;}
.field input:focus,.field select:focus{box-shadow:var(--shadow-offset-orange);}
.field .hint{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--hh-slate);}
.checkbox{display:flex;align-items:center;gap:var(--space-3);cursor:pointer;font-family:var(--font-body);font-size:var(--size-body-s);color:var(--hh-green);}
.checkbox input{position:absolute;opacity:0;width:0;height:0;}
.checkbox .box{width:20px;height:20px;flex:0 0 20px;border:var(--border-bold) solid var(--hh-green);background:var(--hh-chalk);display:grid;place-items:center;font-size:13px;font-weight:900;line-height:1;}
.checkbox input:checked + .box{background:var(--hh-orange);}
.checkbox input:checked + .box::after{content:'\2713';}
/* honeypot — hidden from people, filled in by bots, checked by Netlify */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---- callout ---- */
.callout{border:var(--border-bold) solid var(--hh-green);box-shadow:var(--shadow-offset);padding:var(--space-5);}
.callout-accent{background:var(--hh-orange);color:var(--hh-green);}
.callout-quiet{background:var(--hh-cream-deep);color:var(--hh-green);}
.callout-inverse{background:var(--hh-green);color:var(--hh-cream);}
.callout-title{font-family:var(--font-display);font-weight:900;font-stretch:var(--display-stretch);font-size:20px;text-transform:uppercase;line-height:1.05;margin-bottom:var(--space-3);}
.callout p{font-family:var(--font-body);font-size:var(--size-body-s);line-height:var(--leading-body);text-wrap:pretty;}

/* ---- photo frame ---- */
.photo-frame{background:var(--hh-chalk);padding:10px 10px 0;border:var(--border-bold) solid var(--hh-green);box-shadow:var(--shadow-photo);display:inline-block;max-width:100%;}
.photo-frame .frame-img{aspect-ratio:4/3;position:relative;overflow:hidden;}
.photo-frame .frame-img img{width:100%;height:100%;object-fit:cover;}
.photo-frame figcaption{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--hh-slate);padding:8px 2px 10px;}

/* ---- brand tile ---- */
.brand-tile{display:block;text-decoration:none;color:var(--hh-green);background:#fff;border:var(--border-bold) solid var(--hh-green);box-shadow:var(--shadow-offset);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);}
.brand-tile:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-offset-lg);}
.brand-tile .tile-img{aspect-ratio:3/2;position:relative;overflow:hidden;}
.brand-tile .tile-img img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out);}
.brand-tile:hover .tile-img img{transform:scale(1.03);}
.brand-tile .tile-img.has-logo{display:flex;align-items:center;justify-content:center;}
.brand-tile .tile-img.has-logo img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-base) var(--ease-out);}
.brand-tile:hover .tile-img.has-logo img{transform:scale(1.03);}
.brand-tile .tile-tag{position:absolute;top:10px;left:10px;}
.brand-tile .tile-body{padding:var(--space-4) var(--space-4) var(--space-5);border-top:var(--border-bold) solid var(--hh-green);}
.brand-tile .tile-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);}
.brand-tile h3{font-family:var(--font-display);font-weight:900;font-stretch:var(--display-stretch);font-size:22px;line-height:1;text-transform:uppercase;letter-spacing:-.01em;}
.brand-tile .tile-origin{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--hh-slate);white-space:nowrap;}
.brand-tile .tile-blurb{margin-top:var(--space-3);font-family:var(--font-body);font-size:var(--size-body-s);line-height:var(--leading-body);color:var(--hh-slate);text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.brand-tile .tile-cats{margin-top:var(--space-3);display:flex;flex-wrap:wrap;gap:6px;}
.brand-tile .tile-cats span{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--hh-orange-deep);border:1px solid rgba(198,58,12,.35);padding:2px 7px;}
.brand-tile .tile-visit{display:inline-block;margin-top:var(--space-4);font-family:var(--font-body);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--hh-green);border-bottom:2px solid var(--hh-green);padding-bottom:2px;transition:color var(--dur-fast) linear,border-color var(--dur-fast) linear;}
.brand-tile:hover .tile-visit{color:var(--hh-orange-deep);border-color:var(--hh-orange);}

/* ---- editorial card ---- */
.editorial-card{display:grid;grid-template-columns:1fr 1fr;background:var(--hh-chalk);border:var(--border-bold) solid var(--hh-green);box-shadow:var(--shadow-offset);max-width:100%;}
/* grid children default to min-width:auto and refuse to shrink below their
   content — this lets both columns give way instead of pushing the card wide */
.editorial-card > *{min-width:0;}
.editorial-card.reverse{direction:rtl;}
.editorial-card.reverse > *{direction:ltr;}
.editorial-card .ed-img{min-height:260px;position:relative;overflow:hidden;}
.editorial-card .ed-img img{width:100%;height:100%;object-fit:cover;}
.editorial-card .ed-body{padding:var(--space-6);display:flex;flex-direction:column;justify-content:center;gap:var(--space-3);}
.editorial-card.tone-green{background:var(--hh-green);}
.editorial-card.tone-green .ed-title{color:var(--hh-cream);}
.editorial-card.tone-green p{color:rgba(247,242,230,.8);}
/* text-only two-up card (no ed-img): tone-green goes on one ed-body instead
   of the whole card, so the two panels can sit side by side */
.editorial-card .ed-body.tone-green{background:var(--hh-green);}
.editorial-card .ed-body.tone-green .ed-title{color:var(--hh-cream);}
.editorial-card .ed-body.tone-green p{color:rgba(247,242,230,.8);}
.editorial-card .ed-title{font-family:var(--font-display);font-weight:900;font-stretch:var(--display-stretch);font-size:var(--size-display-s);line-height:var(--display-leading);text-transform:uppercase;color:var(--hh-green);}
.editorial-card p{font-family:var(--font-body);font-size:var(--size-body-m);line-height:var(--leading-body);color:var(--hh-slate);text-wrap:pretty;}
/* min-height must go once the ratio takes over: with an auto width, a 260px
   floor lets aspect-ratio drive the width back out to 462px and burst the page */
@media(max-width:800px){.editorial-card{grid-template-columns:1fr;}.editorial-card .ed-img{aspect-ratio:16/9;min-height:0;}}

/* ---- footer ---- */
footer.site{background:var(--hh-green);color:var(--hh-cream);}
.foot-cols{max-width:var(--page-max);margin:0 auto;padding:var(--space-8) var(--gutter) var(--space-6);display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-6);}
.foot-col{display:flex;flex-direction:column;gap:var(--space-3);}
.foot-col-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--hh-orange);}
.foot-col a{font-family:var(--font-body);font-size:var(--size-body-s);color:var(--hh-cream);text-decoration:none;opacity:.82;}
.foot-col a:hover{opacity:1;}
.foot-mark{padding:var(--space-4) var(--gutter) 0;display:flex;justify-content:center;}
.foot-mark svg{width:min(30vw,220px);height:auto;}
.foot-note{border-top:1px solid var(--line-on-inverse);margin-top:var(--space-5);padding:var(--space-4) var(--gutter);text-align:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,242,230,.6);}

/* ---- modal / dialog ---- */
.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(11,43,28,.62);display:flex;align-items:center;justify-content:center;padding:var(--space-5);opacity:0;visibility:hidden;transition:opacity .22s;}
.modal-backdrop.open{opacity:1;visibility:visible;}
.modal{width:min(460px,100%);background:var(--hh-chalk);border:var(--border-heavy) solid var(--hh-green);box-shadow:var(--shadow-offset-lg);padding:var(--space-6);position:relative;transform:translateY(8px);transition:transform .22s;}
.modal-backdrop.open .modal{transform:translateY(0);}
.modal-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border:none;background:none;color:var(--hh-slate);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.modal-close:hover{color:var(--hh-green);}
.modal-title{font-family:var(--font-display);font-weight:900;font-stretch:var(--display-stretch);font-size:26px;line-height:1.02;text-transform:uppercase;color:var(--hh-green);margin-bottom:var(--space-4);}
.modal p{font-family:var(--font-body);font-size:var(--size-body-m);line-height:var(--leading-body);color:var(--hh-slate);text-wrap:pretty;margin-bottom:var(--space-5);}
.modal form{display:flex;flex-direction:column;gap:var(--space-4);}

/* ---- page intro (about/faq/directory/stories) ---- */
.page-intro{padding:var(--section-y-tight) 0 var(--space-6);text-align:center;}

/* ---- FAQ ---- */
.faq{max-width:760px;margin:0 auto;padding:0 var(--gutter) var(--section-y);}
.faq details{border-bottom:1px solid var(--line-hairline);padding:26px 0;}
.faq summary{font-family:var(--font-display);font-weight:900;font-stretch:var(--display-stretch);font-size:22px;text-transform:uppercase;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';font-family:var(--font-mono);font-size:24px;color:var(--hh-orange);flex:none;}
.faq details[open] summary::after{content:'\2212';}
.faq p{margin-top:14px;font-size:var(--size-body-m);line-height:var(--leading-body);color:var(--hh-slate);text-wrap:pretty;}
.faq p a{color:var(--hh-green);font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(10,26,18,.3);}
.faq p a:hover{color:var(--hh-orange-deep);border-color:var(--hh-orange);}

/* ---- stories index ---- */
a.editorial-card{text-decoration:none;color:inherit;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);}
a.editorial-card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-offset-lg);}
.ed-meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--hh-slate);}
.editorial-card.tone-green .ed-meta{color:rgba(247,242,230,.55);}

/* signals that a card is a full interview, not just the standfirst on show */
.ed-cta{display:inline-block;margin-top:var(--space-1);font-family:var(--font-body);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--hh-green);border-bottom:2px solid var(--hh-green);padding-bottom:2px;transition:color var(--dur-fast) linear,border-color var(--dur-fast) linear;}
.editorial-card:hover .ed-cta{color:var(--hh-orange-deep);border-color:var(--hh-orange);}
.editorial-card.tone-green .ed-cta{color:var(--hh-cream);border-color:var(--hh-cream);}
.editorial-card.tone-green:hover .ed-cta{color:var(--hh-orange);border-color:var(--hh-orange);}

/* ---- story article ---- */
.story-shell{max-width:720px;margin:0 auto;padding:0 var(--gutter);}
.story-hero{background:var(--hh-green);color:var(--hh-cream);padding:var(--section-y-tight) 0 var(--space-8);}
.story-title{font-family:var(--font-display);font-weight:900;font-stretch:var(--display-stretch);line-height:var(--display-leading);letter-spacing:var(--display-tracking);text-transform:uppercase;font-size:clamp(34px,5.5vw,var(--size-display-l));color:var(--hh-cream);margin-top:var(--space-3);text-wrap:balance;}
.story-title .script{font-family:var(--font-script);font-weight:400;text-transform:none;letter-spacing:0;color:var(--hh-orange);margin-left:.1em;display:inline-block;}
.story-standfirst{margin-top:var(--space-5);font-size:var(--size-body-l);line-height:var(--leading-body);color:rgba(247,242,230,.85);max-width:56ch;text-wrap:pretty;}
.story-meta{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--line-on-inverse);font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,242,230,.6);display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);}

/* 16:9 media slot — holds a video embed, or the turf placeholder until there is one */
.story-embed{position:relative;aspect-ratio:16/9;border:var(--border-bold) solid var(--hh-green);box-shadow:var(--shadow-offset);overflow:hidden;background:var(--hh-green-mid);}
.story-embed iframe,.story-embed video{position:absolute;inset:0;width:100%;height:100%;border:0;}

.story-body{padding:var(--section-y-tight) 0 var(--section-y);}
/* :not(.story-disclosure) mirrors the .story-shell>p rule below it — without
   it this selector's higher specificity (class+element beats class alone)
   overrides .story-disclosure's own font-size and colour. Never tripped
   before content/brands/*.md had anything to render as .story-disclosure. */
.story-body>p:not(.story-disclosure){font-size:var(--size-body-m);line-height:var(--leading-body);color:var(--hh-ink);text-wrap:pretty;margin-bottom:var(--space-5);}
.story-body>p.intro{font-size:var(--size-body-l);color:var(--hh-green);}
.story-body figure{margin:var(--space-7) 0;}
.story-body figure .photo-frame{display:block;}
/* A markdown ![](…) image renders as a bare <figure><img><figcaption> — no
   .photo-frame wrapper — so give it the same border/shadow/mono-caption
   treatment directly rather than leaving it unframed. */
.story-body figure>img{border:var(--border-bold) solid var(--hh-green);box-shadow:var(--shadow-photo);}
.story-body figure>figcaption{margin-top:var(--space-2);font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--hh-slate);}

/* Narrative write-ups. The Q&A blocks above cover an interview transcript; a
   piece written as prose has section headings and standalone quotes, and
   nothing here styled either — subheads fell back to the browser default and a
   quote rendered as a plain indented paragraph.

   Each selector is listed twice because the two things that produce a story
   body nest differently: story-template.html puts the prose inside
   `.story-shell`, while build.js renders content/brands/<slug>.md straight into
   `.story-body`. Child selectors rather than descendant ones on purpose —
   `.pull-quote blockquote` already has its own rule, and a descendant selector
   here would tie it on specificity and beat it on source order.

   Note build.js demotes markdown headings by one: `#` becomes h2 and `##`
   becomes h3. A write-up's `##` sections therefore arrive as h3, which is why
   h3 is styled as a full subhead rather than a minor one. */
.story-body>h2,.story-body>.story-shell>h2{font-family:var(--font-display);font-weight:900;font-stretch:var(--display-stretch);font-size:clamp(24px,3.6vw,32px);line-height:1.05;letter-spacing:-.015em;text-transform:uppercase;color:var(--hh-green);margin:var(--space-8) 0 var(--space-4);text-wrap:balance;}
.story-body>h3,.story-body>.story-shell>h3{font-family:var(--font-display);font-weight:900;font-stretch:var(--display-stretch);font-size:clamp(21px,2.8vw,26px);line-height:1.1;letter-spacing:-.01em;text-transform:uppercase;color:var(--hh-green);margin:var(--space-7) 0 var(--space-4);text-wrap:balance;}
.story-body>h4,.story-body>.story-shell>h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hh-slate);margin:var(--space-6) 0 var(--space-3);}
.story-body>blockquote,.story-body>.story-shell>blockquote{margin:var(--space-6) 0;padding:2px 0 2px var(--space-5);border-left:var(--border-bold) solid var(--hh-orange);font-family:var(--font-display);font-weight:800;font-stretch:var(--display-stretch);font-size:clamp(19px,2.6vw,25px);line-height:1.18;letter-spacing:-.01em;color:var(--hh-green);text-wrap:pretty;}

/* The two rules above this comment block target `.story-body>p`, but every
   paragraph in story-template.html sits inside `.story-shell` — they are
   grandchildren, so those rules have never matched anything on a story page.
   The effect was no gap between paragraphs at all and an `.intro` that got
   none of its larger size or green colour. `:not(.story-disclosure)` leaves
   the small print at the foot of the page in its own style. */
.story-body>.story-shell>p:not(.story-disclosure){font-size:var(--size-body-m);line-height:var(--leading-body);color:var(--hh-ink);text-wrap:pretty;margin-bottom:var(--space-5);}
.story-body>.story-shell>p.intro{font-size:var(--size-body-l);color:var(--hh-green);}

/* Q&A — the question carries the weight, the answer stays quiet and readable */
.qa{border-top:1px solid var(--line-hairline);padding:var(--space-6) 0 var(--space-2);}
.qa .q{font-family:var(--font-display);font-weight:900;font-stretch:var(--display-stretch);font-size:20px;line-height:1.15;text-transform:uppercase;letter-spacing:-.01em;color:var(--hh-green);text-wrap:pretty;}
.qa .a{margin-top:var(--space-4);}
.qa .a p{font-size:var(--size-body-m);line-height:var(--leading-body);color:var(--hh-slate);text-wrap:pretty;margin-bottom:var(--space-4);}
.qa .a p:last-child{margin-bottom:0;}

.pull-quote{margin:var(--space-7) 0;padding:var(--space-6);background:var(--hh-orange);border:var(--border-bold) solid var(--hh-green);box-shadow:var(--shadow-offset);}
.pull-quote blockquote{font-family:var(--font-display);font-weight:900;font-stretch:var(--display-stretch);font-size:clamp(22px,3.4vw,30px);line-height:1.08;text-transform:uppercase;letter-spacing:-.01em;color:var(--hh-green);text-wrap:balance;}
.pull-quote cite{display:block;margin-top:var(--space-4);font-family:var(--font-mono);font-size:10px;font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,26,18,.7);}

.story-facts{margin:var(--space-7) 0;border:var(--border-bold) solid var(--hh-green);box-shadow:var(--shadow-offset);background:var(--hh-cream-deep);padding:var(--space-5);}
.story-facts .callout-title{margin-bottom:var(--space-4);}
.story-facts dl{display:grid;grid-template-columns:auto 1fr;gap:var(--space-3) var(--space-5);}
.story-facts dt{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--hh-slate);padding-top:3px;}
.story-facts dd{font-size:var(--size-body-s);font-weight:600;color:var(--hh-green);text-wrap:pretty;}
.story-facts dd a{color:var(--hh-green);text-decoration:none;border-bottom:1.5px solid rgba(10,26,18,.3);}
.story-facts dd a:hover{color:var(--hh-orange-deep);border-color:var(--hh-orange);}

.story-end{border-top:1px solid var(--line-hairline);padding-top:var(--space-6);margin-top:var(--space-7);display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;}
.story-disclosure{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;line-height:1.7;text-transform:uppercase;color:var(--hh-slate);margin-top:var(--space-6);}

@media(max-width:600px){
  .story-facts dl{grid-template-columns:1fr;gap:var(--space-1) 0;}
  .story-facts dd{margin-bottom:var(--space-3);}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;}}
@media(max-width:900px){
  .editorial-card,.about-grid{grid-template-columns:1fr!important;}
  /* tablets/landscape phones get two tiles, not one enormous one */
  .brand-grid-3{grid-template-columns:repeat(2,1fr)!important;}
}
@media(max-width:600px){
  .brand-grid-3{grid-template-columns:1fr!important;}
}
@media(max-width:1150px){
  .hero-sticker{display:none;}
}
@media(max-width:700px){
  /* two compact rows — wordmark, then the nav */
  .bar{flex-wrap:wrap;gap:var(--space-2);padding:10px var(--gutter);}
  .wordmark-nav .w-half{font-size:22px;}
  .wordmark-nav .w-hoose{font-size:25px;}
  /* four items, spread across one full-width row — no scrolling, nothing clipped */
  .nav{width:100%;gap:var(--space-3);flex-wrap:wrap;justify-content:space-between;}
  .nav a{white-space:nowrap;padding:6px 0;}
  .nav .btn-sm{font-size:10px;padding:8px 12px;}
  .h-xl h1,.h-xl h2{font-size:clamp(36px,12vw,64px);}
  .foot-cols{padding:var(--space-6) var(--gutter) var(--space-5);}
  /* scale purely with viewport width so the wordmark can't outgrow the screen */
  .wordmark-foot .w-half{font-size:9.5vw;}
  .wordmark-foot .w-hoose{font-size:10.5vw;}
}