/* ── The homepage introduction sheets (index.html, #new, under the hero) ──
   Four drawing sheets in the Blue Papers' human-architecture style, one per new
   page: the AppDeen Archive, the Tempo, Mr. AppDeen on every record, the Blue
   Papers. Each sheet is a hairline frame with registration marks, a drawing
   (archive/papers/art/intro-N.svg, drawn by art/draw.py, line weights and the
   draw-in in art.css) and a running title-block strip, "sheet 1 of 4" to "4 of 4".
   The fields alternate like sheets in a set and are the same in both themes:
     blue   the blueprint, brand blue #2254F2, white line-work
     dark   the drafting film, cream ink, blue accents (lines only, never text)
     paper  the drafting paper, ink line-work, blue accents
   DM Sans for headings and labels (sentence case), Newsreader for the body.
   Motion: each drawing draws itself in as it comes into view, then one part
   keeps working (the drawer, the needle, the read head and the type, the stamp),
   only while on screen. The construction layer drifts slightly against the object
   as the page scrolls (transform only); none of that on phones or under reduced
   motion. Nothing is sticky, nothing scrolls sideways. Every rule is scoped
   under .intro so styles.css stays as it is. */

.intro{
  --in-serif:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --in-sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --in-gut:clamp(8px, 2.4vw, 40px);
  position:relative; z-index:2; display:flex; flex-direction:column; gap:clamp(14px, 2vw, 28px);
  background:var(--bg); padding:clamp(20px, 3vw, 44px) var(--in-gut) clamp(40px, 6vw, 88px);
  margin-top:-4vh; box-shadow:0 -40px 80px -20px rgba(4,6,13,.9);   /* the first opaque section: completes the hero's dive */
  -webkit-font-smoothing:antialiased; }
html[data-theme="light"] .intro{ box-shadow:none; }
/* the sections after the sheets no longer close the dive */
.intro ~ #records{ margin-top:0; box-shadow:none; }
.intro ~ #records:empty{ min-height:0; }
.intro ~ .roster{ margin-top:0; box-shadow:none; }

.intro *{ box-sizing:border-box; margin:0; padding:0; }
.intro h2, .intro p, .intro th, .intro td{ font-family:inherit; letter-spacing:normal; text-transform:none; }
html[data-theme] .intro h2{ color:inherit; }
.intro a{ color:inherit; }
.intro :focus-visible{ outline:2px solid currentColor; outline-offset:3px; border-radius:2px; }
.intro .in-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── the sheet ──────────────────────────────────────────────────────── */
.intro .in-sheet{ position:relative; isolation:isolate; width:100%; max-width:1320px; margin:0 auto;
  padding:clamp(8px, 1.1vw, 14px); background:var(--f-bg); color:var(--f-ink); border:1px solid var(--f-line); }
.intro .in-field{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--f-grid); background-size:var(--f-size); background-position:-1px -1px; }
.intro .in-reg{ position:absolute; inset:clamp(8px, 1.1vw, 14px); pointer-events:none; }
.intro .in-reg i{ position:absolute; width:22px; height:22px; border:0 solid var(--f-strong); }
.intro .in-reg i:nth-child(1){ left:-1px; top:-1px; border-left-width:1px; border-top-width:1px; }
.intro .in-reg i:nth-child(2){ right:-1px; top:-1px; border-right-width:1px; border-top-width:1px; }
.intro .in-reg i:nth-child(3){ left:-1px; bottom:-1px; border-left-width:1px; border-bottom-width:1px; }
.intro .in-reg i:nth-child(4){ right:-1px; bottom:-1px; border-right-width:1px; border-bottom-width:1px; }
.intro .in-in{ border:1px solid var(--f-line); }
.intro .in-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:center;
  gap:clamp(28px, 3.4vw, 56px); padding:clamp(28px, 3.6vw, 56px) clamp(20px, 3.4vw, 52px); }
