/*
flow.css. The sheet every product opens into, and the twelve columns under everything.
A variant sets --display, --text and --num (its three voices) and, if it wants, --paper and --black. Nothing else.
*/
:root {
  --paper: #FFFFFF; --black: #0A0A0A; --red: #E2231A; --grey: #666666; --hair: #D4D4D4;
  --out: cubic-bezier(.16, 1, .3, 1); --travel: cubic-bezier(.76, 0, .18, 1);
  --m: clamp(16px, 3.2vw, 48px); --g: clamp(10px, 1.4vw, 20px);
}
*, *::before, *::after { box-sizing: border-box }
html { background: var(--paper); scrollbar-color: var(--black) transparent; -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--paper); color: var(--black); font: 400 1rem/1.5 var(--text); -webkit-font-smoothing: antialiased; caret-color: var(--red) }
h1, h2, h3, p, dl, dd { margin: 0 }
::selection { background: var(--red); color: var(--black) }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px }
.num { font-family: var(--num); font-variant-numeric: tabular-nums lining-nums }
kbd { font: inherit; font-size: .75em; font-weight: 700; border: 1px solid currentColor; padding: 0 .4em; line-height: 1.5; margin-left: .4em }
.sheet-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-inline: var(--m) }
html.sheet-open { overflow: hidden }

.construction { position: fixed; inset: 0 var(--m); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); pointer-events: none; z-index: 90; opacity: 0; transition: opacity .25s var(--out) }
.construction i { background: color-mix(in srgb, var(--red) 12%, transparent); box-shadow: inset 1px 0 0 var(--red), inset -1px 0 0 var(--red) }
.show-grid .construction { opacity: 1 }
.grid-key { font: inherit; color: inherit; background: none; border: 0; padding: 6px 0; cursor: pointer; border-bottom: 1px solid transparent }
.grid-key:hover, .grid-key[aria-pressed=true] { border-bottom-color: currentColor }

/* a plate: a flat field with the object afloat in it. Each photograph's ground was levelled to its field colour, so only its far edge is feathered */
.float { -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 86%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 86%, transparent 100%) }

/* ── the product sheet: drenched in the product's own field ── */
.p-sheet { position: fixed; inset: 0; z-index: 50; overflow-y: auto; overscroll-behavior: contain; background: var(--field); color: var(--ink); scrollbar-color: var(--ink) transparent }
.p-sheet ::selection { background: var(--ink); color: var(--field) }
.s-mast { position: sticky; top: 0; z-index: 3; background: var(--field); align-items: baseline; padding-block: clamp(14px, 1.8vw, 24px); font-size: .875rem; font-weight: 500 }
.s-back { grid-column: 1 / span 5; justify-self: start; text-decoration: none; font-family: var(--display); font-weight: var(--mark-w, 800); font-size: 1.35rem; letter-spacing: var(--mark-ls, -.04em); line-height: 1 }
.s-back span { font: 500 .875rem var(--text); letter-spacing: 0; margin-left: 1.2em }
.s-count { grid-column: 6 / span 3 } .s-close { grid-column: 9 / -1; justify-self: end; text-decoration: none }
.s-close:hover, .s-back:hover span { text-decoration: underline }

.s-open { position: relative; min-height: calc(100svh - 4.2rem); align-items: end; padding-bottom: clamp(20px, 3vw, 44px) }
.s-plate { grid-column: 5 / -1; grid-row: 1; align-self: stretch; margin-right: calc(var(--m) * -1); position: relative; min-height: 50svh }
.s-plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain }
.s-head { grid-column: 1 / span 6; grid-row: 1; position: relative; z-index: 1; display: grid; gap: clamp(4px, .8vw, 12px); pointer-events: none }
.s-no { font-size: clamp(1rem, 1.5vw, 1.35rem); font-weight: 600; width: fit-content }
.s-name { font-family: var(--name-face, var(--display)); font-weight: var(--name-w, 800); font-size: var(--name-size, clamp(3rem, 9vw, 9.5rem)); line-height: var(--name-lh, .9); letter-spacing: var(--name-ls, -.04em); font-stretch: var(--name-wdth, 100%); width: fit-content; text-wrap: balance }
/* what it is, said quietly: spaced capitals in Atkinson under the name */
.s-kind { font: 500 clamp(.74rem, .95vw, .875rem)/1.3 'Atkinson Hyperlegible Next', var(--text); letter-spacing: .2em; text-transform: uppercase; margin-top: .6em }

