/* =====================================================================
   EAT YOUR SCREEN — v2 · the Figma Make design, for beehiiv
   Source: figma-build/code (Make download, 17 Sep 2026)
   Served from assets.eatyourscreen.com/eys-v2.css BESIDE eys.css.
   eys.css keeps running the old pages until each one is replaced
   (REBUILD-RISKS.md, risk 1). Everything here is scoped to .v2.

   MATCHING NOTE — read before "fixing" any size in this file.
   The Make build puts Tailwind's utilities inside a cascade layer and
   its own global rules outside one (src/index.css). Unlayered rules win,
   so in the Make preview EVERY <p> renders at 16px / 1.75 and EVERY
   h1-h4 at the clamp sizes below, whatever size class the element
   carries. Gavin's reference screenshots show exactly that (the 16px
   mono lines under the Subscribe form). The rules below reproduce what
   the design RENDERS, not what its class names say.
   ===================================================================== */

.v2{
  --bg:#F2EDE3; --fg:#1A1714; --card:#EDE7DB;
  --secondary:#E4DDD1; --secondary-fg:#3D3630;
  --muted:#DDD6C8; --muted-fg:#6B6154;   /* was #7A6F63 = 4.2:1, under AA */
  --accent:#8B3A2A; --border:#C8BFB0;

  /* ---- GROUND-AWARE PAIRS. Measured on the live site 24 Sep: --accent on
     cream is 6.23:1 and fine, but the SAME token on .band-ink is 2.33:1 and
     fails WCAG AA outright - which is why the book band's kicker, chapter
     number and progress line were unreadable while its headline was not.
     Gavin: "this is lost on the page, you can harley read it." One token
     cannot serve two grounds; these are the dark-ground halves.
        --accent-dark  #D4754F  a lifted Seville, 5.5:1 on Cast Iron
        --muted-dark   cream 62%, 6.1:1 - the value the footer already uses */
  --accent-dark:#D4754F; --muted-dark:rgba(239,230,210,.62);
  --luxury:#1C2035; --luxury-fg:#E8E6F0;

  /* ---- THE COLOUR ARCHIVE. Named, Farrow & Ball model, because a hex
     cannot be asked for twice and a name can. DECISIONS.md holds the
     provenance lines; these are the same ten, carried into v2 so the pages
     can actually reach them. Nine came from a kitchen or a field. No. 10
     came from the box a machine draws round a plate once it has decided
     what the food is - which is the argument, stated as a colour chart. */
  --c01-cast-iron:#15201F;    /* the pan. The base */
  --c02-allotment:#0C2012;    /* the earth we used to eat from */
  --c03-cold-store:#081A2D;   /* end of service */
  --c04-roasting-tin:#2B140C; /* where the flavour is */
  --c05-burnt-butter:#683A2D; /* before it catches */
  --c06-larder:#273138;       /* the colour of keeping things */
  --c07-seville:#BB400F;      /* the bitter orange */
  --c08-paprika:#B73A06;      /* sweet, then hot */
  --c09-cornflour:#EFE6D2;    /* the ground, the thickener */
  --c10-stream:#2FB9EA;       /* machine vision. The outlier */
  --fd:'Playfair Display',Georgia,serif;
  --ft:'Source Serif 4',Georgia,serif;
  --fm:'JetBrains Mono',monospace;
  background:var(--bg); color:var(--fg);
  font-family:var(--ft); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-align:left;
}

/* ---- beehiiv's section wrapper ------------------------------------
   Lessons carried from eys.css (2 Sep): the section is a viewport-high
   column flex box that centres its content, which throws tall blocks
   upward; align-items must stay stretch or mobile collapses. Padding is
   zeroed so the design's own spacing is the only spacing.            */
div[data-type="section"]:has(.v2){
  height:auto !important; min-height:0 !important;
  justify-content:flex-start !important; align-items:stretch !important;
  padding:0 !important;
}
div[data-type="section"]:has(.v2),
div[data-type="embed"]:has(.v2){ overflow:visible !important; }

/* ---- reset: Tailwind preflight, scoped ---------------------------- */
.v2 *, .v2 *::before, .v2 *::after{ box-sizing:border-box; margin:0; padding:0; border:0 solid; }
.v2 a{ color:inherit; text-decoration:inherit; }
.v2 img, .v2 svg, .v2 audio{ display:block; }
.v2 img{ max-width:100%; }
.v2 ul, .v2 ol{ list-style:none; }
.v2 em{ font-style:italic; }
.v2 button, .v2 input{ font:inherit; color:inherit; background:transparent; }

/* ---- the global type rules as the design renders them -------------- */
.v2 h1, .v2 h2, .v2 h3, .v2 h4{ font-family:var(--fd); font-weight:400; color:inherit; }
.v2 h1{ font-size:clamp(2.25rem,5vw,3.75rem); line-height:1.08; letter-spacing:-.015em; }
.v2 h2{ font-size:clamp(1.75rem,3.5vw,2.5rem); line-height:1.15; letter-spacing:-.01em; }
.v2 h3{ font-size:clamp(1.25rem,2.5vw,1.75rem); line-height:1.25; }
.v2 h4{ font-size:1.125rem; line-height:1.4; }
.v2 p{ font-size:1rem; line-height:1.75; }

/* ---- labels: JetBrains Mono --------------------------------------- */
.v2 .lbl{ font-family:var(--fm); font-size:11px; letter-spacing:.1em; }
.v2 p.lbl{ font-size:1rem; line-height:1.75; }       /* p wins, as rendered */
.v2 .up{ text-transform:uppercase; }
.v2 .t025{ letter-spacing:.025em; } .v2 .t12{ letter-spacing:.12em; }
.v2 .t14{ letter-spacing:.14em; }   .v2 .t15{ letter-spacing:.15em; }
.v2 .t16{ letter-spacing:.16em; }   .v2 .t18{ letter-spacing:.18em; }
.v2 .t20{ letter-spacing:.2em; }    .v2 .t22{ letter-spacing:.22em; }

/* ---- colour ------------------------------------------------------- */
.v2 .c-fg{ color:var(--fg); }       .v2 .c-muted{ color:var(--muted-fg); }
.v2 .c-sec{ color:var(--secondary-fg); } .v2 .c-accent{ color:var(--accent); }
.v2 .light{ font-weight:300; }      .v2 .med{ font-weight:500; }
.v2 .ital{ font-style:italic; }     .v2 .serif-d{ font-family:var(--fd); }

/* ---- layout ------------------------------------------------------- */
.v2 .wrap{ max-width:64rem; margin-inline:auto; padding-inline:1.5rem; }
.v2 .page{ padding-block:3.5rem; }
.v2 .rule-b{ border-bottom:1px solid var(--border); }
.v2 .rule-t{ border-top:1px solid var(--border); }
.v2 .g12{ display:grid; grid-template-columns:minmax(0,1fr); gap:2.5rem; }
@media (min-width:768px){
  .v2 .g12{ grid-template-columns:repeat(12,minmax(0,1fr)); }
  .v2 .s3{ grid-column:span 3/span 3; } .v2 .s4{ grid-column:span 4/span 4; }
  .v2 .s5{ grid-column:span 5/span 5; } .v2 .s7{ grid-column:span 7/span 7; }
  .v2 .s8{ grid-column:span 8/span 8; } .v2 .s9{ grid-column:span 9/span 9; }
  .v2 .md-hide{ display:none !important; }
}
@media (max-width:767px){ .v2 .md-only{ display:none !important; } }

/* ---- page header (Book, Articles, Listen, Reading, Archive) -------- */
.v2 .head{ padding-bottom:2rem; margin-bottom:3rem; border-bottom:1px solid var(--border); }
.v2 .head .lbl{ margin-bottom:.75rem; }
.v2 .head h1{ font-weight:500; line-height:1.1; }
.v2 .head h1 + .lead{ margin-top:1rem; }
.v2 .lead{ max-width:36rem; color:var(--secondary-fg); font-weight:300; }

