/*
Theme Name:        CSIMM
Author:            Greg Barlin
Description:       Custom theme for CSIMM — dark, search-led wine reviews.
Version:           0.5.0
Requires at least: 6.9
Requires PHP:      8.2
License:           GPL-2.0-or-later
Text Domain:       csimm
*/

/* ================================================================
   TOKENS
   Each falls back to a literal, so the design survives even if a
   theme.json preset goes missing.
   ================================================================ */
:root {
    --bg:      #0A0A0C;
    --surface: #101014;
    --line:    #24242C;
    --line2:   #33333D;
    --text:    #F4F1EB;
    --muted:   #8E8B84;
    --muted2:  #615E58;
    --gold:    #C8A44D;
    --wine:    #7C1E30;
    --kicker:  #B9C6CF;
    --serif:   "Playfair Display", Georgia, "Times New Roman", serif;
    --sans:    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold); }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 48px; }
.eyebrow { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }

/* ================================================================
   HEADER / FOOTER
   ================================================================ */
.site-head {
    position: sticky; top: 0; z-index: 40;
    background: rgba(10,10,12,.86);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.site-head__inner {
    max-width: 1160px; margin: 0 auto; padding: 0 48px;
    height: 70px; display: flex; align-items: center; gap: 28px;
}
.mark { font-family: var(--serif); font-size: 21px; letter-spacing: .34em; text-transform: uppercase; white-space: nowrap; }
.mark i { color: var(--gold); font-style: normal; }
.mark--sm { font-size: 16px; }

.navsearch { flex: 1; max-width: 380px; }
.navsearch input {
    width: 100%; height: 36px; padding: 0 15px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--line2); border-radius: 999px;
    color: var(--text); font-family: var(--sans); font-size: 13px;
}
.navsearch input::placeholder { color: var(--muted2); }
.navsearch input:focus { outline: none; border-color: var(--gold); }

.navlinks { margin-left: auto; display: flex; gap: 26px; }
.navlinks a { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.navlinks a:hover { color: var(--text); }

.site-foot { margin-top: 92px; border-top: 1px solid var(--line); }
.site-foot__inner {
    max-width: 1160px; margin: 0 auto; padding: 48px 48px 64px;
    display: grid; grid-template-columns: 1.5fr 1fr; gap: 34px;
}
.site-foot p { font-size: 13px; color: var(--muted); margin: 13px 0 0; max-width: 42ch; }
.site-foot h4 { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted2); margin: 0 0 15px; }
.site-foot a { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; }

/* ================================================================
   ARCHIVE HEAD
   ================================================================ */
.page-head { padding: 64px 0 26px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.page-head h1 { font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1.06; margin: 0 0 10px; }
.page-head__count { margin: 0; color: var(--muted); font-size: 13.5px; }

/* ================================================================
   REVIEW CARD
   ================================================================ */
.results { display: flex; flex-direction: column; }

.rcard {
    display: grid; grid-template-columns: 100px 1fr 100px; gap: 24px;
    padding: 26px 0; border-bottom: 1px solid var(--line); align-items: center;
}
.rcard__art { display: block; height: 134px; border: 1px solid var(--line); overflow: hidden; background: #0d0d11; }
.rcard__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; display: block; }
.rcard--noimg .rcard__art { background: linear-gradient(180deg, #101015, #0b0b0e); }

.rcard__vintage { font-size: 12.5px; letter-spacing: .16em; font-weight: 500; color: var(--text); margin-bottom: 5px; }
.rcard__title { font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.24; margin: 0 0 5px; }
.rcard__meta { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted2); margin-bottom: 12px; }
.rcard__teaser {
    font-size: 14.5px; color: var(--muted); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rcard__foot { display: flex; gap: 16px; margin-top: 12px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted2); }

.rcard__score { text-align: center; font-family: var(--serif); line-height: 1; }
.rcard__score b { display: block; font-size: 36px; font-weight: 400; color: var(--gold); }
.rcard__score small { display: block; font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted2); margin-top: 5px; font-family: var(--sans); }
.rcard__noscore { font-family: var(--sans); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted2); }

/* ================================================================
   BOTTLE SILHOUETTES
   ================================================================ */
.bottle-ph { width: 100%; height: 100%; display: block; }
.bottle-ph__shadow  { fill: rgba(0,0,0,.6); }
.bottle-ph__body    { fill: #15151b; stroke: rgba(255,255,255,.08); stroke-width: 1; }
.bottle-ph__lip     { fill: #24242e; }
.bottle-ph__capsule { fill: #20202a; }
.bottle-ph__label   { fill: rgba(244,241,235,.075); }
.bottle-ph__shine   { stroke: rgba(255,255,255,.11); stroke-width: 1.6; stroke-linecap: round; fill: none; }
.bottle-ph__shine--soft { stroke: rgba(255,255,255,.05); stroke-width: 1.2; }

.bottle-ph--champagne .bottle-ph__lip     { fill: rgba(200,164,77,.30); }
.bottle-ph--champagne .bottle-ph__capsule { fill: rgba(200,164,77,.20); }
.bottle-ph--champagne .bottle-ph__body    { stroke: rgba(255,255,255,.09); }
.bottle-ph--champagne .bottle-ph__shine   { stroke: rgba(255,255,255,.12); stroke-width: 1.8; }

/* ================================================================
   SINGLE REVIEW
   ================================================================ */
.review__grid { display: grid; grid-template-columns: 340px 1fr; gap: 60px; padding: 52px 0 0; align-items: start; }
.review__art { border: 1px solid var(--line); height: 470px; overflow: hidden; background: linear-gradient(180deg, #101015, #0b0b0e); }
.review__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; display: block; }

.crumb { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted2); margin-bottom: 18px; display: flex; gap: 8px; }
.review__vintage { font-size: 13px; letter-spacing: .2em; font-weight: 500; color: var(--text); margin-bottom: 10px; }
.review__title { font-family: var(--serif); font-weight: 400; font-size: 42px; line-height: 1.1; margin: 0; }

.scorebar {
    display: flex; align-items: center; gap: 28px;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    padding: 24px 0; margin: 26px 0 30px;
}
.score-ring {
    width: 104px; height: 104px; flex: 0 0 104px;
    border: 1px solid rgba(200,164,77,.4); border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-family: var(--serif); line-height: 1;
}
.score-ring b { font-size: 46px; font-weight: 400; color: var(--gold); }
.score-ring small { font-family: var(--sans); font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted2); margin-top: 6px; }
.score-ring--empty { border-color: var(--line2); }
.score-ring--empty b { color: var(--muted2); }

.scorebar__meta { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted2); line-height: 1.75; }
.scorebar__meta b { display: block; color: var(--text); letter-spacing: .06em; text-transform: none; font-size: 14.5px; font-weight: 600; margin-bottom: 2px; }
.flag { display: inline-block; margin-top: 6px; border: 1px solid var(--line2); border-radius: 999px; padding: 2px 9px; font-size: 9px; letter-spacing: .2em; }

.note { font-size: 17px; line-height: 1.78; color: #DAD6CE; max-width: 62ch; }
.note p { margin: 0 0 19px; }
.note p:first-of-type::first-letter {
    font-family: var(--serif); font-size: 54px; float: left;
    line-height: .82; padding: 6px 12px 0 0; color: var(--gold);
}
.note__teaser { color: var(--muted); }

.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; margin: 36px 0 0; border-top: 1px solid var(--line); }
.specs div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.specs dt { color: var(--muted2); letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; white-space: nowrap; }
.specs dd { margin: 0; text-align: right; }

/* ================================================================
   TAILS
   ================================================================ */
.tail { padding: 70px 0 0; }
.tail__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 24px; }
.tail__head h2 { font-family: var(--serif); font-weight: 400; font-size: 29px; margin: 0; }
.tail__more { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

.history { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 520px; }
.history a { display: flex; justify-content: space-between; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line); }
.history__date { font-size: 13.5px; color: var(--muted); }
.history__score { font-family: var(--serif); font-size: 21px; color: var(--gold); }

.years { display: flex; flex-wrap: wrap; gap: 8px; }
.year {
    border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px;
    font-size: 13px; letter-spacing: .1em; color: var(--muted);
}
.year:hover { border-color: var(--gold); color: var(--gold); }

/* ================================================================
   LOCKED STATE
   ================================================================ */
.csimm-locked {
    border: 1px dashed var(--line2); border-radius: 3px; padding: 14px 16px;
    font-family: var(--sans); font-size: 10.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted2); text-align: center;
}
.csimm-locked--score { flex: 0 0 104px; padding: 22px 8px; }

/* ================================================================
   PAGINATION
   ================================================================ */
.pagination { padding: 40px 0 0; display: flex; justify-content: center; }
.nav-links { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 10px;
    border: 1px solid var(--line); border-radius: 3px;
    font-size: 13px; color: var(--muted);
}
.page-numbers.current { border-color: var(--gold); color: var(--gold); }
.page-numbers:hover { color: var(--text); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 960px) {
    .wrap, .site-head__inner, .site-foot__inner { padding-left: 32px; padding-right: 32px; }
    .navlinks { gap: 18px; font-size: 11px; }
    .review__grid { grid-template-columns: 260px 1fr; gap: 40px; }
    .review__art { height: 360px; }
    .review__title { font-size: 34px; }
}

