/* Membership, redrawn 29 September 2026.  HAND-WRITTEN — not generated.
 *
 * SECOND PASS. Jack on the first one:
 *   "i'm disappointed - we've built some amazine pages but what you have done
 *    here is boring - we should use a video of the magazine as the hero for
 *    sure - and you havnt explained what we offer well at all - this needs
 *    thought out properly"
 *   "its complicated what we offer but we need to simlyfiy this - basically
 *    with 2 offers printed or digital"
 *   "why would you use this image here? dont use this image anywhere"
 *     (the flat cover artwork, cropped to a landscape strip in the gift band)
 *
 * WHAT CHANGED, AND WHY.
 *
 * 1. THE HERO IS FILM OF THE MAGAZINE. locations/shop/landscape/landscape-01
 *    is Issue 12 held open to a watercolour coastal spread with croissants on
 *    the table — which is the breakfast-table shot the original brief asked
 *    for and never had. Cut to 14s at 1920 and 1.97MB from a 41MB master.
 *
 * 2. THE OFFER IS EXPLAINED AS THREE MOMENTS, not a feature list. A list of
 *    nouns ("13 magazines, 663 articles") says how much there is and nothing
 *    about what having it is like. So the page says what happens: twice a year
 *    something arrives, every day there is something to read, and when you go
 *    the trip is already worked out. Everything we make sits inside one of
 *    those three, which is why it is the order that explains rather than the
 *    order that lists.
 *
 * 3. TWO OFFERS, PRINTED OR DIGITAL. The third column was overseas, which is
 *    not a different membership — it is the same one with a different stamp.
 *    It is a line inside the printed card now.
 *
 * 4. NO FLAT COVER ARTWORK USED AS A PHOTOGRAPH. Cropping a cover to a
 *    landscape frame shows the middle of it with the masthead cut off. Covers
 *    appear only on the shelf, at their own shape, where they are covers.
 *
 * The prefix is mem-, checked free across every sheet this page loads (mb- is
 * the trip planner's, in _journey.css). The page is .band/.in throughout.
 */

/* ------------------------------------------------------------------ hero */

.mem-hero {
    position: relative;
    min-height: min(88vh, 860px);
    display: flex;
    align-items: flex-end;
    background: var(--forest);
    overflow: hidden;
}

.mem-hero video,
.mem-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dark enough at the foot for Shell words over a bright tablecloth, and
   almost clear at the top so the film is the thing you see first. */
.mem-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(65, 64, 66, 0.34) 0%,
        rgba(65, 64, 66, 0.06) 30%,
        rgba(65, 64, 66, 0.6) 74%,
        rgba(65, 64, 66, 0.86) 100%
    );
}

.mem-hero .in {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: calc(var(--bar) + 40px);
    padding-bottom: clamp(48px, 7vh, 96px);
}

.mem-hero .kick {
    color: var(--on-forest-55);
    margin: 0 0 18px;
}

/* One face, no second family on the last word — Jack, 14 and 19 September. */
.mem-h1 {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(40px, 5.6vw, 82px), 28px + (clamp(40px, 5.6vw, 82px) - 28px) * 0.6);
    line-height: 1.02;
    letter-spacing: -0.014em;
    /* optical: a capital J carries air inside its own box */
    margin: 0 0 22px -0.03em;
    color: var(--on-forest);
    max-width: 17ch;
}

.mem-lede {
    font-family: var(--serif);
    font-size: clamp(16.5px, 1.35vw, 20px);
    line-height: 1.58;
    color: rgba(241, 237, 232, 0.92);
    max-width: 50ch;
    margin: 0 0 30px;
}

.mem-acts {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.mem-from {
    font: 400 14.5px/1 var(--sans);
    color: rgba(241, 237, 232, 0.72);
}

/* The hero's button is Shell before hover, not Tweed.
 *
 * Jack, 30 September: "make button white before hover over - you cand see it
 * at all currently on hero".
 *
 * He is right and the cause is that the hero is .mem-hero, not .band.forest,
 * so _bar.css line 195 — the Shell treatment for a dark ground — never
 * reached it and the button fell to the base rule: colour Tweed, with
 * `border: 1px solid currentColor` taking the line from it too. Tweed on a
 * dark film is invisible.
 *
 * This is the system's own dark-ground button, said for one more selector.
 * All three properties are set together, not just the colour: the base rule
 * draws the line from currentColor and the ::after wipe reads both custom
 * properties, so changing one and leaving the others is how a half-override
 * ends up fighting itself (DESIGN-SYSTEM section 10). Shell line, Shell
 * words, and on hover the fill wipes in Shell with forest words. */
.mem-hero .in .btn {
    --hover-bg: var(--shell);
    --hover-color: var(--forest);
    color: var(--shell);
}

/* --------------------------------------------------- the three moments */

/* Each is a photograph and a column of words, alternating sides, with the
   moment's own numeral. The numeral is the only ornament on the page. */
.mem-move {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 86px);
    align-items: center;
}

.mem-move.is-flipped .mem-move-shot {
    order: 2;
}

.mem-move-shot {
    position: relative;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    background: var(--stone-2);
}

.mem-move-shot img,
.mem-move-shot video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mem-when {
    font: 600 10.5px/1 var(--sans);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--tweed);
    margin: 0 0 16px;
}

.band.forest .mem-when {
    color: var(--august);
}

/* THE LABEL, WINNING. Jack, 30 September: "mabye not using the right
   branding/fonts". He was right, and the cause was weight, not choice: the
   section's paragraph rules (`.mem-move p`, `.mem-gift > div > p`) outweigh
   `.mem-when`, so every label that is a <p> became 17px Lora in capitals.
   These selectors outweigh them, and set the whole label - the system's
   `.kick`, Jost 600 at 10.5px, .24em - so nothing is left for the paragraph
   rule to win. */
.mem-move p.mem-when,
.mem-gift > div > p.mem-when,
.mem-go p.mem-when {
    font: 600 10.5px/1 var(--sans);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--tweed);
    margin: 0 0 18px;
    max-width: none;
}

.band.forest .mem-move p.mem-when {
    color: var(--on-forest-55);
}

.mem-go p.mem-when {
    color: rgba(249, 245, 238, 0.78);
}

.mem-move h2 {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(30px, 3.4vw, 50px), 28px + (clamp(30px, 3.4vw, 50px) - 28px) * 0.6);
    line-height: 1.04;
    letter-spacing: -0.008em;
    margin: 0 0 18px -0.03em;
    max-width: 15ch;
}

.mem-move p {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.64;
    color: var(--ink-75);
    margin: 0 0 16px;
    max-width: 46ch;
}

.band.forest .mem-move p {
    color: rgba(241, 237, 232, 0.82);
}

.mem-move p:last-of-type {
    margin-bottom: 0;
}

/* The things inside a moment, said small and flush — never hairlines
   between rows (Jack, 6 and 13 Sep). */
.mem-in {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: grid;
    gap: 11px;
}

.mem-in li {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink);
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: 12px;
}

/* The price cards' tick, so the page has one mark for "you get this". */
.mem-in li::before {
    content: '';
    width: 9px;
    height: 5px;
    border-left: 1.5px solid var(--forest);
    border-bottom: 1.5px solid var(--forest);
    transform: rotate(-45deg);
    margin: 8px 0 0 2px;
}

.band.forest .mem-in li {
    color: rgba(241, 237, 232, 0.9);
}

.band.forest .mem-in li::before,
.mem-go .mem-in li::before {
    border-color: var(--shell);
}

.mem-go .mem-in li {
    color: rgba(249, 245, 238, 0.92);
}

.mem-move .btn {
    margin-top: 28px;
}

/* ------------------------------------------------------------- the shelf */

.mem-head h2 {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(32px, 3.4vw, 50px), 28px + (clamp(32px, 3.4vw, 50px) - 28px) * 0.6);
    line-height: 1.04;
    letter-spacing: -0.008em;
    margin: 0 0 0 -0.03em;
}

/* A row that scrolls rather than shrinks, so a cover is the same size on a
   phone as on a desktop. It leaves the column, like the listing's row. */
.mem-shelf {
    display: flex;
    gap: clamp(12px, 1.3vw, 20px);
    overflow-x: auto;
    scrollbar-width: none;
    margin: clamp(34px, 4vw, 52px) 0 0;
    margin-inline: calc(var(--edge) * -1);
    padding-inline: var(--edge);
    padding-bottom: 4px;
}

.mem-shelf::-webkit-scrollbar {
    display: none;
}

.mem-shelf img {
    flex: 0 0 auto;
    width: clamp(112px, 11vw, 158px);
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    background: var(--stone-2);
}

/* -------------------------------------------------- the Daily, two panes */

.mem-daily {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 26px);
    margin: clamp(30px, 3.4vw, 44px) 0 0;
}

.mem-pane {
    background: rgba(241, 237, 232, 0.06);
    border: 1px solid rgba(241, 237, 232, 0.16);
    padding: clamp(20px, 2.2vw, 30px);
}

.mem-pane.is-yours {
    background: rgba(241, 237, 232, 0.13);
    border-color: rgba(241, 237, 232, 0.36);
}

.mem-pane-h {
    font-family: var(--face);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.1;
    color: var(--on-forest);
    margin: 0 0 16px;
}

.mem-pane.is-plain .mem-pane-h {
    color: rgba(241, 237, 232, 0.62);
}

.mem-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.mem-lines li {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.48;
    color: rgba(241, 237, 232, 0.88);
}

.mem-pane.is-plain .mem-lines li {
    color: rgba(241, 237, 232, 0.55);
}

/* ------------------------------------------------------------- the price */

.mem-price-top {
    text-align: center;
    max-width: 880px;
    margin: 0 auto clamp(36px, 4.2vw, 56px);
}

/* `.mem-price-top p` below outweighs the shared `.kick`, which made this
   label 17px Lora in capitals like the others. The whole label, said here. */
.mem-price-top p.kick {
    font: 600 10.5px/1 var(--sans);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-75);
    margin: 0 0 16px;
}

.mem-price-top h2 {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(44px, 5.4vw, 76px), 28px + (clamp(44px, 5.4vw, 76px) - 28px) * 0.6);
    line-height: 1;
    letter-spacing: -0.018em;
    margin: 0 0 16px;
}

.mem-price-top p {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-75);
    margin: 0;
}

/* The till: the questions, and what they come to. */
.mem-till {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(20px, 2.6vw, 40px);
    max-width: 940px;
    margin: 0 auto;
    align-items: start;
}

.mem-ask {
    background: var(--paper);
    border: 1px solid var(--ink-20);
    padding: clamp(24px, 2.8vw, 36px);
}

.mem-ask-q {
    font-family: var(--face);
    font-weight: 400;
    font-size: clamp(19px, 1.7vw, 23px);
    line-height: 1.2;
    margin: 0 0 16px;
}

.mem-ask-q.is-second {
    margin-top: 28px;
}

.mem-pick {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* The house button's shape, used as a choice. The chosen one fills Tweed,
   which is the mechanism .btn.on already uses for something kept. */
.mem-opt {
    flex: 1 1 auto;
    min-width: 0;
    height: 50px;
    padding: 0 18px;
    border: 1px solid var(--ink-20);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font: 400 14.5px/1 var(--sans);
    cursor: pointer;
    transition: 0.3s var(--ease);
}

.mem-opt:hover {
    border-color: var(--ink);
}

.mem-opt.is-on {
    background: var(--tweed);
    border-color: var(--tweed);
    color: var(--shell);
}

.mem-ask-note {
    font-family: var(--serif);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-55);
    margin: 16px 0 0;
}

/* What it comes to. */
.mem-sum {
    background: var(--forest);
    color: var(--on-forest);
    padding: clamp(24px, 2.8vw, 36px);
}

.mem-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.mem-rows li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.4;
    color: rgba(241, 237, 232, 0.8);
}

.mem-rows b {
    font-weight: 400;
    color: var(--on-forest);
    font-variant-numeric: tabular-nums;
}

.mem-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin: 22px 0 26px;
    padding-top: 20px;
    border-top: 1px solid rgba(241, 237, 232, 0.24);
}

.mem-total span {
    font: 600 10.5px/1 var(--sans);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--on-forest-55);
}

.mem-total b {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(38px, 4vw, 54px), 28px + (clamp(38px, 4vw, 54px) - 28px) * 0.6);
    line-height: 1;
    letter-spacing: -0.016em;
    color: var(--on-forest);
    font-variant-numeric: tabular-nums;
}

/* The sum sits on forest, so its button takes the dark-ground treatment —
   all three properties together, or the line and the wipe disagree. */
.mem-sum .btn {
    --hover-bg: var(--shell);
    --hover-color: var(--forest);
    color: var(--shell);
    width: 100%;
    justify-content: center;
}

.mem-small {
    font-family: var(--serif);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--on-forest-55);
    margin: 16px 0 0;
    text-align: center;
}

.mem-worth {
    max-width: 56ch;
    margin: clamp(28px, 3.2vw, 40px) auto 0;
    text-align: center;
    font-family: var(--serif);
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--ink-75);
}

.mem-worth b {
    color: var(--ink);
    font-weight: 500;
}

/* ------------------------------------------------ when you go, on film */

/* Neist Point from the air, the whole band. The veil darkens the left, where
   the words are, and leaves the right to the film. */
.mem-go {
    position: relative;
    overflow: hidden;
    background: var(--forest);
    color: var(--shell);
    padding: clamp(96px, 11vw, 168px) 0;
}

.mem-go video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mem-go::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 24, 21, 0.78) 0%, rgba(20, 24, 21, 0.5) 45%, rgba(20, 24, 21, 0.08) 80%);
    pointer-events: none;
}

.mem-go .in {
    position: relative;
    z-index: 1;
}

.mem-go-words {
    max-width: 560px;
}

.mem-go h2 {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(34px, 4vw, 58px), 28px + (clamp(34px, 4vw, 58px) - 28px) * 0.6);
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: var(--shell);
    margin: 0 0 20px -0.03em;
}

.mem-go-words > p:not(.mem-when) {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.64;
    color: rgba(249, 245, 238, 0.88);
    margin: 0;
    max-width: 44ch;
}

/* On film, the dark-ground button, all three properties together. */
.mem-go .in .btn {
    --hover-bg: var(--shell);
    --hover-color: var(--forest);
    color: var(--shell);
    margin-top: 32px;
}

@media (max-width: 700px) {
    /* The words take the whole width on a phone, so the veil does too. */
    .mem-go::after {
        background: rgba(20, 24, 21, 0.62);
    }
}

/* --------------------------------------------------------------- gifts */

.mem-gift {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}

.mem-gift-shot {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--stone-2);
}