.s-body { border-top: 2px solid var(--ink); padding-block: clamp(20px, 2.6vw, 34px) clamp(56px, 8vw, 120px); row-gap: clamp(24px, 3vw, 40px); align-items: start }
.s-say { grid-column: 1 / span 6; font-size: clamp(1.3rem, 2.3vw, 2rem); line-height: 1.22; letter-spacing: -.015em; font-weight: 500; text-wrap: pretty; max-width: 28ch }
.s-spec { grid-column: 8 / -1; border-top: 1px solid var(--ink) }
.s-spec div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: var(--g); padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 28%, transparent) }
.s-spec dt { font-size: .8125rem; font-weight: 500; opacity: .75; padding-top: .15em } .s-spec dd { font-weight: 600 }
.s-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); margin-right: 9px }
.s-key { grid-column: 8 / -1; justify-self: start; display: inline-flex; align-items: center; height: 60px; padding: 0 28px; background: var(--ink); color: var(--field); font-weight: 800; font-size: 1.0625rem; text-decoration: none; transition: transform .25s var(--out), box-shadow .2s }
.s-key:hover { box-shadow: inset 0 0 0 3px var(--field), 0 0 0 3px var(--ink) } .s-key:active { transform: scale(.97); transition-duration: 0s }

.s-next { background: var(--nf); color: var(--ni); text-decoration: none; align-items: baseline; padding-block: clamp(28px, 5vw, 72px) }
.s-next .num { grid-column: 1 / span 2; font-weight: 600 } .s-next > :last-child { grid-column: 10 / -1; justify-self: end; font-size: .875rem; font-weight: 500 }
.s-next b { grid-column: 3 / span 7; font-family: var(--name-face, var(--display)); font-weight: var(--name-w, 800); font-size: clamp(2.2rem, 6vw, 6rem); line-height: .95; letter-spacing: var(--name-ls, -.04em); font-stretch: var(--name-wdth, 100%) }
.s-next:hover b { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em }

@media (max-width: 860px) {
  .s-back { grid-column: 1 / span 6 } .s-count { display: none } .s-close { grid-column: 7 / -1 } .s-close kbd { display: none }
  .s-open { min-height: 0; row-gap: 8px } .s-plate { grid-column: 1 / -1; grid-row: 1; margin-inline: calc(var(--m) * -1); min-height: 56svh } .s-head { grid-column: 1 / -1; grid-row: 2 }
  .s-say, .s-spec, .s-key { grid-column: 1 / -1 }
  .s-next .num { grid-column: 1 / -1 } .s-next b { grid-column: 1 / -1 } .s-next > :last-child { grid-column: 1 / -1; justify-self: start }
}

/* ── the travel. The plate, the name and the number are the same things in both places, so they move; the rest changes hands ── */
::view-transition-group(p-plate), ::view-transition-group(p-name), ::view-transition-group(p-no) { animation-duration: .75s; animation-timing-function: var(--travel) }
::view-transition-old(p-plate), ::view-transition-new(p-plate) { width: 100%; height: 100%; object-fit: contain }
::view-transition-old(p-name), ::view-transition-new(p-name), ::view-transition-old(p-no), ::view-transition-new(p-no) { height: 100%; width: auto; object-fit: contain; object-position: left bottom }
::view-transition-old(root) { animation: .28s var(--out) both vt-out } ::view-transition-new(root) { animation: .5s .22s var(--out) both vt-in }
::view-transition-group(p-plate) { z-index: 2 } ::view-transition-group(p-name), ::view-transition-group(p-no) { z-index: 3 }
::view-transition { background: var(--vt-field, var(--paper)) }
@keyframes vt-out { to { opacity: 0 } } @keyframes vt-in { from { opacity: 0 } }

