/* =========================================================
   White Heath — Royal Terrace, Dunedin, Otago
   Heritage estate hotel. Editorial layout, single column flow,
   numbered sections, paper and ink with one accent.
   ========================================================= */

/* --- 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; }

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

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

:root {
    --paper:      #F4F1EA;
    --paper-sunk: #EAE5D8;
    --paper-lift: #FBFAF6;
    --ink:        #14120F;
    --ink-soft:   #3B362E;
    --muted:      #6F6858;
    --rule:       #D8D1C0;
    --rule-firm:  #B9B09B;
    --accent:     #6B3350;
    --accent-up:  #8B4B6B;

    --grot: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --book: "Spectral", Georgia, "Times New Roman", serif;

    --gut:    clamp(1.25rem, 4vw, 3.5rem);
    --band:   clamp(4rem, 9vw, 8.5rem);
    --page:   1320px;
    --column: 780px;

    --tick: .28s cubic-bezier(.32, .72, .3, 1);
}

/* --- 02 Ground ------------------------------------------ */

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--book);
    font-size: clamp(1rem, .96rem + .22vw, 1.1rem);
    line-height: 1.72;
    font-weight: 300;
    overflow-x: hidden;
}

body.is-held { overflow: hidden; }

.shell {
    width: 100%;
    max-width: var(--page);
    margin-inline: auto;
    padding-inline: var(--gut);
}

.shell--tight { max-width: calc(var(--column) + var(--gut) * 2); }

h1, h2, h3, h4, .grot {
    font-family: var(--grot);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.025em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 1.4rem + 5.4vw, 5.6rem); }
h2 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.6rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.85rem); }
h4 { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); }

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

a { text-decoration: none; }

.linked {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .22em;
    text-decoration-color: var(--rule-firm);
    transition: text-decoration-color var(--tick), color var(--tick);
}
.linked:hover { color: var(--accent); text-decoration-color: var(--accent); }

::selection { background: var(--accent); color: var(--paper-lift); }

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

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--ink);
    color: var(--paper);
    padding: .8rem 1.2rem;
}
.skip:focus { left: 0; }

.away {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- 03 Small caps label -------------------------------- */

.mark {
    font-family: var(--grot);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
}

.mark--accent { color: var(--accent); }

.numbered {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: .9rem;
    margin-bottom: clamp(1.8rem, 3vw, 3rem);
    border-bottom: 1px solid var(--rule);
}

.numbered__no {
    font-family: var(--grot);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.numbered__name {
    font-family: var(--grot);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--muted);
}

.numbered__aside {
    margin-left: auto;
    font-family: var(--grot);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

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

.press {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--grot);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 1.05rem 1.9rem;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    cursor: pointer;
    transition: background var(--tick), color var(--tick), border-color var(--tick);
}
.press:hover { background: var(--accent); border-color: var(--accent); }

.press--hollow {
    background: transparent;
    color: var(--ink);
}
.press--hollow:hover { background: var(--ink); color: var(--paper); }

.press--pale {
    background: transparent;
    border-color: rgba(244, 241, 234, .55);
    color: var(--paper);
}
.press--pale:hover {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--ink);
}

.press--wide { width: 100%; justify-content: center; }

.arrowed {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--grot);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink);
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--rule-firm);
    transition: color var(--tick), border-color var(--tick);
}
.arrowed::after { content: "\2192"; transition: transform var(--tick); }
.arrowed:hover { color: var(--accent); border-color: var(--accent); }
.arrowed:hover::after { transform: translateX(4px); }

/* --- 05 Top strip and masthead -------------------------- */

.strip {
    background: var(--ink);
    color: rgba(244, 241, 234, .82);
    font-family: var(--grot);
    font-size: .68rem;
    letter-spacing: .1em;
}

.strip__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .4rem 1.4rem;
    padding-block: .6rem;
}

.strip__set { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }

.strip a { transition: color var(--tick); }
.strip a:hover { color: #fff; }

.strip__flag {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--paper);
}
.strip__flag b {
    font-weight: 600;
    color: var(--ink);
    background: var(--paper);
    padding: .1rem .42rem;
    letter-spacing: .08em;
}

