/* Eventpress. A news front page that is a store.
 *
 * EVENTPRESS-012. Rebuilt 20 September 2026 on the nofuf front-page
 * construction (~/nofuf, components/front-page.tsx and components/masthead.tsx)
 * at Kevin's direction: the broadsheet masthead, the twelve column grid with
 * hairline column rules, the all-caps sans kicker over a tight serif headline,
 * and nofuf's framed rail card, the one that carries the red Sam Altman story
 * and the blue One Nation story. Those two cards are the two lead packages here.
 *
 * Two things are NOT copied from nofuf. Its Bodoni display face stays there:
 * Eventpress is Newsreader and Inter, locked in brand/BRAND-NOTE.md. And its
 * silver press-kit bevel becomes a paper-to-rule bevel, because the brand note
 * says ink, paper, press red and press blue, nothing else.
 *
 * Light only, by Kevin's ruling of 20 September 2026.
 * Australian English. No em dashes.
 */

:root {
  --ink: #14171A;
  --ink-80: #3A3F44;
  --muted: #6C7075;
  --paper: #F7F4EF;
  --paper-2: #EFEBE3;
  --card: #FFFFFF;
  --press: #D8382A;
  --press-deep: #A92417;
  --press-dark: #5E120B;
  --blue: #1B4A8B;
  --blue-deep: #123463;
  --blue-dark: #0B2247;
  --blue-wash: #EEF1FA;
  --rule: #DCD6CB;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter: 18px;
  --shell: 1180px;
  --bar: 88px;           /* the sticky order bar keeps this much room at the foot */

  color-scheme: light;
}

@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/web/Newsreader-400.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/web/Newsreader-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/web/Inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/web/Inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/web/Inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/web/Inter-700.woff2") format("woff2"); }

/* =========================================================== base ===== */
* { box-sizing: border-box; min-width: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.58;
  font-feature-settings: "kern" 1, "liga" 1; -webkit-font-smoothing: antialiased;
  padding-bottom: var(--bar);
}
.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
p { margin: 0 0 0.95em; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blue-deep); }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--press); outline-offset: 2px; }
::selection { background: var(--ink); color: #FFF; }

/* The type rhythm, read off the nofuf front page: an all-caps sans kicker at
   0.15em over a tight serif headline with negative tracking, and a serif deck
   in italic under it. Sizes are hand set at each step, never scaled blindly. */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -0.015em; line-height: 1.06; text-wrap: balance; }
h1 { font-size: clamp(2.05rem, 5.2vw, 2.95rem); letter-spacing: -0.024em; line-height: 1.02; }
h2 { font-size: clamp(1.6rem, 3.1vw, 2.3rem); letter-spacing: -0.02em; }
h3 { font-size: clamp(1.35rem, 2.3vw, 1.8rem); }
h4 { font-size: 1.14rem; line-height: 1.16; }

.kicker { font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--press-deep); margin: 0 0 0.5rem; }
.kicker--blue { color: var(--blue); }
.kicker--ink { color: var(--ink-80); }
.deck { font-family: var(--serif); font-size: 1.12rem; font-style: italic; line-height: 1.34; color: var(--ink); margin: 0.55rem 0 0; }
.lede { font-size: 1.05rem; line-height: 1.52; color: var(--ink-80); max-width: 34em; }
.small { font-size: 0.82rem; color: var(--muted); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; z-index: 99; background: var(--ink); color: #FFF; padding: 0.5rem 0.8rem; }

/* =========================================================== buttons == */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600;
  padding: 0.62em 1.05em; border: 1px solid var(--ink); background: var(--ink); color: #FFF;
  text-decoration: none; cursor: pointer; border-radius: 0; white-space: nowrap;
}
.btn:hover { background: #000; border-color: #000; color: #FFF; }
.btn--pay { background: var(--press); border-color: var(--press); }
.btn--pay:hover { background: var(--press-deep); border-color: var(--press-deep); color: #FFF; }
.btn--blue { background: var(--blue); border-color: var(--blue); }
.btn--blue:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: #FFF; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #FFF; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* =========================================================== masthead = */
/* nofuf's masthead: date left, wordmark centred with the tagline under it,
   the actions right, a section rule below. Here the right slot is always the
   order, because this front page is a store. */
.masthead { border-top: 3px solid var(--ink); background: var(--paper); }
.masthead__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 0.85rem 0 0.75rem; border-bottom: 1px solid var(--ink); }
.masthead__date { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-80); margin: 0; font-variant-numeric: tabular-nums; }
.masthead__date b { display: block; font-weight: 600; color: var(--ink); letter-spacing: 0.1em; }
.masthead__brand { text-align: center; }
.masthead__brand img { height: 32px; width: auto; margin: 0 auto; }
/* The standing line under the nameplate. Kevin, 20 September 2026: "I also see
   at the top where you've got 'The right press for your event.' I like that. It
   should stay there. That could be even bolder so you can see it more." So it
   is set like a broadsheet strapline: the serif at 700, in full ink, a size
   step up and tracked in. It still sits well under the h1 below it, which runs
   from 2.05rem, so it reads at a glance without competing. It is the ONLY
   place this line appears: the hero says something else. */