.intro .in-sheet:nth-child(even) .in-grid{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
.intro .in-sheet:nth-child(even) .in-art{ order:2; }   /* the drawing alternates sides, sheet to sheet */

/* the drawing: its box is reserved before it loads (no shift) */
.intro .in-art{ position:relative; aspect-ratio:var(--ar, 4 / 3); color:var(--f-ink); --art-acc:var(--f-acc); --art-bg:var(--f-bg); }
.intro .in-art > svg{ position:absolute; inset:0; width:100%; height:100%; }
.intro .in-art > .art{ --art-acc:var(--f-acc); --art-bg:var(--f-bg); }   /* over art.css's currentColor default */
.intro .art .bgf{ fill:var(--art-bg); }
.intro .art .ts{ font-size:13px; }                                    /* small labels, dropped under 10 px like the rest */
.intro .art.h13 .ts{ display:none; }
.intro .art .tbig{ font-size:44px; font-weight:700; letter-spacing:0; }
.intro .art:not(.h15) .ph{ display:none; }                            /* the balloon's "?" stands in for its words when they are too small */
.intro .in-fig{ position:absolute; left:70.25%; top:26%; width:27%; height:57%; object-fit:contain; object-position:50% 100%; }

/* ── lettering ──────────────────────────────────────────────────────── */
.intro .in-text{ max-width:34rem; }
.intro .in-k{ display:flex; align-items:center; gap:10px; font:600 14px/1.35 var(--in-sans); color:var(--f-soft); }
.intro .in-k::before{ content:""; width:22px; height:0; border-top:1.5px solid var(--f-acc-line); }
.intro .in-h{ margin-top:14px; font:600 clamp(32px, 1.3rem + 2vw, 54px)/1.06 var(--in-sans); letter-spacing:-.022em; text-wrap:balance; }
.intro .in-p{ margin-top:16px; font-family:var(--in-serif); font-size:clamp(19px, 1.05rem + .3vw, 21px); line-height:1.55; font-optical-sizing:auto; }
.intro .in-p + .in-p{ margin-top:10px; }
.intro .in-cta{ margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; }
.intro .in-btn{ display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 20px; border:1.5px solid var(--f-ink);
  background:var(--f-bg); color:var(--f-ink); font:600 16px/1 var(--in-sans); text-decoration:none; cursor:pointer; }
.intro .in-btn::after{ content:""; width:7px; height:7px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg); margin-left:2px; }
.intro .in-btn:hover{ background:var(--f-ink); color:var(--f-bg); }
.intro .in-btn[hidden], .intro .in-soon[hidden]{ display:none; }
.intro .in-soon{ display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 18px; border:1.5px dashed var(--f-line);
  font:600 16px/1 var(--in-sans); color:var(--f-ink); }
.intro .in-soon::before{ content:""; width:9px; height:9px; border-radius:50%; border:1.5px solid currentColor; }
.intro .in-note{ font:500 14px/1.45 var(--in-sans); color:var(--f-soft); }

/* the Tempo readout */
.intro .in-read{ margin-top:18px; display:flex; align-items:baseline; gap:14px; }
.intro .in-num{ font:600 clamp(56px, 2.6rem + 2vw, 76px)/.9 var(--in-sans); letter-spacing:-.03em; font-variant-numeric:tabular-nums lining-nums; }
.intro .in-lvl{ font:italic 400 clamp(24px, 1.2rem + .6vw, 30px)/1 var(--in-serif); }
.intro .in-when{ margin-top:10px; font:500 14px/1.45 var(--in-sans); color:var(--f-soft); }
.intro .in-sample{ font-weight:700; color:var(--f-ink); }

/* ── the running title-block strip ─────────────────────────────────── */
.intro .in-tb{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto auto; border-top:1px solid var(--f-line);
  font:500 13px/1.3 var(--in-sans); color:var(--f-soft); }
.intro .in-tb > span{ display:flex; align-items:center; gap:8px; padding:9px 14px; border-left:1px solid var(--f-line); white-space:nowrap; }
.intro .in-tb > span:first-child{ border-left:0; }
.intro .in-tb b{ font-weight:600; color:var(--f-ink); }
.intro .in-tb .in-t{ display:block; overflow:hidden; text-overflow:ellipsis; align-self:center; }
.intro .in-set{ display:inline-flex; gap:3px; }
.intro .in-set i{ width:9px; height:9px; border:1px solid var(--f-ink); }
.intro .in-set i.on{ background:var(--f-ink); }

