/* Form Drop: the legal pages (terms.php, privacy.php, refunds.php).
   Loaded after home.css, which supplies the Wristbands tokens, top bar, rules
   list and footer. The title rides on one ink band laid across the page; below
   it is a plain reading column with a numbered contents rail. No audience
   colours and no safety orange: nothing here is for sale. */

/* The title band runs past both edges; clip (not hidden) so the page never scrolls
   sideways and the contents rail can still stick. */
.legal main {
    padding-bottom: clamp(72px, 8vw, 120px);
    overflow-x: clip;
}

.top-nav a[aria-current="page"],
.foot nav a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

/* ---------- Title band ---------- */

.legal-band {
    position: relative;
    margin-top: clamp(8px, 1.6vw, 24px);
    padding: clamp(28px, 3.4vw, 46px) 0;
    color: #fff;
    isolation: isolate;
    --c: var(--ink);
    --focus: #fff;
}

.legal-band::before {
    content: "";
    position: absolute;
    inset: 0 -6px;
    z-index: -1;
    background: var(--ink);
    filter: var(--table-shadow);
    transform: rotate(-0.8deg);
}

.legal-band .wrap {
    padding-right: clamp(48px, 9vw, 140px);
}

.legal-band h1 {
    font: 900 clamp(44px, 5.4vw, 80px)/1 var(--display);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-wrap: balance;
}

.legal-meta {
    margin-top: 14px;
    color: #bdbdbd;
    font: 500 12px/1.45 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legal-meta time {
    white-space: nowrap;
}

.legal-band .band-slits {
    position: absolute;
    top: 0;
    bottom: 0;
    right: clamp(20px, 6vw, 96px);
    background: transparent;
    transform: rotate(-0.8deg);
}

.legal-lead {
    margin-top: clamp(32px, 3.6vw, 48px);
}

.legal-lead a {
    color: var(--ink);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

/* ---------- In short ---------- */

.legal-kicker,
.legal-short h2 {
    font: 800 15px/1.2 var(--display);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.legal-short {
    margin-top: clamp(44px, 5vw, 72px);
}

.legal-short .rules {
    margin-top: 12px;
}

.legal-short .rules dt {
    font-size: 20px;
}

.legal-fine {
    margin-top: 14px;
    color: var(--ink-2);
    font-size: 14px;
}

/* ---------- Contents rail and reading column ---------- */

.legal-grid {
    display: grid;
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
    margin-top: clamp(64px, 7vw, 104px);
}

.legal-toc {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    font-size: 15px;
}

.legal-toc ol {
    margin-top: 12px;
    border-top: 3px solid var(--ink);
    counter-reset: toc;
}

.legal-toc li {
    counter-increment: toc;
}

.legal-toc a {
    display: flex;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-2);
    line-height: 1.35;
    text-decoration: none;
}

.legal-toc a::before {
    content: counter(toc, decimal-leading-zero);
    flex: none;
    padding-top: 2px;
    font: 500 12px/1.45 var(--mono);
    letter-spacing: 0.06em;
}

.legal-toc a:hover {
    color: var(--ink);
}

.legal-body {
    max-width: 70ch;
    font-size: 17px;
    line-height: 1.6;
}

.legal-body h2 {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-top: 64px;
    padding-top: 18px;
    border-top: 3px solid var(--ink);
    font: 800 clamp(26px, 2.4vw, 32px)/1.1 var(--display);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-wrap: balance;
    scroll-margin-top: 24px;
}

.legal-body h2:first-child {
    margin-top: 0;
}

/* The section's serial, set like a wristband's number. */
.legal-no {
    flex: none;
    color: var(--ink-2);
    font: 500 13px/1 var(--mono);
    letter-spacing: 0.06em;
}

.legal-body h3 {
    margin: 28px 0 0;
    font-size: 18px;
    font-weight: 700;
}

.legal-body p,
.legal-body ul {
    margin-top: 14px;
}

.legal-body li {
    position: relative;
    margin-top: 10px;
    padding-left: 24px;
}

/* Bullets are the band's die-cut slits. */
.legal-body li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.42em;
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: var(--ink);
    transform: skewX(-26deg);
}

.legal-body b {
    font-weight: 600;
}

.legal-body a {
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

.legal-body a:hover {
    text-decoration-thickness: 2px;
}

/* A business detail config.php hasn't been given yet. Meant to be impossible to miss. */
.legal-gap {
    padding: 1px 6px;
    background: none;
    color: var(--ink);
    border: 1.5px dashed var(--ink);
    border-radius: 4px;
    font: 500 0.8em/1.4 var(--mono);
    white-space: nowrap;
}

/* ---------- Narrower screens ---------- */

@media (max-width: 880px) {
    .legal-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
    }

    .legal-toc {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .legal-toc ol {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
        column-gap: 24px;
    }

    .legal-short .rules dt {
        font-size: 19px;
    }
}

@media (max-width: 480px) {
    .legal-body {
        font-size: 16px;
    }

    .legal-body h2 {
        margin-top: 52px;
    }
}

/* ---------- Print: just the text ---------- */

@media print {
    .skip,
    .top,
    .legal-toc,
    .foot nav,
    .band-slits {
        display: none;
    }

    .legal-band {
        color: var(--ink);
        padding: 0;
    }

    .legal-band::before {
        display: none;
    }

    .legal-meta {
        color: var(--ink-2);
    }

    .legal-grid {
        display: block;
        margin-top: 32px;
    }

    .legal-body {
        max-width: none;
        font-size: 11pt;
    }

    .legal-body h2 {
        break-after: avoid;
    }

    .legal-body a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
    }
}