.masthead {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(244, 241, 234, .94);
    backdrop-filter: saturate(1.4) blur(9px);
    border-bottom: 1px solid var(--rule);
}

.masthead__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 1.05rem;
}

.crest { display: flex; align-items: center; gap: .75rem; }

.crest__glyph {
    width: 38px; height: 38px;
    flex: none;
    border: 1px solid var(--ink);
    display: grid;
    place-items: center;
    font-family: var(--grot);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.crest__word {
    font-family: var(--grot);
    font-size: 1.16rem;
    font-weight: 600;
    letter-spacing: .015em;
    line-height: 1;
}
.crest__sub {
    display: block;
    font-family: var(--grot);
    font-size: .58rem;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: .34rem;
}

.helm { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }

.helm__list {
    display: flex;
    gap: clamp(1rem, 2vw, 2.1rem);
    font-family: var(--grot);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.helm__list a {
    padding-block: .3rem;
    border-bottom: 1px solid transparent;
    transition: color var(--tick), border-color var(--tick);
}
.helm__list a:hover { color: var(--accent); }
.helm__list a[aria-current="page"] {
    border-bottom-color: var(--accent);
    color: var(--accent);
}

.helm__book { padding: .8rem 1.4rem; }

.hamb {
    display: none;
    width: 42px; height: 38px;
    border: 1px solid var(--rule-firm);
    background: transparent;
    cursor: pointer;
    padding: 0;
    position: relative;
}
.hamb span {
    position: absolute;
    left: 11px;
    width: 18px; height: 1px;
    background: var(--ink);
    transition: transform var(--tick), opacity var(--tick);
}
.hamb span:nth-child(1) { top: 13px; }
.hamb span:nth-child(2) { top: 18px; }
.hamb span:nth-child(3) { top: 23px; }
.hamb[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.hamb[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamb[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.drawer {
    display: none;
    border-top: 1px solid var(--rule);
    background: var(--paper);
}
.drawer.is-open { display: block; }
.drawer ul { padding-block: .6rem 1.4rem; }
.drawer a {
    display: block;
    padding: .95rem 0;
    border-bottom: 1px solid var(--rule);
    font-family: var(--grot);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.drawer .press { margin-top: 1.3rem; }

@media (max-width: 1000px) {
    .helm__list { display: none; }
    .hamb { display: block; }
    .helm__book { display: none; }
}

/* --- 06 Hero -------------------------------------------- */

.opening {
    position: relative;
    background: var(--ink);
}

.opening__plate {
    position: relative;
    height: clamp(460px, 74vh, 780px);
    overflow: hidden;
}
.opening__plate img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .82;
}
.opening__plate::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 18, 15, .55) 0%, rgba(20, 18, 15, .18) 42%, rgba(20, 18, 15, .78) 100%);
}

.opening__say {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding-bottom: clamp(2.2rem, 5vw, 4.4rem);
    color: var(--paper);
}

.opening__say .mark { color: rgba(244, 241, 234, .72); }

.opening h1 { margin-top: 1.1rem; }

.opening__line {
    max-width: 46ch;
    margin-top: 1.4rem;
    font-size: clamp(1.02rem, .98rem + .3vw, 1.24rem);
    color: rgba(244, 241, 234, .88);
}

.opening__acts {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: 2.1rem;
}
.opening .press { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.opening .press:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.opening .press--pale { background: transparent; color: var(--paper); border-color: rgba(244, 241, 234, .55); }
.opening .press--pale:hover { background: var(--paper); color: var(--ink); }

.coords {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 2.2rem;
    padding-block: 1rem;
    border-top: 1px solid rgba(244, 241, 234, .22);
    font-family: var(--grot);
    font-size: .66rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(244, 241, 234, .7);
    background: var(--ink);
}
.coords span b { font-weight: 500; color: var(--paper); }

/* Page heroes (shorter) */
.opening--inner .opening__plate { height: clamp(330px, 48vh, 480px); }

/* --- 07 Bands ------------------------------------------- */

.band { padding-block: var(--band); }
.band--sunk { background: var(--paper-sunk); }
.band--ink { background: var(--ink); color: var(--paper); }
.band--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }

.band--ink .mark { color: rgba(244, 241, 234, .6); }
.band--ink .numbered { border-color: rgba(244, 241, 234, .2); }
.band--ink .numbered__name { color: rgba(244, 241, 234, .6); }
.band--ink .numbered__no { color: var(--accent-up); }

.rule-top { border-top: 1px solid var(--rule); }

/* Editorial split: marginal note + body column */
.split {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: clamp(1.6rem, 4vw, 5rem);
    align-items: start;
}
.split__note { position: sticky; top: 7rem; }
.split__note p {
    font-size: .92rem;
    color: var(--muted);
    margin-top: .9rem;
}
.split__body { max-width: 66ch; }
.split__body p { font-size: clamp(1.02rem, .98rem + .34vw, 1.26rem); }
.split__body h2 + p { margin-top: 1.6rem; }

@media (max-width: 860px) {
    .split { grid-template-columns: 1fr; }
    .split__note { position: static; }
}

.lede {
    font-size: clamp(1.16rem, 1.02rem + .8vw, 1.72rem);
    line-height: 1.5;
    font-weight: 300;
    max-width: 34ch;
}

.pull {
    font-family: var(--grot);
    font-weight: 500;
    font-size: clamp(1.3rem, 1.05rem + 1.3vw, 2.15rem);
    line-height: 1.24;
    letter-spacing: -.018em;
    max-width: 24ch;
    border-left: 2px solid var(--accent);
    padding-left: clamp(1rem, 2vw, 1.8rem);
    margin-block: clamp(2rem, 4vw, 3.2rem);
}

/* --- 08 Card grids -------------------------------------- */

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}

.tile {
    background: var(--paper);
    padding: clamp(1.6rem, 2.6vw, 2.4rem);
    display: flex;
    flex-direction: column;
    gap: .85rem;
    transition: background var(--tick);
}
.tile:hover { background: var(--paper-lift); }
.tile__no {
    font-family: var(--grot);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--accent);
}
.tile p { color: var(--ink-soft); font-size: .98rem; }
.tile .arrowed { margin-top: auto; align-self: flex-start; }

