/* GENERATED by scratchpad/design-2026/build-shop2-2026.sh from shop-2026/shop2.css. Change that, not this. */
/* THE SHOP, SECOND DESIGN (2 October 2026): the product page (pdp-), the basket drawer and page (bsk-) and the page
   after paying (ord-). On /shop-2/{slug}, /basket-2, /shop-2/thank-you.
   Third pass the same evening (Jack: "you just confuse people with how you lay things out", "a version with a hero
   header ... more simplistic like /read-2/about/history", "remove things we dont need", of the drawer "visually more
   appealing and definitely larger width"): a hero with the button in it, one plain buy box beside a slider, the
   contents page by page, sliders for the spreads and the back issues, membership said once. The site's own grounds
   and faces only (docs/DESIGN-SYSTEM.md): paper, oat, stone, forest; Larken headings, Lora 15 to 21, Jost 12 for
   small capitals; the house button in Tweed; square corners; nothing under 12px. */

.shop2 { background: var(--paper); }

/* ------------------------------------------------------------------ shared words */
.shop2 .pdp-kick,
.bsk .bsk-kick,
.shop2 .bsk-kick {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-75);
    margin: 0 0 14px;
}

.shop2 .pdp-h1 {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(44px, 4.4vw, 74px), 28px + (clamp(44px, 4.4vw, 74px) - 28px) * 0.6);
    line-height: 1;
    letter-spacing: -.015em;
    color: var(--ink);
    margin: 0;
}

.shop2 .pdp-h2 {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(32px, 3.2vw, 48px), 28px + (clamp(32px, 3.2vw, 48px) - 28px) * 0.6);
    line-height: 1.05;
    letter-spacing: -.008em;
    color: var(--ink);
    margin: 0;
}

.shop2 .pdp-line {
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.55;
    color: var(--ink-75);
    margin: 18px 0 0;
    max-width: 46ch;
}

.shop2 .pdp-text {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink-75);
    margin: 18px 0 0;
    max-width: 52ch;
}

.shop2 .pdp-text.is-small { font-size: 16px; margin-top: 24px; }

.shop2 .pdp-text a,
.shop2 .pdp-try a,
.shop2 .pdp-link,
.bsk-member-go {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.shop2 .pdp-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    margin-top: 32px;
}

.shop2 .pdp-link { font-family: var(--serif); font-size: 17px; }

/* the filled house button: Tweed ground, Shell words, Cask on hover; written to outrank _bar.css's
   `.band .in .btn` (transparent), which loads after this sheet */
.btn.is-fill,
.btn.is-fill[data-label],
.shop2 .band .in .btn.is-fill,
.shop2 .pdp-bar .in .btn.is-fill,
.shop2 .pdp-read .btn.is-fill,
.bsk-wrap .bsk .btn.is-fill {
    background: var(--tweed);
    color: var(--shell);
    border-color: var(--tweed);
    --hover-bg: var(--cask);
    --hover-color: var(--shell);
}

.btn.is-off { opacity: .5; cursor: default; pointer-events: none; }

.shop2 .pdp-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 48px;
    margin: 0 0 clamp(28px, 3vw, 44px);
}

.pdp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* arrows: the slider's, over the picture; the rows', at their head */
.pdp-arrow {
    position: absolute;
    top: 50%;
    width: 52px;
    height: 52px;
    margin-top: -26px;
    border: 0;
    background: rgba(255, 255, 247, .92);
    cursor: pointer;
    opacity: 0;
    transition: opacity .3s;
    z-index: 2;
}

.pdp-arrow.is-back { left: 16px; }
.pdp-arrow.is-on { right: 16px; }
.pdp-arrows { display: inline-flex; gap: 10px; }

.pdp-arrows button {
    width: 52px;
    height: 52px;
    border: 1px solid var(--ink-35);
    background: transparent;
    cursor: pointer;
}

.pdp-arrows button:hover { background: var(--ink); border-color: var(--ink); }
.pdp-arrows button:hover i { border-color: var(--shell); }

.pdp-arrow i,
.pdp-arrows i {
    display: block;
    width: 11px;
    height: 11px;
    margin: 0 auto;
    border-top: 1.5px solid var(--ink);
    border-right: 1.5px solid var(--ink);
    transform: rotate(45deg);
}

.pdp-arrow.is-back i,
.pdp-arrows button:first-child i { transform: rotate(-135deg); }

/* ------------------------------------------------------------------ the hero */
/* the hero runs up under the bar, which is glass over it until the hero scrolls away (use-glass-bar.ts, _bar.css);
   the film is as tall as before below the bar, and the words are centred in that part (Jack, 2 October) */
.pdp-hero {
    position: relative;
    margin-top: calc(-1 * var(--bar));
    height: calc(clamp(560px, 84vh, 900px) + var(--bar));
    overflow: hidden;
    background: var(--ink);
    color: var(--shell);
}

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

.pdp-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(65, 64, 66, .52);
}

.pdp-hero .in {
    position: relative;
    z-index: 1;
    height: 100%;
    padding-top: var(--bar);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.shop2 .pdp-hero .pdp-kick { color: rgba(249, 245, 238, .88); }

.pdp-hero-h {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(72px, 9vw, 150px), 28px + (clamp(72px, 9vw, 150px) - 28px) * 0.6);
    line-height: .95;
    letter-spacing: -.02em;
    margin: 6px 0 0;
}

.pdp-hero-line {
    font-family: var(--serif);
    font-size: clamp(18px, 1.4vw, 22px);
    line-height: 1.55;
    max-width: 54ch;
    margin: 26px 0 0;
    color: rgba(249, 245, 238, .92);
}

.pdp-hero-go {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 40px 0 0;
}

/* the hero's buttons are the house button (_bar.css, DESIGN-SYSTEM.md section 5: the line and the label, the fill
   wiping in from the left), at a hero's size, on a photograph: Shell line, Shell fill and Cask words on hover. The
   first is filled Shell, and wipes to Tweed. (Jack, 2 October: "too small and text is small", "a different style to
   our other buttons".) The closing band wears the same. */
.shop2 .pdp-hero-go .btn.pdp-hero-btn {
    --hover-bg: var(--shell);
    --hover-color: var(--cask);
    height: 60px;
    min-height: 60px;
    padding: 0 36px;
    font-size: 17px;
    color: var(--shell);
    border-color: var(--shell);
    background: transparent;
}

.shop2 .pdp-hero-go .btn.pdp-hero-btn.is-fill {
    --hover-bg: var(--tweed);
    --hover-color: var(--shell);
    background: var(--shell);
    color: var(--cask);
}

