/* Grapevine marketing site — baseline and print devices.
 *
 * Written against the mockup and gv-tokens.css. Nothing here is derived from a
 * third-party stylesheet: Bootstrap (MIT) and the three OFL fonts are the only
 * vendored assets, and both are loaded separately.
 *
 * The rule for this file: every colour, radius, shadow and type size comes from
 * a --gvl-* token. A literal value here is a bug, because the token is the
 * theming API that this site shares with grapevine-2026.
 */

/* ── Base ──────────────────────────────────────────────────────────────── */

body {
    background: var(--gvl-paper);
    color: var(--gvl-ink);
    font-family: var(--gvl-font);
    font-size: var(--gvl-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--gvl-font-display);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.08;
    color: var(--gvl-ink);
}

a { color: var(--gvl-ink); text-underline-offset: .18em; }
a:hover { color: var(--gvl-primary-dark); }

img, svg { max-width: 100%; }

::selection { background: var(--gvl-primary); color: #fff; }

/* One visible focus ring for the whole site. Vine rather than grape so it
 * reads against grape buttons as well as paper. */
:focus-visible {
    outline: 3px solid var(--gvl-vine);
    outline-offset: 2px;
}

.gv-skip {
    position: absolute;
    left: -9999px;
}
.gv-skip:focus {
    left: 12px; top: 12px;
    z-index: 3000;
    background: var(--gvl-card);
    border: var(--gvl-border);
    border-radius: var(--gvl-radius-sm);
    padding: .5rem .9rem;
}

/* ── Layout ────────────────────────────────────────────────────────────── */

.gv-wrap {
    max-width: var(--gvl-container);
    margin-inline: auto;
    padding-inline: var(--gvl-gutter);
}

/* The gutter.
 *
 * .gv-wrap carries it for the blocks that build their own container — the
 * hero, the chapters, the desks. Everything else sits directly inside a
 * section and relied on the constrained layout, which supplies a max-width
 * and no padding at all: fine at 1440px where the viewport is wider than the
 * content, and flush to both screen edges on a phone.
 *
 * So the section provides it, and stands down for any section whose child
 * already has one — otherwise those get it twice. */
.gv-section { padding-block: var(--gvl-section-y); padding-inline: var(--gvl-gutter); }
.gv-section:has(> .gv-wrap) { padding-inline: 0; }
.gv-section--tint { background: var(--gvl-paper-2); }

@media (max-width: 760px) {
    .gv-section { padding-block: 64px; }
    .gv-hide-sm { display: none !important; }
}

/* ── Type ──────────────────────────────────────────────────────────────── */

.gv-h1 {
    font-size: var(--gvl-h1);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: .95;
    margin: 0 0 1.1rem;
}

.gv-h2 {
    font-size: var(--gvl-h2);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    margin: 0 0 1rem;
}

.gv-h3 {
    font-size: var(--gvl-h3);
    letter-spacing: -.03em;
    line-height: 1.05;
    margin: 0;
}

.gv-lede {
    font-size: 1.18rem;
    color: var(--gvl-ink-2);
    max-width: 36em;
    margin: 0 0 1.6rem;
}

.gv-note {
    font-family: var(--gvl-font-mono);
    font-size: 12.5px;
    color: var(--gvl-ink-2);
}

/* ── gv-highlight: the overprinted word ────────────────────────────────
 *
 * One block of grape ink with the second ink showing at the offset, as a
 * two-colour print slightly out of register. The mockup settled on this
 * rather than a halftone: at heading size the dots read as noise, and the
 * solid block keeps the word legible at 92px and at 52px alike.
 *
 * white-space: nowrap so a highlighted phrase never breaks across lines and
 * leaves half a block of ink hanging at the end of one.
 */
.gv-highlight {
    background: var(--gvl-highlight, var(--gvl-primary));
    color: #fff;
    padding: 0 .1em;
    border-radius: .1em;
    box-shadow: .06em .06em 0 var(--gvl-vine);
    white-space: nowrap;
}

/* Gold is "where you are now", so this variant is for the one word a reader
 * should land on — never for a second decorative highlight on the same page. */
.gv-highlight--gold {
    background: var(--gvl-gold);
    color: var(--gvl-ink);
    box-shadow: .06em .06em 0 var(--gvl-primary);
}

/* ── gv-kicker / gv-plate / gv-dots ────────────────────────────────────── */

.gv-kicker {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--gvl-font-mono);
    font-size: var(--gvl-kicker);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gvl-primary-dark);
    margin: 0 0 1rem;
}

.gv-plate {
    display: inline-grid;
    place-items: center;
    min-width: 2.1rem;
    height: 1.5rem;
    padding: 0 .4rem;
    border: 1.5px solid var(--gvl-ink);
    border-radius: var(--gvl-pill);
    background: var(--gvl-card);
    color: var(--gvl-ink);
    font-size: .72rem;
    letter-spacing: .04em;
}

/* Three ink dots overlapping, as a printer's colour bar. */
.gv-dots { display: inline-flex; gap: 3px; }
.gv-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--gvl-primary); }
.gv-dots i:nth-child(2) { background: var(--gvl-vine); margin-left: -6px; }
.gv-dots i:nth-child(3) { background: var(--gvl-gold); margin-left: -6px; }

/* ── gv-card / gv-shadow: 2px ink border, hard offset ──────────────────── */

.gv-card {
    border: var(--gvl-border);
    border-radius: var(--gvl-radius-lg);
    background: var(--gvl-card);
}
.gv-shadow      { box-shadow: var(--gvl-shadow); }
.gv-shadow-vine { box-shadow: var(--gvl-shadow-vine); }
.gv-shadow-gold { box-shadow: var(--gvl-shadow-gold); }

