:root {
  --mist: #e9edf0;
  --paper: #f7f7f3;
  --ink: #29333b;
  --system: #425e78;
  --body: #a65d50;
  --we: #74865d;
  --serif: "Newsreader", Georgia, serif;
  --mono: "Recursive", ui-monospace, monospace;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--mist); font-family: var(--serif); }
a { color: var(--system); text-underline-offset: .18em; }
a:focus-visible { outline: 3px solid var(--body); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 20; top: .5rem; left: .5rem; padding: .7rem 1rem; color: #fff; background: var(--ink); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.site-top { position: relative; z-index: 3; display: flex; justify-content: space-between; padding: .8rem clamp(1rem,4vw,3rem); border-bottom: 1px solid #c3cbd0; font: 600 .72rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

.clock-ribbons { position: fixed; z-index: 0; inset: 0 auto 0 max(1rem, calc(50vw - 33rem)); display: flex; gap: 9px; pointer-events: none; opacity: .5; }
.clock-ribbons i { width: 4px; height: 150vh; background: repeating-linear-gradient(to bottom, currentColor 0 16px, transparent 16px 34px); will-change: transform; }
.clock-ribbons i:nth-child(1) { color: var(--system); transform: translateY(var(--shift-a, -10vh)); }
.clock-ribbons i:nth-child(2) { color: var(--body); transform: translateY(var(--shift-b, -25vh)); }
.clock-ribbons i:nth-child(3) { color: var(--we); transform: translateY(var(--shift-c, -40vh)); }
.continuity-field { position: relative; z-index: 1; width: min(calc(100% - 3rem), 62rem); margin: 0 auto; background: var(--paper); box-shadow: 0 0 4rem rgba(42,55,65,.1); }
.continuity-head { min-height: 34rem; padding: clamp(3rem, 9vw, 7rem) clamp(2.2rem, 9vw, 8rem); border-bottom: 1px solid #cad0d2; }
.article-logo { width: clamp(7rem, 15vw, 10rem); margin: -3rem 0 2.5rem auto; padding: .3rem; border: 1px solid #bac5ca; background: #e3e8e9; box-shadow: -.45rem .45rem 0 rgba(66,94,120,.16); transform: rotate(.7deg); }
.article-logo img { display: block; width: 100%; height: auto; }
.clock-legend { display: flex; gap: 1.7rem; margin-bottom: 5rem; font: 600 .68rem/1 var(--mono); text-transform: uppercase; }
.clock-legend span:nth-child(1) { color: var(--system); }
.clock-legend span:nth-child(2) { color: var(--body); }
.clock-legend span:nth-child(3) { color: var(--we); }
.eyebrow, .article-meta, .time-section::before, .series-nav, .article-foot { font-family: var(--mono); letter-spacing: .06em; }
.eyebrow { margin: 0 0 1.4rem; color: #67747c; font-size: .72rem; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(4rem, 10vw, 8rem); font-weight: 400; line-height: .87; letter-spacing: -.055em; }
.dek { max-width: 38rem; margin: 2rem 0; font-size: clamp(1.2rem, 2.2vw, 1.55rem); line-height: 1.45; }
.article-meta { color: #66727a; font-size: .7rem; }
.tape-essay { counter-reset: clocksection; }
.tape-opening { padding: clamp(3rem, 7vw, 6rem) clamp(2.2rem, 9vw, 8rem); border-bottom: 1px solid #d1d6d8; font-size: clamp(1.2rem,2vw,1.42rem); line-height: 1.7; text-align: justify; text-wrap: pretty; hyphens: auto; orphans: 3; widows: 3; }
.time-section { position: relative; counter-increment: clocksection; padding: clamp(4rem, 8vw, 7rem) clamp(2.2rem, 9vw, 8rem); border-bottom: 1px solid #d1d6d8; font-size: clamp(1.05rem,1.7vw,1.2rem); line-height: 1.76; text-align: justify; text-wrap: pretty; hyphens: auto; orphans: 3; widows: 3; }
.time-section::before { content: "R₁ / " counter(clocksection, decimal-leading-zero); position: absolute; top: 2rem; left: 1rem; color: var(--system); font-size: .66rem; writing-mode: vertical-rl; }
.time-section:nth-child(3n+2)::before { content: "body / " counter(clocksection, decimal-leading-zero); color: var(--body); }
.time-section:nth-child(3n)::before { content: "we / " counter(clocksection, decimal-leading-zero); color: var(--we); }
.time-section h2 { max-width: 17ch; margin: 0 0 2rem; font-size: clamp(2.5rem, 5vw, 4.3rem); font-weight: 400; line-height: .98; letter-spacing: -.025em; }
.time-section h3 { margin-top: 2.5rem; font: 600 1rem/1.3 var(--mono); }
.time-section p, .time-section li { max-width: 65ch; }
.section-body { min-width: 0; }
.section-art { margin: 0 0 2.8rem; padding: .45rem; background: #e5e9e9; border: 1px solid #c0c9cc; box-shadow: -.6rem .65rem 0 rgba(66,94,120,.1); transform: translateX(.25rem); }
.time-section:nth-child(3n+2) .section-art { box-shadow: -.6rem .65rem 0 rgba(166,93,80,.11); }
.time-section:nth-child(3n) .section-art { box-shadow: -.6rem .65rem 0 rgba(116,134,93,.12); }
.section-art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; filter: saturate(.9); }
.time-section blockquote { margin: 2.5rem 0; padding: .7rem 0 .7rem 1.5rem; border-left: 3px solid var(--body); font-size: 1.08em; }
.time-section li + li { margin-top: .55rem; }
.references { color: #4f5d65; font-size: .9em; }
.series-nav { padding: 3rem clamp(2.2rem, 9vw, 8rem); }
.series-nav > p { color: #718087; font-size: .7rem; text-transform: uppercase; }
.series-nav ol { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.series-nav a { display: flex; gap: .8rem; padding: .8rem 0; text-decoration: none; border-top: 1px solid #b9c2c6; }
.series-nav [aria-current="page"] { color: var(--we); }
.series-nav span { font-size: .7rem; }
.article-foot { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem clamp(2.2rem, 9vw, 8rem); color: #6e7a81; border-top: 1px solid #c5cccf; font-size: .66rem; }

@media (max-width: 620px) {
  .continuity-field { width: calc(100% - 1.2rem); margin-right: 0; }
  .clock-ribbons { left: .7rem; }
  .continuity-head, .tape-opening, .time-section { padding-left: 2.8rem; padding-right: 1.3rem; }
  .article-logo { width: 6.5rem; margin-top: -1rem; }
  .time-section::before { left: .45rem; }
  .series-nav ol { grid-template-columns: 1fr; }
  .article-foot { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .clock-ribbons i { transform: none !important; will-change: auto; } }
@media print { .site-top, .clock-ribbons, .series-nav { display: none; } .continuity-field { width: 100%; box-shadow: none; } }