/* ------------------------------------------------------------------ the product: a slider beside the buy box */
.band.pdp-top:not(.stone):not(.forest) {
    background: var(--paper);
    padding: var(--space) 0;
}

.pdp-two {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(40px, 6vw, 112px);
    align-items: start;
}

/* held in the middle of the window while the pictures scroll (--buy-top, measured in product-2.tsx) */
.pdp-buy {
    position: sticky;
    top: var(--buy-top, calc(var(--bar) + 32px));
}

.shop2 .pdp-name {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(44px, 4vw, 64px), 28px + (clamp(44px, 4vw, 64px) - 28px) * 0.6);
    line-height: 1;
    letter-spacing: -.015em;
    margin: 0;
}

.pdp-price {
    margin: 26px 0 0;
    font-family: var(--face);
    font-size: min(36px, 28px + (36px - 28px) * 0.6);
    line-height: 1;
    color: var(--ink);
}

.pdp-do { display: flex; gap: 12px; margin: 22px 0 0; }

/* THE NOTE FOR A GIFT'S CARD (the gift edition, 8 October 2026): the one field on a product page, in the buy box above
   the button. Its words are the page's own (Lora), its box the quantity's (a hairline, square). */
.shop2 .pdp-note { display: block; margin: 26px 0 0; }
.shop2 .pdp-note span { display: block; font-family: var(--face); font-weight: 400; font-size: 19px; line-height: 1.25; color: var(--ink); margin: 0 0 10px; }
.shop2 .pdp-note textarea {
    display: block; width: 100%; box-sizing: border-box; min-height: 104px; resize: vertical;
    padding: 14px 16px; border: 1px solid var(--ink-35); border-radius: 0; background: #fff;
    font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--ink);
}
.shop2 .pdp-note textarea:focus { outline: 2px solid var(--august); outline-offset: 2px; }
.shop2 .pdp-note small { display: block; margin: 8px 0 0; font-family: var(--serif); font-size: 15px; line-height: 1.5; color: var(--ink-75); }

.pdp-qty,
.bsk-qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--ink-35);
    flex: 0 0 auto;
}

.pdp-qty { height: 58px; }

.pdp-qty button,
.bsk-qty button {
    width: 44px;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--face);
    font-weight: 300;
    font-size: 22px;
    line-height: 1;
    color: var(--ink);
}

.pdp-qty button:hover,
.bsk-qty button:hover { background: var(--oat); }
.bsk-qty button:disabled { opacity: .35; cursor: default; }

.pdp-qty output,
.bsk-qty output {
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 17px;
    color: var(--ink);
}

.shop2 .pdp-go,
.shop2 .band .in .pdp-go {
    height: auto;
    flex: 1 1 auto;
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

/* membership, one plain line under the button: the whole thing is the link */
.pdp-alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 14px 0 0;
    padding: 18px 22px;
    border: 1px solid var(--ink-20);
    background: #fff;
    color: var(--ink);
    transition: border-color .25s;
}

.pdp-alt:hover { border-color: var(--ink); }
.pdp-alt b { display: block; font-family: var(--face); font-weight: 400; font-size: 20px; line-height: 1.25; }
.pdp-alt i { display: block; margin-top: 6px; font-family: var(--serif); font-style: normal; font-size: 15px; line-height: 1.5; color: var(--ink-75); }

.pdp-alt s {
    flex: none;
    width: 10px;
    height: 10px;
    border-top: 1.5px solid var(--ink);
    border-right: 1.5px solid var(--ink);
    transform: rotate(45deg);
    margin-right: 4px;
}

.pdp-promise {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.pdp-promise li,
.pdp-perks li {
    position: relative;
    padding-left: 28px;
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
}

.pdp-promise li::before,
.pdp-perks li::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 5px;
    width: 6px;
    height: 11px;
    border-right: 1.5px solid var(--forest);
    border-bottom: 1.5px solid var(--forest);
    transform: rotate(40deg);
}

.pdp-folds { margin: 28px 0 0; border-top: 1px solid var(--ink-20); }
.pdp-fold { border-bottom: 1px solid var(--ink-20); }

.pdp-fold summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    padding: 17px 0;
    font-family: var(--face);
    font-size: 20px;
    line-height: 1.3;
    color: var(--ink);
}

.pdp-fold summary::-webkit-details-marker { display: none; }

.pdp-fold summary::after {
    content: '+';
    font-family: var(--sans);
    font-weight: 300;
    font-size: 22px;
    line-height: 1;
    color: var(--ink-75);
    flex: none;
}

.pdp-fold[open] summary::after { content: '\2212'; }
.pdp-fold summary:focus-visible { outline: 2px solid var(--august); outline-offset: 4px; }

.pdp-fold-body {
    padding: 0 0 20px;
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-75);
}

.pdp-fold-body p { margin: 0; max-width: 60ch; }

.pdp-dl { margin: 0; display: grid; }

.pdp-dl > div {
    display: grid;
    grid-template-columns: minmax(110px, 160px) minmax(0, 1fr);
    gap: 16px;
    padding: 9px 0;
}

.pdp-dl > div + div { border-top: 1px solid var(--ink-20); }

.pdp-dl dt {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-75);
    padding-top: 3px;
}

.pdp-dl dd { margin: 0; font-family: var(--serif); font-size: 16px; line-height: 1.5; color: var(--ink); }

/* ------------------------------------------------------------------ what is inside, with its pictures */
.band.pdp-contents:not(.stone):not(.forest) {
    background: var(--paper);
    padding: var(--space) 0;
}

.pdp-toc {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 56px clamp(20px, 2vw, 32px);
}

.pdp-toc li { grid-column: span 2; }
.pdp-toc li:nth-child(-n+2) { grid-column: span 3; }

.pdp-toc-pic {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--stone);
    margin: 0 0 18px;
}

.pdp-toc li:nth-child(-n+2) .pdp-toc-pic { aspect-ratio: 5 / 4; }
.pdp-toc-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease); }
.pdp-toc li:hover .pdp-toc-pic img { transform: scale(1.03); }

.pdp-toc-k {
    display: block;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-75);
}

.pdp-toc-t {
    display: block;
    margin-top: 8px;
    font-family: var(--face);
    font-size: 23px;
    line-height: 1.25;
    color: var(--ink);
    max-width: 30ch;
}

.pdp-toc li:nth-child(-n+2) .pdp-toc-t { font-size: min(clamp(26px, 2vw, 32px), 28px + (clamp(26px, 2vw, 32px) - 28px) * 0.6); }

.pdp-toc-plus {
    margin: 56px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--ink-20);
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-75);
    max-width: 70ch;
}

