/* ============================================================
   Foundational Papers — "The Tape" (horizontal)
   The page is a Turing-machine tape running left → right:
   ten frames in a horizontal greenbar filmstrip with sprocket
   strips top & bottom, and a read/write head fixed at center
   that reads whichever frame slides beneath it.
   ============================================================ */

:root {
  --paper: #FAFAF4;   /* the sheet            */
  --bar:   #E3EDE1;   /* alternating greenbar */
  --desk:  #E6E6DC;   /* punched-hole color   */
  --ink:   #1B1D1A;   /* primary text         */
  --perf:  #C7CEC2;   /* sprockets, hairlines */
  --mute:  #5E6760;   /* secondary text       */
  --link:  #1E4D6B;   /* ink-blue hyperlinks  */
  --head:  #D34E2A;   /* read/write head      */

  --masthead: 56px;   /* top status bar       */
  --strip: 34px;      /* tractor-feed margin (top & bottom of tape) */
  --cell-w: min(86vw, 520px);

  --display: "Space Grotesk", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  height: 100dvh;
  overflow: hidden;                 /* the tape is the only scroller */
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  line-height: 1.5;
}

/* ---- skip link ---- */
.skip {
  position: fixed;
  left: 50%;
  top: -60px;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  padding: .5rem 1rem;
  font-family: var(--mono);
  font-size: .8rem;
  z-index: 20;
  transition: top .15s ease;
}
.skip:focus { top: 8px; }

/* ============================================================
   Masthead — slim status bar
   ============================================================ */
.masthead {
  position: relative;
  z-index: 6;
  height: var(--masthead);
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0 clamp(1rem, 4vw, 2.2rem);
  border-bottom: 1px solid var(--perf);
  background: var(--paper);
  font-family: var(--mono);
}
.masthead__brand {
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--ink);
}
.masthead__counter {
  margin: 0;
  margin-left: auto;
  font-size: .82rem;
  letter-spacing: .08em;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.masthead__counter #frame { color: var(--head); font-weight: 600; }
.masthead__hint {
  margin: 0;
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--mute);
}
.masthead__hint span { color: var(--head); }
@media (max-width: 600px) {
  .masthead__hint { display: none; }
  .masthead { gap: .8rem; }
}

/* ============================================================
   Read/write head — fixed at horizontal center, points down
   ============================================================ */
.head {
  position: fixed;
  top: calc(var(--masthead) + 4px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.head__mark {
  font-size: 1.05rem;
  line-height: 1;
  color: var(--head);
  filter: drop-shadow(0 1px 4px rgba(211,78,42,.35));
}
.head__tick {
  width: 2px;
  height: 18px;
  margin-top: 2px;
  background: linear-gradient(var(--head), transparent);
}

/* ============================================================
   Tape — horizontal scroller
   ============================================================ */
.tape {
  height: calc(100dvh - var(--masthead));
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  /* tractor-feed sprocket holes along top & bottom edges */
  background-color: var(--paper);
  background-image:
    radial-gradient(circle, var(--desk) 0 2.7px, var(--perf) 2.7px 3.4px, transparent 3.7px),
    radial-gradient(circle, var(--desk) 0 2.7px, var(--perf) 2.7px 3.4px, transparent 3.7px);
  background-size: 27px 16px, 27px 16px;
  background-position: 22px 9px, 22px calc(100% - 9px);
  background-repeat: repeat-x, repeat-x;
}
.tape:focus-visible { outline: 2px solid var(--head); outline-offset: -2px; }

.track {
  display: flex;
  align-items: stretch;
  height: 100%;
  padding-block: var(--strip);       /* expose the sprocket strips */
  width: max-content;
}

/* keep <ol> semantics without breaking the flex row */
.papers {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- title & end panels ---- */
.panel {
  flex: 0 0 auto;
  height: 100%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.4rem, 3.2vw, 2.4rem) clamp(1.5rem, 4vw, 2.8rem);
  border-right: 1px dashed var(--perf);   /* fanfold fold line */
  min-height: 0;
}

/* ============================================================
   Title panel (first frame)
   ============================================================ */
.panel--title {
  width: min(92vw, 600px);
  scroll-snap-align: start;
  gap: .2rem;
}
.eyebrow {
  margin: 0 0 1.2rem;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--mute);
}
.title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.9rem, 8.5vw, 5.2rem);
  line-height: .92;
  letter-spacing: -.03em;
}
.title__sub {
  margin: 1rem 0 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  letter-spacing: -.01em;
}
.title__meta {
  margin: 1.3rem 0 0;
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--mute);
}
.title__meta span { color: var(--head); }

/* ============================================================
   Paper frames
   ============================================================ */
.cell {
  flex: 0 0 auto;
  width: var(--cell-w);
  height: 100%;
  scroll-snap-align: center;
  border-right: 1px dashed var(--perf);
  position: relative;
  perspective: 1400px;
}
.papers > .cell:nth-child(odd) { background: var(--bar); }  /* greenbar band */

/* ---- the flip itself ---- */
.cell__inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.cell.is-flipped .cell__inner { transform: rotateY(180deg); }