@media (max-width: 760px) {
    .wrap, .site-head__inner, .site-foot__inner { padding-left: 20px; padding-right: 20px; }
    .site-head__inner { height: 62px; gap: 14px; }
    .navlinks { display: none; }
    .navsearch { max-width: none; }

    .page-head { padding-top: 40px; }
    .page-head h1 { font-size: 31px; }

    .rcard { grid-template-columns: 64px 1fr; gap: 15px; padding: 20px 0; align-items: start; }
    .rcard__art { height: 90px; }
    .rcard__title { font-size: 17.5px; }
    .rcard__teaser { -webkit-line-clamp: 3; font-size: 13.5px; }
    .rcard__foot { flex-direction: column; gap: 5px; }
    .rcard__score { display: none; }

    .review__grid { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; }
    .review__art { height: 320px; }
    .review__title { font-size: 29px; }
    .scorebar { gap: 20px; padding: 20px 0; margin: 22px 0 26px; }
    .score-ring { width: 86px; height: 86px; flex-basis: 86px; }
    .score-ring b { font-size: 38px; }
    .note { font-size: 16px; line-height: 1.72; }
    .note p:first-of-type::first-letter { font-size: 44px; }
    .specs { grid-template-columns: 1fr; }

    .tail { padding-top: 50px; }
    .tail__head h2 { font-size: 23px; }

    .site-foot__inner { grid-template-columns: 1fr; }
}

/* ================================================================
   NOTE LIST — every tasting of one bottle
   ================================================================ */
.notelist { display: flex; flex-direction: column; }
.noterow {
    display: grid; grid-template-columns: 150px 1fr 60px; gap: 24px;
    align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line);
}
.noterow__date { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted2); }
.noterow__teaser {
    font-size: 14.5px; color: var(--muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.noterow:hover .noterow__teaser { color: var(--text); }
.noterow__score { font-family: var(--serif); font-size: 24px; color: var(--gold); text-align: right; }

@media (max-width: 760px) {
    .noterow { grid-template-columns: 1fr 50px; gap: 6px 16px; }
    .noterow__date { grid-column: 1; }
    .noterow__score { grid-column: 2; grid-row: 1 / span 2; font-size: 20px; }
    .noterow__teaser { grid-column: 1; }
}

/* ================================================================
   WINE PAGE — the vertical
   ================================================================ */
.trendwrap { padding: 40px 0 10px; overflow-x: auto; }
.trend { display: flex; align-items: stretch; gap: 14px; height: 190px; }
.trend__grp { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.trend__bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; flex: 1; }

/* Each bar is a full-height column: score label sitting directly on top of
   the fill, and the whole thing is the click target. */
.trend__bar {
    flex: 1; max-width: 40px; height: 100%;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
}
.trend__score { font-family: var(--serif); font-size: 12.5px; color: var(--gold); text-align: center; line-height: 1; }
.trend__score.is-empty { color: var(--muted2); }
.trend__fill {
    width: 100%; display: block;
    background: rgba(200,164,77,.16);
    border-top: 2px solid rgba(200,164,77,.45);
    transition: background .15s, border-color .15s;
}
.trend__fill.is-latest { background: rgba(200,164,77,.42); border-top-color: var(--gold); }
.trend__fill.is-empty { background: rgba(255,255,255,.03); border-top-color: var(--line2); }
.trend__bar:hover .trend__fill { background: rgba(200,164,77,.6); border-top-color: #E6C674; }
.trend__bar:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }

.trend__year { font-size: 11px; letter-spacing: .08em; color: var(--muted2); text-align: center; line-height: 1; }
.trend__year:hover { color: var(--gold); }
.trendnote { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted2); margin: 20px 0 0; }

.vlist { display: flex; flex-direction: column; margin-top: 34px; }
.vrow {
    display: grid; grid-template-columns: 90px 100px 1fr 72px; gap: 24px;
    align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line);
}
.vrow__year { font-family: var(--serif); font-size: 22px; color: var(--text); }
.vrow__notes { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted2); }
.vrow__teaser {
    font-size: 14px; color: var(--muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vrow:hover .vrow__teaser { color: var(--text); }
.vrow__score { font-family: var(--serif); font-size: 26px; color: var(--gold); text-align: center; }

@media (max-width: 760px) {
    .trend { height: 110px; gap: 4px; }
    .trend__score { font-size: 12px; }
    .trend__year { font-size: 9px; }
    .vrow { grid-template-columns: 1fr 56px; gap: 4px 16px; }
    .vrow__year { grid-column: 1; }
    .vrow__score { grid-column: 2; grid-row: 1 / span 3; font-size: 22px; }
    .vrow__notes { grid-column: 1; }
    .vrow__teaser { grid-column: 1; }
}


/* ================================================================
   WINE PAGE — column headers
   ================================================================ */
.vhead {
    display: grid; grid-template-columns: 90px 100px 1fr 72px; gap: 24px;
    margin-top: 40px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
    font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted2);
}
.vhead span:last-child { text-align: center; }
.vlist { margin-top: 0; }

@media (max-width: 760px) {
    /* Rows restack on a phone, so column headers would no longer line up. */
    .vhead { display: none; }
}

/* ================================================================
   SEARCH + ARCHIVE
   ================================================================ */
.page-head__desc { margin-top: 14px; max-width: 62ch; color: var(--muted); font-size: 14px; }

/* A list with a featured image sets it beside the header text, on the left.
   The image keeps its own proportions rather than being cropped to a banner. */
.page-head--art { display: flex; align-items: flex-start; gap: 32px; }
.page-head--art .page-head__text { flex: 1 1 auto; min-width: 0; }
.page-head__art { flex: 0 0 190px; }
.page-head__art img {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--line); border-radius: 3px;
}

@media (max-width: 760px) {
    .page-head--art { flex-direction: column; gap: 20px; }
    .page-head__art { flex-basis: auto; max-width: 150px; }
}

.searchhead { padding: 56px 0 26px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.bigsearch {
    display: flex; gap: 12px; align-items: center;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--line2); border-radius: 999px;
    padding: 8px 10px 8px 24px;
}
.bigsearch:focus-within { border-color: var(--gold); }
.bigsearch input[type="search"] {
    flex: 1; border: 0; background: none; color: var(--text);
    font-family: var(--sans); font-size: 17px; padding: 8px 0;
}
.bigsearch input[type="search"]:focus { outline: none; }
.bigsearch input[type="search"]::placeholder { color: var(--muted2); }
.bigsearch button {
    border: 0; border-radius: 999px; padding: 11px 22px; cursor: pointer;
    background: var(--gold); color: #17171a;
    font-family: var(--sans); font-size: 11px; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
}
.bigsearch button:hover { background: #E6C674; }
.searchhead__count { margin: 22px 0 0; color: var(--muted); font-size: 14px; }
.searchhead__count b { color: var(--text); font-weight: 600; }

.noresults { padding: 60px 0; color: var(--muted); font-size: 16px; }
.noresults__hint { font-size: 13.5px; color: var(--muted2); max-width: 60ch; }
.hintrow { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 24px; }
.hint {
    font-size: 11.5px; color: var(--muted);
    border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px;
}
.hint:hover { border-color: var(--gold); color: var(--gold); }

/* Relevanssi wraps matched words in <strong> inside search snippets. */
.rcard__teaser strong {
    font-weight: 500;
    color: var(--text);
    background: rgba(200,164,77,.14);
    padding: 0 2px;
}

/* ================================================================
   ADMIN BAR
   The admin bar is fixed at 32px, so a sticky header at top:0 slides
   under it and gets clipped. Only applies above 783px — below that
   WordPress un-fixes the bar and lets it scroll away.
   ================================================================ */
@media screen and (min-width: 783px) {
    body.admin-bar .site-head { top: 32px; }
}

/* ================================================================
   FRONT PAGE — first screen
   Hero and the review strip together fill the viewport, so both land
   above the fold at any window height.
   ================================================================ */
.firstscreen {
    min-height: calc(100vh - 70px);
    display: flex; flex-direction: column;
    position: relative; overflow: hidden;
}
.firstscreen__photo { position: absolute; inset: 0; }
.firstscreen__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; display: block; }
.firstscreen__scrim {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(100% 78% at 50% 40%, rgba(10,10,12,.06) 0%, rgba(10,10,12,.30) 58%, rgba(10,10,12,.62) 100%),
        linear-gradient(180deg, rgba(10,10,12,.42) 0%, rgba(10,10,12,.04) 24%, rgba(10,10,12,.38) 66%, rgba(10,10,12,.90) 88%, rgba(10,10,12,1) 100%);
}
.firstscreen__glow {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(120% 55% at 50% 100%, rgba(124,30,48,.26) 0%, rgba(124,30,48,0) 60%),
        radial-gradient(80% 46% at 50% -12%, rgba(200,164,77,.08) 0%, rgba(0,0,0,0) 70%);
}
.firstscreen__grain {
    position: absolute; inset: 0; pointer-events: none; opacity: .35;
    background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 3px 3px;
}