@media (max-width: 960px) {
    .pdp-toc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; }
    .pdp-toc li, .pdp-toc li:nth-child(-n+2) { grid-column: span 1; }
    .pdp-toc li:first-child { grid-column: 1 / -1; }
    .pdp-toc li:nth-child(2) .pdp-toc-pic { aspect-ratio: 4 / 5; }
    .pdp-toc-t, .pdp-toc li:nth-child(2) .pdp-toc-t { font-size: 18px; }
    .pdp-toc li:first-child .pdp-toc-t { font-size: 24px; }
}

/* ------------------------------------------------------------------ the rows that slide: spreads, back issues */
.band.pdp-back:not(.stone):not(.forest) {
    background: var(--paper);
    padding: var(--space) 0;
}

.pdp-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.pdp-row::-webkit-scrollbar { display: none; }
.pdp-row li { scroll-snap-align: start; }
.pdp-row.is-issues { grid-auto-columns: calc((100% - 4 * 24px) / 5); }
.pdp-row a { display: block; color: var(--ink); }

.pdp-row-pic {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--stone);
}

.pdp-row-pic.is-book { aspect-ratio: 1080 / 1337; }

.pdp-row-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .9s var(--ease);
}

.pdp-row a:hover .pdp-row-pic img { transform: scale(1.03); }

.pdp-row-pic em {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 7px 10px;
    background: var(--paper);
    font-family: var(--sans);
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink);
}

.pdp-row .is-sold .pdp-row-pic img { opacity: .45; filter: grayscale(.4); }

/* the name, and its price under it in the body face: one column, read top to bottom, rather than the two pulled to
   the card's edges (Jack, 3 October: "i dont like the way this is displayed") */
.pdp-row-t {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 14px;
    font-family: var(--face);
    font-size: 22px;
    line-height: 1.2;
    color: var(--ink);
}

.pdp-row-t b { font-family: var(--serif); font-weight: 400; font-size: 16px; color: var(--ink-75); white-space: nowrap; }

.pdp-row-m {
    display: block;
    margin-top: 6px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-75);
}

/* ------------------------------------------------------------------ read it now: its own band, the whole width */
.pdp-read {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: clamp(400px, 52vh, 580px);
    background: var(--stone);
}

/* the words start on the page's own column edge, whatever the width */
.pdp-read-words {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(48px, 6vw, 88px) clamp(32px, 5vw, 96px) clamp(48px, 6vw, 88px) max(var(--edge), calc((100vw - 1400px) / 2 + var(--edge)));
}

.pdp-read-h {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(32px, 2.8vw, 46px), 28px + (clamp(32px, 2.8vw, 46px) - 28px) * 0.6);
    line-height: 1.02;
    letter-spacing: -.015em;
    color: var(--ink);
    margin: 0;
    max-width: 12ch;
}

.pdp-read-line {
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-75);
    margin: 22px 0 0;
}

.shop2 .pdp-read .pdp-read-go {
    height: auto;
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    margin-top: 36px;
    padding: 0 34px;
    font-size: 15px;
}

/* the picture fills its half and never sets the band's height */
.pdp-read-pic { position: relative; display: block; overflow: hidden; background: var(--stone-2); }
.pdp-read-pic img,
.pdp-read-pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 960px) {
    .pdp-read { grid-template-columns: minmax(0, 1fr); }
    .pdp-read-pic { order: -1; aspect-ratio: 4 / 3; }
    .pdp-read-words { padding: 56px var(--edge); }
}

/* ------------------------------------------------------------------ membership */
.band.forest.pdp-member { padding: var(--space) 0; }

.pdp-member-two {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 6vw, 112px);
    align-items: center;
}

.pdp-member-pic { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--moss); }
.pdp-member-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop2 .pdp-member .pdp-kick { color: var(--on-forest-55); }
.shop2 .pdp-member .pdp-h2 { color: var(--on-forest); }
.shop2 .pdp-member .pdp-text { color: rgba(241, 237, 232, .85); }
.shop2 .pdp-member .pdp-link { color: var(--on-forest); }

.pdp-perks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.shop2 .pdp-member .pdp-perks li { color: var(--on-forest); font-size: 17px; }
.shop2 .pdp-member .pdp-perks li::before { border-color: var(--on-forest); }

/* ------------------------------------------------------------------ how it arrives: the sleeve, opened */
.band.pdp-sent:not(.stone):not(.forest) {
    background: var(--oat);
    padding: var(--space) 0;
}

.pdp-sent-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 1.6vw, 28px);
}

.pdp-sent-pic { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); }
.pdp-sent-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pdp-sent-say {
    display: block;
    margin-top: 14px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-75);
}

/* ------------------------------------------------------------------ what readers say, and the award */
.band.forest.pdp-trust { padding: var(--space) 0; }

.pdp-trust-two {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: clamp(40px, 6vw, 112px);
    align-items: center;
}

.pdp-award-block { text-align: center; }
.pdp-award-block img { width: min(220px, 100%); height: auto; display: block; margin: 0 auto; }

.pdp-award-block p {
    margin: 18px 0 0;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--on-forest-55);
}

.shop2 .pdp-trust .pdp-kick { color: var(--on-forest-55); }

.pdp-reviews {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 48px);
}

.pdp-stars { display: block; font-size: 15px; letter-spacing: .2em; color: var(--on-forest); }

.pdp-reviews q {
    display: block;
    margin-top: 16px;
    font-family: var(--face);
    font-size: clamp(21px, 1.6vw, 25px);
    line-height: 1.35;
    color: var(--on-forest);
    quotes: '\201C' '\201D';
}

.pdp-by {
    display: block;
    margin-top: 16px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--on-forest-55);
}

@media (max-width: 960px) {
    .pdp-sent-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pdp-trust-two { grid-template-columns: minmax(0, 1fr); }
    .pdp-reviews { grid-template-columns: minmax(0, 1fr); }
    .pdp-award-block img { width: 160px; }
}


/* ------------------------------------------------------------------ the last word: the page ends as it opens
   (Jack, 2 October: "missing another call to action at the very bottom"). Its own rules rather than a second
   .pdp-hero, which now runs up under the bar; the buttons are the hero's (.pdp-hero-go, .pdp-hero-btn). */
.pdp-close {
    position: relative;
    height: clamp(480px, 68vh, 720px);
    overflow: hidden;
    background: var(--ink);
    color: var(--shell);
}

.pdp-close video,
.pdp-close > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%; /* the band is wider than the film: a little more of the top than the foot */
}

