:root {
  --paper: #f4f4f4;
  --ink: #000000;
  --ink-soft: #2a2a2a;
  --gray: #8c8c8c;
  --line: #000000;
  --panel: #000000;
  --panel-text: #ffffff;
  --accent: #0000ff;
  --tile: #ececec;
  --mono: ui-monospace, 'SF Mono', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--mono);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
}

a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration: underline; }

::selection { background: var(--accent); color: #fff; }

.wrap { width: 100%; margin: 0; background: var(--paper); }

/* ===== Masthead (newspaper banner) — pinned to the top while scrolling ===== */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 10px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.masthead .brand { display: flex; align-items: baseline; gap: 12px; }
.masthead .logo {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.masthead .issue { font-size: 11px; color: var(--gray); text-transform: uppercase; }
.masthead .meta { font-size: 11px; color: var(--gray); text-transform: uppercase; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.masthead .meta a { color: var(--ink); }
.print-btn {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  padding: 3px 9px;
  cursor: pointer;
}
.print-btn:hover { background: var(--ink); color: var(--paper); }

/* ===== Hero headline band ===== */
.headline {
  border-bottom: 1px solid var(--line);
  padding: 36px 18px 30px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: end;
}
.headline h1 {
  font-size: 52px;
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-transform: none;
}
.headline .lede {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  border-left: 1px solid var(--line);
  padding-left: 16px;
}

/* ===== Stat strip ===== */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
}
.stats .stat { padding: 14px 18px; border-right: 1px solid var(--line); }
.stats .stat:last-child { border-right: none; }
.stats .num { font-size: 30px; font-weight: 400; letter-spacing: -0.04em; line-height: 1; }
.stats .lbl { font-size: 11px; text-transform: uppercase; color: var(--gray); margin-top: 4px; }

/* ===== Body: left rail + main column (asymmetric newspaper) ===== */
.body {
  display: grid;
  grid-template-columns: 240px 1fr;
}
.rail {
  position: sticky;
  top: 47px;
  align-self: start;
  max-height: calc(100vh - 47px);
  overflow-y: auto;
  padding: 14px 16px 16px;
}
.rail-mark {
  width: 26px; height: 26px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.rail-edition {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}
.rail-tagline {
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 12px;
}
/* ===== Retro radio (Boring / Not boring) ===== */
.mode-radio { margin-bottom: 12px; }
.radio-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: -0.01em;
}
.radio-row input { position: absolute; opacity: 0; pointer-events: none; }
.radio-dot {
  width: 15px; height: 15px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  background: var(--paper);
}
.radio-row input:checked + .radio-dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent);
}
.radio-row input:focus-visible + .radio-dot { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== Shadow-bordered media card (retro) ===== */
/* The thumb + caption are one unit: a single border + one offset shadow on the
   wrapper, so the shadow never appears between them. */
.media-card {
  margin: 0 0 12px;
  width: 130px;
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}
.media-thumb {
  background: #d8d4cc;
  aspect-ratio: 16 / 11;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 2px solid var(--ink);
}
.media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-placeholder {
  font-family: var(--mono);
  font-size: 44px;
  font-weight: 500;
  color: #6a655c;
}
.media-cap {
  display: block;
  text-align: center;
  padding: 5px 0;
  font-size: 12px;
  color: var(--accent);
  background: var(--paper);
}
.media-cap:hover { text-decoration: underline; }

.rail-nav { list-style: none; margin-bottom: 12px; }
.rail-nav li a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
  color: var(--accent);
}
.rail-nav li a:hover { text-decoration: underline; }
.rail-nav li a .n { color: var(--gray); font-size: 11px; }
.rail-contact { font-size: 11px; line-height: 1.55; margin-bottom: 10px; }
.rail-contact a { color: var(--accent); }
/* Retro raised button: light gray fill, beveled outset border, printer icon. */
.rail-print {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: #d4d0c8;
  border: 1px solid;
  border-color: #fff #808080 #808080 #fff;   /* outset bevel: light top/left, dark bottom/right */
  box-shadow: inset 1px 1px 0 #f2f0ec, inset -1px -1px 0 #a8a4a0, 2px 2px 0 rgba(0,0,0,0.18);
  padding: 5px 14px 5px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.rail-print:active {
  border-color: #808080 #fff #fff #808080;    /* invert bevel when pressed */
  box-shadow: inset 1px 1px 0 #a8a4a0, inset -1px -1px 0 #f2f0ec;
  padding: 6px 13px 4px 11px;
}
/* Tiny pixel printer icon */
.print-ico {
  width: 16px; height: 13px; position: relative; flex-shrink: 0;
}
.print-ico::before {            /* printer body */
  content: ''; position: absolute; left: 0; top: 4px; width: 16px; height: 6px;
  background: #b8b4ae; border: 1px solid #555;
}
.print-ico::after {             /* paper out the top + tray */
  content: ''; position: absolute; left: 3px; top: 0; width: 10px; height: 4px;
  background: #fff; border: 1px solid #555;
  box-shadow: 0 9px 0 -1px #fff, 0 9px 0 #555;   /* output tray at the bottom */
}

.main { min-width: 0; padding: 0 40px 36px; }

/* ===== Intro: who-am-I in bullets ===== */
.intro { padding-top: 6px; }
.intro-label {
  font-size: 13px;
  letter-spacing: -0.02em;
  padding: 18px 0 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
}
.intro-label .rule { flex: 1; height: 1px; background: transparent; }
.intro-bullets { list-style: none; }
.intro-bullets li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.4;
  max-width: 760px;
}
.intro-bullets li::before {
  content: '•';
  position: absolute;
  left: 4px;
  color: var(--ink);
}

