/* =========================================================
   Wintercape — 142 Cambridge Terrace, Christchurch, Canterbury
   A tariff sheet, not a brochure.

   Fixed left rail carries the whole navigation; the page is a
   single measured column beside it. Openings are type on paper
   with the photograph below, never behind. Paper, ink, one pine
   green. Hairlines everywhere, no rounded corners, no shadows.
   ========================================================= */

/* --- 00 Reset ------------------------------------------- */

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

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
    margin: 0;
    padding: 0;
}

ul, ol { list-style: none; }

img, picture, video { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; }

table { border-collapse: collapse; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* --- 01 Tokens ------------------------------------------ */

:root {
    --paper:     #EFEFEA;
    --paper-2:   #E4E5DE;
    --paper-3:   #F8F8F5;
    --ink:       #101413;
    --ink-2:     #262C2A;
    --grey:      #6B7370;
    --rule:      #D2D3CB;
    --rule-firm: #ABADA2;
    --pine:      #1F3D31;
    --pine-up:   #3A6B57;

    --display: "Fraunces", Georgia, "Times New Roman", serif;
    --text:    "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --rail:  17.5rem;          /* fixed navigation column */
    --gut:   clamp(1.15rem, 3.4vw, 3.25rem);
    --band:  clamp(3.4rem, 6.5vw, 6rem);
    --measure: 66ch;
    --hair:  1px solid var(--rule);
}

/* --- 02 Page -------------------------------------------- */

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--text);
    font-size: clamp(1rem, .97rem + .2vw, 1.075rem);
    font-weight: 350;
    line-height: 1.62;
    overflow-x: hidden;
}

body.is-held { overflow: hidden; }

/* The single measured column that every page sits in. */
.frame {
    width: 100%;
    max-width: 74rem;
    margin-inline: auto;
    padding-inline: var(--gut);
}

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--ink);
    color: var(--paper);
    padding: .7rem 1.2rem;
    font-family: var(--mono);
    font-size: .78rem;
}
.skip:focus { left: 0; }

:focus-visible {
    outline: 2px solid var(--pine);
    outline-offset: 2px;
}

/* --- 03 Type -------------------------------------------- */

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 400;
    font-variation-settings: "SOFT" 0, "WONK" 0;
    line-height: 1.06;
    letter-spacing: -.018em;
}

h1 { font-size: clamp(2.1rem, 1.35rem + 3.1vw, 3.9rem); }
h2 { font-size: clamp(1.6rem, 1.22rem + 1.6vw, 2.5rem); }
h3 { font-size: clamp(1.22rem, 1.08rem + .6vw, 1.6rem); }
h4 { font-family: var(--text); font-size: 1rem; font-weight: 500; }

p + p { margin-top: 1em; }

strong, b { font-weight: 600; }

.tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: .67rem;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--pine);
}

.tie {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    text-decoration-color: var(--rule-firm);
    transition: color .16s, text-decoration-color .16s;
}
.tie:hover { color: var(--pine); text-decoration-color: var(--pine); }

.pull {
    margin-top: 1.5em;
    padding-left: 1.3rem;
    border-left: 2px solid var(--pine);
    font-family: var(--display);
    font-size: 1.24em;
    line-height: 1.3;
    color: var(--ink-2);
}

.arrow {
    display: inline-block;
    margin-top: 1.5rem;
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--ink);
    transition: color .16s, border-color .16s;
}
.arrow::after { content: " \2192"; }
.arrow:hover { color: var(--pine); border-color: var(--pine); }

/* --- 04 Buttons ----------------------------------------- */

.key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .8rem 1.45rem;
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
    border-radius: 0;
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background .16s, color .16s, border-color .16s;
}
.key:hover { background: var(--pine); border-color: var(--pine); }
.key:disabled { opacity: .5; cursor: default; }

.key--hollow { background: transparent; color: var(--ink); border-color: var(--rule-firm); }
.key--hollow:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.key--wide { width: 100%; }

.acts { display: flex; flex-wrap: wrap; gap: .6rem; }

/* --- 05 The fixed rail ---------------------------------- */

.rail {
    border-bottom: 1px solid var(--ink);
    background: var(--paper);
}
.rail__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem var(--gut);
}

.sign { display: flex; flex-direction: column; gap: .25rem; text-decoration: none; }
.sign__word {
    font-family: var(--display);
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: -.02em;
}
.sign__sub {
    font-family: var(--mono);
    font-size: .6rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--grey);
}