.mem-gift-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mem-gift h2 {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(30px, 3.2vw, 46px), 28px + (clamp(30px, 3.2vw, 46px) - 28px) * 0.6);
    line-height: 1.05;
    letter-spacing: -0.008em;
    margin: 0 0 16px -0.03em;
}

.mem-gift > div > p {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.62;
    color: var(--ink-75);
    margin: 0;
    max-width: 44ch;
}

.mem-gifts {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: grid;
    gap: 18px;
}

.mem-gifts li {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 16px;
    align-items: baseline;
}

.mem-gifts b {
    font: 400 24px/1 var(--face);
    color: var(--ink);
}

.mem-gifts span {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink-75);
}

.mem-gift-acts {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin: 28px 0 0;
}

/* ------------------------------------------------------------ foot line */

.mem-foot {
    text-align: center;
}

.mem-foot p {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(20px, 1.9vw, 26px), 28px + (clamp(20px, 1.9vw, 26px) - 28px) * 0.6);
    line-height: 1.3;
    margin: 0 0 18px;
}

/* ------------------------------------------------ the wizard, step by step */

.mem-wiz {
    max-width: 1000px;
    margin: 0 auto;
}

/* The answered steps, as a row of things you can click to go back. */
.mem-wiz-done {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 clamp(20px, 2.4vw, 30px);
    min-height: 1px;
}

.mem-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--ink-20);
    border-radius: 0;
    background: var(--paper);
    cursor: pointer;
    font: 400 14px/1 var(--sans);
    color: var(--ink);
    transition: border-color 0.25s var(--ease);
}

.mem-chip:hover {
    border-color: var(--ink);
}

.mem-chip b {
    font: 600 9.5px/1 var(--sans);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tweed);
}

/* A step. The min-height keeps the section roughly its shape as they swap,
   so the page does not lurch and the button does not move out from under a
   finger on the way down. */
.mem-step {
    animation: mem-arrive 0.36s var(--ease) both;
    min-height: 440px;
}

.mem-step.is-sum {
    min-height: 0;
    max-width: 480px;
}

.mem-step-n {
    font: 600 10.5px/1 var(--sans);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--tweed);
    margin: 0 0 14px;
}

.mem-step h3 {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(26px, 3vw, 42px), 28px + (clamp(26px, 3vw, 42px) - 28px) * 0.6);
    line-height: 1.06;
    letter-spacing: -0.008em;
    margin: 0 0 clamp(24px, 2.8vw, 36px) -0.03em;
    max-width: 20ch;
}

.mem-step-note {
    font-family: var(--serif);
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--ink-55);
    margin: 20px 0 0;
}

/* A wide choice: no photograph, a name and a price on one line and a sentence
   beneath. Used for the two questions that are not about an object. */
.mem-wide {
    display: block;
    width: 100%;
    text-align: left;
    padding: clamp(22px, 2.4vw, 32px);
    border: 1px solid var(--ink-20);
    border-radius: 0;
    background: var(--paper);
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.mem-wide:hover {
    border-color: var(--ink-55);
}

.mem-wide.is-on {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
}

.mem-widetop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 12px;
}

.mem-widename {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(22px, 2.2vw, 30px), 28px + (clamp(22px, 2.2vw, 30px) - 28px) * 0.6);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.mem-wideamt {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(22px, 2.2vw, 30px), 28px + (clamp(22px, 2.2vw, 30px) - 28px) * 0.6);
    line-height: 1;
    letter-spacing: -0.014em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mem-wideamt.is-small {
    font-family: var(--sans);
    font-size: 13.5px;
    letter-spacing: 0.02em;
    color: var(--ink-55);
}

.mem-widesays {
    display: block;
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-75);
}

/* The sum, on its own at the end rather than beside everything. */
.mem-step.is-sum .mem-sum {
    margin: 0;
}

/* ------------------------------------------------- one box, nothing moves */

/* Jack: "the optins should then just appear in the smae box so the page doenst
   move about and jump, need this to be very easy and simpl."

   So the box is one object. The two cards never leave it, and under them is
   one slot of FIXED height that holds one thing at a time: where to post it,
   then which magazine first, then the green panel with the price and Join.
   Nothing under this section ever shifts, because nothing in it changes
   height. The box has no bottom padding of its own: the slot carries it, so
   the green panel can run to the box's edges without a negative margin. */
.mem-box {
    --mem-pad: clamp(20px, 2.6vw, 34px);
    --mem-gap: clamp(12px, 1.4vw, 18px);
    max-width: 880px;
    margin: 0 auto;
}

/* The slot. A height, not a min-height: it is the one number that keeps the
   box still, and every state is drawn to fit inside it. Measured in all four
   states at 1920, 1440 and 390; if anything is added here, measure again. */
.mem-slot {
    height: 330px;
    display: flex;
    align-items: center;
    margin: var(--mem-gap) 0 0;
    padding: 0 var(--mem-pad);
    background: var(--paper);
    border: 1px solid var(--ink-20);
}

/* The last state: the slot is the green panel. */
.mem-slot.is-sum {
    background: var(--forest);
    border-color: var(--forest);
    padding: 0;
}

.mem-slot-ask {
    width: 100%;
    animation: mem-arrive 0.3s var(--ease) both;
    margin: 0;
}

.mem-slot-q {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(24px, 2.4vw, 30px), 28px + (clamp(24px, 2.4vw, 30px) - 28px) * 0.6);
    line-height: 1.15;
    margin: 0 0 20px;
}

.mem-slot-opts {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.mem-slot-opts .mem-opt {
    flex: 1 1 200px;
    height: 56px;
    font-size: 16px;
}

.mem-slot-note {
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-55);
    margin: 14px 0 0;
}

/* ---- the green panel */

/* Two columns: what they chose, and what it comes to. The Join button is the
   one filled button on the page, so it is the thing the eye lands on. */
.mem-foot-sum {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    padding: var(--mem-pad);
    color: var(--on-forest);
    animation: mem-arrive 0.3s var(--ease) both;
}

.mem-sum-name {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(32px, 3.4vw, 44px), 28px + (clamp(32px, 3.4vw, 44px) - 28px) * 0.6);
    line-height: 1.05;
    letter-spacing: -0.012em;
    color: var(--on-forest);
    margin: 0 0 18px;
}

.mem-sum-said {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.mem-sum-said li {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.45;
    color: rgba(241, 237, 232, 0.86);
}

/* "Change", on forest: Shell, underlined, in the words' own face. */
.mem-slot-change {
    border: none;
    background: none;
    padding: 0 0 0 12px;
    font: 400 15px/1 var(--serif);
    color: var(--shell);
    opacity: 0.8;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mem-slot-change:hover {
    opacity: 1;
}

.mem-foot-sum .mem-rows li {
    font-size: 17px;
    color: rgba(241, 237, 232, 0.86);
}

.mem-foot-sum .mem-total {
    margin: 18px 0 22px;
    padding-top: 16px;
}

/* "Per year" in the words' face, not a spaced label. */
.mem-foot-sum .mem-total span {
    font: 400 17px/1.3 var(--serif);
    letter-spacing: 0;
    text-transform: none;
    color: rgba(241, 237, 232, 0.86);
}

.mem-foot-sum .mem-small {
    margin-top: 14px;
    font-size: 15.5px;
}

/* JOIN, READABLE. Jack, 30 September: "you cant read the button at all".
   The old rule, `.mem-foot-sum .btn`, weighed less than `_bar.css`'s own
   `.band .in .btn`, so the button fell to Tweed words and a Tweed line on
   forest. This one outweighs it, and makes it the filled button: a Shell
   ground with forest words, wiping to Tweed with Shell words on hover. All
   five properties are set together, because the line follows currentColor
   and the wipe reads both custom properties (DESIGN-SYSTEM section 10). */
.in .mem-box .mem-foot-sum .btn {
    --hover-bg: var(--tweed);
    --hover-color: var(--shell);
    color: var(--forest);
    background: var(--shell);
    border-color: var(--shell);
    width: 100%;
    height: 54px;
    min-height: 54px;
    justify-content: center;
    font-size: 15.5px;
}

@media (max-width: 600px) {
    /* Stacked: the slot's two buttons go under each other, and the green
       panel's two columns become one, so it needs more height, not less. */
    .mem-slot {
        height: 470px;
    }

    .mem-slot-opts .mem-opt {
        flex: 1 1 100%;
    }

    .mem-foot-sum {
        grid-template-columns: 1fr;
        gap: 22px;
        align-content: center;
    }

    .mem-sum-name {
        margin-bottom: 12px;
    }
}

/* ---- Digital's picture: two pages of the magazine, on stone */

/* The reader's stage, small: the spread centred on stone with the shadow a
   page throws, so it reads as the magazine on a screen rather than a crop. */
.mem-pickshot.mem-pickspread {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 9% 8%;
    background: var(--stone);
}

.mem-pickshot.mem-pickspread img {
    width: auto;
    height: 100%;
    max-width: 50%;
    object-fit: contain;
    background: #fff;
    box-shadow: 0 6px 18px rgba(43, 48, 29, 0.18);
}

/* --------------------------------------------- the two, chosen by looking */

.mem-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 18px);
}

/* A button, not a div: it is a choice and it has to be reachable by keyboard
   and announced as pressed. Everything inside is a span for that reason. */
.mem-pickcard {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 1px solid var(--ink-20);
    border-radius: 0;
    background: var(--paper);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
    font: inherit;
    color: inherit;
}

.mem-pickcard:hover {
    border-color: var(--ink-55);
}

/* Chosen: a full ink edge, not a badge. */
.mem-pickcard.is-on {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
}

.mem-pickshot {
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--stone-2);
    overflow: hidden;
}

.mem-pickshot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s var(--ease), filter 0.4s var(--ease);
}

/* The one not chosen steps back rather than being hidden — you can still see
   what you are turning down. */
.mem-pickcard:not(.is-on) .mem-pickshot img {
    filter: grayscale(0.7);
    opacity: 0.72;
}

.mem-pickcard:hover .mem-pickshot img {
    transform: scale(1.03);
}

.mem-pickbody {
    display: block;
    padding: clamp(20px, 2.2vw, 28px);
}

/* Jack, 30 September: "im not sure about the fonts used for printed copy and
   both magazines ... seems small ... i dont like the small fonts". The name is
   a heading now, not a spaced label, and every line is Lora at body size. */
.mem-picklab {
    display: block;
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(24px, 2.2vw, 28px), 28px + (clamp(24px, 2.2vw, 28px) - 28px) * 0.6);
    line-height: 1.1;
    color: var(--ink);
    margin: 0 0 12px;
}

.mem-pickamt {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(40px, 4vw, 52px), 28px + (clamp(40px, 4vw, 52px) - 28px) * 0.6);
    line-height: 1;
    letter-spacing: -0.016em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    margin: 0 0 20px;
}

.mem-pickamt i {
    font: normal 400 17px/1 var(--serif);
    letter-spacing: 0;
    color: var(--ink-55);
}

/* What each gets, as three lines. The first is the one that differs, so it
   is in ink and the two they share are a step back. */
.mem-pickgets {
    display: grid;
    gap: 9px;
    padding-top: 18px;
    border-top: 1px solid var(--ink-20);
}

.mem-pickgets > span {
    display: block;
    position: relative;
    padding-left: 22px;
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.45;
    color: var(--ink-75);
}

/* A short forest tick: drawn, not an icon font. */
.mem-pickgets > span::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 0.42em;
    width: 9px;
    height: 5px;
    border-left: 1.5px solid var(--forest);
    border-bottom: 1.5px solid var(--forest);
    transform: rotate(-45deg);
}

.mem-pickgets > .is-key {
    color: var(--ink);
}

/* What Digital does not have: a dash, not a tick. */
.mem-pickgets > .is-not::before {
    top: 0.72em;
    width: 9px;
    height: 0;
    border-left: none;
    border-bottom: 1.5px solid var(--ink-35);
    transform: none;
}

/* ---------------------------------------- and what opens underneath them */

/* A grid whose row collapses to nothing is the one way to animate to auto
   height without measuring anything in JavaScript. */
/* A mount animation, not a height one: the block unmounts when nothing is
   being posted, so there is no height to transition from. Fading and lifting
   is enough to stop the page snapping under the reader's hand. */
.mem-more {
    animation: mem-arrive 0.38s var(--ease) both;
}

@keyframes mem-arrive {
    from { opacity: 0; transform: translateY(-6px) }
    to   { opacity: 1; transform: none }
}

@media (prefers-reduced-motion: reduce) {
    .mem-more {
        transition: none;
    }
}

@media (max-width: 520px) {
    /* Two cards side by side at 390 leaves each 165px wide, which is not a
       photograph. They go under each other and keep their shape. */
    .mem-two {
        grid-template-columns: 1fr;
    }

    .mem-pickshot {
        aspect-ratio: 16 / 9;
    }

    /* A step with nothing in it but two stacked cards does not need the
       desktop's reserved height. */
    .mem-step {
        min-height: 0;
    }

    .mem-step h3 {
        max-width: none;
    }
}

/* ---------------------------------------- what is on the shelf, at a glance */

/* Three numerals instead of a sentence. Jack, 30 September: "super clear,
   consise ... without alot of text really." */
.mem-counts {
    list-style: none;
    margin: clamp(32px, 4vw, 52px) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(28px, 6vw, 96px);
}

.mem-counts li {
    text-align: left;
}

.mem-counts b {
    display: block;
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(42px, 5vw, 68px), 28px + (clamp(42px, 5vw, 68px) - 28px) * 0.6);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.mem-counts span {
    display: block;
    margin-top: 8px;
    font: 400 17px/1.3 var(--serif);
    color: var(--ink-75);
}

/* -------------------------------------- the member's own first year */

/* Four dated steps on a line, instead of three paragraphs of rules.
   Jack, 30 September: "i need it super clear, consise, so they know exact
   what they get and how it works without alot of text really."

   The line and the dot are the itinerary's, which is settled: solid, 2px,
   a forest dot. DESIGN-RULES, 13 September. The steps are built from what the
   reader has just chosen at the till, so the dates are their own rather than
   an example they have to apply to themselves. */
.mem-year-head {
    max-width: 880px;
    margin: clamp(52px, 6vw, 80px) auto 0;
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(26px, 2.6vw, 32px), 28px + (clamp(26px, 2.6vw, 32px) - 28px) * 0.6);
    line-height: 1.1;
}

.mem-year {
    list-style: none;
    max-width: 880px;
    margin: 28px auto 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr));
    gap: 24px;
    position: relative;
}

/* The rail runs from the first marker to the last and no further. */
.mem-year::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 7px;
    right: calc((100% + 24px) / var(--steps, 4) - 24px - 7px);
    height: 2px;
    background: var(--ink-20);
}

.mem-year li {
    position: relative;
    padding: 36px 0 0;
}

