/* 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;
  overflow-x: hidden;
  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; }
.masthead__brand span { display: block; font-family: var(--serif); font-size: 0.85rem; color: var(--ink-80); margin-top: 0.22rem; }
.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: auto 1fr; gap: 0.7rem; }
  .masthead__date { display: none; }
  .masthead__brand { text-align: left; }
  .masthead__brand img { height: 24px; margin: 0; }
  .masthead__brand span { display: none; }
  .masthead nav ul { justify-content: flex-start; }
}

/* =========================================================== 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; }
.slider__slide figcaption { position: absolute; inset: auto 0 0 0; padding: 2.6rem 0.9rem 0.85rem; color: #FFF; background: linear-gradient(180deg, rgba(20,23,26,0) 0%, rgba(20,23,26,0.8) 58%, rgba(20,23,26,0.95) 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: 1.8rem 0.7rem 0.6rem; }
  .slider__slide b { font-size: 0.98rem; }
  .slider__slide span { display: none; }
  .slider__dots { display: none; }
}

/* =========================================================== 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; }
}

/* =========================================================== 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; }
@media (min-width: 700px) { .packs { grid-template-columns: 1fr 1fr; } }

.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); }
.pack__inc { list-style: none; margin: 0.85rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.pack__inc li { position: relative; padding-left: 1.05rem; font-size: 0.86rem; line-height: 1.42; color: rgba(255,255,255,0.9); }
.pack__inc li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 2px; background: rgba(255,255,255,0.75); }
.pack__buy { margin-top: auto; 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 li { color: var(--ink-80); }
.pack--paper .pack__inc li::before { background: var(--press); }
.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; }

/* =========================================================== 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; } }