.rail__flag {
    font-family: var(--mono);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--grey);
    border: 1px solid var(--rule-firm);
    padding: .25rem .5rem;
    white-space: nowrap;
}
.rail__flag b { color: var(--ink); }

.burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 42px;
    height: 38px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid var(--ink);
    cursor: pointer;
}
.burger span { display: block; height: 1px; background: var(--ink); transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Collapsed panel on narrow screens */
.rail__panel { display: none; padding: 0 var(--gut) 1.4rem; border-top: var(--hair); }
.rail__panel.is-open { display: block; }
.rail__nav { display: grid; }
.rail__nav a {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    padding: .72rem 0;
    border-bottom: var(--hair);
    text-decoration: none;
    font-size: 1.02rem;
}
.rail__nav a span {
    font-family: var(--mono);
    font-size: .62rem;
    color: var(--rule-firm);
    min-width: 1.4rem;
}
.rail__nav a:hover,
.rail__nav a[aria-current="page"] { color: var(--pine); }
.rail__nav a[aria-current="page"] span { color: var(--pine); }

.rail__meta {
    margin-top: 1.2rem;
    display: grid;
    gap: .3rem;
    font-family: var(--mono);
    font-size: .7rem;
    color: var(--grey);
}
.rail__meta a { text-decoration: none; }
.rail__meta a:hover { color: var(--pine); }
.rail__panel .key { margin-top: 1.1rem; }

/* Desktop: the rail becomes a fixed column and the page shifts across. */
@media (min-width: 1100px) {
    .rail {
        position: fixed;
        inset: 0 auto 0 0;
        width: var(--rail);
        display: flex;
        flex-direction: column;
        padding: 2.1rem 1.75rem;
        border-bottom: 0;
        border-right: 1px solid var(--ink);
        overflow-y: auto;
        z-index: 40;
    }
    .rail__top { display: block; padding: 0; }
    .sign { flex-direction: column; gap: .35rem; }
    .sign__word { font-size: 2.05rem; }
    .burger { display: none; }

    /* !important beats the .is-open toggle the burger leaves behind. */
    .rail__panel {
        display: flex !important;
        flex-direction: column;
        flex: 1;
        padding: 0;
        border-top: 0;
        margin-top: 2.4rem;
    }
    .rail__nav a { padding: .6rem 0; font-size: .98rem; }
    .rail__nav a:first-child { border-top: var(--hair); }
    .rail__meta { margin-top: auto; padding-top: 1.6rem; }
    .rail__flag { align-self: flex-start; margin-top: 1.1rem; }

    body { padding-left: var(--rail); }
    .consent .frame { padding-left: var(--gut); }
}

/* --- 06 Section furniture ------------------------------- */

.zone { padding-block: var(--band); border-top: 1px solid var(--ink); }
.zone--sunk { background: var(--paper-2); }
.zone--lift { background: var(--paper-3); }
.zone--tight { padding-block: clamp(2.2rem, 4vw, 3.2rem); }

.zone--ink {
    background: var(--pine);
    color: #D6DED8;
    border-top-color: var(--pine);
}
.zone--ink h1, .zone--ink h2, .zone--ink h3, .zone--ink h4 { color: #F3F6F3; }
.zone--ink .tag { color: #9DBFAC; }
.zone--ink .index { border-color: rgba(255,255,255,.22); }
.zone--ink .index__no { color: rgba(255,255,255,.4); }
.zone--ink .index__aside { color: #9DAFA5; }
.zone--ink .arrow { border-color: rgba(255,255,255,.5); }
.zone--ink .arrow:hover { color: #fff; border-color: #fff; }
.zone--ink .pull { color: #C6D3CB; border-color: #7FA692; }
.zone--ink .duo__side { border-color: rgba(255,255,255,.3); }
.zone--ink .duo__side p { color: #A8B8AE; }
.zone--ink .spec li { border-color: rgba(255,255,255,.18); }
.zone--ink .spec span { color: #A8B8AE; }

/* Section header: number sits in the gutter, rule runs the width. */
.index {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: 1.1rem;
    padding-bottom: .7rem;
    margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem);
    border-bottom: 1px solid var(--ink);
}
.index__no {
    font-family: var(--mono);
    font-size: .78rem;
    color: var(--rule-firm);
}
.index__name {
    font-family: var(--display);
    font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
    letter-spacing: -.01em;
}
.index__aside {
    grid-column: 2;
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .08em;
    color: var(--grey);
    margin-top: .2rem;
}

/* --- 07 Opening (type on paper, image below) ------------ */

.open { padding-block: clamp(2.6rem, 5.5vw, 4.75rem) 0; }
.open__eyebrow {
    display: block;
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pine);
    padding-bottom: .9rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--ink);
}
.open h1 { max-width: 17ch; }
.open__lede {
    max-width: 56ch;
    margin-top: 1.4rem;
    font-size: 1.12rem;
    line-height: 1.55;
    color: var(--ink-2);
}
.open .acts { margin-top: 1.9rem; }

.open__plate { margin-top: clamp(2rem, 4.5vw, 3.25rem); }
.open__plate img {
    width: 100%;
    height: clamp(15rem, 40vw, 27rem);
    object-fit: cover;
    filter: saturate(.74) contrast(1.02);
}

/* Data table under the opening — dotted leaders, mono figures. */
.open__data {
    display: grid;
    gap: 0 clamp(1.5rem, 3vw, 3rem);
    margin-top: 0;
    border-bottom: 1px solid var(--ink);
}
.open__data div {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .6rem 0;
    border-top: var(--hair);
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .04em;
}
.open__data dt { text-transform: uppercase; color: var(--grey); white-space: nowrap; }
.open__data dd { margin-left: auto; text-align: right; font-weight: 500; }
.open__data a { text-decoration: none; }

@media (min-width: 700px)  { .open__data { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .open__data { grid-template-columns: repeat(3, 1fr); } }

/* --- 08 Two-column split -------------------------------- */

.duo { display: grid; gap: clamp(1.6rem, 3.5vw, 3rem); }
.duo__side { border-top: 2px solid var(--ink); padding-top: .9rem; }
.duo__side p {
    margin-top: .6rem;
    font-family: var(--mono);
    font-size: .755rem;
    line-height: 1.68;
    color: var(--grey);
}
.duo__main > h2 { margin-bottom: 1.1rem; max-width: 21ch; }
.duo__main > p { max-width: var(--measure); }

@media (min-width: 900px) {
    .duo { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: clamp(2.2rem, 4.5vw, 4rem); }
}

/* --- 09 Card grid --------------------------------------- */

.cards { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--ink); }
.card { display: flex; flex-direction: column; background: var(--paper); padding-bottom: 1.5rem; }
.card__shot { overflow: hidden; }
.card__shot img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    filter: saturate(.74);
    transition: transform .5s ease;
}
.card:hover .card__shot img { transform: scale(1.03); }
.card__body { padding: 1.2rem 1.35rem 0; }
.card__no {
    display: block;
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--rule-firm);
    margin-bottom: .45rem;
}
.card h3 { margin-bottom: .5rem; }
.card p { font-size: .95rem; color: var(--ink-2); }
.card__body .arrow { margin-top: 1.1rem; }
.zone--sunk .card { background: var(--paper-2); }

@media (min-width: 660px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1240px) { .cards { grid-template-columns: repeat(3, 1fr); } }

/* --- 10 Slab (image + text) ----------------------------- */

.slab {
    display: grid;
    gap: clamp(1.3rem, 3vw, 2.6rem);
    padding-block: clamp(2rem, 4vw, 3rem);
    border-top: var(--hair);
}
.slab:first-of-type { border-top: 0; padding-top: 0; }
.slab__shot { position: relative; }
.slab__shot img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    filter: saturate(.74);
}
.slab__stamp {
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--mono);
    font-size: .62rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    padding: .4rem .75rem;
}
.slab__say h3 { margin-bottom: .8rem; }
.slab__say p { color: var(--ink-2); }

@media (min-width: 880px) {
    .slab { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
    .slab--flip .slab__shot { order: 2; }
    .slab--pair { grid-template-columns: repeat(2, 1fr); }
}

/* --- 11 Spec list (dotted leaders) ---------------------- */

.spec { margin-top: 1.4rem; }
.spec li {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .48rem 0;
    border-bottom: 1px dotted var(--rule-firm);
    font-family: var(--mono);
    font-size: .74rem;
}
.spec b { text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; white-space: nowrap; font-weight: 500; }
.spec span { margin-left: auto; text-align: right; color: var(--ink-2); }
.spec a { text-decoration: none; border-bottom: 1px solid var(--rule-firm); }
.spec a:hover { color: var(--pine); border-color: var(--pine); }

/* --- 12 Room tariff rows -------------------------------- */

.keyrows { border-top: 1px solid var(--ink); }
.keyrow {
    display: grid;
    gap: 1rem clamp(1.3rem, 2.6vw, 2.4rem);
    padding-block: clamp(1.5rem, 2.8vw, 2.2rem);
    border-bottom: var(--hair);
}
.keyrow__shot img { width: 100%; height: auto;
    aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.74); }
.keyrow__head { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .6rem; }
.keyrow__no { font-family: var(--mono); font-size: .7rem; color: var(--rule-firm); }
.keyrow__say p { color: var(--ink-2); font-size: .96rem; }
.keyrow__meta { display: flex; flex-wrap: wrap; gap: .3rem .4rem; margin-top: 1rem; }
.keyrow__meta span {
    font-family: var(--mono);
    font-size: .64rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-2);
    border: var(--hair);
    padding: .26rem .5rem;
}
.keyrow__meta span b { color: var(--ink); }
.keyrow__rate { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; }
.keyrow__fig { font-family: var(--display); font-size: clamp(1.5rem, 1.2rem + .9vw, 1.95rem); line-height: 1; }
.keyrow__per {
    font-family: var(--mono);
    font-size: .62rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--grey);
    margin-bottom: .8rem;
}