/* Today: a filled forest dot. */
.mem-year li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--forest);
    box-shadow: 0 0 0 5px var(--stone);
}

/* A magazine: a filled square, a thing that arrives. */
.mem-year li.is-mag::before {
    border-radius: 0;
    background: var(--tweed);
}

/* The renewal: an open ring, nothing to do. */
.mem-year li.is-renew::before {
    background: var(--stone);
    border: 2px solid var(--forest);
}

.mem-year-when {
    display: block;
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(20px, 1.8vw, 23px), 28px + (clamp(20px, 1.8vw, 23px) - 28px) * 0.6);
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 6px;
}

.mem-year-says {
    display: block;
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.45;
    color: var(--ink-75);
}

/* ================================================================ 1100 */

@media (max-width: 1100px) {
    .mem-move,
    .mem-gift {
        grid-template-columns: 1fr;
    }

    /* Stacked, the photograph leads whichever side it was on. */
    .mem-move.is-flipped .mem-move-shot {
        order: -1;
    }

    .mem-gift-shot {
        order: -1;
    }

    .mem-move h2,
    .mem-move p {
        max-width: none;
    }
}

/* ================================================================== 860 */

@media (max-width: 860px) {
    .mem-daily {
        grid-template-columns: 1fr;
    }

    /* Answer first, read the total after. */
    .mem-till {
        grid-template-columns: 1fr;
    }

    .mem-two {
        grid-template-columns: 1fr;
    }
}

/* ================================================================== 600 */

@media (max-width: 600px) {
    .mem-hero {
        min-height: min(86vh, 660px);
    }

    .mem-h1 {
        max-width: 13ch;
    }

    /* A fixed shape stays fixed: the covers keep their width, the row
       scrolls. min-height:auto on a phone is how that stops being true. */
    .mem-shelf img {
        width: 116px;
    }

    .mem-move-shot {
        aspect-ratio: 4 / 3;
    }

    .mem-gifts li {
        grid-template-columns: 54px 1fr;
        gap: 12px;
    }

    /* The line turns on its side rather than squeezing four columns into
       390: the dots run down the left and the words sit beside them. Four
       columns of 87px is not a layout, it is the same layout broken. */
    .mem-year {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    /* Stood up, the rail is drawn from each marker down to the next rather
       than down the whole list, so it stops at the last marker instead of
       running on beside the last line's words. */
    .mem-year::before {
        display: none;
    }

    .mem-year li {
        padding: 0 0 0 40px;
    }

    .mem-year li:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 16px;
        bottom: -26px;
        left: 7px;
        width: 2px;
        background: var(--ink-20);
    }

    .mem-acts .btn,
    .mem-gift-acts .btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
    .mem-hero video {
        display: none;
    }
}

/* =====================================================================
   SIMPLER, 30 September 2026, after jakobsencopenhagen.com.
   Jack: "i feel this page is just too busy currently. i really want to be
   simply, useful and consise." The reference, measured at 1440: one face;
   the name alone on a close film, centred, in tracked capitals, a smaller
   line under it; then a plain label, one statement sentence large, one
   underlined link; then three big pictures, each a name and a grey line.
   ===================================================================== */

/* ---- the hero: the name on the film */
/* Under the bar, as the home and magazine heroes are. Without the pull the
   sticky bar sat above the film on paper while the glass hook gave it Shell
   words - pale on pale, from the day this hero was drawn. */
.mem-hero.is-name {
    min-height: 100vh;
    margin-top: calc(-1 * var(--bar));
    align-items: center;
    justify-content: center;
}

/* Deeper at the top, for the bar's words, and round the middle, where the
   name sits over the magazine's white pages; the rest of the film is left
   nearly clear. */
.mem-hero.is-name::after {
    background:
        linear-gradient(180deg, rgba(65, 64, 66, 0.42) 0%, rgba(65, 64, 66, 0) 20%),
        radial-gradient(ellipse 46% 40% at 50% 52%, rgba(65, 64, 66, 0.46) 0%, rgba(65, 64, 66, 0.16) 100%);
}

.mem-name {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--shell);
}

/* The lockup: HIDDEN over SCOTLAND, the second line smaller so the two are
   the same width, as JAKOBSEN over COPENHAGEN is. One face. */
.mem-name h1 {
    margin: 0;
    font-family: var(--face);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1;
    color: var(--shell);
}

.mem-name h1 span {
    display: block;
    font-size: var(--mem-name-1, clamp(46px, 5.6vw, 92px));
    letter-spacing: 0.1em;
    /* the tracking's trailing space would push the line off centre */
    margin-right: -0.1em;
}

.mem-name h1 span + span {
    font-size: var(--mem-name-2, clamp(34px, 4.15vw, 68px));
    letter-spacing: 0.1em;
    margin-top: 0.08em;
}

/* The mark itself, white as the bar whitens it, at about the width the
   typed lockup had (400 at 1920). */
/* `.mem-hero img` is the hero's rule for a background picture - absolute,
   stretched to fill - and it caught the mark too, which came out 147px wide.
   This outweighs it and resets every property that rule sets. */
.mem-hero .mem-name .mem-name-logo {
    position: static;
    inset: auto;
    display: block;
    width: clamp(230px, 22vw, 440px);
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    /* White, and a soft shadow so the letters hold where they cross the
       cover's white edge in the film. */
    filter: brightness(0) invert(1) drop-shadow(0 2px 22px rgba(20, 16, 12, 0.55));
}

/* "Join today": the reference's EST. 1975, and the way in. In Jost, the
   label face, so it sits with the mark's own sans rather than against it. */
.mem-name-go {
    display: inline-block;
    margin-top: clamp(20px, 2vw, 30px);
    font-family: var(--sans);
    font-weight: 600;
    font-size: clamp(14px, 1.05vw, 17px);
    letter-spacing: 0.32em;
    margin-right: -0.32em;
    text-transform: uppercase;
    color: var(--shell);
    text-decoration: none;
    border-bottom: 1px solid rgba(249, 245, 238, 0);
    padding-bottom: 4px;
    transition: border-color 0.3s var(--ease);
}

.mem-name-go:hover {
    border-bottom-color: rgba(249, 245, 238, 0.9);
}

/* ---- the link: underlined words, the reference's only kind of button
   below the fold. The Join button in the price box stays a button. */
.mem-link {
    font-family: var(--serif);
    font-size: 17px;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
    transition: color 0.3s var(--ease);
}

.mem-link:hover {
    color: var(--tweed);
}

/* ---- one sentence for the whole offer */
.mem-say {
    padding-top: clamp(96px, 12vw, 180px);
    padding-bottom: clamp(80px, 9vw, 140px);
}

.mem-say-label {
    font-family: var(--serif);
    font-size: 17px;
    color: var(--ink);
    margin: 0 0 clamp(28px, 3vw, 44px);
}

.mem-say-big {
    font-family: var(--face);
    font-weight: 300;
    font-size: min(clamp(34px, 4.6vw, 76px), 28px + (clamp(34px, 4.6vw, 76px) - 28px) * 0.6);
    line-height: 1.12;
    letter-spacing: -0.012em;
    color: var(--ink);
    max-width: 20ch;
    margin: 0 0 clamp(28px, 3vw, 44px) -0.03em;
}

/* The plain sentence under it: the two memberships, at a size that is read,
   not skimmed past. */
.mem-say-more {
    font-family: var(--serif);
    font-size: clamp(18px, 1.45vw, 23px);
    line-height: 1.55;
    color: var(--ink-75);
    max-width: 44ch;
    margin: 0 0 clamp(36px, 3.6vw, 52px);
}

/* ---- three films, a name and a line each */
.mem-three {
    padding-top: 0;
}

.mem-three-h {
    font-family: var(--face);
    font-weight: 300;
    font-size: min(clamp(26px, 2.2vw, 34px), 28px + (clamp(26px, 2.2vw, 34px) - 28px) * 0.6);
    line-height: 1.1;
    margin: 0 0 clamp(24px, 2.6vw, 36px) -0.02em;
}

.mem-three-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.4vw, 22px);
}

.mem-three-card {
    display: block;
    color: var(--ink);
    text-decoration: none;
}

.mem-three-film {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--stone-2);
}

.mem-three-film video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s var(--ease);
}

.mem-three-card:hover .mem-three-film video {
    transform: scale(1.03);
}

.mem-three-name {
    display: block;
    font-family: var(--face);
    font-weight: 300;
    font-size: min(clamp(22px, 1.8vw, 26px), 28px + (clamp(22px, 1.8vw, 26px) - 28px) * 0.6);
    line-height: 1.2;
    margin-top: 16px;
}

.mem-three-line {
    display: block;
    font-family: var(--serif);
    font-size: 16.5px;
    line-height: 1.45;
    color: var(--ink-55);
    margin-top: 4px;
}

/* ---- the price: the heading as the thing to do, the reference's size */
.mem-price-top h2 {
    font-weight: 300;
    font-size: min(clamp(30px, 3vw, 46px), 28px + (clamp(30px, 3vw, 46px) - 28px) * 0.6);
    letter-spacing: -0.01em;
}

/* ---- the gift, quiet: words left, a tall photograph right */
.mem-gift.is-quiet {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
}

.mem-gift.is-quiet .mem-gift-shot {
    aspect-ratio: 4 / 5;
}

.mem-gift.is-quiet h2 {
    font-weight: 300;
    font-size: min(clamp(30px, 3vw, 46px), 28px + (clamp(30px, 3vw, 46px) - 28px) * 0.6);
}

.mem-gift-words > p {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-75);
    margin: 0;
}

.mem-gift.is-quiet .mem-gifts {
    margin-top: 36px;
    gap: 0;
    max-width: 440px;
}

/* Fixed columns, so the prices stand one above the other whatever the
   length of the link beside them. */
.mem-gift.is-quiet .mem-gifts li {
    grid-template-columns: 1fr 64px 136px;
    gap: 28px;
    align-items: baseline;
    padding: 16px 0;
    border-top: 1px solid var(--ink-20);
}

.mem-gift.is-quiet .mem-gifts li:last-child {
    border-bottom: 1px solid var(--ink-20);
}

.mem-gift.is-quiet .mem-gifts span {
    font-size: 17px;
    color: var(--ink);
}

.mem-gift.is-quiet .mem-gifts b {
    font: 400 22px/1 var(--face);
    text-align: right;
}

.mem-gift.is-quiet .mem-gifts .mem-link {
    justify-self: end;
}

@media (max-width: 760px) {
    .mem-three-row,
    .mem-gift.is-quiet {
        grid-template-columns: 1fr;
    }

    .mem-three-row {
        gap: 36px;
    }

    .mem-gift.is-quiet .mem-gift-shot {
        order: -1;
    }
}

/* ---- two seasons: plate A of /design-2026/membership-sections/, chosen by
   Jack on 30 September ("love A Two season"), in the simple page's voice. */
.mem-seasons {
    padding-top: 0;
}

/* The heading left, its one line at the right, both on the same foot. */
.mem-seasons-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: end;
    margin: 0 0 clamp(28px, 3vw, 44px);
}

.mem-seasons-head h2 {
    font-family: var(--face);
    font-weight: 300;
    font-size: min(clamp(30px, 3vw, 46px), 28px + (clamp(30px, 3vw, 46px) - 28px) * 0.6);
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0 0 0 -0.02em;
    max-width: 16ch;
}

.mem-seasons-head p {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-75);
    margin: 0;
    max-width: 44ch;
}

.mem-seasons-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mem-season-gap, 14px);
}

.mem-season {
    position: relative;
    height: var(--mem-season-h, clamp(440px, 46vw, 680px));
    overflow: hidden;
    background: var(--stone-2);
}

.mem-season video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Dark at the foot only, where the season stands. */
.mem-season::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(20, 24, 21, 0.55) 0%, rgba(20, 24, 21, 0) 55%);
    pointer-events: none;
}

.mem-season-words {
    position: absolute;
    left: clamp(22px, 2.6vw, 38px);
    right: clamp(22px, 2.6vw, 38px);
    bottom: clamp(22px, 2.4vw, 34px);
    z-index: 1;
    color: var(--shell);
}

.mem-season-words b {
    display: block;
    font-family: var(--face);
    font-weight: 300;
    font-size: var(--mem-season-word, clamp(60px, 7vw, 108px));
    line-height: 0.9;
    letter-spacing: -0.03em;
}

.mem-season-words span {
    display: block;
    font-family: var(--serif);
    font-size: 17px;
    margin-top: 14px;
    color: rgba(249, 245, 238, 0.92);
}

@media (max-width: 760px) {
    .mem-seasons-head,
    .mem-seasons-pair {
        grid-template-columns: 1fr;
    }

    .mem-seasons-head {
        gap: 14px;
    }

    .mem-season {
        height: 420px;
    }
}


/* =====================================================================
   A YEAR OF IT, 1 October 2026. Jack: "the digital or printed choice at
   the CTA at the bottom and the rest os showcasgin everything they get in
   a year". Three parts, each saying whose it is, then the one choice.
   ===================================================================== */

/* Whose it is: a plain line above each part, in the words' own face. */
.mem-tag {
    font-family: var(--serif);
    font-size: 17px;
    color: var(--ink-55);
    margin: 0 0 16px;
}

/* ---- the back catalogue: the covers in one row, drifting */
.mem-back {
    padding-top: 0;
    overflow: hidden;
}

.mem-drift {
    overflow: hidden;
}

.mem-drift-lane {
    display: flex;
    gap: var(--mem-drift-gap, 18px);
    width: max-content;
    animation: mem-drift var(--mem-drift-speed, 110s) linear infinite;
}

/* At their own shape, never cropped to a strip. */
.mem-drift-lane img {
    height: var(--mem-drift-h, clamp(220px, 21vw, 340px));
    width: auto;
    display: block;
    background: var(--stone-2);
}

.mem-drift:hover .mem-drift-lane {
    animation-play-state: paused;
}

/* The lane is drawn twice, so half its width is one whole pass. */
@keyframes mem-drift {
    from { transform: translateX(0) }
    to   { transform: translateX(calc(-50% - var(--mem-drift-gap, 18px) / 2)) }
}

@media (prefers-reduced-motion: reduce) {
    .mem-drift {
        overflow-x: auto;
    }

    .mem-drift-lane {
        animation: none;
    }
}

/* ---- two films, not three */
.mem-three-row.is-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mem-three-row.is-two .mem-three-film {
    aspect-ratio: 4 / 3;
}

@media (max-width: 760px) {
    .mem-three-row.is-two {
        grid-template-columns: 1fr;
    }
}


/* ---- Digital's picture: a tablet holding the latest cover (1 October) */

/* The ground is oat, a warm paper, so the card stands beside the printed
   photograph's wood rather than going grey next to it. */
