/* ═══════════════════════════════════════════════════════════
   THE SIDHARDH TIMES
   A broadsheet front page. Newsprint palette, hairline rules,
   real columns — with a noir engraving that moves.
   ═══════════════════════════════════════════════════════════ */

:root {
    --paper:      #f0eadb;
    --paper-warm: #e8e0cd;
    --ink:        #16140f;
    --ink-soft:   #46402f;
    --ink-faint:  #7b7360;
    --rule:       #16140f;
    --rust:       #b93c12;   /* accent, from the noir reference */
    --navy:       #1d2c3c;
    --highlight:  #fdff32;

    --serif:  "Libre Baskerville", Georgia, serif;
    --display:"Playfair Display", Georgia, serif;
    --black:  "UnifrakturMaguntia", serif;
    --type:   "Special Elite", "Courier New", monospace;

    --sheet: 1220px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 2rem; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

::selection { background: var(--highlight); color: var(--ink); }

a { color: inherit; text-decoration: none; }

/* ═════════ THE PRESS RUN (opening animation) ═════════ */
.press {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: grid;
    place-items: center;
    /* A dark press room, so the cream sheet reads against it. */
    background: #14120e;
    cursor: pointer;
    animation: pressLift 2.5s var(--ease) forwards;
}

/* The whole overlay drops away at the end. */
@keyframes pressLift {
    0%, 78%  { opacity: 1; }
    100%     { opacity: 0; visibility: hidden; }
}

.press-sheet {
    width: min(84vw, 460px);
    padding: 1.1rem 1.3rem 1.4rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
    text-align: center;
    transform-origin: 50% 50%;
    animation: pressSpin 2.5s var(--ease) forwards;
}

/*
  Spins out of the press, lands with a bounce, then rushes the reader.
  Opacity is held at 1 through 78% on purpose — declaring it only at the ends
  makes it interpolate the whole way down and the sheet arrives already faded.
*/
@keyframes pressSpin {
    0%   { transform: scale(0.04) rotate(-1000deg); opacity: 0; }
    8%   { opacity: 1; }
    52%  { transform: scale(1) rotate(0deg); opacity: 1; }
    60%  { transform: scale(0.96) rotate(0deg); opacity: 1; }
    68%  { transform: scale(1) rotate(0deg); opacity: 1; }
    78%  { transform: scale(1) rotate(0deg); opacity: 1; }
    100% { transform: scale(1.7) rotate(0deg); opacity: 0; }
}

.press-ears {
    display: flex;
    justify-content: space-between;
    font-family: var(--type);
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--rule);
    padding-bottom: 0.3rem;
}
.press-name {
    font-family: var(--black);
    font-size: clamp(1.5rem, 6vw, 2.5rem);
    line-height: 1.05;
    padding: 0.35rem 0 0.2rem;
}
.press-extra {
    font-family: var(--type);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--rust);
    border-top: 1px solid var(--rule);
    border-bottom: 3px double var(--rule);
    padding: 0.28rem 0;
}
.press-hd {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(1.05rem, 4vw, 1.6rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    padding: 0.7rem 0 0.6rem;
}
/* Fake column rules, so the sheet reads as a page even at a glance. */
.press-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.press-cols span {
    height: 34px;
    background: repeating-linear-gradient(
        to bottom,
        var(--ink-faint) 0 1px,
        transparent 1px 5px
    );
    opacity: 0.4;
}

/* Newsprint tooth. */
.paper-grain {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: 0.35;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.sheet {
    max-width: var(--sheet);
    margin: 0 auto;
    padding: 0 clamp(0.9rem, 3vw, 2.4rem) 3rem;
}

hr.rule-thin  { border: 0; border-top: 1px solid var(--rule); margin: 0.85rem 0; opacity: 0.55; }
hr.rule-thick { border: 0; border-top: 3px double var(--rule); margin: 1.4rem 0 0.9rem; }

/* ── Reveal ── */
[data-r] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
    transition-delay: calc(var(--d, 0) * 110ms);
}
[data-r].in { opacity: 1; transform: none; }

/* ═════════ MASTHEAD ═════════ */
.masthead { padding-top: 1.1rem; }

.ears {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-family: var(--type);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    text-transform: uppercase;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--rule);
}
.ear-mid { font-style: italic; text-transform: none; letter-spacing: 0; }