@media (min-width: 900px) {
    .keyrow { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) minmax(0, 9.5rem); align-items: start; }
    .keyrow__rate { align-items: flex-end; text-align: right; }
}

/* --- 13 Routes ------------------------------------------ */

.routes { display: grid; gap: 0; border-top: 1px solid var(--ink); margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
.routes li {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: .68rem 0;
    border-bottom: var(--hair);
}
.routes b {
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pine);
    min-width: 8.5rem;
}
.routes span { font-size: .95rem; color: var(--ink-2); }

/* --- 14 Helplines --------------------------------------- */

.lines { display: grid; gap: 1px; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.2); }
.lines__cell { display: flex; flex-direction: column; gap: .3rem; background: var(--pine); padding: 1.2rem 1.3rem; }
.lines__who { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: #9DAFA5; }
.lines__no { font-family: var(--display); font-size: clamp(1.3rem, 1.05rem + .8vw, 1.65rem); color: #F3F6F3; text-decoration: none; }
.lines__no:hover { color: #fff; text-decoration: underline; }
.lines__when { font-family: var(--mono); font-size: .66rem; color: #8A9C92; }

@media (min-width: 620px)  { .lines { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .lines { grid-template-columns: repeat(4, 1fr); } }

/* --- 15 Tally ------------------------------------------- */

.tally { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--ink); }
.tally__cell { display: flex; flex-direction: column; gap: .3rem; background: var(--paper); padding: 1.35rem 1.2rem; }
.tally__fig { font-family: var(--display); font-size: clamp(1.8rem, 1.35rem + 1.5vw, 2.7rem); line-height: 1; }
.tally__of { font-family: var(--mono); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--grey); }
.zone--ink .tally { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.2); }
.zone--ink .tally__cell { background: var(--pine); }
.zone--ink .tally__fig { color: #F3F6F3; }
.zone--ink .tally__of { color: #9DAFA5; }

@media (min-width: 560px) { .tally { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .tally { grid-template-columns: repeat(5, 1fr); } }

/* --- 16 Enquiry desk ------------------------------------ */

.desk { display: grid; gap: clamp(1.8rem, 3.5vw, 3rem); }
.desk__aside h2 { margin-bottom: .9rem; }
.desk__aside p { color: var(--ink-2); }

@media (min-width: 1040px) {
    .desk { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: clamp(2.2rem, 4.5vw, 4rem); }
}

.sheet { border-top: 2px solid var(--ink); padding-top: 1.5rem; }
.sheet__grid { display: grid; gap: 1rem 1.2rem; }

@media (min-width: 620px) {
    .sheet__grid { grid-template-columns: repeat(2, 1fr); }
    .cell--wide { grid-column: 1 / -1; }
}

.cell { display: flex; flex-direction: column; gap: .35rem; }
.cell label {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.cell__no { color: var(--rule-firm); font-size: .6rem; }
.cell input, .cell select, .cell textarea {
    width: 100%;
    padding: .7rem .8rem;
    background: var(--paper-3);
    border: var(--hair);
    border-radius: 0;
    font-family: var(--text);
    font-size: 1rem;
    transition: border-color .16s, background .16s;
}
.cell textarea { min-height: 8rem; resize: vertical; }
.cell input:focus, .cell select:focus, .cell textarea:focus {
    outline: none;
    border-color: var(--pine);
    background: #fff;
}
.cell.is-wrong input, .cell.is-wrong select, .cell.is-wrong textarea { border-color: #97423C; background: #F9EFEE; }

.ticks { display: grid; gap: .8rem; margin-top: 1.5rem; }
.tick { display: flex; gap: .65rem; font-size: .89rem; color: var(--ink-2); line-height: 1.52; }
.tick input { margin-top: .25rem; width: 1rem; height: 1rem; accent-color: var(--pine); flex: none; }
.tick.is-wrong { color: #97423C; }

.sheet__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem 1.3rem;
    margin-top: 1.6rem;
    padding-top: 1.3rem;
    border-top: var(--hair);
}
.sheet__foot p { flex: 1 1 16rem; font-family: var(--mono); font-size: .69rem; line-height: 1.65; color: var(--grey); }

.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alarm { border: 1px solid #B98680; background: #F9EFEE; padding: .95rem 1.15rem; margin-bottom: 1.5rem; }
.alarm .tag { color: #97423C; }
.alarm p { margin-top: .3rem; font-size: .92rem; }

.done { display: none; border: 1px solid var(--pine); background: #E7EEE9; padding: 1rem 1.2rem; margin-top: 1.5rem; }
.done.is-up { display: block; }
.done p { margin-top: .3rem; font-size: .92rem; }

/* --- 17 Prose (legal pages) ----------------------------- */

.prose { max-width: var(--measure); }
.prose h2 { margin: 2.4rem 0 .8rem; font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); }
.prose h3 { margin: 1.8rem 0 .5rem; font-size: 1.12rem; }
.prose > h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { margin: .8rem 0 0; display: grid; gap: .5rem; }
.prose ul li { position: relative; padding-left: 1.15rem; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .7em; width: .48rem; height: 1px; background: var(--pine); }
.prose dl { margin-top: .9rem; display: grid; gap: .7rem; }
.prose dt { font-family: var(--mono); font-size: .7rem; letter-spacing: .11em; text-transform: uppercase; }
.prose dd { color: var(--ink-2); }
.prose table { width: 100%; margin-top: 1.1rem; font-size: .92rem; }
.prose th, .prose td { text-align: left; padding: .6rem .55rem .6rem 0; border-bottom: var(--hair); vertical-align: top; }
.prose th { font-family: var(--mono); font-weight: 500; font-size: .66rem; letter-spacing: .11em; text-transform: uppercase; }
.prose td { color: var(--ink-2); }

.stamped {
    font-family: var(--mono);
    font-size: .69rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--grey);
    padding-bottom: 1.1rem;
    margin-bottom: 1.9rem;
    border-bottom: var(--hair);
}

/* --- 18 Notice ------------------------------------------ */

.notice {
    border: 1px solid var(--ink);
    border-left-width: 3px;
    background: var(--paper-3);
    padding: 1.2rem 1.4rem;
    margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
}
.notice h3 { margin-bottom: .5rem; font-size: 1.15rem; }
.notice p { color: var(--ink-2); font-size: .95rem; }
.zone--ink .notice { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.35); }
.zone--ink .notice p { color: #C6D3CB; }

/* --- 19 Footer ------------------------------------------ */

.base { background: var(--ink); color: #A2ABA7; padding-block: clamp(2.6rem, 5vw, 4rem) 1.8rem; font-size: .93rem; }
.base__grid { display: grid; gap: 2rem; }
.base__blurb { margin-top: 1rem; max-width: 38ch; color: #8B958F; font-size: .9rem; }
.base__facts { margin-top: 1.1rem; display: grid; gap: .35rem; }
.base__facts div { display: flex; gap: .7rem; font-family: var(--mono); font-size: .7rem; }
.base__facts dt { color: #6F7A75; text-transform: uppercase; letter-spacing: .1em; min-width: 6.5rem; }
.base__facts dd a { text-decoration: none; color: #D6DED8; }
.base__facts dd a:hover { color: #fff; }

.base .sign__word { color: #F3F6F3; }
.base .sign__sub { color: #8B958F; }

.base__col h4 {
    font-family: var(--mono);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
    padding-bottom: .6rem;
    margin-bottom: .8rem;
    border-bottom: 1px solid rgba(255,255,255,.2);
}
.base__col ul { display: grid; gap: .45rem; }
.base__col a { text-decoration: none; font-size: .93rem; }
.base__col a:hover { color: #fff; }

@media (min-width: 700px)  { .base__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .base__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.6rem; } }

.base__legal {
    margin-top: clamp(2.2rem, 4.5vw, 3.2rem);
    padding-top: 1.6rem;
    border-top: 1px solid rgba(255,255,255,.2);
    font-size: .78rem;
    line-height: 1.72;
    color: #838D88;
}
.base__legal p + p { margin-top: .8rem; }
.base__legal strong { color: #BFC8C3; }
.base__legal .tie { text-decoration-color: rgba(255,255,255,.35); }
.base__legal .tie:hover { color: #fff; text-decoration-color: #fff; }

.base__ends {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .7rem 1.4rem;
    margin-top: 1.8rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255,255,255,.2);
    font-family: var(--mono);
    font-size: .66rem;
    color: #6F7A75;
}
.base__ends ul { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.base__ends a { text-decoration: none; }
.base__ends a:hover { color: #fff; }

/* --- 20 Age gate ---------------------------------------- */

.gate {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(12, 16, 15, .95);
    padding: var(--gut);
    overflow-y: auto;
}
.gate.is-up { display: flex; align-items: center; justify-content: center; }
.gate__card {
    width: 100%;
    max-width: 32rem;
    background: var(--paper);
    border-top: 4px solid var(--pine);
    padding: clamp(1.6rem, 3.5vw, 2.5rem);
}
.gate__stamp {
    display: inline-block;
    font-family: var(--mono);
    font-size: .64rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--pine);
    margin-bottom: 1rem;
}
.gate__card h2 { font-size: clamp(1.35rem, 1.15rem + .9vw, 1.85rem); margin-bottom: .8rem; }
.gate__card p { color: var(--ink-2); font-size: .96rem; }
.gate__acts { display: grid; gap: .6rem; margin-top: 1.5rem; }
.gate__fine {
    margin-top: 1.3rem;
    padding-top: 1rem;
    border-top: var(--hair);
    font-family: var(--mono);
    font-size: .67rem !important;
    line-height: 1.65;
    color: var(--grey) !important;
}
.gate__no { display: none; }
.gate.is-denied .gate__yes { display: none; }
.gate.is-denied .gate__no { display: block; }

@media (min-width: 520px) { .gate__acts { grid-template-columns: repeat(2, 1fr); } }

/* --- 21 Cookie consent ---------------------------------- */

.consent {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 150;
    background: var(--paper-3);
    border-top: 2px solid var(--ink);
    transform: translateY(102%);
    transition: transform .28s ease;
    padding-block: 1.1rem;
    max-height: 88vh;
    overflow-y: auto;
}
.consent.is-up { transform: translateY(0); }
.consent__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem 1.8rem; }
.consent__row p { flex: 1 1 21rem; font-size: .9rem; color: var(--ink-2); }
.consent__acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.consent__acts .key { padding: .62rem 1rem; font-size: .66rem; }
.consent__more { display: none; margin-top: 1.2rem; padding-top: 1.2rem; border-top: var(--hair); }
.consent.is-open .consent__more { display: grid; gap: .8rem; }
.consent__opt { display: flex; gap: .65rem; align-items: flex-start; }
.consent__opt input { margin-top: .28rem; width: 1rem; height: 1rem; accent-color: var(--pine); flex: none; }
.consent__opt > span { display: flex; flex-direction: column; gap: .1rem; }
.consent__opt b { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.consent__opt span span { font-size: .86rem; color: var(--grey); }
.consent__more .key { justify-self: start; }

/* --- 22 Entrance ---------------------------------------- */

/* Only hide for the entrance animation when scripting is actually
   available — otherwise a failed script would leave the page blank. */
.js .rise { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.js .rise.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) { .js .rise { opacity: 1; transform: none; } }