.mem-pickshot.mem-pickdevice {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--oat);
    padding: 7% 0;
}

/* The tablet: a dark bezel, a little rounded as a tablet is, and the shadow
   of something standing on a table. */
.mem-device {
    display: block;
    height: 100%;
    aspect-ratio: 3 / 4;
    padding: 2.6%;
    background: #414042;
    border-radius: 14px;
    box-shadow: 0 22px 44px rgba(43, 48, 29, 0.28), 0 2px 6px rgba(43, 48, 29, 0.2);
}

/* `.mem-pickshot img` stretches a picture to fill the card; here it fills the
   tablet's screen instead, and every property that rule sets is said again. */
.mem-pickshot.mem-pickdevice .mem-device img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    border-radius: 5px;
    background: #fff;
}


/* ---- the main things, a name and one line each (1 October) */
.mem-gets {
    list-style: none;
    margin: clamp(40px, 4.4vw, 68px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(22px, 2.4vw, 40px);
}

.mem-gets li {
    border-top: 1px solid var(--ink-20);
    padding-top: 20px;
}

.mem-gets b {
    display: block;
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(22px, 1.8vw, 27px), 28px + (clamp(22px, 1.8vw, 27px) - 28px) * 0.6);
    line-height: 1.15;
    margin: 0 0 8px;
}

.mem-gets span {
    display: block;
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink-75);
}

@media (max-width: 1000px) {
    .mem-gets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .mem-gets {
        grid-template-columns: 1fr;
    }
}


/* =====================================================================
   1 October, later: in every parcel, and the choice asked plainly.
   ===================================================================== */

/* ---- in every parcel: the photograph, and three lines */
.mem-parcel {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 90px);
    align-items: center;
    margin-top: var(--mem-season-gap, 14px);
}

.mem-parcel-shot {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--stone-2);
}

.mem-parcel-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mem-parcel h3 {
    font-family: var(--face);
    font-weight: 300;
    font-size: min(clamp(28px, 2.6vw, 40px), 28px + (clamp(28px, 2.6vw, 40px) - 28px) * 0.6);
    line-height: 1.1;
    margin: 0 0 4px -0.02em;
}

.mem-parcel .mem-in li {
    font-size: clamp(17px, 1.3vw, 20px);
}

/* ---- the choice: before anything is picked, both cards stand in full
   colour (the "not chosen" grey only means something once one is), and the
   slot is not there at all. */
.mem-box:not(.is-picked) .mem-pickcard:not(.is-on) .mem-pickshot img {
    filter: none;
    opacity: 1;
}

.mem-slot.is-waiting {
    display: none;
}

/* One sentence under the price, at reading size. */
.mem-pickline {
    display: block;
    padding-top: 18px;
    border-top: 1px solid var(--ink-20);
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-75);
}

@media (max-width: 760px) {
    .mem-parcel {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 28px;
    }
}


/* =====================================================================
   EVERY SECTION ON ITS OWN GROUND, 1 October. Jack: "should be split into
   sections with differnet coloured backgroudn like we have been doing".
   Three paper sections in a row read as one long one. Now: paper (the
   line), forest (in print), paper (yours the moment you join), stone (the
   choice), oat (the gift), stone (places to stay), then the footer.
   ===================================================================== */

/* These two flowed on from the section above with no top padding; on a
   ground of their own they take the band's full padding again. */
.band.mem-seasons,
.band.mem-back {
    padding-top: clamp(72px, 10vh, 130px);
}

/* The opening line no longer needs the extra foot it had to separate it
   from a section on the same ground. */
.band.mem-say {
    padding-bottom: clamp(72px, 9vw, 130px);
}

/* ---- in print, on forest: every colour that was ink becomes the forest's
   own light, said together so nothing is left in ink on a dark ground. */
.forest.mem-seasons .mem-tag {
    color: var(--on-forest-55);
}

.forest.mem-seasons .mem-seasons-head h2,
.forest.mem-seasons .mem-parcel h3 {
    color: var(--on-forest);
}

.forest.mem-seasons .mem-seasons-head p {
    color: rgba(241, 237, 232, 0.82);
}

.forest.mem-seasons .mem-in li {
    color: rgba(241, 237, 232, 0.92);
}

.forest.mem-seasons .mem-in li::before {
    border-color: var(--shell);
}

.forest.mem-seasons .mem-season,
.forest.mem-seasons .mem-parcel-shot {
    background: var(--moss);
}

/* ---- the gift, on oat */
/* _shared.css says .band:not(.stone):not(.forest){background:transparent},
   three classes heavy, so a plain .band.mem-oat lost to it and the gift
   stayed on paper. Same weight here, and later, so this one wins. */
.band.mem-oat:not(.stone):not(.forest) {
    background: var(--oat, #F5F1E9);
}


/* ---- the words, 1 October: the sentence under "Wrapped up like a present" */
.mem-parcel-says {
    font-family: var(--serif);
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 1.55;
    color: var(--ink-75);
    margin: 12px 0 0;
    max-width: 36ch;
}

.forest.mem-seasons .mem-parcel-says {
    color: rgba(241, 237, 232, 0.86);
}

/* The welcome's paragraph is the first thing read: a little larger. */
.mem-say-more {
    max-width: 48ch;
}


/* ---- what you get as a member: six things, three across, on stone */
.mem-get .mem-gets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(36px, 4vw, 60px) clamp(24px, 3vw, 48px);
    margin: clamp(36px, 4vw, 56px) 0 clamp(40px, 4.4vw, 64px);
}

.mem-get .mem-gets li {
    border-top-color: var(--ink-35);
}

/* Which membership it comes with: a plain line above the name. */
.mem-gets i {
    display: block;
    font: normal 400 15.5px/1.3 var(--serif);
    color: var(--tweed);
    margin: 0 0 12px;
}

.mem-get .mem-gets b {
    font-size: min(clamp(24px, 2.1vw, 31px), 28px + (clamp(24px, 2.1vw, 31px) - 28px) * 0.6);
    font-weight: 300;
}

/* The welcome ends on its paragraph now; the link moved to the section below. */
.mem-say .mem-say-more {
    margin-bottom: 0;
}

@media (max-width: 1000px) {
    .mem-get .mem-gets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .mem-get .mem-gets {
        grid-template-columns: 1fr;
    }
}


/* ---- obvious and concise, 1 October: the head is a heading alone, so it
   is one column; the note of which membership sits under the fact. */
.mem-seasons-head {
    grid-template-columns: 1fr;
}

.mem-seasons-head h2 {
    max-width: none;
}

.mem-gets i {
    margin: 10px 0 0;
}

.mem-get .mem-gets {
    margin-top: clamp(28px, 3vw, 44px);
}


/* =====================================================================
   THE AFTERNOON OF 1 OCTOBER, one pass over Jack's notes.
   ===================================================================== */

/* ---- the hero: the darker film needs less veil at the middle, more all over */
.mem-hero.is-name::after {
    background:
        linear-gradient(180deg, rgba(65, 64, 66, 0.5) 0%, rgba(65, 64, 66, 0) 22%),
        rgba(65, 64, 66, 0.3);
}

/* ---- the opening: words and the way in at the left, a photograph at the right */
.mem-say-two {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(36px, 6vw, 110px);
    align-items: center;
}

.mem-say-two .mem-say-big {
    font-size: min(clamp(34px, 4vw, 66px), 28px + (clamp(34px, 4vw, 66px) - 28px) * 0.6);
    max-width: 12ch;
}

.mem-say .mem-say-more {
    margin-bottom: clamp(28px, 3vw, 40px);
}

.mem-say-acts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.mem-say-acts span {
    font-family: var(--serif);
    font-size: 17px;
    color: var(--ink-75);
}

/* The one filled button above the price box: Tweed ground, Shell words. */
.band .in .mem-say-acts .btn {
    --hover-bg: var(--cask);
    --hover-color: var(--shell);
    background: var(--tweed);
    border-color: var(--tweed);
    color: var(--shell);
    height: 54px;
    min-height: 54px;
    padding: 0 34px;
    font-size: 15.5px;
}

.mem-say-shot {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--stone-2);
}

.mem-say-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.band.mem-say {
    padding-top: clamp(72px, 9vw, 130px);
}

/* ---- what you get: six small picture cards */
.mem-cards {
    list-style: none;
    margin: clamp(24px, 2.6vw, 38px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(12px, 1.3vw, 20px);
}

.mem-card-shot {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--stone-2);
    margin: 0 0 14px;
}

.mem-card-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mem-cards b {
    display: block;
    font-family: var(--face);
    font-weight: 400;
    font-size: clamp(19px, 1.35vw, 22px);
    line-height: 1.18;
    margin: 0 0 6px;
}

.mem-cards li > span:not(.mem-card-shot) {
    display: block;
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.45;
    color: var(--ink-75);
}

.mem-cards i {
    display: block;
    font: normal 400 15px/1.3 var(--serif);
    color: var(--tweed);
    margin: 8px 0 0;
}

@media (max-width: 1100px) {
    .mem-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px 16px;
    }
}

@media (max-width: 560px) {
    .mem-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- in every parcel, its own section, on paper */
.mem-parcel-band .mem-parcel {
    margin-top: 0;
}

.mem-parcel h2 {
    font-family: var(--face);
    font-weight: 300;
    font-size: min(clamp(30px, 3vw, 46px), 28px + (clamp(30px, 3vw, 46px) - 28px) * 0.6);
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0 0 6px -0.02em;
}

/* ---- the cards' own button: drawn as the house button, since the card is
   the thing pressed; filled once it is the one chosen. */
.mem-pickgo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin-top: 22px;
    border: 1px solid var(--tweed);
    color: var(--tweed);
    font: 400 14.5px/1 var(--sans);
    transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.mem-pickcard:hover .mem-pickgo,
.mem-pickcard.is-on .mem-pickgo {
    background: var(--tweed);
    color: var(--shell);
}

/* ---- where to send it: two choices, each a place and what it costs */
.mem-slot-opts .mem-opt.is-two {
    height: auto;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    text-align: left;
}

.mem-opt.is-two b {
    font: 400 22px/1.15 var(--face);
}

.mem-opt.is-two span {
    font: 400 16px/1.4 var(--serif);
    opacity: 0.86;
}

/* ---- the gift: how it works, numbered */
.mem-gift-how {
    list-style: none;
    counter-reset: how;
    margin: 26px 0 0;
    padding: 0;
    display: grid;
    gap: 18px;
    max-width: 480px;
}

.mem-gift-how li {
    counter-increment: how;
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: 14px;
}

.mem-gift-how li::before {
    content: counter(how);
    grid-row: 1 / 3;
    font: 300 30px/1 var(--face);
    color: var(--tweed);
}

.mem-gift-how b {
    font: 400 21px/1.2 var(--face);
}

.mem-gift-how span {
    font: 400 17px/1.5 var(--serif);
    color: var(--ink-75);
}

.mem-gift.is-quiet .mem-gift-acts {
    margin-top: 30px;
}

@media (max-width: 860px) {
    .mem-say-two {
        grid-template-columns: 1fr;
    }
}


/* ---- the hero's film, graded dark: the light still crosses the cover, but
   the wool and the bright corner come down, and the mark stands clear. */
.mem-hero.is-name video {
    filter: brightness(0.62) contrast(1.08) saturate(0.92);
}

.mem-hero.is-name::after {
    background: linear-gradient(180deg, rgba(65, 64, 66, 0.45) 0%, rgba(65, 64, 66, 0) 22%);
}

/* ---- the six cards: a two-line name and nothing else */
.mem-cards b {
    margin: 0;
    white-space: nowrap;
    font-size: clamp(17px, 1.3vw, 21px);
    line-height: 1.22;
}


/* =====================================================================
   1 October, second pass.
   ===================================================================== */

/* ---- the two cards always line up: each is a column, its words take the
   room, and the button sits on the foot whatever the words do. */
.mem-pickcard .mem-pickbody {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.mem-pickbody .mem-pickline {
    flex: 1 1 auto;
}

/* ---- film in the parcel and the gift: fills its frame as a photograph did */
.mem-parcel-shot video,
.mem-gift-shot video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mem-parcel-shot {
    aspect-ratio: 16 / 10;
}

.mem-parcel h2 {
    max-width: 12ch;
}

/* ---- the gift: the film at the left, wider than tall; the first button filled */
.mem-gift.is-quiet .mem-gift-shot {
    aspect-ratio: 4 / 3;
}

.mem-gift.is-quiet h2 {
    max-width: 14ch;
    line-height: 1.08;
}

.band .in .mem-gift-acts .btn:first-child {
    --hover-bg: var(--cask);
    --hover-color: var(--shell);
    background: var(--tweed);
    border-color: var(--tweed);
    color: var(--shell);
}


/* ---- the first year as four picture cards (1 October). Every property the
   rail-and-marker version set is said again here, so nothing of it is left
   fighting: no rail, no marker, no connector on a phone. */
.mem-year.is-cards {
    gap: clamp(12px, 1.4vw, 18px);
    margin-top: 24px;
}

.mem-year.is-cards::before {
    display: none;
}

.mem-year.is-cards li {
    display: flex;
    flex-direction: column;
    padding: 0 0 22px;
    background: var(--paper);
    border: 1px solid var(--ink-20);
}

.mem-year.is-cards li::before,
.mem-year.is-cards li::after {
    display: none;
}

.mem-year-pic {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(150px, 13vw, 190px);
    padding: 20px 0;
    margin: 0 0 18px;
    background: var(--oat, #F5F1E9);
}

/* A small tablet takes a small shadow: the price card's one fell out of the
   picture and across the card's words. */
.mem-year-pic .mem-device {
    border-radius: 9px;
    box-shadow: 0 8px 18px rgba(43, 48, 29, 0.22);
}

.mem-year-pic {
    overflow: hidden;
}

.mem-year-pic .mem-device img,
.mem-year-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    background: #fff;
}

.mem-year-pic .mem-device img {
    border-radius: 3px;
}

/* A cover at its own shape, with the shadow of a thing lying on a table. */
.mem-year-cover,
.mem-year-blank {
    width: auto;
    height: 100%;
    aspect-ratio: 3 / 4;
    box-shadow: 0 10px 22px rgba(43, 48, 29, 0.2);
}

/* An issue not printed yet: a blank cover with its number. */
.mem-year-blank {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 9px 10px;
    background: #fff;
}

.mem-year-blank i {
    font: normal 600 6.5px/1.2 var(--sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    max-width: 6em;
}

.mem-year-blank b {
    font: 300 min(34px, 28px + (34px - 28px) * 0.6)/1 var(--face);
    color: var(--ink-35);
    text-align: right;
}

/* The renewal: what it will cost. */
.mem-year-sum {
    text-align: center;
}

.mem-year-sum b {
    display: block;
    font: 400 min(clamp(38px, 3.4vw, 50px), 28px + (clamp(38px, 3.4vw, 50px) - 28px) * 0.6)/1 var(--face);
    letter-spacing: -0.016em;
}

.mem-year-sum i {
    font: normal 400 16px/1.3 var(--serif);
    color: var(--ink-55);
}

.mem-year.is-cards .mem-year-when,
.mem-year.is-cards .mem-year-says {
    padding: 0 20px;
}

@media (max-width: 1100px) {
    .mem-year.is-cards {
        grid-template-columns: 1fr 1fr;
        max-width: 880px;
        margin-inline: auto;
    }

    .mem-year.is-cards li {
        padding: 0 0 22px;
    }
}

@media (max-width: 520px) {
    .mem-year.is-cards {
        grid-template-columns: 1fr;
    }
}


/* ---- the unwrapping: three photographs under the parcel, the gap the cards use */
/* as many across as there are pictures (three, then four with the magazine itself, 8 October 2026) */
.mem-parcel-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: clamp(12px, 1.4vw, 18px);
    margin-top: clamp(12px, 1.4vw, 18px);
}

.mem-parcel-row img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    background: var(--stone-2);
}

.mem-parcel-band .mem-parcel {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
}

.mem-parcel-band .mem-parcel-shot {
    aspect-ratio: 3 / 2;
}

@media (max-width: 760px) {
    .mem-parcel-band .mem-parcel,
    .mem-parcel-row {
        grid-auto-flow: row;
        grid-template-columns: 1fr;
    }
}


/* ---- the first year as a timeline (1 October, later). A bar for what runs
   all year, then the line: each moment's picture above its mark, its date and
   one line beneath. Every property the base rail and marker set is said again
   here, since the picture now sits above them. */
.mem-year-span {
    max-width: 880px;
    margin: 20px auto 0;
    padding: 16px 22px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 20px;
    background: var(--forest);
    color: var(--on-forest);
}

.mem-year-span b {
    font: 400 clamp(19px, 1.5vw, 23px)/1.2 var(--face);
}

.mem-year-span span {
    font: 400 16px/1.3 var(--serif);
    color: rgba(241, 237, 232, 0.8);
}

.mem-year.is-line {
    --pic: 132px;
    gap: 24px;
    margin-top: 26px;
}

.mem-year.is-line::before {
    top: calc(var(--pic) + 25px);
    left: 7px;
    right: calc((100% + 24px) / var(--steps, 4) - 24px - 7px);
    height: 2px;
    background: var(--ink-35);
}

.mem-year.is-line li {
    padding: 0;
}

.mem-year.is-line li::before {
    top: calc(var(--pic) + 18px);
    left: 0;
}

.mem-year.is-line .mem-year-pic {
    height: var(--pic);
    padding: 0;
    margin: 0 0 54px;
    justify-content: flex-start;
    align-items: flex-end;
    background: none;
    overflow: visible;
}

.mem-year.is-line .mem-year-sum {
    text-align: left;
}

.mem-year.is-line .mem-year-when,
.mem-year.is-line .mem-year-says {
    padding: 0;
}

@media (max-width: 1100px) {
    /* Stood up: the mark and the line at the left, the picture small beside
       the words. */
    .mem-year.is-line {
        --pic: 84px;
        grid-template-columns: 1fr;
        gap: 26px;
        max-width: 880px;
    }

    .mem-year.is-line::before {
        display: none;
    }

    .mem-year.is-line li {
        padding: 0 0 0 40px;
        display: grid;
        grid-template-columns: 76px 1fr;
        column-gap: 16px;
        align-items: center;
    }

    .mem-year.is-line li::before {
        top: 50%;
        margin-top: -8px;
    }

    .mem-year.is-line li:not(:last-child)::after {
        content: '';
        display: block;
        position: absolute;
        top: calc(50% + 8px);
        bottom: calc(-50% - 18px);
        left: 7px;
        width: 2px;
        background: var(--ink-35);
    }

    .mem-year.is-line .mem-year-pic {
        grid-row: 1 / 3;
        margin: 0;
        align-items: center;
    }

    .mem-year.is-line .mem-year-when {
        align-self: end;
    }

    .mem-year.is-line .mem-year-says {
        align-self: start;
    }
}


/* ---- the daily magazine (1 October): film at the left, the two editions as
   one table read across at the right, the member's column in the light. */
.mem-day-two {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(32px, 5vw, 90px);
    align-items: center;
}

.mem-day-film {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--moss);
}