.cell__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
}
.cell__face--front {
  justify-content: center;
  padding: clamp(1.4rem, 3.2vw, 2.4rem) clamp(1.5rem, 4vw, 2.8rem);
  overflow-y: auto;
}
.cell__face--back {
  transform: rotateY(180deg);
  background: var(--paper);
  pointer-events: none;
}
.cell.is-flipped .cell__face--front { pointer-events: none; }
.cell.is-flipped .cell__face--back { pointer-events: auto; }

.cell__num {
  margin: 0 0 auto;
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  transition: color .2s ease;
}
.cell__title {
  margin: 1.1rem 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.12;
  letter-spacing: -.018em;
  text-wrap: balance;
}
.cell__data {
  margin: .8rem 0 0;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .01em;
  color: var(--mute);
}
.cell__note {
  margin: .85rem 0 auto;
  font-size: 1rem;
}
.cell__aside { color: var(--mute); font-style: italic; }

.cell__links {
  margin-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.cell__links a {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--link);
  text-decoration: none;
  padding: .34rem .7rem;
  border: 1px solid var(--perf);
  background: var(--paper);
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.papers > .cell:nth-child(odd) .cell__links a { background: rgba(250,250,244,.6); }
.cell__links a:hover { color: var(--head); border-color: var(--head); transform: translateY(-1px); }
.cell__links a:focus-visible { outline: 2px solid var(--head); outline-offset: 2px; }

/* ---- click-to-flip affordance ---- */
.cell__flip {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  font: inherit;
  cursor: pointer;
}
.cell__links { position: relative; z-index: 2; }   /* chips stay clickable */

.cell:has(.cell__flip:hover),
.cell:has(.cell__flip:focus-visible) { outline: 2px solid var(--head); outline-offset: -2px; }
.cell:has(.cell__flip:hover) .cell__title {
  text-decoration: underline;
  text-decoration-color: var(--head);
  text-underline-offset: 3px;
}
.cell__flip:focus-visible { outline: none; }

/* ---- the frame currently under the head ---- */
.cell.is-read::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--head);
  z-index: 5;
  pointer-events: none;
}
.cell.is-read .cell__num { color: var(--head); }

/* ---- back face: status bar + embedded PDF ---- */
.cell__bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .8rem;
  border-bottom: 1px solid var(--perf);
  background: var(--paper);
  font-family: var(--mono);
  font-size: .72rem;
}
.cell__bar-label { color: var(--mute); letter-spacing: .1em; }
.cell__bar-open {
  margin-left: auto;
  color: var(--link);
  text-decoration: none;
  padding: .25rem .5rem;
  border: 1px solid var(--perf);
}
.cell__bar-open:hover { color: var(--head); border-color: var(--head); }
.cell__back {
  border: 0;
  cursor: pointer;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: .72rem;
  padding: .3rem .6rem;
}
.cell__back:hover { background: var(--head); }
.cell__bar-open:focus-visible,
.cell__back:focus-visible { outline: 2px solid var(--head); outline-offset: 2px; }

.cell__pdf {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: #F1F1EA;
}

.cell__book {
  padding: clamp(1.4rem, 3vw, 2rem);
  font-size: .95rem;
  overflow-y: auto;
}
.cell__book p { margin: 0 0 1.1rem; }
.cell__book-links { display: flex; flex-wrap: wrap; gap: .55rem; }
.cell__book-links a {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--link);
  text-decoration: none;
  padding: .34rem .7rem;
  border: 1px solid var(--perf);
}
.cell__book-links a:hover { color: var(--head); border-color: var(--head); }

/* ============================================================
   End panel (colophon)
   ============================================================ */
.panel--end {
  width: min(78vw, 440px);
  scroll-snap-align: end;
  border-right: none;
  text-align: left;
  gap: 0;
}
.colophon__line {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .12em;
  color: var(--head);
}

/* ============================================================
   Scrollbar — a thin track at the foot of the tape
   ============================================================ */
.tape::-webkit-scrollbar { height: 10px; }
.tape::-webkit-scrollbar-track { background: transparent; }
.tape::-webkit-scrollbar-thumb {
  background: var(--perf);
  border: 3px solid var(--paper);
  border-radius: 6px;
}
.tape::-webkit-scrollbar-thumb:hover { background: var(--mute); }
.tape { scrollbar-color: var(--perf) transparent; }

/* ============================================================
   Load-in animation ("printing") on the title frame
   ============================================================ */
.js [data-print] {
  opacity: 0;
  transform: translateY(8px);
  animation: print-in .5s cubic-bezier(.2,.7,.3,1) forwards;
}
.js .eyebrow     { animation-delay: .04s; }
.js .title       { animation-delay: .16s; }
.js .title__sub  { animation-delay: .30s; }
.js .title__meta { animation-delay: .42s; }

@keyframes print-in { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .tape { scroll-behavior: auto; }
  .js [data-print] { opacity: 1; transform: none; animation: none; }
  .head__mark, .cell__num, .cell__links a { transition: none; }
  .cell__inner { transition: none; }   /* flip snaps instead of spinning */
}