.masthead__brand span { display: block; font-family: var(--serif); font-weight: 700; font-size: clamp(0.95rem, 1.7vw, 1.14rem); line-height: 1.16; letter-spacing: -0.012em; color: var(--ink); margin-top: 0.3rem; }
.masthead__right { display: flex; justify-content: flex-end; }
.masthead nav { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--rule); }
.masthead nav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: clamp(0.9rem, 2.6vw, 2rem); overflow-x: auto; scrollbar-width: none; }
.masthead nav ul::-webkit-scrollbar { display: none; }
.masthead nav li { flex: none; }
.masthead nav a { display: block; padding: 0.55rem 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.masthead nav a:hover { color: var(--press-deep); border-bottom-color: var(--press); }
@media (max-width: 720px) {
  .masthead__row { grid-template-columns: minmax(0, 1fr) auto; gap: 0.7rem; align-items: start; }
  .masthead__date { display: none; }
  .masthead__brand { text-align: left; }
  .masthead__brand img { height: 24px; margin: 0; }
  /* The strapline used to be hidden below 720px. Kevin wants it seen more, not
     less, so it stays on a phone: a step down in size, allowed to wrap under
     the lockup, and the grid gives the brand cell the room instead of the
     button. */
  .masthead__brand span { display: block; font-size: 0.86rem; line-height: 1.2; margin-top: 0.2rem; }
  .masthead nav ul { justify-content: flex-start; }
}

/* =========================================================== ticker === */
/* The newswire crawl, directly under the masthead nav and above the photo
   strip. A single ~40px band; it never grows the page height. Content is
   rendered by ticker() in the inline script from window.EP_NEWSROOM, never
   hand-written here. The track holds the item list twice, back to back, and
   animates -50% so the loop is seamless; the second copy is aria-hidden. */
.ticker { height: 40px; overflow: hidden; background: var(--ink); border-bottom: 1px solid var(--ink); }
.ticker__viewport { height: 100%; overflow: hidden; }
.ticker__track { display: flex; height: 100%; width: max-content; animation: ticker-scroll 52s linear infinite; }
.ticker:hover .ticker__track, .ticker:focus-within .ticker__track { animation-play-state: paused; }
.ticker__half { display: flex; align-items: center; flex: 0 0 auto; white-space: nowrap; }
.ticker__item { display: inline-flex; align-items: baseline; gap: 0.5em; padding: 0 0.2em; }
.ticker__kicker { font-family: var(--sans); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--press); white-space: nowrap; }
.ticker__text { font-family: var(--sans); font-size: 0.76rem; font-weight: 500; color: rgba(255,255,255,0.92); white-space: nowrap; }
.ticker__sep { margin: 0 1.1rem; color: var(--press); opacity: 0.85; font-size: 0.6rem; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 480px) {
  .ticker__kicker { font-size: 0.62rem; }
  .ticker__text { font-size: 0.72rem; }
  .ticker__sep { margin: 0 0.85rem; }
  .ticker__track { animation-duration: 38s; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; width: auto; }
  .ticker__half--dup { display: none; }
  .ticker__viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ========================================================= hero-top === */
/* The hero, standing on its own since EVENTPRESS-016 moved it ahead of the
   category slider and the logo marquee. Same content, same rules, just no
   longer sharing a wrapper with the packages grid below it. */
.hero-top { padding: 1.5rem 0 1.3rem; }

/* =========================================================== slider === */
/* Kevin, 20 Sep: "On the iPhone, we need to create the same carousel as a hero
   slider of different events and stuff that we've got content of." A scroll
   snap rail, swipeable, no library. On a wide screen the same rail lays out
   flat as the photo strip across the top of the front page. */
.slider { border-bottom: 1px solid var(--ink); background: var(--ink); }
.slider__rail { display: flex; gap: 2px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.slider__rail::-webkit-scrollbar { display: none; }
.slider__slide { position: relative; flex: 0 0 84%; scroll-snap-align: center; margin: 0; }
.slider__slide img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* The scrim: a real gradient over roughly the lower third of the frame,
   transparent at the top edge of that third down to a strong black at the
   foot, so the label reads over the brightest of the six photographs and
   not just the darker ones. Fixed by inset percentage (not content height)
   so it holds its proportion across both the 4:5 mobile crop and the 4:3
   desktop crop. */
.slider__slide figcaption { position: absolute; inset: 63% 0 0 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0.9rem 0.85rem; color: #FFF; background: linear-gradient(180deg, rgba(10,11,13,0) 0%, rgba(10,11,13,0.55) 40%, rgba(10,11,13,0.88) 75%, rgba(10,11,13,0.97) 100%); }
.slider__slide b { display: block; font-family: var(--serif); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; }
.slider__slide span { display: block; margin-top: 0.3rem; font-size: 0.8rem; line-height: 1.35; color: rgba(255,255,255,0.86); }
.slider__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem var(--gutter); color: rgba(255,255,255,0.68); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; }
.slider__dots { display: flex; gap: 6px; }
.slider__dots i { width: 7px; height: 7px; background: rgba(255,255,255,0.28); }
.slider__dots i[data-on] { background: var(--press); }
@media (min-width: 760px) {
  .slider__slide { flex: 1 1 0; }
  .slider__slide img { aspect-ratio: 4 / 3; }
  .slider__rail { overflow: visible; }
  .slider__slide figcaption { padding: 0 0.7rem 0.6rem; }
  .slider__slide b { font-size: 0.98rem; }
  .slider__slide span { display: none; }
  .slider__dots { display: none; }
}

/* ========================================================== marquee === */
/* EVENTPRESS-016, 20 Sep 2026: the "Placements available in" logo row,
   moved up from the old #placements position to sit directly under the
   hero, above the packages. One heading, in the brand voice; the honesty
   label rides the line under it, never dropped. The track itself is the
   ticker's duplicated-half, -50% translate construction, just slower, on a
   light band rather than the ticker's ink one, and paused on hover. */
.marquee-band { border-bottom: 1px solid var(--ink); background: var(--paper); padding: 1.4rem 0 1.6rem; text-align: center; }
.marquee-band__head h2 { font-size: clamp(1.5rem, 3.4vw, 2.05rem); }
.marquee-band__label { margin: 0.45rem 0 0; font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--press-deep); }
.marquee { margin-top: 1.2rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--card); }
.marquee__viewport { overflow: hidden; padding: 0.85rem 0; }
.marquee__track { display: flex; width: max-content; animation: marquee-scroll 72s linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__half { display: flex; align-items: center; flex: 0 0 auto; white-space: nowrap; }
.marquee__item { display: inline-flex; align-items: center; height: 30px; }
.marquee__item img { height: 26px; width: auto; display: block; }
.marquee__name { font-family: var(--serif); font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-80); white-space: nowrap; }
.marquee__sep { margin: 0 1.4rem; color: var(--rule); font-size: 0.85rem; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 480px) {
  .marquee-band { padding: 1.2rem 0 1.4rem; }
  .marquee__item { height: 24px; }
  .marquee__item img { height: 21px; }
  .marquee__sep { margin: 0 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; width: 100%; }
  .marquee__half--dup { display: none; }
  .marquee__half { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; white-space: normal; gap: 0.4rem 0; }
  .marquee__viewport { overflow: visible; }
}