.mem-day-film video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mem-day h2 {
    font-family: var(--face);
    font-weight: 300;
    font-size: min(clamp(30px, 3vw, 46px), 28px + (clamp(30px, 3vw, 46px) - 28px) * 0.6);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--on-forest);
    margin: 0 0 clamp(24px, 2.6vw, 36px) -0.02em;
    max-width: 16ch;
}

.mem-day-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.mem-day-table p {
    margin: 0;
    padding: 16px 22px;
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.4;
    color: rgba(241, 237, 232, 0.62);
    border: 1px solid rgba(241, 237, 232, 0.2);
    border-top: none;
    border-right: none;
}

.mem-day-table p.is-yours {
    background: var(--shell);
    color: var(--ink);
    border-color: rgba(65, 64, 66, 0.14);
    border-left: none;
}

.mem-day-table p.mem-day-h {
    font: 400 22px/1.2 var(--face);
    padding-top: 20px;
    padding-bottom: 14px;
    color: rgba(241, 237, 232, 0.8);
    border-top: 1px solid rgba(241, 237, 232, 0.2);
}

.mem-day-table p.mem-day-h.is-yours {
    color: var(--ink);
    border-top-color: var(--shell);
}

.mem-day .in .btn {
    margin-top: 28px;
}

@media (max-width: 860px) {
    .mem-day-two {
        grid-template-columns: 1fr;
    }

    .mem-day-film {
        aspect-ratio: 4 / 3;
    }

    .mem-day-table p {
        padding: 12px 14px;
        font-size: 16px;
    }
}


/* ---- the daily section, what a member gets each morning (1 October, later) */
.mem-day-film {
    aspect-ratio: 4 / 3;
}

.mem-day-two {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.mem-day h2 {
    margin-bottom: 18px;
}

.mem-day-says {
    font-family: var(--serif);
    font-size: 17px;
    color: rgba(241, 237, 232, 0.8);
    margin: 0;
}

.mem-day .mem-in {
    margin-top: 16px;
}

.mem-day .mem-in li {
    font-size: clamp(17px, 1.3vw, 20px);
    color: rgba(241, 237, 232, 0.94);
}

.mem-day .mem-in li::before {
    border-color: var(--shell);
}

@media (max-width: 860px) {
    .mem-day-two {
        grid-template-columns: 1fr;
    }
}


.mem-day h2 {
    max-width: 15ch;
}

/* =====================================================================
   YOUR DETAILS (/join), redrawn 1 October 2026: docs/MEMBERSHIP-PLAN.md,
   stage 2. The form at the left; what they chose and their first year at
   the right, there until the button is pressed.
   ===================================================================== */
.mem-join-h {
    font-family: var(--face);
    font-weight: 300;
    font-size: min(clamp(34px, 3.6vw, 54px), 28px + (clamp(34px, 3.6vw, 54px) - 28px) * 0.6);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0 0 clamp(24px, 3vw, 40px) -0.02em;
}

.mem-join-note {
    font-family: var(--serif);
    font-size: 17px;
    color: var(--tweed);
    margin: -12px 0 28px;
}

.mem-join-two {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 90px);
    align-items: start;
}

/* ---- the form: a paper panel, labels above their boxes, everything at reading size */
.mem-join-form {
    background: var(--paper);
    border: 1px solid var(--ink-20);
    padding: clamp(22px, 2.8vw, 40px);
    display: grid;
    gap: 18px;
}

/* THE PAYMENT STEP (13 October 2026): Stripe's own card form in the details box, so nobody leaves the page to pay
   (Jack: "so its beautifually seamliess"). Where it goes, a line; the form; the small print. */
.mem-join-form.is-pay {
    gap: 22px;
    align-content: start;
    padding-left: 0;
    padding-right: 0;
}

/* Stripe's form runs to the box's edges on the same ground (#FFFFF7, set on the session) and centres itself in a
   column 418px wide; the words above and below stand in that same column. */
.mem-join-form.is-pay > p {
    padding: 0 max(clamp(22px, 2.8vw, 40px), calc((100% - 418px) / 2));
}

.mem-join-to {
    margin: 0;
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-75);
}

.mem-join-to .mem-link {
    font-size: inherit;
    white-space: nowrap;
}

.mem-join-pay {
    min-height: 460px;
}

.mem-join-pay:empty {
    min-height: 0;
}

.mem-join-note button.mem-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* PAYMENT RECEIVED, the first thing after paying (13 October 2026): a tick and one plain sentence above the welcome */
.mem-join-paid {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 46em;
    margin: 0 0 22px;
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.5;
    color: var(--ink);
}

.mem-join-paid b {
    font-weight: 600;
}

.mem-join-paid svg {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    fill: none;
    stroke: var(--forest);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mem-join-paid.is-wait {
    color: var(--ink-75);
}

/* the questions, offered under Start reading: space above, no line */
.mem-join-next {
    display: grid;
    gap: 10px;
    margin-top: 30px;
}

.mem-join-form h2 {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(22px, 2vw, 27px), 28px + (clamp(22px, 2vw, 27px) - 28px) * 0.6);
    line-height: 1.15;
    margin: 14px 0 0;
}

.mem-field {
    display: grid;
    gap: 7px;
}

.mem-field span {
    font-family: var(--serif);
    font-size: 16px;
    color: var(--ink-75);
}

.mem-field input {
    width: 100%;
    height: 54px;
    padding: 0 16px;
    border: 1px solid var(--ink-35);
    border-radius: 0;
    background: #fff;
    color: var(--ink);
    font: 400 17px/1 var(--serif);
}

.mem-field input:focus {
    outline: 2px solid var(--forest);
    outline-offset: 1px;
    border-color: var(--forest);
}

.mem-field small {
    font-family: var(--serif);
    font-size: 15.5px;
    color: var(--tweed);
}

.mem-field-two {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 14px;
}

.mem-join-signed {
    font-family: var(--serif);
    font-size: 17px;
    color: var(--ink-75);
    margin: 0;
}

/* The one filled button: Tweed ground, Shell words, the whole width of the form.
   Outweighs _bar.css's `.band .in .btn` and `.form button`, all five properties. */
.band .in .mem-join-form .btn {
    --hover-bg: var(--cask);
    --hover-color: var(--shell);
    background: var(--tweed);
    border-color: var(--tweed);
    color: var(--shell);
    width: 100%;
    height: 56px;
    min-height: 56px;
    justify-content: center;
    font-size: 16px;
    margin-top: 10px;
}

.mem-join-fine {
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-55);
    margin: 0;
    text-align: center;
}

.mem-join-fine .mem-link {
    font-size: 16px;
}

/* ---- the right: the choice on forest, then the year */
.mem-join-sum {
    background: var(--forest);
    color: var(--on-forest);
    padding: clamp(22px, 2.6vw, 34px);
}

.mem-join-sum .mem-sum-name {
    font-size: min(clamp(28px, 2.8vw, 38px), 28px + (clamp(28px, 2.8vw, 38px) - 28px) * 0.6);
    margin-bottom: 14px;
}

.mem-join-sum .mem-total {
    margin: 20px 0 0;
    padding-top: 16px;
}

.mem-join-sum .mem-total span {
    font: 400 17px/1.3 var(--serif);
    letter-spacing: 0;
    text-transform: none;
    color: rgba(241, 237, 232, 0.86);
}

.mem-join-swap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 16px 0 0;
}

.mem-join-swap a {
    font-family: var(--serif);
    font-size: 15.5px;
    color: var(--shell);
    opacity: 0.8;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.mem-join-swap a:hover {
    opacity: 1;
}

/* ---- the year, stood up: the line at the left at every width. The same rules
   the wide timeline takes below 1100, said for this placing. */
.mem-yr.is-down .mem-year-head {
    margin: clamp(28px, 3vw, 40px) 0 0;
    max-width: none;
    font-size: min(clamp(22px, 2vw, 27px), 28px + (clamp(22px, 2vw, 27px) - 28px) * 0.6);
}

.mem-yr.is-down .mem-year-span {
    max-width: none;
    margin: 14px 0 0;
}

.mem-yr.is-down .mem-year.is-line {
    --pic: 84px;
    grid-template-columns: 1fr;
    gap: 26px;
    max-width: none;
    margin: 24px 0 0;
}

.mem-yr.is-down .mem-year.is-line::before {
    display: none;
}

.mem-yr.is-down .mem-year.is-line li {
    padding: 0 0 0 40px;
    display: grid;
    grid-template-columns: 76px 1fr;
    column-gap: 16px;
    align-items: center;
}

.mem-yr.is-down .mem-year.is-line li::before {
    top: 50%;
    margin-top: -8px;
}

.mem-yr.is-down .mem-year.is-line li:not(:last-child)::after {
    content: '';
    display: block;
    position: absolute;
    top: calc(50% + 8px);
    bottom: calc(-50% - 18px);
    left: 7px;
    width: 2px;
    background: var(--ink-35);
}

.mem-yr.is-down .mem-year.is-line .mem-year-pic {
    grid-row: 1 / 3;
    margin: 0;
    align-items: center;
}

.mem-yr.is-down .mem-year.is-line .mem-year-when {
    align-self: end;
}

.mem-yr.is-down .mem-year.is-line .mem-year-says {
    align-self: start;
}

.mem-yr.is-down .mem-year-sum b {
    font-size: 30px;
}

@media (max-width: 860px) {
    .mem-join-two {
        grid-template-columns: 1fr;
    }
}


/* ---- the address search and the country (1 October, later) */
.mem-find {
    position: relative;
}

.mem-find-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 4;
    background: #fff;
    border: 1px solid var(--ink-35);
    border-top: none;
    box-shadow: 0 14px 30px rgba(43, 48, 29, 0.14);
}

.mem-find-list button {
    display: block;
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-top: 1px solid var(--ink-20);
    background: none;
    text-align: left;
    font: 400 17px/1.35 var(--serif);
    color: var(--ink);
    cursor: pointer;
}

.mem-find-list li:first-child button {
    border-top: none;
}

.mem-find-list button:hover,
.mem-find-list button:focus-visible {
    background: var(--stone);
    outline: none;
}

.mem-find-says {
    font: 400 16px var(--serif);
    color: var(--ink-55);
    margin: 8px 0 0;
}

.mem-field select {
    width: 100%;
    height: 54px;
    padding: 0 12px;
    border: 1px solid var(--ink-35);
    border-radius: 0;
    background: #fff;
    color: var(--ink);
    font: 400 17px/1 var(--serif);
}

