/* ==========================================================================
The 801 — lounge.the801lr.com
Design prototype stylesheet. Plain CSS, custom properties, mobile-first.
No external font, no external stylesheet, no CSS-in-JS. CSP-safe:
style-src 'self' · img-src 'self' data: · script-src 'self'.
TOKENS: a shared token session runs in parallel at design/00-system/.
Everything this file assumes lives in the ONE :root block below. If the
shared names differ, only that block changes — nothing below it refers to
a literal colour, size or font.
========================================================================== */
:root {
/* --- colour ------------------------------------------------------------ */
--color-ink: #1a1613; /* deepest brown-black: the dark shell */
--color-ink-raised: #241f1a; /* raised surface on dark */
--color-ink-line: #3b322a; /* hairline on dark */
/* DARK-DOMINANT. The announcement posters carry no light surface at all,
and the cream band was the only reason the accent had to degrade to a
bronze (#7a530f) to stay legible. Removing it lets the accent carry every
role at full strength — copper cu300 since 2026-10-02, the gold before
that. "paper" keeps its name — it is still the alternating band, it is
simply no longer light. */
--color-paper: #241f1a; /* the band — text 14.41:1 */
--color-paper-sunken: #2b2520; /* inset panels — text 13.35:1 */
--color-field: #1a1613; /* input + choice wells — text 15.87:1 */
--color-line: #3b322a; /* decorative hairline on dark */
--color-line-strong: #8d8070; /* control borders — 4.24 band, 3.93 sunken */
--color-placeholder: #a89c90; /* 6.70:1 in a field. Was a hardcoded
#7a6e64, which measures 3.63 here. */
--color-text: #f6f0e7; /* 14.41:1 on the band */
--color-text-muted: #c2b6a6; /* 8.19:1 on the band */
--color-on-dark: #f6f0e7; /* 15.87:1 on ink (file said 17.3) */
--color-on-dark-muted: #c2b6a6; /* 9.02:1 on ink (file said 9.09) */
/* Copper, not gold, from 2026-10-02. This retires the gold that was sampled
from the client's announcement posters (n=28,866 masked pixels, median
hue 38.4°, median saturation 37.5%) and adopts the property-wide
oxblood/copper pair instead, so the lounge, the hall and the apex read as
one address rather than three tenants. The lounge is the DARK-surface
skin, so it takes the light end of the copper ramp: cu300 at rest, cu200
on hover and focus. Every figure below is computed against the surface it
names, with the WCAG 2.x relative-luminance formula.
THE HEX LITERALS ARE DELIBERATE. This stylesheet is standalone — every
page in 02-lounge/ links `assets/styles.css` and nothing else, so no
--c-* primitive from design/00-system/tokens.css is in scope at runtime.
`var(--c-cu300)` would resolve to NOTHING in the browser and still pass
check.js, which concatenates the whole design/ tree before testing that
every var() resolves. Mirror the primitives by value, name them in the
comment, and never reference them from here. */
--color-accent: #efb46f; /* copper cu300 — fills and text ON DARK only.
8.89 band · 8.23 sunken · 9.78 field */
--color-accent-soft: #f6d3a8; /* copper cu200 — hover, focus on dark.
11.51 band · 10.66 sunken · 12.67 field */
--color-accent-ink: #efb46f; /* no light surface remains, so this is
simply the copper — 8.89 on the band.
Kept as a name because components
reference it. */
--color-accent-wash: #2f2721; /* copper-tinted dark panel — copper 7.97:1 */
--color-on-accent: #1a1613; /* text ON the copper fill - 9.78:1.
NOT --color-ink: that token is also a
SURFACE and print remaps it to white,
which printed button labels at 1.00:1 */
/* DEFECT 1, FIXED 2026-10-02 — the invisible structural rule.
--color-rule was #1a1613, and it has exactly two uses in this file: the
2px border of .pay, the box holding the auto-renewal disclosure and its
affirmative acknowledgement, and the .submit-block top rule, where the
renewal terms are restated at the point of assent. Both sit on #241f1a
on BOTH sides — .pay fills with --color-paper, and apply.html's .section
carries no band class, so body's --color-paper is behind it too. So the
border measured 1.10:1: it painted, and nobody could see it.
PRE-EXISTING — NOT WIDENED BY THE PALETTE. Neither colour in that pair
is an accent, so #1a1613 on #241f1a measured 1.10:1 under the retired
gold exactly as it does under the copper. (Defect 2, in the @media print
block at the foot of this file, is the opposite case: the palette did
widen that one, from 2.44 to 1.72.)
NOT OVERCLAIMED AS A CONFORMANCE FAILURE. A purely decorative border is
exempt from SC 1.4.11, and nothing here has to be seen for the form to
be operated. The argument is narrower and does not need the SC: a rule
this file itself calls load-bearing for a disclosure that auto-renewal
statutes want CONSPICUOUS cannot be one that is invisible.
WHY cu300, AND NOT EITHER OTHER MEASURED CANDIDATE.
--color-line-strong 4.24:1 — clears 3:1, but it is the ORDINARY
control border (inputs, .consents, .agree, .card-mount,
.turnstile-slot), so .pay would read as more chrome. Conspicuous is
a relative property; this makes the box indistinguishable from the
fields around it. (4.24 is the figure this file already publishes
for line-strong on the band, and it is the one that reproduces;
a 4.38 asserted for this pair elsewhere is not reachable on any
surface this file holds.)
--color-text 14.41:1 — the loudest edge on the page, louder
than the .renewal notice INSIDE it (--color-notice-ink, 7.99:1).
That inverts the hierarchy and turns the whole application form
into an alert, and a 2px rule in the body-text cream reads as a
text element rather than as structure.
--color-accent 8.89:1 — chosen. Unmistakable, and already this
file's structural-emphasis border (.panel--accent, .amenity,
.choice:has(input:checked)), so it introduces no new vocabulary.
It also leaves the alarm register to the notice salmon: copper
says "this block matters", salmon says "read this specifically".
Hue carries the hierarchy, not the ratio alone.
Every figure above was computed with the WCAG 2.x relative-luminance
formula against the surface named, and the method was checked by
reproducing the ratios this file already publishes for the colours the
fix does not touch. */
--color-rule: #efb46f; /* copper cu300 — 8.89:1 on the band.
Still NOT --color-ink: that token is
a SURFACE and print remaps it to
white. Print remaps this name on its
own, to #221d18 — 16.71:1 on paper. */
--color-notice-ink: #ff9a90; /* 7.99 on band · 7.73 on notice-wash */
--color-notice-wash: #2e1f1c; /* body text on it 13.95:1 */
--color-good-ink: #7ee2a8; /* 10.37 on band */
--color-good-wash: #202e25; /* good text on it 9.01:1 */
/* Both focus tokens now target a dark surface; the -light/-dark pair is
kept so no component has to change. */
--color-focus-light: var(--color-accent-soft);
--color-focus-dark: var(--color-accent-soft);
/* --- type --------------------------------------------------------------
The production build self-hosts a woff2 display serif in public/ and
swaps --font-display. Nothing here loads a font over the network. */
--font-display: "Iowan Old Style", "Palatino Linotype", Palatino,
"Book Antiqua", Georgia, "Times New Roman", serif;
--font-body: system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.0625rem;
--text-xl: 1.25rem;
--display-s: clamp(1.5rem, 1.1rem + 2.0vw, 2.15rem);
--display-m: clamp(2rem, 1.4rem + 3.0vw, 3.1rem);
--display-l: clamp(2.6rem, 1.6rem + 5.0vw, 4.6rem);
--tracking-caps: 0.16em;
--leading-tight: 1.12;
--leading-body: 1.62;
/* --- space, shape ------------------------------------------------------ */
--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
--space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem;
--space-7: 2.75rem; --space-8: 4rem; --space-9: 6rem;
--radius-sm: 2px;
--radius-md: 3px;
--measure: 34rem; /* single-column reading + form width */
--page-max: 68rem;
--gutter: 1.25rem;
--tap: 2.75rem; /* 44px minimum target */
}
/* ==========================================================================
Base
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
/* The page is dark throughout, so the UA must be told — otherwise the native
select arrow and the date-picker glyph render black-on-dark and any popup
opens white. */
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
/* WCAG 2.2 SC 2.4.11 Focus Not Obscured (Minimum), Level AA.
.site-header is position:sticky, so a control reached by shift-tab from
below is scrolled flush to the top of the viewport and lands UNDERNEATH it.
Measured before the fix: "member area" was 21px tall and 21px covered —
fully hidden. The header is content-sized and wraps its nav, so it is
117px at 1024px but 165px at 600px and below; 11rem (176px) clears the
taller case with slack. Scroll padding only shifts scroll-into-view
positioning, so the surplus at wide viewports costs nothing.
Remove this ONLY if .site-header stops being sticky. */
@media (min-width: 768px) {
html { scroll-padding-top: 11rem; }
}
body {
margin: 0;
background: var(--color-paper);
color: var(--color-text);
font: var(--text-base)/var(--leading-body) var(--font-body);
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 {
margin: 0 0 var(--space-4);
font-family: var(--font-display);
font-weight: 400;
line-height: var(--leading-tight);
letter-spacing: -0.015em;
}
h1 { font-size: var(--display-m); }
h2 { font-size: var(--display-s); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); letter-spacing: 0; }
p, ul, ol, dl, table { margin: 0 0 var(--space-4); }
li { margin-bottom: var(--space-2); }
a { color: var(--color-accent-ink); text-underline-offset: 0.22em; }
a:hover { color: var(--color-text); }
strong, b { font-weight: 650; }
hr {
height: 0; margin: var(--space-7) 0;
border: 0; border-top: 1px solid var(--color-line);
}
:focus-visible {
outline: 3px solid var(--color-focus-light);
outline-offset: 2px;
}
.on-dark :focus-visible, .gate :focus-visible, .site-header :focus-visible,
.site-footer :focus-visible {
outline-color: var(--color-focus-dark);
}
/* THE SAME CASCADE TRAP notice.css DOCUMENTS FOR `color`, ONE PROPERTY OVER.
FIXED 2026-10-02, measured in Chrome on the built page.
build-site.js injects a LIGHT panel — p.form-notice, background #f4ece0 from
the generated notice.css — into the dark age gate, and the rule directly
above assumes everything inside .gate sits on a dark surface. It does not:
the focus ring on the notice's phone link measured #f6d3a8 on #f4ece0 =
1.21:1. That is the identical ratio, the identical cause and the identical
control as the text-colour bug notice.css fixed with p.form-notice
a:not(.btn); that fix set `color` and left `outline-color` on the dark token,
so the link reads at 10.70:1 and its focus ring was still invisible. Every
form in this build is disabled, so that number is the only working contact
route on the first page of the lounge, and a keyboard user could not see
where focus was.
WHY HERE AND NOT IN notice.css. notice.css is generated by build-site.js and
is not this agent's to edit. It is also the better long-term home — it owns
the panel and knows its background, and it loads over three design systems —
but .gate :focus-visible is THIS file's rule and it is the one that is too
broad, so narrowing it here is correct rather than merely expedient. It also
covers any future lounge page that gets a notice injected, not just the gate.
SPECIFICITY, NOT LOAD ORDER. p.form-notice :focus-visible is (0,2,1) and
beats .gate :focus-visible (0,2,0) OUTRIGHT. notice.css happens to be
injected last, and — as that file's own comment puts it — "happens to" is
not a contrast guarantee.
#5c2018 is the colour notice.css already gives this link's text: 10.70:1 on
#f4ece0, reproduced here rather than taken on trust. A literal, because the
panel's #f4ece0 is a notice.css literal and no token in this file tracks it. */
p.form-notice :focus-visible { outline-color: #5c2018; }
/* 2.4.11 Focus Not Obscured — anchored targets clear the sticky header */
[id] { scroll-margin-top: 5rem; }
.skip-link {
position: absolute; left: var(--space-4); top: -6rem; z-index: 60;
padding: var(--space-3) var(--space-4);
background: var(--color-paper); color: var(--color-text);
border: 2px solid var(--color-accent-ink);
}
.skip-link:focus { top: var(--space-3); }
.visually-hidden {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
/* ==========================================================================
Layout
========================================================================== */
.wrap {
width: 100%; max-width: var(--page-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
.wrap--narrow { max-width: calc(var(--measure) + (var(--gutter) * 2)); }
.section { padding-block: var(--space-7); }
@media (min-width: 48em) { .section { padding-block: var(--space-8); } }
.band-dark {
background: var(--color-ink);
color: var(--color-on-dark);
}
.band-dark h1, .band-dark h2, .band-dark h3 { color: var(--color-on-dark); }
/* :not(.btn) matters — without it this rule outranks .btn and repaints a
solid copper button's label copper-on-copper: cu200 on a cu300 fill is
1.30:1. (The 1.65 this comment used to assert was not reproducible against
any accent pair the file has held — gd300 on gd400 computes to 1.52.) */
.band-dark a:not(.btn) { color: var(--color-accent-soft); }
.band-sunken { background: var(--color-paper-sunken); }
.lede {
font-family: var(--font-display);
font-size: var(--text-xl);
line-height: 1.45;
max-width: var(--measure);
}
.eyebrow {
margin-bottom: var(--space-3);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--color-accent-ink);
}
.band-dark .eyebrow, .gate .eyebrow { color: var(--color-accent); }
.muted { color: var(--color-text-muted); }
.band-dark .muted { color: var(--color-on-dark-muted); }
.small { font-size: var(--text-sm); }
.ornament {
width: 8.5rem; height: auto; margin: var(--space-5) 0;
opacity: 0.95;
}
.ornament--center { margin-inline: auto; }
/* ==========================================================================
Brand lockup
========================================================================== */
.lockup { display: block; text-align: center; text-decoration: none; color: inherit; }
.lockup__name {
display: block;
font-family: var(--font-display);
font-size: var(--display-l);
line-height: 0.95;
letter-spacing: 0.02em;
}
.lockup__the {
display: block;
font-size: var(--text-xs);
letter-spacing: 0.55em;
text-indent: 0.55em;
text-transform: uppercase;
color: var(--color-accent);
}
.lockup__descriptor {
display: block;
margin-top: var(--space-3);
font-size: var(--text-xs);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--color-on-dark-muted);
}
/* ==========================================================================
Header / footer
========================================================================== */
/* Sticky ONLY from 768px, where the nav fits one row and the header measures
116.7px. Below that it wraps — 164.7px at 414px, 212.7px at 320px — and a
sticky header there both re-introduces SC 2.4.11 (two links on member.html
were fully hidden at 320px) and eats 27% of the viewport. Static below is
the fix; see the scroll-padding note at the top of this file. */
@media (min-width: 768px) {
.site-header { position: sticky; top: 0; z-index: 40; }
}
.site-header {
background: var(--color-ink);
color: var(--color-on-dark);
border-bottom: 1px solid var(--color-ink-line);
}
.site-header__bar {
display: flex; align-items: center; gap: var(--space-4);
min-height: 3.75rem;
}
.site-header__brand {
margin-right: auto;
font-family: var(--font-display);
font-size: var(--text-xl);
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
color: var(--color-on-dark);
}
.site-header__brand span { color: var(--color-accent); }
.site-nav ul {
display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4);
margin: 0 0 var(--space-3); padding: 0; list-style: none;
}
.site-nav li { margin: 0; }
.site-nav a {
display: flex; align-items: center; min-height: var(--tap);
padding-block: var(--space-1);
color: var(--color-on-dark-muted);
font-size: var(--text-xs);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
text-decoration: none;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-accent-soft); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.4em; }
@media (min-width: 56em) {
.site-header__bar { min-height: 4.5rem; }
.site-nav ul { margin-bottom: 0; }
}
.site-footer {
background: var(--color-ink);
color: var(--color-on-dark-muted);
padding-block: var(--space-7);
font-size: var(--text-sm);
}
.site-footer h2 { font-size: var(--text-lg); color: var(--color-on-dark); }
.site-footer a:not(.btn) { color: var(--color-accent-soft); }
.site-footer__grid { display: grid; gap: var(--space-6); }
@media (min-width: 48em) {
.site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--space-2); }
.site-footer__fine {
margin-top: var(--space-6); padding-top: var(--space-4);
border-top: 1px solid var(--color-ink-line);
font-size: var(--text-xs);
}
/* ==========================================================================
Buttons
========================================================================== */
.btn {
display: inline-flex; align-items: center; justify-content: center;
min-height: var(--tap); min-width: var(--tap);
padding: var(--space-3) var(--space-6);
border: 1px solid var(--color-accent);
border-radius: var(--radius-sm);
background: var(--color-accent);
color: var(--color-on-accent);
font: 700 var(--text-sm)/1.2 var(--font-body);
letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
cursor: pointer;
}
.btn:hover { background: var(--color-accent-soft); border-color: var(--color-accent-soft); color: var(--color-on-accent); }
.btn--block { display: flex; width: 100%; }
.btn--quiet {
background: transparent; color: var(--color-text);
border-color: var(--color-line-strong);
}
.btn--quiet:hover { background: var(--color-paper-sunken); color: var(--color-text); }
/* .site-header belongs in this list: it is a dark surface but not .band-dark,
and without it a quiet button's dark label lands on dark ink at 1.08:1. */
.band-dark .btn--quiet, .gate .btn--quiet, .site-header .btn--quiet,
.site-footer .btn--quiet { color: var(--color-on-dark); border-color: var(--color-on-dark-muted); }
.band-dark .btn--quiet:hover, .gate .btn--quiet:hover, .site-header .btn--quiet:hover,
.site-footer .btn--quiet:hover { background: var(--color-ink-raised); color: var(--color-on-dark); }
.btn--lg { padding-block: var(--space-4); font-size: var(--text-base); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
/* ==========================================================================
Cards, panels, lists
========================================================================== */
.panel {
padding: var(--space-5);
background: var(--color-paper);
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
}
.panel--sunken { background: var(--color-paper-sunken); border-color: var(--color-line); }
.panel--accent {
background: var(--color-accent-wash);
border: 1px solid var(--color-accent-ink);
border-left-width: 5px;
}
.panel > :last-child { margin-bottom: 0; }
.stack > * + * { margin-top: var(--space-5); }
.grid { display: grid; gap: var(--space-5); }
@media (min-width: 40em) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56em) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.amenity { border-top: 2px solid var(--color-accent-ink); padding-top: var(--space-4); }
.amenity h3 {
font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700;
letter-spacing: var(--tracking-caps); text-transform: uppercase;
margin-bottom: var(--space-2);
}
.amenity p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.rule-list { list-style: none; margin: 0; padding: 0; counter-reset: rule; }
.rule-list > li {
counter-increment: rule;
padding: var(--space-4) 0 var(--space-4) 3rem;
border-bottom: 1px solid var(--color-line);
position: relative;
}
.rule-list > li::before {
content: counter(rule, decimal-leading-zero);
position: absolute; left: 0; top: var(--space-4);
font-family: var(--font-display); font-size: var(--text-lg);
color: var(--color-accent-ink);
}
.rule-list h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.rule-list p:last-child { margin-bottom: 0; }
/* The one number the lounge quotes. */
.dues { display: flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-display); }
.dues__amount { font-size: var(--display-m); line-height: 1; color: var(--color-accent-ink); }
.dues__unit { font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-muted); }
/* ==========================================================================
Tables
========================================================================== */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
caption {
text-align: left; padding-bottom: var(--space-3);
font-weight: 700; font-size: var(--text-sm);
}
th, td {
padding: var(--space-3);
text-align: left; vertical-align: top;
border-bottom: 1px solid var(--color-line);
}
thead th {
border-bottom: 2px solid var(--color-line-strong);
font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase;
}
tbody th { font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* ==========================================================================
Forms — single column, always
========================================================================== */
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { display: block; width: 100%; padding: 0; }
.form { max-width: var(--measure); }
.form fieldset { margin-bottom: var(--space-7); }
.form legend {
margin-bottom: var(--space-2);
font-family: var(--font-display); font-size: var(--display-s);
}
/* a legend that is just a field label, not a section heading */
.legend--plain {
margin-bottom: var(--space-3);
font-family: var(--font-body); font-size: var(--text-base); font-weight: 650;
}
.form__step {
display: block;
font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700;
letter-spacing: var(--tracking-caps); text-transform: uppercase;
color: var(--color-accent-ink);
margin-bottom: var(--space-2);
}
.form__hint { margin-bottom: var(--space-5); color: var(--color-text-muted); font-size: var(--text-sm); }
.field { margin-bottom: var(--space-5); }
.field > label, .field__label {
display: block; margin-bottom: var(--space-2); font-weight: 650;
}
.field__help {
margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted);
}
.req { color: var(--color-notice-ink); font-weight: 700; }
.opt { color: var(--color-text-muted); font-weight: 400; font-size: var(--text-sm); }
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="password"], textarea, select {
display: block; width: 100%;
min-height: var(--tap);
padding: var(--space-3);
font: var(--text-base)/1.4 var(--font-body);
color: var(--color-text);
background: var(--color-field);
border: 1px solid var(--color-line-strong);
border-radius: var(--radius-sm);
}
textarea { min-height: 6rem; resize: vertical; }
input::placeholder { color: var(--color-placeholder); }
/* date of birth — three parts, never a single date picker */
.dob { display: flex; gap: var(--space-3); }
.dob > div { flex: 0 0 auto; }
.dob label {
display: block; margin-bottom: var(--space-2);
font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase;
font-weight: 700;
}
.dob input { width: 4.25rem; text-align: center; font-variant-numeric: tabular-nums; }
.dob input.dob__year { width: 6rem; }
/* choice rows: radio and checkbox share one control style */
.choice-set { display: grid; gap: var(--space-3); }
.choice {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-3);
align-items: start;
padding: var(--space-4);
border: 1px solid var(--color-line-strong);
border-radius: var(--radius-md);
background: var(--color-field);
cursor: pointer;
}
.choice:hover { background: var(--color-paper-sunken); }
.choice__title { display: block; font-weight: 650; }
.choice__meta { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
input[type="checkbox"], input[type="radio"] {
appearance: none; -webkit-appearance: none;
flex: 0 0 auto;
width: 1.5rem; height: 1.5rem; margin: 0.1rem 0 0;
border: 2px solid var(--color-line-strong);
background: var(--color-field);
cursor: pointer;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"] { border-radius: var(--radius-sm); }
input[type="checkbox"]:checked {
background: var(--color-accent-ink);
border-color: var(--color-accent-ink);
background-image: url('data:image/svg+xml;utf8,');
background-size: 1rem; background-position: center; background-repeat: no-repeat;
}
input[type="radio"]:checked {
border-color: var(--color-accent-ink);
background-image: radial-gradient(circle at 50% 50%, var(--color-accent-ink) 0 0.34rem, var(--color-field) 0.35rem 100%);
}
.choice:has(input:checked) { border-color: var(--color-accent-ink); box-shadow: inset 0 0 0 1px var(--color-accent-ink); }
/* ==========================================================================
Payment block — renewal disclosure + the separate affirmative
acknowledgement. These two rules carry the whole auto-renewal position.
========================================================================== */
.pay {
margin-bottom: var(--space-5);
border: 2px solid var(--color-rule);
border-radius: var(--radius-md);
background: var(--color-paper);
}
.pay__head {
padding: var(--space-4) var(--space-5);
background: var(--color-ink); color: var(--color-on-dark);
}
.pay__head h3 { margin: 0; color: var(--color-on-dark); }
.pay__head p { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-on-dark-muted); }
.pay__body { padding: var(--space-5); }
.pay__body > :last-child { margin-bottom: 0; }
.card-mount {
padding: var(--space-5) var(--space-4);
border: 1px dashed var(--color-line-strong);
border-radius: var(--radius-sm);
background: var(--color-paper-sunken);
text-align: center; font-size: var(--text-sm); color: var(--color-text-muted);
}
/* the conspicuous renewal disclosure — sits between the card and the tick */
.renewal {
margin-top: var(--space-5);
padding: var(--space-5);
background: var(--color-notice-wash);
border: 2px solid var(--color-notice-ink);
border-radius: var(--radius-md);
}
.renewal h4 {
margin-bottom: var(--space-3);
font-family: var(--font-body); font-size: var(--text-sm); font-weight: 800;
letter-spacing: var(--tracking-caps); text-transform: uppercase;
color: var(--color-notice-ink);
}
.renewal ul { margin: 0; padding-left: 1.2rem; }
.renewal li { font-size: var(--text-lg); }
.renewal li:last-child { margin-bottom: 0; }
/* the separate affirmative acknowledgement — deliberately unlike a consent */
.ack {
display: grid; grid-template-columns: auto 1fr; gap: var(--space-4);
align-items: start;
margin-top: var(--space-5);
padding: var(--space-5);
background: var(--color-ink); color: var(--color-on-dark);
border-radius: var(--radius-md);
cursor: pointer;
}
.ack input[type="checkbox"] {
width: 1.85rem; height: 1.85rem;
border-color: var(--color-accent-soft);
background: var(--color-ink);
}
.ack input[type="checkbox"]:checked {
background-color: var(--color-accent);
border-color: var(--color-accent);
background-image: url('data:image/svg+xml;utf8,');
background-size: 1.2rem;
}
.ack__label { display: block; font-size: var(--text-lg); }
.ack__label b { color: var(--color-accent-soft); }
.ack__tag {
display: inline-block; margin-bottom: var(--space-2);
padding: 0.15rem var(--space-3);
background: var(--color-accent); color: var(--color-on-accent);
font-size: var(--text-xs); font-weight: 800;
letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.ack a { color: var(--color-accent-soft); }
/* term-dependent amounts inside the acknowledgement, swapped with CSS only.
No :has() support -> every variant shows. Over-disclosure, never under. */
.v { display: none; }
form:has(#term-month:checked) .v--month { display: inline; }
form:has(#term-6:checked) .v--6mo { display: inline; }
form:has(#term-12:checked) .v--12mo { display: inline; }
@supports not selector(:has(*)) { .v { display: inline; } }
/* ==========================================================================
Consent block — optional, unbundled, visibly lighter than the ack
========================================================================== */
.consents { border: 1px solid var(--color-line-strong); border-radius: var(--radius-md); }
.consents__head { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-line); }
.consents__head h3 { margin-bottom: var(--space-2); }
.consents__head p { margin: 0; font-size: var(--text-sm); }
.consent {
display: grid; grid-template-columns: auto 1fr; gap: var(--space-3);
align-items: start;
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-line);
cursor: pointer;
}
.consent:last-child { border-bottom: 0; }
.consent:hover { background: var(--color-paper-sunken); }
.consent__title { display: block; font-weight: 650; }
.consent__tag {
display: inline-block; margin-left: var(--space-2);
padding: 0 var(--space-2);
border: 1px solid var(--color-line-strong); border-radius: 999px;
font-size: var(--text-xs); font-weight: 400; color: var(--color-text-muted);
text-transform: uppercase; letter-spacing: 0.08em;
}
.consent__body { display: block; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.consent__dark {
display: block; margin-top: var(--space-2);
font-size: var(--text-xs); color: var(--color-text-muted); font-style: italic;
}
/* agreement — required, in its own section, never styled like a consent */
.agree {
display: grid; grid-template-columns: auto 1fr; gap: var(--space-3);
align-items: start;
padding: var(--space-5);
border: 2px solid var(--color-line-strong); border-radius: var(--radius-md);
background: var(--color-paper-sunken);
cursor: pointer;
}
/* submit block — the renewal terms restated where the assent happens */
.submit-block {
margin-top: var(--space-7); padding-top: var(--space-5);
border-top: 2px solid var(--color-rule);
}
.submit-summary {
margin-bottom: var(--space-4);
font-size: var(--text-lg);
}
.turnstile-slot {
margin: var(--space-5) 0;
padding: var(--space-4);
border: 1px dashed var(--color-line-strong);
background: var(--color-paper-sunken);
font-size: var(--text-sm); color: var(--color-text-muted); text-align: center;
}
/* progressive disclosure — help only. Material terms are never in here. */
details {
margin-bottom: var(--space-4);
border-top: 1px solid var(--color-line);
border-bottom: 1px solid var(--color-line);
}
details summary {
display: flex; align-items: center; min-height: var(--tap);
padding: var(--space-2) 0;
font-weight: 650; font-size: var(--text-sm);
color: var(--color-accent-ink); cursor: pointer;
}
details[open] summary { margin-bottom: var(--space-2); }
details .details__body { padding-bottom: var(--space-3); font-size: var(--text-sm); }
details .details__body > :last-child { margin-bottom: 0; }
/* ==========================================================================
Age gate — the first impression, full brand, no page furniture
========================================================================== */
.gate {
min-height: 100vh; min-height: 100svh;
display: flex; flex-direction: column;
background-color: var(--color-ink);
background-image:
/* copper cu300 239,180,111 — the rgba form of --color-accent, which cannot
be a var() here because these are colour stops inside a shorthand that
also carries lengths. It has been left behind by two palette changes
already (copper 200,129,58 then gold 193,163,112), so it is the first
thing to check when the accent moves again.
Decorative glow only, but it darkens what sits above it, so the figures
below are composited rather than taken against the linear-gradient
stops alone. Worst case is the 20% lobe under the 5% card wash
(#544333): copper 5.13, copper-soft 6.64, body text 8.32 — all clear
4.5. Bare stops for reference: copper 9.17 on #221c17, 10.30 on
#14100d. */
radial-gradient(60rem 38rem at 78% 8%, rgba(239,180,111,0.20), transparent 62%),
radial-gradient(44rem 30rem at 8% 96%, rgba(239,180,111,0.10), transparent 60%),
linear-gradient(180deg, #221c17 0%, #14100d 100%);
color: var(--color-on-dark);
}
.gate__inner {
flex: 1 0 auto;
display: flex; flex-direction: column; justify-content: center;
width: 100%; max-width: 34rem;
margin-inline: auto;
padding: var(--space-7) var(--gutter);
text-align: center;
}
.gate__card {
margin-top: var(--space-6);
padding: var(--space-6) var(--space-5);
background: rgba(246,240,231,0.05);
border: 1px solid var(--color-ink-line);
border-radius: var(--radius-md);
text-align: left;
}
.gate__card h1 { font-size: var(--display-s); text-align: center; }
.gate .dob { justify-content: center; }
.gate .dob label { color: var(--color-on-dark-muted); }
.gate .dob input {
background: var(--color-ink-raised);
border-color: var(--color-on-dark-muted);
color: var(--color-on-dark);
font-size: var(--text-xl);
min-height: 3.25rem;
}
.gate__note {
margin-top: var(--space-5); margin-bottom: 0;
font-size: var(--text-sm); color: var(--color-on-dark-muted);
}
.gate__foot {
flex: 0 0 auto;
padding: var(--space-5) var(--gutter);
text-align: center;
font-size: var(--text-xs);
color: var(--color-on-dark-muted);
border-top: 1px solid var(--color-ink-line);
}
/* Every link on the gate, not just the footer's. The global `a` colour is now
cu300, which does clear on the gate (9.17 on the top stop, 5.13 in the worst
composited case under the 20% glow and the card wash), so this rule is no
longer load-bearing for contrast — it is kept because focus and hover on the
gate should read as the same -soft step they do everywhere else, and because
a future accent that is dark again would re-create the original failure.
The 2.65:1 this comment used to cite belonged to a light-surface accent the
file no longer holds. */
.gate a:not(.btn) { color: var(--color-accent-soft); }
/* The attribution is a line of its own here rather than part of a sentence, so it
drops the copper and takes the fine print's own --color-on-dark-muted, 9.02:1
on --color-ink. Ours has to read quieter than the client's legal line above it.
Both `.site-footer a:not(.btn)` and `.gate a:not(.btn)` match at this same
specificity, so this block sits after the later of the two.
--tap is the 44px floor AGENTS.md makes contractual here, and it belongs on the
anchor rather than on the paragraph, because the anchor is what is tapped. */
.site-footer a.powered,
.gate__foot a.powered {
display: inline-flex;
align-items: center;
min-height: var(--tap);
color: var(--color-on-dark-muted);
text-decoration: none;
}
.site-footer a.powered:hover, .site-footer a.powered:focus-visible,
.gate__foot a.powered:hover, .gate__foot a.powered:focus-visible { text-decoration: underline; }
/* The wash is the rgba form of --color-accent-soft (copper cu200
246,211,168) at 12%, so it tracks the accent; it cannot be a var() because
a custom property cannot supply the alpha of a colour it does not carry.
Composited over the gate's own gradient stops it lands on #3b3228 (top) and
#2f2720 (bottom): body text 11.08 and 12.95, and the 2px cu200 border
measures 8.85 and 10.34 against its own fill, well past the 3:1 SC 1.4.11
wants for the boundary of the error block. */
.gate-error {
margin-bottom: var(--space-5);
padding: var(--space-4);
border: 2px solid var(--color-accent-soft);
border-radius: var(--radius-md);
background: rgba(246,211,168,0.12);
color: var(--color-on-dark);
font-size: var(--text-sm);
}
.gate-error > :last-child { margin-bottom: 0; }
/* ==========================================================================
Member area
========================================================================== */
.member-head { padding-block: var(--space-6); }
.code-panel {
padding: var(--space-5);
background: var(--color-ink); color: var(--color-on-dark);
border-radius: var(--radius-md);
}
.code-panel h3 { color: var(--color-on-dark); }
.code-panel__code {
display: block; margin: var(--space-3) 0;
font-family: var(--font-display);
font-size: var(--display-m); letter-spacing: 0.22em;
color: var(--color-accent-soft);
font-variant-numeric: tabular-nums;
}
.code-panel p { color: var(--color-on-dark-muted); font-size: var(--text-sm); }
.code-panel p:last-child { margin-bottom: 0; }
.kv { margin: 0; }
.kv div {
display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
justify-content: space-between;
padding: var(--space-3) 0;
border-bottom: 1px solid var(--color-line);
}
.kv dt { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }
.kv dd { margin: 0; font-weight: 650; text-align: right; }
.status {
display: inline-block; padding: 0.1rem var(--space-3);
border-radius: 999px; font-size: var(--text-xs); font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
}
.status--on { background: var(--color-good-wash); color: var(--color-good-ink); }
.status--wait { background: var(--color-accent-wash); color: var(--color-accent-ink); }
/* cancellation is a plain, visible link in the main column — never a footer */
.cancel-row {
margin-top: var(--space-6); padding-top: var(--space-5);
border-top: 1px solid var(--color-line);
}
/* ==========================================================================
Prototype-only furniture — never ships
========================================================================== */
.proto {
padding: var(--space-3) var(--gutter);
background: #2b2f3a; color: #e8eaf0;
border-bottom: 2px dashed #7d86a1;
font: var(--text-xs)/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace;
}
.proto b { color: #ffd9a0; }
.proto a { color: #9fd0ff; }
.proto__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-2); }
/* ==========================================================================
A very small utility set. No inline style attribute appears anywhere in
this prototype — style-src 'self' forbids them.
========================================================================== */
.flush { margin: 0; }
.flush-top { margin-top: 0; }
.tight-top { margin-top: var(--space-2); }
.gap-top { margin-top: var(--space-5); }
.gap-top-lg { margin-top: var(--space-7); }
.center { text-align: center; }
@media print {
/* The screen palette is dark; paper is not. Without this block body text
is #f6f0e7 on a white sheet — invisible. House rules and the terms are
the pages people actually print, so this is not hypothetical.
Remap the tokens rather than patching component rules, so everything
downstream follows. Every value computed on white:
text 16.71 · muted 9.84 · accent 9.70 · notice 8.29 · good 8.31
line-strong 5.74 (SC 1.4.11 needs 3) */
:root {
--color-paper: #ffffff;
--color-paper-sunken: #ffffff;
--color-field: #ffffff;
--color-ink: #ffffff;
--color-ink-raised: #ffffff;
--color-accent-wash: #ffffff;
--color-notice-wash: #ffffff;
--color-good-wash: #ffffff;
/* On the DEFAULT print path browsers drop background colours, so a
label on the accent fill lands on bare paper. Both must be dark,
never white: #221d18 on white = 16.71:1. Flipping either to white
would print those labels at 1.00:1 on that path.
"A REAL FIX NEEDS A SECOND TOKEN, ONE PER PATH" — the claim that used
to close this comment — IS WRONG, and is fixed at the foot of this
block rather than restated. Its premise was sound: a reader who
force-enables background printing puts #221d18 on ox700, which is
1.72:1, and the retired gold gd700 #7a530f measured 2.44, so this is
the one defect of the two that the palette WIDENED rather than
inherited. Its conclusion was not. The second path only exists
because the FILL exists. Remove the fill in print and there is one
path, not two, and no print-only token is needed — see the outline
rules after `body` below. Both of these names stay dark. */
--color-on-accent: #221d18;
--color-rule: #221d18;
--color-text: #221d18;
--color-text-muted: #4a423b;
--color-on-dark: #221d18;
--color-on-dark-muted: #4a423b;
/* Paper is a LIGHT surface, and cu300/cu200 are banned there (1.73 and
1.34 on #fbf8f3), so print cannot use the screen accent. The oxblood
ramp is the family's light-surface end, and ox700 is its rest value:
9.70 on white, against the 6.84 the retired gd700 gold managed. One
value for all three names because print has no hover or focus state. */
--color-accent: #7a2733;
--color-accent-ink: #7a2733;
--color-accent-soft: #7a2733;
--color-line: #bbbbbb;
--color-line-strong: #666666;
--color-placeholder: #4a423b;
--color-notice-ink: #8c2f16;
--color-good-ink: #2c5738;
}
html { color-scheme: light; }
.proto, .site-nav, .skip-link { display: none !important; }
body { background: #fff; }
/* DEFECT 2, FIXED 2026-10-02 — the two places where --color-on-accent text
sits on a --color-accent FILL, which is the whole of the 1.72:1 problem
described in the token comment above. Dropping the fill collapses the two
print paths into one: with backgrounds off the paper was always going to
show through, and with backgrounds forced on `background: none` paints
nothing, so BOTH paths now render #221d18 on white at 16.71:1 inside a
#7a2733 ox700 edge at 9.70:1. The edge is what still reads as a button
or a tag on paper, and 9.70 clears the 3:1 SC 1.4.11 asks of a control
boundary more than three times over.
THIS IS THE DEFECT THE PALETTE WIDENED (1.72 on ox700, against 2.44 on
the retired gd700 gold), as against defect 1 at the head of this file,
which the palette inherited unchanged at 1.10:1.
Two things the selectors are doing deliberately. :not(.btn--quiet) —
quiet buttons already carry `background: transparent`, so they never had
this defect and already print at 16.71:1 with a 5.74:1 grey edge;
repainting them would be an unrelated change. And the :hover variant is
listed because .btn:hover is more specific than .btn and would otherwise
put the fill straight back wherever a print preview retains hover. */
.btn:not(.btn--quiet), .btn:not(.btn--quiet):hover {
background: none;
border: 2px solid #7a2733; /* ox700 edge on white — 9.70:1 */
color: #221d18; /* label on bare paper — 16.71:1 */
}
.ack__tag {
background: none;
border: 1px solid #7a2733; /* ox700 edge on white — 9.70:1 */
color: #221d18; /* tag text on paper — 16.71:1 */
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}