.hero {
    flex: 1 1 auto; min-height: 340px;
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 2;
    padding: 36px 48px 30px; text-align: center;
}
.hero__inner { width: 100%; max-width: 700px; }
.hero__title {
    font-family: var(--serif); font-weight: 400; font-size: 56px;
    line-height: 1.04; letter-spacing: -.015em; margin: 0 0 16px;
    text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 4px 34px rgba(0,0,0,.7);
}
.hero__kicker {
    font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase;
    font-weight: 500; color: #CFD9E1; margin: 0 0 30px;
    text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 2px 16px rgba(0,0,0,.8);
}
/* The count is the credential — give it the strongest value in the line. */
.hero__kicker b { color: #FFFFFF; font-weight: 600; }
.bigsearch--hero {
    background: rgba(10,10,14,.52);
    border-color: rgba(255,255,255,.24);
    box-shadow: 0 20px 60px rgba(0,0,0,.65);
    backdrop-filter: blur(14px) saturate(1.1);
    padding: 10px 12px 10px 26px;
}
.hintrow--hero { justify-content: center; margin-top: 22px; }
.hintrow--hero .hint { background: rgba(10,10,12,.42); backdrop-filter: blur(8px); }

/* ---------- the strip ---------- */
.juststrip { flex: 0 0 auto; position: relative; z-index: 2; padding: 0 0 34px; }
.juststrip__head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    border-top: 1px solid var(--line); padding: 20px 0;
}
.juststrip__head .eyebrow { margin: 0; }
.jrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }

.jcard { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.jcard__art { display: block; height: 96px; border: 1px solid var(--line); overflow: hidden; background: linear-gradient(180deg, #101015, #0b0b0e); }
.jcard__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; display: block; }
.jcard__body { display: block; min-width: 0; }
.jcard__score { display: flex; align-items: baseline; gap: 6px; margin-bottom: 5px; }
.jcard__score b { font-family: var(--serif); font-size: 21px; font-weight: 400; color: var(--gold); line-height: 1; }
.jcard__score em { font-style: normal; font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted2); }
.jcard__title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-family: var(--serif); font-size: 15.5px; line-height: 1.3; margin-bottom: 6px;
}
.jcard__vintage { font-family: var(--sans); font-size: 12px; letter-spacing: .14em; font-weight: 500; color: var(--text); }
.jcard__teaser {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.jcard:hover .jcard__teaser { color: var(--text); }

@media screen and (min-width: 783px) {
    body.admin-bar .firstscreen { min-height: calc(100vh - 102px); }
}

@media (max-width: 1100px) {
    .hero__title { font-size: 50px; }
    .jrow { gap: 20px; }
}
@media (max-width: 960px) {
    .hero { padding: 32px 32px 26px; min-height: 300px; }
    .hero__title { font-size: 44px; }
    .jrow { grid-template-columns: 1fr 1fr; gap: 18px 26px; }
    .jcard:nth-child(n+3) { display: none; }
}
@media (max-width: 760px) {
    .hero { padding: 26px 20px 22px; min-height: 0; }
    .hero__title { font-size: 36px; }
    .hero__kicker { font-size: 11px; letter-spacing: .18em; margin-bottom: 22px; }
    .bigsearch--hero { padding: 8px 8px 8px 18px; }
    .bigsearch--hero input[type="search"] { font-size: 15px; }
    .bigsearch--hero button { padding: 10px 16px; font-size: 10px; }
    .hintrow--hero { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; margin: 20px -20px 0; padding: 0 20px 4px; }
    .hintrow--hero .hint { flex: 0 0 auto; }

    .juststrip__head { padding: 16px 0; }
    .jrow { display: flex; overflow-x: auto; gap: 16px; margin: 0 -20px; padding: 0 20px 4px; }
    .jcard { flex: 0 0 270px; grid-template-columns: 40px 1fr; gap: 12px; }
    .jcard:nth-child(n+3) { display: grid; }
    .jcard__art { height: 88px; }
}

/* The hero search sits over a photograph, so it can't rely on the page
   background for contrast — it carries its own. */
.bigsearch--hero {
    background: rgba(10,10,14,.66);
    backdrop-filter: blur(18px) saturate(1.1);
}
.bigsearch--hero input[type="search"]::placeholder {
    color: #A8B3BB;
    opacity: 1; /* Firefox dims placeholders by default */
}

/* ================================================================
   FRONT PAGE — sections
   ================================================================ */
.sec { padding: 80px 0 0; }
.sec .tail__head { margin-bottom: 28px; }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

.gcard { display: block; }
.gcard__art { display: block; height: 270px; border: 1px solid var(--line); overflow: hidden; margin-bottom: 15px; background: linear-gradient(180deg, #101015, #0b0b0e); }
.gcard__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; display: block; }
.gcard__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.gcard__text { display: block; min-width: 0; }
.gcard__vintage { display: block; font-size: 11.5px; letter-spacing: .16em; font-weight: 500; color: var(--text); margin-bottom: 3px; }
.gcard__title { display: block; font-family: var(--serif); font-size: 18px; line-height: 1.28; margin-bottom: 5px; }
.gcard__meta { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted2); }
.gcard__score { font-family: var(--serif); font-size: 27px; color: var(--gold); line-height: 1; }
.gcard__teaser {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 12.5px; line-height: 1.55; color: var(--muted); margin-top: 10px;
}
.gcard:hover .gcard__teaser { color: var(--text); }

/* ---------- Champagne panel ---------- */
.panel {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center;
    border: 1px solid var(--line); border-radius: 3px; padding: 48px;
    background: linear-gradient(140deg, #101318, #0b0b0e);
}
.panel__text h2 { font-family: var(--serif); font-weight: 400; font-size: 36px; margin: 12px 0 14px; }
.panel__text p { color: var(--muted); font-size: 14.5px; margin: 0 0 24px; max-width: 46ch; }
.panel__stats { display: flex; gap: 36px; }
.panel__stats b { display: block; font-family: var(--serif); font-size: 28px; font-weight: 400; color: var(--gold); line-height: 1; }
.panel__stats span { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted2); }
.panel__links { display: grid; gap: 11px; }
.panel__links a {
    display: flex; justify-content: space-between; align-items: center;
    border: 1px solid var(--line); border-radius: 2px; padding: 15px 17px; font-size: 13.5px;
}
.panel__links a:hover { border-color: var(--gold); }
.panel__links span { color: var(--muted2); font-size: 11px; letter-spacing: .1em; }

@media (max-width: 960px) {
    .grid3 { grid-template-columns: 1fr 1fr; }
    .gcard:nth-child(3) { display: none; }
    .panel { grid-template-columns: 1fr; gap: 32px; padding: 36px; }
}
@media (max-width: 760px) {
    .sec { padding-top: 56px; }
    .grid3 { grid-template-columns: 1fr 1fr; gap: 16px; }
    .gcard__art { height: 180px; }
    .gcard__title { font-size: 15px; }
    .gcard__teaser { display: none; }
    .panel { padding: 26px; }
    .panel__text h2 { font-size: 27px; }
    .panel__stats { gap: 24px; flex-wrap: wrap; }
}

.panel__text h2 a { color: inherit; }
.panel__text h2 a:hover { color: var(--gold); }
.panel__linkshead {
    font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
    color: var(--muted2); margin-bottom: 4px;
}

/* paginate_links() outputs bare anchors, unlike the_posts_pagination() */
.single-list main > .page-numbers,
.single-list main .page-numbers { margin-top: 8px; }
.single-list main { padding-bottom: 20px; }

/* ================================================================
   LISTS LANDING
   ================================================================ */
.lgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
.lcard {
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 250px; padding: 26px;
    border: 1px solid var(--line); border-radius: 3px;
    background: linear-gradient(180deg, #14161c 0%, #0b0b0e 100%);
    transition: border-color .2s;
}
.lcard:hover { border-color: var(--gold); }
.lcard__art { margin-bottom: auto; }
.lcard__art img {
    display: block; width: 64px; height: 86px; object-fit: cover;
    border: 1px solid var(--line); border-radius: 2px; margin-bottom: 18px;
}
.lcard__meta { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.lcard__title { font-family: var(--serif); font-size: 24px; line-height: 1.18; color: var(--text); }
.lcard__intro {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 12.5px; line-height: 1.55; color: var(--muted); margin-top: 10px;
}

@media (max-width: 960px) { .lgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
    .lgrid { grid-template-columns: 1fr; gap: 16px; }
    .lcard { min-height: 190px; padding: 22px; }
    .lcard__title { font-size: 21px; }
}

/* ================================================================
   STORY
   ================================================================ */
.sthero { position: relative; padding: 70px 0 44px; border-bottom: 1px solid var(--line); overflow: hidden; }
.sthero--photo { min-height: 420px; display: flex; align-items: flex-end; padding-top: 120px; }
.sthero__photo { position: absolute; inset: 0; }
.sthero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.sthero__scrim {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(10,10,12,.30) 0%, rgba(10,10,12,.72) 52%, rgba(10,10,12,.97) 100%);
}
.sthero__inner { position: relative; z-index: 2; }

.stpill {
    display: inline-block; margin-bottom: 20px;
    border: 1px solid rgba(200,164,77,.4); border-radius: 999px; padding: 7px 16px;
    font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.stpill:hover { background: rgba(200,164,77,.12); }
.sthero__title {
    font-family: var(--serif); font-weight: 400; font-size: 48px; line-height: 1.08;
    margin: 0 0 16px; max-width: 22ch;
    text-shadow: 0 2px 20px rgba(0,0,0,.6);
}
.sthero__standfirst { font-size: 17px; color: var(--muted); margin: 0 0 18px; max-width: 56ch; }
.sthero__byline { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted2); }

.stbody { display: grid; grid-template-columns: 1fr 310px; gap: 60px; padding: 52px 0 0; align-items: start; }

.story__body { font-size: 17px; line-height: 1.78; color: #DAD6CE; max-width: 62ch; }
.story__body > p { margin: 0 0 19px; }
.story__body > p:first-of-type::first-letter {
    font-family: var(--serif); font-size: 54px; float: left;
    line-height: .82; padding: 6px 12px 0 0; color: var(--gold);
}
.story__body h2 { font-family: var(--serif); font-weight: 400; font-size: 27px; margin: 44px 0 14px; }
.story__body h3 { font-family: var(--serif); font-weight: 400; font-size: 21px; margin: 34px 0 12px; }
.story__body blockquote {
    margin: 34px 0; padding: 0 0 0 24px; border-left: 2px solid var(--gold);
    font-family: var(--serif); font-size: 22px; line-height: 1.5; color: var(--text);
}
.story__body figure { margin: 34px 0; }
.story__body img { max-width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.story__body figcaption { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted2); margin-top: 10px; }
.story__body a { color: var(--gold); }

.staside { border: 1px solid var(--line); border-radius: 3px; padding: 24px; position: sticky; top: 96px; }
.staside__head { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin: 0 0 16px; }
.miniw { display: grid; grid-template-columns: 32px 1fr auto; gap: 13px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.miniw__art { display: block; height: 56px; border: 1px solid var(--line); overflow: hidden; background: linear-gradient(180deg, #101015, #0b0b0e); }
.miniw__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniw__text { font-size: 12.5px; line-height: 1.35; }
.miniw__text em { display: block; font-style: normal; color: var(--muted2); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; }
.miniw__score { font-family: var(--serif); font-size: 19px; color: var(--gold); }
.miniw:hover .miniw__text { color: var(--gold); }

@media (max-width: 960px) {
    .sthero__title { font-size: 38px; }
    .stbody { grid-template-columns: 1fr 270px; gap: 40px; }
}
@media (max-width: 760px) {
    .sthero { padding: 44px 0 30px; }
    .sthero--photo { min-height: 330px; padding-top: 90px; }
    .sthero__title { font-size: 30px; max-width: none; }
    .sthero__standfirst { font-size: 15px; }
    .stbody { grid-template-columns: 1fr; gap: 34px; padding-top: 32px; }
    .staside { position: static; padding: 19px; }
    .story__body { font-size: 16px; }
    .story__body > p:first-of-type::first-letter { font-size: 44px; }
}

/* ================================================================
   STORIES LANDING
   ================================================================ */
.typechips { display: flex; gap: 8px; flex-wrap: wrap; margin: 30px 0 34px; }
.chip {
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
    border: 1px solid var(--line); border-radius: 999px; padding: 9px 15px;
}
.chip:hover { color: var(--text); border-color: var(--line2); }
.chip.is-on { color: var(--gold); border-color: rgba(200,164,77,.45); }

.sfeature {
    display: grid; grid-template-columns: 1.25fr 1fr; gap: 0;
    border: 1px solid var(--line); border-radius: 3px; overflow: hidden; margin-bottom: 34px;
    transition: border-color .2s;
}
.sfeature:hover { border-color: var(--gold); }
.sfeature__art { position: relative; min-height: 340px; background: linear-gradient(160deg, #191219, #0b0b0e); display: block; }
.sfeature__art img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
.sfeature__text {
    display: flex; flex-direction: column; justify-content: center; padding: 40px;
    background: linear-gradient(140deg, #101318, #0b0b0e);
}
.sfeature__title { font-family: var(--serif); font-size: 31px; line-height: 1.14; margin-bottom: 14px; }
.sfeature__standfirst { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.pillish {
    align-self: flex-start;
    border: 1px solid var(--line2); border-radius: 999px; padding: 9px 17px;
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.sfeature:hover .pillish { color: var(--gold); border-color: rgba(200,164,77,.45); }

.sgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.scard { display: block; }
.scard__art {
    position: relative; display: block; height: 230px; margin-bottom: 16px;
    border: 1px solid var(--line); overflow: hidden;
    background: linear-gradient(140deg, #191219, #0b0b0e);
}
.scard__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scard__tag {
    position: absolute; top: 15px; left: 15px; z-index: 2;
    font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
    background: rgba(10,10,12,.72); border: 1px solid rgba(200,164,77,.35);
    border-radius: 999px; padding: 5px 10px;
}
.scard__date { display: block; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted2); margin-bottom: 9px; }
.scard__title { display: block; font-family: var(--serif); font-size: 24px; line-height: 1.2; margin-bottom: 10px; }
.scard__standfirst {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 13.5px; line-height: 1.55; color: var(--muted);
}
.scard:hover .scard__title { color: var(--gold); }

@media (max-width: 960px) {
    .sfeature { grid-template-columns: 1fr; }
    .sfeature__art { min-height: 240px; }
    .sfeature__text { padding: 28px; }
    .sfeature__title { font-size: 26px; }
    .sgrid { grid-template-columns: 1fr 1fr; gap: 22px; }
}
@media (max-width: 760px) {
    .typechips { margin: 22px -20px 26px; padding: 0 20px; flex-wrap: nowrap; overflow-x: auto; }
    .chip { flex: 0 0 auto; }
    .sgrid { grid-template-columns: 1fr; gap: 26px; }
    .scard__art { height: 210px; }
    .scard__title { font-size: 21px; }
}

/* ================================================================
   STORY BACKLINK — above the bottle on a review
   ================================================================ */
.review__left { display: block; }
.storyback {
    border: 1px solid var(--line); border-left: 2px solid var(--gold);
    border-radius: 0 2px 2px 0; padding: 13px 15px; margin-top: 16px;
    background: linear-gradient(90deg, rgba(200,164,77,.05), rgba(255,255,255,0));
}
.storyback__label {
    font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--muted2); margin-bottom: 7px;
}
.storyback__link {
    display: block; font-family: var(--serif); font-size: 15px; line-height: 1.3;
    color: var(--text);
}
.storyback__link + .storyback__link { margin-top: 8px; }
.storyback__link:hover { color: var(--gold); }

/* Whole-box link when there's a single story. */
.storyback--single { display: block; transition: background .15s, border-color .15s; }
.storyback--single .storyback__label { display: block; }
.storyback--single:hover {
    border-color: var(--line2);
    border-left-color: var(--gold);
    background: linear-gradient(90deg, rgba(200,164,77,.10), rgba(255,255,255,.01));
}
.storyback--single:hover .storyback__link { color: var(--gold); }

/* Multiple stories: each row fills the width and is its own target. */
.storyback__link--row { padding: 9px 0; border-top: 1px solid var(--line); }
.storyback__link--row:first-of-type { border-top: 0; padding-top: 0; }

/* ================================================================
   GROUPED SEARCH RESULTS
   ================================================================ */
.sgroup { margin-top: 30px; }
.sgroup__head {
    font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
    color: var(--muted2); padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.sgroup__head--notes { margin-top: 44px; }

.wrow {
    display: grid; grid-template-columns: 1fr 190px 56px; gap: 20px;
    align-items: baseline; padding: 17px 0; border-bottom: 1px solid var(--line);
}
.wrow__name { font-family: var(--serif); font-size: 19px; line-height: 1.3; color: var(--text); }
.wrow__meta { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted2); }
.wrow__score { font-family: var(--serif); font-size: 22px; color: var(--gold); text-align: center; }
.wrow:hover .wrow__name { color: var(--gold); }
.wrow--producer .wrow__name { font-size: 17px; }

@media (max-width: 760px) {
    .wrow { grid-template-columns: 1fr 52px; gap: 4px 14px; }
    .wrow__name { grid-column: 1; }
    .wrow__meta { grid-column: 1; }
    .wrow__score { grid-column: 2; grid-row: 1 / span 2; font-size: 20px; }
}

/* Column labels on the Wines group, aligned to the same grid as the rows. */
.sgroup__head--cols {
    display: grid; grid-template-columns: 1fr 190px 56px; gap: 20px;
}
.sgroup__head--cols span:last-child { text-align: center; }

@media (max-width: 760px) {
    /* Rows restack on a phone, so the column label would no longer line up. */
    .sgroup__head--cols { display: block; }
    .sgroup__head--cols span:not(:first-child) { display: none; }
}

/* ================================================================
   MOBILE FIXES
   ================================================================ */

/* Header height as a token, so the hero's maths follows the nav. */
:root { --head-h: 70px; }

html { -webkit-text-size-adjust: 100%; }

/* Anchors and skip-links shouldn't land under the sticky header. */
html { scroll-padding-top: calc(var(--head-h) + 12px); }

/* dvh excludes the browser chrome; vh first as the fallback. */
.firstscreen {
    min-height: calc(100vh - var(--head-h));
    min-height: calc(100dvh - var(--head-h));
}

@media screen and (min-width: 783px) {
    body.admin-bar .firstscreen {
        min-height: calc(100vh - var(--head-h) - 32px);
        min-height: calc(100dvh - var(--head-h) - 32px);
    }
}

@media (max-width: 760px) {

    /* Two rows: wordmark + search, then the nav as a scrolling strip.
       A strip rather than a burger — one tap instead of two, on the
       four destinations that matter. */
    :root { --head-h: 106px; }

    .site-head__inner {
        height: auto; flex-wrap: wrap;
        padding-top: 12px; padding-bottom: 0;
        row-gap: 4px;
    }

    .navlinks {
        display: flex;
        order: 3; width: 100%; margin-left: 0;
        gap: 0;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: -20px;
        padding-inline: 20px;
        border-top: 1px solid var(--line);
    }
    .navlinks::-webkit-scrollbar { display: none; }
    .navlinks a {
        flex: 0 0 auto;
        padding: 14px 14px;
        font-size: 10.5px;
        letter-spacing: .14em;
    }
    .navlinks a:first-child { padding-left: 0; }

    .mark { font-size: 17px; letter-spacing: .28em; }

    /* 16px minimum on every input, or iOS zooms the page on focus. */
    .navsearch input,
    .bigsearch input[type="search"],
    .bigsearch--hero input[type="search"] { font-size: 16px; }

    .navsearch input { height: 38px; }

    /* Comfortable targets on the chip rows. */
    .hint, .chip { padding: 9px 15px; }
    .year { padding: 10px 18px; }
}

/* ================================================================
   MOBILE — consolidated
   ================================================================ */
:root { --head-h: 70px; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 12px); }

/* dvh excludes the browser chrome; vh first as the fallback. */
.firstscreen {
    min-height: calc(100vh - var(--head-h));
    min-height: calc(100dvh - var(--head-h));
}
@media screen and (min-width: 783px) {
    body.admin-bar .firstscreen {
        min-height: calc(100vh - var(--head-h) - 32px);
        min-height: calc(100dvh - var(--head-h) - 32px);
    }
}

.burger { display: none; }

@media (max-width: 760px) {

    :root { --head-h: 62px; }

    /* ---------- burger + panel ---------- */
    .burger {
        display: flex; flex-direction: column; justify-content: center; gap: 5px;
        width: 40px; height: 38px; margin-left: auto; padding: 0;
        background: none; border: 0; cursor: pointer;
    }
    .burger span {
        display: block; width: 21px; height: 1.5px; background: var(--text);
        transition: transform .2s, opacity .2s;
    }
    .burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .burger.is-open span:nth-child(2) { opacity: 0; }
    .burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

    .navlinks {
        display: none;
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; gap: 0; margin: 0;
        background: rgba(10,10,12,.98);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--line);
        padding: 4px 20px 12px;
    }
    .navlinks.is-open { display: flex; }
    .navlinks a {
        padding: 16px 0; font-size: 13px; letter-spacing: .18em;
        border-bottom: 1px solid var(--line); color: var(--text);
    }
    .navlinks a:last-child { border-bottom: 0; }

    .site-head__inner { height: var(--head-h); gap: 12px; }
    .navsearch { flex: 1; min-width: 0; }

    /* 16px minimum on inputs, or iOS zooms the page on focus. */
    .navsearch input,
    .bigsearch input[type="search"],
    .bigsearch--hero input[type="search"] { font-size: 16px; }
    .navsearch input { height: 38px; }

    /* ---------- hero chips: wrap, don't scroll, and show three ---------- */
    .hintrow--hero {
        flex-wrap: wrap; overflow: visible;
        justify-content: center; margin: 20px 0 0; padding: 0;
    }
    .hintrow--hero .hint { flex: 0 0 auto; padding: 9px 15px; }
    .hintrow--hero .hint:nth-child(n+4) { display: none; }

    /* ---------- the score, back on review cards ---------- */
    .rcard__score { display: none; }
    .rcard__mscore { display: flex; align-items: baseline; gap: 7px; margin-bottom: 6px; }
    .rcard__mscore b { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1; color: var(--gold); }
    .rcard__mscore span { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted2); }

    /* ---------- keep the score column headers ---------- */
    .vhead { display: grid; grid-template-columns: 1fr 56px; gap: 14px; }
    .vhead span:nth-child(2),
    .vhead span:nth-child(3) { display: none; }

    .sgroup__head--cols { display: grid; grid-template-columns: 1fr 52px; gap: 14px; }
    .sgroup__head--cols span:nth-child(2) { display: none; }
    .sgroup__head--cols span:last-child { display: block; line-height: 1.3; }
}

/* ================================================================
   SEARCH PILL — stop the button escaping
   An input has an intrinsic minimum width from its default size
   attribute, so flex:1 can't shrink it and the button gets pushed
   outside the pill.
   ================================================================ */
.bigsearch input[type="search"] { min-width: 0; }
.bigsearch button { flex: 0 0 auto; }

/* ================================================================
   SCORE RING UNDER THE BOTTLE, MOBILE ONLY
   ================================================================ */
.rcard__left { display: block; }
.rcard__ring { display: none; }

@media (max-width: 760px) {

    .bigsearch--hero { padding: 8px 8px 8px 18px; }
    .bigsearch--hero button { padding: 11px 14px; font-size: 10px; letter-spacing: .14em; }

    .rcard__mscore { display: none; }

    .rcard__ring {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        width: 58px; height: 58px; margin: 9px auto 0;
        border: 1px solid rgba(200,164,77,.4); border-radius: 50%;
        font-family: var(--serif); line-height: 1;
    }
    .rcard__ring b { font-size: 20px; font-weight: 400; color: var(--gold); }
    .rcard__ring small {
        font-family: var(--sans); font-size: 6.5px; letter-spacing: .18em;
        text-transform: uppercase; color: var(--muted2); margin-top: 4px;
    }
    .rcard__ring--empty { border-color: var(--line2); }
    .rcard__ring--empty b { color: var(--muted2); }
    .rcard__ring--empty small { display: none; }
}

/* Score with its unit, matching the review cards. */
.vrow__score { display: block; text-align: center; font-family: var(--serif); line-height: 1; }
.vrow__score b { display: block; font-size: 26px; font-weight: 400; color: var(--gold); }
.vrow__score small {
    display: block; font-family: var(--sans); font-size: 8px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--muted2); margin-top: 5px;
}
.vrow__score--empty b { color: var(--muted2); }
.vrow__score--empty small { display: none; }

@media (max-width: 760px) {
    .vrow__score b { font-size: 22px; }
    .vrow__score small { font-size: 7px; }
}

/* Score with its unit on the wines index and the search Wines group.
   Producer rows leave the span empty, so nothing prints there. */
.wrow__score { display: block; text-align: center; font-family: var(--serif); line-height: 1; }
.wrow__score b { display: block; font-size: 22px; font-weight: 400; color: var(--gold); }
.wrow__score small {
    display: block; font-family: var(--sans); font-size: 7.5px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--muted2); margin-top: 5px;
}
.wrow__score--empty b { color: var(--muted2); }
.wrow__score--empty small { display: none; }

@media (max-width: 760px) {
    .wrow__score b { font-size: 20px; }
    .wrow__score small { font-size: 7px; }
}

/* Score with its unit on the vintage page's note rows, centred in its column
   like every other score on the site. */
.noterow__score { display: block; text-align: center; font-family: var(--serif); line-height: 1; }
.noterow__score b { display: block; font-size: 24px; font-weight: 400; color: var(--gold); }
.noterow__score small {
    display: block; font-family: var(--sans); font-size: 7.5px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--muted2); margin-top: 5px;
}
.noterow__score--empty b { color: var(--muted2); }
.noterow__score--empty small { display: none; }

@media (max-width: 760px) {
    .noterow__score b { font-size: 20px; }
    .noterow__score small { font-size: 7px; }
}

/* Grids inside homepage sections already have their spacing from .sec. */
.sec .lgrid,
.sec .sgrid { margin-top: 0; }

@media (max-width: 760px) {
    /* Inline column counts from the template are overridden on a phone. */
    .sec .lgrid,
    .sec .sgrid { grid-template-columns: 1fr !important; }
}

/* Featured list slot on the homepage. */
.tail__head h2 a { color: inherit; }
.tail__head h2 a:hover { color: var(--gold); }
.sec__intro { font-size: 14.5px; color: var(--muted); margin: -12px 0 26px; max-width: 62ch; }
.sec__more { margin: 26px 0 0; }
.sec__more a {
    display: inline-block; border: 1px solid var(--line2); border-radius: 999px;
    padding: 11px 20px; font-size: 11px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted);
}
.sec__more a:hover { border-color: var(--gold); color: var(--gold); }

/* ================================================================
   COMMENTS
   ================================================================ */
.comments { padding: 70px 0 0; max-width: 720px; }

.commentlist { list-style: none; margin: 0; padding: 0; }
.commentlist .children { list-style: none; margin: 0 0 0 26px; padding: 0; border-left: 1px solid var(--line); }
.commentlist .children .comment__inner { padding-left: 22px; }

.comment__inner { padding: 22px 0; border-bottom: 1px solid var(--line); }
.comment__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.comment__author { font-family: var(--serif); font-size: 17px; color: var(--text); }
.comment__date { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted2); }
.comment__date a { color: inherit; }
.comment__pending { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 8px; }
.comment__text { font-size: 15.5px; line-height: 1.7; color: #DAD6CE; }
.comment__text p { margin: 0 0 14px; }
.comment__text p:last-child { margin-bottom: 0; }
.comment__actions { margin-top: 10px; }
.comment__actions a { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted2); }
.comment__actions a:hover { color: var(--gold); }
.bypostauthor > .comment__inner .comment__author { color: var(--gold); }

/* ---------- the gate ---------- */
.commentgate { padding: 30px 0 0; color: var(--muted); font-size: 15px; }
.commentgate__links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

.btn {
    display: inline-block; cursor: pointer;
    border: 0; border-radius: 999px; padding: 13px 24px;
    background: var(--gold); color: #17171a;
    font-family: var(--sans); font-size: 11px; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
}
.btn:hover { background: #E6C674; color: #17171a; }
.btn--quiet { background: none; border: 1px solid var(--line2); color: var(--muted); }
.btn--quiet:hover { background: none; border-color: var(--gold); color: var(--gold); }

/* ---------- the form ---------- */
.comment-respond { padding: 34px 0 0; }
.comment-reply-title { font-family: var(--serif); font-weight: 400; font-size: 23px; margin: 0 0 18px; }
.comment-reply-title small { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; margin-left: 12px; }
.comment-reply-title small a { color: var(--muted2); }

.commentform__field label {
    display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--muted2); margin-bottom: 9px;
}
.commentform__field textarea {
    width: 100%; padding: 14px 16px;
    background: rgba(255,255,255,.04); border: 1px solid var(--line2); border-radius: 3px;
    color: var(--text); font-family: var(--sans); font-size: 15.5px; line-height: 1.6;
    resize: vertical;
}
.commentform__field textarea:focus { outline: none; border-color: var(--gold); }
.commentform__note { font-size: 12px; color: var(--muted2); margin: 12px 0 0; }
.form-submit { margin: 18px 0 0; }

@media (max-width: 760px) {
    .comments { padding-top: 50px; }
    .commentlist .children { margin-left: 14px; }
    .commentlist .children .comment__inner { padding-left: 16px; }
    .commentform__field textarea { font-size: 16px; }
}

/* ================================================================
   LIKE + SHARE
   ================================================================ */
.screen-reader-text {
    position: absolute !important; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.social { display: flex; gap: 10px; margin: 30px 0 0; }
.social__btn {
    display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
    background: none; border: 1px solid var(--line2); border-radius: 999px;
    padding: 10px 18px; color: var(--muted);
    font-family: var(--sans); font-size: 11px; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase;
    transition: color .15s, border-color .15s;
}
.social__btn:hover { color: var(--text); border-color: var(--muted2); }
.social__btn:disabled { opacity: .5; cursor: default; }
.social__count { font-variant-numeric: tabular-nums; }

.social__like.is-liked { color: var(--gold); border-color: rgba(200,164,77,.45); }
.social__like.is-liked svg { fill: currentColor; }

@media (max-width: 760px) {
    .social { margin-top: 24px; }
    .social__btn { padding: 11px 16px; }
}

/* ============================================================== account ==== */

.acct {
    max-width: 620px;
    margin: 0 auto;
    padding: 56px 20px 90px;
}

.acct__head {
    margin: 0 0 32px;
}

.acct h1 {
    margin: 8px 0 6px;
    font: 400 34px/1.15 var(--serif);
    letter-spacing: -.01em;
    color: var(--text);
}

.acct__meta {
    margin: 0;
    font-size: 13.5px;
    color: var(--muted);
}

.acct__note {
    margin: 0 0 22px;
    padding: 12px 15px;
    border-left: 2px solid var(--gold);
    background: rgba( 200, 164, 77, .08 );
    font-size: 14px;
    color: var(--text);
}

.acct__note--error {
    border-left-color: var(--wine);
    background: rgba( 124, 30, 48, .14 );
}

.acct__card {
    margin: 0 0 26px;
    padding: 30px 30px 26px;
    background: var(--surface);
    border: 1px solid var(--line);
}

.acct__card h2 {
    margin: 0 0 22px;
    font: 400 20px/1.2 var(--serif);
    color: var(--text);
}

.acct__field {
    margin: 0 0 20px;
}

.acct__field label {
    display: block;
    margin: 0 0 7px;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

.acct__field input {
    width: 100%;
    padding: 13px 15px;
    background: rgba( 255, 255, 255, .04 );
    border: 1px solid var(--line2);
    border-radius: 2px;
    color: var(--text);
    /* 16px stops iOS zooming the page when the field takes focus. */
    font: 400 16px/1.4 var(--sans);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.acct__field input:focus {
    outline: none;
    background: rgba( 255, 255, 255, .07 );
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba( 200, 164, 77, .14 );
}

.acct__help {
    display: block;
    margin: 7px 0 0;
    font-size: 12.5px;
    color: var(--muted);
}

.acct__actions {
    margin: 24px 0 0;
}

.acct__out {
    margin: 34px 0 0;
    text-align: center;
    font-size: 13.5px;
}

.acct__out a {
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid var(--line2);
    padding-bottom: 2px;
}

.acct__out a:hover {
    color: var(--text);
    border-bottom-color: var(--gold);
}

@media ( max-width: 620px ) {

    .acct {
        padding: 36px 18px 70px;
    }

    .acct h1 {
        font-size: 29px;
    }

    .acct__card {
        padding: 24px 20px 20px;
    }
}

/* Account sits apart from the content links. */
.navlinks .navlinks__me {
    color: var(--muted);
    margin-left: 4px;
    padding-left: 18px;
    border-left: 1px solid var(--line);
}

.navlinks .navlinks__me:hover {
    color: var(--text);
}

@media ( max-width: 760px ) {

    .navlinks .navlinks__me {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }
}

/* Wordmark is now artwork; the old type rules on .mark go unused. */
.mark {
    /* Integer-aligned, so the artwork never lands on a half pixel. */
    display: flex;
    align-items: center;
}

.mark img {
    display: block;
    width: auto;
    /* Thirteen letters rather than five, so it runs shorter than CSIMM did. */
    height: 24px;
}

@media ( max-width: 760px ) {

    .mark img {
        height: 19px;
    }
}

/* The wordmark stands in for the hero headline. inline-block rather than block
   so it follows whatever alignment the hero already uses. */
.hero__title--mark img {
    display: inline-block;
    width: min( 660px, 86vw );
    height: auto;
    vertical-align: middle;
}

/* The monogram can sit taller than the wordmark — it is compact, not wide. */
.mark--mono img {
    height: 34px;
}

.mark--wordmark img {
    height: 24px;
}

@media ( max-width: 760px ) {

    .mark--mono img {
        height: 30px;
    }

    .mark--wordmark img {
        height: 19px;
    }
}

/* ============================================== the wine list, grouped ==== */



.wjump a {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--line2);
    border-radius: 999px;
    color: var(--text);
    font-size: 13.5px;
    text-decoration: none;
    transition: border-color .16s ease, color .16s ease;
}

.wjump a:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.wjump small {
    color: var(--muted);
    font-size: 12px;
}

.wlist__section {
    margin: 0 0 64px;
    /* the jump links land below the fixed header rather than under it */
    scroll-margin-top: calc( var(--head-h) + 20px );
}

.wlist__type {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 6px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--gold);
    font: 400 30px/1.15 var(--serif);
    color: var(--text);
}

.wlist__type span {
    font: 400 12px/1 var(--sans);
    letter-spacing: .14em;
    color: var(--muted);
}

.wlist__grape {
    margin: 34px 0 4px;
    font: 500 11px/1 var(--sans);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
}

/* The first varietal under a type heading shouldn't push away from its rule. */
.wlist__type + .wlist__grape {
    margin-top: 22px;
}

@media ( max-width: 760px ) {

    .wjump {
        margin-bottom: 32px;
    }

    .wjump a {
        padding: 8px 13px;
        font-size: 13px;
    }

    .wlist__type {
        font-size: 25px;
    }

    .wlist__section {
        margin-bottom: 46px;
    }
}

/* The second heading level, under a named grape. */
.wlist__country {
    margin: 22px 0 2px;
    font: 400 12.5px/1 var(--sans);
    letter-spacing: .1em;
    color: var(--muted);
}

.wlist__grape + .wlist__country {
    margin-top: 12px;
}

/* --------------------------------- the pinned nav on the wine list ------- */

.wjump {
    position: sticky;
    top: var(--head-h);
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 40px;
    padding: 14px 0 16px;
    /* opaque, or the list scrolls through it */
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}

/* Anchored headings clear both the site header and the pinned nav. */
.wlist__section,
.wlist__grape[id] {
    scroll-margin-top: calc( var(--head-h) + 96px );
}

.wlist__sub {
    margin: 16px 0 2px;
    font: 400 11.5px/1 var(--sans);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted2);
}

@media ( max-width: 760px ) {

    .wjump {
        gap: 6px;
        padding: 10px 0 12px;
        margin-bottom: 28px;
    }

    .wjump a {
        padding: 7px 11px;
        font-size: 12.5px;
    }

    .wlist__section,
    .wlist__grape[id] {
        scroll-margin-top: calc( var(--head-h) + 120px );
    }
}

/* ------------------------------------------- the wine list, pinned ------- */

/*
 * Three layers pin, in order: the chip bar, the primary heading, the gold
 * subheading. --wjump-h is measured in JS because the chip bar wraps to a
 * different number of rows at every width, and drops to 0 when the bar retires.
 */
:root {
    --wjump-h:  60px;
    --wtype-h:  52px;
    --wgrape-h: 34px;
}

.wjump {
    position: sticky;
    top: var(--head-h);
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 28px;
    padding: 14px 0 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    transition: transform .22s ease;
}

/* Out of the way on the way down; back on the way up. */
.wjump.is-retired {
    transform: translateY( -160% );
}

.wlist__section {
    margin: 0 0 60px;
    scroll-margin-top: calc( var(--head-h) + var(--wjump-h) + 10px );
}

.wlist__type {
    position: sticky;
    top: calc( var(--head-h) + var(--wjump-h) );
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    height: var(--wtype-h);
    margin: 0 0 4px;
    padding: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--gold);
    font: 400 28px/1 var(--serif);
    color: var(--text);
}

.wlist__type span {
    font: 400 12px/1 var(--sans);
    letter-spacing: .14em;
    color: var(--muted);
}

/* Each subgroup is its own block, so its heading is pushed out by the next
   one rather than every heading piling up at the same offset. */
.wgroup {
    position: relative;
}

.wlist__grape {
    position: sticky;
    top: calc( var(--head-h) + var(--wjump-h) + var(--wtype-h) );
    z-index: 10;
    display: flex;
    align-items: center;
    height: var(--wgrape-h);
    margin: 0;
    background: var(--bg);
    font: 500 11px/1 var(--sans);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
}

.wlist__country {
    margin: 18px 0 2px;
    font: 400 12.5px/1 var(--sans);
    letter-spacing: .1em;
    color: var(--muted);
}

.wlist__sub {
    margin: 14px 0 2px;
    font: 400 11.5px/1 var(--sans);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted2);
}