/* ── sheet 4: the drawing register ─────────────────────────────────── */
.intro .in-regt{ order:3; grid-column:1 / -1; width:100%; border-collapse:collapse; border:1px solid var(--f-strong); font-family:var(--in-sans); }
.intro .in-regt th{ padding:8px 14px; border:1px solid var(--f-line); text-align:left; font:600 13px/1.3 var(--in-sans); color:var(--f-soft); }
.intro .in-regt td{ padding:10px 14px; border:1px solid var(--f-line); vertical-align:middle; font:500 15px/1.35 var(--in-sans); }
.intro .in-regt .in-no{ font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
.intro .in-regt .in-th{ width:136px; }
.intro .in-regt .in-th img{ display:block; width:112px; height:56px; border:1px solid var(--f-line); }
.intro .in-regt .in-title a{ font:500 clamp(19px, 1.05rem + .3vw, 21px)/1.3 var(--in-serif); text-decoration:underline; text-decoration-color:var(--f-line);
  text-underline-offset:4px; text-decoration-thickness:1px; }
.intro .in-regt .in-title a:hover{ text-decoration-color:currentColor; }
.intro .in-regt tr:hover td{ background:var(--f-mark); }

/* ── the three fields ───────────────────────────────────────────────── */
.intro [data-field="blue"]{ --f-bg:#2254F2; --f-ink:#FFFFFF; --f-soft:rgba(255,255,255,.86); --f-line:rgba(255,255,255,.5); --f-strong:#FFFFFF;
  --f-acc:#F3E6C4; --f-acc-line:#F3E6C4; --f-mark:rgba(255,255,255,.08);
  --f-grid:linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px);
  --f-size:32px 32px; }
