/* Fun Boston theme, Oct 2026: matches the Instagram post style.
   Paper + ink, one orange used only for tags and small accents.
   Two fonts: Anton (headlines, logo) and Archivo (everything else). */
@font-face{font-family:Anton;src:url('/assets/fonts/anton-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Archivo;src:url('/assets/fonts/archivo-var.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  --paper:#fbf6ea;--paper-2:#f3ecdc;--card:#fffaf0;
  --ink:#111111;--ink-2:#2b2a28;--ink-3:#5c5850;--navy:#111111;
  --rule:#d8cfbc;--rule-blue:#d8cfbc;
  --orange:#f26a1b;--orange-text:#a3400a;--orange-wash:#fde3d1;
  --font-display:Anton,'Arial Narrow',Impact,sans-serif;
  --font-head:Archivo,Arial,sans-serif;--font-body:Archivo,Arial,sans-serif;
  --font-hand:Archivo,Arial,sans-serif;--font-mono:Archivo,Arial,sans-serif;
  --radius:0px
}
body{font-family:var(--font-body);background:var(--paper);color:var(--ink);font-size:1.0625rem}
::selection{background:var(--orange);color:var(--ink)}

/* Headlines: tall, condensed, uppercase, like the posts */
h1,h2{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.98}
h3,h4{font-family:var(--font-head);font-weight:800;letter-spacing:-.015em;text-transform:none}
h1 em,h2 em{font-family:inherit;font-style:normal;font-weight:inherit;color:inherit}
.lede{font-size:1.15rem;color:var(--ink-2)}

/* Tags (eyebrows, categories): orange box, black text */
.eyebrow{display:inline-block;background:var(--orange);color:var(--ink)!important;font-family:var(--font-head);font-weight:800;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;padding:.3em .6em;line-height:1.2}
.eyebrow::before{display:none}
.fb-category{background:var(--orange);color:var(--ink);font-weight:800;letter-spacing:.06em;font-size:.68rem;padding:.3em .55em}

/* Links + buttons */
.textlink{font-family:var(--font-head);font-weight:700;border-bottom:2px solid var(--ink)}
.textlink:hover{border-bottom-color:var(--orange);color:var(--ink)}
.btn{font-family:var(--font-head);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:.9rem;background:var(--ink);color:var(--paper);border:2px solid var(--ink);box-shadow:none}
.btn:hover{background:var(--orange);color:var(--ink);border-color:var(--ink);transform:none;box-shadow:none}

/* Header: masthead like the post (wordmark + rule) */
.site-header{background:var(--paper);border-bottom:2px solid var(--ink)}
.site-header__inner{min-height:84px}
.fb-wordmark{font-family:var(--font-display)!important;font-weight:400!important;letter-spacing:.005em!important;text-transform:uppercase;font-size:clamp(30px,3.2vw,40px)!important;line-height:1;color:var(--ink);display:inline-block;padding-bottom:6px;background:linear-gradient(var(--orange),var(--orange)) left bottom/34% 4px no-repeat}
.fb-wordmark>span{display:none}
.site-footer .fb-wordmark{color:var(--paper)}
.site-nav a{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.82rem}
.nav-badge{background:none;color:inherit;padding:0}
@media(min-width:900px){.site-nav a[aria-current="page"]{text-decoration:none;box-shadow:inset 0 -3px 0 var(--orange)}}
.nav-toggle{font-family:var(--font-head);font-weight:700;border:2px solid var(--ink);border-radius:0}

/* "SO BASICALLY…" band: black, orange tag, big heavy punchline */
.fb-take{background:var(--ink);color:var(--paper);padding:20px 22px}
.fb-take>span{background:var(--orange);color:var(--ink);font-weight:800;letter-spacing:.06em}
.fb-take p{font-family:var(--font-head);font-weight:900;letter-spacing:-.025em;line-height:1.08}

/* Story cards across the site */
.fb-story-card{background:var(--card);border:1px solid var(--rule);border-top:3px solid var(--ink)}
.fb-story-card h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:1;font-size:clamp(1.7rem,2.6vw,2.2rem)}
.fb-page-intro h1{font-size:clamp(2.8rem,6vw,4.8rem)}

