/* Sheer components (packages/brand/sheer/base.css): copied verbatim from the settled prototype's style.css; the build's
   own additions are the commented sections at the end. Reads only tokens.css, so a creator's skin changes the look. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ground); }
body {
  --body-pad: var(--frame); --outer: calc(var(--body-pad) + var(--frame));
  --edge: max(var(--pad), calc((100vw - 2 * var(--outer) - 74rem) / 2)); /* the content's left edge: the page's inner margin, or wider on a big screen */
  margin: 0; padding: var(--body-pad); background: var(--ground); color: var(--ink);
  font-family: var(--font); font-size: var(--body); font-weight: var(--weight); line-height: 1.5; letter-spacing: -0.004em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-underline-offset: 0.2em; overflow-wrap: break-word;
}
@media (min-width: 48rem) { body { --body-pad: clamp(8px, 1.6vw, 24px); } }
h1, h2, h3, p, ul, ol, dl, dd, figure, form, table, details { margin: 0; }
h1, h2, h3 { font-weight: var(--weight); text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nw { white-space: nowrap; }

.sheet { position: relative; display: flex; flex-direction: column; padding: var(--frame); background: var(--sheet);
  min-height: calc(100vh - 2 * var(--body-pad)); min-height: calc(100dvh - 2 * var(--body-pad)); } /* a short page fills the window and the footer sits at its foot, not mid-screen (Drucilla, 22 October 2026) */
.sheet > main { flex: 1 0 auto; }

/* The type, used everywhere the same way */
.label { display: block; font-size: var(--label); font-weight: var(--weight-strong); line-height: 1.3; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.statement { font-size: var(--statement); line-height: 1.3; letter-spacing: var(--track); max-width: 34rem; }
.heading { font-size: var(--heading); line-height: 1.18; letter-spacing: var(--track-heading); }
.meta { font-size: var(--detail); line-height: 1.55; color: var(--muted); }

/* The wash, wherever a picture of the creator will go: soft colour that drifts, slowly, like light moving through leaves. */
.wash { position: relative; isolation: isolate; overflow: hidden; background: var(--wash-base); }
.wash::before, .hero::before, .offer > a::before, .card.film::after, .card.calendar::before, .portrait::before, .signup::before, .login-stage::before {
  content: ""; position: absolute; z-index: -2; inset: -22%; pointer-events: none;
  background:
    radial-gradient(42% 46% at 76% 22%, var(--wash-b) 0, transparent 70%),
    radial-gradient(50% 54% at 20% 84%, var(--wash-c) 0, transparent 70%),
    radial-gradient(62% 58% at 48% 50%, var(--wash-a) 0, transparent 72%);
  animation: drift 38s ease-in-out infinite alternate; will-change: transform;
}
.card.film::after, .card.calendar::before { background: var(--grain), radial-gradient(42% 46% at 76% 22%, var(--wash-b) 0, transparent 70%), radial-gradient(50% 54% at 20% 84%, var(--wash-c) 0, transparent 70%), radial-gradient(62% 58% at 48% 50%, var(--wash-a) 0, transparent 72%); }
@keyframes drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(-3%, 2.5%, 0) rotate(2deg) scale(1.04); }
  100% { transform: translate3d(2.5%, -2%, 0) rotate(-1.5deg) scale(1.02); }
}