/* ---- wireframe image frame (the design's WireframeBlock) ----------- */
.v2 .wf{ width:100%; }
.v2 .wf-box{
  position:relative; overflow:hidden; border:1px solid var(--border);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 32L32 0' stroke='%23C8BFB0' stroke-width='.75' fill='none'/%3E%3C/svg%3E");
  display:flex; align-items:center; justify-content:center; padding:1rem;
}
.v2 .wf-box::before, .v2 .wf-box::after,
.v2 .wf-box > i::before, .v2 .wf-box > i::after{
  content:''; position:absolute; width:10px; height:10px; border-color:var(--muted-fg);
}
.v2 .wf-box::before{ top:0; left:0; border-top:1px solid; border-left:1px solid; }
.v2 .wf-box::after{ top:0; right:0; border-top:1px solid; border-right:1px solid; }
.v2 .wf-box > i::before{ bottom:0; left:0; border-bottom:1px solid; border-left:1px solid; }
.v2 .wf-box > i::after{ bottom:0; right:0; border-bottom:1px solid; border-right:1px solid; }
.v2 .wf-box span{ font-family:var(--fm); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-fg); text-align:center; }
.v2 .a43{ aspect-ratio:4/3; } .v2 .a169{ aspect-ratio:16/9; } .v2 .a167{ aspect-ratio:16/7; } .v2 .a32{ aspect-ratio:3/2; }
.v2 .wf figcaption{ margin-top:.5rem; font-family:var(--fm); font-size:11px; letter-spacing:.14em; text-transform:uppercase; line-height:1.625; color:var(--muted-fg); }

/* ---- copy slots: text with no original writing yet -----------------
   Visible on purpose. A page carrying a .slot is NOT ready to publish.
   Gavin writes these from a new file (REBUILD-LOG R009).               */
.v2 .slot{
  display:inline-block; font-family:var(--fm); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); line-height:1.6;
  outline:1px dashed var(--accent); outline-offset:3px; padding:0 .25rem;
}

/* =====================================================================
   BOOK
   ===================================================================== */
.v2 .chl-title{ margin-bottom:1.25rem; }
.v2 .chl{ display:flex; flex-direction:column; gap:.25rem; }
.v2 .chl a{ display:block; width:100%; text-align:left; padding:.75rem; border-left:2px solid transparent; transition:all .15s; }
.v2 .chl a.on{ background:var(--card); border-left-color:var(--accent); }
.v2 .chl a.off{ opacity:.45; cursor:default; pointer-events:none; }
.v2 .chl-row{ display:flex; align-items:baseline; gap:.5rem; }
.v2 .chl-t{ font-family:var(--fd); font-style:italic; font-size:.875rem; line-height:1.375; color:var(--fg); }
.v2 .chl .lbl + .flag, .v2 .chl .flag{ margin-top:.25rem; }

.v2 .ch{ scroll-margin-top:6rem; }
.v2 .ch + .ch{ margin-top:4rem; }
.v2 .ch .wf{ margin-bottom:2rem; }
.v2 .ch-head{ padding-bottom:2rem; margin-bottom:2rem; border-bottom:1px solid var(--border); }
.v2 .ch-meta{ display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.v2 .ch-head h2{ font-weight:500; line-height:1.15; margin-bottom:.75rem; }
.v2 .ch-sub{ color:var(--secondary-fg); font-style:italic; font-weight:300; }
.v2 .ch-body > p{ font-weight:300; }
.v2 .ch-body > p + p{ margin-top:1.5rem; }
.v2 .ch-body em{ font-style:italic; }

.v2 .audio{ margin-top:2.5rem; padding:1.25rem; background:var(--card); border-left:2px solid var(--accent); }
.v2 .audio .lbl{ margin-bottom:.75rem; }
.v2 .audio audio{ width:100%; }

.v2 .next{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding-block:5rem; }
.v2 .next .lbl{ margin-bottom:1rem; }
.v2 .next h2{ font-weight:500; font-style:italic; margin-bottom:1rem; }
.v2 .next p.say{ color:var(--secondary-fg); font-weight:300; margin-bottom:2rem; }
.v2 .next a{ font-family:var(--fm); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); transition:opacity .15s; }
.v2 .next a:hover{ opacity:.7; }

/* =====================================================================
   ARTICLES
   ===================================================================== */
.v2 .alist{ margin-bottom:4rem; }
.v2 .arow{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:1.5rem; padding-block:2rem; border-bottom:1px solid var(--border); }
.v2 .arow > *{ grid-column:span 12/span 12; }
@media (min-width:768px){
  .v2 .arow .a-n{ grid-column:span 1/span 1; }
  .v2 .arow .a-img{ grid-column:span 3/span 3; }
  .v2 .arow .a-txt{ grid-column:span 8/span 8; }
}
.v2 .a-n{ display:flex; align-items:flex-start; padding-top:.25rem; }
.v2 .a-img a{ display:block; overflow:hidden; background:var(--muted); }
.v2 .a-img img{ width:100%; height:160px; object-fit:cover; transition:transform .5s; }
.v2 .arow:hover .a-img img{ transform:scale(1.03); }
.v2 .a-meta{ display:flex; align-items:center; gap:1rem; margin-bottom:.5rem; }
.v2 .a-txt h2{ font-weight:500; line-height:1.25; margin-bottom:.5rem; transition:opacity .15s; }
.v2 .arow:hover .a-txt h2{ opacity:.8; }
.v2 .a-sub{ max-width:42rem; margin-bottom:.75rem; color:var(--secondary-fg); font-weight:300; }
.v2 .a-go{ transition:opacity .15s; }
.v2 .a-go:hover{ opacity:.7; }

