/* ==========================================================================
   myOtter — shared shell for the second-pass pages
   --------------------------------------------------------------------------
   Tokens, base, buttons, masthead, band system, the venue calculator, the FAQ
   list, the footer and the reduced-motion resolution. Every page in the new
   language links this first, then its own sheet. Splitting it out is what
   stops /home-v2 and /for-venues-v2 drifting into two design systems that
   merely resemble each other.

   Contrast discipline is unchanged and binding. --honey, --clay and --river
   are decorative. Body copy is --text or --text-muted; where an accent has to
   carry small text it takes the sibling measured for that ground:
   --honey-ink on cream, paper and sand; --honey-lift on teal-deep.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */

:root {
    --ink: #1C3238;
    --teal: #25434C;
    --teal-deep: #17303A;
    --honey: #E8A33D;
    --honey-deep: #B87F1D;
    --honey-lift: #F4C47F;

    /* Honey's fifth step. --honey-deep was the darkest the system had, and it
       only reaches 3.3:1 on cream — fine for a chevron, short of AA for the
       numerals, the pebble counts and the locked badge, which are all small
       bold text. Rather than ship those at 3.3:1, honey gets one more stop
       down, measured against every ground it actually lands on:
         cream 5.6:1 · paper 5.8:1 · sand 4.9:1 · honey wash 5.1:1 */
    --honey-ink: #875C10;
    --river: #4E7A8C;
    --river-deep: #3F6676;
    --clay: #C0674B;
    --clay-lift: #F0B49B;
    --cream: #FEF8EC;
    --sand: #F5E9D4;
    --paper: #FFFDF8;
    --white: #FFFFFF;

    --text: #2A4048;
    --text-muted: #5E7178;
    --text-muted-strong: #4A5C63;
    --text-inverse: #FBF3E4;

    --line: rgba(37, 67, 76, 0.14);
    --line-strong: rgba(37, 67, 76, 0.28);

    --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --font-body: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;

    /* A wider display range than the old sheet. The page is centred now, so
       the headline has the room to carry the viewport on its own. */
    --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
    --step-0: clamp(1rem, 0.97rem + 0.16vw, 1.08rem);
    --step-1: clamp(1.1rem, 1.04rem + 0.3vw, 1.3rem);
    --step-2: clamp(1.45rem, 1.2rem + 1.1vw, 2.1rem);
    --step-3: clamp(2rem, 1.5rem + 2.3vw, 3.4rem);
    --step-4: clamp(2.5rem, 1.5rem + 4.4vw, 5rem);

    --gutter: clamp(1.25rem, 0.9rem + 1.7vw, 2.5rem);
    --band-y: clamp(4.5rem, 3rem + 6vw, 7.5rem);
    --shell: 1140px;
    --measure: 58ch;
    --head-h: 64px;

    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 24px;
    --radius-xl: 36px;
    --radius-band: 44px;
    --radius-pill: 999px;
    --pebble: 60% 40% 55% 45% / 60% 55% 45% 40%;

    --shadow-sm: 0 2px 8px -3px rgba(23, 48, 58, 0.24);
    --shadow: 0 14px 28px -18px rgba(23, 48, 58, 0.45);
    --shadow-lg: 0 34px 70px -34px rgba(23, 48, 58, 0.52);

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out-back: cubic-bezier(0.34, 1.4, 0.64, 1);
    --dur-fast: 140ms;
    --dur: 260ms;
    --dur-slow: 620ms;
}

/* ----------------------------------------------------------------- 2. Base */

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--head-h) + 1rem);
}

body {
    background-color: var(--cream);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.65;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

/* The surfaces nobody draws still belong to the design system. */
::selection {
    background-color: var(--honey);
    color: var(--teal-deep);
}

* {
    scrollbar-color: var(--line-strong) transparent;
    scrollbar-width: thin;
}

:focus-visible {
    outline: 3px solid var(--honey-deep);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Underlines are drawn deliberately on this page — the nav grows one on hover,
   prose links carry a real one. Nothing gets the browser default. */
a {
    color: inherit;
    text-decoration: none;
}

.display {
    font-family: var(--font-display);
    font-weight: 600;
    font-variation-settings: 'SOFT' 20, 'WONK' 1;
    letter-spacing: -0.032em;
    line-height: 1.02;
    text-wrap: balance;
}

.lede {
    font-size: var(--step-1);
    line-height: 1.55;
    color: var(--text-muted-strong);
    max-width: var(--measure);
}

.shell {
    width: min(100% - (var(--gutter) * 2), var(--shell));
    margin-inline: auto;
}

/* Hidden by moving it up and out rather than 9999px to the left. body carries
   overflow-x: clip as a safety net, and a child parked far off the left edge
   is exactly the positioned element that a horizontal clip can swallow. Going
   vertically keeps it clear of that axis entirely. */
.skip-link {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-200%);
    background: var(--teal);
    color: var(--text-inverse);
    padding: 0.7rem 1.2rem;
    z-index: 100;
    border-radius: 0 0 var(--radius-sm) 0;
    transition: transform var(--dur) var(--ease);
}

.skip-link:focus {
    transform: translateY(0);
}

/* ---------------------------------------------------------------- 3. Acts */

.act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0.6rem 1.3rem;
    border-radius: var(--radius-pill);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background-color var(--dur) var(--ease),
        color var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        transform var(--dur-fast) var(--ease),
        box-shadow var(--dur) var(--ease);
}