@media ( max-width: 760px ) {

    /* One row that scrolls sideways, rather than three rows of pinned chips. */
    .wjump {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        gap: 6px;
        padding: 10px 0 12px;
        margin-bottom: 22px;
    }

    .wjump::-webkit-scrollbar {
        display: none;
    }

    .wjump a {
        flex: 0 0 auto;
        padding: 7px 12px;
        font-size: 12.5px;
    }

    .wlist__type {
        height: 44px;
        font-size: 23px;
    }

    /* Only the primary heading pins on a phone — two would eat the screen. */
    .wlist__grape {
        position: static;
        height: auto;
        margin: 20px 0 4px;
    }

    .wlist__section {
        margin-bottom: 44px;
    }
}

/* Quieter in the footer than in the header. */
.mark--sm img {
    display: block;
    width: auto;
    height: 20px;
}

/* ============================================================ subscribe ==== */

.sub {
    max-width: 780px;
    margin: 0 auto;
    padding: 60px 20px 100px;
}

.sub__head {
    margin: 0 0 36px;
}

.sub h1 {
    margin: 8px 0 14px;
    font: 400 40px/1.1 var(--serif);
    letter-spacing: -.015em;
    color: var(--text);
}

.sub__lede {
    margin: 0;
    max-width: 60ch;
    font-size: 17px;
    line-height: 1.62;
    color: var(--muted);
}