.mem-field input::placeholder {
    color: var(--ink-35);
}


/* ---- the timeline with photographs (1 October, later): each moment a real photograph the width of its
   column, the line and its mark beneath, then the date and one line. Every size the drawn pictures set is
   said again, since a photograph fills its frame and they did not. */
.mem-year.is-line {
    --pic: clamp(120px, 11vw, 150px);
}

.mem-year.is-line .mem-year-pic {
    display: block;
    width: 100%;
    height: var(--pic);
    padding: 0;
    overflow: hidden;
    background: var(--stone-2);
}

.mem-year-pic > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Stood up beside a form or on a phone: a small square photograph. */
.mem-yr.is-down .mem-year.is-line {
    --pic: 84px;
}

.mem-yr.is-down .mem-year.is-line li {
    grid-template-columns: 84px 1fr;
}

.mem-yr.is-down .mem-year.is-line .mem-year-pic {
    width: 84px;
}

@media (max-width: 1100px) {
    .mem-year.is-line {
        --pic: 84px;
    }

    .mem-year.is-line li {
        grid-template-columns: 84px 1fr;
    }

    .mem-year.is-line .mem-year-pic {
        width: 84px;
    }
}


/* =====================================================================
   THE GIFT (/gift, /gift/sent, /gift/{code}), redrawn 1 October 2026 on the
   join page's parts: one form, the choice on forest beside it.
   ===================================================================== */
.mem-join-h {
    max-width: 22ch;
}

.mem-join-form h2.is-first {
    margin-top: 0;
}

.mem-join-form .mem-slot-opts .mem-opt {
    flex: 1 1 200px;
}

.mem-field textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--ink-35);
    border-radius: 0;
    background: #fff;
    color: var(--ink);
    font: 400 17px/1.5 var(--serif);
    resize: vertical;
}

.mem-field textarea:focus {
    outline: 2px solid var(--forest);
    outline-offset: 1px;
    border-color: var(--forest);
}

.mem-join-hint {
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-55);
    margin: -6px 0 0;
}

.mem-join-fine.is-left {
    text-align: left;
}

/* The film above the choice. */
.mem-join-shot {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--stone-2);
}

.mem-join-shot video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mem-join-side .mem-gift-how {
    margin-top: clamp(24px, 2.6vw, 36px);
    max-width: none;
}

.mem-join-form .mem-gift-how {
    margin-top: 0;
    max-width: none;
}

/* The note, as the person it is for reads it. */
.mem-gift-note {
    font-family: var(--face);
    font-weight: 300;
    font-size: min(clamp(22px, 2.2vw, 30px), 28px + (clamp(22px, 2.2vw, 30px) - 28px) * 0.6);
    line-height: 1.3;
    color: var(--ink);
    margin: 0;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--ink-20);
}

.mem-gift-open {
    display: grid;
    gap: 18px;
}

.mem-join-form .mem-in {
    margin-top: 0;
}


/* ---- the welcome (/welcome), 1 October: the cover film, then the one thing to do */
.mem-join-shot.is-tall {
    aspect-ratio: 16 / 9;
}

.mem-join-form.is-under {
    border-top: none;
}

.mem-join-hint.is-body {
    font-size: 17px;
    color: var(--ink-75);
    margin: -6px 0 6px;
}

.mem-join-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    justify-content: center;
    margin: 4px 0 0;
}


/* ---- the magazine's journey (member-journey.tsx), 1 October: Glasgow to their door on the
   itinerary trail's own map (Jack: "can this not be more in the style of the one the itineary is
   using?"). A pale band, the map a plate on it; a wide map (the Atlantic, the world) lies across. */
.band.stone.wj-band {
    padding: clamp(56px, 6vw, 104px) 0;
}

.wj-band .wj-two {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 110px);
    align-items: center;
}

.wj-band.is-wide .wj-two {
    align-items: start;
    margin-top: clamp(32px, 4vw, 56px);
}

.wj-band h2.wj-h {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(32px, 3.3vw, 52px), 28px + (clamp(32px, 3.3vw, 52px) - 28px) * 0.6);
    line-height: 1.1;
    margin: 0 0 18px;
    text-wrap: balance;
    color: var(--ink);
}

.wj-band p.wj-p {
    font-size: 19px;
    line-height: 1.55;
    margin: 0 0 30px;
    max-width: 36ch;
    color: var(--ink-75);
}

.wj-band ol.wj-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ink-20);
}

.wj-steps li {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 14px;
    align-items: baseline;
    padding: 15px 0;
    border-bottom: 1px solid var(--ink-20);
    font-size: 19px;
    color: var(--ink-55);
}

.wj-steps li.on {
    color: var(--ink);
}

.wj-steps li i {
    font-style: normal;
    font-family: var(--face);
    font-size: 22px;
}

.wj-steps li.now i {
    color: #C08C3D;
}

.wj-steps li small {
    display: block;
    font-size: 17px;
    color: var(--ink-75);
}

.wj-steps li:not(.on) small {
    color: var(--ink-55);
}

.wj-stage {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    overflow: hidden;
    /* the map melts into the band at every edge, long and eased, never a line, as the itinerary's does
       (Jack, 1 October: "blur the edges like the itinaery pages"; the stops are the trail's own ease) */
    --wj-x: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .07) 2.4%, rgba(0, 0, 0, .26) 4.8%, rgba(0, 0, 0, .56) 7.2%, rgba(0, 0, 0, .84) 9.6%, #000 12%, #000 88%, rgba(0, 0, 0, .84) 90.4%, rgba(0, 0, 0, .56) 92.8%, rgba(0, 0, 0, .26) 95.2%, rgba(0, 0, 0, .07) 97.6%, transparent 100%);
    --wj-y: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .07) 2%, rgba(0, 0, 0, .26) 4%, rgba(0, 0, 0, .56) 6%, rgba(0, 0, 0, .84) 8%, #000 10%, #000 90%, rgba(0, 0, 0, .84) 92%, rgba(0, 0, 0, .56) 94%, rgba(0, 0, 0, .26) 96%, rgba(0, 0, 0, .07) 98%, transparent 100%);
    -webkit-mask-image: var(--wj-x), var(--wj-y);
    -webkit-mask-composite: source-in;
    mask-image: var(--wj-x), var(--wj-y);
    mask-composite: intersect;
}

.wj-band.is-wide .wj-stage {
    max-width: none;
}

.wj-map {
    display: block;
    width: 100%;
    height: 100%;
}

.wj-map .ring {
    fill: none;
    stroke: #414042;
    transform-box: fill-box;
    transform-origin: center;
    animation: wj-ring 2.4s ease-out infinite;
}

.wj-map .ring.still {
    animation: none;
    opacity: 0;
}

/* the names, on a halo of the ground as the trail's are */
.wj-map text {
    fill: #414042;
    font-family: var(--serif);
    stroke: #F9F5EE;
    stroke-linejoin: round;
    paint-order: stroke;
    transition: opacity .8s;
}

.wj-map text.far {
    font-style: italic;
}

.wj-map .mag {
    transition: opacity .8s;
}

/* close on their town: the drawing's own names and the magazine wait until it has stepped back */
.wj-map.near text,
.wj-map.near .mag {
    opacity: 0;
}

/* their town's own name over it, until the map steps back */
.wj-name {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-100% - 26px));
    white-space: nowrap;
    font-family: var(--face);
    font-size: min(clamp(40px, 4.6vw, 76px), 28px + (clamp(40px, 4.6vw, 76px) - 28px) * 0.6);
    line-height: 1;
    color: var(--ink);
    pointer-events: none;
    transition: opacity 1.2s, transform 1.6s;
}

.wj-name.off {
    opacity: 0;
    transform: translate(-50%, calc(-100% - 44px));
}

@keyframes wj-ring {
    from {
        transform: scale(1);
        opacity: .9;
    }

    to {
        transform: scale(3.4);
        opacity: 0;
    }
}

@media (max-width: 820px) {
    .wj-band .wj-two {
        grid-template-columns: 1fr;
    }

    .wj-band:not(.is-wide) .wj-stage {
        order: -1;
        max-width: 420px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wj-map .ring {
        animation: none;
    }

    .wj-name {
        display: none;
    }
}


/* ---- the welcome, second design (welcome-2.tsx), 1 October: it worked, where to start, where the
   magazine is, make it yours, the paperwork. */
.wel-hero {
    position: relative;
    min-height: min(78vh, 760px);
    display: flex;
    align-items: center;
    background: #414042;
    overflow: hidden;
    text-align: center;
    color: var(--paper);
}

.wel-hero video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.3) saturate(.85);
}

.wel-hero .in {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: calc(var(--bar) + 48px);
    padding-bottom: 72px;
}

.wel-hero p.wel-done {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 26px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--paper);
}

.wel-done svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wel-hero h1.wel-h1 {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(38px, 5vw, 80px), 28px + (clamp(38px, 5vw, 80px) - 28px) * 0.6);
    line-height: 1.04;
    margin: 0 auto 22px;
    max-width: 16ch;
    text-wrap: balance;
    color: var(--paper);
}

.wel-hero p.wel-line {
    font-size: clamp(18px, 1.4vw, 21px);
    line-height: 1.5;
    margin: 0 auto 36px;
    max-width: 36ch;
    color: rgba(251, 249, 246, .88);
    text-wrap: balance;
}

.wel-go {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.wel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 0 44px;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    transition: background .22s;
}

.wel-btn:hover {
    background: var(--stone);
}

/* the same button on a pale band */
.wel-btn.is-ink {
    background: var(--forest);
    color: var(--paper);
}

.wel-btn.is-ink:hover {
    background: var(--moss);
}

.wel-hero p.wel-for {
    font-size: 17px;
    line-height: 1.5;
    margin: -4px auto 0;
    max-width: 34ch;
    color: rgba(251, 249, 246, .82);
    text-wrap: balance;
}

.wel-under {
    font-size: 17px;
    color: var(--paper);
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: rgba(251, 249, 246, .5);
}

/* the headings of the page's parts */
.band h2.wel-h2 {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(32px, 3.3vw, 52px), 28px + (clamp(32px, 3.3vw, 52px) - 28px) * 0.6);
    line-height: 1.1;
    margin: 0 0 14px;
    color: var(--ink);
}

.band p.wel-sub {
    font-size: 19px;
    line-height: 1.55;
    margin: 0 0 36px;
    max-width: 44ch;
    color: var(--ink-75);
}

/* where to start: four doors */
.band.wel-start,
.band.wel-paper {
    background: var(--paper);
    padding: clamp(56px, 6vw, 104px) 0;
}

.wel-doors {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 32px);
}

.wel-doors a {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--ink);
}

.wel-door-shot {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--stone);
    margin: 0 0 20px;
}

.wel-door-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s ease;
}

.wel-doors a:hover .wel-door-shot img {
    transform: scale(1.04);
}

.wel-doors b {
    font-family: var(--face);
    font-weight: 400;
    font-size: clamp(22px, 1.7vw, 28px);
    line-height: 1.15;
    margin: 0 0 8px;
}

.wel-door-line {
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink-75);
    margin: 0 0 18px;
    flex: 1;
}

.wel-door-go {
    align-self: flex-start;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ink);
}

/* make it yours */
.band.stone.wel-yours {
    padding: clamp(56px, 6vw, 104px) 0;
}

.wel-yours-two,
.wel-paper-two {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 110px);
    align-items: start;
}

.wel-yours-two {
    align-items: center;
}

.band ol.wel-why {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: why;
    border-top: 1px solid var(--ink-20);
}

.wel-why li {
    counter-increment: why;
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--ink-20);
}

.wel-why li::before {
    content: counter(why);
    grid-row: span 2;
    font-family: var(--face);
    font-size: 22px;
    line-height: 1.3;
}

.wel-why b {
    font-family: var(--face);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.3;
}

.wel-why span {
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink-75);
}

/* the paperwork */
.band dl.wel-facts {
    margin: 22px 0 26px;
    border-top: 1px solid var(--ink-20);
}

.wel-facts > div {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid var(--ink-20);
    font-size: 19px;
    line-height: 1.45;
}

.wel-facts dt {
    color: var(--ink-75);
}

.wel-facts dd {
    margin: 0;
}

.band p.wel-links {
    margin: 0;
    font-size: 17px;
}

@media (max-width: 1100px) {
    .wel-doors {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .wel-yours-two,
    .wel-paper-two {
        grid-template-columns: 1fr;
    }

    .wel-facts > div {
        grid-template-columns: 110px 1fr;
    }
}

@media (max-width: 560px) {
    .wel-doors {
        grid-template-columns: 1fr;
    }

    .wel-door-shot {
        aspect-ratio: 3 / 2;
    }

    .wel-btn {
        width: 100%;
    }
}

/* the year across the page, and under it what they hold, each with the one thing they can do about it */
.band.wel-paper .mem-year-head {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(32px, 3.3vw, 52px), 28px + (clamp(32px, 3.3vw, 52px) - 28px) * 0.6);
    line-height: 1.1;
    margin: 0 0 28px;
    color: var(--ink);
}

/* the timeline at the page's own measure, its four moments over the four things below (one above
   another, so they share their columns and their gaps) */
.band.wel-paper .mem-year-head,
.band.wel-paper .mem-year-span,
.band.wel-paper .mem-year.is-line {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* only where it lies across: stood up on a phone, the pictures keep the size the component gives them */
@media (min-width: 821px) {
    .band.wel-paper .mem-year.is-line {
        --pic: clamp(150px, 15vw, 230px);
        gap: clamp(18px, 2vw, 32px);
    }
}

.band ul.wel-keep {
    list-style: none;
    margin: clamp(48px, 5vw, 80px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: clamp(18px, 2vw, 32px);
}

.wel-keep li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 22px;
    border-top: 1px solid var(--ink);
}

.wel-keep-what {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-75);
    margin: 0 0 14px;
}

.wel-keep b {
    font-family: var(--face);
    font-weight: 400;
    font-size: clamp(22px, 1.7vw, 28px);
    line-height: 1.15;
    margin: 0 0 8px;
}

.wel-keep-more {
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink-75);
    margin: 0 0 18px;
    flex: 1;
}

.wel-keep .mem-link {
    font-size: 17px;
}

@media (max-width: 900px) {
    .band ul.wel-keep {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .band ul.wel-keep {
        grid-template-columns: 1fr;
    }
}


/* ---- the same page as a member's home (welcome-2.tsx, `h`), 1 October: the day, what is on near
   them, what is new, the news, somewhere to go, what they have kept. */
.wel-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 32px;
    margin: 0 0 36px;
}

.band .wel-top h2.wel-h2 {
    margin: 0;
}

.wel-top .mem-link {
    font-size: 17px;
}