.tile__shot {
    margin: calc(-1 * clamp(1.6rem, 2.6vw, 2.4rem));
    margin-bottom: .4rem;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.tile__shot img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.tile:hover .tile__shot img { transform: scale(1.035); }

/* Alternating feature rows */
.leaf {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: clamp(1.6rem, 4vw, 4rem);
    align-items: center;
}
.leaf + .leaf { margin-top: clamp(3rem, 7vw, 6.5rem); }
.leaf--flip .leaf__shot { order: 2; }

.leaf__shot { position: relative; overflow: hidden; }
.leaf__shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.leaf__shot--tall img { aspect-ratio: 4 / 5; }

.leaf__stamp {
    position: absolute;
    left: 0; bottom: 0;
    background: var(--paper);
    padding: .6rem 1rem;
    font-family: var(--grot);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.leaf__say h3 { margin-bottom: 1rem; }
.leaf__say p { color: var(--ink-soft); }
.leaf__say .arrowed { margin-top: 1.6rem; }

.facts {
    margin-top: 1.5rem;
    border-top: 1px solid var(--rule);
    font-family: var(--grot);
    font-size: .78rem;
    letter-spacing: .04em;
}
.facts li {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .62rem 0;
    border-bottom: 1px solid var(--rule);
}
.facts b { font-weight: 600; }
.facts span { color: var(--muted); text-align: right; }

.band--ink .facts { border-color: rgba(244, 241, 234, .2); }
.band--ink .facts li { border-color: rgba(244, 241, 234, .2); }
.band--ink .facts span { color: rgba(244, 241, 234, .62); }

/* --- 09 Rooms ------------------------------------------- */

.keys { border-top: 1px solid var(--rule-firm); }

.key {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-bottom: 1px solid var(--rule-firm);
    padding-block: clamp(2rem, 4vw, 3.4rem);
    gap: clamp(1.4rem, 3vw, 3rem);
}
@media (min-width: 900px) {
    .key { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr) minmax(0, 13rem); align-items: start; }
}

.key__shot { overflow: hidden; }
.key__shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.key__head { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; }
.key__no {
    font-family: var(--grot);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--accent);
}
.key__say p { margin-top: .9rem; color: var(--ink-soft); }

