/* Brine & Dandy (concept) · homepage */
.hero{border-bottom:3px double var(--ink);overflow:hidden}
.hero-in{display:grid;gap:40px;padding-top:clamp(36px,5vw,72px);padding-bottom:clamp(48px,6vw,88px);align-items:center}
.hero-kicker{margin:18px 0 14px}
.hero h1{max-width:12ch}
.hero .lead{margin-top:20px}
.hero-facts{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0;border-top:1.5px solid var(--ink);max-width:560px}
.hero-facts li{display:grid;grid-template-columns:80px 1fr;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--rule);background:rgba(247,246,241,.85)}
.hero-facts b{font-weight:700}
.hero-facts a{text-decoration-color:var(--gold);text-decoration-thickness:2px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-art{position:relative;max-width:520px;width:100%;justify-self:center}
.hero-art .wrap-photo{margin:0}
.hero-art .sticker{right:-6px;top:-22px}
@media (min-width:900px){.hero-in{grid-template-columns:1.25fr 1fr;gap:56px}.hero-art .sticker{right:-30px;top:-34px;width:136px;height:136px}}

/* Daily Dandy */
.paper-sec{position:relative;border-bottom:1.5px solid var(--ink)}
.masthead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 20px;border-bottom:3px double var(--ink);padding-bottom:12px;margin-bottom:24px}
.masthead h2{font-size:clamp(2rem,1.4rem + 2.6vw,3.4rem)}
.cols{display:grid;gap:28px}
.col{display:flex;flex-direction:column;gap:8px}
.col p{margin:0;color:var(--ink-2)}
.col .col-h{font:400 1.55rem/1.08 var(--display);margin:2px 0 4px}
.col .link-arrow{align-self:flex-start;margin-top:8px}
.spark{display:flex;align-items:flex-end;gap:3px;height:56px;margin-top:10px;border-bottom:1.5px solid var(--ink)}
.spark i{flex:1;background:var(--rule);min-width:3px;border-radius:2px 2px 0 0}
.spark i.cur{background:var(--gold);box-shadow:inset 0 0 0 1.5px var(--ink)}
@media (min-width:860px){.cols{grid-template-columns:repeat(3,1fr);gap:0}.col{padding:0 28px;border-left:1px solid var(--rule)}.col:first-child{padding-left:0;border-left:0}.col:last-child{padding-right:0}}

/* Price board */
.board-grid{display:grid;gap:36px;align-items:start}
.board-intro h2{margin:12px 0 16px;max-width:12ch}
.supper{margin:28px 0 22px;padding:22px;background:var(--gold);border:2px solid var(--ink);border-radius:var(--r);box-shadow:5px 5px 0 var(--ink)}
.supper .tag{background:var(--ink);color:#fff}
.supper-h{font-size:2rem;margin:12px 0 8px}
.supper-p{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 0}
.supper-p .mono{font-size:1.6rem;font-weight:500}
@media (min-width:960px){.board-grid{grid-template-columns:5fr 7fr;gap:56px}}

/* How it works */
.how{border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.how-h{max-width:16ch;background:var(--tile);display:inline-block;padding:4px 10px 6px;margin-left:-10px}
.how-steps{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:18px}
.how-steps li{background:var(--card);border:1.5px solid var(--ink);border-radius:var(--r);padding:24px;position:relative}
.how-steps .num{display:block;font:400 3.4rem/1 var(--display);color:var(--gold-ink);margin-bottom:8px}
.how-steps h3{margin-bottom:8px}
.how-steps p{color:var(--ink-2);margin:0}
.slots-mini{margin-top:14px!important;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.how-cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
@media (min-width:860px){.how-steps{grid-template-columns:repeat(3,1fr)}}

/* Promos */
.promo{background:var(--card);border:1.5px solid var(--ink);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.promo-ph{aspect-ratio:16/10;border-radius:0}
.promo-ph img{object-position:50% 72%}
.promo-b{padding:28px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;flex:1}
.promo-b p{margin:0;color:var(--ink-2)}
.promo-b h2{font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem)}
.promo-club{background:var(--ink);color:#fff}
.promo-club .kicker,.promo-club .promo-b p{color:#E3DFD3}
.promo-club .promo-b{justify-content:center}
.mini-card{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;width:100%;max-width:360px;margin:10px 0}
.mini-card span{aspect-ratio:1;border-radius:50%;border:2px dashed #8E8B80;display:grid;place-items:center;font:500 .7rem/1 var(--mono);text-transform:uppercase}
.mini-card span.got{background:var(--gold);border:2px solid var(--gold);position:relative}
.mini-card span.got::after{content:"";width:46%;height:46%;border-radius:50%;border:2px solid var(--ink)}
.mini-card span.free{border-style:solid;border-color:var(--gold);color:var(--gold-2)}

/* Fish band */
.fishband{position:relative;min-height:540px;display:flex;align-items:flex-end;padding:120px 0 56px;overflow:hidden;background:var(--ink)}
.fishband-ph{position:absolute;inset:0}
.fishband-ph picture,.fishband-ph img{width:100%;height:100%;object-fit:cover}
.fishband .wrap{position:relative;width:100%}
.fishband-card{max-width:560px;background:var(--paper);border:1.5px solid var(--ink);padding:28px;box-shadow:6px 6px 0 var(--ink)}
.fishband-card h2{margin:10px 0 14px;font-size:clamp(1.8rem,1.3rem + 1.8vw,2.7rem)}
.fishband-card p{color:var(--ink-2)}
.msc-note{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.9rem}

/* GF week */
.gf-grid{display:grid;gap:32px;align-items:center}
.gf-grid h2{margin:12px 0 16px;max-width:14ch}
.gf-grid .lead{margin-bottom:18px}
.week{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.week li{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 4px;border:1.5px solid var(--grout);border-radius:var(--r);background:var(--card);text-align:center}
.week li.on{background:var(--gold);border-color:var(--ink)}
.week .wd{font:500 .72rem/1 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.week .wn{font:400 1.7rem/1 var(--display)}
.week .ws{font-size:.7rem;line-height:1.15;font-weight:600}
@media (max-width:520px){.week{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:960px){.gf-grid{grid-template-columns:5fr 7fr;gap:56px}}

/* Find */
.find-grid{display:grid;gap:36px;align-items:start}
.find-grid h2{margin:12px 0 14px;max-width:13ch}
@media (min-width:960px){.find-grid{grid-template-columns:1fr 1.1fr;gap:56px}}
.rev-h{margin-bottom:28px;max-width:14ch}