/* Footer */
.site-footer{background:var(--ink);color:var(--paper)}
.fb-footer-grid h2{font-family:var(--font-head);font-weight:800;color:var(--orange);text-transform:uppercase;letter-spacing:.08em}
.site-footer__bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Shop + merch */
.merch-card{border:2px solid var(--ink)}
.merch-card:hover,.merch-card:focus-visible{box-shadow:4px 4px 0 var(--ink);transform:translate(-2px,-2px)}
.merch-card__name{font-weight:800}
.merch-card__price{font-family:var(--font-head);font-weight:800;color:var(--ink)}
.hw-card__name{font-family:var(--font-head);font-weight:800}
.hw-drop__head h2{font-size:clamp(2.4rem,5vw,4rem)}
.hw-drop__head h2 em{color:var(--orange)}
.hw-styles a b,.hw-drop .eyebrow{color:inherit}
.hw-drop .eyebrow{color:var(--ink)!important}
.hw-styles a b{color:var(--orange)}
.drops-box{border:2px solid var(--ink);background:var(--card)}

/* ---------- Homepage ---------- */
.home-lead{padding:36px 0 44px;border-bottom:2px solid var(--ink)}
.home-lead__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
.home-lead__meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px;font-size:.85rem;color:var(--ink-3)}
.home-lead h1{font-size:clamp(3rem,6.6vw,6rem);margin:0 0 14px}
.home-lead h1 a{color:inherit;text-decoration:none}
.home-lead h1 a:hover{text-decoration:underline;text-decoration-thickness:4px;text-decoration-color:var(--orange);text-underline-offset:6px}
.home-lead__source{font-size:.9rem;font-weight:700;margin:0 0 18px}
.home-lead__source a{color:inherit}
.home-lead__summary{font-size:1.15rem;line-height:1.5;color:var(--ink-2);max-width:40rem;margin:0 0 22px}
.home-lead .fb-take p{font-size:clamp(1.5rem,2.6vw,2.2rem)}
.home-lead__actions{margin-top:20px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.home-also{border-left:2px solid var(--ink);padding-left:28px}
.home-also h2{font-size:1.6rem;margin:0 0 6px}
.home-also ol{list-style:none;margin:0;padding:0;counter-reset:also}
.home-also li{counter-increment:also;border-bottom:1px solid var(--rule);padding:14px 0 14px 40px;position:relative}
.home-also li::before{content:counter(also);position:absolute;left:0;top:10px;font-family:var(--font-display);font-size:1.9rem;line-height:1;color:var(--orange)}
.home-also a{font-weight:800;font-size:1.05rem;line-height:1.25;color:var(--ink);text-decoration:none}
.home-also a:hover{text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}
.home-also small{display:block;margin-top:4px;color:var(--ink-3);font-size:.8rem}

.home-sec{padding:44px 0}
.home-sec__head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:24px;border-bottom:2px solid var(--ink);padding-bottom:10px}
.home-sec__head h2{font-size:clamp(2rem,3.6vw,3rem);margin:0}
.home-stories{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.home-story{display:flex;flex-direction:column;gap:12px;min-width:0;background:var(--card);border:2px solid var(--ink);padding:20px 20px 0}
.home-story__sum{margin:0;font-size:.95rem;line-height:1.45;color:var(--ink-2)}
.home-story__meta{display:flex;gap:10px;align-items:center;font-size:.8rem;color:var(--ink-3)}
.home-story h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:1.6rem;line-height:1;letter-spacing:.005em;margin:0}
.home-story h3 a{color:inherit;text-decoration:none}
.home-story h3 a:hover{text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:4px}
.home-story__joke{margin:auto -20px 0;background:var(--ink);color:var(--paper);padding:14px 20px 16px;font-weight:900;font-size:1.1rem;line-height:1.2;letter-spacing:-.015em}
.home-story__joke span{display:inline-block;background:var(--orange);color:var(--ink);font-size:.64rem;letter-spacing:.07em;padding:.25em .5em;margin-bottom:8px}

.home-explore{background:var(--paper-2);border-block:2px solid var(--ink)}
.home-explore__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.home-explore__grid a{display:block;padding:26px 24px;text-decoration:none;color:var(--ink);border-right:2px solid var(--ink)}
.home-explore__grid a:last-child{border-right:0}
.home-explore__grid a:hover{background:var(--orange)}
.home-explore__grid strong{display:block;font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:2rem;line-height:1;margin-bottom:8px}
.home-explore__grid span{font-size:.95rem;color:var(--ink-2)}