.key__spec {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.6rem;
    margin-top: 1.2rem;
    font-family: var(--grot);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.key__spec b { font-weight: 600; color: var(--ink); }

.key__price { text-align: left; }
@media (min-width: 900px) { .key__price { text-align: right; } }
.key__rate {
    font-family: var(--grot);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    font-weight: 600;
    letter-spacing: -.02em;
    display: block;
}
.key__per {
    font-family: var(--grot);
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    display: block;
    margin-top: .4rem;
}
.key__price .press { margin-top: 1.2rem; }

/* --- 10 Stat band --------------------------------------- */

.tally {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: 1px;
    background: rgba(244, 241, 234, .2);
    border-block: 1px solid rgba(244, 241, 234, .2);
}
.tally__cell {
    background: var(--ink);
    padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1rem, 2vw, 1.6rem);
    text-align: center;
}
.tally__fig {
    font-family: var(--grot);
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.3rem);
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1;
    display: block;
}
.tally__of {
    display: block;
    margin-top: .8rem;
    font-family: var(--grot);
    font-size: .64rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(244, 241, 234, .62);
}

/* --- 11 Gaming floor listing ---------------------------- */

.floor {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1px;
    background: rgba(244, 241, 234, .18);
    border: 1px solid rgba(244, 241, 234, .18);
}
.floor__cell {
    background: var(--ink);
    padding: clamp(1.5rem, 2.6vw, 2.2rem);
}
.floor__cell h3 { font-size: 1.24rem; margin-bottom: .5rem; }
.floor__cell .mark { display: block; margin-bottom: 1rem; }
.floor__cell p { color: rgba(244, 241, 234, .76); font-size: .96rem; }
.floor__cell ul {
    margin-top: 1rem;
    font-family: var(--grot);
    font-size: .76rem;
    letter-spacing: .05em;
    color: rgba(244, 241, 234, .8);
}
.floor__cell li { padding: .38rem 0; border-bottom: 1px solid rgba(244, 241, 234, .14); }
.floor__cell li:last-child { border-bottom: 0; }

.hours {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin-top: clamp(2rem, 4vw, 3rem);
}
.hours__slot { border-top: 2px solid var(--ink); padding-top: 1rem; }
.hours__slot h4 { margin-bottom: .7rem; }
.hours__slot p { font-size: .95rem; color: var(--ink-soft); }
.band--ink .hours__slot { border-color: var(--accent-up); }
.band--ink .hours__slot p { color: rgba(244, 241, 234, .76); }

/* --- 12 Offers ------------------------------------------ */

.offer {
    border: 1px solid var(--rule-firm);
    background: var(--paper-lift);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 880px) {
    .offer { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
}
.offer + .offer { margin-top: clamp(1.5rem, 3vw, 2.4rem); }
.offer__shot img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.offer__say { padding: clamp(1.6rem, 3vw, 2.6rem); }
.offer__say h3 { margin-block: .7rem 1rem; }
.offer__say p { color: var(--ink-soft); }
.offer__terms {
    margin-top: 1.4rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
    font-size: .86rem;
    color: var(--muted);
}
.offer__from {
    font-family: var(--grot);
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -.01em;
    margin-top: 1.2rem;
    display: block;
}

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

.prose { max-width: 68ch; }
.prose h2 {
    font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem);
    margin-top: clamp(2.6rem, 5vw, 3.6rem);
    padding-top: 1.4rem;
    border-top: 1px solid var(--rule);
}
.prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.prose h3 { font-size: 1.1rem; margin-top: 1.9rem; }
.prose p, .prose ul, .prose ol { margin-top: 1rem; }
.prose ul li, .prose ol li {
    padding-left: 1.4rem;
    position: relative;
    margin-top: .5rem;
}
.prose ul li::before {
    content: "";
    position: absolute;
    left: 0; top: .78em;
    width: .5rem; height: 1px;
    background: var(--accent);
}
.prose ol { counter-reset: pr; }
.prose ol li { counter-increment: pr; }
.prose ol li::before {
    content: counter(pr) ".";
    position: absolute;
    left: 0;
    font-family: var(--grot);
    font-size: .8rem;
    color: var(--accent);
}
.prose dl { margin-top: 1.2rem; }
.prose dt { font-family: var(--grot); font-weight: 600; font-size: .95rem; margin-top: 1.1rem; }
.prose dd { margin-top: .3rem; color: var(--ink-soft); }