/* cards of things to go to: the picture wider than tall, the date or the length above the name */
.wel-doors.is-land .wel-door-shot {
    aspect-ratio: 4 / 3;
}

.wel-door-eye {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-75);
    margin: 0 0 10px;
}

.wel-doors.is-land .wel-door-line {
    margin: 0;
}

.wel-yours-two.is-top {
    align-items: start;
}

.band.wel-yours.is-paper {
    background: var(--paper);
    padding: clamp(56px, 6vw, 104px) 0;
}

.band ul.wel-rows {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    border-top: 1px solid var(--ink-20);
}

.wel-rows a {
    display: block;
    padding: 18px 0;
    border-bottom: 1px solid var(--ink-20);
    color: var(--ink);
}

.wel-rows b {
    display: block;
    font-family: var(--face);
    font-weight: 400;
    font-size: clamp(20px, 1.6vw, 24px);
    line-height: 1.25;
}

.wel-rows span {
    display: block;
    margin-top: 6px;
    font-size: 17px;
    line-height: 1.45;
    color: var(--ink-75);
}

.wel-rows a:hover b {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
}


/* ---- THE TIMELINE AND THE MEMBERSHIP, two sections (welcome-2.tsx), 2 October 2026. Jack: "if we're
   showing a timeline we should make it obvsiouas and state its a timeline", and the four facts "should
   be in a sepetate section". The line is the map's: travelled solid copper, to come dashed. */
.band.wel-tl-band,
.band.wel-set-band {
    padding: clamp(56px, 6vw, 104px) 0;
    --ground: var(--stone);
}

.band.wel-tl-band.is-paper,
.band.wel-set-band.is-paper {
    background: var(--paper);
    --ground: var(--paper);
}

.band.wel-tl-band .wel-door-eye {
    margin: 0 0 14px;
}

.band.wel-tl-band h2.wel-h2 {
    margin: 0;
}

.band p.wel-tl-line {
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.5;
    color: var(--ink-75);
    max-width: 52ch;
    margin: 16px 0 0;
}

.band ol.wel-tl {
    list-style: none;
    margin: clamp(48px, 5vw, 72px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr));
    gap: 0 clamp(18px, 2vw, 32px);
}

.wel-tl li {
    position: relative;
    padding: 64px 24px 0 0;
}

/* the mark: reached, a filled forest dot; still to come, an open ring */
.wel-tl li::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 0;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--ground);
    border: 2px solid var(--forest);
    z-index: 1;
}

.wel-tl li.is-done::before {
    background: var(--forest);
}

/* where they are: the dot given a ring of its own */
.wel-tl li.is-here::before {
    box-shadow: 0 0 0 5px var(--ground), 0 0 0 6px var(--tweed);
}

/* the line to the next mark: solid copper where it has been travelled, dashed where it is to come */
.wel-tl li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 38px;
    left: 18px;
    width: calc(100% + clamp(18px, 2vw, 32px) - 18px);
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--ink-35) 0 7px, transparent 7px 13px);
}

.wel-tl li.is-past::after {
    background: var(--tweed);
}

.wel-tl-here {
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--tweed);
    white-space: nowrap;
}

.wel-tl-when {
    display: block;
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(22px, 1.8vw, 27px), 28px + (clamp(22px, 1.8vw, 27px) - 28px) * 0.6);
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 8px;
}

.wel-tl-says {
    display: block;
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink-75);
    max-width: 26ch;
}

.wel-tl li.is-to-come .wel-tl-when {
    color: var(--ink-75);
}

/* on a narrow screen the line stands up: the marks down the left, the words beside them */
@media (max-width: 760px) {
    .band ol.wel-tl {
        grid-template-columns: 1fr;
        margin-top: 40px;
    }

    .wel-tl li {
        padding: 0 0 36px 44px;
    }

    .wel-tl li:last-child {
        padding-bottom: 0;
    }

    .wel-tl li::before {
        top: 4px;
    }

    .wel-tl li:not(:last-child)::after {
        top: 26px;
        left: 8px;
        width: 2px;
        height: auto;
        bottom: -2px;
        background: repeating-linear-gradient(180deg, var(--ink-35) 0 7px, transparent 7px 13px);
    }

    .wel-tl li.is-past::after {
        background: var(--tweed);
    }

    .wel-tl-here {
        position: static;
        display: block;
        margin: 0 0 8px;
    }

    /* where they are: the label stands over the date, so the dot comes down to sit beside the date */
    .wel-tl li.is-here::before {
        top: 31px;
    }

    .wel-tl li.is-here:not(:last-child)::after {
        top: 53px;
    }

    .wel-tl-says {
        max-width: none;
    }
}

/* YOUR MEMBERSHIP: rows as on a settings page. What it is, what it is set to, the one thing to do. */
.band ul.wel-set {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ink-20);
}

.wel-set li {
    display: grid;
    grid-template-columns: minmax(140px, 220px) minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 8px clamp(18px, 2vw, 32px);
    padding: 26px 0;
    border-bottom: 1px solid var(--ink-20);
}

.wel-set-what {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-75);
}

.wel-set-is b {
    display: block;
    font-family: var(--face);
    font-weight: 400;
    font-size: clamp(22px, 1.7vw, 26px);
    line-height: 1.2;
    color: var(--ink);
}

.wel-set-is span {
    display: block;
    margin-top: 4px;
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink-75);
}

.wel-set .mem-link {
    font-size: 17px;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .wel-set li {
        grid-template-columns: minmax(0, 1fr);
        padding: 22px 0;
    }

    .wel-set .mem-link {
        justify-self: start;
        margin-top: 6px;
    }
}


/* ---- MEMBERSHIP, THE NEW DESIGN (account/membership-2.tsx), 2 October 2026. Jack: "please also improve and
   update design of this page ... with new deisng". The welcome's language: where they stand beside the card,
   the timeline (wel-tl), every setting a row (wel-set), four doors (wel-doors), Need a hand (ac-help). */
.band.wel-ms-top {
    background: var(--paper);
    padding: clamp(40px, 4vw, 64px) 0 clamp(56px, 6vw, 104px);
}

.wel-ms-back {
    display: inline-block;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-75);
    margin: 0 0 clamp(36px, 4vw, 64px);
}

.wel-ms-back:hover {
    color: var(--ink);
}

.wel-ms-two {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    gap: clamp(40px, 6vw, 120px);
    align-items: center;
}

.wel-ms-words .wel-door-eye {
    margin: 0 0 16px;
}

.band h1.wel-ms-h1 {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(40px, 4.4vw, 72px), 28px + (clamp(40px, 4.4vw, 72px) - 28px) * 0.6);
    line-height: 1.04;
    letter-spacing: -.015em;
    color: var(--ink);
    margin: 0;
    max-width: 16ch;
}

.band p.wel-ms-line {
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.55;
    color: var(--ink-75);
    max-width: 44ch;
    margin: 20px 0 0;
}

.band p.wel-ms-said {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink);
    margin: 20px 0 0;
    padding: 14px 18px;
    background: var(--stone);
    max-width: 44ch;
}

.wel-ms-go {
    margin: 32px 0 0;
    display: flex;
}

.wel-ms-go button.wel-btn {
    border: 0;
    cursor: pointer;
}

.wel-ms-card .mc {
    width: 100%;
}

.band .wel-ms-h2 {
    margin: 0 0 36px;
}

.band p.wel-ms-group {
    margin: clamp(48px, 5vw, 72px) 0 18px;
}

/* a row's action that is a press, not a visit: the same underlined words as a link */
button.wel-ms-link {
    border: 0;
    background: none;
    padding: 0;
    font-family: var(--serif);
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
}

.band p.wel-ms-till {
    margin: 28px 0 0;
    font-size: 13px;
    color: var(--ink-55);
}

.band p.wel-ms-till a {
    color: var(--ink-75);
}

.band.wel-ms-doors {
    padding: clamp(56px, 6vw, 104px) 0;
}

.band.wel-ms-doors.is-paper {
    background: var(--paper);
}

/* a door that asks the Desk is a button, drawn as the doors that are links */
.wel-doors button {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    font: inherit;
    color: var(--ink);
    cursor: pointer;
}

.wel-doors button:hover .wel-door-shot img {
    transform: scale(1.04);
}

@media (max-width: 1000px) {
    .wel-ms-two {
        grid-template-columns: 1fr;
    }

    .wel-ms-card {
        max-width: 460px;
    }

    .band.wel-ms-doors .wel-doors {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* THE CARD, C2, as _account.css draws it (25 September: "c2 for card is fine"), on this sheet so the page wears
   one; its small capitals are 12px here, the house's smallest. */
.mc{position:relative;width:min(460px,100%);aspect-ratio:1.586;overflow:hidden;color:#F1EDE8;background:var(--forest);font-family:var(--sans)}
.mc .wm{font:400 21px/1 var(--face);letter-spacing:-.005em}
.mc .sc{font:500 12px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;opacity:.78}
.mc .nm{font:400 min(clamp(34px,3.2vw,46px), 28px + (clamp(34px,3.2vw,46px) - 28px) * 0.6)/1.02 var(--face);letter-spacing:-.012em}
.mc .no{font:500 15px/1 var(--sans);letter-spacing:.14em;font-variant-numeric:tabular-nums}
.c2{padding:clamp(22px,2vw,30px) clamp(24px,2.2vw,32px);display:grid;grid-template-rows:auto 1fr auto}
.c2 .top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:0}
.c2 .who{align-self:end}
.c2 .who .sc{margin-bottom:10px}
.c2 .foot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:14px}
@media(max-width:560px){.mc .nm{font-size:30px}.c2{padding:20px 22px}.c2 .foot{gap:10px}.c2 .foot > *{white-space:nowrap}.c2 .foot .sc{letter-spacing:.1em}.mc .no{font-size:13px;letter-spacing:.1em}}

/* AT THE DOOR: the card the whole screen, as _account.css draws it */
.mc-door{position:fixed;inset:0;z-index:300;background:var(--forest);color:#F1EDE8;display:grid;grid-template-rows:auto auto 1fr auto;justify-items:start;padding:clamp(32px,5vw,64px) max(26px,calc(50vw - 260px));font-family:var(--sans)}
.mc-door .wm{font:400 22px/1 var(--face)}
.mc-door .ok{margin-top:34px;display:flex;align-items:center;gap:10px;font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.mc-door .ok i{width:9px;height:9px;background:#AFA065;animation:mc-beat 1.6s ease-in-out infinite}
.mc-door .mid{align-self:center}
.mc-door .nm{font:400 min(clamp(40px,7vw,64px), 28px + (clamp(40px,7vw,64px) - 28px) * 0.6)/1.02 var(--face);letter-spacing:-.015em}
.mc-door .num{margin-top:22px;font:300 min(clamp(64px,13vw,120px), 28px + (clamp(64px,13vw,120px) - 28px) * 0.6)/1 var(--face);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mc-door .sc{display:block;margin-top:10px;font:500 12px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;opacity:.78}
.mc-door .clock{width:100%;border-top:1px solid rgba(241,237,232,.3);padding-top:14px}
.mc-door .clock .sc{margin:0 0 6px}
.mc-door .clock .t{font:400 16px/1.4 var(--sans);font-variant-numeric:tabular-nums}
.mc-door .sweep{position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,transparent,#F1EDE8,transparent);background-size:40% 100%;background-repeat:no-repeat;animation:mc-sweep 2.4s linear infinite}
.mc-close{position:absolute;top:clamp(24px,4vw,48px);right:clamp(20px,4vw,48px);display:inline-flex;align-items:center;gap:12px;border:0;background:none;color:#F1EDE8;cursor:pointer;font:500 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase}
.mc-close i{position:relative;width:18px;height:18px}
.mc-close i::before,.mc-close i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;transform:rotate(45deg)}
.mc-close i::after{transform:rotate(-45deg)}
@keyframes mc-beat{50%{opacity:.25}}
@keyframes mc-sweep{from{background-position:-40% 0}to{background-position:140% 0}}
@media(prefers-reduced-motion:reduce){.mc-door .ok i,.mc-door .sweep{animation:none}}

/* NEED A HAND?, as _account.css draws it at the foot of every account page */
.ac-help{background:#F5F1E9;padding:clamp(56px,7vw,96px) 0}
.ac-help .in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,100px);align-items:start}
.ac-help h2{font:400 min(clamp(30px,3vw,42px), 28px + (clamp(30px,3vw,42px) - 28px) * 0.6)/1.05 var(--face);letter-spacing:-.005em;margin:0;color:var(--ink)}
.ac-help-head p{margin:14px 0 0;font:400 17px/1.6 var(--serif);color:var(--ink-75);max-width:40ch}
.ac-help a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(65,64,66,.35);text-underline-offset:4px}
.ac-help a:hover{text-decoration-color:var(--tweed)}
.ac-asked{display:grid;gap:4px}
.ac-asked details{padding:14px 0}
.ac-asked summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:20px;font:400 clamp(19px,1.6vw,22px)/1.3 var(--face);color:var(--ink)}
.ac-asked summary::-webkit-details-marker{display:none}
.ac-asked summary::after{content:"+";font:300 22px/1 var(--sans);color:var(--ink-55);flex:none}
.ac-asked details[open] summary::after{content:"\2212"}
.ac-asked p{margin:10px 0 0;font:400 17px/1.62 var(--serif);color:var(--ink-75);max-width:62ch}
@media(max-width:820px){.ac-help .in{grid-template-columns:1fr}}

/* THE MEMBER'S MENU (3 October 2026): the region guide's bar (.rgd-bar5 in _guide.css), copied rule for rule onto the
   welcome's own measure (.in) and its paper, held under the site bar */
.rgd-bar5{position:sticky;top:var(--bar,76px);z-index:40;background:var(--paper);box-shadow:0 10px 30px rgba(65,64,66,.06)}
.rgd-bar5 .in{height:82px;display:flex;align-items:center;gap:34px}
.rgd-bar5 .nm{font:400 26px/1 var(--face);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;margin-left:-.03em;color:var(--ink)}
.rgd-bar5 nav{flex:1;display:flex;gap:26px;overflow-x:auto;scrollbar-width:none;height:100%;align-items:center}
.rgd-bar5 nav::-webkit-scrollbar{display:none}
.rgd-bar5 nav a{white-space:nowrap;text-decoration:none;color:var(--ink-75);padding:6px 0;box-shadow:inset 0 -2px 0 transparent;transition:color .3s,box-shadow .3s;font:400 18px/1 var(--face)}
.rgd-bar5 nav a:hover{color:var(--ink)}
.rgd-bar5 nav a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--bracken)}
@media(max-width:900px){.rgd-bar5{top:var(--bar,64px)}.rgd-bar5 .in{height:64px;gap:18px}.rgd-bar5 .nm{font-size:21px}.rgd-bar5 nav a{font-size:16px;min-height:44px;display:flex;align-items:center;padding:0}}

/* ---- THE HERO AS THE OTHER PAGES HAVE IT (/try/membership, 10 October 2026). Measured off /stay at 1920: the hero 88vh,
   the title 67px Larken in the middle in two lines, a 21px line under it, the gold button 13px by 20px in Jost capitals.
   The film is veiled evenly so white words are read anywhere on it. */
.mem-hero.is-like {
    min-height: min(88vh, 950px);
    margin-top: calc(-1 * var(--bar));
    align-items: center;
    justify-content: center;
}

.mem-hero.is-like::after {
    background: linear-gradient(180deg, rgba(65, 64, 66, 0.5) 0%, rgba(65, 64, 66, 0.38) 30%, rgba(65, 64, 66, 0.46) 100%);
}

.mem-like {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: var(--bar) 20px 0;
    box-sizing: border-box;
    text-align: center;
    color: #fff;
}

.mem-like h1 {
    margin: 0 auto;
    font: 400 min(clamp(44px, 3.5vw, 76px), 28px + (clamp(44px, 3.5vw, 76px) - 28px) * 0.6) / 1.06 var(--face);
    letter-spacing: -0.01em;
    color: #fff;
}

.mem-like p {
    margin: 22px auto 0;
    max-width: 820px;
    font: 400 21px / 1.45 var(--serif);
    color: #fff;
}

.mem-like-go {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
    padding: 13px 20px;
    background: #c08c3d;
    color: #414042;
    font: 500 12px / 1 var(--sans);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.25s;
}

.mem-like-go i {
    font-style: normal;
    font-size: 15px;
    letter-spacing: 0;
    transition: transform 0.3s;
}

.mem-like-go:hover {
    background: #f6f1e8;
}

.mem-like-go:hover i {
    transform: translateX(4px);
}

.mem-like-from {
    display: block;
    margin-top: 16px;
    font: 400 17px / 1.4 var(--serif);
    color: rgba(255, 255, 255, 0.86);
}

@media (max-width: 720px) {
    .mem-like p {
        font-size: 17px;
    }
}

/* the bar as the other pages wear it (measured off /stay at 1920: the whole width with 76px each side, its links at 19px);
   only where the page is drawn their way */
body:has(.mem-hero.is-like) header.site .in {
    max-width: none;
    padding: 0 76px;
}

body:has(.mem-hero.is-like) header.site nav.flow a {
    font-size: 19px;
}

@media (max-width: 900px) {
    body:has(.mem-hero.is-like) header.site .in {
        padding: 0 16px;
    }
}

/* ---- /try/membership-2 (10 October 2026): the ideas built in ---- */

/* a look inside: three spreads of the issue's own pages, two pages a spread, on the page's column */
.mem-in13 h2 {
    margin: 0;
}

.mem-in13-say {
    margin: 16px 0 44px;
    max-width: 34em;
    font: 400 19px / 1.55 var(--serif);
    color: var(--ink-75);
}

.mem-in13-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.mem-in13-spread {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
    box-shadow: 0 14px 40px rgba(65, 64, 66, 0.16);
    transition: transform 0.4s var(--ease);
}

.mem-in13-spread:hover {
    transform: translateY(-4px);
}

.mem-in13-spread img {
    display: block;
    width: 100%;
    height: auto;
}

.mem-in13-won {
    margin: 40px 0 0;
    font: 400 19px / 1.5 var(--serif);
    color: var(--ink-75);
}

/* the questions: two columns of a question and its answer, no lines between them */
.mem-faq h2 {
    margin: 0 0 44px;
}

.mem-faq-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px clamp(32px, 6vw, 96px);
}