.nameplate {
    font-family: var(--black);
    font-weight: 400;
    font-size: clamp(2.7rem, 9.5vw, 7.6rem);
    line-height: 1;
    text-align: center;
    letter-spacing: 0.01em;
    padding: 0.5rem 0 0.35rem;
    /* faint ink-press wobble */
    text-shadow: 0.5px 0 0 rgba(22, 20, 15, 0.22);
}

.dateline {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--type);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    padding: 0.4rem 0;
    border-top: 1px solid var(--rule);
    border-bottom: 3px double var(--rule);
}
.dateline .dot { opacity: 0.45; }
.dateline .wx { font-style: italic; text-transform: none; }

.nav-rules {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.6rem;
    padding: 0.6rem 0 0.7rem;
    border-bottom: 1px solid var(--rule);
    font-family: var(--type);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}
.nav-rules a { padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color 0.25s, color 0.25s; }
.nav-rules a:hover { border-bottom-color: var(--ink); }
.nav-rules .nav-play { color: var(--rust); font-weight: 700; }
.nav-rules .nav-play:hover { border-bottom-color: var(--rust); }

/* ═════════ FRONT PAGE ═════════ */
.front {
    display: grid;
    grid-template-columns: 0.85fr 1.5fr 0.9fr;
    gap: 0;
    padding-top: 1.4rem;
}
.col { padding: 0 1.5rem; }
.col-lead { border-right: 1px solid var(--rule); padding-left: 0; }
.col-side { border-left: 1px solid var(--rule); padding-right: 0; }

.kicker {
    display: inline-block;
    font-family: var(--type);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rust);
    border: 1px solid var(--rust);
    padding: 0.15rem 0.5rem;
    margin-bottom: 0.6rem;
}

.hd-lead {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
}
.byline {
    font-family: var(--type);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
    margin-top: 0.5rem;
}

.body { font-size: 0.9rem; line-height: 1.68; margin-bottom: 0.75rem; text-align: justify; hyphens: auto; }
.body em { font-style: italic; }

/* Drop cap, set solid like a printed page. */
.drop::first-letter {
    float: left;
    font-family: var(--display);
    font-weight: 900;
    font-size: 3.5em;
    line-height: 0.78;
    padding: 0.06em 0.1em 0 0;
    color: var(--ink);
}

.jump {
    font-family: var(--type);
    font-size: 0.74rem;
    font-style: italic;
    color: var(--ink-soft);
    border-top: 1px solid var(--rule);
    padding-top: 0.5rem;
}
.jump a { border-bottom: 1px solid var(--rust); color: var(--rust); }

/* ── The engraving ── */
.scene-figure { margin-bottom: 1rem; }
.scene-frame {
    /* Must be positioned: the ::after print screen is absolute, and without a
       positioned ancestor it escapes the frame and tiles across the whole page. */
    position: relative;
    border: 1px solid var(--rule);
    padding: 6px;
    background: var(--paper-warm);
    overflow: hidden;
}
.scene-img {
    display: block;
    width: 100%;
    height: auto;
    /* Sit the plate on the page: slightly desaturated and contrast-lifted so the
       colour artwork reads as printed ink rather than a screenshot. */
    filter: contrast(1.06) saturate(0.9);
}
.scene-figure figcaption {
    font-family: var(--type);
    font-size: 0.7rem;
    line-height: 1.5;
    color: var(--ink-soft);
    padding-top: 0.45rem;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 0.5rem;
}
.scene-figure figcaption strong { color: var(--ink); }

/* Plate motion: the whole scene drifts a touch with the pointer. */
.scene-img { transition: transform 0.5s var(--ease), filter 0.4s var(--ease); will-change: transform; }
.scene-frame:hover .scene-img { filter: contrast(1.12) saturate(1); }