.intro [data-field="dark"]{ --f-bg:#17160F; --f-ink:#ECE6D8; --f-soft:#BDB5A5; --f-line:rgba(236,230,216,.36); --f-strong:#ECE6D8;
  --f-acc:#2254F2; --f-acc-line:#2254F2; --f-mark:rgba(236,230,216,.06);
  --f-grid:linear-gradient(rgba(236,230,216,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(236,230,216,.07) 1px, transparent 1px),
           linear-gradient(rgba(236,230,216,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(236,230,216,.028) 1px, transparent 1px);
  --f-size:40px 40px, 40px 40px, 8px 8px, 8px 8px; }
.intro [data-field="paper"]{ --f-bg:#F3EFE5; --f-ink:#1E1C18; --f-soft:#57524A; --f-line:rgba(30,28,24,.4); --f-strong:#1E1C18;
  --f-acc:#2254F2; --f-acc-line:#2254F2; --f-mark:rgba(34,84,242,.06);
  --f-grid:linear-gradient(rgba(34,84,242,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(34,84,242,.12) 1px, transparent 1px),
           linear-gradient(rgba(34,84,242,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(34,84,242,.05) 1px, transparent 1px);
  --f-size:40px 40px, 40px 40px, 8px 8px, 8px 8px; }

/* ── the parts that keep working (the draw-in itself is art.css) ───── */
.intro .art .band{ fill-opacity:0; }
.intro .art .band.cur{ fill-opacity:.24; }
.intro .art .hi{ fill:var(--art-acc); fill-opacity:.2; stroke:none; opacity:0; }
.intro .art .c{ transform:translate3d(0, calc(var(--py, 0) * 1px), 0); }
/* IN-1: one drawer slides out of the cabinet, a record lifts and settles, the drawer goes back */
.intro .art.on .drw{ animation:in-drw 9s cubic-bezier(.55, 0, .25, 1) 2.8s infinite both; }
.intro .art.on .drb{ animation:in-drb 9s linear 2.8s infinite both; }
.intro .art.on .crd{ animation:in-crd 9s ease-in-out 2.8s infinite both; }
@keyframes in-drw{ 0%, 12%{ transform:translate(64px, -37px); } 30%, 74%{ transform:translate(0, 0); } 90%, 100%{ transform:translate(64px, -37px); } }
@keyframes in-drb{ 0%, 13%{ opacity:0; } 17%, 82%{ opacity:1; } 88%, 100%{ opacity:0; } }
@keyframes in-crd{ 0%, 34%{ transform:translateY(0); } 44%, 58%{ transform:translateY(-22px); } 68%, 100%{ transform:translateY(0); } }
/* IN-2: the needle sweeps up from Largo, settles on the reading, then hunts a little, as a live meter does */
.intro .art.on .ndl2{
  animation:in-ndl 2.6s cubic-bezier(.25, .7, .3, 1) 1.6s both, in-hunt 5s ease-in-out 4.2s infinite; }
.intro .art .ndl2{ transform:rotate(var(--nd, 0deg)); }
@keyframes in-ndl{ 0%{ transform:rotate(calc(var(--nd, 0deg) - var(--sw, 97.5deg))); } 55%{ transform:rotate(calc(var(--nd, 0deg) + 5deg)); }
  74%{ transform:rotate(calc(var(--nd, 0deg) - 2.2deg)); } 88%{ transform:rotate(calc(var(--nd, 0deg) + .8deg)); } 100%{ transform:rotate(var(--nd, 0deg)); } }
@keyframes in-hunt{ 0%, 100%{ transform:rotate(var(--nd, 0deg)); } 30%{ transform:rotate(calc(var(--nd, 0deg) + .9deg)); } 62%{ transform:rotate(calc(var(--nd, 0deg) - .6deg)); } }
/* IN-4: the issue stamp presses the top sheet and lifts */
.intro .art.on .stp{ animation:in-stp 6s cubic-bezier(.5, 0, .3, 1) 2.8s infinite both; }
@keyframes in-stp{ 0%, 40%{ transform:translateY(0); } 52%{ transform:translateY(40px); } 58%{ transform:translateY(40px); } 74%, 100%{ transform:translateY(0); } }
/* off screen, every loop holds still (art.js drops .live) */
.intro .art.on:not(.live) :is(.drw, .drb, .crd, .ndl2, .rdh, .srt, .hi, .stp){ animation-play-state:paused; }

@media (prefers-reduced-motion: reduce){
  .intro .art *{ animation:none !important; }
  .intro .art .c{ transform:none; }
}

/* ── narrower screens ──────────────────────────────────────────────── */
@media (max-width:1000px){
  .intro .in-grid, .intro .in-sheet:nth-child(even) .in-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
@media (max-width:760px){
  .intro .in-grid, .intro .in-sheet:nth-child(even) .in-grid{ grid-template-columns:minmax(0,1fr); gap:22px; padding:22px 16px 28px; }
  .intro .in-sheet:nth-child(even) .in-art{ order:0; }          /* the drawing always above the text */
  .intro .art .c{ transform:none; }
  .intro .in-text{ max-width:none; }
  .intro .in-tb{ grid-template-columns:minmax(0,1fr) auto; }
  .intro .in-tb > span:nth-child(1), .intro .in-tb > span:nth-child(3), .intro .in-tb > span:nth-child(4){ display:none; }
  .intro .in-tb > span:nth-child(2){ border-left:0; }
  .intro .in-tb > span{ padding:9px 12px; }
  .intro .in-tb .in-new{ display:none; }
  /* the register as stacked rows */
  .intro .in-regt, .intro .in-regt tbody, .intro .in-regt tr{ display:block; }
  .intro .in-regt thead{ display:none; }
  .intro .in-regt tr{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:4px 12px; padding:12px; border-top:1px solid var(--f-line); }
  .intro .in-regt tr:first-child{ border-top:0; }
  .intro .in-regt td{ display:block; padding:0; border:0; }
  .intro .in-regt .in-th{ grid-row:1 / span 4; width:auto; }
  .intro .in-regt .in-th img{ width:96px; height:48px; }
  .intro .in-regt .in-rev::before{ content:"Rev. "; font-weight:400; color:var(--f-soft); }
  .intro .in-regt .in-st{ font-size:14px; color:var(--f-soft); }
  .intro .in-regt .in-rev{ font-size:14px; }
}