.act-solid {
    background-color: var(--teal);
    color: var(--text-inverse);
    box-shadow: var(--shadow-sm);
}

.act-solid:hover {
    background-color: var(--teal-deep);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.act-quiet {
    color: var(--teal);
    border-color: var(--line-strong);
}

.act-quiet:hover {
    background-color: var(--paper);
    border-color: var(--teal);
}

.act-honey {
    background-color: var(--honey);
    color: var(--teal-deep);
}

.act-honey:hover {
    background-color: var(--honey-lift);
    transform: translateY(-1px);
}

.act-ghost {
    color: var(--text-inverse);
    border-color: rgba(251, 243, 228, 0.35);
}

.act-ghost:hover {
    border-color: var(--text-inverse);
    background-color: rgba(251, 243, 228, 0.08);
}

/* ------------------------------------------------------------- 4. Masthead */

/* The old header wrapped onto two lines at laptop width because seven items
   and a filled button do not fit a 1180px rail. Four links, two acts, and
   nowrap on everything. */
.masthead {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: rgba(254, 248, 236, 0.82);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease);
}

.masthead[data-stuck] {
    border-bottom-color: var(--line);
}

.masthead-rail {
    width: min(100% - (var(--gutter) * 2), var(--shell));
    margin-inline: auto;
    height: var(--head-h);
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 20, 'WONK' 1;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
    color: var(--teal-deep);
    white-space: nowrap;
}

.brand img {
    width: 30px;
    height: 30px;
}

.masthead-nav {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 2vw, 1.8rem);
    margin-right: auto;
}

/* The growing underline is a pseudo-element rather than a background-image
   gradient. Same effect, but the link keeps a genuinely transparent
   background — a teal gradient painted at zero height still reads to any
   contrast checker (and to a person inspecting it) as teal behind the text. */
.masthead-nav a {
    position: relative;
    display: inline-block;
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--text-muted-strong);
    white-space: nowrap;
    padding-block: 0.4rem;
    transition: color var(--dur) var(--ease);
}

.masthead-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.15rem;
    height: 1.5px;
    background-color: var(--teal);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur) var(--ease);
}

.masthead-nav a:hover {
    color: var(--teal-deep);
}

.masthead-nav a:hover::after {
    transform: scaleX(1);
}

.masthead-acts {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.masthead-acts .act {
    min-height: 38px;
    padding: 0.4rem 1.05rem;
}

.masthead-burger {
    display: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: 0;
    cursor: pointer;
}

.masthead-burger span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--teal-deep);
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.masthead-burger[aria-expanded="true"] span:first-child {
    transform: translateY(3.5px) rotate(45deg);
}

.masthead-burger[aria-expanded="true"] span:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
}

.drawer {
    display: none;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.5rem var(--gutter) 1.25rem;
    border-top: 1px solid var(--line);
}

.drawer a:not(.act) {
    padding: 0.75rem 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-weight: 500;
    color: var(--text);
}

/* Scoped off .drawer a so the solid pill keeps its own inverse text rather
   than inheriting reading ink onto teal. */
.drawer .act {
    margin-top: 0.5rem;
    justify-content: center;
}

@media (max-width: 920px) {

    .masthead-nav,
    .masthead-acts {
        display: none;
    }

    .masthead-burger {
        display: flex;
    }

    .drawer:not([hidden]) {
        display: flex;
    }
}

/* ---------------------------------------------------------------- 7. Bands */

.band {
    padding-block: var(--band-y);
}

.band-paper {
    background-color: var(--paper);
}

.band-sand {
    background-color: var(--sand);
}

.band-ink {
    background-color: var(--teal-deep);
    color: var(--text-inverse);
    border-radius: var(--radius-band);
    margin-inline: var(--gutter);
}

.band-title {
    font-size: var(--step-3);
    max-width: 20ch;
}

.band-lede {
    margin-top: 1rem;
}

/* ----------------------------------------------- 12. Commission calculator */

/* Shared with /for-venues, which is now the only page that runs it. The
   homepage used to carry a second copy alongside the plan tiles; it has been
   cut back to a one-line door (.door, in home-v2.css) so the front page reads
   as the couple's page and the operator's argument lives in one place.
   Teal-deep because the calculator is a piece of equipment: nothing else in
   the system looks like an instrument, because nothing else is for working
   with. The numbers in it are the visitor's own. We supply the arithmetic,
   never a claim about what anybody else charges. */
.sum {
    margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    background-color: var(--teal-deep);
    color: var(--text-inverse);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
}