/* ── the closing sheet ── */
.end { background: var(--paper); color: var(--black); position: relative; z-index: 1 }
.e-band { padding-block: clamp(56px, 8vw, 120px) 0; row-gap: clamp(20px, 2.6vw, 36px) }
.e-band h2 { grid-column: 1 / span 3; font-family: var(--display); font-weight: var(--h-w, 800); font-size: var(--h-size, 1.125rem); letter-spacing: var(--h-ls, -.02em); line-height: 1.2; font-stretch: var(--name-wdth, 100%) }
.e-list { grid-column: 4 / -1; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--black) }
.e-row { display: grid; grid-template-columns: 4.5em minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--g); align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--hair); text-decoration: none; font-weight: 500 }
a.e-row > * { transition: transform .35s var(--out) }
a.e-row:hover { border-bottom-color: var(--black) } a.e-row:hover > * { transform: translateX(12px) }
.e-list b { font-family: var(--name-face, var(--display)); font-weight: var(--name-w, 800); font-size: 1.375rem; letter-spacing: var(--name-ls, -.025em); font-stretch: var(--name-wdth, 100%) }
.e-state { color: var(--grey) } .e-state i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 9px; box-shadow: 0 0 0 1px var(--black) }
.e-aside { grid-column: 4 / span 6; color: var(--grey); max-width: 58ch }

/* the letter: one admission set large, then a few plain paragraphs at a reading size, the key, and the mark to sign it.
   One column, as a letter is, aligned to the programme's column so the sheet keeps one edge */
/* one gap between every paragraph of the letter, from the greeting to the sign-off, so it reads at one even pace */
.e-letter { --para: clamp(1.0625rem, 1.25vw, 1.25rem); --gap: calc(var(--para) * 1.4); row-gap: 0; padding-bottom: clamp(72px, 10vw, 150px) }
.e-dear { grid-column: 4 / span 7; font-size: clamp(1.5rem, 2.6vw, 2.5rem); font-weight: 500; line-height: 1.18; letter-spacing: -.028em; margin-bottom: var(--gap) }
.e-lead { grid-column: 4 / span 7; font-size: clamp(1.5rem, 2.6vw, 2.5rem); font-weight: 500; line-height: 1.18; letter-spacing: -.028em; text-wrap: pretty; max-width: 26ch }
.e-lead span { color: color-mix(in srgb, var(--black) 42%, transparent) }
.e-body { grid-column: 4 / span 6; margin-top: var(--gap) }
.e-body p { font-size: var(--para); line-height: 1.55; letter-spacing: -.008em; color: color-mix(in srgb, var(--black) 78%, transparent); max-width: 33em; text-wrap: pretty }
.e-body p + p { margin-top: var(--gap) }
.e-key { grid-column: 4 / span 4; justify-self: start; margin-top: clamp(24px, 3.4vw, 56px); display: inline-flex; align-items: center; height: 56px; padding: 0 26px; background: var(--black); color: var(--paper); font-weight: 700; font-size: 1rem; text-decoration: none; transition: background .15s, color .15s, transform .25s var(--out) }
.e-key:hover { background: var(--red); color: var(--black) } .e-key:active { transform: scale(.97); transition-duration: 0s }
.e-close { grid-column: 4 / span 6; margin-top: var(--gap); font-size: var(--para); color: color-mix(in srgb, var(--black) 78%, transparent) }
.e-sign { grid-column: 4 / span 3; margin-top: 12px; font-family: var(--display); font-size: 1.35rem; line-height: 1 } .e-sign .whole { height: 22px; display: block }
.e-foot { padding-block: 16px 28px; font-size: .8125rem; font-weight: 500; color: var(--grey) }
.e-foot > * { grid-column: span 6 } .e-foot a { color: var(--grey); text-decoration: none } .e-foot a:hover { color: var(--black); text-decoration: underline } .e-foot > :last-child { justify-self: end }
@media (max-width: 860px) {
  .e-letter h2 { margin-bottom: var(--gap) }
  .e-band h2, .e-list, .e-aside, .e-dear, .e-lead, .e-body, .e-close, .e-key, .e-sign { grid-column: 1 / -1 } .e-row { grid-template-columns: 3.4em minmax(0, 1fr); } .e-row > :nth-child(n+3) { grid-column: 2; font-size: .9rem }
}

.e-held { color: var(--grey) } .e-held b { font-weight: 400 }
.s-held b { opacity: .55 }