/* =========================================================== grid ===== */
/* The nofuf front: nine columns of page, three of rail, a hairline between. */
.front { padding: 1.1rem 0 0; }
.front__grid { display: grid; grid-template-columns: 1fr; gap: 1.8rem; }
@media (min-width: 1000px) {
  .front__grid { grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); gap: 0 1.5rem; }
  .front__main { border-right: 1px solid var(--rule); padding-right: 1.5rem; }
}

/* The hero's actions. Two of them and no more: the products page, and the free
   article. They wrap on a narrow screen and they never push the column wide. */
.hero__acts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }
.hero__acts .btn { white-space: normal; text-align: center; }

/* =========================================================== packs ==== */
/* The two lead containers. This is nofuf's framed rail card, the construction
   behind its red story and its blue story, opened to half the page and turned
   into a thing you buy: the photograph with a tint strip down its left edge,
   the bar carrying the angled tab, then the panel with the name, the line,
   what is in it, the price and one button. */
.packs { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin-top: 1.3rem; }
@media (min-width: 700px) { .packs { grid-template-columns: 1fr 1fr; } }
/* order.html: all six containers, three up on a wide screen. */
.packs--all { margin-top: 1.4rem; }
@media (min-width: 1000px) { .packs--all { grid-template-columns: repeat(3, 1fr); } }
.packs--addons { margin-top: 0; }
.packs__foot { margin: 1rem 0 0; font-size: 0.88rem; color: var(--ink-80); border-top: 1px solid var(--rule); padding-top: 0.7rem; }
.packs__foot b { font-family: var(--serif); font-weight: 700; }