.sub__note {
    margin: 0 0 26px;
    padding: 12px 16px;
    border-left: 2px solid var(--line2);
    background: rgba( 255, 255, 255, .03 );
    font-size: 14px;
    color: var(--text);
}

.sub__note--ok {
    border-left-color: var(--gold);
}

.sub__note--error {
    border-left-color: var(--wine);
}

.sub__trial {
    margin: 0 0 28px;
    padding: 14px 18px;
    border: 1px solid var(--gold);
    background: rgba( 200, 164, 77, .07 );
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
}

.sub__trial strong {
    color: var(--gold);
    font-weight: 500;
}

.sub__plans {
    display: grid;
    grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
    gap: 18px;
    margin: 0 0 20px;
}

.plan {
    position: relative;
    margin: 0;
    padding: 30px 28px 26px;
    background: var(--surface);
    border: 1px solid var(--line);
}

.plan--year {
    border-color: var(--gold);
}

.plan__badge {
    position: absolute;
    top: -10px;
    left: 26px;
    padding: 3px 10px;
    background: var(--gold);
    color: #14120E;
    font: 600 10px/1.6 var(--sans);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.plan__price {
    margin: 0 0 6px;
    font: 400 38px/1 var(--serif);
    color: var(--text);
}

.plan__price span {
    font: 400 15px/1 var(--sans);
    color: var(--muted);
}

.plan__note {
    margin: 0 0 22px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
}

.plan__go {
    width: 100%;
}

.sub__small {
    margin: 0 0 56px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted2);
}

