/* ============================================================
   SHIFT HAPPENS — THE TIME MACHINE PRESS  (skin: press)
   ------------------------------------------------------------
   Orthogonal to data-variant (the cosmos palettes). data-skin
   flips the PROGRAM SPINE — days · signatures · rhythm · impact —
   from void to printed paper, so the page departs the cosmos,
   travels through the printed city (1850 -> 2027), and returns
   to the cosmos for the odyssey. data-skin="cosmos" restores
   the original Void Cathedral treatment untouched.

   Everything here is additive: no rule outside this file changes.
   ============================================================ */

:root{
  --paper:#EFE3C8;
  --paper-2:#E4D3AE;
  --pink-paper:#F2D9E4;
  --pink-ink:#14100A;
  --acid:#E9FF3D;
  --cyan:#22E0FF;
  --rule:#14100A;
  --halftone:rgba(20,16,10,.20);
}

/* structural markup shared by both skins ------------------- */
.day-strands{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.day-rail{display:flex;flex-direction:column;gap:2px}
.day-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.day-era{opacity:.5}
.sig-list{display:grid;gap:14px;margin-top:54px}
.impact-inner{text-align:center}

/* ============================================================
   PRESS SKIN
   ============================================================ */
html[data-skin="press"] .days,
html[data-skin="press"] .sigs,
html[data-skin="press"] .rhythm,
html[data-skin="press"] .impact{
  background:var(--paper);
  color:var(--rule);
  position:relative;
  isolation:isolate;
}

/* halftone + paper tooth over the whole printed band */
html[data-skin="press"] .days::before,
html[data-skin="press"] .sigs::before,
html[data-skin="press"] .rhythm::before,
html[data-skin="press"] .impact::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(var(--halftone) 1px,transparent 1.35px);
  background-size:5px 5px;
  opacity:.5;
}

/* the press ages as it descends: 1850 paper -> 2027 dusk */
html[data-skin="press"] .days   { background:var(--paper) }
html[data-skin="press"] .sigs   { background:var(--paper-2) }
html[data-skin="press"] .rhythm { background:var(--pink-paper) }
html[data-skin="press"] .impact { background:var(--rule); color:var(--paper) }
html[data-skin="press"] .impact::before{ --halftone:rgba(233,255,61,.22); opacity:.35 }

/* the seams: void -> paper on the way in, paper -> void on the way out */
html[data-skin="press"] .days::after{
  content:'';position:absolute;left:0;right:0;top:0;height:180px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--void),transparent);
}
html[data-skin="press"] .impact::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:200px;z-index:-1;pointer-events:none;
  background:linear-gradient(0deg,var(--void),transparent);
}