/* ── gv-dots-field: the dotted ground behind a mock ────────────────────── */

.gv-dots-field {
    background-color: var(--gvl-paper-2);
    background-image: var(--gvl-dots);
    background-size: var(--gvl-dots-size);
}
.gv-dots-field--vine {
    background-image: radial-gradient(rgba(63, 163, 77, .35) 1.3px, transparent 1.5px);
    background-size: 10px 10px;
}

/* ── gv-stamp: "PASSED · 92%" ──────────────────────────────────────────
 *
 * The ragged edge is a turbulence mask rather than an image, so it costs no
 * request and inherits the ink colour.
 */
.gv-stamp {
    display: inline-block;
    font-family: var(--gvl-font-display);
    font-weight: 800;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gvl-primary-dark);
    border: 3px solid var(--gvl-primary-dark);
    border-radius: var(--gvl-radius-sm);
    padding: .15rem .8rem;
    transform: rotate(-7deg);
    -webkit-mask-image: var(--gv-stamp-mask);
    mask-image: var(--gv-stamp-mask);
}
:root {
    --gv-stamp-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='1'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.7'/%3E%3C/filter%3E%3Crect width='120' height='60' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* ── gv-badge: "ACTIVE", "SAMPLE DATA" ─────────────────────────────────── */

.gv-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--gvl-font-mono);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    border: 1.5px solid var(--gvl-ink);
    border-radius: var(--gvl-pill);
    padding: .12rem .55rem;
    background: var(--gvl-card);
    color: var(--gvl-ink);
}
/* Success never changes with the brand colour: done always looks done. */
.gv-badge--ok {
    background: var(--gvl-success-wash);
    color: var(--gvl-success);
    border-color: var(--gvl-success);
}
.gv-badge--active {
    background: var(--gvl-primary-light);
    color: var(--gvl-primary-dark);
    border-color: var(--gvl-primary-dark);
}
/* Gold means "you are here" and nothing else. */
.gv-badge--here {
    background: var(--gvl-gold-wash);
    color: #6b4d00;
    border-color: var(--gvl-gold);
}

/* ── gv-steps: the three-panel fold sheet ──────────────────────────────── */

.gv-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: var(--gvl-border);
    border-radius: var(--gvl-radius-lg);
    background: var(--gvl-card);
    box-shadow: 8px 8px 0 var(--gvl-vine);
    position: relative;
}
/* The turned corner, top right. */
.gv-steps::after {
    content: "";
    position: absolute;
    top: -2px; right: -2px;
    width: 46px; height: 46px;
    background: linear-gradient(225deg, var(--gvl-paper) 50%, var(--gvl-paper-2) 50%);
    border-left: var(--gvl-border);
    border-bottom: var(--gvl-border);
    border-bottom-left-radius: 8px;
    border-top-right-radius: var(--gvl-radius-lg);
}
.gv-step { padding: 2.2rem 2rem 2rem; position: relative; min-width: 0; }
.gv-step + .gv-step { border-left: 2px dashed var(--gvl-line-2); }

.gv-step-no {
    display: block;
    font-family: var(--gvl-font-display);
    font-weight: 800;
    font-size: 4.5rem;
    line-height: .9;
    letter-spacing: -.05em;
    color: transparent;
    -webkit-text-stroke: 2px var(--gvl-ink);
    margin-bottom: 1rem;
}
.gv-step h3 { font-size: 1.5rem; margin: 0 0 .6rem; }
.gv-step p  { color: var(--gvl-ink-2); margin: 0; }

@media (max-width: 860px) {
    .gv-steps { grid-template-columns: minmax(0, 1fr); }
    .gv-step + .gv-step { border-left: 0; border-top: 2px dashed var(--gvl-line-2); }
}

/* ── Buttons ───────────────────────────────────────────────────────────
 *
 * Registered as core/button block styles, so an editor picks them from the
 * block sidebar rather than typing a class.
 */
.wp-block-button__link,
.gv-btn {
    font-family: var(--gvl-font);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: var(--gvl-border);
    border-radius: var(--gvl-radius-sm);
    padding: .78rem 1.35rem;
    /* The line box hugs the text, so the equal padding above and below is
       what centres it. Inheriting the body's 1.62 left room for descenders
       on both sides and the glyphs sat high in it. */
    line-height: 1.1;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.is-style-gv-primary > .wp-block-button__link,
.gv-btn--primary {
    background: var(--gvl-primary);
    color: #fff;
    box-shadow: var(--gvl-shadow-vine);
}
.is-style-gv-primary > .wp-block-button__link:hover,
.gv-btn--primary:hover {
    color: #fff;
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--gvl-vine);
}

.is-style-gv-outline > .wp-block-button__link,
.gv-btn--outline {
    background: transparent;
    color: var(--gvl-ink);
}
.is-style-gv-outline > .wp-block-button__link:hover,
.gv-btn--outline:hover { background: var(--gvl-card); color: var(--gvl-ink); }

/* For use on the grape band. */
.is-style-gv-gold > .wp-block-button__link,
.gv-btn--gold {
    background: var(--gvl-gold);
    color: var(--gvl-ink);
    box-shadow: 4px 4px 0 var(--gvl-ink);
}
.is-style-gv-gold > .wp-block-button__link:hover,
.gv-btn--gold:hover {
    color: var(--gvl-ink);
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--gvl-ink);
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-button__link,
    .gv-btn { transition: none; }
    .is-style-gv-primary > .wp-block-button__link:hover,
    .is-style-gv-gold > .wp-block-button__link:hover,
    .gv-btn--primary:hover,
    .gv-btn--gold:hover { transform: none; }
}