.sub__what {
    padding: 30px 0 0;
    border-top: 1px solid var(--line);
}

.sub__what h2 {
    margin: 0 0 18px;
    font: 400 22px/1.2 var(--serif);
    color: var(--text);
}

.sub__what ul {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.sub__what li {
    position: relative;
    margin: 0 0 12px;
    padding: 0 0 0 22px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
}

.sub__what li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 6px;
    height: 6px;
    background: var(--gold);
}

.sub__what li strong {
    color: var(--text);
    font-weight: 400;
}

.sub__free {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted2);
}

.acct__plan {
    margin: 0 0 6px;
    font: 400 19px/1.3 var(--serif);
    color: var(--text);
}

@media ( max-width: 700px ) {

    .sub {
        padding: 40px 18px 70px;
    }

    .sub h1 {
        font-size: 32px;
    }

    .sub__plans {
        grid-template-columns: minmax( 0, 1fr );
        gap: 22px;
    }
}

/* Signed out: the account step, stated before the click rather than sprung after it. */
.sub__auth {
    margin: 0 0 28px;
    padding: 22px 24px;
    background: var(--surface);
    border: 1px solid var(--line);
}

.sub__auth__lead {
    margin: 0 0 16px;
    font-size: 15.5px;
    color: var(--text);
}

.sub__auth__links {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--muted);
}

.sub__auth__links a:not(.btn) {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 1px;
}

.sub__auth__note {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted2);
}

/* The plan they picked before signing in. */
.plan--chosen {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba( 200, 164, 77, .12 );
}

/* Plan buttons are links when signed out, buttons when signed in. */
a.plan__go {
    display: block;
    text-align: center;
    text-decoration: none;
}

/* ================================================================ locks ==== */

.csimm-lock__icon {
    display: block;
    flex: 0 0 auto;
}

/* The chip that stands in for a whole element. */
.csimm-locked {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid rgba( 200, 164, 77, .38 );
    border-radius: 2px;
    background: rgba( 200, 164, 77, .07 );
    color: var(--gold);
    font: 500 11px/1 var(--sans);
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color .16s ease, background .16s ease;
}

a.csimm-locked:hover {
    border-color: var(--gold);
    background: rgba( 200, 164, 77, .13 );
}

.csimm-locked--admin {
    border-color: var(--line2);
    background: none;
    color: var(--muted);
}

/* A lock sitting exactly where a score would. */
.csimm-scorelock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba( 200, 164, 77, .38 );
    border-radius: 50%;
    color: var(--gold);
    text-decoration: none;
    transition: border-color .16s ease, background .16s ease;
}

.csimm-scorelock:hover {
    border-color: var(--gold);
    background: rgba( 200, 164, 77, .12 );
}

/*
 * The decorative blur.
 *
 * These bars are empty. There is no text behind them to reveal — a CSS blur
 * over the real note would be readable from the page source.
 */