.home-follow{padding:44px 0}
.home-follow__grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.home-follow h2{font-size:clamp(2rem,4vw,3.2rem);margin:0 0 10px}
.home-follow p{margin:0 0 18px;color:var(--ink-2)}
.home-follow .kit-form{display:flex;flex-wrap:wrap;gap:10px}
.home-follow .kit-form input{flex:1 1 220px;min-height:48px;border:2px solid var(--ink);background:var(--card);padding:0 14px;font:inherit;border-radius:0}

@media(max-width:900px){
  .home-lead__grid{grid-template-columns:1fr;gap:28px}
  .home-also{border-left:0;padding-left:0;border-top:2px solid var(--ink);padding-top:18px}
  .home-stories{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .home-explore__grid{grid-template-columns:1fr}
  .home-explore__grid a{border-right:0;border-bottom:2px solid var(--ink)}
  .home-explore__grid a:last-child{border-bottom:0}
  .home-follow__grid{grid-template-columns:1fr;gap:24px}
}
@media(max-width:560px){
  .home-lead{padding:24px 0 32px}
  .home-stories{grid-template-columns:1fr}
  .home-sec{padding:32px 0}
  .home-sec__head{flex-direction:row;align-items:end}
  .site-header__inner{min-height:72px}
}
/* Story pages: text only */
.fb-article-grid--text{grid-template-columns:1fr!important;max-width:760px}
.fb-article-copy>.fb-take p{font-size:clamp(1.5rem,3vw,2.1rem)}

/* Walk finder */
.walk-finder__controls input{border:2px solid var(--ink);border-radius:0;min-height:48px;font:inherit;font-size:1.1rem;padding:0 14px;background:var(--card)}
.walk-card.is-near{outline:3px solid var(--orange);outline-offset:-3px}
.walk-near{display:inline-block;align-self:flex-start;background:var(--orange);color:var(--ink);font-weight:800;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:.25em .55em;margin-bottom:8px}
.home-zip{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.home-zip input{width:8.5em;min-height:44px;border:2px solid var(--ink);border-radius:0;padding:0 10px;font:inherit;background:var(--card)}
.home-zip .btn{min-height:44px;padding:.5em .9em}
.site-nav a[data-nav="shop"]{border:2px solid var(--ink);border-radius:0;color:var(--ink);background:none}
.site-nav a[data-nav="shop"]:hover{background:var(--orange)}
.home-sec--guides{background:var(--paper-2);border-top:2px solid var(--ink)}
.home-sec--guides .home-story{padding-bottom:20px}
.home-story__more{margin:auto 0 0}
.home-story h3{text-wrap:balance}

/* QA 2026-10-08: the shop arrow badge still inherited Outfit from rebrand.css */
.nav-badge{font-family:var(--font-head)}

/* Sully logo mark */
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-mark{width:52px;height:52px;flex:none}
.site-footer .brand-mark{width:60px;height:60px}
@media(max-width:560px){.brand-mark{width:42px;height:42px}.brand{gap:8px}}

/* Wordmark v2: no underline, even spacing, centered on Sully */
.fb-wordmark{background:none!important;padding:0!important;letter-spacing:.03em!important;word-spacing:.08em;line-height:1!important;font-size:clamp(28px,3vw,36px)!important;display:inline-block;transform:translateY(1px)}
.brand{gap:12px;align-items:center}
.site-footer .fb-wordmark{font-size:34px!important}
.fb-wordmark{word-spacing:0;transform:translateY(3px)}

/* Wordmark v3: stacked FUN / BOSTON next to Sully */
.fb-wordmark{width:min-content;white-space:normal!important;font-size:27px!important;line-height:.92!important;letter-spacing:.035em!important;transform:none}
.brand-mark{width:56px;height:56px}
.site-footer .fb-wordmark{font-size:30px!important}
@media(max-width:560px){.fb-wordmark{font-size:23px!important}.brand-mark{width:46px;height:46px}}

/* Halloween cards: real tee photos */
.hw-card__img{background:#e9e4da}
.hw-card__img img{aspect-ratio:3/4;object-fit:cover}
.hw-styles li:only-child{grid-column:1/-1}