.hd-main {
    font-family: var(--display);
    font-weight: 900;
    /* Sized for a long two-line pull quote, not a short one. */
    font-size: clamp(1.35rem, 2.5vw, 2.05rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-align: center;
    padding: 0.6rem 0 0.5rem;
    text-wrap: balance;
}
.standfirst {
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(0.95rem, 1.3vw, 1.15rem);
    text-align: center;
    color: var(--ink-soft);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 0.55rem 0;
}

/* ── Portrait plate ── */
.portrait { border-bottom: 1px solid var(--rule); padding-bottom: 0.6rem; }
.portrait picture {
    display: block;
    border: 1px solid var(--rule);
    background: var(--paper-warm);
}
.portrait img {
    display: block;
    width: 100%;
    height: auto;
    /* The engraving carries its own near-white ground. Multiplying drops that
       ground out so the ink sits on the actual newsprint instead of on a pale
       rectangle pasted over it. */
    mix-blend-mode: multiply;
    transition: filter 0.4s var(--ease);
}
.portrait:hover img { filter: contrast(1.1); }
.portrait figcaption {
    font-family: var(--type);
    font-size: 0.7rem;
    line-height: 1.5;
    color: var(--ink-soft);
    padding-top: 0.45rem;
}

.factbox {
    border: 1px solid var(--rule);
    border-top: 4px solid var(--ink);
    padding: 0.9rem 1rem;
    margin-top: 1rem;
    background: var(--paper-warm);
}
.factbox h3 {
    font-family: var(--type);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-align: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 0.5rem;
}
.factbox dl div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.35rem 0;
    border-bottom: 1px dotted rgba(22, 20, 15, 0.3);
}
.factbox dl div:last-child { border-bottom: 0; }
.factbox dt { font-size: 0.78rem; color: var(--ink-soft); }
.factbox dd { font-family: var(--display); font-weight: 800; font-size: 1.15rem; }
.fine {
    font-family: var(--type);
    font-size: 0.62rem;
    font-style: italic;
    color: var(--ink-faint);
    text-align: center;
    padding-top: 0.5rem;
}

.btn-quiet {
    display: block;
    margin-top: 1rem;
    text-align: center;
    font-family: var(--type);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid var(--rule);
    padding: 0.6rem 0.5rem;
    transition: background 0.25s, color 0.25s;
}
.btn-quiet:hover { background: var(--ink); color: var(--paper); }

/* ═════════ PLATES (the printed pictures) ═════════ */
.plate { margin: 0 0 1.4rem; }
.plate-frame {
    position: relative;
    border: 1px solid var(--rule);
    padding: 6px;
    background: var(--paper-warm);
    overflow: hidden;
}
.plate-frame img {
    display: block;
    width: 100%;
    height: auto;
    /* Pull the sources toward one another so four different illustration styles
       read as pictures printed by the same press. */
    filter: saturate(0.86) contrast(1.05);
}

/*
  A print screen laid over every picture: a fine dot grid multiplied onto the
  image so the plates read as ink on paper rather than pasted-in artwork. It's
  what ties the colour illustrations to the halftone portrait.
*/
.plate-frame::after,
.scene-frame::after {
    content: "";
    position: absolute;
    inset: 6px;
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: 0.4;
    background-image: radial-gradient(circle at 50% 50%, rgba(22,20,15,0.85) 0.6px, transparent 0.7px);
    background-size: 3px 3px;
}

.plate figcaption {
    font-family: var(--type);
    font-size: 0.7rem;
    line-height: 1.5;
    color: var(--ink-soft);
    padding-top: 0.45rem;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 0.5rem;
}
.plate figcaption strong { color: var(--ink); }

/*
  Cap the plate heights and crop to fill. Left at their natural aspect these
  illustrations swallow whole sections; as banners they sit like press photos.
*/
.plate-wide { margin-bottom: 1.8rem; }
.plate-wide .plate-frame img { max-height: 330px; object-fit: cover; object-position: 50% 42%; }

.plate-inset { max-width: 460px; margin-bottom: 1.8rem; }

/* Two plates abreast, so a single narrow picture doesn't leave half a page blank. */
.plate-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
    margin-bottom: 1.8rem;
    align-items: start;
}
.plate-row .plate { margin-bottom: 0; }
.plate-row .plate-frame img { height: 250px; object-fit: cover; }