.csimm-blur {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 18px 0 22px;
    /* faded at the foot, so it reads as continuing rather than stopping */
    mask-image: linear-gradient( to bottom, #000 40%, rgba( 0, 0, 0, .15 ) 100% );
    -webkit-mask-image: linear-gradient( to bottom, #000 40%, rgba( 0, 0, 0, .15 ) 100% );
    user-select: none;
}

.csimm-blur span {
    display: block;
    height: 12px;
    border-radius: 2px;
    background: linear-gradient( 90deg, rgba( 244, 241, 235, .14 ), rgba( 244, 241, 235, .07 ) );
    filter: blur( 2.5px );
}

.csimm-teaser {
    margin: 0;
    font-size: 17px;
    line-height: 1.68;
    color: var(--text);
}

/* The way in, under a locked passage. */
.csimm-unlock {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 20px;
    background: var(--gold);
    border: 1px solid var(--gold);
    border-radius: 2px;
    color: #14120E;
    font: 600 12px/1 var(--sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: filter .16s ease;
}

.csimm-unlock:hover {
    filter: brightness( 1.09 );
    color: #14120E;
}

@media ( max-width: 760px ) {

    .csimm-locked {
        padding: 8px 12px;
        font-size: 10.5px;
    }

    .csimm-scorelock {
        width: 38px;
        height: 38px;
    }

    .csimm-teaser {
        font-size: 16px;
    }
}

/* One lock, three sizes. */
.csimm-scorelock--sm { width: 30px; height: 30px; }
.csimm-scorelock--md { width: 42px; height: 42px; }
.csimm-scorelock--lg { width: 56px; height: 56px; }

/* Inside a ring that already draws a circle, the lock drops its own border. */
.rcard__ring .csimm-scorelock,
.score-ring .csimm-scorelock {
    width: 100%;
    height: 100%;
    border: 0;
}

.rcard__ring:has( .csimm-scorelock ) {
    border-color: rgba( 200, 164, 77, .38 );
}

/*
 * The unlock button sits inside prose, where link colours are already styled.
 * Those rules match with the same weight and would otherwise win by coming
 * later, so these carry the element as well as the class.
 */
a.csimm-unlock,
a.csimm-unlock:link,
a.csimm-unlock:visited,
a.csimm-unlock:hover,
a.csimm-unlock:focus,
.story__body a.csimm-unlock,
.note a.csimm-unlock {
    background: var(--gold);
    border: 1px solid var(--gold);
    color: #14120E;
    text-decoration: none;
}

a.csimm-unlock span,
.story__body a.csimm-unlock span,
.note a.csimm-unlock span {
    color: #14120E;
}

a.csimm-unlock .csimm-lock__icon,
.story__body a.csimm-unlock .csimm-lock__icon {
    color: #14120E;
}

/* Signed out, the last nav item is the offer. */
.navlinks .navlinks__sub {
    color: var(--gold);
}

.navlinks .navlinks__sub:hover {
    color: var(--text);
}

/* -------------------------------------------- create your account ------- */

.join {
    max-width: 420px;
    margin: 0 0 40px;
}

.join__field {
    margin: 0 0 20px;
}

.join__field label {
    display: block;
    margin: 0 0 7px;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

.join__field input {
    width: 100%;
    padding: 13px 15px;
    background: rgba( 255, 255, 255, .04 );
    border: 1px solid var(--line2);
    border-radius: 2px;
    color: var(--text);
    /* 16px, or iOS zooms the page on focus. */
    font: 400 16px/1.4 var(--sans);
    transition: border-color .16s ease, box-shadow .16s ease;
}

.join__field input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba( 200, 164, 77, .14 );
}

.join__help {
    display: block;
    margin: 7px 0 0;
    font-size: 12.5px;
    color: var(--muted);
}

.join__actions {
    margin: 26px 0 0;
}

.join__actions .btn {
    width: 100%;
}

.join__alt {
    margin: 22px 0 0;
    font-size: 13.5px;
    color: var(--muted);
}

.join__alt a {
    color: var(--text);
    border-bottom: 1px solid var(--gold);
    text-decoration: none;
    padding-bottom: 1px;
}

/* The honeypot. Hidden from people, left in the DOM for bots. */
.join__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Reveal control, which is why there is no confirm-password box. */
.join__pw {
    position: relative;
    display: block;
}

.join__pw input {
    padding-right: 48px;
}

.join__eye {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY( -50% );
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    transition: color .16s ease;
}

.join__eye:hover,
.join__eye:focus-visible {
    color: var(--gold);
}

/* The slash shows only while the password is visible. */
.join__eye .join__eye-slash {
    opacity: 0;
    transition: opacity .14s ease;
}

.join__eye.is-on {
    color: var(--gold);
}

.join__eye.is-on .join__eye-slash {
    opacity: 1;
}

/* ------------------------------------------------------------- welcome -- */

.welcome__trial {
    margin: 18px 0 0;
    padding: 14px 18px;
    border-left: 2px solid var(--gold);
    background: rgba( 200, 164, 77, .07 );
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
}

.welcome__next {
    display: grid;
    grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
    gap: 16px;
    margin: 36px 0 28px;
}

.welcome__card {
    display: block;
    padding: 24px 22px 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    text-decoration: none;
    transition: border-color .16s ease;
}

.welcome__card:hover {
    border-color: var(--gold);
}

.welcome__kicker {
    display: block;
    margin: 0 0 10px;
    font: 500 10.5px/1 var(--sans);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
}

.welcome__title {
    display: block;
    margin: 0 0 8px;
    font: 400 20px/1.25 var(--serif);
    color: var(--text);
}

.welcome__note {
    display: block;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
}

@media ( max-width: 760px ) {

    .welcome__next {
        grid-template-columns: minmax( 0, 1fr );
        gap: 12px;
    }
}

/* Returning subscribers who arrived here signed out. */
.sub__signin {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 28px;
    padding: 20px 24px;
    background: var(--surface);
    border: 1px solid var(--line2);
}

.sub__signin__lead {
    margin: 0;
    font: 400 19px/1.3 var(--serif);
    color: var(--text);
}

.sub__signin .btn {
    flex: 0 0 auto;
}

/* Below the plans now, so it reads as a footnote to the price rather than
   the first thing on the page. */
.sub__trial {
    margin: 22px 0 0;
}

@media ( max-width: 700px ) {

    .sub__signin {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .sub__signin .btn {
        width: 100%;
        text-align: center;
    }
}

/* The legal row, quiet but findable — Stripe's review looks for these. */
.site-foot__legal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin: 40px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid var(--line);
    font-size: 12.5px;
    color: var(--muted2);
}

.site-foot__legal nav {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.site-foot__legal a {
    color: var(--muted);
    text-decoration: none;
}

.site-foot__legal a:hover {
    color: var(--text);
}

/* Renewal terms beside the button, not buried in the footer. */
.join__terms {
    margin: 16px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted2);
}

.join__terms a,
.sub__small a {
    color: var(--muted);
    border-bottom: 1px solid var(--line2);
    text-decoration: none;
    padding-bottom: 1px;
}

.join__terms a:hover,
.sub__small a:hover {
    color: var(--text);
}

@media ( max-width: 620px ) {

    .site-foot__legal {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* --------------------------------------------------- plain page prose --- */

.page {
    padding-bottom: 90px;
}

.prose {
    max-width: 68ch;
    font-size: 16.5px;
    line-height: 1.72;
    color: var(--muted);
}

.prose p {
    margin: 0 0 20px;
}

.prose h2 {
    margin: 40px 0 14px;
    font: 400 23px/1.25 var(--serif);
    color: var(--text);
}

.prose h3 {
    margin: 30px 0 10px;
    font: 400 19px/1.3 var(--serif);
    color: var(--text);
}

.prose strong {
    color: var(--text);
    font-weight: 500;
}

.prose ul {
    margin: 0 0 20px;
    padding: 0 0 0 20px;
}

.prose li {
    margin: 0 0 9px;
}

.prose a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 1px;
}

.prose a:hover {
    color: var(--gold);
}

.prose em {
    color: var(--muted2);
    font-style: normal;
    font-size: 14px;
}

/* ------------------------------------------------ how the bottle arrived - */

.prov {
    display: inline-flex;
    align-items: center;
    margin: 0 0 0 10px;
    padding: 4px 9px;
    border-radius: 2px;
    font: 500 10px/1 var(--sans);
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* No obligation: said, but not announced. */
.prov--quiet {
    border: 1px solid var(--line2);
    color: var(--muted2);
}

/* A material connection. */
.prov--note {
    border: 1px solid rgba( 200, 164, 77, .38 );
    background: rgba( 200, 164, 77, .07 );
    color: var(--gold);
}

/* Money changed hands. Loudest on purpose. */
.prov--loud {
    border: 1px solid var(--gold);
    background: var(--gold);
    color: #14120E;
}

/* The legal row shares the inner container so it lines up with the columns
   above, but not its grid. */
.site-foot__inner--legal {
    display: block;
}

.site-foot__inner--legal .site-foot__legal {
    margin-top: 34px;
}