.sum-inputs {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.field {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem 1rem;
    align-items: center;
}

.field label {
    grid-column: 1 / -1;
    font-size: var(--step--1);
    font-weight: 500;
    /* On teal-deep: 11.9:1 */
    color: rgba(251, 243, 228, 0.86);
}

.field output {
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 20, 'WONK' 1;
    font-weight: 600;
    font-size: var(--step-1);
    color: var(--text-inverse);
    font-variant-numeric: tabular-nums;
    min-width: 4ch;
    text-align: right;
}

.field-note {
    grid-column: 1 / -1;
    max-width: 52ch;
    font-size: 0.8rem;
    /* On teal-deep: 7.6:1 */
    color: rgba(251, 243, 228, 0.7);
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 24px;
    background: transparent;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: var(--radius-pill);
    background-color: rgba(251, 243, 228, 0.26);
}

input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: var(--radius-pill);
    background-color: rgba(251, 243, 228, 0.26);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin-top: -8px;
    border-radius: var(--pebble);
    background-color: var(--honey);
    border: 2px solid var(--teal-deep);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-fast) var(--ease);
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: var(--pebble);
    background-color: var(--honey);
    border: 2px solid var(--teal-deep);
    box-shadow: var(--shadow-sm);
}

input[type="range"]:hover::-webkit-slider-thumb {
    transform: scale(1.12);
}

.sum-out {
    background-color: rgba(251, 243, 228, 0.08);
    border-radius: var(--radius-lg);
    padding: 1.3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
}

.sum-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: var(--step--1);
    color: rgba(251, 243, 228, 0.86);
}

.sum-row strong {
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 20, 'WONK' 1;
    font-weight: 600;
    font-size: var(--step-1);
    color: var(--text-inverse);
    font-variant-numeric: tabular-nums;
}

.sum-row-total {
    margin-top: 0.3rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(251, 243, 228, 0.22);
}

/* The payoff figure for a venue operator. The plate went dark, so this takes
   honey's lifted sibling rather than its ink one: --honey-ink is cut for cream
   and drops to 1.9:1 here, while --honey-lift reaches 8.6:1 on teal-deep. Same
   accent, the stop chosen for this ground. */
.sum-row-total strong {
    font-size: var(--step-2);
    color: var(--honey-lift);
}

.sum-fine {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: rgba(251, 243, 228, 0.7);
    line-height: 1.45;
}

/* Annual is a flat 20% off, as the venue portal states, so the toggle shows a
   real figure rather than an unexplained "discounted yearly". The prices are
   derived from that one constant in JS rather than stored twice, so the tiles
   and the calculator cannot drift apart. */
.billing {
    margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: var(--radius-pill);
    background-color: rgba(23, 48, 58, 0.08);
}

.bill {
    min-height: 38px;
    padding: 0.4rem 1.05rem;
    border: 0;
    border-radius: var(--radius-pill);
    background-color: transparent;
    color: var(--text-muted-strong);
    font-family: inherit;
    font-size: var(--step--1);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.bill:hover {
    color: var(--teal-deep);
}

.bill.is-on {
    background-color: var(--teal);
    color: var(--text-inverse);
}

@media (max-width: 760px) {
    .sum {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------ 13. FAQ */

.asks {
    margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
    max-width: 48rem;
    border-top: 1px solid var(--line);
}

.ask {
    border-bottom: 1px solid var(--line);
}

.ask summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 0;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 20, 'WONK' 1;
    font-weight: 600;
    font-size: var(--step-1);
    letter-spacing: -0.02em;
    color: var(--teal-deep);
    transition: color var(--dur) var(--ease);
}

.ask summary::-webkit-details-marker {
    display: none;
}

.ask summary::after {
    content: "";
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    border-right: 2.2px solid var(--honey-deep);
    border-bottom: 2.2px solid var(--honey-deep);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--dur) var(--ease);
}

.ask[open] summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
}

.ask summary:hover {
    color: var(--teal);
}

.ask p {
    padding-bottom: 1.2rem;
    max-width: 58ch;
    color: var(--text-muted-strong);
}

/* --------------------------------------------------------------- 15. Footer */

.foot {
    padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) 1.5rem;
}

.foot-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: clamp(2rem, 1rem + 3vw, 4rem);
}

.foot-word {
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 20, 'WONK' 1;
    font-weight: 600;
    font-size: var(--step-1);
    letter-spacing: -0.02em;
    color: var(--teal-deep);
}

.foot-tag {
    font-size: var(--step--1);
    color: var(--honey-ink);
    font-weight: 600;
}

.foot-note {
    margin-top: 0.5rem;
    font-size: var(--step--1);
    color: var(--text-muted);
}

.foot-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1.5rem;
}

.foot-nav h2 {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}

.foot-nav a {
    display: block;
    min-height: 32px;
    font-size: var(--step--1);
    color: var(--text-muted-strong);
    transition: color var(--dur) var(--ease);
}

.foot-nav a:hover {
    color: var(--teal);
}

.foot-rule {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    color: var(--text-muted);
}

@media (max-width: 700px) {
    .foot-shell {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------- 16. Reduced motion */

/* Everything resolves to its visible resting state rather than freezing
   part-way through. */
@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .hero-title em::after {
        transform: scaleX(1);
    }

    .step .panel {
        opacity: 1;
        transform: none;
    }
}