.plate-bench { margin-top: 1.4rem; }
.plate-bench .plate-frame img { max-height: 260px; object-fit: cover; object-position: 50% 45%; }

/* ═════════ TICKER ═════════ */
.ticker {
    display: flex;
    align-items: stretch;
    border-top: 3px double var(--rule);
    border-bottom: 3px double var(--rule);
    margin-top: 1.6rem;
    background: var(--paper-warm);
}
.ticker-label {
    flex: none;
    display: grid;
    place-items: center;
    padding: 0 1rem;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--type);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}
.ticker-window { overflow: hidden; flex: 1; }
.ticker-track {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    width: max-content;
    padding: 0.5rem 0;
    font-family: var(--type);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    animation: roll 42s linear infinite;
}
.ticker-track i { color: var(--rust); font-style: normal; font-size: 0.6rem; }
@keyframes roll { to { transform: translateX(-50%); } }

/* ═════════ THE ADVERTISEMENT (the game) ═════════ */
.advert-wrap { padding-top: 1.8rem; }
.advert {
    position: relative;
    border: 3px double var(--ink);
    padding: 1.5rem clamp(1rem, 3vw, 2.2rem) 1.6rem;
    background:
        repeating-linear-gradient(45deg, rgba(185,60,18,0.045) 0 12px, transparent 12px 24px),
        var(--paper-warm);
}
.advert-tag {
    position: absolute;
    top: -0.62rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--paper);
    padding: 0 0.7rem;
    font-family: var(--type);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ink-faint);
}
.advert-inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: clamp(1.2rem, 3vw, 2.6rem);
    align-items: center;
}
.advert-over {
    font-family: var(--type);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--rust);
}
.advert-hd {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(2.2rem, 6vw, 4.4rem);
    line-height: 0.98;
    letter-spacing: -0.03em;
    margin: 0.2rem 0 0.5rem;
    text-transform: uppercase;
}
.advert-sub { font-size: 0.95rem; max-width: 34rem; }
.advert-list {
    list-style: none;
    margin-top: 0.9rem;
    font-family: var(--type);
    font-size: 0.76rem;
    color: var(--ink-soft);
}
.advert-list li { padding: 0.15rem 0 0.15rem 1.1rem; position: relative; }
.advert-list li::before { content: "▪"; position: absolute; left: 0; color: var(--rust); }

.advert-action { text-align: center; }
.btn-enter {
    display: block;
    border: 2px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    padding: 1.1rem 1.2rem 0.95rem;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s;
    box-shadow: 6px 6px 0 rgba(22, 20, 15, 0.22);
}
.btn-enter:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--rust); background: #201d16; }
.btn-enter:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--rust); }
.btn-enter-label {
    display: block;
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(1.15rem, 2.2vw, 1.7rem);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.1;
}
.btn-enter-sub {
    display: block;
    font-family: var(--type);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.75;
    margin-top: 0.3rem;
}
.advert-fine {
    font-family: var(--type);
    font-size: 0.64rem;
    font-style: italic;
    color: var(--ink-faint);
    margin-top: 0.55rem;
}