/* ===== Section labels: thin rule + small heading (no black bar) ===== */
.section-label {
  font-size: 13px;
  text-transform: none;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding: 22px 0 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.section-label .count { color: var(--gray); font-size: 11px; }
.section-label .label-text { display: inline-flex; align-items: center; gap: 7px; }
.bookmark { vertical-align: middle; }
.bookmark path { fill: #f5b942; stroke: var(--ink); stroke-width: 1; }

/* ===== Columns: whitespace gutters, NO card borders ===== */
/* Masonry / newspaper flow: cards fill columns by height, so rows don't
   start at the same baseline. CSS multi-column does this naturally. */
/* Masonry: cards flow into columns by height for a compact, gap-free fill
   (like the reference). Trade-off: rows don't share a top baseline. */
.grid {
  column-count: 5;
  column-gap: 20px;
  margin-bottom: 8px;
}
@media (max-width: 1280px) { .grid { column-count: 4; } }
@media (max-width: 1040px) { .grid { column-count: 3; } }
@media (max-width: 780px) { .grid { column-count: 2; } }
@media (max-width: 480px) { .grid { column-count: 1; } }


.grid .card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  break-inside: avoid;          /* a card never splits across columns */
  margin-bottom: 18px;          /* tight vertical rhythm */
}
.card .topline { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.card .num-tag {
  font-size: 10px;
  color: var(--gray);
  letter-spacing: 0;
  white-space: nowrap;
}
.card .live {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--accent);
}
.card .live::before { content: '● '; }
.card .cat { font-size: 10px; text-transform: uppercase; color: var(--gray); margin-bottom: 5px; }
/* The headline IS the link — blue, like newspaper section links */
.card .title {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 8px;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.card .desc {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
}
/* Product screenshot — uniform size, framed with a hard offset shadow so it
   floats off the card (like the reference). */
.card .card-figure {
  margin: 12px 8px 14px 0;
  border: 1.5px solid var(--line);
  background: #fff;
  overflow: hidden;
  aspect-ratio: 4 / 3;            /* taller frame shows more of each shot, still uniform */
  box-shadow: 6px 6px 0 var(--ink);
}
.card .card-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;              /* fill the frame uniformly, crop overflow */
  object-position: top center;    /* keep the top of the screenshot */
}
.card .meta {
  margin-top: 10px;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--gray);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.card .links { margin-top: 8px; display: flex; gap: 12px; font-size: 11px; text-transform: uppercase; }
.card .links a::after { content: ' →'; }

/* Featured = same column treatment, just slightly larger headline, spans 2 */
.grid .card.feat { grid-column: span 2; }
.grid .card.feat .title { font-size: 22px; line-height: 1.06; }
@media (max-width: 480px) { .grid .card.feat { grid-column: auto; } }

.empty { padding: 40px 0; text-transform: uppercase; font-size: 12px; color: var(--gray); }

/* ===== Footer (colophon) ===== */
.colophon {
  border-top: 1px solid var(--line);
  padding: 16px 40px;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--gray);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.colophon a { color: var(--ink); }

/* Below 920px: rail moves above the main column */
/* On phones the rail stacks on top — keep it compact so content is close. */
@media (max-width: 920px) {
  .body { grid-template-columns: 1fr; }
  .rail {
    position: static;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 14px 18px;
  }
  .rail-edition { font-size: 18px; margin-bottom: 6px; }
  .rail-tagline { margin-bottom: 10px; }
  /* Avatar + radio side by side instead of stacked. */
  .rail-mark { display: none; }
  /* Media card floats next to the radio so neither eats a full row. */
  .media-card { width: 84px; margin: 0 0 10px 14px; float: right; }
  .mode-radio { display: flex; gap: 18px; margin-bottom: 10px; }
  /* Category links flow as horizontal chips, wrapping — not one row each. */
  .rail-nav { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
  .rail-nav li a {
    padding: 5px 10px;
    border: 1px solid var(--line);
    font-size: 12px;
  }
  .rail-nav li a:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
  .rail-contact { margin-bottom: 10px; }
}
@media (max-width: 860px) {
  .wrap { border-left: none; border-right: none; }
}
@media (max-width: 480px) {
  .masthead { padding: 10px 14px; }
  .masthead .meta { font-size: 10px; }
  .intro-bullets li { font-size: 13px; }
}

/* ===== "Not boring" — faux e-ink magazine ===== */
body.mode-notboring .main { display: none; }
body.mode-notboring .body { grid-template-columns: 210px 1fr; position: relative; min-height: calc(100vh - 48px); }
#eink[hidden] { display: none; }

body.mode-notboring #eink {
  position: absolute;
  top: 0; left: 210px; right: 0; bottom: 0;
  border-left: 1px solid var(--line);
  background: #c8c9c4;
  display: flex; align-items: center; justify-content: center;
  padding: 28px 22px;
  overflow: hidden;            /* whole reader fits one screen — no page scroll */
}

/* The e-reader device — sized a bit smaller than the area so it fits one
   screen with visible outer margin all around. */
.eink-device {
  width: 100%;
  max-width: 680px;
  height: 86%;                 /* smaller than the area → margin shows above & below */
  max-height: 720px;
  display: flex; flex-direction: column;
  background: #1b1b1a;
  border-radius: 16px;
  padding: 16px 18px 10px;
  box-shadow: 0 10px 36px rgba(0,0,0,0.35), inset 0 0 0 2px #2c2c2a;
}
.eink-screen {
  position: relative;
  flex: 1;                     /* fill the space between the bezel top and the controls */
  min-height: 0;
  background: #d9dad3;
  /* e-ink dither: faint checkerboard so the "paper" reads as a grayscale panel */
  background-image:
    repeating-conic-gradient(#d2d3cc 0% 25%, #dcddd6 0% 50%);
  background-size: 3px 3px;
  color: #161614;
  filter: contrast(1.06) grayscale(1);
  border: 1px solid #b9bab3;
  overflow-y: auto;            /* if a single page is taller, it scrolls inside the screen only */
}
.eink-page { padding: 34px 38px; min-height: 100%; }
/* E-ink refresh overlay: a hard-edged panel that flickers black/white like
   real e-paper particles flipping, driven by the .refresh keyframes. */
.eink-flash {
  position: absolute; inset: 0; background: #161614; opacity: 0;
  pointer-events: none; z-index: 5;
}
/* One soft gray sweep — a single gentle dim, no repeated black flashing. */
.eink-flash.on { animation: einkFlash 240ms steps(2, end) forwards; }
@keyframes einkFlash {
  0%   { opacity: 0;    background: #6f706b; }
  40%  { opacity: 0.5;  background: #6f706b; }  /* dim to soft gray, not black */
  100% { opacity: 0;    background: #6f706b; }  /* settle */
}
/* Page ink dissolves and re-forms — no sliding, just fade out → fade in. */
.eink-page { transition: opacity 0.14s steps(3, end), filter 0.14s steps(3, end); }
.eink-page.fading-out { opacity: 0; filter: blur(0.4px); }
.eink-page.fading-in {
  opacity: 1;
  animation: einkInk 0.3s ease-out;
}
@keyframes einkInk {
  0%   { opacity: 0.1; filter: blur(0.5px); }
  100% { opacity: 1;   filter: none; }
}

.eink-bezel-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 6px 4px; color: #cfcfca;
}
.eink-btn {
  font-family: var(--mono); font-size: 13px; letter-spacing: -0.01em;
  background: #2c2c2a; color: #e8e8e3; border: 1px solid #3c3c39;
  padding: 7px 16px; border-radius: 8px; cursor: pointer;
}
.eink-btn:hover:not(:disabled) { background: #3a3a37; }
.eink-btn:disabled { opacity: 0.35; cursor: default; }
.eink-counter { font-family: var(--mono); font-size: 12px; color: #b6b6b1; }

/* ---- A page ---- (no slide; the fade lives on .eink-page) */
.pg { animation: none; }

.pg-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1.5px solid #161614; padding-bottom: 6px; margin-bottom: 18px;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
}
.pg-folio { color: #5c5c58; }
.pg-section { font-weight: 500; }
.pg-title { font-size: 30px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.04; margin-bottom: 16px; }

.pg a { color: #161614; text-decoration: underline; text-underline-offset: 2px; }

/* Cover */
.pg-cover { text-align: left; display: flex; flex-direction: column; min-height: 520px; }
.pg-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: #5c5c58; margin-bottom: 22px; }
.pg-cover-title { font-size: 76px; font-weight: 500; line-height: 0.92; letter-spacing: -0.05em; margin-bottom: 22px; }
.pg-cover-sub { font-size: 16px; line-height: 1.5; max-width: 460px; margin-bottom: 26px; }
.pg-cover-stats { display: flex; gap: 26px; font-size: 14px; margin-bottom: auto; }
.pg-cover-stats b { font-size: 22px; font-weight: 500; }
.pg-cover-by { font-size: 13px; color: #4a4a47; margin-top: 30px; }
.pg-turn-hint { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: #6a6a66; margin-top: 14px; }

/* About bullets */
.pg-bullets { list-style: none; max-width: 600px; }
.pg-bullets li { position: relative; padding-left: 22px; margin-bottom: 13px; font-size: 16px; line-height: 1.55; }
.pg-bullets li::before { content: '—'; position: absolute; left: 0; }
.pg-foot { margin-top: 22px; font-size: 14px; }

/* Category entries — magazine two-column */
.pg-entries {
  column-count: 2; column-gap: 30px;
}
@media (max-width: 620px) { .pg-entries { column-count: 1; } }
.e-entry {
  display: block; break-inside: avoid; margin-bottom: 20px;
  padding-bottom: 16px; border-bottom: 1px solid #b6b7b0;
  text-decoration: none !important;
}
.e-entry:last-child { border-bottom: none; }
.e-entry-top { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.e-entry-title { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; text-decoration: underline; text-underline-offset: 2px; }
.e-entry:hover .e-entry-title { background: #161614; color: #d9dad3; text-decoration: none; }
.e-live { font-size: 11px; text-transform: uppercase; color: #2a2a28; white-space: nowrap; }
.e-entry-desc { font-size: 13.5px; line-height: 1.5; margin: 6px 0 8px; color: #1f1f1d; }
.e-entry-meta { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: #5c5c58; }

/* Colophon */
.pg-colophon p { font-size: 15px; line-height: 1.6; margin-bottom: 14px; max-width: 520px; }

@media (max-width: 920px) {
  body.mode-notboring .body { grid-template-columns: 1fr; min-height: 0; }
  body.mode-notboring #eink {
    position: static; left: auto; right: auto; top: auto; bottom: auto;
    border-left: none; padding: 14px;
  }
  .eink-screen { padding: 22px 20px; min-height: 70vh; }
  .pg-cover-title { font-size: 52px; }
  .pg-entries { column-count: 1; }
}

/* ===== Love from the community: tweet embeds ===== */
.community { margin-top: 14px; }
.community .follow-link { font-size: 12px; color: var(--accent); }
.tweet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  align-items: start;
}
.tweet-cell { min-width: 0; }
.tweet-cell .twitter-tweet { margin: 0 !important; }
.tweet-fallback {
  display: block;
  border: 1px solid var(--line);
  padding: 14px 16px;
  font-size: 12px;
  color: var(--accent);
}
.tweet-fallback:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.community .section-label { flex-wrap: wrap; gap: 8px; }