.mem-faq-list h3 {
    margin: 0;
    font-family: var(--face);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.mem-faq-list p {
    margin: 12px 0 0;
    max-width: 30em;
    font: 400 19px / 1.55 var(--serif);
    color: var(--ink-75);
}

.mem-faq-list a {
    color: var(--tweed);
    text-underline-offset: 4px;
}

/* one plan led with: its button filled, a word beside its name, and what each plan is worth in a line */
.mem-plus .mem-pickcard:first-child .mem-pickgo {
    background: var(--tweed);
    border-color: var(--tweed);
    color: #fff;
}

.mem-picktag {
    margin-left: 12px;
    padding: 5px 10px;
    background: #c08c3d;
    color: #414042;
    font: 500 11px / 1 var(--sans);
    font-style: normal;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    vertical-align: middle;
}

.mem-picksave {
    display: block;
    margin-top: 12px;
    font: 400 16px / 1.45 var(--serif);
    color: var(--tweed);
}

/* Join, following the reader once the hero has gone and until the plans arrive */
.mem-follow {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 14px 20px;
    background: #2b301d;
    color: #f9f5ee;
    font: 400 19px / 1.3 var(--serif);
    transform: translateY(100%);
    transition: transform 0.35s var(--ease);
}

.mem-follow.on {
    transform: none;
}

.mem-follow .mem-like-go {
    margin-top: 0;
}

@media (max-width: 900px) {
    .mem-in13-row {
        grid-template-columns: 1fr;
    }

    .mem-faq-list {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .mem-faq-list h3 {
        font-size: 23px;
    }

    .mem-follow {
        justify-content: space-between;
        gap: 12px;
        font-size: 16px;
    }
}

/* what you get, in full (/try/membership-2): eight cards four across, a photograph, a name and a line */
.mem-full {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 48px 24px;
}

.mem-full li {
    display: block;
}

.mem-full-shot {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    margin: 0 0 18px;
    background: var(--stone);
}

.mem-full-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mem-full em {
    display: inline-block;
    margin: 0 0 10px;
    padding: 5px 10px;
    background: #c08c3d;
    color: #414042;
    font: 500 11px / 1 var(--sans);
    font-style: normal;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mem-full b {
    display: block;
    font-family: var(--face);
    font-weight: 400;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.mem-full span:last-child {
    display: block;
    margin: 8px 0 0;
    font: 400 17px / 1.5 var(--serif);
    color: var(--ink-75);
}

@media (max-width: 1100px) {
    .mem-full {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 16px;
    }

    .mem-full b {
        font-size: 22px;
    }
}

/* the membership's name stands on the photograph's corner, so every card's words start on one line */
.mem-full-shot {
    position: relative;
}

.mem-full .mem-full-shot em {
    position: absolute;
    left: 12px;
    top: 12px;
    margin: 0;
}

.mem-in13 .mem-seasons-head,
.mem-faq .mem-seasons-head {
    margin-bottom: 0;
}

.mem-faq .mem-seasons-head {
    margin-bottom: 44px;
}

/* ---- /try/membership-2, second round (10 October 2026) ---- */

/* a peek inside: the film of the issue being read, and beside it the words and the award's own mark on forest */
.mem-peek {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 88px);
    align-items: center;
}

.mem-peek-film {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--forest);
}

.mem-peek-film video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mem-peek .mem-in13-say {
    margin-bottom: 28px;
}

.mem-peek-won {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 40px 0 0;
    padding: 22px 26px;
    background: var(--forest);
    color: #f9f5ee;
    font: 400 17px / 1.4 var(--serif);
}

.mem-peek-won img {
    display: block;
    width: 92px;
    height: auto;
}

/* the parcel: one photograph; four things, each named in gold with its line; no row of smaller photographs */
.mem-parcel-band.is-plus .mem-parcel-row {
    display: none;
}

.mem-bits {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    margin: 30px 0 0;
}

.mem-bits em,
.mem-day-tag {
    display: inline-block;
    padding: 5px 10px;
    background: #c08c3d;
    color: #414042;
    font: 500 11px / 1 var(--sans);
    font-style: normal;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mem-bits span {
    display: block;
    margin: 8px 0 0;
    font: 400 19px / 1.5 var(--serif);
    color: var(--ink-75);
}

/* the Daily: this morning's email cover, whole, where the film stood */
.mem-day-cover {
    display: flex;
    justify-content: center;
}

.mem-day-cover img {
    display: block;
    width: min(100%, 520px);
    height: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

@media (max-width: 900px) {
    .mem-peek {
        grid-template-columns: 1fr;
    }
}

/* the hero with more of it (/try/membership-2): the whole window, a larger title, a button to be seen from across the room */
.mem-hero.is-like.is-big {
    min-height: 100vh;
}

.mem-hero.is-like.is-big::after {
    background: linear-gradient(180deg, rgba(65, 64, 66, 0.55) 0%, rgba(65, 64, 66, 0.46) 35%, rgba(65, 64, 66, 0.6) 100%);
}

.mem-hero.is-big .mem-like h1 {
    font-size: min(clamp(52px, 6vw, 120px), 28px + (clamp(52px, 6vw, 120px) - 28px) * 0.6);
    line-height: 1.02;
    letter-spacing: -0.018em;
}

.mem-hero.is-big .mem-like p {
    margin-top: 30px;
    max-width: 900px;
    font-size: clamp(19px, 1.35vw, 26px);
}

.mem-hero.is-big .mem-like-go {
    gap: 16px;
    margin-top: 40px;
    padding: 24px 44px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.18em;
}

.mem-hero.is-big .mem-like-go i {
    font-size: 22px;
}

.mem-hero.is-big .mem-like-from {
    margin-top: 20px;
    font-size: 20px;
}

/* ---- /try/membership-2, third round (10 October 2026) ---- */

/* the questions, with a photograph beside them and a gold word on each */
.mem-faq-two {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 88px);
    align-items: start;
}

.mem-faq-shot {
    position: sticky;
    top: calc(var(--bar) + 32px);
}

.mem-faq-shot img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.mem-faq-two .mem-faq-list {
    grid-template-columns: 1fr;
    gap: 40px;
}

.mem-faq-list em {
    display: inline-block;
    margin: 0 0 12px;
    padding: 5px 10px;
    background: #c08c3d;
    color: #414042;
    font: 500 11px / 1 var(--sans);
    font-style: normal;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mem-faq-list .btn {
    margin-top: 20px;
}

/* EVERY BAND OF TWO HALVES ON ONE GRID (Jack: "the rest just aligned and spaced out better"). The picture three parts, the
   words two, the same gap: so down the page every picture ends and every column of words starts on the same line. They
   were four different grids (words starting at 999, 1093, 1123 and 1194 on a 1920 screen). */
body:has(.mem-hero.is-big) .mem-parcel,
body:has(.mem-hero.is-big) .mem-day-two,
body:has(.mem-hero.is-big) .mem-gift {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 88px);
    align-items: center;
    margin-top: 0;
}

body:has(.mem-hero.is-big) .mem-parcel-shot img,
body:has(.mem-hero.is-big) .mem-gift-shot img,
body:has(.mem-hero.is-big) .mem-gift-shot video {
    display: block;
    width: 100%;
}

body:has(.mem-hero.is-big) .mem-day-cover img {
    width: min(100%, 560px);
}

/* THE BUTTONS, A SIZE UP ("the buttons and things just seem a little small"): 62 tall where they were 50, their words 16.5px */
body:has(.mem-hero.is-big) main .btn,
body:has(.mem-hero.is-big) main .mem-pickgo {
    min-height: 62px;
    font-size: 16.5px;
}

body:has(.mem-hero.is-big) main .btn {
    padding-left: 34px;
    padding-right: 34px;
}

body:has(.mem-hero.is-big) .mem-follow .mem-like-go {
    padding: 16px 26px;
    font-size: 13px;
}

@media (max-width: 900px) {
    .mem-faq-two,
    body:has(.mem-hero.is-big) .mem-parcel,
    body:has(.mem-hero.is-big) .mem-day-two,
    body:has(.mem-hero.is-big) .mem-gift {
        grid-template-columns: 1fr;
    }

    .mem-faq-shot {
        position: static;
    }
}

/* THE WORDS BESIDE THE MAGAZINE, NOT ON IT. The whole frame puts the cover in the middle of the window, and a title in the
   middle sat across the cover's own name. So on the big hero the words stand in the left of the window, on the bar's own
   left edge, over the sheepskin, and the film is darkened from that side; the cover is left clear on the right. */
.mem-hero.is-like.is-big {
    justify-content: flex-start;
}

.mem-hero.is-like.is-big::after {
    background:
        linear-gradient(90deg, rgba(20, 18, 16, 0.78) 0%, rgba(20, 18, 16, 0.6) 30%, rgba(20, 18, 16, 0.12) 56%, rgba(20, 18, 16, 0.1) 100%),
        linear-gradient(180deg, rgba(20, 18, 16, 0.42) 0%, rgba(20, 18, 16, 0) 22%);
}

.mem-hero.is-big .mem-like {
    width: auto;
    max-width: min(46vw, 760px);
    padding: var(--bar) 0 0 76px;
    text-align: left;
}

.mem-hero.is-big .mem-like h1 {
    margin: 0;
    font-size: min(clamp(46px, 4.7vw, 92px), 28px + (clamp(46px, 4.7vw, 92px) - 28px) * 0.6);
    line-height: 1.03;
}

.mem-hero.is-big .mem-like p {
    margin: 28px 0 0;
    max-width: 22em;
}

@media (max-width: 900px) {
    .mem-hero.is-big .mem-like {
        max-width: none;
        padding: var(--bar) 16px 0;
    }

    .mem-hero.is-like.is-big::after {
        background: linear-gradient(180deg, rgba(20, 18, 16, 0.6) 0%, rgba(20, 18, 16, 0.55) 100%);
    }
}

/* BACK IN THE MIDDLE (Jack, 10 October 2026: "i dont like the hero text left alighed"). The words are centred again, in two
   lines, and what kept them off the cover is done another way: the film is darkened most in the middle, where the words
   are, so the cover's own lettering falls back behind them, and lightly at the edges. This overrides the block above. */
.mem-hero.is-like.is-big {
    justify-content: center;
}

.mem-hero.is-like.is-big::after {
    background:
        radial-gradient(ellipse 62% 58% at 50% 54%, rgba(16, 14, 12, 0.8) 0%, rgba(16, 14, 12, 0.62) 55%, rgba(16, 14, 12, 0.34) 100%),
        linear-gradient(180deg, rgba(16, 14, 12, 0.4) 0%, rgba(16, 14, 12, 0) 22%);
}

.mem-hero.is-big .mem-like {
    width: 100%;
    max-width: none;
    padding: var(--bar) 20px 0;
    text-align: center;
}

.mem-hero.is-big .mem-like h1 {
    margin: 0 auto;
    font-size: min(clamp(50px, 5.6vw, 110px), 28px + (clamp(50px, 5.6vw, 110px) - 28px) * 0.6);
    line-height: 1.02;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}

.mem-hero.is-big .mem-like p {
    margin: 30px auto 0;
    max-width: 900px;
}