/* ═════════ SECTIONS ═════════ */
.section { padding-top: 2.6rem; }
.sec-head { border-bottom: 3px double var(--rule); padding-bottom: 0.7rem; margin-bottom: 1.4rem; }
.sec-no {
    font-family: var(--type);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--rust);
}
.sec-title {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(1.7rem, 3.6vw, 2.7rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-top: 0.15rem;
}
.sec-sub { font-style: italic; color: var(--ink-soft); font-size: 0.92rem; max-width: 46rem; margin-top: 0.3rem; }

/* ── Research ── */
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.two-up .story:first-child { border-right: 1px solid var(--rule); padding-right: 1.8rem; }
.two-up .story:last-child { padding-left: 1.8rem; }

.badge {
    display: inline-block;
    font-family: var(--type);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.55rem;
    border: 1px solid currentColor;
    margin-bottom: 0.55rem;
}
.badge-live { color: #2f6d3c; }
.badge-wip  { color: var(--rust); }

.story-hd {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
}
.story-deck { font-style: italic; color: var(--ink-soft); font-size: 0.92rem; margin-top: 0.2rem; }

.scores {
    width: 100%;
    border-collapse: collapse;
    margin: 0.9rem 0 0.7rem;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.scores th {
    font-family: var(--type);
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ink-faint);
    font-weight: 400;
    padding: 0.35rem 0 0.15rem;
    text-align: left;
}
.scores td {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.5rem;
    padding-bottom: 0.4rem;
}
.tagline {
    font-family: var(--type);
    font-size: 0.72rem;
    color: var(--ink-soft);
    border-top: 1px dotted rgba(22,20,15,0.35);
    padding-top: 0.5rem;
}

/* ── Dispatches ── */
.briefs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 0; row-gap: 1.6rem; }
.brief {
    padding: 0 1.3rem;
    border-right: 1px solid var(--rule);
}
/*
  Four briefs in a three-column grid, so the fourth wraps. Key off position in
  the row, not document order: the first of each row loses its left padding and
  the last loses its dividing rule — otherwise the wrapped item sits indented
  and a stray rule is drawn down the outside edge.
*/
.brief:nth-child(3n + 1) { padding-left: 0; }
.brief:nth-child(3n) { border-right: 0; padding-right: 0; }
.brief:last-child { border-right: 0; }
.brief h3 {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.45rem;
    line-height: 1.1;
    margin-bottom: 0.35rem;
}
.brief p { font-size: 0.86rem; line-height: 1.62; text-align: justify; hyphens: auto; }
.brief-tag {
    display: inline-block;
    font-family: var(--type);
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--rust);
    border-bottom: 1px solid var(--rust);
    margin-bottom: 0.4rem;
}
.brief-meta {
    font-family: var(--type);
    font-size: 0.7rem;
    color: var(--ink-faint);
    margin-top: 0.5rem;
    text-align: left !important;
}
.brief-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-family: var(--type);
    font-size: 0.74rem;
    color: var(--rust);
    border-bottom: 1px solid var(--rust);
}

/* ── Chronicle ── */
.chronicle { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2.4rem; }
.certs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.certs span {
    font-family: var(--type);
    font-size: 0.7rem;
    border: 1px solid var(--rule);
    padding: 0.25rem 0.6rem;
}

.chron-list { list-style: none; border-left: 2px solid var(--rule); padding-left: 1.3rem; }
.chron-list li { position: relative; padding-bottom: 1.5rem; }
.chron-list li::before {
    content: "";
    position: absolute;
    left: -1.72rem;
    top: 0.45rem;
    width: 9px; height: 9px;
    background: var(--rust);
    border-radius: 50%;
}
.chron-date { font-family: var(--type); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rust); }
.chron-list h4 { font-family: var(--display); font-weight: 700; font-size: 1.05rem; margin: 0.15rem 0 0.1rem; }
.chron-list p { font-size: 0.86rem; color: var(--ink-soft); }

/* ── The Toolkit ── */
.toolkit {
    margin-top: 1.8rem;
    border: 1px solid var(--rule);
    border-top: 4px solid var(--ink);
    padding: 0.9rem 1.1rem 1rem;
    background: var(--paper-warm);
}
.toolkit h3 {
    font-family: var(--type);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    text-align: center;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 0.5rem;
}
.toolkit dl div {
    display: grid;
    grid-template-columns: 6.2rem 1fr;
    gap: 0.7rem;
    padding: 0.32rem 0;
    border-bottom: 1px dotted rgba(22, 20, 15, 0.28);
}
.toolkit dl div:last-child { border-bottom: 0; }
.toolkit dt {
    font-family: var(--type);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rust);
    padding-top: 0.12rem;
}
.toolkit dd { font-size: 0.8rem; line-height: 1.45; color: var(--ink-soft); }

/* ── And finally: the moonwalk ── */
.moonwalk-strip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 104px;
    margin-top: 2.6rem;
    padding: 0 1rem;
    overflow: hidden;
    border-top: 1px solid var(--rule);
    border-bottom: 3px double var(--rule);
    background: var(--paper-warm);
}
.moonwalk-label,
.moonwalk-note {
    font-family: var(--type);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-faint);
    z-index: 1;
}
.moonwalk-note { font-style: italic; text-transform: none; letter-spacing: 0.02em; }