.note {
    border: 1px solid var(--rule-firm);
    background: var(--paper-lift);
    padding: clamp(1.2rem, 2.4vw, 1.9rem);
    margin-top: 1.8rem;
}
.note .mark { display: block; margin-bottom: .7rem; }
.note p { margin-top: .4rem; }

.stamp-date {
    font-family: var(--grot);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

/* --- 14 Helpline block ---------------------------------- */

.lines {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    margin-top: 1.6rem;
}
.lines__cell { background: var(--paper); padding: 1.3rem 1.4rem; }
.lines__who {
    font-family: var(--grot);
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    display: block;
}
.lines__no {
    font-family: var(--grot);
    font-size: 1.32rem;
    font-weight: 600;
    letter-spacing: -.01em;
    display: block;
    margin-top: .5rem;
}
.lines__when { display: block; margin-top: .4rem; font-size: .85rem; color: var(--muted); }

.band--ink .lines { background: rgba(244, 241, 234, .2); border-color: rgba(244, 241, 234, .2); }
.band--ink .lines__cell { background: var(--ink); }
.band--ink .lines__who,
.band--ink .lines__when { color: rgba(244, 241, 234, .62); }

/* --- 15 Form -------------------------------------------- */

.desk {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
}
@media (min-width: 960px) {
    .desk { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
}

.desk__aside p { color: var(--ink-soft); margin-top: 1rem; }
.desk__aside .facts { margin-top: 1.8rem; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1.2rem;
}
.slot--wide { grid-column: 1 / -1; }

.slot label {
    display: block;
    font-family: var(--grot);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .5rem;
}
.slot input,
.slot select,
.slot textarea {
    width: 100%;
    background: var(--paper-lift);
    border: 1px solid var(--rule-firm);
    padding: .82rem .9rem;
    font-family: var(--book);
    font-size: 1rem;
    transition: border-color var(--tick), background var(--tick);
}
.slot textarea { min-height: 130px; resize: vertical; }
.slot select { appearance: none; border-radius: 0; cursor: pointer; }
.slot input:focus,
.slot select:focus,
.slot textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: #fff;
}
.slot.is-wrong input,
.slot.is-wrong select,
.slot.is-wrong textarea { border-color: #9B2C2C; background: #FBF1F1; }

.ticks { margin-top: 1.8rem; display: grid; gap: 1rem; }
.tick {
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    gap: .8rem;
    align-items: start;
    font-size: .92rem;
    color: var(--ink-soft);
}
.tick input {
    width: 1.1rem; height: 1.1rem;
    margin-top: .3rem;
    accent-color: var(--accent);
}
.tick.is-wrong { color: #9B2C2C; }
.tick.is-wrong input { outline: 2px solid #9B2C2C; outline-offset: 1px; }

.form-foot {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem;
}
.form-foot p { font-size: .84rem; color: var(--muted); max-width: 34ch; }

/* Honeypot — off screen, never shown, never focusable */
.honey {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

.alarm {
    border: 1px solid #9B2C2C;
    background: #FBF1F1;
    padding: 1.1rem 1.3rem;
    margin-bottom: 1.7rem;
}
.alarm .mark { display: block; color: #9B2C2C; margin-bottom: .35rem; }
.alarm p { font-size: .94rem; color: var(--ink-soft); }

.done {
    display: none;
    margin-top: 1.6rem;
    border: 1px solid var(--accent);
    background: var(--paper-lift);
    padding: 1.2rem 1.4rem;
}
.done.is-up { display: block; }
.done .mark { color: var(--accent); display: block; margin-bottom: .4rem; }

/* --- 16 Directions / contact ---------------------------- */

.reach {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}
.reach__cell { background: var(--paper); padding: clamp(1.4rem, 2.4vw, 2rem); }
.reach__cell .mark { display: block; margin-bottom: .8rem; }
.reach__cell p { font-size: .96rem; color: var(--ink-soft); }
.reach__cell a { font-weight: 400; }

.plan {
    margin-top: clamp(2rem, 4vw, 3rem);
    border: 1px solid var(--rule-firm);
}
.plan iframe { display: block; width: 100%; height: 420px; border: 0; filter: grayscale(1) contrast(1.05); }

.routes { margin-top: 1.6rem; }
.routes li {
    display: grid;
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
    gap: 1rem;
    padding: .8rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: .96rem;
}
.routes b {
    font-family: var(--grot);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    padding-top: .2rem;
}

/* --- 17 Footer ------------------------------------------ */

.foot {
    background: var(--ink);
    color: rgba(244, 241, 234, .74);
    padding-block: clamp(3.4rem, 6vw, 5.5rem) 2rem;
    font-size: .93rem;
}

.foot__top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: clamp(2rem, 4vw, 3.4rem);
    padding-bottom: clamp(2.4rem, 4vw, 3.4rem);
    border-bottom: 1px solid rgba(244, 241, 234, .18);
}

.foot h4 {
    font-size: .7rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(244, 241, 234, .55);
    margin-bottom: 1.1rem;
    font-weight: 600;
}
.foot li { padding: .3rem 0; }
.foot a { transition: color var(--tick); }
.foot a:hover { color: var(--paper); }
.foot .crest__word { color: var(--paper); }
.foot .crest__glyph { border-color: rgba(244, 241, 234, .45); color: var(--paper); }

.foot__blurb {
    margin-top: 1.3rem;
    max-width: 34ch;
    font-size: .92rem;
    color: rgba(244, 241, 234, .66);
}

.foot__legal {
    padding-top: clamp(2rem, 3vw, 2.6rem);
    font-size: .84rem;
    color: rgba(244, 241, 234, .55);
    display: grid;
    gap: 1.2rem;
}
.foot__legal p { max-width: 92ch; }
.foot__legal strong { color: rgba(244, 241, 234, .8); font-weight: 500; }

.foot__ends {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .8rem 2rem;
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(244, 241, 234, .14);
    font-family: var(--grot);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.foot__ends ul { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }

/* --- 18 Age gate ---------------------------------------- */

.gate {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(20, 18, 15, .96);
    padding: var(--gut);
    overflow-y: auto;
    place-items: center;
}
.gate.is-up { display: grid; }

.gate__card {
    width: min(100%, 34rem);
    background: var(--paper);
    border: 1px solid var(--rule-firm);
    padding: clamp(1.8rem, 4vw, 3rem);
    text-align: center;
}
.gate__card .crest { justify-content: center; margin-bottom: 1.6rem; }
.gate__card h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }
.gate__card p { margin-top: 1.1rem; color: var(--ink-soft); font-size: .98rem; }
.gate__acts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem;
    margin-top: 2rem;
}
.gate__fine {
    margin-top: 1.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--rule);
    font-size: .82rem;
    color: var(--muted);
}
.gate__no { display: none; }
.gate.is-denied .gate__yes { display: none; }
.gate.is-denied .gate__no { display: block; }

/* --- 19 Consent bar ------------------------------------- */

.consent {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 200;
    background: var(--ink);
    color: rgba(244, 241, 234, .82);
    border-top: 1px solid rgba(244, 241, 234, .2);
}
.consent.is-up { display: block; }
.consent__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding-block: 1.2rem;
}
.consent p { font-size: .9rem; max-width: 62ch; }
.consent__acts { display: flex; flex-wrap: wrap; gap: .6rem; }
.consent .press { padding: .8rem 1.3rem; font-size: .68rem; }

.consent__more { display: none; padding-bottom: 1.4rem; }
.consent.is-open .consent__more { display: block; }
.consent__opt {
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    gap: .8rem;
    padding: .8rem 0;
    border-top: 1px solid rgba(244, 241, 234, .16);
    font-size: .88rem;
}
.consent__opt input { margin-top: .3rem; accent-color: var(--accent-up); }
.consent__opt b { display: block; font-family: var(--grot); font-size: .8rem; font-weight: 600; }
.consent__opt span { color: rgba(244, 241, 234, .6); }

/* --- 20 Entrance animation ------------------------------ */

.rise {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1);
}
.rise.is-in { opacity: 1; transform: none; }

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