.pdp-close::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(65, 64, 66, .66) 0%, rgba(65, 64, 66, .42) 42%, rgba(65, 64, 66, .08) 78%);
}

/* the words on the left, clear of the cover resting on the right of the film */
.pdp-close .in {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
}

.shop2 .pdp-close .pdp-hero-go { justify-content: flex-start; }

.shop2 .pdp-close .pdp-kick { color: rgba(249, 245, 238, .88); }

.pdp-close-h {
    margin: 6px 0 0;
    font-family: var(--face);
    font-weight: 400;
    font-size: min(clamp(56px, 6vw, 104px), 28px + (clamp(56px, 6vw, 104px) - 28px) * 0.6);
    line-height: .95;
    letter-spacing: -.02em;
}

.pdp-close-line {
    margin: 22px 0 0;
    max-width: 38ch;
    font-family: var(--serif);
    font-size: clamp(18px, 1.3vw, 21px);
    line-height: 1.55;
    color: rgba(249, 245, 238, .92);
}

@media (max-width: 760px) {
    .pdp-close { height: auto; min-height: 520px; padding: 72px 0; }
    .pdp-close::after { background: rgba(65, 64, 66, .5); }
    .shop2 .pdp-hero-go .btn.pdp-hero-btn { height: 56px; min-height: 56px; font-size: 16px; }
    .pdp-close-h { font-size: min(56px, 28px + (56px - 28px) * 0.6); }
}

/* ------------------------------------------------------------------ questions */
.band.pdp-qa:not(.stone):not(.forest) {
    background: var(--paper);
    padding: var(--space) 0;
}

.pdp-qa-two {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 6vw, 112px);
    align-items: start;
}

.pdp-qa .pdp-fold:first-child { border-top: 1px solid var(--ink-20); }

/* ------------------------------------------------------------------ the bar that follows */
.pdp-bar {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--bar);
    z-index: 60;
    background: var(--paper);
    border-bottom: 1px solid var(--ink-20);
    transform: translateY(-110%);
    transition: transform .4s var(--ease);
    visibility: hidden;
}

.pdp-bar.is-on { transform: none; visibility: visible; }
.pdp-bar .in { display: flex; align-items: center; gap: 16px; height: 76px; }
.pdp-bar img { width: 42px; height: 52px; object-fit: cover; display: block; }

/* the name in the bar in Larken at its own weight, not a bold the browser makes up (Jack: "fix the fonts of this") */
.pdp-bar p b { font-weight: 400; }

.pdp-bar p {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: var(--face);
    font-size: 20px;
    line-height: 1.15;
    color: var(--ink);
}

.pdp-bar p span {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-75);
}

.pdp-bar .btn { margin-left: auto; min-height: 50px; display: inline-flex; align-items: center; }

/* ================================================================== THE BASKET DRAWER, 600 wide */
.bsk-wrap { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.bsk-wrap.is-open { pointer-events: auto; }
html.bsk-held, html.bsk-held body { overflow: hidden; }

.bsk-veil {
    position: absolute;
    inset: 0;
    background: rgba(65, 64, 66, .45);
    opacity: 0;
    transition: opacity .35s ease;
}

.bsk-wrap.is-open .bsk-veil { opacity: 1; }

.bsk {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(600px, 100%);
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink);
    transform: translateX(102%);
    transition: transform .5s var(--ease);
    outline: none;
}

.bsk-wrap.is-open .bsk { transform: none; }

.bsk-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px 22px 36px;
    border-bottom: 1px solid var(--ink-20);
}

.bsk-h { margin: 0; font-family: var(--face); font-size: 32px; line-height: 1.1; }

.bsk-x { position: relative; width: 52px; height: 52px; border: 0; background: none; cursor: pointer; }

.bsk-x i::before,
.bsk-x i::after {
    content: '';
    position: absolute;
    left: 15px;
    right: 15px;
    top: 50%;
    height: 1.5px;
    background: var(--ink);
    transform: rotate(45deg);
}

.bsk-x i::after { transform: rotate(-45deg); }
.bsk-x:hover { background: var(--oat); }

.bsk-body { flex: 1 1 auto; overflow-y: auto; padding: 4px 36px 36px; }

.bsk-lines { list-style: none; margin: 0; padding: 0; }

.bsk-l {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) auto;
    gap: 22px;
    align-items: start;
    padding: 26px 0;
    border-bottom: 1px solid var(--ink-20);
    transition: opacity .2s;
}

.bsk-l.is-pending { opacity: .6; }
.bsk-pic { display: block; width: 104px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); }
.bsk-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bsk-l-name { margin: 2px 0 0; font-family: var(--face); font-size: 26px; line-height: 1.15; }

.bsk-l-each {
    margin: 8px 0 0;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-75);
}

.bsk-l-do { display: flex; align-items: center; gap: 20px; margin: 18px 0 0; }
.bsk-qty { height: 40px; }
.bsk-qty button { width: 38px; font-size: 19px; }

.bsk-rm {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--serif);
    font-size: 15px;
    color: var(--ink-75);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bsk-rm:hover { color: var(--ink); }
.bsk-l-p { margin: 4px 0 0; font-family: var(--face); font-size: 22px; white-space: nowrap; }

.bsk-meter { margin: 24px 0 0; }
.bsk-meter p { margin: 0 0 12px; font-family: var(--serif); font-size: 16px; line-height: 1.45; color: var(--ink); }
.bsk-meter-line { display: block; height: 3px; background: var(--ink-20); overflow: hidden; }
.bsk-meter-line i { display: block; height: 100%; background: var(--forest); transition: width .6s var(--ease); }

.bsk-more { margin: 40px 0 0; }
.bsk-adds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.bsk-adds.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.bsk-add { position: relative; }
.bsk-add-pic { display: block; aspect-ratio: 1080 / 1337; overflow: hidden; background: var(--stone); }
.bsk-add-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease); }
.bsk-add-pic:hover img { transform: scale(1.03); }
.bsk-add b { display: block; margin-top: 12px; font-family: var(--face); font-weight: 400; font-size: 19px; line-height: 1.2; }
.bsk-add > span { display: block; margin-top: 4px; font-family: var(--serif); font-size: 15px; color: var(--ink-75); }

/* the round plus on the cover: adds it there and then */
.bsk-add-plus {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 247, .95);
    box-shadow: 0 2px 10px rgba(65, 64, 66, .2);
    cursor: pointer;
    transition: transform .25s var(--ease), background .25s;
}

.bsk-add-plus:hover { transform: scale(1.08); background: var(--forest); }

.bsk-add-plus i::before,
.bsk-add-plus i::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 1.5px;
    margin: -.75px 0 0 -7px;
    background: var(--ink);
}