/*
  27 cells of 132x64 in a 3564px strip. One animation flips the frames, the other
  carries him across the page.

  The glide runs right-to-left because that is the way he is drawn to travel: he
  faces left and drifts left within the source frames. Sending the element the
  other way makes the two motions cancel, and he reads as moonwalking on the spot
  while being dragged backwards.
*/
.moonwalk {
    position: absolute;
    bottom: 8px;
    left: 0;
    width: 132px;
    height: 64px;
    background-image: url("assets/moonwalk.png");
    background-repeat: no-repeat;
    background-size: 3564px 64px;
    animation:
        mjSteps 1.5s steps(27) infinite,
        mjGlide 26s linear infinite;
}
@keyframes mjSteps { to { background-position: -3564px 0; } }
@keyframes mjGlide {
    from { transform: translateX(calc(100vw + 40px)); }
    to   { transform: translateX(-180px); }
}

/* ── Classifieds ── */
.class-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
.class-ad {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    border: 1px solid var(--rule);
    padding: 1rem;
    background: var(--paper-warm);
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s;
}
.class-ad:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.class-label { font-family: var(--type); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.11em; color: var(--ink-faint); }
.class-value { font-family: var(--display); font-weight: 700; font-size: 1.02rem; word-break: break-word; }
.class-note { font-family: var(--type); font-size: 0.7rem; color: var(--rust); margin-top: 0.25rem; }
.class-ad-play { background: var(--ink); }
.class-ad-play .class-label { color: rgba(240,234,219,0.6); }
.class-ad-play .class-value { color: var(--paper); }
.class-ad-play .class-note { color: var(--highlight); }
.class-ad-play:hover { box-shadow: 5px 5px 0 var(--rust); }

/* ── Colophon ── */
.colophon { padding-top: 2.4rem; }
.colophon-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.8rem;
    font-family: var(--type);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-soft);
}
.colophon-row a { color: var(--rust); }
.colophon-mid { font-style: italic; text-transform: none; }

/* ═════════ RESPONSIVE ═════════ */
@media (max-width: 1000px) {
    .front { grid-template-columns: 1fr 1fr; }
    .col-lead { grid-column: 1 / -1; border-right: 0; padding: 0 0 1.2rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.2rem; }
    .col-plate { padding-left: 0; }
    .col-side { padding-right: 0; }
    .briefs { grid-template-columns: 1fr 1fr; }
    .brief { border-bottom: 1px solid var(--rule); padding-bottom: 1.1rem; margin-bottom: 1.1rem; }
    .brief:nth-child(2n) { border-right: 0; padding-right: 0; }
    .brief:nth-child(2n+1) { padding-left: 0; }
    .class-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
    .front { grid-template-columns: 1fr; }
    .col { padding: 0; }
    .col-plate, .col-side { border: 0; }
    .col-side { border-top: 1px solid var(--rule); padding-top: 1.2rem; margin-top: 1.2rem; }
    .two-up { grid-template-columns: 1fr; }
    .two-up .story:first-child { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--rule); padding-bottom: 1.4rem; margin-bottom: 1.4rem; }
    .two-up .story:last-child { padding-left: 0; }
    .briefs { grid-template-columns: 1fr; }
    .brief { border-right: 0; padding: 0 0 1.1rem; }
    .chronicle { grid-template-columns: 1fr; gap: 1.6rem; }
    .plate-row { grid-template-columns: 1fr; gap: 1.2rem; }
    .toolkit dl div { grid-template-columns: 1fr; gap: 0.15rem; }
    .moonwalk-note { display: none; }
    .advert-inner { grid-template-columns: 1fr; }
    .class-grid { grid-template-columns: 1fr; }
    .nav-rules { gap: 0.9rem; font-size: 0.7rem; }
    .ears .ear-mid { display: none; }
    .body, .brief p { text-align: left; }
    .colophon-mid { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    [data-r] { opacity: 1; transform: none; transition: none; }
    .ticker-track { animation: none; }
    .scene-img { transition: none; }
    .press { display: none; }
    .press-sheet { animation: none; }
    .moonwalk-strip { display: none; }
}