.v2 .series{ padding-top:3rem; border-top:1px solid var(--border); }
.v2 .series-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:.5rem; }
.v2 .series-head h2{ font-weight:500; line-height:1.2; }
.v2 .series-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:1.5rem; }
@media (min-width:640px){ .v2 .series-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.v2 .fig{ display:flex; flex-direction:column; }
.v2 .fig-img{ position:relative; overflow:hidden; background:var(--muted); }
.v2 .fig-img img{ width:100%; height:380px; object-fit:cover; object-position:top; transition:transform .7s; }
.v2 .fig:hover .fig-img img{ transform:scale(1.02); }
.v2 .fig-no{ position:absolute; bottom:0; left:0; padding:.5rem .75rem; background:var(--fg); }
.v2 .fig-no span{ color:var(--bg); }
.v2 .fig-row{ display:flex; align-items:center; justify-content:space-between; padding-block:.75rem; margin-bottom:.25rem; border-bottom:1px solid var(--border); }
.v2 .fig h3{ font-weight:500; margin:.75rem 0 .5rem; transition:opacity .15s; }
.v2 .fig:hover h3{ opacity:.7; }
.v2 .fig p{ flex:1; color:var(--secondary-fg); font-weight:300; }

/* =====================================================================
   LISTEN
   ===================================================================== */
.v2 .listen-lead{ margin-bottom:1.5rem; color:var(--secondary-fg); font-weight:300; }
.v2 .listen-lead + p{ margin-bottom:2rem; color:var(--secondary-fg); font-weight:300; }
.v2 .ep{ padding:1.5rem; background:var(--card); border-left:2px solid var(--accent); }
.v2 .ep > .lbl{ margin-bottom:1rem; }
.v2 .ep h3{ font-weight:500; font-style:italic; margin-bottom:.75rem; }
.v2 .ep > p:not(.lbl){ margin-bottom:1rem; color:var(--secondary-fg); font-weight:300; }
.v2 .ep-play{ display:flex; align-items:center; gap:1rem; padding:.75rem 1rem; background:var(--secondary); opacity:.7; }
.v2 .ep-dot{ width:2rem; height:2rem; border-radius:9999px; background:var(--muted-fg); display:flex; align-items:center; justify-content:center; }
.v2 .ep-dot span{ font-size:.75rem; line-height:1rem; color:var(--bg); }
.v2 .expect{ padding:1.5rem; background:var(--card); }
.v2 .expect > .lbl{ margin-bottom:1.25rem; }
.v2 .expect-list > div{ padding-bottom:1rem; border-bottom:1px solid var(--border); }
.v2 .expect-list > div + div{ margin-top:1.25rem; }
.v2 .expect-list > div:last-child{ padding-bottom:0; border-bottom:0; }
.v2 .expect-list .lbl{ margin-bottom:.25rem; }
.v2 .expect-list p:not(.lbl){ font-weight:300; }

/* =====================================================================
   DISPATCH
   ===================================================================== */
.v2 .dhead{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:2rem; padding-bottom:1.25rem; border-bottom:1px solid var(--border); }
.v2 .dhead .lbl{ margin-bottom:.25rem; }
.v2 .dhead h1{ font-weight:500; line-height:1.1; }
.v2 .dhead a{ transition:opacity .15s; }
.v2 .dhead a:hover{ opacity:.6; }
/* the dispatch standfirst: reads as writing, not as a label, and stops at a
   comfortable measure so it never runs the width of the page. */
.v2 .dlead{ max-width:44rem; margin-top:-1rem; margin-bottom:2.5rem;
  font-size:1.0625rem; line-height:1.7; font-weight:300; color:var(--secondary-fg); }
.v2 .cards3, .v2 .cards2{ display:grid; grid-template-columns:minmax(0,1fr); gap:1.5rem; }
.v2 .cards3{ margin-bottom:2.5rem; }
@media (min-width:640px){
  .v2 .cards3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .v2 .cards2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.v2 .card{ display:flex; flex-direction:column; }
.v2 .card .wf{ margin-bottom:.75rem; background:var(--muted); overflow:hidden; }
/* a real picture in a strand card. The caption under it is an EXAMPLE of what
   the strand carries, so it is set in text, sentence case - not in the mono
   label face, which would read as a system label like the wireframe boxes. */
.v2 .wf-shot{ position:relative; overflow:hidden; background:var(--muted); }
.v2 .wf-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.v2 .card .wf:has(figcaption){ background:transparent; overflow:visible; }
/* the example: what the strand carried, set as text under the description so the
   card reads description-then-instance. Ruled off, not boxed. */
.v2 .card p.eg{ margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--border);
  font-family:var(--ft); font-size:.8125rem; line-height:1.5; color:var(--muted-fg); }
/* a picture credit: quieter again, on its own line, so an attribution never
   competes with the writing above it. */
.v2 .card p.eg .credit{ display:block; margin-top:.35rem; font-size:.6875rem;
  letter-spacing:.02em; opacity:.8; }
.v2 .card-meta{ display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.v2 .card h3{ font-weight:500; line-height:1.3; margin-bottom:.25rem; transition:opacity .15s; }
.v2 .card:hover h3{ opacity:.7; }
.v2 .card p.desc{ color:var(--secondary-fg); font-weight:300; }
.v2 .card p.lbl{ margin-top:.5rem; }
.v2 .side{ display:flex; flex-direction:column; gap:2rem; }
.v2 .pub{ padding:1.25rem; background:var(--card); border:1px solid var(--border); }
.v2 .pub-id{ display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; }
.v2 .pub-id img{ width:44px; height:44px; flex-shrink:0; mix-blend-mode:multiply; }
.v2 .pub-name{ font-family:var(--fd); font-weight:600; font-size:15px; line-height:1.2; }
.v2 .pub-by{ margin-top:3px; }
.v2 .pub > p:not(.lbl){ margin-bottom:.25rem; color:var(--secondary-fg); font-weight:300; }
.v2 .side p.note-sm{ margin-top:1rem; font-size:.6875rem; letter-spacing:.1em;
  line-height:1.6; }
.v2 .connect .lbl{ margin-bottom:1rem; }
.v2 .connect ul{ display:flex; flex-direction:column; gap:.75rem; }
.v2 .connect a{ font-size:.875rem; line-height:1.25rem; font-weight:300; transition:opacity .15s; }
.v2 .connect a:hover{ opacity:.6; }

/* ---- motion off for readers who ask ------------------------------- */
@media (prefers-reduced-motion:reduce){
  .v2 *{ transition:none !important; }
  .v2 .arow:hover .a-img img, .v2 .fig:hover .fig-img img{ transform:none; }
}
.v2 a:focus-visible{ outline:2px solid var(--luxury); outline-offset:3px; }

/* =====================================================================
   HOME
   ===================================================================== */
.v2 .pill{ display:inline-block; font-family:var(--fm); font-size:11px; letter-spacing:.1em; text-transform:uppercase; border-radius:999px; padding:10px 24px; transition:opacity .15s; }
.v2 .pill:hover{ opacity:.85; }
.v2 .pill-ink{ background:var(--fg); color:var(--bg); }
.v2 .pill-paper{ background:var(--bg); color:var(--fg); }
.v2 .go{ font-family:var(--fm); font-size:11px; letter-spacing:.1em; text-transform:uppercase; transition:opacity .15s; }
.v2 .go:hover{ opacity:.7; }

.v2 .hero{ padding-top:4rem; padding-bottom:3rem; border-bottom:1px solid var(--border); }
.v2 .hero-g{ display:grid; grid-template-columns:minmax(0,1fr); gap:2rem; align-items:end; }
@media (min-width:768px){ .v2 .hero-g{ grid-template-columns:repeat(12,minmax(0,1fr)); } .v2 .hero-main{ grid-column:span 8/span 8; } .v2 .hero-side{ grid-column:span 4/span 4; } }
.v2 .hero h1{ font-weight:500; line-height:1.1; letter-spacing:-.01em; margin-bottom:1.5rem; }
.v2 .hero-sub{ max-width:36rem; margin-bottom:2rem; color:var(--secondary-fg); font-weight:300; }
.v2 .hero-card{ padding:1.25rem; background:var(--card); border-left:2px solid var(--accent); }
.v2 .hero-card .lbl{ margin-bottom:.5rem; }
.v2 .hero-card p:not(.lbl){ margin-bottom:1rem; font-weight:300; }

.v2 .latest{ padding-block:3.5rem; }
.v2 .sec-top{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:2rem; padding-bottom:1rem; border-bottom:1px solid var(--border); }
.v2 .sec-top h2{ font-weight:500; font-style:italic; color:var(--muted-fg); }
.v2 .feat{ margin-bottom:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid var(--border); }
.v2 .feat > a{ display:block; }
.v2 .feat-img{ overflow:hidden; margin-bottom:1.25rem; background:var(--muted); }
.v2 .feat-img img{ width:100%; height:420px; object-fit:cover; transition:transform .5s; }
.v2 .feat > a:hover .feat-img img{ transform:scale(1.02); }
.v2 .feat-g{ display:grid; grid-template-columns:minmax(0,1fr); }
.v2 .feat-date{ display:flex; align-items:flex-start; padding-top:.25rem; margin-bottom:.75rem; }
@media (min-width:768px){
  .v2 .feat-g{ grid-template-columns:repeat(12,minmax(0,1fr)); }
  .v2 .feat-date{ grid-column:span 1/span 1; flex-direction:column; align-items:flex-end; margin-bottom:0; padding-right:1.5rem; }
  .v2 .feat-txt{ grid-column:span 11/span 11; }
}
.v2 .feat h3{ font-weight:500; line-height:1.15; margin-bottom:.75rem; transition:opacity .15s; }
.v2 .feat > a:hover h3{ opacity:.8; }
.v2 .feat-sub{ max-width:42rem; margin-bottom:1rem; color:var(--secondary-fg); font-weight:300; }
.v2 .trio{ display:grid; grid-template-columns:minmax(0,1fr); gap:2rem; }
@media (min-width:768px){ .v2 .trio{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.v2 .trio > a{ display:block; padding-bottom:2rem; border-bottom:1px solid var(--border); }
.v2 .trio-img{ overflow:hidden; margin-bottom:1rem; background:var(--muted); }
.v2 .trio-img img{ width:100%; height:200px; object-fit:cover; transition:transform .5s; }
.v2 .trio > a:hover .trio-img img{ transform:scale(1.03); }
.v2 .trio-meta{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; }
.v2 .trio h3{ font-weight:500; line-height:1.3; margin-bottom:.5rem; transition:opacity .15s; }
.v2 .trio > a:hover h3{ opacity:.8; }
.v2 .trio p{ margin-bottom:1rem; color:var(--secondary-fg); font-weight:300; }

.v2 .appetite{ padding-block:3.5rem; border-bottom:1px solid var(--border); }
.v2 .ap-top{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:2rem; }
.v2 .ap-title{ display:flex; align-items:center; gap:.75rem; margin-bottom:.25rem; }
.v2 .ap-title img{ width:28px; height:28px; flex-shrink:0; mix-blend-mode:multiply; }
.v2 .ap-title h2{ font-weight:500; line-height:1.2; }
.v2 .ap-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.v2 .ap-item{ position:relative; overflow:hidden; display:block; background:var(--muted); }
.v2 .ap-item img{ width:100%; height:320px; object-fit:cover; object-position:top; transition:transform .7s; }
.v2 .ap-item:hover img{ transform:scale(1.03); }
.v2 .ap-no{ position:absolute; bottom:0; left:0; padding:.5rem .75rem; background:var(--fg); }
.v2 .ap-no span{ font-size:10px; color:var(--bg); }
.v2 .ap-name{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:0 .75rem 2.5rem; opacity:0; transition:opacity .3s; background:linear-gradient(to top, rgba(26,23,20,.75) 0%, transparent 60%); }
.v2 .ap-item:hover .ap-name{ opacity:1; }
.v2 .ap-name span{ font-family:var(--fd); font-style:italic; font-weight:500; font-size:1rem; color:var(--bg); }
.v2 .ap-intro{ margin-top:1.75rem; max-width:44rem; color:var(--secondary-fg); font-weight:300; }
.v2 .ap-intro p + p{ margin-top:1rem; }
/* the series in full, on /articles: a measure you can read down, and the
   closing question set apart so it lands as a question, not a sign-off. */
.v2 .series-intro{ max-width:42rem; margin-top:2rem; margin-bottom:2.5rem; color:var(--secondary-fg); font-weight:300; }
.v2 .series-intro p + p{ margin-top:1rem; }
.v2 .series-ask{ margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--border);
  color:var(--fg); font-family:var(--fd); font-style:italic; font-size:1.125rem; line-height:1.6; }
.v2 .series-ask strong{ font-style:normal; font-weight:500; }

/* ---- the machine looks back: one cyan sweep on hover, never ambient ----
   Carried over from eys.css (.eys .fr, 28 Aug). #2fb9ea is the illustrations'
   own object-detection cyan, so the sweep reads as the machine scanning the
   plate rather than as decoration. Brackets are NOT added on top: these
   portraits already carry them by hand. Restored 18 Sep on Gavin's ask. */
.v2 .ap-item::after, .v2 .fig-img::after{
  content:''; position:absolute; left:0; right:0; height:45%; top:-45%;
  pointer-events:none; opacity:0; z-index:3;
  background:linear-gradient(180deg,transparent,rgba(47,185,234,.42) 45%,transparent); }
.v2 .ap-item:hover::after, .v2 .fig-img:hover::after{
  animation:eysscan 1.4s cubic-bezier(.4,0,.5,1) forwards; }
@keyframes eysscan{
  0%{ top:-45%; opacity:0; }
  12%{ opacity:1; }
  88%{ opacity:1; }
  100%{ top:100%; opacity:0; } }
@media (prefers-reduced-motion:reduce){
  .v2 .ap-item:hover::after, .v2 .fig-img:hover::after{ animation:none; } }

/* the dark band runs edge to edge without widening the page */
.v2 .band-ink{ background:var(--fg); box-shadow:0 0 0 100vmax var(--fg); clip-path:inset(0 -100vmax); padding-block:3.5rem; }
.v2 .band-g{ display:grid; grid-template-columns:minmax(0,1fr); gap:2rem; align-items:center; }
@media (min-width:768px){ .v2 .band-g{ grid-template-columns:repeat(12,minmax(0,1fr)); } .v2 .band-main{ grid-column:span 7/span 7; } .v2 .band-side{ grid-column:span 5/span 5; } }
.v2 .band-main .lbl{ margin-bottom:1rem; }
.v2 .band-main h2{ font-weight:500; line-height:1.2; margin-bottom:1rem; color:var(--bg); }
.v2 .band-main p:not(.lbl){ margin-bottom:2rem; color:#A89D8C; font-weight:300; }
.v2 .band-box{ padding:1.5rem; border:1px solid #3D3630; }
.v2 .band-row{ display:flex; align-items:baseline; gap:.75rem; }
.v2 .band-row + .band-row{ margin-top:1rem; }
.v2 .band-row .t{ font-family:var(--fd); font-style:italic; font-weight:500; font-size:.875rem; color:var(--bg); }
.v2 .band-foot{ margin-top:1rem; padding-top:1rem; border-top:1px solid rgba(239,230,210,.22); }
.v2 .band-foot .lbl{ color:var(--muted-dark); }   /* was #5A5047 = 2.27:1 */

/* Every dark band takes the dark-ground pair. This is the whole contrast fix:
   .band-ink covers the book band, the manifesto hero and mf-next. */
.v2 .band-ink .c-accent{ color:var(--accent-dark); }
.v2 .band-ink .c-muted{ color:var(--muted-dark); }

/* ---- LIGHT WEIGHTS THIN OUT ON DARK. Gavin, 24 Sep, on the book band's
   body copy: "i thimk this is still a bit hard to read" - and he was right
   even though that line measured 6.69:1 and PASSES AA. Contrast maths compares
   luminance; it cannot see stroke weight. Light text on a dark ground haloes
   slightly, so a 300-weight serif renders visually thinner than the same
   weight on cream. The answer is weight and a lift toward cream, not a bigger
   ratio. Body copy on any dark band is 400, never 300.
      was  #A89D8C weight 300   6.69:1  passes, reads faint
      now  cream 86% weight 400 10.9:1  passes and reads               */
.v2 .band-ink p:not(.lbl):not(.pull):not(.hero-sub){
  color:rgba(239,230,210,.86); font-weight:400; }
.v2 .foot--rev .foot-say,
.v2 .foot--rev .foot-nav a{ font-weight:400; }

.v2 .strip{ padding-block:3.5rem; }
.v2 .strip-g{ display:grid; grid-template-columns:minmax(0,1fr); gap:2.5rem; align-items:start; }
@media (min-width:768px){ .v2 .strip-g{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.v2 .strip .lbl{ margin-bottom:1rem; }
.v2 .strip h2{ font-weight:500; line-height:1.25; margin-bottom:1rem; }
.v2 .strip p.say{ color:var(--secondary-fg); font-weight:300; }
.v2 .strip-act{ display:flex; flex-direction:column; gap:1rem; align-items:flex-start; }
.v2 .strip-act .lbl{ margin-bottom:0; }
.v2 .strip-act .pill{ padding:12px 28px; }

/* =====================================================================
   PULSE  - one live dot, and only one. A radar ping on the thing that is
   actually live and recurring: the weekly dispatch. It earns its motion
   because the dispatch really does go out every week; put a second one
   anywhere and both stop meaning anything.
   ===================================================================== */
.v2 .pulse{
  position:relative; display:inline-block; width:6px; height:6px;
  margin-right:.55rem; border-radius:50%; background:var(--accent);
  vertical-align:baseline; flex:none;
}
.v2 .pulse::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:var(--accent);
  animation:eysping 2.6s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes eysping{
  0%{ transform:scale(1); opacity:.55; }
  70%,100%{ transform:scale(3.4); opacity:0; }
}
/* the dot stays, the ping goes - the reader still sees the marker */
@media (prefers-reduced-motion:reduce){
  .v2 .pulse::after{ animation:none; opacity:0; }
}

/* =====================================================================
   PROSE  - the long-form pages: About, Manifesto, and the legal pages.
   One measure, set once. These are pages someone reads top to bottom,
   so the column stops at roughly 65 characters and nothing else competes
   with it. Shared by all four, not written again per page.
   ===================================================================== */
.v2 .prose{ max-width:38rem; }
.v2 .prose > p{ margin:0 0 1.15rem; }
.v2 .prose > p:last-child{ margin-bottom:0; }
.v2 .prose h2{ font-weight:500; line-height:1.2; margin:2.75rem 0 1rem; }
.v2 .prose h3{ font-size:1.0625rem; font-weight:500; margin:2rem 0 .4rem; }
.v2 .prose a{ color:var(--accent); text-decoration:none;
  border-bottom:1px solid var(--border); }
.v2 .prose a:hover{ border-bottom-color:currentColor; }
.v2 .prose ul{ margin:0 0 1.15rem; padding-left:1.1rem; }
.v2 .prose li{ margin-bottom:.4rem; }
/* an aside: a fact that interrupts the argument rather than advancing it.
   Set to the side of the measure so the eye can skip it and lose nothing. */
.v2 .prose .aside{ margin:1.75rem 0; padding-left:1rem;
  border-left:2px solid var(--accent); color:var(--muted-fg);
  font-size:.9375rem; }
/* the numbered forces / directions on the manifesto: a term and its gloss */
.v2 .terms{ margin:1.5rem 0 2rem; display:flex; flex-direction:column; gap:1.1rem; }
.v2 .terms > div{ display:grid; grid-template-columns:2.5rem minmax(0,1fr);
  gap:0 1rem; align-items:baseline; }
.v2 .terms .lbl{ margin:0; }
.v2 .terms h3{ margin:0; font-size:1.0625rem; font-weight:500; }
.v2 .terms p{ grid-column:2; margin:.2rem 0 0; color:var(--muted-fg); }
/* the byline under a page title */
.v2 .byline{ margin:-2rem 0 2.5rem; }
/* =====================================================================
   LISTEN  - No. 08 PAPRIKA on No. 03 COLD STORE.
   The colour is not a choice made here: DECISIONS.md reserved Paprika and
   Burnt Butter for "pages that do not exist yet", and Listen was one of
   them. Navy and orange is the pairing Gavin sent.

   Dark, because an audio page should feel different from the reading
   pages, and because the cover artwork is cream-grounded - it will sit ON
   this rather than fight it when it arrives.
   ===================================================================== */
.v2 .ls-hero{
  background:var(--c03-cold-store); padding-block:5rem 4.5rem;
  box-shadow:0 0 0 100vmax var(--c03-cold-store); clip-path:inset(0 -100vmax);
}
.v2 .ls-accent{ color:var(--c08-paprika); }
.v2 .ls-dim{ color:#5C6B7A; }
.v2 .ls-hero-g{ display:grid; grid-template-columns:minmax(0,1fr); gap:3rem; }
@media (min-width:768px){
  /* cover, then the words, then the spec panel. The cover leads because on a
     podcast page the artwork IS the identity. */
  .v2 .ls-hero-g{ grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr); gap:3.5rem; }
  .v2 .ls-expect{ grid-column:1 / -1; }
}
@media (min-width:1100px){
  .v2 .ls-hero-g{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) minmax(0,.8fr); }
  .v2 .ls-expect{ grid-column:auto; }
}
/* holding frame, on the dark ground: the wireframe box is drawn for cream, so
   it is inverted here rather than left as a near-invisible dark-on-dark box. */
.v2 .ls-cover-box{ aspect-ratio:1; border-color:#33465C; }
.v2 .ls-cover-box span{ color:#7E8B99; line-height:1.8; }
.v2 .ls-cover-box::before, .v2 .ls-cover-box::after,
.v2 .ls-cover-box > i::before, .v2 .ls-cover-box > i::after{ border-color:#7E8B99; }
.v2 .ls-mark{ width:40px; height:40px; margin-bottom:1.5rem; filter:invert(1); opacity:.85; }
.v2 .ls-hero .lbl{ margin-bottom:1.25rem; }
.v2 .ls-hero h1{ color:var(--bg); font-weight:500; line-height:1.05; margin-bottom:1.5rem; }
.v2 .ls-lead{ max-width:32rem; color:#A9B4C0; font-weight:300;
  font-size:1.125rem; line-height:1.7; }

/* what to expect: a spec panel, not prose. It answers the two questions a
   reader actually has before they commit to an audio series. */
.v2 .ls-expect{ border-top:2px solid var(--c08-paprika); padding-top:1.5rem;
  display:flex; flex-direction:column; gap:1.5rem; }
.v2 .ls-expect > p.lbl:first-child{ margin:0; }
.v2 .ls-expect > div > p.lbl{ margin-bottom:.35rem; }
.v2 .ls-expect > div > p:not(.lbl){ color:#A9B4C0; font-weight:300; font-size:.9375rem; }

/* the in-production state. Shown until LISTEN_EPISODES has something in it -
   an honest "not yet" beats a placeholder card pretending to be an episode. */
.v2 .ls-soon{ max-width:38rem; padding-top:1rem; }
.v2 .ls-soon .lbl{ margin-bottom:.75rem; }
.v2 .ls-soon h2{ font-weight:500; line-height:1.15; margin-bottom:1rem; }
.v2 .ls-soon p{ color:var(--secondary-fg); font-weight:300; margin-bottom:2rem; }

/* episode rows, for when there are episodes */
.v2 .ls-eps{ display:flex; flex-direction:column; }
.v2 .ep-row{ display:grid; grid-template-columns:minmax(0,1fr); gap:1.25rem;
  padding-block:2rem; border-top:1px solid var(--border); }
@media (min-width:640px){ .v2 .ep-row{ grid-template-columns:10rem minmax(0,1fr); gap:2rem; } }
.v2 .ls-eps .ep-row:last-child{ border-bottom:1px solid var(--border); }
.v2 .ep-art img{ width:100%; height:auto; display:block; }
.v2 .ep-art-none{ aspect-ratio:1; background:var(--muted); }
.v2 .ep-txt h3{ font-weight:500; line-height:1.25; margin:.35rem 0 .5rem; }
.v2 .ep-txt p:not(.lbl){ max-width:38rem; margin-bottom:1rem;
  color:var(--secondary-fg); font-weight:300; }

/* ---- Listen: the sections built from Gavin's copy, 20 Sep -------- */

/* Season one. The question it ends on is the page's thesis, so it is pulled
   out of the paragraph flow rather than buried at the end of one. */
.v2 .ls-season{ margin-top:3.5rem; padding-top:2.5rem;
  border-top:1px solid var(--border); }
.v2 .ls-season h2{ font-weight:500; line-height:1.15; margin:.4rem 0 1.5rem; }
.v2 .ls-season-say{ max-width:38rem; color:var(--secondary-fg); font-weight:300;
  margin-bottom:1rem; }
.v2 .ls-season-q{
  font-family:var(--fd); font-weight:600; font-size:clamp(1.25rem,2.6vw,1.75rem);
  line-height:1.3; color:var(--fg); max-width:34rem; margin-top:1.5rem;
  padding-left:1.25rem; border-left:3px solid var(--accent);
}

/* Episode 01, in production. An honest "not yet" with a date-shaped edge. */
.v2 .ls-now{ margin-top:3.5rem; padding:2rem; background:var(--card);
  border-left:2px solid var(--accent); }
.v2 .ls-now h2{ font-weight:500; line-height:1.2; margin:.5rem 0 1rem;
  font-size:clamp(1.5rem,3vw,2rem); }
.v2 .ls-now p:not(.lbl){ max-width:38rem; color:var(--secondary-fg); font-weight:300; }
.v2 .ls-soonflag{ margin-top:1.25rem; }

.v2 .ls-what{ margin-top:3.5rem; padding-top:2.5rem;
  border-top:1px solid var(--border); }
.v2 .ls-what h2{ font-weight:500; line-height:1.15; margin:.4rem 0 1.5rem; }

/* THE LAST QUESTION. The device that closes every episode, so it closes the
   page too - full-bleed Cold Store, the two questions at display size in
   Paprika. This is the bit someone screenshots. */
.v2 .ls-lastq{
  background:var(--c03-cold-store); padding-block:4.5rem; margin-top:4rem;
  box-shadow:0 0 0 100vmax var(--c03-cold-store); clip-path:inset(0 -100vmax);
}
.v2 .ls-lastq .lbl{ margin-bottom:1.5rem; }
.v2 .ls-lastq-intro{ color:#7E8B99; font-weight:300; margin-bottom:.75rem; }
.v2 .ls-q{
  font-family:var(--fd); font-weight:600; font-style:italic;
  font-size:clamp(1.5rem,4vw,2.5rem); line-height:1.25;
  color:var(--c08-paprika); max-width:26ch; margin-bottom:2.5rem;
}
.v2 .ls-q:last-child{ margin-bottom:0; }

.v2 .ls-first{ margin-top:3.5rem; padding-top:2.5rem;
  border-top:1px solid var(--border); }
.v2 .ls-first h2{ font-weight:500; line-height:1.2; margin:.4rem 0 .75rem;
  font-size:clamp(1.5rem,3vw,2rem); }
.v2 .ls-first p:not(.lbl){ max-width:38rem; color:var(--secondary-fg);
  font-weight:300; margin-bottom:1.75rem; }
.v2 .ls-first-act{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; }
.v2 .ls-first-act .lbl{ margin:0; }

/* =====================================================================
   MANIFESTO  - rebuilt 20 Sep. The first version was a single prose column
   adrift in a 64rem wrap: forty per cent of the page empty, no colour, no
   header, and "Visibility." breaking mid-word in a 2.5rem gutter. Gavin,
   correctly: "generally lazy in the way its been deployed."

   The fix is structure, not decoration. A page that has to HOLD a reader
   needs a way in, a rhythm, and a way onward. Privacy and Terms keep the
   plain column, because nobody dwells there.
   ===================================================================== */
.v2 .mf-hero{ padding-block:5rem 4.5rem; }
.v2 .mf-hero .mf-mark{ width:44px; height:44px; margin-bottom:1.75rem;
  filter:invert(1); opacity:.9; }
.v2 .mf-hero .lbl{ margin-bottom:1.25rem; }
.v2 .mf-hero h1{ color:var(--bg); font-weight:500; line-height:1.06;
  letter-spacing:-.015em; margin-bottom:1.5rem; max-width:20ch; }
.v2 .mf-by{ color:#A89D8C; }

/* the reading column is CENTRED here, not left-adrift in the wrap. That one
   change is most of what made the old page look broken. */
.v2 .mf-prose{ margin-inline:auto; }

/* five forces. The old version put the term in a 2.5rem column, which broke
   "Visibility." across two lines. Here each force is its own card and the
   numeral sits above the term, so no word can be squeezed. */
.v2 .mf-forces{ margin:4rem 0; padding-top:2.5rem;
  border-top:1px solid var(--border); }
.v2 .mf-forces h2{ font-weight:500; line-height:1.15; margin:.4rem 0 2.5rem; }
.v2 .force-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:2rem; }
@media (min-width:640px){ .v2 .force-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .v2 .force-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.v2 .force{ padding-top:1rem; border-top:2px solid var(--accent); }
.v2 .force-n{ font-size:1rem; letter-spacing:.06em; margin-bottom:.5rem; }
.v2 .force h3{ font-weight:500; font-size:1.25rem; line-height:1.25;
  margin-bottom:.5rem; }
.v2 .force p:not(.lbl){ color:var(--secondary-fg); font-weight:300; }

/* the three directions: the brand folder's banner device - the word with a
   terracotta rule beneath - rebuilt as live type in the current face. */
.v2 .mf-dirs{ background:var(--card); padding-block:4rem;
  box-shadow:0 0 0 100vmax var(--card); clip-path:inset(0 -100vmax); }
.v2 .mf-dirs h2{ font-weight:500; line-height:1.15; margin:.4rem 0 3rem; }
.v2 .dir{ padding-block:2rem; border-top:1px solid var(--border); }
.v2 .dir:last-child{ border-bottom:1px solid var(--border); }
.v2 .dir-n{ font-size:.875rem; letter-spacing:.2em; margin-bottom:.75rem; }
.v2 .dir h3{ font-family:var(--fd); font-weight:600;
  font-size:clamp(2rem,5vw,3.25rem); line-height:1; margin-bottom:1rem;
  display:inline-block; border-bottom:3px solid var(--accent);
  padding-bottom:.35rem; }
.v2 .dir p:not(.lbl){ max-width:38rem; color:var(--secondary-fg); font-weight:300; }

/* share: plain links, because beehiiv strips the JavaScript a copy-link
   button would need. Three that work as hrefs beat four where one is dead. */
.v2 .mf-share{ margin-top:3rem; padding-top:1.5rem;
  border-top:1px solid var(--border); display:flex; flex-wrap:wrap;
  align-items:baseline; gap:.75rem 1.5rem; }
.v2 .mf-share p{ margin:0; }
.v2 .mf-share ul{ display:flex; flex-wrap:wrap; gap:1.25rem; }
.v2 .mf-share a{ color:var(--accent); transition:opacity .15s; }
.v2 .mf-share a:hover{ opacity:.65; }

/* the way onward. A manifesto that just stops is a dead end. */
.v2 .mf-next{ padding-block:4rem; }
.v2 .mf-next-g{ display:grid; grid-template-columns:minmax(0,1fr); gap:2.5rem;
  align-items:center; }
@media (min-width:768px){ .v2 .mf-next-g{ grid-template-columns:1.3fr 1fr; } }
.v2 .mf-next h2{ color:var(--bg); font-weight:500; line-height:1.2;
  margin-top:.5rem; }
.v2 .mf-next-act{ display:flex; flex-direction:column; align-items:flex-start;
  gap:1rem; }
.v2 .mf-next-act .lbl{ color:#5A5047; margin:0; }
.v2 .pill-ink-line{ border:1px solid #3D3630; color:var(--bg); }

/* the pull-quote, carried over from the original build's .ab-pull at Gavin's
   request (20 Sep). Same device: display face, heavy, ruled top and bottom,
   2px above and 1px below so it reads as lifted OUT of the column rather than
   boxed in. The old one was Archivo Expanded at 700; Playfair has no width
   axis and is darker on the page, so 600 carries the same weight. It breaks
   the measure on purpose - that is the whole point of a pull-quote. */
.v2 .prose > p.pull{
  font-family:var(--fd); font-weight:600;
  font-size:clamp(1.25rem, 2.3vw, 1.75rem); line-height:1.26;
  color:var(--fg); max-width:none;
  border-top:2px solid var(--fg); border-bottom:1px solid var(--fg);
  padding:1.6rem 0; margin:2.4rem 0;
}

/* =====================================================================
   MANIFESTO  - the closing statement. It is the line the whole page has
   been building to, so it is set at display size and given the room.
   ===================================================================== */
.v2 .man-end{ margin-top:3.5rem; padding-top:2.5rem;
  border-top:1px solid var(--border); max-width:38rem; }
.v2 .man-end p:first-child{ font-family:var(--fd); font-size:1.5rem;
  line-height:1.35; font-weight:500; margin:0 0 1rem; }
.v2 .man-end p.lbl{ margin:0; }

/* =====================================================================
   LEGAL PAGES  - Privacy, Terms. Body is .prose; these are the two extra
   pieces. Read as a document, not as marketing.
   ===================================================================== */
.v2 .legal-addr{ font-style:normal; line-height:1.8; }
.v2 .legal-end{ margin-top:3.5rem; padding-top:1.5rem;
  border-top:1px solid var(--border); }
.v2 .legal-end p{ margin:0; }
.v2 .legal-end p + p{ margin-top:.3rem; }

/* =====================================================================
   ARCHIVE  - the header only. beehiiv's own Post block renders the cards
   below and stays as it is. The status strip is three states of the work,
   not navigation: it links nowhere and should not look like it does.
   ===================================================================== */
.v2 .arc-intro{ max-width:38rem; color:var(--secondary-fg); font-weight:300; }
.v2 .arc-intro p + p{ margin-top:.75rem; }
.v2 .arc-state{ display:flex; flex-wrap:wrap; gap:1.25rem 2.5rem;
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--border); }
.v2 .arc-state p{ margin:0; }
.v2 .arc-state p + p{ margin-top:.3rem; }

/* =====================================================================
   READING  - layout from the Make design, copy from Gavin's own page.
   A permanent list, so it is built as a reference table rather than a
   feed: the year leads, because the argument of the page is two hundred
   years of people noticing the same thing.
   ===================================================================== */
.v2 .rd-rail{ margin-bottom:2.5rem; }
.v2 .rd-years{ display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; margin-bottom:.6rem; }
.v2 .rd-years span{ font-family:var(--fm); font-size:1.25rem; letter-spacing:.06em;
  color:var(--fg); }
.v2 .rd-intro{ max-width:38rem; margin-bottom:3.5rem; color:var(--secondary-fg);
  font-weight:300; }
.v2 .rd-intro p + p{ margin-top:1rem; }

.v2 .rd-shelf h2{ font-weight:500; line-height:1.2; margin:.4rem 0 1rem; }
.v2 .rd-shelf-note{ max-width:38rem; margin-bottom:2.5rem; color:var(--secondary-fg);
  font-weight:300; }

.v2 .rd-row{ display:grid; grid-template-columns:minmax(0,1fr); gap:1rem;
  padding-block:2rem; border-top:1px solid var(--border); }
@media (min-width:768px){
  .v2 .rd-row{ grid-template-columns:5rem 7rem minmax(0,1fr); gap:2rem; align-items:start; }
}
.v2 .rd-list .rd-row:last-child{ border-bottom:1px solid var(--border); }
.v2 .rd-year{ display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; }
.v2 .rd-year .lbl{ font-size:1rem; letter-spacing:.06em; }
/* "Start here" - the one book he points newcomers at, so it is allowed to shout */
.v2 .rd-badge{ font-size:10px; padding:2px 7px; border-radius:999px;
  background:var(--accent); color:var(--bg); white-space:nowrap; }
/* Covers run as Open Library serves them. A unifying wash was built and
   tested (navy tint, matched tonal band) and PARKED on Gavin's call, 19 Sep -
   get the page live first, revisit the treatment. The markup is ready for it:
   adding the filter and a ::after overlay on .rd-cover is the whole change. */
.v2 .rd-cover{ position:relative; width:100%; max-width:7rem; }
.v2 .rd-cover img{ width:100%; height:auto; display:block;
  border:1px solid var(--border); background:var(--muted); }
.v2 .rd-txt h3{ font-family:var(--fd); font-style:italic; font-weight:500;
  font-size:1.25rem; line-height:1.3; margin-bottom:.35rem; }
.v2 .rd-author{ margin-bottom:.75rem; }
.v2 .rd-note{ max-width:38rem; margin-bottom:1rem; color:var(--secondary-fg);
  font-weight:300; }
.v2 .rd-buy{ transition:opacity .15s; }
.v2 .rd-buy:hover{ opacity:.65; }

.v2 .rd-next{ margin-top:3.5rem; padding-top:2.5rem; border-top:1px solid var(--border); }
.v2 .rd-next h2{ font-weight:500; line-height:1.25; margin:.5rem 0 1rem; max-width:38rem; }
.v2 .rd-next p{ max-width:38rem; margin-bottom:1.25rem; color:var(--secondary-fg);
  font-weight:300; }
.v2 .rd-credit{ margin-top:3rem; }

/* the About figure and its bilingual caption. The Japanese is the phrase
   brushed in the drawing itself, so it leads and the English glosses it.
   Japanese is NOT uppercased or mono-spaced - neither does anything good to
   kana, and JetBrains Mono has no glyphs for it. */
.v2 .about-fig{ max-width:30rem; margin:0 0 3rem; }
.v2 .about-fig img{ width:100%; height:auto; display:block; }
.v2 .about-fig figcaption{ margin-top:.85rem; display:flex; flex-direction:column; gap:.3rem; }
.v2 .about-fig .ja{
  font-family:'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',var(--ft),serif;
  font-size:1rem; line-height:1.6; color:var(--secondary-fg); letter-spacing:.04em;
}

/* the end mark: the publication signing off, not a person. A printer's mark
   at the close of a piece - small, quiet, and never a fake signature. */
.v2 .endmark{ margin-top:3rem; padding-top:2rem; border-top:1px solid var(--border); }
.v2 .endmark img{ width:34px; height:34px; mix-blend-mode:multiply; opacity:.9; }

/* =====================================================================
   SUBSCRIBE HERO  - the night-street illustration behind a dark gradient,
   from the Make design. The design parallaxes the background on scroll with
   JavaScript; beehiiv strips scripts, so it is static here. The gradient is
   the design's own: heavy on the left so the type holds, opening to the
   right so the room is still visible.
   ===================================================================== */
.v2 .sub-hero{ position:relative; overflow:hidden; background:var(--fg);
  border-bottom:1px solid var(--border); }
.v2 .sub-hero-bg{
  position:absolute; inset:0;
  background-image:url("https://assets.eatyourscreen.com/subscribe-hero.jpg");
  background-size:cover; background-position:center;
}
.v2 .sub-hero-veil{
  position:absolute; inset:0;
  background:linear-gradient(to right, rgba(26,23,20,.88) 55%, rgba(26,23,20,.6) 100%);
}
/* on a phone the type sits over the busiest part of the picture, so the veil
   goes vertical and heavier - legibility wins over the view */
@media (max-width:767px){
  .v2 .sub-hero-veil{
    background:linear-gradient(to bottom, rgba(26,23,20,.7) 0%, rgba(26,23,20,.92) 60%);
  }
}
.v2 .sub-hero-in{ position:relative; padding-block:5rem; }
.v2 .sub-hero-main{ max-width:38rem; }
.v2 .sub-hero-mark{ width:56px; height:56px; display:block; margin-bottom:1.5rem;
  filter:invert(1); opacity:.85; }
.v2 .sub-hero .lbl{ margin-bottom:1.5rem; }
.v2 .sub-hero h1{ font-weight:500; line-height:1.08; letter-spacing:-.015em;
  color:var(--bg); margin-bottom:1.5rem; }
.v2 .sub-hero-say{ max-width:32rem; color:#A89D8C; font-weight:300;
  font-size:1.125rem; line-height:1.7; }

/* =====================================================================
   SUBSCRIBE  - the two blocks either side of beehiiv's native form.
   The strands are numbered here because the dispatch really does arrive
   in that order; the number is the running order, not decoration.
   ===================================================================== */
.v2 .arrives{ margin-top:3.5rem; }
.v2 .arrives h2{ font-weight:500; line-height:1.15; margin-bottom:1.75rem; }
.v2 .arr-list{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
.v2 .arr-list li{ display:grid; grid-template-columns:2.5rem minmax(0,1fr);
  gap:0 1rem; align-items:baseline;
  padding-block:1.1rem; border-top:1px solid var(--border); }
.v2 .arr-list li:last-child{ border-bottom:1px solid var(--border); }
.v2 .arr-list h3{ font-size:1.125rem; font-weight:500; margin:0; }
.v2 .arr-list p{ grid-column:2; margin:.25rem 0 0; color:var(--muted-fg);
  max-width:38rem; }
/* the three promises: set as plain sentences, one per line, because each is a
   commitment and running them together reads as small print */
.v2 .promises{ margin-top:2.5rem; display:flex; flex-direction:column; gap:.9rem;
  max-width:44rem; }
.v2 .promises p{ margin:0; color:var(--muted-fg); }
.v2 .sub-out{ margin-top:2.5rem; }
.v2 .sub-out a{ color:var(--accent); text-decoration:none;
  border-bottom:1px solid transparent; }
.v2 .sub-out a:hover{ border-bottom-color:currentColor; }

/* =====================================================================
   GLOBAL FOOTER  - one Embed inside beehiiv's own footer, so the site
   ends in the same type and colour it is set in. Manifesto and About sit
   in their own column: they are about the publication, not its output.

   NOT A BOX. Gavin, 21 Sep: "it should blend into the page and not be
   boxed in." The previous footer was capped at 64rem while the pages ran
   to 1280, and it sat on beehiiv's own slightly lighter section fill, so
   it read as a panel dropped onto the page instead of the end of it. Two
   fixes, and both matter: the bleed below paints --bg edge to edge so no
   seam can show, and foot-in matches the pages' 1280 measure so the
   columns line up with the content above them.

   The column kickers (READ / THE PUBLICATION / WEEKLY - FREE) are gone.
   Two of them labelled what the links plainly said, and "The publication"
   wrapped to two lines and pushed its own column out of alignment.
   ===================================================================== */
.v2 .foot{
  padding-block:5rem 2.5rem;
  background:var(--bg); color:var(--fg);
  box-shadow:0 0 0 100vmax var(--bg);
  clip-path:inset(0 -100vmax);
}
.v2 .foot-in{ max-width:80rem; margin-inline:auto; padding-inline:1.5rem; }
.v2 .foot-g{ display:grid; grid-template-columns:minmax(0,1fr); gap:3rem; }
@media (min-width:768px){
  .v2 .foot-g{ grid-template-columns:1.3fr .9fr .8fr 1.5fr; gap:2.5rem; }
}


/* ---- PROPORTION, set against the page not against itself. Gavin, 24 Sep:
   "is the font the right size in proportion... just in context to the rest
   of the site." Measured live at 1440: the page runs body copy at 16px,
   section headings at 20px, the navbar at 12px mono. The footer was running
   its links at 20px and its paragraph at 17px - navigation set louder than
   the content above it, and the reason the footer read as shouting. Links
   now sit AT body size, so the lockup is the only large thing down here.
      links      20 -> 16   = body copy
      paragraph  17 -> 16   = body copy
      tagline    17 -> 15
      legal      16 -> 15
      wordmark   38 -> 34   (page h1 is 60; the lockup must not compete)
      mark       96 -> 80                                            */

/* ---- the lockup. THE FOOTER LOCKUP IS THE HEADER LOCKUP, set live.
   Measured off the header master (eys-v2-header-lockup-535x120-legible.png)
   on 21 Sep: BOTH lines are Playfair Display - the name at 700 in title
   case, the tagline in ITALIC 400, also title case. It is not mono, not
   uppercase and not Source Serif; an earlier pass here used uppercase for
   the name and sentence-case Source Serif for the tagline and it read as a
   different brand. Gavin: "doesnt match the header and our font."
   Only the type is set here - the size and layout are the design's.   */
.v2 .foot-mark{ display:block; width:80px; height:80px; margin-bottom:1.25rem; color:var(--fg); }
.v2 .foot-wm{ font-family:var(--fd); font-weight:700; font-size:clamp(1.625rem,3vw,2.125rem);
  line-height:1.04; letter-spacing:-.01em; }
.v2 .foot-tag{ margin-top:.6rem; font-family:var(--fd); font-style:italic; font-weight:400;
  font-size:.9375rem; line-height:1.4; letter-spacing:.005em; color:var(--fg); }

.v2 .foot-nav{ display:flex; flex-direction:column; gap:.55rem; align-items:flex-start; }
.v2 .foot-nav a{ font-size:1rem; font-weight:300; line-height:1.35; color:var(--fg);
  transition:opacity .15s; }
.v2 .foot-nav a:hover{ opacity:.55; }

/* ---- THE BOOK, MARKED BY A RULE AND NOTHING ELSE. A first pass set both
   works in Playfair italic at 18px. Gavin, 24 Sep: "im not convinced by this,
   i think this should just have the underline no bigger text.. reber ux and
   usability." He is right - the size bump made the list ragged, gave two of
   six links a different tap target, and italic serif is harder to read at
   this size. Size was doing decoration, not communication.
   Every link stays identical; The Book alone carries a Stream underline.
   No. 10, the machine-vision colour. A RULE, never an outline - #2FB9EA is
   also the focus indicator (eys.css:762) and a box round a link reads as
   focus. It spans the word so it reads as an underline, not a stray mark. */
.v2 .foot-nav a.work-book{ position:relative; padding-bottom:.45rem; }
.v2 .foot-nav a.work-book::after{ content:""; position:absolute; left:0; right:0;
  bottom:0; height:2px; background:var(--c10-stream); }

.v2 .foot-say{ font-size:1rem; line-height:1.55; font-weight:300;
  color:var(--fg); max-width:24rem; }
.v2 .foot-act .pill{ margin-top:1.5rem; }
.v2 .foot-soc{ display:flex; flex-wrap:wrap; gap:1.125rem; margin-top:1.75rem; }
.v2 .foot-soc a{ display:inline-flex; color:var(--fg); opacity:.9; transition:opacity .15s; }
.v2 .foot-soc a:hover{ opacity:.55; }
.v2 .foot-soc svg{ display:block; }

.v2 .foot-base{ margin-top:4.5rem; padding-top:1.75rem; border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:.75rem 2rem; align-items:baseline; justify-content:flex-end; }
.v2 .foot-c{ font-family:var(--fm); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--secondary-fg); }
.v2 .foot-legal{ display:flex; flex-wrap:wrap; gap:1.75rem; }
.v2 .foot-legal a{ font-size:.9375rem; font-weight:300; color:var(--fg); transition:opacity .15s; }
.v2 .foot-legal a:hover{ opacity:.55; }

@media (max-width:767px){
  .v2 .foot{ padding-block:3.5rem 2rem; }
  .v2 .foot-wm{ font-size:1.875rem; }
  .v2 .foot-base{ margin-top:3rem; }
}

/* ---- REVERSED. Gavin, 21 Sep: "we could even reverse it." No. 01 Cast
   Iron, which is the base of the palette and the colour the homepage
   already closes on, so the page ends on the pan rather than fading out.
   Add foot--rev to the footer element; nothing else changes.         */
.v2 .foot--rev{
  --border:rgba(239,230,210,.22);
  background:var(--c01-cast-iron); color:var(--c09-cornflour);
  box-shadow:0 0 0 100vmax var(--c01-cast-iron);
}
.v2 .foot--rev .foot-wm,
.v2 .foot--rev .foot-nav a,
.v2 .foot--rev .foot-say,
.v2 .foot--rev .foot-legal a,
.v2 .foot--rev .foot-soc a{ color:var(--c09-cornflour); }
.v2 .foot--rev .foot-tag{ color:var(--c09-cornflour); }
.v2 .foot--rev .foot-c{ color:rgba(239,230,210,.62); }
.v2 .foot--rev .foot-mark{ color:var(--c09-cornflour); }
.v2 .foot--rev .pill-ink{ background:var(--c09-cornflour); color:var(--c01-cast-iron); }

/* =====================================================================
   THE APPETITE SERIES PAGE  - /appetite
   All twelve, from day one. The written ones live; the rest are DRAWN but
   not yet written, so they sit dimmed and numbered. Gavin 25 Sep: "they are
   there but not yet able to see them."

   Cadence is ONE A MONTH, so this page spends its first year mostly dimmed.
   That is the design, not a defect - it reads as a calendar, not an empty
   archive. An archive with one entry looks broken; twelve faces with one
   revealed looks like a series under way.

   THE ONE PULSE. Only the "next" figure carries the ping, and there is only
   ever one. See the PULSE rule above: a second live dot anywhere and both
   stop meaning anything. Here it marks the figure landing this month.

   DIMMING AND CONTRAST. Only the IMAGE dims. The name and the argument stay
   at full strength, because a portrait at 40% with type over it fails AA and
   the reader still has to be able to read who is coming.
   ===================================================================== */
.v2 .ap-series{ display:grid; grid-template-columns:minmax(0,1fr); gap:2rem 1.5rem; margin-top:.5rem; }
@media (min-width:560px){ .v2 .ap-series{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:900px){ .v2 .ap-series{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.v2 .ap-fig{ display:flex; flex-direction:column; }
.v2 .ap-fig-img{ position:relative; overflow:hidden; background:var(--muted); }
/* 4:5, the ratio the portraits were drawn at - so nothing is cropped */
.v2 .ap-fig-img img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover;
  object-position:top; transition:transform .7s, opacity .4s, filter .4s; }
.v2 .ap-no{ position:absolute; bottom:0; left:0; padding:.5rem .75rem; background:var(--fg); }
.v2 .ap-no span{ font-size:10px; color:var(--bg); }
.v2 .ap-fig-row{ display:flex; align-items:center; min-height:1.75rem;
  padding-block:.75rem; border-bottom:1px solid var(--border); }
.v2 .ap-fig h3{ font-weight:500; margin:.75rem 0 .5rem; }
.v2 .ap-fig p{ flex:1; color:var(--secondary-fg); font-weight:300; margin:0; }
.v2 .ap-state{ display:inline-flex; align-items:center; font-size:10px; color:var(--secondary-fg); }

/* SOON - drawn, not written. The image recedes; the words do not. */
.v2 .ap--soon .ap-fig-img img{ opacity:.42; filter:grayscale(.55); }
.v2 .ap--soon .ap-fig-img::after{ content:""; position:absolute; inset:0;
  background:var(--bg); opacity:.28; pointer-events:none; }

/* NEXT - the one landing this month. Carries the only pulse on the page. */
.v2 .ap--next .ap-fig-img img{ opacity:.72; filter:grayscale(.2); }
.v2 .ap--next .ap-state{ color:var(--accent); }

/* LIVE - the piece exists. Full strength, and it lifts on hover. */
.v2 .ap--live .ap-fig-img img{ opacity:1; filter:none; }
.v2 .ap--live:hover .ap-fig-img img{ transform:scale(1.02); }
.v2 .ap--live h3{ transition:opacity .15s; }
.v2 .ap--live:hover h3{ opacity:.7; }

.v2 .ap-foot{ margin-top:3rem; padding-top:1.25rem; border-top:1px solid var(--border);
  max-width:42rem; font-size:12px; line-height:1.6; }
.v2 .ap-foot a{ color:var(--accent); }

.v2 .series--page .series-head{ margin-bottom:.5rem; }

/* The room the cards needed: argument, then who they are, then the chapter.
   Gavin 25 Sep - "it will need room to explain who they are and why they
   change things, as they also feature in chapters of the book." */
.v2 .ap-fig .ap-arg{ flex:none; color:var(--fg); font-weight:400; margin:0 0 .6rem; }
.v2 .ap-fig .ap-note{ flex:1; color:var(--secondary-fg); font-weight:300;
  font-size:.9375rem; line-height:1.55; margin:0 0 .9rem; }
.v2 .ap-ch{ display:block; padding-top:.7rem; border-top:1px solid var(--border);
  font-size:11px; }
.v2 .ap-ch em{ font-family:var(--fd); font-style:italic; color:var(--secondary-fg); }

/* TASTEMAKER / APPETITE MAKER. Two different claims, and the difference is the
   book's argument: one confers status, the other manufactures want. "Both" is
   the interesting group - authority arriving in the shape of appetite - so it
   gets the Stream blue, the machine-vision colour, not a third neutral. */
.v2 .ap-kind{ font-size:10px; margin-left:auto; }
.v2 .ap-kind--taste{ color:var(--secondary-fg); }
.v2 .ap-kind--appetite{ color:var(--accent); }
.v2 .ap-kind--both{ color:var(--c10-stream); }
.v2 .ap-fig-row{ gap:.75rem; }

/* THE WIRE. A ticker under the series - what the makers did this week.
   Deliberately quieter than the pulse: the ping marks what is next, this is
   just weather. Two things moving at the same volume cancel each other out,
   which is the same reason only one live dot is allowed. */
.v2 .tk{ margin-top:3rem; padding-block:.7rem; border-top:1px solid var(--border);
  border-bottom:1px solid var(--border); overflow:hidden; }
.v2 .tk-track{ display:flex; gap:2.5rem; width:max-content;
  animation:eyswire 64s linear infinite; }
.v2 .tk:hover .tk-track{ animation-play-state:paused; }
.v2 .tk-item{ font-family:var(--fm); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--secondary-fg); white-space:nowrap;
  text-decoration:none; }
.v2 a.tk-item:hover{ color:var(--accent); }
@keyframes eyswire{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* Stopped, not hidden - the reader still gets the items */
@media (prefers-reduced-motion:reduce){
  .v2 .tk-track{ animation:none; flex-wrap:wrap; width:auto; gap:1rem 2rem; }
}