/* Buttons: small and sleek. Dark on white; white on the wash; outlined for the second action. */
button, .button {
  display: inline-block; vertical-align: middle;
  font: inherit; font-size: 0.875rem; font-weight: var(--weight-strong); line-height: 1.25; letter-spacing: -0.003em; text-decoration: none; text-align: center; text-wrap: balance;
  color: var(--button-ink); background: var(--button); border: 1px solid var(--button);
  border-radius: var(--radius-button); padding: calc((2.5rem - 1.25em - 2px) / 2) 1.35em; min-height: 2.5rem; cursor: pointer; transition: opacity 160ms ease, transform 120ms ease, background-color 160ms ease;
}
@media (hover: hover) { .button.ghost:hover, button.quiet:hover { border-color: var(--ink); } }
button:active, .button:active { transform: translateY(1px); }
button.quiet, .button.ghost, button.ghost { background: transparent; color: var(--ink); border-color: var(--control); }
.hero .button, .hero button { background: #ffffff; border-color: #ffffff; color: #141414; }
@media (hover: hover) { .hero .button.ghost:hover { background: rgb(255 255 255 / 0.2); border-color: #ffffff; } .bar-cta:hover { background: rgb(255 255 255 / 0.86); } }
.hero .button.ghost { background: color-mix(in srgb, var(--wash-shade) 45%, transparent); border-color: rgb(255 255 255 / 0.55); color: #ffffff; -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.hero :focus-visible { outline-color: #ffffff; }
/* A round arrow: the way in, on the main button and on every panel. */
.go-dot { display: inline-grid; place-items: center; flex: none; width: 1.875rem; height: 1.875rem; border-radius: 50%; color: var(--button-ink); background: var(--button); transition: transform 200ms ease; }
.go-dot svg { width: 0.875rem; height: 0.875rem; }
.go-dot.light { width: 2.5rem; height: 2.5rem; color: #141414; background: #ffffff; }
@media (hover: hover) { a:hover > .go-dot, a:hover .caption .go-dot { transform: rotate(45deg); } }

/* The menu: a rounded bar of frosted glass, white writing, one solid way in. It stays at the top as the page
   scrolls; over the hero its glass is clear, and once it has left the hero the glass darkens so the writing stays readable. */
.bar-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }
.bar {
  position: sticky; top: var(--bar-gap); z-index: 3;
  width: min(100% - 2 * var(--bar-gap), 46rem); margin: var(--bar-gap) auto 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 0.75rem;
  min-height: 3rem; padding: 0.125rem 0.1875rem 0.125rem 1.15rem;
  color: #ffffff; font-size: 0.8125rem; line-height: 1.2;
  background: var(--glass); border: 1px solid var(--glass-edge); border-radius: var(--radius-button);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2); backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
.bar[data-stuck] { background: rgb(30 29 27 / 0.86); border-color: rgb(255 255 255 / 0.1); box-shadow: 0 8px 28px -16px rgb(20 19 17 / 0.45); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .bar { background: rgb(30 29 27 / 0.88); } }
.bar :focus-visible { outline-color: #ffffff; }
.bar a, .bar button { color: inherit; text-decoration: none; }
.wordmark { justify-self: start; font-size: 0.9375rem; font-weight: var(--weight-strong); letter-spacing: var(--track); display: inline-flex; align-items: center; min-height: 2.75rem; }
.bar .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 clamp(0.6rem, 2vw, 1.75rem); }
.bar .links a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; color: #ffffff; }
@media (hover: hover) { .bar .links a, .bar-link, .bar button.bar-link { transition: opacity 160ms ease; } .bar .links a:hover, .bar-link:hover, .bar button.bar-link:hover { opacity: 0.72; } } /* hover by colour (8 October 2026) */
.bar .links a[aria-current="page"] { color: #ffffff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.45em; }
.bar-end { justify-self: end; display: flex; align-items: center; gap: 0.1rem; }
.bar .sign-out { margin: 0; }
.bar-link, .bar button.bar-link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.85rem; font: inherit; font-weight: var(--weight); background: none; border: 0; border-radius: var(--pill); opacity: 1; }
.bar-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; min-width: 2.75rem; padding: 0 1.2rem; font-size: 0.8125rem; font-weight: var(--weight-strong); color: #141414 !important; background: #ffffff; border-radius: var(--pill); }
.member-bar .bar-end .menu-btn, .member-bar .links .nav-logout { display: none; }
@media (max-width: 44rem) {
  .member { --bar-h: 3.1rem; }
  .public .bar { display: flex; flex-wrap: wrap; justify-content: space-between; }
  .public .bar .links { display: none; }
  /* On a phone the bar is her name, "Log in" and "Join": "Programme" left it (option A, Drucilla, 10 October 2026); the hero, the panels and the footer still lead to it */
  .bar-end { flex-wrap: wrap; justify-content: flex-end; }
  /* The member menu on a phone: one bar, her name and a two-line button; the links and "Log out" drop over the page (option B, Drucilla, 10 October 2026) */
  .member-bar { grid-template-columns: 1fr auto; }
  .member-bar .links { display: none; position: absolute; top: calc(100% + 0.4rem); left: -1px; right: -1px; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 0.45rem 1.15rem 0.6rem; background: rgb(43 39 35); border: 1px solid var(--glass-edge); border-radius: 1.4rem; box-shadow: 0 18px 40px -20px rgb(20 19 17 / 0.5); }
  .member-bar.open .links { display: flex; }
  .member-bar .links a { justify-content: flex-start; min-height: 2.75rem; font-size: 0.9375rem; }
  .member-bar .links .nav-logout { display: block; border-top: 1px solid var(--glass-edge); margin-top: 0.3rem; padding-top: 0.15rem; }
  .member-bar .nav-logout .bar-link { justify-content: flex-start; width: 100%; padding: 0; font-size: 0.9375rem; color: rgb(255 255 255 / 0.8); }
  .member-bar .bar-end > .sign-out { display: none; }
  .member-bar .bar-end .menu-btn { display: inline-flex; }
}
.menu-icon { position: relative; display: block; width: 16px; height: 8px; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform 200ms ease, top 200ms ease; }
.menu-icon::before { top: 0; } .menu-icon::after { top: 7px; }
.open .menu-icon::before { top: 3.5px; transform: rotate(45deg); } .open .menu-icon::after { top: 3.5px; transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .menu-icon::before, .menu-icon::after { transition: none; } }

/* The hero: the wash, framed by a thin border of white. Her film replaces the wash.
   The deep green pools behind the writing, low and to the left, and the light stays high and to the right. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: end;
  min-height: var(--hero-height); margin-top: calc(-1 * (var(--bar-h) + var(--bar-gap)));
  padding: calc(var(--bar-h) + var(--bar-gap) + var(--pad)) var(--edge) var(--hero-pad-b);
  color: var(--on-wash); background: var(--wash-base); border-radius: var(--radius);
  --wash-a: var(--honey); --wash-b: var(--leaf); --wash-c: var(--sky); /* bone at the top, stone in the middle */
}
.hero > img, .hero > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::after { /* a soft cap behind the menu, and the light falling from the top right */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    var(--grain),
    linear-gradient(180deg, color-mix(in srgb, var(--wash-shade) 30%, transparent) 0, transparent 6.5rem),
    linear-gradient(205deg, transparent 40%, color-mix(in srgb, var(--wash-shade) 42%, transparent) 100%);
}
.hero-copy { position: relative; justify-self: start; max-width: 40rem; }
.hero-copy::before { /* the shade rises from the writing itself, so the writing is always on it */
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: calc(-1 * var(--edge) - 4rem); bottom: calc(-1 * var(--hero-pad-b) - 4rem); top: -16rem; right: -40rem;
  background: radial-gradient(ellipse 100% 100% at 0% 100%,
    var(--wash-shade) 0, var(--wash-shade) 56%,
    color-mix(in oklab, var(--wash-shade) 70%, var(--wash-mid)) 65%, color-mix(in srgb, var(--wash-mid) 70%, transparent) 76%,
    color-mix(in srgb, var(--wash-mid) 30%, transparent) 87%, transparent 100%);
  filter: blur(40px);
}
.hero.short { --hero-height: 0px; }
.hero h1 { font-size: var(--title); line-height: 1.04; letter-spacing: var(--track-title); max-width: 16ch; margin-bottom: 0.9rem; }
.hero h1 em { font-style: italic; font-weight: var(--weight); }
.page-home .hero h1 { max-width: 20ch; }
.hero.short h1 { max-width: 24ch; font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem); line-height: 1.08; }
.hero .lede { font-size: var(--statement); line-height: 1.3; letter-spacing: var(--track); color: var(--on-wash-soft); max-width: 28rem; }
.hero .label { color: var(--on-wash-soft); margin-bottom: 0.75rem; }
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.75rem; margin-top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }
.cta { margin: 0; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4em; font-size: var(--small); }
.price b { font-size: 1.3rem; font-weight: var(--weight-strong); letter-spacing: var(--track); line-height: 1.1; white-space: nowrap; } /* a price never breaks inside itself: Safari split "€59" in the close band on a phone (found by Drucilla, 12 October 2026) */
.assurance { margin-top: 1.1rem; font-size: var(--detail); line-height: 1.45; color: var(--on-wash-soft); max-width: 24rem; text-wrap: balance; }
@media (max-width: 30rem) { .hero .cta, .hero .cta button { width: 100%; } }

/* The notch: the white of the page cuts into the hero's corner and names the first evening. */
.notch { display: none; }
@media (min-width: 56rem) {
  .hero { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .notch {
    --r: var(--radius);
    position: absolute; right: 0; bottom: 0; z-index: 1;
    display: flex; align-items: center; gap: 1.5rem;
    padding: 1rem 0.375rem 0.375rem 1.375rem;
    color: var(--ink); text-decoration: none; background: var(--sheet); border-top-left-radius: var(--r);
  }
  .notch::before, .notch::after { content: ""; position: absolute; width: var(--r); height: var(--r); background: radial-gradient(circle at 0 0, transparent calc(var(--r) - 0.5px), var(--sheet) var(--r)); }
  .notch::before { right: 0; bottom: 100%; }
  .notch::after { right: 100%; bottom: 0; }
  .notch-text { display: grid; gap: 0.2rem; }
  .notch-text .label { margin: 0; color: var(--muted); }
  .notch-text strong { font-size: var(--small); font-weight: var(--weight-strong); letter-spacing: var(--track); }
  .notch .go-dot { width: 2.5rem; height: 2.5rem; }
  .notch .go-dot svg { width: 1rem; height: 1rem; }
  .notch:focus-visible { outline-offset: -4px; }
}

/* Under the hero: one left edge, generous air, a small label, then the thing itself. */
main > .band { padding-inline: var(--edge); }
main > .column { padding-inline: var(--pad); }
main > .band { margin-top: var(--section); }
main > details.support { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
main > .row-link { margin-inline: var(--edge); } /* the start page's rows (the guides, the survey) sit on the content's edge like the help row */
main > .band + .row-link { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
main > .row-link + .row-link { border-top: 0; }
main > .band.intro { margin-top: clamp(3.5rem, 2.25rem + 4.5vw, 6.5rem); }
.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem var(--pad); margin-bottom: var(--head-gap); }
.head .label { margin-bottom: 0.875rem; }
.head .head-text > .label:only-child { margin-bottom: 0; }

/* The intro: one considered paragraph, the second sentence quieter. */
.intro-text { font-size: var(--heading); line-height: 1.22; letter-spacing: var(--track-heading); max-width: 54rem; }
.intro-text span { color: var(--muted); }

/* The three ways in: a gallery. One wide panel for the programme, two tall ones beside it, each standing where a still
   of the creator will be. A tag at the top; frosted glass at the foot names it, with a round arrow. On a phone they scroll sideways. */
.offers-nav { display: flex; flex: 1 0 auto; justify-content: flex-end; gap: 0.5rem; }
@media (min-width: 56rem) { .offers-nav { display: none; } } /* every panel is in view: nothing to page through */
/* Prev and Next on a phone: two round buttons at the right, the second filled (Drucilla chose option D, 6 October 2026) */
.offers-nav button { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; min-height: 0; padding: 0; font-size: 0; line-height: 0; color: var(--ink); background: transparent; border: 1px solid var(--control); border-radius: 50%; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
.offers-nav .prev::before, .offers-nav .next::after { content: ""; width: 1rem; height: 1rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9.5 6 6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9.5 6 6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.offers-nav .prev::before { transform: scaleX(-1); }
.offers-nav .next { color: var(--button-ink); background: var(--button); border-color: var(--button); }
.offers-nav button[disabled] { color: color-mix(in srgb, var(--muted) 55%, transparent); background: transparent; border-color: var(--line); cursor: default; }
@media (max-width: 55.99rem) { /* on a phone the two buttons sit on the label's row, so the heading stays compact */
  .offers .head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; row-gap: 0; }
  .offers .head-text { display: contents; }
  .offers .head .label { grid-area: 1 / 1; margin: 0; }
  .offers .head .statement { grid-area: 2 / 1 / 3 / -1; margin-top: 0.875rem; }
  .offers-nav { grid-area: 1 / 2; }
}
.offer-row { list-style: none; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: min(80vw, 21rem); grid-template-rows: auto minmax(17rem, 1fr) auto; column-gap: var(--gap); row-gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scroll-padding-inline: var(--pad); }
.offer-row::-webkit-scrollbar { display: none; }
/* The panels share their rows, so every caption is the same height and every foot lines up. */
.offer { scroll-snap-align: start; grid-row: span 3; display: grid; grid-template-rows: subgrid; }
.offer > a { position: relative; isolation: isolate; overflow: hidden; grid-row: span 3; display: grid; grid-template-rows: subgrid; align-items: start; padding: 0.625rem; color: var(--on-wash); text-decoration: none; background: var(--wash-base); border-radius: var(--radius); }
.offer > a::before { inset: -22%; animation-duration: 42s; transition: scale 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (hover: hover) { .offer > a:hover::before { scale: 1.06; } } /* the picture breathes in under the pointer */
.offer > a::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--grain), linear-gradient(180deg, transparent 32%, color-mix(in srgb, var(--wash-mid) 22%, transparent) 46%, color-mix(in srgb, var(--wash-mid) 62%, transparent) 60%, color-mix(in oklab, var(--wash-mid) 50%, var(--wash-shade)) 74%, var(--wash-shade) 90%); } /* the deepening keeps its colour through the middle */
.offer[data-tint="leaf"] > a { --wash-a: var(--honey); --wash-b: var(--leaf); --wash-c: var(--sky); --wash-shade: var(--leaf-shade); }
.offer[data-tint="sky"] > a { --wash-a: var(--sky-deep); --wash-b: var(--sky); --wash-c: var(--leaf); --wash-shade: var(--sky-shade); --wash-mid: var(--sky-mid); }
.offer[data-tint="honey"] > a { --wash-a: var(--honey); --wash-b: var(--sky); --wash-c: var(--leaf); --wash-shade: var(--leaf-shade); }
.offer :focus-visible { outline-color: #ffffff; }
.offer > a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.offer:nth-child(2) > a::before { animation-delay: -14s; }
.offer:nth-child(3) > a::before { animation-delay: -27s; }
.tag { grid-row: 1; justify-self: start; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2rem; padding: 0 0.85rem; font-size: var(--label); font-weight: var(--weight-strong); letter-spacing: 0.07em; text-transform: uppercase; color: #141414; background: rgb(255 255 255 / 0.55); border: 1px solid rgb(255 255 255 / 0.7); border-radius: var(--pill); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); } /* frosted (7 October 2026) */
.tag .glyph { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; }
.tag .glyph * { vector-effect: non-scaling-stroke; stroke-width: 1.25px; }
.tag .glyph circle[r="1.3"] { fill: currentColor; stroke: none; }
.caption, .glass-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 0.875rem;
  padding: 0.8rem 0.6rem 0.8rem 1rem; color: #ffffff;
  background: var(--frost); border: 1px solid var(--frost-edge); border-radius: var(--radius-sm);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15); backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
}
.caption { grid-row: 3; align-self: stretch; margin-top: 0.75rem; }
.caption-text { display: grid; gap: 0.2rem; min-width: 0; }
.caption strong, .glass-bar strong { font-size: 0.9375rem; font-weight: var(--weight-strong); letter-spacing: var(--track); line-height: 1.25; }
.caption .line, .glass-bar span { font-size: 0.8125rem; line-height: 1.5; color: var(--on-wash-soft); }
@media (min-width: 56rem) and (max-width: 74.99rem) { /* a smaller window: the two tall panels take more of the row */
  .offer-row { grid-template-columns: 1.5fr 1fr 1fr !important; }
  .offer-row.two { grid-template-columns: 1.5fr 1fr !important; }
  .offer-row.one { grid-template-columns: minmax(0, 1fr) !important; }
  .caption .go-dot.light { width: 1.875rem; height: 1.875rem; }
}
@media (min-width: 56rem) {
  .offer-row { grid-auto-flow: row; grid-template-columns: 2.2fr 1fr 1fr; grid-template-rows: auto minmax(24rem, 1fr) auto; grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .offer > a { padding: 0.625rem; }
  .offer.wide > a { grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.875rem; }
  .offer.wide .tag { grid-column: 1; }
  .offer.wide .caption { grid-column: 1; max-width: 25rem; }
  .offer-row.two { grid-template-columns: 2.2fr 1fr; } /* the ways-in row by stage (Drucilla, 11 October 2026): a panel shows only once what it offers exists, so the row holds two panels until the membership opens to the public, and none in the waitlist week */
  .offer-row.one { grid-template-columns: minmax(0, 1fr); }
}

/* An evening: the heading at the top, the poses at the foot, the film beside them. */
.evening-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem var(--pad); }
.evening-text { display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; }
.evening-text .label { margin-bottom: 0.875rem; }
.evening-text .heading { margin-bottom: 1rem; }
.evening-text .meta { max-width: var(--measure); }
@media (min-width: 56rem) {
  .evening-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); column-gap: clamp(2.5rem, 5vw, 5rem); }
}

/* Panels that stand where a film or a picture will be */
.card { position: relative; display: grid; place-items: center; min-height: 11rem; padding: var(--pad); background: var(--fog); border-radius: var(--radius); }
.card.film { display: grid; grid-template: 1fr auto / minmax(0, 1fr); padding: 0; overflow: hidden; background: var(--wash-base); color: var(--ink); isolation: isolate; position: relative; --wash-a: var(--honey); --wash-b: var(--sky); --wash-c: var(--leaf); --wash-shade: var(--leaf-shade); }
.card.film::before { content: ""; grid-area: 1 / 1 / 3 / 2; aspect-ratio: var(--media-ratio); width: 100%; } /* holds the frame's shape; large text may grow it */
.card.film.tall::before { aspect-ratio: 4 / 3.4; }
@media (min-width: 56rem) { .card.film.tall { min-height: 34rem; } .card.film.tall::before { aspect-ratio: auto; } }
.card.film > img, .card.film > video, .card.film > iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; z-index: -1; }
.card.film .play { grid-area: 1 / 1; place-self: center; margin-top: 1rem; pointer-events: none; }
.play { display: grid; place-items: center; width: 3.75rem; height: 3.75rem; border-radius: 50%; background: #ffffff; color: #141414; flex: none; box-shadow: 0 10px 30px -12px rgb(20 19 17 / 0.3); }
.play svg { width: 34%; height: 34%; margin-left: 6%; }
.card.film figcaption { grid-area: 2 / 1; justify-self: start; margin: 0 0 0.875rem 0.875rem; padding: 0.35rem 0.85rem; font-size: 0.8125rem; color: var(--ink); background: color-mix(in srgb, var(--sheet) 55%, transparent); border: 1px solid color-mix(in srgb, var(--sheet) 70%, transparent); border-radius: var(--pill); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); pointer-events: none; } /* frosted (7 October 2026) */
.card.film[data-playing] > .play, .card.film[data-playing] > figcaption { opacity: 0; visibility: hidden; }

/* Hold times: the promise of the product, so the time is as clear as the pose. */
table.holds { width: 100%; border-collapse: collapse; }
table.holds thead th { text-align: left; font-size: var(--label); font-weight: var(--weight-strong); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); padding: 0 0 0.8rem; }
table.holds th:last-child, table.holds td:last-child { text-align: right; }
table.holds td { padding: 1rem 0; border-top: 1px solid var(--line); font-size: var(--term); letter-spacing: var(--track); line-height: 1.3; }
table.holds td:last-child { font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 1rem; }
table.holds tbody tr:last-child td { border-bottom: 1px solid var(--line); }
table.holds .u { color: var(--muted); font-weight: var(--weight); } /* the unit stays quiet; the number carries the hold */
table.holds.poses td:first-child { padding-left: 1.5rem; text-indent: -1.5rem; } /* a second line sits under the words, not under the dot */
table.holds.poses td:first-child::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 1rem; border: 1px solid currentColor; border-radius: 50%; vertical-align: 0.14em; }
table.holds.poses tbody tr:first-child td:first-child::before { background: currentColor; }

/* About: her portrait, named in glass at its foot, and her words. */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem var(--pad); }
@media (min-width: 56rem) { .about-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(2.5rem, 5vw, 5rem); } }
.portrait { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: end; aspect-ratio: 4 / 5; padding: 0.625rem; color: #ffffff; background: var(--wash-base); border-radius: var(--radius); --wash-a: var(--honey); --wash-b: var(--sky); --wash-c: var(--leaf); --wash-shade: var(--leaf-shade); }
.portrait::before { animation-duration: 44s; }
.portrait::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--grain), linear-gradient(180deg, transparent 42%, color-mix(in srgb, var(--wash-mid) 22%, transparent) 56%, color-mix(in srgb, var(--wash-mid) 62%, transparent) 70%, color-mix(in oklab, var(--wash-mid) 50%, var(--wash-shade)) 84%, var(--wash-shade) 98%); }
.glass-bar { flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.85rem 1rem; }
.about-text { display: flex; flex-direction: column; justify-content: center; gap: 2.5rem; } /* centred beside the portrait, the row link beneath (8 October 2026) */
.about-text .label { margin-bottom: 0.875rem; }
.about-text .heading { max-width: 32rem; margin-bottom: 1rem; }
.about-text .meta { max-width: 30rem; }
.row-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; border-block: 1px solid var(--line); text-decoration: none; }
.row-link strong { font-size: var(--term); font-weight: var(--weight); letter-spacing: var(--track); line-height: 1.3; }
.row-link span.meta { display: block; margin-top: 0.15rem; }
.row-link .go-dot { width: 2.5rem; height: 2.5rem; }

/* Membership, once it is open: what it holds, written once, beside one panel that carries the price.
   The panel switches between the two ways to pay, so there is one price and one button at a time. */
.member-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem var(--pad); }
@media (min-width: 56rem) { .member-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: clamp(2.5rem, 5vw, 5rem); align-items: stretch; } }
.member-list { display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; }
.member-head .label { margin-bottom: 0.875rem; }
.member-list h3.label { padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
dl.spec > div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0.5rem 1.25rem; padding: 1.2rem 0 1.3rem; border-bottom: 1px solid var(--line); }
dl.spec dt { font-size: var(--term); letter-spacing: var(--track); line-height: 1.3; }
dl.spec dd { font-size: var(--detail); line-height: 1.55; color: var(--muted); padding-top: 0.15em; }
.plan { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: end; min-height: clamp(24rem, 16rem + 16vw, 36rem); padding: 0.625rem; background: var(--wash-base); border-radius: var(--radius); --wash-a: var(--honey); --wash-b: var(--sky); --wash-c: var(--leaf); }
.plan::before { content: ""; position: absolute; z-index: -1; inset: -22%; pointer-events: none; background: var(--grain), radial-gradient(42% 46% at 76% 22%, var(--wash-b) 0, transparent 70%), radial-gradient(50% 54% at 20% 84%, var(--wash-c) 0, transparent 70%), radial-gradient(62% 58% at 48% 50%, var(--wash-a) 0, transparent 72%); animation: drift 42s ease-in-out infinite alternate; will-change: transform; }
.plan-card { display: grid; gap: 0; padding: clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem); color: var(--ink); background: color-mix(in srgb, var(--sheet) 40%, transparent); border: 1px solid color-mix(in srgb, var(--sheet) 75%, transparent); border-radius: var(--radius-sm); -webkit-backdrop-filter: blur(28px) saturate(1.2); backdrop-filter: blur(28px) saturate(1.2); } /* frosted like the login card (7 October 2026) */
.plan .plan-card .label, .plan .plan-switch span, .plan .plan-price span, .plan .plan-terms, .plan .plan-note { color: #57564f; } /* a shade darker, so they hold over the glass */
.plan .plan-switch input:checked + span { color: var(--button-ink); }
.plan::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 45% at 30% 62%, color-mix(in srgb, var(--leaf-shade) 26%, transparent) 0, transparent 75%), radial-gradient(60% 40% at 78% 92%, color-mix(in srgb, var(--sky-shade) 22%, transparent) 0, transparent 75%); }
.plan-card > .label { margin-bottom: 1rem; }
.plan-switch { display: inline-grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 100%; justify-self: start; gap: 0.25rem; margin: 0 0 1.75rem; padding: 0.25rem; min-width: 0; border: 0; background: color-mix(in srgb, var(--ink) 7%, transparent); border-radius: var(--pill); }
.plan-switch label { display: block; margin: 0; cursor: pointer; }
.plan-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.plan-switch span { display: grid; place-items: center; min-height: 2.5rem; padding: 0.35rem 1.1rem; font-size: var(--detail); font-weight: var(--weight-strong); line-height: 1.2; text-align: center; color: var(--muted); border-radius: var(--pill); transition: background-color 180ms ease, color 180ms ease; }
.plan-switch input:checked + span { color: var(--button-ink); background: var(--button); }
.plan-switch input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.plan-option { display: grid; justify-items: start; }
.plan:has(input[value="monthly"]:checked) .plan-option[data-plan="annual"],
.plan:has(input[value="annual"]:checked) .plan-option[data-plan="monthly"] { display: none; }
.plan-price { display: flex; align-items: baseline; gap: 0.5rem; }
.plan-price b { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.5rem); font-weight: var(--weight); letter-spacing: var(--track-title); line-height: 1; }
.plan-price span { font-size: var(--small); color: var(--muted); }
.plan-terms { margin-top: 0.75rem; font-size: var(--detail); line-height: 1.55; color: var(--muted); max-width: 22rem; }
.plan .btn { margin-top: 1.5rem; }
.plan-note { margin-top: 1rem; padding-top: 0.9rem; width: 100%; font-size: 0.8125rem; color: var(--muted); border-top: 1px solid var(--line); }

/* Rows in the sales page: a short intro at the left; then each thing named at the left and explained at the right. */
.table { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem var(--pad); align-items: start; }
.table .intro { font-size: var(--detail); font-weight: var(--weight-strong); line-height: 1.55; max-width: 16rem; color: var(--ink); padding-top: 1.25rem; }
.trows { display: grid; }
.trow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem var(--pad); padding-block: 1.25rem 1.5rem; border-top: 1px solid var(--line); }
.trows .trow:last-child { border-bottom: 1px solid var(--line); }
.trow h2 { font-size: var(--statement); font-weight: var(--weight); letter-spacing: var(--track); line-height: 1.3; }
.trow p { font-size: var(--small); line-height: 1.5; color: var(--muted); max-width: var(--measure); }
.trow .cta { margin-top: 1.1rem; }
@media (min-width: 44rem) { .trow { grid-template-columns: minmax(0, 0.75fr) minmax(0, 2fr); } }
@media (min-width: 56rem) {
  .table { grid-template-columns: minmax(10rem, 0.8fr) minmax(0, 3fr); }
  .table .intro { position: sticky; top: calc(var(--bar-gap) + 3rem + 1.5rem); } /* it travels with the rows, under the menu */
}

/* What is inside: hairline rows with the site's ring dot (the hold times' and the questions' dot), each naming one thing
   and explaining it at the right; the icons went on 8 October 2026 (dots, not symbols). */
.dot-list { list-style: none; padding: 0; display: grid; margin-top: -0.25rem; }
.dot-list li { display: grid; grid-template-columns: 0.5rem minmax(0, 1fr); column-gap: 1.25rem; align-items: start; padding: 0.95rem 0; }
.dot-list li + li { border-top: 1px solid var(--line); }
.dot-list li::before { content: ""; width: 0.375rem; height: 0.375rem; margin: 0.5em 0 0 0.0625rem; background: currentColor; border-radius: 50%; } /* the chips' filled dot: a list of things, not a state */
.dot-list li > div { display: grid; gap: 0.2rem 1.25rem; min-width: 0; }
.dot-list strong { font-size: var(--small); font-weight: var(--weight-strong); letter-spacing: var(--track); line-height: 1.4; }
.dot-list span { font-size: var(--detail); line-height: 1.55; color: var(--muted); }
@media (min-width: 44rem) { .dot-list li > div { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } .dot-list span { padding-top: 0.1em; } }

/* The sales page's two panels: the film and the calendar, each named beneath. */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; } /* 28 px both ways (Drucilla, 16 October 2026): a card beside an open calendar is not two touching panels */
@media (min-width: 44rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cards > div { display: grid; gap: 0.9rem; align-content: start; }
.cards .card { min-height: 0; aspect-ratio: var(--media-ratio); } /* the film and the calendar stand the same height */
.cards .card.film { aspect-ratio: auto; }
.cards .label { padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); }

/* What people say: three quiet panels, rendered only once real members' words exist. */
.quotes { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
@media (min-width: 44rem) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quotes li { display: grid; align-content: space-between; gap: 1.4rem; padding: 1.25rem; background: var(--fog); border-radius: var(--radius); }
.quotes blockquote { margin: 0; }
.quotes blockquote p { font-size: var(--term); line-height: 1.3; letter-spacing: var(--track); }
.quotes .src { font-size: var(--detail); color: var(--muted); }

/* Questions: a small round picture, the question, and the answer at the right once it is open. */
.qa details { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem var(--pad); padding-block: 1.25rem; padding-right: 2.75rem; border-top: 1px solid var(--line); }
.qa details:last-child { border-bottom: 1px solid var(--line); }
.qa summary { display: grid; grid-template-columns: 0.5rem minmax(0, 1fr); align-items: center; column-gap: 1.25rem; min-height: 2.75rem; cursor: pointer; list-style: none; font-size: var(--statement); letter-spacing: var(--track); line-height: 1.3; }
.qa summary::-webkit-details-marker { display: none; }
/* Each question carries a small ring, the same dot as the hold times; it fills when the question is open. */
.qa-dot { width: 0.5rem; height: 0.5rem; border: 1px solid currentColor; border-radius: 50%; transition: background-color 200ms ease; }
.qa details[open] .qa-dot { background: currentColor; }
@media (hover: hover) { .qa summary:hover .qa-dot { background: currentColor; } } /* hovering invites opening (8 October 2026) */
.qa summary::after { /* a thin plus that becomes a minus */
  content: ""; position: absolute; top: 1.25rem; right: 0; width: 2.25rem; height: 2.75rem;
  background: linear-gradient(currentColor, currentColor) right center / 0.875rem 1px no-repeat, linear-gradient(currentColor, currentColor) right 0.40625rem center / 1px 0.875rem no-repeat;
  transition: background-size 200ms ease;
}
.qa details[open] summary::after { background-size: 0.875rem 1px, 1px 0; }
.qa details p { grid-column: 1; margin: 0; padding-left: 1.75rem; font-size: var(--small); line-height: 1.55; color: var(--muted); max-width: 30rem; }
@media (min-width: 56rem) {
  .qa details { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; padding-block: 1.4rem; }
  .qa summary { grid-column: 1; }
  .qa details p { grid-column: 2; grid-row: 1; padding-left: 0; padding-top: 0.45rem; }
}

/* The close of the landing page: the free series on a deep wash that runs on into the footer, as one panel. */
.signup {
  position: relative; isolation: isolate; overflow: hidden; margin-top: var(--section);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem var(--pad);
  padding: clamp(2.5rem, 1.75rem + 4vw, 6rem) var(--edge) clamp(2.5rem, 1.75rem + 3vw, 4.5rem);
  color: #ffffff; background: var(--leaf-shade); border-radius: var(--radius) var(--radius) 0 0;
  --wash-a: var(--leaf-deep); --wash-b: var(--sky-deep); --wash-c: var(--honey-deep); --wash-shade: var(--leaf-shade);
  color-scheme: dark;
}
.signup::before { inset: -30% -20% 30% -20%; animation-duration: 46s; opacity: 0.9; }
.signup::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--grain), linear-gradient(180deg, color-mix(in srgb, var(--wash-shade) 58%, transparent) 0, color-mix(in srgb, var(--wash-shade) 82%, transparent) 3.5rem, color-mix(in srgb, var(--wash-shade) 92%, transparent) 7rem, var(--wash-shade) 10rem, color-mix(in srgb, var(--wash-shade) 55%, var(--night)) 78%, var(--night) 100%); } /* the light stays in the first few lines, above the writing */
.signup .label { color: #ffffff; }

.signup-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
@media (min-width: 56rem) { /* on a computer the writing sits together as one block, centred beside the form (Drucilla, 7 October 2026); phones keep the stacked layout */
  .signup-copy { align-self: center; justify-content: flex-start; gap: 0; }
  .signup-copy > .label { margin-bottom: 0.875rem; }
  .signup .chips { margin-top: 2rem; }
}
.signup-title { font-size: var(--title); line-height: 1.02; letter-spacing: var(--track-title); margin-bottom: 1rem; }
.signup .lede { font-size: var(--statement); line-height: 1.3; letter-spacing: var(--track); color: var(--on-wash-soft); max-width: 24rem; }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; }
.chips li { display: inline-flex; align-items: center; gap: 0.625rem; font-size: var(--small); }
.chip-dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; opacity: 0.85; }
.chip-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgb(255 255 255 / 0.12); border: 1px solid rgb(255 255 255 / 0.18); }
.chip-icon svg { width: 1.15rem; height: 1.15rem; }
.signup-form { display: grid; gap: 0.1rem; padding: clamp(1.25rem, 0.9rem + 1.6vw, 2rem); background: rgb(255 255 255 / 0.05); border: 1px solid rgb(255 255 255 / 0.16); border-radius: var(--radius); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.signup-form select option { color: #141414; background: #ffffff; }
.signup-form { gap: 0.625rem; }
.signup-form :focus-visible { outline-color: #ffffff; }
.signup-form .optional { min-width: 0; margin: 0.375rem 0 0; padding: 0; border: 0; }   /* 10px gap + 6px = 16px above the optional pair */
.signup-form .optional legend { padding: 0; margin-bottom: 0.5rem; color: #ffffff; }
.signup-form .two-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
@media (max-width: 22.5rem) { .signup-form .two-up { grid-template-columns: minmax(0, 1fr); } }
.field.compact { min-height: 2.5rem; padding: 0 0.875rem 0 1.1rem; gap: 0.5rem; cursor: pointer; }
.signup .field.compact { --field: rgb(0 0 0 / 0.08); border-color: rgb(255 255 255 / 0.22); } /* the same ground as the other fields, so the hints hold over the grain (8 October 2026) */
.signup-form .btn { margin-top: 0.375rem; }   /* 10px gap + 6px = 16px */
.signup-form .consent { margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.5; color: rgb(255 255 255 / 0.95); }
.signup-form .consent a { color: #ffffff; }
@media (min-width: 56rem) {
  .signup { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); column-gap: clamp(2.5rem, 6vw, 6rem); padding-top: clamp(6rem, 3rem + 7vw, 10rem); }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .signup { --wash-a: var(--leaf); --wash-b: var(--sky); --wash-c: var(--honey); --wash-shade: #2b3029; } }
:root[data-theme="dark"] .signup { --wash-a: var(--leaf); --wash-b: var(--sky); --wash-c: var(--honey); --wash-shade: #2b3029; }

/* On a phone, the way in stays within reach, and steps aside while a full button is on screen. */
.buy-bar { display: none; }
@media (max-width: 44rem) {
  html { scroll-padding-bottom: 6rem; }
  .buy-bar {
    position: sticky; bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 1rem;
    margin-inline: 0.25rem; padding: 0.375rem 0.375rem 0.375rem 1.1rem; margin-top: 2rem;
    color: #ffffff; background: rgb(28 27 25 / 0.92); border-radius: 1.75rem; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    transition: opacity 180ms ease, translate 180ms ease, visibility 180ms;
  }
  .buy-bar[data-away] { opacity: 0; visibility: hidden; translate: 0 1rem; }
  .buy-bar .price { min-width: 0; flex: 1 1 auto; }
  .buy-bar .cta { flex: 0 1 auto; max-width: 100%; }
  .buy-bar .price b { font-size: 1.15rem; }
  .buy-bar button { min-height: 2.5rem; padding: 0.5em 1.3em; background: #ffffff; border-color: #ffffff; color: #141414; }
  .buy-bar :focus-visible { outline-color: #ffffff; }
  main:has(> .signup) > .buy-bar { margin-top: -4.25rem; } /* it rides over the close of the page instead of leaving a gap */
}
@media (max-width: 44rem) and (max-height: 26rem) { .buy-bar { position: static; } }

/* The footer: the deep green, white writing, hairline above the last line. Joined to the free series on the landing page. */
footer {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem var(--pad); align-items: start;
  margin-top: var(--section); padding: clamp(2.25rem, 1.75rem + 2.5vw, 4rem) var(--edge) 1.5rem;
  color: #ffffff; background: var(--grain), var(--night); border-radius: var(--radius);
}
main:has(> .signup) + footer { margin-top: 0; border-radius: 0 0 var(--radius) var(--radius); /* the same hairline divider as the sales page's close */
  background: var(--grain), linear-gradient(var(--night-line), var(--night-line)) var(--edge) 0 / calc(100% - 2 * var(--edge)) 1px no-repeat, var(--night); }
footer :focus-visible { outline-color: #ffffff; }
@media (min-width: 44rem) { footer { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } .foot-line { grid-column: 1 / -1; } }
@media (min-width: 56rem) { footer { grid-template-columns: minmax(0, 1fr) 12.75rem 12.75rem; column-gap: 2.5rem; } } /* the two link columns fill the sign-up form's 28rem column, so Explore starts where the form does (8 October 2026) */
.foot-brand .wordmark { color: #ffffff; text-decoration: none; }
.foot-brand p { margin-top: 0.25rem; font-size: var(--detail); color: var(--on-night-soft); max-width: 18rem; }
footer nav { display: grid; justify-items: start; gap: 0; }
footer nav .label { margin-bottom: 0.6rem; color: var(--on-night-soft); }
footer nav a { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; padding-inline: 0.3em; margin-inline: -0.3em; font-size: var(--small); color: rgb(255 255 255 / 0.9); text-decoration: none; }
@media (min-width: 44rem) { footer nav a { min-height: 2.25rem; } }
@media (hover: hover) { footer nav a:hover { color: #ffffff; text-decoration: underline; } }
.foot-line { margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--night-line); font-size: 0.8125rem; color: var(--on-night-soft); text-align: center; }
/* The sales page's close (Drucilla chose it, 6 October 2026): the page closes on a short band of the footer's charcoal: the label, the guarantee line, the price and Join.
   No repeat of the title or the line under it. A hairline then leads into the footer. */
.close-band { margin-top: var(--section); display: grid; gap: 1.5rem var(--pad); align-items: end;
  padding: clamp(2.5rem, 2rem + 2.5vw, 4rem) var(--edge) 0; color: #ffffff; background: var(--grain), var(--night); border-radius: var(--radius) var(--radius) 0 0; }
.close-band .close-line { max-width: 34rem; text-wrap: balance; font-size: var(--statement); line-height: 1.3; letter-spacing: var(--track); }
.close-band .close-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.close-band .price { color: #ffffff; }
.close-band .price span { color: var(--on-night-soft); }
.close-band::after { content: ""; grid-column: 1 / -1; height: 1px; margin-top: clamp(1rem, 0.5rem + 2vw, 2rem); background: var(--night-line); }
@media (min-width: 56rem) { .close-band { grid-template-columns: minmax(0, 1fr) auto; }
  .close-band .close-buy { container-type: normal; } } /* the buy column is sized by its content from here up, and a size-contained wrapper contributes no width, so the column collapsed to 0 (found by Drucilla, 11 October 2026); the container stays on phones, where the band is one column */
main:has(> .close-band) + footer { margin-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
@media (max-width: 44rem) { main:has(> .close-band) > .buy-bar { margin-top: -3.25rem; } } /* the phone bar rides over the band, as it does on the landing page */

/* The phone footer (Drucilla chose it, 6 October 2026): the brand and its line; the main links as full-width rows with a hairline and a small chevron;
   the legal links as one quiet wrapped line of small text; then the copyright. */
@media (max-width: 44rem) {
  footer { gap: 0; }
  .foot-brand { padding-bottom: 2rem; }
  .foot-brand .wordmark { min-height: 1.5rem; }
  .foot-brand p { margin-top: 0.375rem; }
  footer nav .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  footer nav[aria-label="Site"] { display: grid; justify-items: stretch; border-top: 1px solid var(--night-line); }
  footer nav[aria-label="Site"] a { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 3.25rem; margin: 0; padding: 0; font-size: var(--body); letter-spacing: var(--track); color: rgb(255 255 255 / 0.92); border-bottom: 1px solid var(--night-line); }
  footer nav[aria-label="Site"] a:active { color: rgb(255 255 255 / 0.7); }
  footer nav[aria-label="Site"] a::after { content: ""; width: 0.875rem; height: 0.875rem; margin-right: -0.3125rem; background: currentColor; opacity: 0.5; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9.5 6 6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9.5 6 6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
  footer nav[aria-label="Legal"] { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.125rem; padding-top: 1.5rem; }
  footer nav[aria-label="Legal"] a { min-width: 0; min-height: 2rem; margin: 0; padding: 0; font-size: var(--detail); color: var(--on-night-soft); }
  .foot-line { margin-top: 0.25rem; padding-top: 0.5rem; border-top: 0; } /* the last row's hairline already closes the links */
}

/* Member area: the same frame; the hero carries tonight. */
.tonight { margin-top: 1.5rem; }
.tonight p { font-size: var(--detail); color: var(--on-wash-soft); }
.tonight .button { background: #ffffff; border-color: #ffffff; color: #141414; }
.tonight h2 { margin: 0.25rem 0 0; font-size: var(--statement); line-height: 1.3; letter-spacing: var(--track); max-width: 26rem; overflow-wrap: anywhere; }
.tonight .btn { margin-top: 1.25rem; } /* the button carries its own gap, so it sits 20px under the line whether or not a title is between (19 October 2026) */
.yours-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2rem var(--pad); margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.tally { font-size: var(--detail); color: var(--muted); }
.tally b { font-weight: var(--weight-strong); color: var(--ink); }

/* The thirty evenings, a quiet number calendar (Drucilla, 7 October 2026): numbers only, ten to a row (five on a phone), thin lines
   between the rows. A dot under a number is an evening done, a small ring an evening missed and still open, the dark circle is tonight,
   and pale numbers are still to come. */
ol.evenings { list-style: none; padding: 0; display: grid; }
ol.evenings:not(.mini) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (min-width: 40rem) { ol.evenings:not(.mini) { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
ol.evenings:not(.mini) li { display: grid; place-items: center; padding: clamp(0.75rem, 0.5rem + 0.6vw, 1.125rem) 0; border-bottom: 1px solid var(--line); } /* taller rows, so the calendar breathes (7 October 2026) */
ol.evenings:not(.mini) li > a, ol.evenings:not(.mini) li > span { position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; font-size: 1rem; font-variant-numeric: tabular-nums; line-height: 1; text-decoration: none; color: var(--ink); border-radius: 50%; transition: background-color 140ms ease; }
@media (hover: hover) { ol.evenings:not(.mini) li > a:hover { background: var(--field); } }
ol.evenings:not(.mini) li > a::after { content: ""; position: absolute; left: 50%; bottom: 0.2rem; width: 0.3125rem; height: 0.3125rem; margin-left: -0.15625rem; border-radius: 50%; }
ol.evenings:not(.mini) li[data-state="done"] > a::after { background: var(--ink); }
ol.evenings:not(.mini) li[data-state="open"] > a::after { width: 0.375rem; height: 0.375rem; margin-left: -0.1875rem; border: 1px solid var(--ink); }
ol.evenings:not(.mini) li[data-state="tonight"] > a, ol.evenings:not(.mini) li[data-state="tonight"] > a:hover { color: var(--button-ink); background: var(--button); font-weight: var(--weight-strong); }
ol.evenings:not(.mini) li[data-state="tonight"][data-done] > a::after { background: var(--button-ink); } /* tonight done: its dot inside the circle (Drucilla, 19 October 2026) */
ol.evenings:not(.mini) li[data-state="locked"] > span { color: color-mix(in srgb, var(--muted) 80%, var(--sheet)); }
.card.calendar { overflow: hidden; isolation: isolate; background: var(--wash-base); --wash-a: var(--sky); --wash-b: var(--leaf); --wash-c: var(--sky); }
/* The sales page's small calendar, in the same quiet manner; it scales with its panel, so a phone shows it as a computer does. */
ol.evenings.mini { width: min(82%, 30rem); grid-template-columns: repeat(10, minmax(0, 1fr)); }
ol.evenings.mini li { display: grid; place-items: center; padding: clamp(0.2rem, 0.1rem + 0.35vw, 0.375rem) 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
ol.evenings.mini li > span { display: grid; place-items: center; width: clamp(1.5rem, 1.1rem + 1.1vw, 2.25rem); aspect-ratio: 1; font-size: clamp(0.75rem, 0.66rem + 0.3vw, 0.875rem); font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink); border-radius: 50%; }
ol.evenings.mini li:first-child > span { color: var(--button-ink); background: var(--button); }
.key { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; margin-top: 1.75rem; font-size: 0.8125rem; color: var(--muted); }
.key span { display: inline-flex; align-items: center; gap: 0.5rem; }
.key span::before { content: ""; border-radius: 50%; }
.key [data-key="done"]::before { width: 0.3125rem; height: 0.3125rem; background: var(--ink); }
.key [data-key="tonight"]::before { width: 0.875rem; height: 0.875rem; background: var(--button); }
.key [data-key="open"]::before { width: 0.375rem; height: 0.375rem; border: 1px solid var(--ink); }
.key [data-key="locked"]::before { width: 0.3125rem; height: 0.3125rem; background: color-mix(in srgb, var(--muted) 80%, var(--sheet)); }
.page-members main > .band.yours { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }

details.support { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-inline: var(--edge); }
details.support summary { display: flex; align-items: center; justify-content: space-between; min-height: 3.25rem; cursor: pointer; list-style: none; font-size: var(--small); font-weight: var(--weight-strong); }
details.support summary::-webkit-details-marker { display: none; }
@media (hover: hover) { details.support summary { transition: opacity 160ms ease; } details.support summary:hover { opacity: 0.72; } } /* the one row with no hover feedback (found 8 October 2026): it dims like the menu links */
details.support summary::after { content: ""; width: 0.875rem; height: 0.875rem; background: linear-gradient(currentColor, currentColor) center / 0.875rem 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 0.875rem no-repeat; transition: background-size 200ms ease; }
details.support[open] summary::after { background-size: 0.875rem 1px, 1px 0; }
details.support form { padding-bottom: 1.25rem; max-width: 30rem; }
label { display: block; margin-block: 0.75rem; font-size: var(--detail); font-weight: var(--weight-strong); }
input[type="email"], input[type="text"], select, textarea { display: block; width: 100%; margin-top: 0.4rem; font: inherit; font-size: 1rem; font-weight: var(--weight); color: inherit; background: var(--sheet); border: 1px solid var(--control); border-radius: var(--radius-sm); padding: 0.7em 0.85em; }
textarea { min-height: 7em; resize: vertical; }
@media (pointer: fine) { input[type="email"], input[type="text"], select, textarea { font-size: 0.9375rem; } } /* phones keep 16px, so the field does not zoom */

/* The evening */
.column { max-width: 44rem; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.25rem); margin-top: clamp(2rem, 1.25rem + 3vw, 3.5rem); }
/* Tonight's check-in, in the page's own language: a small label and the question, then five round numbers joined by a
   hairline like a scale. The line darkens up to the chosen number, and that number's words sit beneath it. No box. */
form.score { display: grid; justify-items: start; gap: 1.75rem; padding-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); border-bottom: 1px solid var(--line); }
fieldset.scale { width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.scale legend { display: block; width: 100%; padding: 0; margin-bottom: 1.75rem; }
fieldset.scale legend .label { margin-bottom: 0.75rem; }
fieldset.scale legend .q { display: block; font-size: var(--statement); letter-spacing: var(--track); line-height: 1.3; text-wrap: balance; }
.scale-track { position: relative; display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); } /* option C, in the calendar's manner (Drucilla, 7 October 2026) */
.scale-track label { position: relative; z-index: 1; display: block; flex: 0 1 2.5rem; min-width: 0; margin: 0; cursor: pointer; } /* with very large text the circles shrink to fit */
.scale-track { gap: 0.375rem; }
.scale-track input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.scale-track b { display: grid; place-items: center; width: 100%; aspect-ratio: 1; font-size: 1rem; font-weight: var(--weight); font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 50%; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; }
@media (hover: hover) { .scale-track label:hover b { background: var(--field); } }
.scale-track input:checked + b, .scale-track label:hover input:checked + b { color: var(--button-ink); background: var(--button); border-color: var(--button); font-weight: var(--weight-strong); }
.scale-track input:focus-visible + b { outline: 2px solid var(--focus); outline-offset: 3px; }
.scale-track label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* each number's words, for screen readers */
.scale-track input:checked ~ span { top: calc(100% + 1.125rem); left: 50%; width: auto; height: auto; overflow: visible; clip-path: none; transform: translateX(-50%); font-size: var(--detail); color: var(--ink); }
.scale-track label:first-child input:checked ~ span { left: 0; transform: none; }
.scale-track label:last-child input:checked ~ span { left: auto; right: 0; transform: none; }
.scale-ends { display: flex; justify-content: space-between; gap: 1rem; min-height: 1.4em; margin-top: 1rem; font-size: var(--detail); line-height: 1.4; color: var(--muted); }
.scale:has(input:checked) .scale-ends { visibility: hidden; }
@supports not selector(:has(*)) { .scale-track input:checked ~ span { position: static; } }
/* Save on tap: the button steps aside, and a small tick with "Saved" appears at the top right of the check-in. */
form.score { position: relative; }
.score-status { position: absolute; top: -0.125rem; right: 0; display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; font-size: var(--detail); line-height: 1.3; color: var(--ink); opacity: 0; }
.score-status.show { opacity: 1; animation: saved 420ms ease both; }
@keyframes saved { from { opacity: 0; transform: translateY(3px); } }
.score-status .tick { display: grid; place-items: center; width: 1.125rem; height: 1.125rem; border-radius: 50%; color: var(--button-ink); background: var(--button); }
.score-status .tick svg { width: 0.7rem; height: 0.7rem; }
.js-autosave form.score .score-save { display: none; }
.video { min-height: 0; }
.body p { font-size: var(--small); line-height: 1.5; color: var(--muted); max-width: 32rem; }

.pager { display: grid; }
.pager .row-link > span:first-child { display: grid; gap: 0.2rem; }
.pager .row-link strong { font-weight: var(--weight); }

/* The joined button: a pill and a round arrow, met by a thin waist like two drops of ink. The main way forward everywhere;
   second actions stay as outlined pills. The shape is one drawing (see build.py), so it is the same on every button. */
.btn.btn {
  --btn-bg: var(--button); --btn-ink: var(--button-ink);
  display: inline-flex; align-items: center; max-width: 100%; height: auto; min-height: 2.5rem; padding: 0;
  font: inherit; color: var(--btn-ink); text-decoration: none; text-align: left; background: none; border: 0; border-radius: var(--pill); cursor: pointer; vertical-align: middle;
  transition: opacity 160ms ease, transform 120ms ease;
}
.btn-label { display: inline-flex; align-items: center; align-self: stretch; min-width: 0; min-height: 2.5rem; padding: 0.5rem 0.5rem 0.5rem 1.35rem; margin-right: -1px; font-size: 0.875rem; font-weight: var(--weight-strong); line-height: 1.25; letter-spacing: -0.003em; text-wrap: balance; color: var(--btn-ink); background: var(--btn-bg); border-radius: var(--pill) 0 0 var(--pill); }
.btn-end { flex: none; display: block; width: 4.4375rem; height: 2.5rem; overflow: visible; }
.btn-end .be-shape { fill: var(--btn-bg); }
.btn-end .be-chev { fill: none; stroke: var(--btn-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms ease; }
.btn-label, .btn-end .be-shape { transition: background-color 180ms ease, fill 180ms ease; }
@media (hover: hover) { .btn.btn:hover { --btn-bg: color-mix(in srgb, var(--button) 84%, var(--sheet)); } .btn.light:hover, .btn.leaf:hover { --btn-bg: #e9e6e1; } .btn:hover .be-chev { transform: translateX(2px); } } /* hover colours are opaque: a translucent one painted twice where the pill meets its round end and showed as a seam (Drucilla, 8 October 2026) */
.btn.btn:active { transform: translateY(1px); }
.btn.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.btn.light { --btn-bg: #ffffff; --btn-ink: #141414; }
.btn.light:focus-visible, .hero .btn:focus-visible, .buy-bar .btn:focus-visible { outline-color: #ffffff; }
.btn.leaf { --btn-bg: #ffffff; --btn-ink: #1f1e1c; }   /* on the deep panel of the free series: white, neutral */
.btn.wide { display: flex; width: 100%; }
.btn.wide .btn-label { flex: 1; justify-content: center; padding-right: 1.35rem; } /* the words sit in the middle of the pill */
@media (min-width: 44rem) { form.done .btn.wide { max-width: 24rem; } } /* on a computer the done button is a 24rem pill, not a 39rem one (8 October 2026) */
.btn-text { min-width: 0; overflow-wrap: normal; hyphens: none; } /* never split a word (review, 9 October 2026) */
@media (max-width: 22.5rem) { .btn-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } } /* a small phone keeps the short form; screen readers hear it all */
@media (max-width: 26rem) { .buy-bar .btn-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } } /* the phone bar stays one slim row */
/* Every button wrapper measures itself, so enlarged text (which grows the rem) can turn the joined pill into a plain one that wraps its words
   whole (review, 9 October 2026). Wrappers that span the column switch at 14rem; wrappers inside a padded card at 13.5rem; on every phone at
   normal text the joined pill stays. The phone buy bar's button is left out: it is a flex item, and a container there collapses it. */
.hero .buy, form.done, .tonight, .trow .cta, .close-buy { container: wide / inline-size; }
.plan-card, .signup-form, .login-foot, details.support form { container: card / inline-size; }
@container card (max-width: 20rem) { .plan .btn-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
@container wide (max-width: 14rem) { .btn .btn-end { display: none; } .btn .btn-label { margin-right: 0; padding-right: 1.35rem; border-radius: var(--pill); } }
@container card (max-width: 13.5rem) { .btn .btn-end { display: none; } .btn .btn-label { margin-right: 0; padding-right: 1.35rem; border-radius: var(--pill); } }

/* Second actions: an outlined pill. */
.pill-outline { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.5rem; padding: 0 1.15rem; text-decoration: none; font: inherit; font-size: var(--detail); font-weight: var(--weight-strong); white-space: nowrap; color: var(--ink); background: transparent; border: 1px solid var(--control); border-radius: var(--pill); cursor: pointer; }
@media (hover: hover) { .pill-outline:hover { border-color: var(--ink); } }

/* Fields: a soft pill with a small round icon at the left and the words inside; a second action can sit at the right as a small white pill. */
.signup-form, .login-form, .login-help, details.support form { grid-template-columns: minmax(0, 1fr); }
.field { display: flex; align-items: center; gap: 0.75rem; min-width: 0; min-height: 2.75rem; margin: 0; padding: 0.25rem 1rem 0.25rem 0.25rem; font-size: var(--small); font-weight: var(--weight); color: var(--ink); background: var(--field); border: 1px solid transparent; border-radius: var(--pill); cursor: text; transition: border-color 160ms ease; }
.field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 9%, transparent); } /* one soft ring */
.field-icon { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; color: var(--ink); background: var(--sheet); border-radius: 50%; }
.field-icon svg { width: 0.9375rem; height: 0.9375rem; }
.field input[type], .field select, .field textarea { flex: 1; display: block; width: auto; min-width: 0; margin: 0; padding: 0; font: inherit; font-size: 1rem; color: inherit; background: transparent; border: 0; border-radius: 0; outline: none; -webkit-appearance: none; appearance: none; }
@media (pointer: fine) { .field input[type], .field select, .field textarea { font-size: 0.875rem; } } /* phones keep 16px so the field does not zoom */
.field input[type], .field select, .field textarea { font-weight: var(--weight-strong); } /* what you type reads apart from the hint */
.field input::placeholder, .field textarea::placeholder { color: var(--muted); font-weight: var(--weight); opacity: 1; }
.field select:has(option[value=""]:checked) { font-weight: var(--weight); }
.field select { cursor: pointer; }
.field select:has(option[value=""]:checked) { color: var(--muted); }
.field .chev { flex: none; width: 1rem; height: 1rem; color: var(--muted); pointer-events: none; }
.field.area { align-items: flex-start; border-radius: 1.5rem; }
.field.area textarea { min-height: 6rem; padding-top: 0.55rem; resize: vertical; }
.field-action { flex: none; display: inline-grid; place-items: center; min-height: 2.25rem; margin-right: -0.6875rem; padding: 0 1rem; font-size: var(--detail); font-weight: var(--weight-strong); color: var(--ink); text-decoration: none; background: var(--sheet); border-radius: var(--pill); }
/* on the deep green of the free series */
.signup .field { --field: rgb(0 0 0 / 0.08); color: #ffffff; }
.signup .field:focus-within { border-color: #ffffff; box-shadow: 0 0 0 4px rgb(255 255 255 / 0.14); }
.signup .field-icon { color: #ffffff; background: rgb(255 255 255 / 0.16); }
.signup .field input::placeholder { color: #ffffff; }
.signup .field select:has(option[value=""]:checked), .signup .field .chev { color: #ffffff; }
/* the help form on the member pages */
details.support form { display: grid; gap: 0.625rem; }
details.support form .btn { justify-self: start; margin-top: 0.375rem; }

/* Log in: a frosted card on the wash. The name and Join at the top; the title with "Can't get in?" beside it; the field;
   a quiet line and the joined button at the foot. */
.login-stage { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: calc(100svh - 2 * var(--body-pad) - 2 * var(--frame)); padding: clamp(1.25rem, 4vw, 4rem) clamp(0.75rem, 3vw, 2rem); background: var(--wash-base); border-radius: var(--radius); --wash-a: var(--honey); --wash-b: var(--sky); --wash-c: var(--leaf); }
.login-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--grain),
  radial-gradient(28rem 20rem at calc(50% - 13rem) calc(50% - 9rem), color-mix(in srgb, var(--leaf-shade) 26%, transparent) 0, transparent 75%),
  radial-gradient(28rem 20rem at calc(50% + 13rem) calc(50% + 9rem), color-mix(in srgb, var(--sky-shade) 22%, transparent) 0, transparent 75%),
  radial-gradient(120% 90% at 0% 100%, color-mix(in srgb, var(--leaf-shade) 55%, transparent) 0, transparent 60%); }
/* Two soft pools of mist sit just off the card's corners, so the frosted glass has something to catch (7 October 2026). */
.page-login .login-card .wordmark, .page-login .login-card .meta { color: #5a5955; } /* a shade darker, so they hold over the glass */
.page-login .login-card { background: rgb(255 255 255 / 0.36); border-color: rgb(255 255 255 / 0.75); -webkit-backdrop-filter: blur(28px) saturate(1.2); backdrop-filter: blur(28px) saturate(1.2); }
.login-card { width: min(100%, 28.5rem); padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); color: var(--ink); background: var(--frosted); border: 1px solid color-mix(in srgb, var(--sheet) 70%, transparent); border-radius: var(--radius); -webkit-backdrop-filter: blur(24px) saturate(1.1); backdrop-filter: blur(24px) saturate(1.1); box-shadow: 0 30px 80px -40px rgb(20 19 17 / 0.3); }
.login-card .field { --field: color-mix(in srgb, var(--sheet) 62%, transparent); }
.login-card .field-icon { background: color-mix(in srgb, var(--sheet) 90%, transparent); }
.login-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); }
.login-top .wordmark { color: var(--muted); font-weight: var(--weight); text-decoration: none; }
.login-title { margin-bottom: 1.25rem; font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem); line-height: 1.05; letter-spacing: var(--track-title); }
.login-form, .login-help { display: grid; gap: 0.625rem; }
.login-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-top: 0.875rem; }
.login-foot .meta { max-width: 12rem; font-size: 0.8125rem; line-height: 1.6; }
.login-sent { padding: 1rem 0 0.25rem; font-size: var(--small); line-height: 1.5; }
/* the quiet way out for anyone stuck: an underlined link inside the small print, as in her reference; the help form opens beneath */
.text-link { display: inline; min-height: 0; padding: 0; font: inherit; line-height: inherit; letter-spacing: inherit; vertical-align: baseline; text-wrap: inherit; color: var(--ink); background: none; border: 0; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 0.25em; }
@media (hover: hover) { .text-link:hover { text-decoration-color: currentColor; } .wordmark:hover, .consent a:hover { opacity: 0.72; } .plan-switch label:hover input:not(:checked) + span { background: color-mix(in srgb, var(--ink) 6%, transparent); } }
.login-help { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }

@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tag { color: var(--ink); background: color-mix(in srgb, var(--sheet) 55%, transparent); border-color: color-mix(in srgb, var(--sheet) 70%, transparent); } }
:root[data-theme="dark"] .tag { color: var(--ink); background: color-mix(in srgb, var(--sheet) 55%, transparent); border-color: color-mix(in srgb, var(--sheet) 70%, transparent); }

/* One leading per size, and small text opens up (8 October 2026): 12px at 1.5, 13px at 1.55, 14 and 15px at 1.5; text of 14px and under
   is set at +0.004em, since Inter Tight has no optical sizes and its display spacing tightens small text. */
.caption .line, .card.film figcaption, .consent, .login-foot .meta, .key, .plan-note, .foot-line { line-height: 1.5; }
.assurance, .tally, .tonight p, .foot-brand p, .dot-list span, .plan-terms, dl.spec dd, .meta { line-height: 1.55; }
.trow p, .body p, .qa details p, .login-sent, .chips li { line-height: 1.5; }
.meta, .caption .line, .card.film figcaption, .consent, .trow p, .dot-list span, .qa details p, .body p, .plan-terms, .foot-brand p, .assurance, dl.spec dd, .tally, .tonight p, .key, .plan-note, .login-foot .meta, .login-sent, .foot-line, footer nav a, .chips li { letter-spacing: 0.004em; }


/* One continuous gradient per stand-in surface (Drucilla, 8 October 2026: no pools, no bands). Bone at the top runs into stone,
   then eases into the charcoal of the reference at the foot, where the writing sits; the grain lies over it and nothing else does. */
:root { --g-a: 36%; --g-b: 78%; --p-a: 38%; --p-b: 94%; --s-a: 36%; --s-b: 84%; }
.page-sales .hero { --g-a: 26%; --g-b: 58%; }
@media (max-width: 44rem) { .hero { --g-a: 26%; --g-b: 60%; } .page-sales .hero { --g-a: 22%; --g-b: 54%; } .hero.short { --s-a: 70%; --s-b: 100%; } }
.hero::before { inset: 0; animation: none !important; will-change: auto;
  background: var(--grain), linear-gradient(180deg, var(--wash-a) 0%, var(--wash-b) var(--g-a), color-mix(in oklab, var(--wash-shade) 4.3%, var(--wash-b)) calc(var(--g-a) + (var(--g-b) - var(--g-a)) * 0.125), color-mix(in oklab, var(--wash-shade) 15.6%, var(--wash-b)) calc(var(--g-a) + (var(--g-b) - var(--g-a)) * 0.250), color-mix(in oklab, var(--wash-shade) 31.6%, var(--wash-b)) calc(var(--g-a) + (var(--g-b) - var(--g-a)) * 0.375), color-mix(in oklab, var(--wash-shade) 50.0%, var(--wash-b)) calc(var(--g-a) + (var(--g-b) - var(--g-a)) * 0.500), color-mix(in oklab, var(--wash-shade) 68.4%, var(--wash-b)) calc(var(--g-a) + (var(--g-b) - var(--g-a)) * 0.625), color-mix(in oklab, var(--wash-shade) 84.4%, var(--wash-b)) calc(var(--g-a) + (var(--g-b) - var(--g-a)) * 0.750), color-mix(in oklab, var(--wash-shade) 95.7%, var(--wash-b)) calc(var(--g-a) + (var(--g-b) - var(--g-a)) * 0.875), var(--wash-shade) var(--g-b), var(--wash-shade) 100%); }
.hero.short::before { background: var(--grain), linear-gradient(95deg, var(--wash-shade) var(--s-a), color-mix(in oklab, var(--wash-b) 4.3%, var(--wash-shade)) calc(var(--s-a) + (var(--s-b) - var(--s-a)) * 0.125), color-mix(in oklab, var(--wash-b) 15.6%, var(--wash-shade)) calc(var(--s-a) + (var(--s-b) - var(--s-a)) * 0.250), color-mix(in oklab, var(--wash-b) 31.6%, var(--wash-shade)) calc(var(--s-a) + (var(--s-b) - var(--s-a)) * 0.375), color-mix(in oklab, var(--wash-b) 50.0%, var(--wash-shade)) calc(var(--s-a) + (var(--s-b) - var(--s-a)) * 0.500), color-mix(in oklab, var(--wash-b) 68.4%, var(--wash-shade)) calc(var(--s-a) + (var(--s-b) - var(--s-a)) * 0.625), color-mix(in oklab, var(--wash-b) 84.4%, var(--wash-shade)) calc(var(--s-a) + (var(--s-b) - var(--s-a)) * 0.750), color-mix(in oklab, var(--wash-b) 95.7%, var(--wash-shade)) calc(var(--s-a) + (var(--s-b) - var(--s-a)) * 0.875), var(--wash-b) var(--s-b), var(--wash-a) 100%); }
.hero::after { background: var(--grain); }
.hero-copy::before { display: none; }
.offer > a::before, .portrait::before { inset: 0; animation: none !important; will-change: auto;
  background: var(--grain), linear-gradient(180deg, var(--wash-a) 0%, var(--wash-b) var(--p-a), color-mix(in oklab, var(--wash-shade) 4.3%, var(--wash-b)) calc(var(--p-a) + (var(--p-b) - var(--p-a)) * 0.125), color-mix(in oklab, var(--wash-shade) 15.6%, var(--wash-b)) calc(var(--p-a) + (var(--p-b) - var(--p-a)) * 0.250), color-mix(in oklab, var(--wash-shade) 31.6%, var(--wash-b)) calc(var(--p-a) + (var(--p-b) - var(--p-a)) * 0.375), color-mix(in oklab, var(--wash-shade) 50.0%, var(--wash-b)) calc(var(--p-a) + (var(--p-b) - var(--p-a)) * 0.500), color-mix(in oklab, var(--wash-shade) 68.4%, var(--wash-b)) calc(var(--p-a) + (var(--p-b) - var(--p-a)) * 0.625), color-mix(in oklab, var(--wash-shade) 84.4%, var(--wash-b)) calc(var(--p-a) + (var(--p-b) - var(--p-a)) * 0.750), color-mix(in oklab, var(--wash-shade) 95.7%, var(--wash-b)) calc(var(--p-a) + (var(--p-b) - var(--p-a)) * 0.875), var(--wash-shade) var(--p-b), var(--wash-shade) 100%); }
.portrait { --p-a: 42%; --p-b: 96%; }
.offer > a::after, .portrait::after { background: none; }
.card.film::after, .card.calendar::before, .login-stage::before, .wash::before { inset: 0; animation: none !important; will-change: auto;
  background: var(--grain), linear-gradient(200deg, var(--wash-a) 0%, var(--wash-b) 100%); }
.plan::before { inset: 0; animation: none !important; will-change: auto; background: var(--grain), linear-gradient(180deg, var(--wash-a) 0%, var(--wash-b) 55%, color-mix(in oklab, color-mix(in oklab, var(--wash-shade) 32%, var(--wash-b)) 4.3%, var(--wash-b)) calc(55% + (100% - 55%) * 0.125), color-mix(in oklab, color-mix(in oklab, var(--wash-shade) 32%, var(--wash-b)) 15.6%, var(--wash-b)) calc(55% + (100% - 55%) * 0.250), color-mix(in oklab, color-mix(in oklab, var(--wash-shade) 32%, var(--wash-b)) 31.6%, var(--wash-b)) calc(55% + (100% - 55%) * 0.375), color-mix(in oklab, color-mix(in oklab, var(--wash-shade) 32%, var(--wash-b)) 50.0%, var(--wash-b)) calc(55% + (100% - 55%) * 0.500), color-mix(in oklab, color-mix(in oklab, var(--wash-shade) 32%, var(--wash-b)) 68.4%, var(--wash-b)) calc(55% + (100% - 55%) * 0.625), color-mix(in oklab, color-mix(in oklab, var(--wash-shade) 32%, var(--wash-b)) 84.4%, var(--wash-b)) calc(55% + (100% - 55%) * 0.750), color-mix(in oklab, color-mix(in oklab, var(--wash-shade) 32%, var(--wash-b)) 95.7%, var(--wash-b)) calc(55% + (100% - 55%) * 0.875), color-mix(in oklab, var(--wash-shade) 32%, var(--wash-b)) 100%); }
.plan::after { background: none; }
.signup::before { inset: 0; opacity: 1; animation: none !important; background: none; } /* the free-series panel is the flat taupe of the footer it joins (the lighter top went when the brown was lifted, 8 October 2026) */
.signup::after { background: var(--grain); }
.login-stage::after { background: radial-gradient(34rem 24rem at calc(50% - 12rem) calc(50% - 8rem), color-mix(in srgb, var(--wash-shade) 20%, transparent) 0, transparent 72%), radial-gradient(34rem 24rem at calc(50% + 12rem) calc(50% + 8rem), color-mix(in srgb, var(--wash-shade) 16%, transparent) 0, transparent 72%); }
.bar { background: rgb(40 36 32 / 0.66); } /* the menu's glass is dark enough on its own; the cap behind it is gone */


/* The member start page's calendar in the site's two-column manner (Drucilla chose F, 8 October 2026): the label, the tally as the
   statement line and the key at the left; the grid at the right, six to a row in five rows of square cells. Phones keep five to a row. */
@media (min-width: 56rem) {
  .page-members main > .band.yours { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(2.5rem, 5vw, 5rem); row-gap: 2rem; align-items: start; }
  .page-members .yours-head { display: block; grid-column: 1; grid-row: 1; margin: 0; padding: 0; border: 0; }
  .page-members .tally { display: block; margin-top: 0.875rem; font-size: var(--heading); line-height: 1.18; letter-spacing: var(--track-heading); color: var(--muted); }
  .page-members .tally b { font-weight: var(--weight); color: var(--ink); }
  .page-members .key { grid-column: 1; grid-row: 2; align-self: end; margin-top: 0; }
  .page-members ol.evenings:not(.mini) { grid-column: 2; grid-row: 1 / 3; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .page-members ol.evenings:not(.mini) li { padding: 1rem 0; }
  .page-members ol.evenings:not(.mini) li:nth-child(-n+6) { border-top: 1px solid var(--line); }
}


/* The sales page's calendar with no ground (Drucilla chose it, 8 October 2026: "bare looks good"): the grid alone beside the film card, framed by hairlines */
.card.calendar { background: none; border-radius: 0; justify-items: start; padding-inline: 0; } /* the grid starts where its label starts (review, 9 October 2026) */
.card.calendar::before { display: none; }
ol.evenings.mini { width: min(100%, 30rem); }
ol.evenings.mini li { border-bottom-color: var(--line); }
ol.evenings.mini li:nth-child(-n+10) { border-top: 1px solid var(--line); }


/* The check-in as one instrument (Drucilla, "yes", 8 October 2026): the numbers sit on the hairline and the end labels just under it */
.scale-track { padding-bottom: 0.125rem; }
.scale-ends { margin-top: 0.5rem; }
.scale-track input:checked ~ span { top: calc(100% + 0.625rem); }
fieldset.scale legend { margin-bottom: 1.25rem; }

/* Gentle motion, only for those who have not asked for less: answers ease open, sections rise into view as they arrive. */
@media (prefers-reduced-motion: no-preference) {
  .qa details[open] p { animation: qa-in 360ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .js .reveal { opacity: 0; translate: 0 16px; transition: opacity 0.7s ease, translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 80ms); }
  .js .reveal.in { opacity: 1; translate: none; }
}
@keyframes qa-in { from { opacity: 0; translate: 0 -4px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .wash::before, .hero::before, .offer > a::before, .card.film::after, .card.calendar::before, .portrait::before, .signup::before, .login-stage::before, .plan::before { animation: none !important; }
}
/* The "soon" state (preview, 9 October 2026): before the thirty goes on sale, and between rounds, the Founding places row
   holds the one waitlist form, built like the member help form. */
.trow .waitlist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.625rem; max-width: var(--measure); margin-top: 1.25rem; container: card / inline-size; }
.trow .waitlist .btn { justify-self: start; }
.trow .waitlist .consent { margin-top: 0.375rem; font-size: 0.8125rem; }
.trow .waitlist .consent a { color: inherit; }
@media (max-width: 26rem) { .public .bar-soon .links { display: none; } } /* "Start free" is wider than "Join": on a phone the bar drops "Programme", which the hero, panels and footer still link to */
@media (max-width: 26rem) { .public .bar-soon .bar-end { margin-left: auto; } }
@media (max-width: 22.5rem) { .public .bar-soon .bar-link { padding-inline: 0.6rem; } .public .bar-soon .bar-cta { padding-inline: 0.9rem; } .buy-bar-soon .price { display: none; } .buy-bar-soon { justify-content: center; } }

/* ---- Build additions (11 October 2026) ---- */

/* Floating labels in the pill fields (ruled 8 October 2026): the label rests exactly where the prototype's hint sat, in
   the hint's size and colour, so the resting field looks as designed; on focus or once filled it rises to small
   capitals inside the pill and the typed words sit under it. The placeholder is a single space, kept only so
   :placeholder-shown can tell an empty field from a filled one. */
.field.float { position: relative; }
.field.float .field-label { position: absolute; left: calc(0.25rem + 2.25rem + 0.75rem); right: 1rem; top: 50%; translate: 0 -50%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 1rem; font-weight: var(--weight); color: var(--muted); pointer-events: none; transition: top 160ms ease, translate 160ms ease, font-size 160ms ease, letter-spacing 160ms ease; }
@media (pointer: fine) { .field.float .field-label { font-size: 0.875rem; } }
.field.float input::placeholder, .field.float textarea::placeholder { color: transparent; }
.field.float :is(input, textarea):is(:focus, :not(:placeholder-shown), :autofill, :-webkit-autofill) ~ .field-label { top: 0.4rem; translate: 0 0; font-size: var(--label); font-weight: var(--weight-strong); letter-spacing: 0.07em; text-transform: uppercase; }
.field.float :is(input, textarea):is(:focus, :not(:placeholder-shown), :autofill, :-webkit-autofill) { padding-top: 0.85rem; }
.field.float.area .field-label { top: 0.8rem; translate: 0 0; }
.field.float.area textarea:is(:focus, :not(:placeholder-shown)) ~ .field-label { top: 0.45rem; }
.field.float.area textarea:is(:focus, :not(:placeholder-shown)) { padding-top: 0.2rem; margin-top: 1.3rem; min-height: calc(6rem - 1.3rem); } /* the space sits outside the scrolling box, so typed lines never slide under the label */
.signup .field.float .field-label { color: #ffffff; }
@media (prefers-reduced-motion: reduce) { .field.float .field-label { transition: none; } }

/* Without script the phone's menu button cannot open anything, so the member links show in one row under the name
   (html gets the class "js" only when script runs; Base.astro). The row scrolls sideways if it must, and the bar's
   height is set here because the script that normally measures it is not running. */
@media (max-width: 44rem) {
  html:not(.js) .member { --bar-h: 5.9rem; }
  html:not(.js) .member-bar { grid-template-columns: 1fr; row-gap: 0; padding-right: 1.15rem; }
  html:not(.js) .member-bar .bar-end .menu-btn { display: none; }
  html:not(.js) .member-bar .links { display: flex; position: static; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 0 1rem; overflow-x: auto; scrollbar-width: none; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
  html:not(.js) .member-bar .links::-webkit-scrollbar { display: none; }
  html:not(.js) .member-bar .links a, html:not(.js) .member-bar .links .nav-logout { flex: none; white-space: nowrap; }
  html:not(.js) .member-bar .links a { min-width: 0; font-size: 0.8125rem; }
  html:not(.js) .member-bar .links .nav-logout { border-top: 0; margin-top: 0; padding-top: 0; }
  html:not(.js) .member-bar .nav-logout .bar-link { width: auto; font-size: 0.8125rem; min-height: 2.75rem; }
}

/* The cookie notice: a small frosted card at the foot of the screen, out of the way of the menu. */
.cookie { position: fixed; z-index: 30; left: max(1rem, env(safe-area-inset-left)); right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; max-width: 34rem; padding: 0.875rem 1rem; font-size: var(--detail); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.cookie p { flex: 1 1 14rem; }
/* The two buttons move together: beside the words where the row has room (a computer), otherwise both under the words at
   their natural size, never one beside and one below (option A, Drucilla, 12 October 2026). */
.cookie-actions { display: flex; flex: 0 0 auto; gap: 0.75rem; }
/* On a page with the phone buy bar the card rides above the bar, so Join stays in reach until the card is dismissed. The
   card's script measures the bar into --lift (0 when the bar is hidden, on a computer); the bar sits 0.5rem up from the
   safe area, so this leaves the same 0.5rem between them. */
.cookie.lifted { bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + var(--lift, 0px)); }

/* The countdown (Drucilla, 10 October 2026; in the strip above the sales page's hero since 16 October): quiet detail text,
   white over the close, muted on white; no seconds, no ticking. */
.countdown { flex-basis: 100%; font-size: var(--detail); line-height: 1.5; color: var(--muted); }
.close-band .countdown, .buy-bar .countdown { color: var(--on-wash-soft); }
/* The founding price's end, in a strip above the sales page's hero (Drucilla, 16 October 2026): one quiet centred line in the
   hero's foot tone, the card's radius and the detail size. The bar's top margin collapses into the strip's, and the hero
   rises under the bar by the bar's height and gap, so the frame's 8 px of white between the strip and the hero needs the
   bar gap added. On a phone the weekday is left out so the line stays one line (measured: the whole line fits no phone
   narrower than 430 px at any size), and under 360 px the time as well (a 360 px phone fits "23 hours · 11:59 pm your
   time" with 11 px to spare); the close band still gives the exact time. */
.strip { margin-bottom: calc(var(--frame) + var(--bar-gap)); padding: 0.7rem 0.75rem; border-radius: var(--radius); background: var(--night); color: #ffffff; font-size: 0.8125rem; line-height: 1.45; letter-spacing: 0.004em; text-align: center; }
.strip .countdown { display: block; font-size: inherit; line-height: inherit; color: inherit; }
@media (max-width: 44rem) { .strip .wd { display: none; } }
@media (max-width: 22.4375rem) { .strip .when { display: none; } } /* under 360 px only: a 360 px phone still fits the time */
@media (min-width: 44rem) { .strip { padding-inline: var(--edge); font-size: var(--detail); } }
.buy-bar .countdown { font-size: var(--label); line-height: 1.3; } /* "every on-sale surface" (10 October 2026): a small second line under the price */

/* The waitlist button in the soon and between stages is a link inside .cta; it takes the full width on a small phone and
   the buy bar's sizing exactly as the prototype's form button does (style.css: .hero .cta button, .buy-bar button). */
@media (max-width: 30rem) { .hero .cta a.btn { width: 100%; } }
.buy-bar a.btn { min-height: 2.5rem; }

/* The countdown keeps the close band and the phone buy bar to one row, the price block beside Join (11 October 2026).
   In the phone bar it adds no width of its own, so it sits under the price instead of pushing Join onto a row of its own;
   the bar shows the count alone, and the visitor's local time is in the strip above the hero and in the close band. */
.buy-bar .countdown { contain: inline-size; }
.buy-bar .countdown .when { display: none; }
/* In the close band the count and the local time are two lines under the price, and the price block is as wide as its
   widest line: a block as wide as its content (width: max-content), not the price's wrapping row, whose width would add
   the lines up. The price and its note flow as one line of text, with the row's 0.4em between them (a word space of
   0.23em plus 0.17em). Not a grid: Safari sizes a grid column with the fallback font and keeps that width once Inter
   Tight arrives, which split "€59" over two lines on a phone (found by Drucilla, 12 October 2026). No separator dot where
   the time has its own line. Each line stays whole while it fits; at enlarged text on a narrow phone the local time wraps
   inside the band rather than pushing the page sideways, and the block never grows wider than the band. */
.close-band .price:has(.countdown) { display: block; width: max-content; max-width: 100%; }
.close-band .price:has(.countdown) > span:not(.countdown) { margin-inline-start: 0.17em; }
.close-band .countdown { display: block; }
.close-band .countdown .count, .close-band .countdown .when { display: block; }
.close-band .countdown .sep { display: none; }
@media (max-width: 30rem) { .close-band .price:has(.countdown) { flex-basis: 100%; } } /* on a small phone Join takes a row of its own beside the count anyway, so the price block uses the full width; a band with no count keeps the prototype's one row */

/* Pages that follow the system (free series, confirmations, legal): the short hero and one reading column. */
.hero.short.simple .hero-copy { gap: 0.75rem; }
.column > p, .column > ul > li, .column > ol > li { max-width: var(--measure); font-size: var(--detail); line-height: 1.55; color: var(--muted); } /* the column's own lists only: a lesson's lists follow .body */
.column > h2 { font-size: var(--heading); line-height: 1.18; letter-spacing: var(--track-heading); }
.column > h3 { font-size: var(--term); letter-spacing: var(--track); }
/* A guide's sections (views/GuideView.astro): the column's heading and reading styles, which reach only its direct children, applied inside each section. */
.column > .guide-section { display: grid; gap: 0.75rem; }
.column > .guide-section > h2 { font-size: var(--heading); line-height: 1.18; letter-spacing: var(--track-heading); }
.column > .guide-section > p, .column > .guide-section > ul > li { max-width: var(--measure); font-size: var(--detail); line-height: 1.55; color: var(--muted); }
.column > .guide-section > ul { display: grid; gap: 0.375rem; padding-left: 1.25rem; }
.column table { width: 100%; border-collapse: collapse; font-size: var(--detail); }
.column th, .column td { padding: 0.75rem 0; text-align: left; border-bottom: 1px solid var(--line); }
.column th { font-size: var(--label); font-weight: var(--weight-strong); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.film.playing { padding: 0; background: #000; }
/* z-index 0: the prototype puts a card's iframe at -1, which lets the card's own shape paint over it and take every tap. */
.film.playing iframe, .film noscript iframe { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; }
.card.film button.play { pointer-events: auto; padding: 0; border: 0; cursor: pointer; font: inherit; } /* the prototype's play was a span with pointer-events: none (style.css 366); the real button must take the tap, and drops the global button padding and border */

/* The plain sign-up form on the free series page: the sales page's inline waitlist form, on the white page (no dark panel). */
.plain-signup { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.625rem; max-width: var(--measure); container: card / inline-size; }
.plain-signup .btn { justify-self: start; }
.plain-signup .consent { margin-top: 0.375rem; font-size: 0.8125rem; color: var(--muted); }
.plain-signup .consent a { color: inherit; }
.plain-signup .optional { min-width: 0; margin: 0.375rem 0 0; padding: 0; border: 0; } /* the optional pair as on the dark panel (style.css .signup-form .optional, .two-up), in the page's muted ink */
.plain-signup .optional legend { padding: 0; margin-bottom: 0.5rem; color: var(--muted); }
.plain-signup .two-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
@media (max-width: 22.5rem) { .plain-signup .two-up { grid-template-columns: minmax(0, 1fr); } }

/* "Can't get in?" without script: the link points at #help, and the help form shows when it is the target. With script
   (html.js) the page toggles it instead. */
.login-help { display: none; }
.login-help.open, html:not(.js) .login-help:target { display: grid; } /* with script the target rule is off, so the link can close a form opened at #help */

/* Member start page (demo build, task 10): .tonight is a size container, so its width comes from its content's siblings, not
   its own. A short welcome line and no evening title left it too narrow for the button's arrow (the "wide" container query
   drops the arrow below 14rem); this keeps the room the prototype had from its longer title. */
.hero .tonight { min-width: 16rem; max-width: 100%; }

/* The evening's pager (demo build, task 11): the previous evening's arrow points back, and on a computer the previous and
   next evenings sit side by side when both are there. */
.pager a[rel="prev"] .go-dot svg { rotate: 180deg; }
@media (min-width: 44rem) { .pager:has(a + a) { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } }

/* A failed check-in save (ruled 11 October 2026): "Not saved. Please try again." is too long for the corner kept for
   "Saved", where it ran over "Before you begin" on a phone, so it drops into the flow under the scale, without the tick. */
.score-status.failed { position: static; margin-top: 0.75rem; }
.score-status.failed .tick { display: none; }

/* Member pages that follow the system (tracker, details, survey, community): forms are a grid of pill fields; choice
   lists are hairline rows; the status line is quiet detail text. */
.column form:has(.btn):not(.score):not(.done) { display: grid; gap: 0.625rem; max-width: 32rem; container: card / inline-size; } /* a container, so the joined pill turns plain at enlarged text */
.column form:not(.done) .btn { justify-self: start; margin-top: 0.375rem; } /* not the evening's "Mark done", which keeps the prototype's spacing */
.column fieldset.choices { display: grid; gap: 0; margin: 0; padding: 0; border: 0; }
.column fieldset.choices legend { margin-bottom: 0.75rem; font-size: var(--term); letter-spacing: var(--track); }
.column fieldset.choices label { margin: 0; display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; border-bottom: 1px solid var(--line); font-size: var(--small); cursor: pointer; }
.column fieldset.choices input { accent-color: var(--ink); }
.column > [role="status"], .column > [role="alert"], .column form > [role="status"] { font-size: var(--detail); color: var(--muted); }
.column article { display: grid; gap: 0.375rem; padding-block: 1.25rem; border-bottom: 1px solid var(--line); }
.column article h2 { font-size: var(--term); letter-spacing: var(--track); }
.column article h2 a { text-decoration: none; }
.column th[scope="row"] + td { overflow-wrap: anywhere; } /* a long email wraps inside its cell instead of widening the page */
.column td + td, .column th + td, .column th + th { padding-left: 0.75em; } /* a narrow phone ran the weeks table's columns together */
.column .tscroll { overflow-x: auto; } /* a table too wide at enlarged text on a phone scrolls inside this wrapper, never the page; the table itself stays full width */