.bsk-add-plus i::after { transform: rotate(90deg); }
.bsk-add-plus:hover i::before, .bsk-add-plus:hover i::after { background: var(--shell); }

.bsk-member {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    margin: 40px 0 0;
    padding: 18px;
    background: var(--oat);
}

.bsk-member-pic { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); }
.bsk-member-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bsk-member .bsk-kick { margin-bottom: 8px; }
.bsk-member-h { margin: 0; font-family: var(--face); font-size: 23px; line-height: 1.2; color: var(--ink); }
.bsk-member-line { margin: 8px 0 12px; font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--ink-75); }
.bsk-member-go { font-family: var(--serif); font-size: 16px; }

.bsk-foot { flex: none; padding: 22px 36px 28px; border-top: 1px solid var(--ink-20); background: var(--paper); }
.bsk-sum { margin: 0; display: grid; gap: 8px; }
.bsk-sum > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }

.bsk-sum dt {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-75);
}

.bsk-sum dd { margin: 0; font-family: var(--face); font-size: 19px; color: var(--ink); }
.bsk-sum .is-total { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--ink-20); }
.bsk-sum .is-total dt { color: var(--ink); }
.bsk-sum .is-total dd { font-size: 30px; }

.bsk .bsk-go,
.shop2 .bsk-go,
.shop2 .band .in .bsk-go {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 58px;
    margin: 18px 0 0;
    font-size: 15px;
    box-sizing: border-box;
}

.bsk-view {
    display: inline-block;
    margin: 16px 0 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--serif);
    font-size: 16px;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.bsk-empty { padding: 28px 0 0; }
.bsk-empty-h { margin: 0; font-family: var(--face); font-size: 30px; }

/* AS SIMPLE AS IT CAN BE (13 October 2026; Jack: "as little steps as opssible but it prompt other things", "nothing like
   amazon style though"): the sum and Checkout straight under the lines, nothing pinned to the foot; then, quieter and
   smaller, the back issues with the one line about postage, and membership as one line. Space divides, never a rule. */
.bsk-pay { margin: 26px 0 0; }
.bsk-pay .bsk-view { display: block; margin: 16px auto 0; }
.bsk-body > .bsk-more { margin: 56px 0 0; }
.bsk-also { margin: -4px 0 18px; font-family: var(--serif); font-size: 16px; line-height: 1.45; color: var(--ink); }
.bsk-more .bsk-adds { grid-template-columns: repeat(3, minmax(0, 132px)); gap: 20px; }
.bsk-more .bsk-add b { font-size: 17px; }
.bsk-more .bsk-add-plus { width: 34px; height: 34px; top: 8px; right: 8px; }

.bsk-mline {
    margin: 44px 0 0;
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-75);
}

.bsk-mline a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.bsk-mline a:hover { color: var(--forest); }

/* ================================================================== THE BASKET PAGE */
.band.bsk-page:not(.stone):not(.forest) {
    background: var(--paper);
    padding: clamp(40px, 5vw, 80px) 0 var(--space);
}

.shop2 .bsk-page-h { margin: 0 0 clamp(28px, 3vw, 44px); }

.bsk-status {
    margin: 0 0 28px;
    padding: 14px 18px;
    background: var(--stone);
    font-family: var(--serif);
    font-size: 16px;
    color: var(--ink);
    max-width: 60ch;
}

.bsk-page-two {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: clamp(40px, 6vw, 112px);
    align-items: start;
}

.bsk-lines.is-page { border-top: 1px solid var(--ink-20); }

.bsk-order {
    position: sticky;
    top: calc(var(--bar) + 28px);
    padding: 30px 30px 32px;
    background: var(--oat);
}

.bsk-order .bsk-member { background: var(--paper); margin-top: 28px; }

/* THE BASKET AS A PAGE (13 October 2026; Jack: "maybe it shoudl be a page in itself so it donest look so crampt"): the
   lines and, under them, the offers on the left; the sum and Checkout on the right, held in view. On a phone the lines,
   then Checkout, then the offers, so paying never sits below them. */
.bsk-page-lines { min-width: 0; }

/* everything else in the same column, under the lines ("the space under the line i think the back isseus thing shoudl
   go there"): the product page's own sliding row ("maybe arrows to they can see all our magazines and guidebooks?"),
   each issue's + on its cover, three across; then membership as a panel ("showcase subscriptions more"). One paper
   page. */
.bsk-page-lines > .bsk-more { margin: 56px 0 0; }
.bsk-page-lines .pdp-head { margin-bottom: 24px; }
.bsk-page-lines .bsk-kick { margin: 0; }
.bsk-page-lines .bsk-also { margin: 8px 0 0; }
.bsk-page-lines .pdp-row.is-issues { grid-auto-columns: calc((100% - 2 * 20px) / 3); gap: 20px; }
.bsk-page-lines .pdp-row li { position: relative; }

.bsk-member.is-page { grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: center; margin: 56px 0 0; padding: 28px; }
.bsk-member.is-page .bsk-member-h { font-size: 30px; margin: 0 0 16px; }
.bsk-member.is-page .pdp-perks { margin: 0 0 22px; }
.bsk-member.is-page .pdp-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }

/* MAKE IT A MEMBERSHIP (13 October 2026, version H of /design-2026/basket-upsell/, with the difference: Jack, "i think
   i like h but use the differnece thing"). The covers a member reads today, in a strip; the price as what it adds. */
.bsk-ups { margin: 56px 0 0; padding: 28px; background: var(--oat); }
.bsk-ups .bsk-kick { margin-bottom: 10px; }
.bsk-ups-h { margin: 0 0 18px; font-family: var(--face); font-size: 30px; line-height: 1.15; color: var(--ink); max-width: 22em; }
.bsk-ups-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin: 0 0 20px; }
.bsk-ups-strip img { display: block; width: 100%; aspect-ratio: 1080 / 1337; object-fit: cover; background: var(--stone); }
.bsk-ups-p { margin: 0 0 18px; font-family: var(--serif); font-size: 16px; line-height: 1.45; color: var(--ink-75); }
.bsk-ups-p b { display: block; margin-bottom: 2px; font-family: var(--face); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--ink); }
.bsk-ups .pdp-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.bsk-ups-note { margin: 14px 0 0; font-family: var(--serif); font-size: 15px; line-height: 1.5; color: var(--ink-75); }

/* ================================================================== AFTER PAYING */
.band.ord-top:not(.stone):not(.forest) {
    background: var(--paper);
    padding: clamp(48px, 6vw, 96px) 0 var(--space);
}

.ord-tick {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 22px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink);
}

.ord-tick i {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--forest);
    flex: none;
}

.ord-tick i::after {
    content: '';
    position: absolute;
    left: 9px;
    top: 5px;
    width: 5px;
    height: 11px;
    border-right: 2px solid var(--shell);
    border-bottom: 2px solid var(--shell);
    transform: rotate(40deg);
}

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

.ord-steps li { position: relative; padding: 36px 24px 0 0; }

.ord-steps li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid var(--forest);
    background: var(--paper);
    z-index: 1;
}

.ord-steps li.is-done::before { background: var(--forest); }

.ord-steps li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 18px;
    top: 8px;
    width: calc(100% + clamp(18px, 2vw, 32px) - 18px);
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--ink-35) 0 7px, transparent 7px 13px);
}

.ord-steps b { display: block; font-family: var(--face); font-weight: 400; font-size: 24px; line-height: 1.2; }
.ord-steps span { display: block; margin-top: 8px; font-family: var(--serif); font-size: 16px; line-height: 1.5; color: var(--ink-75); max-width: 30ch; }

.band.stone.ord-what, .band.ord-read:not(.stone):not(.forest), .band.forest.ord-member { padding: var(--space) 0; }
.band.ord-read:not(.stone):not(.forest) { background: var(--paper); }

.ord-two {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 24px clamp(40px, 5vw, 96px);
    align-items: start;
}

.shop2 .ord-member .pdp-kick { color: var(--on-forest-55); }
.shop2 .ord-member .pdp-h2 { color: var(--on-forest); }
.shop2 .ord-member .pdp-text { color: rgba(241, 237, 232, .82); }

/* ================================================================== narrower */
@media (max-width: 1100px) {
    .pdp-row.is-issues { grid-auto-columns: calc((100% - 3 * 24px) / 4); }
}

@media (max-width: 960px) {
    .pdp-two,
    .pdp-member-two,
    .pdp-qa-two,
    .bsk-page-two,
    .ord-two { grid-template-columns: minmax(0, 1fr); }
    .pdp-buy, .bsk-order { position: static; }
    /* on a phone: the lines, Checkout, then the row and membership, so paying never sits below the offers */
    .bsk-page-lines { display: contents; }
    .bsk-page-lines > .bsk-lines, .bsk-page-lines > .bsk-empty-h { order: 1; }
    .bsk-page-two > .bsk-order { order: 2; }
    .bsk-page-lines > .bsk-more { order: 3; margin: 0; }
    .bsk-page-lines > .bsk-member { order: 4; margin: 0; }
    .bsk-page-lines > .bsk-ups { order: 4; margin: 0; padding: 22px 18px; }
    .bsk-ups-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .bsk-ups-h { font-size: 25px; }
    .bsk-page-lines .pdp-row.is-issues { grid-auto-columns: 46%; }
    .bsk-member.is-page { grid-template-columns: minmax(0, 1fr); }
    .bsk-member.is-page .bsk-member-pic { max-width: 260px; }
    .pdp-arrow { opacity: 1; width: 44px; height: 44px; margin-top: -22px; }
    .pdp-row.is-issues { grid-auto-columns: 40%; }
    .pdp-member-pic { max-width: 420px; }
}

@media (max-width: 760px) {
    .pdp-hero { height: calc(clamp(520px, 86vh, 760px) + var(--bar)); }
    .pdp-hero-h { font-size: min(68px, 28px + (68px - 28px) * 0.6); }
    .pdp-hero-go { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }
    .pdp-row { gap: 14px; }
    .pdp-row.is-issues { grid-auto-columns: 58%; }
    .bsk-top { padding-left: 20px; }
    .bsk-body, .bsk-foot { padding-left: 20px; padding-right: 20px; }
    .bsk-l { grid-template-columns: 80px minmax(0, 1fr); gap: 16px; }
    .bsk-pic { width: 80px; }
    .bsk-l-p { grid-column: 2; }
    .bsk-l-name { font-size: 22px; }
    .bsk-adds.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bsk-member { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; }
    .ord-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .ord-steps li { padding: 0 0 28px 40px; }
    .ord-steps li::before { top: 4px; }
    .ord-steps li:not(:last-child)::after { left: 8px; top: 26px; bottom: 0; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--ink-35) 0 7px, transparent 7px 13px); }

    /* on a phone the bar that follows sits at the foot, and the bell rises above it */
    .pdp-bar { top: auto; bottom: 0; border-bottom: 0; border-top: 1px solid var(--ink-20); transform: translateY(110%); }
    .pdp-bar .in { height: 72px; gap: 12px; }
    .pdp-bar p { font-size: 18px; }
    .pdp-bar .btn { padding: 0 16px; font-size: 14px; }
    html:has(.pdp-bar.is-on) .bellfab { bottom: 92px; }
}

/* ================================================================== FOURTH PASS, 2 October 2026 evening. Jack, of
   /shop-2a: "what you have on this page is better for this section so use that but add the buy for 15 or subscribe
   to read all thing for the digital"; of the promises and folds "remove all this from that section"; "we have
   welcome text for each issue ... centered justified on page, something simple and beautiful". The gallery, the
   lightbox and the choice are the earlier version's rules, carried across as they were. */

/* the gallery: every picture at once beside the buying */
.pdp-mosaic {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pdp-mosaic li.is-wide { grid-column: 1 / -1; }

.pdp-mosaic button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: var(--stone);
    cursor: zoom-in;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.pdp-mosaic img,
.pdp-mosaic video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .9s var(--ease);
}

.pdp-mosaic button:hover img,
.pdp-mosaic button:hover video { transform: scale(1.025); }

.pdp-mosaic button:focus-visible { outline: 2px solid var(--august); outline-offset: 3px; }

.pdp-swipe { display: none; }

.pdp-lb {
    position: fixed;
    inset: 0;
    z-index: 320;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(56px, 6vw, 96px) clamp(16px, 6vw, 120px);
}

.pdp-lb-veil {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(65, 64, 66, .94);
    cursor: zoom-out;
}

.pdp-lb figure {
    position: relative;
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pdp-lb img,
.pdp-lb video {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 2 * clamp(56px, 6vw, 96px) - 48px);
    object-fit: contain;
}

.pdp-lb figcaption {
    display: flex;
    gap: 18px;
    align-items: baseline;
    margin-top: 16px;
    font-family: var(--face);
    font-size: 19px;
    color: var(--shell);
}

.pdp-lb figcaption span {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(249, 245, 238, .7);
}

.pdp-lb-x {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 52px;
    height: 52px;
    border: 0;
    background: none;
    cursor: pointer;
}

.pdp-lb-x i::before,
.pdp-lb-x i::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    top: 50%;
    height: 1.5px;
    background: var(--shell);
    transform: rotate(45deg);
}

.pdp-lb-x i::after { transform: rotate(-45deg); }

.pdp-arrow.is-lb { opacity: 1; position: absolute; }

/* the choice */
.pdp-ways {
    border: 0;
    margin: 30px 0 0;
    padding: 0;
    min-width: 0;
}

.pdp-ways legend {
    padding: 0;
    margin: 0 0 12px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-75);
}

.pdp-way {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 18px 20px 18px 54px;
    border: 1px solid var(--ink-20);
    cursor: pointer;
    background: var(--paper);
    transition: background .2s, border-color .2s;
}

.pdp-way:hover { background: #fff; }

.pdp-way.is-on {
    border-color: var(--ink);
    background: #fff;
    z-index: 1;
}

.pdp-way input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.pdp-way::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 21px;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1.5px solid var(--ink-75);
    background: transparent;
}

.pdp-way.is-on::before {
    border-color: var(--forest);
    background: var(--forest);
    box-shadow: inset 0 0 0 3.5px #fff;
}

.pdp-way:focus-within { outline: 2px solid var(--august); outline-offset: 2px; }

.pdp-way-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.pdp-way-top b {
    font-family: var(--face);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.2;
    color: var(--ink);
}

.pdp-way-top em {
    font-family: var(--face);
    font-style: normal;
    font-size: 19px;
    color: var(--ink);
    white-space: nowrap;
}

.pdp-way-line {
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-75);
}

.pdp-way-note {
    font-family: var(--serif);
    font-style: italic;
    font-size: 15px;
    line-height: 1.45;
    color: var(--ink-75);
}

.pdp-try {
    font-family: var(--serif);
    font-size: 16px;
    color: var(--ink-75);
    margin: 16px 0 0;
}

.pdp-way:not(.is-on) .pdp-way-line,
.pdp-way:not(.is-on) .pdp-way-note { display: none; }

.pdp-way { padding-top: 16px; padding-bottom: 16px; }

.pdp-way::before { top: 19px; }

.pdp-way:not(.is-on) .pdp-way-line,
.pdp-way:not(.is-on) .pdp-way-pick { display: none; }

/* reading online: one issue, or every issue. Rows like the three ways above them, the same round mark, filled forest
   when chosen; the name, one line of what it is, the price at the right (Jack, 3 October: "i feel like these could be
   designed better") */
.pdp-way-pick { display: grid; gap: 10px; margin-top: 16px; }

.pdp-way-pick button {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 16px;
    padding: 14px 16px 14px 46px;
    border: 1px solid var(--ink-20);
    background: var(--paper);
    text-align: left;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}

.pdp-way-pick button:hover { border-color: var(--ink-75); }

.pdp-way-pick button::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 17px;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1.5px solid var(--ink-75);
}

.pdp-way-pick button.is-on { border-color: var(--ink); }
.pdp-way-pick button.is-on::before { border-color: var(--forest); background: var(--forest); box-shadow: inset 0 0 0 3px var(--paper); }
.pdp-way-pick button:focus-visible { outline: 2px solid var(--august); outline-offset: 2px; }

.pdp-pick-words { display: grid; gap: 3px; }
.pdp-way-pick b { font-family: var(--face); font-weight: 400; font-size: 19px; line-height: 1.25; color: var(--ink); }
.pdp-pick-words > span { font-family: var(--serif); font-size: 14.5px; line-height: 1.45; color: var(--ink-75); }
.pdp-way-pick i { font-family: var(--face); font-style: normal; font-size: 18px; color: var(--ink); white-space: nowrap; }

.pdp-do.is-soon { flex-direction: column; gap: 8px; }

.pdp-soon {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-75);
}

.shop2 .pdp-buy .pdp-line { margin-top: 18px; }
.shop2 .pdp-buy .pdp-price { margin-top: 22px; }

/* the welcome, whole, on a white page over a landscape film (Jack, 2 October: "a beautiful landscape video for the
   welcome note", "i do like the white box but the size could be different, maybe more square", "a little more like
   this" of an article's opening). The page is wide and the letter runs in two justified columns, so the box is near
   square; the type is the article's: Lora, justified, the first letter large in Larken and bracken (_article.css,
   .col p.lede::first-letter). */
.pdp-welcome-band {
    position: relative;
    overflow: hidden;
    padding: calc(var(--space) * 1.1) 0;
    background: var(--ink);
}

.pdp-welcome-band video,
.pdp-welcome-band > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pdp-welcome-band::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(65, 64, 66, .22);
}

.pdp-welcome-band .in { position: relative; z-index: 1; }

.pdp-welcome {
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(40px, 5vw, 80px) clamp(28px, 5vw, 88px);
    background: var(--paper);
    box-shadow: 0 40px 80px -40px rgba(65, 64, 66, .6);
}

.shop2 .pdp-welcome .pdp-h2 {
    text-align: center;
    margin: 0 0 44px;
    font-size: min(clamp(36px, 3vw, 48px), 28px + (clamp(36px, 3vw, 48px) - 28px) * 0.6);
}

.pdp-welcome-cols { column-count: 2; column-gap: clamp(36px, 4vw, 64px); }

.pdp-welcome p {
    margin: 0;
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.75;
    color: var(--ink);
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.pdp-welcome p + p { margin-top: 1.05em; }

/* the sign-off's last line, on its own and in Larken italic, bracken like the first letter
   (Jack, 2 October: "Slainte mhath maybe on a new line and different font?") */
.pdp-welcome p.pdp-welcome-sign {
    margin-top: .9em;
    font-family: var(--face);
    font-style: italic;
    font-weight: 400;
    font-size: 30px;
    line-height: 1.2;
    text-align: left;
    hyphens: manual;
    -webkit-hyphens: manual;
    color: var(--bracken, #C08C3D);
    break-inside: avoid;
}

.pdp-welcome p:first-child::first-letter {
    font-family: var(--face);
    font-weight: 500;
    font-size: min(4.2em, 28px + (4.2em - 28px) * 0.6);
    line-height: .78;
    float: left;
    margin: 10px 14px 0 0;
    color: var(--bracken, #C08C3D);
}

@media (max-width: 860px) {
    .pdp-welcome-cols { column-count: 1; }
}

@media (max-width: 960px) {
    .pdp-mosaic {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 86%;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin: 0 calc(-1 * var(--edge));
        padding: 0 var(--edge);
        scroll-padding: 0 var(--edge);
    }
    .pdp-mosaic::-webkit-scrollbar { display: none; }
    .pdp-mosaic li { scroll-snap-align: start; }
    .pdp-mosaic li.is-wide { grid-column: auto; }
    .pdp-swipe { display: block; margin: 10px 0 0; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--ink-75); }
}


@media (prefers-reduced-motion: reduce) {
    .bsk, .bsk-veil, .pdp-bar, .pdp-track { transition: none; }
}

/* ------------------------------------------------------------------ after paying, redrawn (3 October 2026: Jack, "this
   page should be so much better and more visual"): the product page's hero, band and membership; its own pieces are
   the covers ordered and the journey told by the sleeve */
.pdp-hero.ord-hero { height: calc(clamp(520px, 72vh, 760px) + var(--bar)); }

.band.ord-got-band:not(.stone):not(.forest) { background: var(--paper); padding: var(--space) 0; }

/* the heading and the total beside the covers, so one cover alone reads as meant */
.ord-got-two {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(32px, 5vw, 96px);
    align-items: start;
}

.ord-got-sum { margin: 20px 0 0; max-width: 32ch; font-family: var(--serif); font-size: 18px; line-height: 1.55; color: var(--ink-75); }

.ord-got {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: clamp(20px, 2.4vw, 40px);
}

.ord-got > li { max-width: 380px; }

.ord-got-pic { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); }
.ord-got-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ord-got b { display: block; margin-top: 14px; font-family: var(--face); font-weight: 400; font-size: 24px; line-height: 1.2; }
.ord-got > li > span:last-child { display: block; margin-top: 4px; font-family: var(--serif); font-size: 16px; color: var(--ink-75); }

.ord-next {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 40px);
}

.ord-next-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-top: 20px;
    border: 1px solid var(--ink);
    border-radius: 50%;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink);
}

.ord-next b { display: block; margin-top: 12px; font-family: var(--face); font-weight: 400; font-size: 26px; line-height: 1.2; }
.ord-next > li > span:last-child { display: block; margin-top: 8px; max-width: 36ch; font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--ink-75); }

@media (max-width: 760px) {
    .ord-next { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .ord-got-two { grid-template-columns: minmax(0, 1fr); }
    .ord-got { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pdp-hero.ord-hero { height: calc(clamp(480px, 80vh, 680px) + var(--bar)); }
}

/* ------------------------------------------------------------------ the magazine's landing (3 October 2026), on the shop's
   own rules; only what is its own: a longer heading in the hero, the latest issue's picture, every issue as a grid */
.shop2 .pdp-hero-h.mag2-h1 { font-size: min(clamp(52px, 6vw, 104px), 28px + (clamp(52px, 6vw, 104px) - 28px) * 0.6); max-width: 16ch; }
.mag2-latest .pdp-member-pic { aspect-ratio: 4 / 5; }
.pdp-row.is-issues.mag2-all {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    overflow: visible;
}
.ord-got > li > a { color: inherit; text-decoration: none; display: block; }

/* the magazine landing's people (3 October): faces in a grid on forest, as the first landing had them */
.band.forest.mag2-people { padding: var(--space) 0; }
.shop2 .mag2-people .pdp-kick { color: var(--on-forest-55); }
.shop2 .mag2-people .pdp-text { color: var(--on-forest); }
.mag2-faces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); }
.mag2-faces a { display: block; color: var(--on-forest); text-decoration: none; }
.mag2-face { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: rgba(241, 237, 232, .08); }
.mag2-face img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease); }
.mag2-faces a:hover img { transform: scale(1.03); }
.mag2-faces b { display: block; margin-top: 14px; font-family: var(--face); font-weight: 400; font-size: 24px; line-height: 1.2; }
.mag2-faces span:last-child { display: block; margin-top: 4px; font-family: var(--serif); font-size: 15px; color: var(--on-forest-55); }
.shop2 .mag2-everyone { margin-top: 40px; }
.shop2 .mag2-everyone a, .shop2 .mag2-try a { color: inherit; }
.shop2 .mag2-try { margin-top: 18px; }
@media (max-width: 760px) { .mag2-faces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the heading white on forest (Jack, 3 October: "needs to be white text"); a face fades in as it changes */
.shop2 .mag2-people .pdp-h2 { color: var(--on-forest); }
.mag2-face img { animation: mag2-in .9s var(--ease) both; }
@keyframes mag2-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mag2-face img { animation: none; } }

/* the magazine landing's contents: every piece and its page, as a printed contents page (3 October) */
.band.stone.mag2-toc-band { padding: var(--space) 0; }
.mag2-toc-two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 120px); align-items: start; }
.mag2-toc-pics { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mag2-toc-pics li { aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone-2); }
.mag2-toc-pics img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop2 .mag2-toc-all { margin-top: 24px; }
.shop2 .mag2-toc-all a { color: inherit; }
.mag2-toc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink-20); }
.mag2-toc li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--ink-20); }
.mag2-toc-n { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--ink-75); }
.mag2-toc-t { font-family: var(--face); font-size: clamp(19px, 1.4vw, 22px); line-height: 1.3; color: var(--ink); }
@media (max-width: 960px) { .mag2-toc-two { grid-template-columns: minmax(0, 1fr); } }

.mag2-toc-two > div:first-child { position: sticky; top: calc(var(--bar) + 32px); }
@media (max-width: 960px) { .mag2-toc-two > div:first-child { position: static; } }
/* the contents' one picture, following the piece pointed at (3 October) */
.mag2-toc-pic { margin: 32px 0 0; }
.mag2-toc-frame { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone-2); }
.mag2-toc-frame img { width: 100%; height: 100%; object-fit: cover; display: block; animation: mag2-in .6s var(--ease) both; }
.mag2-toc-pic figcaption { margin-top: 12px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-75); }
.mag2-toc li { cursor: default; transition: color .3s var(--ease); }
.mag2-toc li.is-on .mag2-toc-t { color: var(--tweed); }
.mag2-toc li.is-on .mag2-toc-n { color: var(--tweed); }
@media (max-width: 960px) { .mag2-toc-pic { position: sticky; top: calc(var(--bar) + 12px); z-index: 1; } .mag2-toc-frame { aspect-ratio: 16 / 10; } }
/* an illustration in the contents picture is shown whole, as a print on paper, never cropped (3 October) */
.mag2-toc-frame.is-whole { background: #fff; padding: 6%; box-sizing: border-box; display: flex; align-items: center; }
.mag2-toc-frame.is-whole img { object-fit: contain; height: auto; max-height: 100%; }

.band.mag2-toc-band { padding: var(--space) 0; }