/* type inversion inside the printed band ------------------- */
html[data-skin="press"] .days .big,
html[data-skin="press"] .sigs .big,
html[data-skin="press"] .rhythm .big{ color:var(--rule) }
html[data-skin="press"] .days .lede,
html[data-skin="press"] .sigs .lede,
html[data-skin="press"] .rhythm .lede{ color:#3B3225 }
html[data-skin="press"] .days .eyebrow,
html[data-skin="press"] .sigs .eyebrow,
html[data-skin="press"] .rhythm .eyebrow{ color:#7A5C33 }
html[data-skin="press"] .impact .eyebrow{ color:var(--acid) }

/* the gradient wordmark spans become overprint blocks */
html[data-skin="press"] .days .grad,
html[data-skin="press"] .sigs .grad,
html[data-skin="press"] .rhythm .grad{
  background:none;-webkit-text-fill-color:currentColor;color:var(--rule);
  background-color:var(--magenta);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding:.02em .16em;margin:0 -.04em;
  color:#fff;
}

/* ---------- DAY POSTERS ---------------------------------- */
html[data-skin="press"] .days .day-list{margin-top:54px;border-top:3px solid var(--rule)}

html[data-skin="press"] .day{
  display:grid;
  grid-template-columns:92px 1fr 220px;
  align-items:start;
  gap:clamp(16px,3vw,40px);
  padding:34px 0 32px;
  border-bottom:2px solid var(--rule);
  position:relative;
  transition:background-color .35s ease;
}
html[data-skin="press"] .day::before{ display:none }
html[data-skin="press"] .day:hover{ background:rgba(20,16,10,.05); padding-left:0 }

/* each day carries its own spot colour — cycled, poster-style */
html[data-skin="press"] .day:nth-child(1){ --spot:var(--acid) }
html[data-skin="press"] .day:nth-child(2){ --spot:var(--cyan) }
html[data-skin="press"] .day:nth-child(3){ --spot:var(--magenta) }
html[data-skin="press"] .day:nth-child(4){ --spot:var(--orange) }
html[data-skin="press"] .day:nth-child(5){ --spot:#FF2D2D }
html[data-skin="press"] .day:nth-child(6){ --spot:var(--violet) }
html[data-skin="press"] .day:nth-child(7){ --spot:var(--gold) }

html[data-skin="press"] .day-rail{ padding-top:6px }
html[data-skin="press"] .day-n{
  font-family:'Anton';font-size:clamp(2rem,4vw,3.1rem);line-height:1;
  color:var(--rule);letter-spacing:.02em;
}
html[data-skin="press"] .day-dow{
  font-size:10px;letter-spacing:.22em;color:var(--rule);
  background:var(--spot);padding:3px 7px;width:max-content;
}

html[data-skin="press"] .day-theme{
  font-family:'Anton';text-transform:uppercase;
  font-size:clamp(2.1rem,5.2vw,4.2rem);
  line-height:1.1;letter-spacing:.018em;
  color:var(--rule);
  margin:0;
}
html[data-skin="press"] .day-q{
  display:block;                      /* the question is the star, never hover-only */
  font-family:'Fraunces',Georgia,serif;font-style:italic;
  font-size:clamp(1.1rem,2.1vw,1.6rem);
  line-height:1.35;
  color:var(--rule);
  margin-top:12px;
  width:max-content;max-width:100%;
  border-bottom:2px solid var(--spot);
  padding-bottom:4px;
}
html[data-skin="press"] .day-thesis{
  font-size:.95rem;line-height:1.6;color:#3B3225;
  max-width:62ch;margin-top:18px;
}
html[data-skin="press"] .day-strands li{
  font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;
  border:1.5px solid var(--rule);padding:4px 8px;color:var(--rule);
}
html[data-skin="press"] .day-hood{
  font-size:11px;letter-spacing:.14em;color:var(--rule);
  text-transform:uppercase;line-height:1.45;
}
html[data-skin="press"] .day-era{
  font-family:'Anton';font-size:clamp(1.6rem,3vw,2.4rem);
  color:var(--spot);opacity:1;line-height:1;letter-spacing:.02em;
  -webkit-text-stroke:1px var(--rule);
}

/* ---------- SIGNATURE EXPERIENCES ------------------------ */
/* 7 cards, 4 columns, first spans 2 -> both rows resolve exactly. No orphan. */
html[data-skin="press"] .sig-list{ grid-template-columns:repeat(4,1fr) }
html[data-skin="press"] .sig{
  border:2px solid var(--rule);
  background:var(--paper);
  padding:20px 18px 18px;
  display:flex;flex-direction:column;gap:10px;
  position:relative;
}
html[data-skin="press"] .sig:first-child{ grid-column:span 2;background:var(--acid) }
html[data-skin="press"] .sig:nth-child(4){ background:var(--cyan) }
html[data-skin="press"] .sig:nth-child(6){ background:var(--magenta);color:#fff;border-color:var(--rule) }
html[data-skin="press"] .sig:nth-child(6) p,
html[data-skin="press"] .sig:nth-child(6) .sig-hood,
html[data-skin="press"] .sig:nth-child(6) h3{ color:#fff }
html[data-skin="press"] .sig-day{
  font-size:10px;letter-spacing:.22em;color:var(--rule);
  border:1.5px solid currentColor;padding:2px 7px;width:max-content;
}
html[data-skin="press"] .sig h3{
  font-family:'Anton';text-transform:uppercase;
  font-size:clamp(1.25rem,1.9vw,1.75rem);line-height:1.1;letter-spacing:.018em;
  color:var(--rule);
}
html[data-skin="press"] .sig p{ font-size:.88rem;line-height:1.55;color:#3B3225;flex:1 }
html[data-skin="press"] .sig-hood{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--rule);
  border-top:1.5px solid var(--rule);padding-top:10px;margin-top:auto;
}

/* ---------- DAILY RHYTHM --------------------------------- */
html[data-skin="press"] .rhythm-grid{ grid-template-columns:repeat(3,1fr) }
html[data-skin="press"] .beat{
  border:2px solid var(--rule);background:transparent;padding:24px 20px;
}
html[data-skin="press"] .beat-t{
  font-size:10px;letter-spacing:.2em;color:var(--rule);
  background:var(--acid);padding:3px 8px;width:max-content;display:inline-block;
}
html[data-skin="press"] .beat h3{
  font-family:'Anton';text-transform:uppercase;letter-spacing:.018em;
  font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.1;margin-top:14px;color:var(--rule);
}
html[data-skin="press"] .beat p{ color:#3B3225;font-size:.9rem;line-height:1.6;margin-top:10px }
html[data-skin="press"] .debate-ticker{ border-block:2px solid var(--rule);margin-top:48px }
html[data-skin="press"] .debate-ticker span{ color:var(--rule) }
html[data-skin="press"] .tk-dot{ color:var(--magenta) }

/* ---------- THE $1B MOMENT ------------------------------- */
/* the one permitted financial figure, treated as a monument */
.impact{ padding:clamp(80px,12vw,160px) var(--pad) }
.impact-figure{
  font-family:'Anton';line-height:.9;letter-spacing:.01em;
  font-size:clamp(5.5rem,22vw,18rem);
  width:max-content;max-width:100%;margin:18px auto 0;
}
.impact-head{
  font-family:'Anton';text-transform:uppercase;letter-spacing:.05em;
  font-size:clamp(.95rem,2.4vw,1.6rem);line-height:1.2;margin-top:22px;
}
.impact-blurb{ max-width:56ch;margin:26px auto 0;line-height:1.65;font-size:.98rem }

html[data-skin="press"] .impact-figure{ color:var(--acid) }
html[data-skin="press"] .impact-head{ color:var(--paper) }
html[data-skin="press"] .impact-blurb{ color:rgba(239,227,200,.72) }

/* cosmos skin keeps the monument, in the cosmos palette */
html[data-skin="cosmos"] .impact-figure{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
html[data-skin="cosmos"] .impact-head{ color:var(--text) }
html[data-skin="cosmos"] .impact-blurb{ color:var(--dim) }

/* ---------- SKIN SWITCHER -------------------------------- */
/* desktop: a second stack under COSMOS, same column rhythm */
.switcher-row{display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  margin-top:8px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12)}

/* mobile: the switcher is a horizontal pill. Six buttons overflow a 390px
   viewport (measured 436px, silently clipped by body{overflow-x:hidden} —
   which made the skin toggle unreachable on a phone). Let the pill wrap and
   dissolve this row into it so every control stays on screen. */
@media (max-width:760px){
  /* right:50% capped the pill's auto width at half the viewport (195px), which
     forced a wrap. Anchor both edges and size to content so it centres at its
     natural width instead. */
  .switcher{left:0;right:0;transform:none;width:max-content;margin-inline:auto;
    flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 24px)}
  .switcher-row{display:contents}
  /* six controls only fit one row as icons. Letting the active one expand to
     120px pushed the pill to 436px (clipped), and wrapping to three rows
     buried the scroll cue behind it. Icon-only keeps one compact row; the
     active mode still reads via the gradient fill. */
  .switcher button.on{width:36px}
  .switcher button.on i{opacity:0}
}

/* ---------- RESPONSIVE ----------------------------------- */
@media (max-width:1000px){
  html[data-skin="press"] .sig-list{ grid-template-columns:repeat(2,1fr) }
  html[data-skin="press"] .sig:first-child{ grid-column:span 2 }
  html[data-skin="press"] .rhythm-grid{ grid-template-columns:1fr }
}
@media (max-width:760px){
  html[data-skin="press"] .day{
    grid-template-columns:1fr;
    gap:12px;
    padding:26px 0 24px;
  }
  html[data-skin="press"] .day-rail{flex-direction:row;align-items:center;gap:12px;padding-top:0}
  html[data-skin="press"] .day-meta{
    flex-direction:row;align-items:center;justify-content:space-between;
    width:100%;text-align:left;margin-top:6px;
  }
  html[data-skin="press"] .day-q{white-space:normal}
  html[data-skin="press"] .sig-list{ grid-template-columns:1fr }
  html[data-skin="press"] .sig:first-child{ grid-column:span 1 }
}

/* ---------- REDUCED MOTION ------------------------------- */
@media (prefers-reduced-motion:reduce){
  html[data-skin="press"] .day{transition:none}
}

/* ---------- LETTERPRESS CORNERS --------------------------- */
/* the cosmos skin rounds its panels; a printed page does not. */
html[data-skin="press"] .beat,
html[data-skin="press"] .sig,
html[data-skin="press"] .day,
html[data-skin="press"] .debate-ticker,
html[data-skin="press"] .day-q,
html[data-skin="press"] .day-dow,
html[data-skin="press"] .beat-t,
html[data-skin="press"] .sig-day,
html[data-skin="press"] .day-strands li{ border-radius:0 }

/* the feature signature card shouldn't leave a dead pocket */
html[data-skin="press"] .sig:first-child p{ flex:0 1 auto }
html[data-skin="press"] .sig:first-child{ justify-content:flex-start }
html[data-skin="press"] .sig:first-child .sig-hood{ margin-top:auto }

/* the scroll cue sat behind the fixed switcher pill on small screens
   (cue 764-822, pill top 780) — lift it clear of the bar. */
@media (max-width:760px){
  .scroll-cue{bottom:96px}
}

/* ============================================================
   SHARED DAY LAYOUT  (both skins)
   The old .day rules in styles.css were written for the 2026
   markup (number / title / tag). The new markup carries a rail,
   a visible question, a thesis and strand chips — so the layout
   lives here once, and each skin only supplies colour + texture.
   ============================================================ */
html[data-skin] .day{
  display:grid;
  grid-template-columns:92px 1fr 220px;
  align-items:start;
  gap:clamp(16px,3vw,40px);
  padding:34px 0 32px;
}
html[data-skin] .day-q{ display:block }          /* never hover-only */
html[data-skin] .day:hover{ padding-left:0 }

/* ---------- COSMOS SKIN: the void cathedral treatment ------ */
html[data-skin="cosmos"] .day{ border-bottom:1px solid var(--line) }
html[data-skin="cosmos"] .day-rail{ gap:6px }
html[data-skin="cosmos"] .day-n{ color:var(--accent) }
html[data-skin="cosmos"] .day-dow{
  font-size:10px;letter-spacing:.22em;color:var(--dim);
  border:1px solid var(--line);border-radius:40px;
  padding:3px 9px;width:max-content;
}
html[data-skin="cosmos"] .day-theme{
  font-family:'Anton';text-transform:uppercase;
  font-size:clamp(1.8rem,4.4vw,3.2rem);line-height:1.1;letter-spacing:.018em;
  color:var(--text);margin:0;
}
html[data-skin="cosmos"] .day-q{
  font-family:'Fraunces',Georgia,serif;font-style:italic;
  font-size:clamp(1.05rem,2vw,1.45rem);line-height:1.35;
  color:var(--cream);margin-top:10px;
  width:max-content;max-width:100%;
}
html[data-skin="cosmos"] .day-thesis{
  color:var(--dim);font-size:.95rem;line-height:1.6;max-width:62ch;margin-top:16px;
}
html[data-skin="cosmos"] .day-strands li{
  font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line);border-radius:40px;padding:4px 10px;
}
html[data-skin="cosmos"] .day-hood{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);line-height:1.45;
}
html[data-skin="cosmos"] .day-era{
  font-family:'Anton';font-size:clamp(1.4rem,2.6vw,2rem);line-height:1;
  letter-spacing:.02em;opacity:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  width:max-content;
}

/* cosmos signature cards keep the rounded panel language */
html[data-skin="cosmos"] .sig{
  border:1px solid var(--line);border-radius:18px;background:var(--panel);
  padding:24px 20px;display:flex;flex-direction:column;gap:10px;
  transition:transform .4s,border-color .4s;
}
html[data-skin="cosmos"] .sig:hover{ transform:translateY(-6px);border-color:var(--accent) }
html[data-skin="cosmos"] .sig-list{ grid-template-columns:repeat(4,1fr) }
html[data-skin="cosmos"] .sig:first-child{ grid-column:span 2 }
html[data-skin="cosmos"] .sig-day{
  font-size:10px;letter-spacing:.22em;color:var(--accent);
  border:1px solid var(--line);border-radius:40px;padding:2px 9px;width:max-content;
}
html[data-skin="cosmos"] .sig h3{
  font-family:'Anton';text-transform:uppercase;letter-spacing:.018em;
  font-size:clamp(1.2rem,1.8vw,1.6rem);line-height:1.1;color:var(--text);
}
html[data-skin="cosmos"] .sig p{ color:var(--dim);font-size:.88rem;line-height:1.55;flex:1 }
html[data-skin="cosmos"] .sig-hood{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  border-top:1px solid var(--line);padding-top:10px;margin-top:auto;
}

@media (max-width:1000px){
  html[data-skin="cosmos"] .sig-list{ grid-template-columns:repeat(2,1fr) }
  html[data-skin="cosmos"] .sig:first-child{ grid-column:span 2 }
}
@media (max-width:760px){
  html[data-skin] .day{ grid-template-columns:1fr;gap:12px;padding:26px 0 24px }
  html[data-skin] .day-rail{ flex-direction:row;align-items:center;gap:12px }
  html[data-skin] .day-meta{
    flex-direction:row;align-items:center;justify-content:space-between;
    width:100%;text-align:left;margin-top:6px;
  }
  html[data-skin="cosmos"] .sig-list{ grid-template-columns:1fr }
  html[data-skin="cosmos"] .sig:first-child{ grid-column:span 1 }
}

/* ---------- AMBITION vs PROOF ---------------------------- */
/* the $1B is our goal, not a sourced fact — it must never read
   as measured data inside a grid of cited numbers. */
.proof-card.is-ambition{
  border-style:dashed;
  border-color:var(--accent);
  background:transparent;
}
.proof-card.is-ambition::after{
  content:'AMBITION';
  position:absolute;top:10px;right:12px;
  font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.24em;
  color:var(--accent);opacity:.9;
}
.proof-card.is-ambition{position:relative}

/* ============================================================
   READABILITY SCRIM  (cosmos skin)
   The nebula canvas sits at z-index:-3 and cosmos sections are
   fully transparent, so a bright magenta bloom passed directly
   under body copy — day thesis and strand chips became
   unreadable. Each text-dense section now floats on a soft
   plate: solid enough in the middle to guarantee contrast,
   faded at both edges so it reads as light in space rather
   than a rectangle.
   ============================================================ */
html[data-skin="cosmos"] .manifesto,
html[data-skin="cosmos"] .needle,
html[data-skin="cosmos"] .days,
html[data-skin="cosmos"] .sigs,
html[data-skin="cosmos"] .rhythm,
html[data-skin="cosmos"] .impact,
html[data-skin="cosmos"] .billing,
html[data-skin="cosmos"] .invite{
  position:relative;
  isolation:isolate;
}
html[data-skin="cosmos"] .manifesto::before,
html[data-skin="cosmos"] .needle::before,
html[data-skin="cosmos"] .days::before,
html[data-skin="cosmos"] .sigs::before,
html[data-skin="cosmos"] .rhythm::before,
html[data-skin="cosmos"] .impact::before,
html[data-skin="cosmos"] .billing::before,
html[data-skin="cosmos"] .invite::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(5,5,11,0) 0,
    rgba(5,5,11,.80) 110px,
    rgba(5,5,11,.80) calc(100% - 110px),
    rgba(5,5,11,0) 100%);
}

/* body copy over a live nebula needs more than --dim (#9a93b0) */
html[data-skin="cosmos"] .day-thesis,
html[data-skin="cosmos"] .sig p,
html[data-skin="cosmos"] .beat p{ color:#C3BDD2 }
html[data-skin="cosmos"] .day-strands li,
html[data-skin="cosmos"] .day-hood,
html[data-skin="cosmos"] .sig-hood{
  color:#BDB6CC;
  border-color:rgba(255,255,255,.22);
  background:rgba(5,5,11,.45);
}
html[data-skin="cosmos"] .day-dow{
  color:#D6D1E2;border-color:rgba(255,255,255,.22);background:rgba(5,5,11,.45);
}

/* The press band is opaque paper, so it needs no scrim. Its seam
   gradients stay at z-index:-1: .days/.impact isolate, so -1 paints
   above their own background but BELOW in-flow text. (z-index:0 would
   put the void wash on top of the heading.) */

/* The era ladder ends at 3060 in the void, then the signature spread
   returns to paper. Crossfade in the empty strip AFTER the last day —
   fading the top of .sigs instead would bury its dark heading. */
html[data-skin="press"] .day-list::after{
  content:'';
  display:block;
  height:180px;
  margin-inline:calc(var(--pad) * -1);
  background:linear-gradient(180deg,#05050B 0%, #1A1426 42%, var(--paper-2) 100%);
}

/* ============================================================
   THE ERA LADDER — SF's visual history, one day per epoch
   ------------------------------------------------------------
   The style-guide brief asks for "the entire cultural history of
   San Francisco compressed into a transmission from the future"
   — 1850 → 3060, each subculture leaving a visual layer behind.
   Each .day carries data-era, so the press band changes its
   printing technology as you descend:

     1850  Victorian / Gold Rush broadsheet — engraved, ornamental
     1950  Beat / jazz poster — austere, high-contrast, typewriter
     1967  Haight psychedelia — melted type, saturated collision
     1999  Xerox zine + rave flyer — photocopy blowout, neon on black
     2027  the present — clean editorial grid, forensic (CONFLICT)
     2050  solarpunk — luminous, botanical, organic
     3060  the impossible — void + spectrum, handing back to the odyssey

   Every row bleeds edge-to-edge so the era owns the full band.
   ============================================================ */
html[data-skin="press"] .day{
  margin-inline:calc(var(--pad) * -1);
  padding-inline:var(--pad);
  transition:background-color .5s ease;
}
html[data-skin="press"] .day-theme{ transition:color .4s ease }

/* ---------- 1850 · VICTORIAN / GOLD RUSH ------------------ */
html[data-skin="press"] .day[data-era="1850"]{
  background:#EFE3C8;
  border-bottom:6px double #2B1F10;
  --ink-era:#2B1F10;
}
html[data-skin="press"] .day[data-era="1850"] .day-theme{
  font-family:'Fraunces',Georgia,serif;font-weight:700;font-style:normal;
  letter-spacing:.005em;color:#2B1F10;
}
html[data-skin="press"] .day[data-era="1850"] .day-theme::after{
  content:' ✦';font-size:.45em;vertical-align:.5em;color:#8A6A2F;
}
html[data-skin="press"] .day[data-era="1850"] .day-thesis{ color:#4A3A22 }

/* ---------- 1950 · BEAT / JAZZ POSTER --------------------- */
html[data-skin="press"] .day[data-era="1950"]{
  background:#F4F2EA;
  border-bottom:2px solid #111;
  --ink-era:#111;
}
html[data-skin="press"] .day[data-era="1950"] .day-theme{
  color:#111;transform:rotate(-1.4deg);transform-origin:left center;
}
html[data-skin="press"] .day[data-era="1950"] .day-q{
  font-family:'Space Mono',monospace;font-style:normal;font-size:clamp(.95rem,1.7vw,1.25rem);
}
html[data-skin="press"] .day[data-era="1950"] .day-thesis{ color:#2C2C2C }

/* ---------- 1967 · HAIGHT PSYCHEDELIA --------------------- */
html[data-skin="press"] .day[data-era="1967"]{
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(255,60,172,.92) 0%, rgba(255,90,31,.88) 38%, rgba(233,255,61,.85) 72%, rgba(34,224,255,.8) 100%);
  border-bottom:3px solid #2B0A1E;
  --ink-era:#2B0A1E;
}
html[data-skin="press"] .day[data-era="1967"] .day-theme{
  color:#2B0A1E;transform:skewX(-5deg) scaleY(1.12);transform-origin:left bottom;
  text-shadow:2px 2px 0 rgba(255,255,255,.5);
}
html[data-skin="press"] .day[data-era="1967"] .day-q,
html[data-skin="press"] .day[data-era="1967"] .day-thesis,
html[data-skin="press"] .day[data-era="1967"] .day-hood{ color:#2B0A1E }
html[data-skin="press"] .day[data-era="1967"] .day-strands li{
  border-color:#2B0A1E;color:#2B0A1E;background:rgba(255,255,255,.28);
}
html[data-skin="press"] .day[data-era="1967"] .day-n{ color:#2B0A1E }

/* ---------- 1999 · XEROX ZINE / RAVE FLYER ---------------- */
html[data-skin="press"] .day[data-era="1999"]{
  background:#0C0C0E;
  border-bottom:2px solid #E9FF3D;
  --ink-era:#E9FF3D;
  isolation:isolate;   /* so the z-index:-1 halftone lands ABOVE this background */
}
html[data-skin="press"] .day[data-era="1999"]::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(233,255,61,.30) 1px,transparent 1.4px);
  background-size:4px 4px;
}
html[data-skin="press"] .day[data-era="1999"] .day-theme{
  color:#E9FF3D;text-shadow:2px 0 0 #FF3CAC, -2px 0 0 #22E0FF;   /* misregistered plates */
}
html[data-skin="press"] .day[data-era="1999"] .day-q{ color:#F4F2EA }
html[data-skin="press"] .day[data-era="1999"] .day-thesis{ color:#C9C6BC }
html[data-skin="press"] .day[data-era="1999"] .day-n{ color:#E9FF3D }
html[data-skin="press"] .day[data-era="1999"] .day-hood{ color:#C9C6BC }
html[data-skin="press"] .day[data-era="1999"] .day-strands li{
  border-color:rgba(233,255,61,.5);color:#E9FF3D;
}

/* ---------- 2027 · THE PRESENT (forensic, clean) ---------- */
html[data-skin="press"] .day[data-era="2027"]{
  background:#E6E6E4;
  border-bottom:1px solid #1A1A1A;
  --ink-era:#1A1A1A;
}
html[data-skin="press"] .day[data-era="2027"] .day-theme{ color:#1A1A1A;letter-spacing:.03em }
html[data-skin="press"] .day[data-era="2027"] .day-thesis{ color:#3A3A3A }
html[data-skin="press"] .day[data-era="2027"] .day-strands li{ border-color:#1A1A1A;color:#1A1A1A }

/* ---------- 2050 · SOLARPUNK ------------------------------ */
html[data-skin="press"] .day[data-era="2050"]{
  background:linear-gradient(160deg,#0B1A14 0%,#123024 55%,#1B4231 100%);
  border-bottom:2px solid #27E5A6;
  --ink-era:#27E5A6;
}
html[data-skin="press"] .day[data-era="2050"] .day-theme{
  color:#EAF7EF;text-shadow:0 0 26px rgba(39,229,166,.55);
}
html[data-skin="press"] .day[data-era="2050"] .day-q{ color:#27E5A6 }
html[data-skin="press"] .day[data-era="2050"] .day-thesis{ color:#BFD9CC }
html[data-skin="press"] .day[data-era="2050"] .day-n{ color:#27E5A6 }
html[data-skin="press"] .day[data-era="2050"] .day-hood{ color:#BFD9CC }
html[data-skin="press"] .day[data-era="2050"] .day-strands li{
  border-color:rgba(39,229,166,.45);color:#CFEADF;
}

/* ---------- 3060 · THE IMPOSSIBLE ------------------------- */
/* hands the page back to the cosmos for the odyssey below */
html[data-skin="press"] .day[data-era="3060"]{
  background:
    radial-gradient(1.2px 1.2px at 14% 26%,#fff,transparent),
    radial-gradient(1px 1px at 71% 18%,#cfd6ff,transparent),
    radial-gradient(1.3px 1.3px at 86% 64%,#fff,transparent),
    radial-gradient(1px 1px at 37% 77%,#ffd9a8,transparent),
    linear-gradient(180deg,#0A0714 0%,#05050B 100%);
  border-bottom:none;
  --ink-era:#FFC21A;
}
html[data-skin="press"] .day[data-era="3060"] .day-theme{
  background:linear-gradient(100deg,#2E7CF6,#7A4DFF,#FF3CAC,#FF5A1F,#FFC21A);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  width:max-content;max-width:100%;
}
html[data-skin="press"] .day[data-era="3060"] .day-q{ color:#F4ECDD }
html[data-skin="press"] .day[data-era="3060"] .day-thesis{ color:#B9B3C9 }
html[data-skin="press"] .day[data-era="3060"] .day-n{ color:#FFC21A }
html[data-skin="press"] .day[data-era="3060"] .day-hood{ color:#B9B3C9 }
html[data-skin="press"] .day[data-era="3060"] .day-strands li{
  border-color:rgba(255,255,255,.28);color:#CFC9DA;
}

/* era numeral + weekday chip follow their epoch's ink */
html[data-skin="press"] .day .day-era{ -webkit-text-stroke:1px var(--ink-era,#14100A) }
html[data-skin="press"] .day[data-era="1999"] .day-era,
html[data-skin="press"] .day[data-era="2050"] .day-era,
html[data-skin="press"] .day[data-era="3060"] .day-era{ -webkit-text-stroke:0 }

html[data-skin="press"] .day:hover{ background-blend-mode:normal }

@media (prefers-reduced-motion:reduce){
  html[data-skin="press"] .day,
  html[data-skin="press"] .day-theme{ transition:none }
  html[data-skin="press"] .day[data-era="1950"] .day-theme,
  html[data-skin="press"] .day[data-era="1967"] .day-theme{ transform:none }
}

/* the fade strip must meet .sigs directly — .days' own bottom padding
   left a band of lighter --paper between the crossfade and --paper-2. */
html[data-skin="press"] .days{ padding-bottom:0 }