.pack { padding: 5px; background: linear-gradient(180deg, #FFFFFF 0%, var(--paper-2) 32%, var(--rule) 52%, var(--paper-2) 72%, #C9C2B5 100%); box-shadow: 0 10px 24px rgba(20,23,26,0.16); display: flex; }
.pack__panel { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.7); display: flex; flex-direction: column; width: 100%; }
.pack__panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.04) 36%, rgba(255,255,255,0) 60%); pointer-events: none; z-index: 1; }
.pack--red .pack__panel { background: linear-gradient(180deg, var(--press-dark) 0%, var(--press-deep) 46%, var(--press) 100%); }
.pack--blue .pack__panel { background: linear-gradient(180deg, var(--blue-dark) 0%, var(--blue-deep) 46%, var(--blue) 100%); }
.pack__shot { position: relative; display: block; }
.pack__shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pack__shot i { position: absolute; inset: 0 auto 0 0; width: 9%; border-right: 2px solid rgba(255,255,255,0.6); }
.pack--red .pack__shot i { background: linear-gradient(180deg, rgba(216,56,42,0.92) 0%, rgba(169,36,23,0.9) 40%, rgba(94,18,11,0.92) 100%); }
.pack--blue .pack__shot i { background: linear-gradient(180deg, rgba(27,74,139,0.92) 0%, rgba(18,52,99,0.9) 40%, rgba(11,34,71,0.92) 100%); }
.pack__bar { position: relative; z-index: 2; display: flex; align-items: stretch; border-top: 1px solid rgba(255,255,255,0.8); background: linear-gradient(180deg, #FFFFFF 0%, var(--paper-2) 36%, var(--rule) 52%, var(--paper-2) 66%, #C9C2B5 100%); }
.pack__tab { display: inline-block; white-space: nowrap; padding: 0.4rem 1.4rem 0.4rem 0.75rem; font-size: 0.64rem; font-weight: 800; font-style: italic; letter-spacing: 0.16em; text-transform: uppercase; color: #FFF; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.pack--red .pack__tab { background: var(--press-dark); }
.pack--blue .pack__tab { background: var(--blue-dark); }
.pack__bar > span { align-self: center; padding: 0 0.7rem; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: rgba(20,23,26,0.6); }
.pack__body { position: relative; z-index: 2; padding: 0.95rem 1.05rem 1.05rem; color: #FFF; display: flex; flex-direction: column; flex: 1; }
.pack__body h3 { color: #FFF; font-size: clamp(1.6rem, 2.7vw, 2rem); }
.pack__line { margin: 0.4rem 0 0; font-family: var(--serif); font-size: 1.02rem; font-style: italic; line-height: 1.32; color: rgba(255,255,255,0.92); }
/* THE INCLUSIONS, under the button, inside the card's own container. Kevin
   asked for exactly this on the Expys packs and again here: name, one line,
   price, a real button, then the ticks.

   Two marks, and they differ by SHAPE, never by colour alone, so the
   distinction survives a colour-blind reader and a black and white
   screenshot. The SVGs are drawn in packs.js.
     .inc--sure     a heavy tick    guaranteed, every time, or we refund it
     .inc--likely   an open ring    a named example, the publisher decides */
.pack__inc { list-style: none; margin: 0.95rem 0 0; padding: 0.85rem 0 0; border-top: 1px solid rgba(255,255,255,0.25); display: grid; gap: 0.45rem; }
.pack__inc li { position: relative; padding-left: 1.5rem; font-size: 0.86rem; line-height: 1.42; color: rgba(255,255,255,0.9); }
.mk { position: absolute; left: 0; top: 0.16em; width: 1rem; height: 1rem; }
.inc--likely { color: rgba(255,255,255,0.72); }
.pack__ex { margin: 0.7rem 0 0; font-size: 0.78rem; line-height: 1.4; color: rgba(255,255,255,0.72); }
.pack__honest { margin: 0.75rem 0 0; padding-top: 0.6rem; border-top: 1px solid rgba(255,255,255,0.25); font-size: 0.72rem; line-height: 1.4; color: rgba(255,255,255,0.7); }

/* The legend, printed once before the first card that uses the two marks. */
.marks__wrap { margin-top: 1.2rem; }
.marks { display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; margin: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 0.55rem 0; font-size: 0.8rem; color: var(--ink-80); }
.marks__one { position: relative; padding-left: 1.5rem; }
.marks__one .mk { color: var(--ink); top: 0.12em; }

.pack__buy { padding-top: 1rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.pack__price { font-family: var(--serif); font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: #FFF; }
.pack__price small { display: block; font-family: var(--sans); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.72); margin-top: 0.32rem; }
.pack .add { background: #FFF; border: 1px solid #FFF; color: var(--ink); font-family: var(--sans); font-size: 0.82rem; font-weight: 700; padding: 0.68em 1.05em; cursor: pointer; }
.pack .add:hover { background: var(--paper-2); }
.pack .add[data-in="1"] { background: transparent; color: #FFF; }
.pack__note { margin: 0.6rem 0 0; font-size: 0.72rem; color: rgba(255,255,255,0.72); }

/* The other two packages: the same construction, quieter, on paper. */
.packs--minor { margin-top: 1.1rem; }
.pack--paper { box-shadow: none; background: var(--rule); padding: 1px; }
.pack--paper .pack__panel { background: var(--card); border-color: var(--rule); }
.pack--paper .pack__panel::before { display: none; }
.pack--paper .pack__bar { background: var(--paper-2); border-top: 0; border-bottom: 1px solid var(--rule); }
.pack--paper .pack__bar > span { color: rgba(20,23,26,0.5); }
.pack--paper .pack__body { color: var(--ink); padding: 0.85rem 1rem 1rem; }
.pack--paper .pack__body h3 { color: var(--ink); font-size: clamp(1.3rem, 2.2vw, 1.55rem); }
.pack--paper .pack__line { color: var(--ink-80); font-size: 0.95rem; }
.pack--paper .pack__inc { border-top-color: var(--rule); }
.pack--paper .pack__inc li { color: var(--ink-80); }
.pack--paper .inc--sure .mk { color: var(--press); }
.pack--paper .inc--likely { color: var(--muted); }
.pack--paper .inc--likely .mk { color: var(--muted); }
.pack--paper .pack__ex, .pack--paper .pack__honest { color: var(--muted); }
.pack--paper .pack__honest { border-top-color: var(--rule); }
.pack--paper .pack__price { color: var(--ink); font-size: 1.6rem; }
.pack--paper .pack__price small { color: var(--muted); }
.pack--paper .add { background: var(--ink); border-color: var(--ink); color: #FFF; }
.pack--paper .add:hover { background: #000; }
.pack--paper .add[data-in="1"] { background: transparent; color: var(--ink); }
.pack--paper .pack__tab { background: var(--ink); }
.pack--paper .pack__note { color: var(--muted); }

/* The four lines every package includes. Said once, under the four. */
.fourlines { margin-top: 1.1rem; border-top: 2px solid var(--ink); padding: 0.9rem 0 0.4rem; }
.fourlines h2 { font-size: 1.2rem; letter-spacing: -0.01em; }
.fourlines ol { list-style: none; margin: 0.85rem 0 0; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .fourlines ol { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; } }
.fourlines li { border-top: 1px solid var(--rule); padding-top: 0.5rem; font-size: 0.85rem; line-height: 1.45; color: var(--ink-80); }
.fourlines li em { display: block; font-family: var(--sans); font-size: 0.66rem; font-weight: 700; font-style: normal; letter-spacing: 0.15em; color: var(--press-deep); margin-bottom: 0.3rem; }
.fourlines li b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 0.15rem; }
.fourlines li.keep { border-top-color: var(--press); border-top-width: 2px; }
.fourlines li.keep b { text-transform: uppercase; letter-spacing: 0.01em; }

/* =========================================================== centre === */
/* The centre article, in nofuf's wide Feature treatment: a rule above, the
   photograph, then the kicker, the headline, the deck and the opening. */
.centre { margin-top: 1.2rem; border-top: 2px solid var(--ink); padding-top: 1rem; }
.centre__shot img { width: 100%; aspect-ratio: 5 / 2; object-fit: cover; }
.centre__shot figcaption { margin-top: 0.4rem; font-size: 0.74rem; color: var(--muted); }
.centre h2 { margin-top: 0.85rem; max-width: 22ch; font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
.centre .deck { max-width: 48ch; }
.centre__body { margin-top: 0.85rem; max-width: 62ch; font-family: var(--serif); font-size: 1.04rem; line-height: 1.55; color: var(--ink); }
.centre__body p { margin: 0 0 0.85em; }
.centre__body blockquote { margin: 0 0 0.85em; padding-left: 0.9rem; border-left: 2px solid var(--press); font-style: italic; }
.centre details { margin-top: 0.2rem; }
.centre summary { cursor: pointer; font-family: var(--sans); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); }
.centre__avail { margin-top: 0.9rem; border-top: 1px solid var(--rule); padding-top: 0.6rem; font-size: 0.78rem; color: var(--muted); max-width: 74ch; }
.centre__avail b { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.25rem; }
.centre__sell { margin-top: 1rem; border-top: 2px solid var(--ink); padding-top: 0.85rem; display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.centre__sell p { margin: 0; font-size: 0.9rem; color: var(--ink-80); max-width: 44ch; }

/* =========================================================== rail ===== */
.rail { display: grid; gap: 1.3rem; align-content: start; }
.rail__block > h2 { font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; border-bottom: 2px solid var(--ink); padding-bottom: 0.35rem; }
.rail__list { list-style: none; margin: 0; padding: 0; }
.rail__list li { border-bottom: 1px solid var(--rule); padding: 0.7rem 0; }
.rail__list li:last-child { border-bottom: 0; }
.rail__list h4 { font-size: 1rem; line-height: 1.18; margin-top: 0.12rem; }
.rail__list p { margin: 0.3rem 0 0; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rail__ask { border: 1px solid var(--ink); background: var(--card); padding: 0.95rem 0.9rem; }
.rail__ask h3 { font-size: 1.2rem; }
.rail__ask p { margin: 0.45rem 0 0; font-size: 0.85rem; color: var(--ink-80); }
.rail__ask .btn { margin-top: 0.8rem; width: 100%; }
.rail__ask > .btn { margin-top: 0.9rem; }
.rail__ask .small { margin: 0.55rem 0 0; }

/* THE FREE ARTICLE. A real offer, so the card states in one line each what the
   sender gets and what they do not, and the two lines are told apart by a mark
   and a rule, not by a colour on its own. The border is press red because this
   is the one thing on the page that costs nothing. */
.rail__ask--free { border-width: 2px; border-color: var(--press); }
.free__scope { list-style: none; margin: 0.8rem 0 0; padding: 0.7rem 0 0; border-top: 1px solid var(--rule); display: grid; gap: 0.5rem; }
.free__scope li { position: relative; padding-left: 0.95rem; font-size: 0.82rem; line-height: 1.42; color: var(--ink-80); }
.free__scope li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.free__yes::before { content: "+"; color: var(--blue); }
.free__no::before { content: "\2013"; color: var(--press-deep); }
.free__scope b { font-weight: 700; color: var(--ink); }
.free__form { margin-top: 0.9rem; border-top: 1px solid var(--rule); padding-top: 0.85rem; }
.free__form .field { margin-bottom: 0.7rem; }
.free__form textarea { min-height: 4.5em; }
.free__form .btn { width: 100%; margin-top: 0.2rem; }
.free__form .kicker { margin-bottom: 0.3rem; }
.free__form p { margin: 0; font-size: 0.85rem; color: var(--ink-80); }

/* =========================================================== section == */
section { padding: 1.7rem 0 0; }
.band { border-top: 3px solid var(--ink); padding-top: 0.9rem; }
.band__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.band__head h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); }
.band__head p { margin: 0.35rem 0 0; font-size: 0.92rem; color: var(--ink-80); max-width: 56ch; }

/* =========================================================== isnews === */
.isnews__grid { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .isnews__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.6rem; } }
.isnews__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--rule); }
@media (min-width: 560px) { .isnews__list { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } }
.isnews__list li { border-bottom: 1px solid var(--rule); padding: 0.6rem 0 0.6rem 2.05rem; position: relative; font-size: 0.92rem; line-height: 1.42; }
.isnews__list li b { position: absolute; left: 0; top: 0.72rem; font-family: var(--sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; color: var(--press); font-variant-numeric: tabular-nums; }
.isnews__no { border: 1px solid var(--ink); background: var(--card); padding: 1.1rem 1.05rem; }
.isnews__no h3 { font-size: 1.3rem; }
.isnews__no p { margin: 0.55rem 0 0; font-size: 0.9rem; color: var(--ink-80); }
.isnews__no p:last-child { margin-bottom: 0; }
.isnews__then { margin-top: 1.2rem; border-top: 2px solid var(--ink); padding-top: 0.95rem; display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.isnews__then p { margin: 0; font-family: var(--serif); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; }

/* =========================================================== newsroom = */
.nr__row { display: grid; grid-template-columns: 1fr; border-top: 2px solid var(--ink); }
@media (min-width: 640px) { .nr__row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .nr__row { grid-template-columns: repeat(4, 1fr); } }
.nr__row > article { padding: 0.9rem 0 1rem; border-bottom: 1px solid var(--rule); }
@media (min-width: 640px) {
  .nr__row > article { border-right: 1px solid var(--rule); padding-right: 1.1rem; margin-right: 1.1rem; }
  .nr__row > article:nth-child(2n) { border-right: 0; padding-right: 0; margin-right: 0; }
}
@media (min-width: 1000px) {
  .nr__row > article:nth-child(2n) { border-right: 1px solid var(--rule); padding-right: 1.1rem; margin-right: 1.1rem; }
  .nr__row > article:nth-child(4n) { border-right: 0; padding-right: 0; margin-right: 0; }
}
.nr__row h4 { font-size: 1.08rem; line-height: 1.16; margin-top: 0.12rem; }
.nr__row > article > p { margin: 0.4rem 0 0; font-size: 0.84rem; line-height: 1.45; color: var(--ink-80); }
.nr__meta { margin-top: 0.5rem; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.nr__meta b { color: var(--ink); font-weight: 600; }
.nr__row details { margin-top: 0.5rem; }
.nr__row summary { cursor: pointer; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); }
.nr__row details div { margin-top: 0.5rem; font-family: var(--serif); font-size: 0.94rem; line-height: 1.5; }
.nr__row details p { font-size: inherit; color: var(--ink); margin: 0 0 0.75em; }
.nr__row details blockquote { margin: 0 0 0.75em; padding-left: 0.8rem; border-left: 2px solid var(--press); font-style: italic; }
.nr__sell { margin-top: 1.2rem; border-top: 2px solid var(--ink); padding-top: 0.95rem; display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.nr__sell p { margin: 0; font-size: 0.92rem; color: var(--ink-80); max-width: 48ch; }

/* =========================================================== strip ==== */
.strip h3 { font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--rule); padding-bottom: 0.35rem; }
.strip__row { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; align-items: center; }
.strip__row li { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-80); }
.strip__row img { height: 22px; width: auto; }
.strip__row--quoted { margin-top: 0.6rem; }
.strip__row--quoted li { font-size: 0.95rem; color: var(--muted); }
.strip__tag { font-family: var(--sans); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--press-deep); border: 1px solid var(--press); padding: 0.1em 0.35em; margin-left: 0.3rem; vertical-align: 0.16em; }
.strip__note { margin: 1rem 0 0; font-size: 0.85rem; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 0.7rem; }

/* =========================================================== how ====== */
.how { display: grid; grid-template-columns: 1fr; border-top: 2px solid var(--ink); }
@media (min-width: 640px) { .how { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .how { grid-template-columns: repeat(4, 1fr); } }
.how > div { padding: 0.85rem 0 0.95rem; border-bottom: 1px solid var(--rule); }
@media (min-width: 640px) { .how > div { border-right: 1px solid var(--rule); padding-right: 1.1rem; margin-right: 1.1rem; } .how > div:nth-child(2n) { border-right: 0; padding-right: 0; margin-right: 0; } }
@media (min-width: 1000px) { .how > div:nth-child(2n) { border-right: 1px solid var(--rule); padding-right: 1.1rem; margin-right: 1.1rem; } .how > div:nth-child(4n) { border-right: 0; padding-right: 0; margin-right: 0; } }
.how b { display: block; font-family: var(--sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em; color: var(--blue); margin-bottom: 0.3rem; }
.how h4 { font-size: 1.05rem; }
.how p { margin: 0.35rem 0 0; font-size: 0.85rem; line-height: 1.45; color: var(--ink-80); }

/* =========================================================== order ==== */
.order__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 900px) { .order__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; } }
.assure { display: grid; gap: 0.9rem; margin: 1rem 0; }
.assure > div { border-top: 1px solid var(--rule); padding-top: 0.5rem; }
.assure b { display: block; font-family: var(--sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.25rem; }
.assure .is { color: var(--blue); }
.assure .isnt { color: var(--press-deep); }
.assure p { margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--ink-80); }

.form { border: 1px solid var(--ink); background: var(--card); padding: 1.1rem 1.05rem 1.2rem; }
.order { border-bottom: 1px solid var(--rule); padding-bottom: 0.85rem; margin-bottom: 1rem; }
.order__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.order__head b { font-family: var(--sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
.order__head span { display: flex; gap: 0.9rem; font-size: 0.78rem; }
.order__lines { list-style: none; margin: 0.7rem 0 0; padding: 0; }
.order__lines li, .cart__lines li { display: flex; align-items: flex-start; gap: 0.7rem; border-top: 1px solid var(--rule); padding: 0.5rem 0; font-size: 0.87rem; }
.order__lines li span, .cart__lines li span { flex: 1; }
.order__lines b, .cart__lines b { display: block; font-weight: 600; }
.order__lines small, .cart__lines small { display: block; font-size: 0.74rem; color: var(--muted); }
.order__lines i, .cart__lines i { font-style: normal; font-variant-numeric: tabular-nums; font-weight: 600; }
.cart__x { border: 0; background: none; color: var(--muted); font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0 0.15rem; }
.cart__x:hover { color: var(--press); }
.order__empty { margin: 0.7rem 0 0; font-size: 0.85rem; color: var(--muted); }
.order__total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-top: 2px solid var(--ink); margin-top: 0.7rem; padding-top: 0.55rem; font-size: 0.8rem; }
.order__total b { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.order__total small { display: block; font-size: 0.72rem; color: var(--muted); text-align: right; }

.field { margin-bottom: 0.85rem; }
.field--row { display: grid; gap: 0.85rem; grid-template-columns: 1fr; }
@media (min-width: 520px) { .field--row { grid-template-columns: 1fr 1fr; } }
label { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-80); margin-bottom: 0.25rem; }
input, textarea, select { width: 100%; font-family: inherit; font-size: 0.95rem; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); padding: 0.55em 0.7em; border-radius: 0; }
input:focus, textarea:focus, select:focus { border-color: var(--ink); outline: 2px solid var(--press); outline-offset: 1px; }
textarea { min-height: 5.5em; resize: vertical; }
.form .btn { width: 100%; font-size: 0.95rem; padding: 0.8em 1rem; }
.form__note { margin: 0.7rem 0 0; font-size: 0.74rem; color: var(--muted); }
.form__status { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--press-deep); display: none; }
.form__status[data-shown] { display: block; }
.done { border: 1px solid var(--ink); background: var(--card); padding: 1.1rem; }
.done__ref { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; }
.done ul { list-style: none; margin: 0.7rem 0; padding: 0; }
.done li { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--rule); padding: 0.4rem 0; font-size: 0.87rem; }

/* =========================================================== bar ====== */
/* The Expys entry box, made horizontal. It is fixed at the foot at every
   width, it says which package it is speaking for, and it carries one action.
   The pick follows the section you are reading, the way the gold box on the
   Expys award shelves follows the shelf beside it. */
.bar { position: fixed; inset: auto 0 0 0; z-index: 40; background: var(--ink); color: #FFF; border-top: 3px solid var(--press); }
.bar__in { display: flex; align-items: center; gap: 1rem; padding: 0.6rem var(--gutter); max-width: var(--shell); margin: 0 auto; }
.bar__pick { flex: 1; min-width: 0; }
.bar__pick em { display: block; font-family: var(--sans); font-style: normal; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.58); }
.bar__pick b { display: block; font-family: var(--serif); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.14; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar__pick span { display: none; font-size: 0.78rem; color: rgba(255,255,255,0.7); }
@media (min-width: 760px) { .bar__pick span { display: block; } }
.bar__price { font-family: var(--serif); font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bar__acts { display: flex; align-items: center; gap: 0.85rem; }
.bar__acts .btn { border-color: var(--press); background: var(--press); }
.bar__acts .btn:hover { background: var(--press-deep); border-color: var(--press-deep); }
.bar__alt { font-size: 0.76rem; color: rgba(255,255,255,0.76); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-family: inherit; white-space: nowrap; }
.bar__alt:hover { color: #FFF; }
@media (max-width: 620px) {
  .bar__price { display: none; }
  .bar__alt { display: none; }
  .bar__in { gap: 0.7rem; padding: 0.5rem var(--gutter); }
  .bar__acts .btn { font-size: 0.8rem; padding: 0.68em 0.8em; }
}

/* =========================================================== footer === */
footer { margin-top: 2.4rem; border-top: 3px solid var(--ink); background: var(--ink); color: rgba(255,255,255,0.78); padding: 1.6rem 0 1.8rem; }
footer .shell { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { footer .shell { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
footer img { height: 26px; width: auto; }
footer p { margin: 0.5rem 0 0; font-size: 0.83rem; }
footer a { color: #FFF; }

/* =========================================================== directory  */
/* directory.html only. The 1,389 named titles live on their own page now:
   a wholesale rate card is not a sales page. */
.dir__bar { display: grid; gap: 0.7rem; grid-template-columns: 1fr; margin-bottom: 0.4rem; }
@media (min-width: 760px) { .dir__bar { grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; align-items: end; } }
.dir__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 0.5rem 0; margin: 1rem 0; }
.dir__count { margin: 0; font-size: 0.82rem; color: var(--muted); }
.dir__clear { border: 0; background: none; color: var(--blue); font-size: 0.82rem; cursor: pointer; font-family: inherit; text-decoration: underline; }
.wall { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .wall { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .wall { grid-template-columns: repeat(3, 1fr); } }
.wall li { border: 1px solid var(--rule); background: var(--card); padding: 0.8rem 0.85rem; display: flex; flex-direction: column; }
.wall li.in-order { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.wall__top { display: flex; gap: 0.65rem; align-items: center; }
.tile { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; background: var(--ink); color: #FFF; font-family: var(--serif); font-size: 0.85rem; font-weight: 700; flex: none; }
.wall__name b { display: block; font-size: 0.94rem; font-weight: 600; line-height: 1.2; }
.wall__name span { display: block; font-size: 0.74rem; color: var(--muted); }
.wall__facts { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--ink-80); }
.wall__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }
.tag { font-style: normal; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.15em 0.4em; border: 1px solid var(--rule); color: var(--muted); }
.tag--follow { color: var(--blue); border-color: var(--blue); background: var(--blue-wash); }
.tag--spon { color: var(--press-deep); border-color: var(--press); }
.wall__buy { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; margin-top: auto; padding-top: 0.8rem; }
.wall__price { font-family: var(--serif); font-size: 1.18rem; font-weight: 700; }
.wall__price small { font-family: var(--sans); font-size: 0.66rem; font-weight: 400; color: var(--muted); }
.wall .add { border: 1px solid var(--ink); background: var(--ink); color: #FFF; font-family: var(--sans); font-size: 0.73rem; font-weight: 600; padding: 0.5em 0.8em; cursor: pointer; }
.wall .add[data-in="1"] { background: transparent; color: var(--ink); }
.dir__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; }
.dir__ticked { margin: 0; font-size: 0.85rem; color: var(--ink-80); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }