/* 8472 Studio. The same paper, ink and pixel title as the print page (prints.8472.studio), laid
   out wide: a table with the work set out on it as instant prints, where the print page is the
   narrow receipt. Serif text, a red order line, dashed rules, readouts in the pixel face.
   Opening record 8472-005 infects the page: the table goes dark, the prints stay white. */
@font-face{font-family:"VT323";src:url("fonts/VT323-400.woff2") format("woff2");font-display:swap;}
@font-face{font-family:"Frank Ruhl";src:url("fonts/FrankRuhlLibre-400.woff2") format("woff2");font-weight:300 900;font-display:swap;}

:root{
  --paper:#FFFFFF;      /* the table */
  --panel:#F4F2EC;      /* quiet blocks */
  --line:#D8D8D8;       /* print edges, light rules */
  --ink:#000000;
  --dim:#3D3D3D;        /* secondary text, dark enough to read at pixel sizes */
  --signal:#DF001D;     /* the red order line */
  --signal-soft:#FDE8EA;
  --card:#FDFCF8;       /* film border white; stays white when the page goes dark */
  --card-ink:#111111;
  --display:"Frank Ruhl",Georgia,"Times New Roman",serif;
  --body:"Frank Ruhl",Georgia,"Times New Roman",serif;
  --mono:"VT323","Courier New",monospace;   /* readouts, ids, labels: the pixel face */
  --logo:"VT323","Courier New",monospace;
  color-scheme:light;
}
/* infected: opening record 8472-005 lets the station's signal into the archive until it is purged */
:root[data-infected]{
  --paper:#050506;
  --panel:#141416;
  --line:#3A2B2F;
  --ink:#F2F2F2;
  --dim:#B0A6A8;
  --signal:#FF2E3F;     /* the station's one red; 5.7:1 on the ground */
  --signal-soft:#3A0D12;
  color-scheme:dark;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--paper);}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.1875rem;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
  transition:background-color .7s ease,color .7s ease;
}
img{max-width:100%;}
a{color:inherit;text-underline-offset:3px;}
a:hover{color:var(--signal);}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.wrap{max-width:1120px;margin:0 auto;padding-inline:clamp(16px,4vw,48px);padding-block:0 48px;}
.mono{font-family:var(--mono);font-size:1.25rem;line-height:1.25;letter-spacing:0.02em;color:var(--dim);}

/* the title: pixel 8472 on a heavy underline, as on the print page */
/* the logo: pixel 8472 with "studio" under it in the same face. The heavy underline is off (James, 17 Oct 2026); set --px-ul:0.085em on :root to bring it back. */
.px{
  display:inline-block;font:400 1em/0.8 var(--logo);letter-spacing:0.02em;color:var(--ink);
  -webkit-text-stroke:0.03em var(--ink);border-bottom:var(--px-ul,0) solid var(--ink);
}
.px small{display:block;font-size:0.5em;line-height:1;letter-spacing:0.19em;margin:0.12em -0.19em 0 0;-webkit-text-stroke:0.03em var(--ink);}

/* top bar */
.bar{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:10;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px;
  padding-block:12px;background:var(--paper);border-bottom:2px dashed var(--ink);
  transition:background-color .7s ease,border-color .7s ease;
}
.lockup{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);}
.lockup:hover{color:var(--ink);}
.lockup .px{font-size:2.5rem;}
.segs{display:flex;gap:2px;align-items:flex-end;height:14px;}
.segs i{display:block;width:5px;height:14px;background:var(--line);}
.segs i.f{background:var(--ink);}
.segs i.p{background:linear-gradient(to top,var(--signal) 47%,var(--line) 47%);}
.bar nav{display:flex;flex-wrap:wrap;gap:4px 20px;}
.bar nav a{font-family:var(--mono);font-size:1.3rem;line-height:1.2;letter-spacing:0.02em;color:var(--ink);text-decoration:none;}
.bar nav a:hover{color:var(--signal);text-decoration:underline;}

/* the intercepted-signal link and the strip that appears once the archive is infected */
.bar nav a.sig{white-space:nowrap;}
.bar nav a.sig::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#FF2E3F;margin-right:7px;vertical-align:1px;}
/* the way out to the print page: a small print-shaped marker, so it is not the red signal dot */
.bar nav a.prt{white-space:nowrap;}
.bar nav a.prt::before{content:"";display:inline-block;width:7px;height:10px;border:1.5px solid var(--ink);border-bottom-width:3.5px;margin-right:7px;vertical-align:-1px;}
:root[data-infected] .bar nav a.sig{color:var(--signal);text-decoration:underline;}
.infect-bar{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 20px;padding-top:10px;border-top:2px dashed var(--line);color:var(--signal);}
.infect-bar p{margin:0;}
@media (max-width:760px){.infect-bar .tail{display:none;}.infect-bar{flex-wrap:nowrap;}}
.infect-bar button{font:inherit;letter-spacing:inherit;color:var(--ink);background:none;border:2px solid var(--ink);border-radius:5px;padding:3px 12px;cursor:pointer;}
.infect-bar button:hover{background:var(--ink);color:var(--paper);}
:root[data-infected] .whisper{display:block;}
:root[data-infected] .scanfield{display:block;}
.scanfield{display:none;position:fixed;inset:0;z-index:20;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 3px,rgba(255,255,255,.035) 3px 4px);}
@media (prefers-reduced-motion:no-preference){
  .glitching body{animation:infect .65s steps(1,end);}
  @keyframes infect{
    0%{filter:none;transform:none;}
    12%{filter:invert(1);transform:translateX(-6px) skewX(-2deg);}
    24%{filter:none;transform:translateX(5px);clip-path:inset(18% 0 46% 0);}
    38%{filter:invert(1) hue-rotate(140deg);transform:translateX(-3px) skewX(3deg);clip-path:none;}
    52%{filter:none;transform:translateY(3px);clip-path:inset(60% 0 8% 0);}
    66%{filter:invert(1);transform:translateX(8px);clip-path:inset(4% 0 70% 0);}
    80%{filter:contrast(2) saturate(0);transform:none;clip-path:none;}
    100%{filter:none;transform:none;}
  }
}

/* display type */
h1,h2{font-family:var(--display);font-weight:500;line-height:1.1;letter-spacing:-0.01em;margin:0;text-wrap:balance;}
h1{font-size:clamp(2rem,4vw,3.2rem);}
h2{font-size:clamp(1.7rem,3.1vw,2.6rem);}

/* hero: the title block on the left, the work laid out as prints on the right */
.hero{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px clamp(28px,5vw,72px);align-items:center;
  padding-block:clamp(36px,7vh,80px) clamp(30px,6vh,64px);
}
.hero-title{margin:0 0 30px;display:flex;align-items:flex-end;gap:16px;line-height:1;}
.hero-title .px{font-size:clamp(6rem,13vw,9.5rem);}
.hero h1{font-size:clamp(1.3rem,2.1vw,1.6rem);font-weight:400;line-height:1.3;letter-spacing:0;margin:0 0 16px;}
.red{color:var(--signal);margin:0 0 22px;font-size:1.3125rem;}
.hero .lede{max-width:44ch;margin:0;}
.hero-prints{container-type:inline-size;}
.fan{
  --w:min(150px,calc((100cqw - 40px) / 3));   /* short side of a print */
  display:grid;grid-template-columns:repeat(3,var(--w));gap:26px 20px;justify-content:center;
  list-style:none;margin:0;padding:0;
}
.fan li{transform:rotate(var(--tilt,0deg));transition:transform .2s ease;}
.fan li:hover,.fan li:focus-within{transform:rotate(0deg) translateY(-6px);}
/* an Instax Mini print: 54 by 86, picture 46 by 62, the wide border at the bottom */
.print{
  position:relative;display:block;width:var(--w);height:calc(var(--w) * 86 / 54);
  background:var(--card);border:1px solid #D8D8D8;box-shadow:2px 3px 7px rgba(0,0,0,.18);
  color:var(--card-ink);text-decoration:none;
}
.print:hover{color:var(--card-ink);}
.print .photo{
  position:absolute;left:calc(var(--w) * 4 / 54);top:calc(var(--w) * 7 / 54);
  width:calc(var(--w) * 46 / 54);height:calc(var(--w) * 62 / 54);
  overflow:hidden;background:#1C1B1A;
}
.print .photo img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--at,50% 50%);}
.print .cap{
  position:absolute;left:0;right:0;bottom:0;height:calc(var(--w) * 17 / 54);
  display:grid;place-items:center;font:400 calc(var(--w) * 0.125)/1 var(--mono);letter-spacing:0.02em;white-space:nowrap;
}
.print:hover .cap,.print:focus-visible .cap{text-decoration:underline;}
/* the cookie line at the foot: one small line, the way out a plain link */
.cookie-line{flex-basis:100%;font-size:1rem;color:var(--dim);}
.cookie-line a{color:inherit;}
.hero-note{display:flex;justify-content:flex-end;align-items:flex-start;gap:6px;margin:14px 8% 0 0;}
.note{display:inline-block;font-size:0.875rem;transform:rotate(6deg);}
svg.doodle{display:block;overflow:visible;fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;}
@media (prefers-reduced-motion:no-preference){
  /* the one moment on the page: the prints develop, one after another, when it opens */
  .print .photo img{animation:develop 4s ease-out both;animation-delay:calc(var(--n,0) * 320ms + 250ms);}
  @keyframes develop{
    0%{opacity:0;filter:sepia(.9) saturate(.2) contrast(.4) brightness(.55);}
    35%{opacity:.55;filter:sepia(.7) saturate(.4) contrast(.6) brightness(.8);}
    100%{opacity:1;filter:none;}
  }
}

/* a line of text sliding between two dashed rules */
.rule{border-top:2px dashed var(--ink);border-bottom:2px dashed var(--ink);overflow:hidden;white-space:nowrap;padding:9px 0;margin:0;}
.rule > div{display:inline-block;animation:slide 40s linear infinite;}
.rule span{display:inline-block;padding-right:44px;color:var(--ink);}
@keyframes slide{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.rule > div{animation:none;}}

/* the second voice: lines that only show once the archive is infected */
.whisper{display:none;margin:22px 0 0;color:var(--signal);max-width:none;}

/* buttons: boxed, like the print page's */
.btn{
  display:inline-block;font:1.0625rem/1.2 Arial,Helvetica,sans-serif;text-decoration:none;
  padding:12px 20px;min-height:44px;border:2px solid var(--ink);border-radius:5px;cursor:pointer;
  background:var(--ink);color:var(--paper);
}
.btn:hover{background:var(--paper);color:var(--ink);}
.btn.ghost{background:var(--paper);color:var(--ink);}
.btn.ghost:hover{background:var(--ink);color:var(--paper);}
/* a box with a button bar along the bottom */
a.box{display:block;max-width:380px;border:2px solid var(--ink);border-radius:5px;font:1.0625rem/1.2 Arial,Helvetica,sans-serif;text-align:center;text-decoration:none;color:var(--ink);}
.box b{display:block;font-weight:normal;padding:26px 12px;}
.box span{display:block;border-top:2px solid var(--ink);padding:12px;}
a.box:hover span,a.box:focus-visible span{background:var(--ink);color:var(--paper);}

/* index of records: a receipt, one line per record, a total at the foot */
.records{padding-block:clamp(36px,7vh,72px) clamp(48px,9vh,100px);}
.plate-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 20px;padding:9px 0;border-top:2px dashed var(--ink);border-bottom:2px dashed var(--ink);color:var(--ink);transition:border-color .7s ease;}
.records .plate-head{border-top:0;padding-top:0;}
.index{list-style:none;margin:6px 0 0;padding:0;}
.index li{
  display:grid;grid-template-columns:7.5rem minmax(0,1.7fr) minmax(0,1.5fr) 8rem;gap:2px 18px;align-items:baseline;
  padding:13px 0;border-bottom:2px dotted var(--ink);
}
.index .id,.index .kind,.index .st{font-family:var(--mono);font-size:1.25rem;line-height:1.2;letter-spacing:0.02em;color:var(--dim);min-width:0;overflow-wrap:anywhere;}
.index .name{font-size:clamp(1.2rem,1.8vw,1.4rem);line-height:1.2;}
.index .name a{text-decoration:none;}
.index .name a:hover{text-decoration:underline;}
.index .st{color:var(--ink);white-space:nowrap;text-align:right;}
.dot{display:inline-block;width:9px;height:9px;margin-right:8px;border:1.5px solid var(--ink);vertical-align:1px;}
.dot.full{background:var(--ink);}
.dot.part{background:linear-gradient(90deg,var(--ink) 50%,transparent 50%);}
.total{display:flex;align-items:baseline;gap:8px;margin:16px 0 0;font-weight:700;font-size:1.3rem;}
.total i{flex:1;border-bottom:2px dotted var(--ink);transform:translateY(-4px);}
@media (max-width:760px){
  .index li{grid-template-columns:1fr auto;}
  .index .id{grid-column:1;}
  .index .st{grid-column:2;grid-row:1;}
  .index .name,.index .kind{grid-column:1 / -1;}
}

/* plates */
.plate{padding-block:0 clamp(64px,12vh,140px);}
.plate-title{margin-block:clamp(28px,5vh,52px) clamp(24px,4vh,44px);}
.sigil{display:none;}
.plate p{max-width:50ch;margin:0 0 20px;}
figure{margin:0;min-width:0;}
figure img{display:block;width:100%;height:auto;object-fit:cover;}
figcaption{margin-top:8px;}

/* pictures sit in white print frames, wide border at the bottom */
.shot,.spread figure,.phones figure,.frames figure{
  padding:10px 10px 30px;background:var(--card);border:1px solid #D8D8D8;box-shadow:2px 3px 8px rgba(0,0,0,.2);
}
.shot figcaption,.spread figcaption,.phones figcaption,.frames figcaption{margin:7px 0 -23px;color:#333;text-align:center;}
.shot img{aspect-ratio:16/10;object-position:top;}

/* 001: prints, set down a little askew */
.spread{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(28px,5vw,56px) clamp(16px,3vw,40px);align-items:start;}
.spread figure{transform:rotate(var(--tilt,0deg));}
.s-a{grid-column:1 / 8;--tilt:-1.2deg;}
.s-a img{aspect-ratio:4/3;}
.s-b{grid-column:9 / 13;margin-top:clamp(40px,9vw,130px);--tilt:2deg;}
.s-b img{aspect-ratio:3/4;}
.s-text{grid-column:1 / 7;}
.s-c{grid-column:8 / 12;--tilt:-1.6deg;}
.s-c img{aspect-ratio:3/4;}
.s-text .alt{margin-top:14px;font-size:.95em;}
.film{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 26px;border-top:2px dotted var(--ink);}
.film div{padding:9px 0;border-bottom:2px dotted var(--ink);}
.film dt{font-family:var(--mono);font-size:1.1875rem;line-height:1.2;letter-spacing:0.02em;color:var(--dim);}
.film dd{margin:0;font-size:1.125rem;font-variant-numeric:tabular-nums;}
@media (max-width:760px){
  .s-a,.s-b,.s-text,.s-c{grid-column:1 / -1;margin-top:0;}
  .s-b,.s-c{max-width:74%;}
  .s-b{margin-left:auto;}
}

/* 002 to 005: one row each, the second mirrored */
.site{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px clamp(16px,3vw,40px);align-items:end;}
.site + .site{margin-top:clamp(48px,9vh,100px);}
.site > .shot{grid-column:1 / 9;transform:rotate(-0.6deg);}
.site-text{grid-column:9 / 13;}
.site.flip > .shot{grid-column:5 / 13;transform:rotate(0.6deg);}
.site.flip .site-text{grid-column:1 / 5;grid-row:1;}
.site-text h3{font-family:var(--display);font-weight:500;font-size:clamp(1.4rem,2.1vw,1.7rem);line-height:1.15;margin:4px 0 10px;}
.site-text .more{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:1.3rem;letter-spacing:0.02em;}
@media (max-width:760px){
  .site > .shot,.site .site-text,.site.flip > .shot,.site.flip .site-text{grid-column:1 / -1;}
  .site.flip .site-text{grid-row:auto;}
}

/* 006 and contact */
.undeveloped{--w:150px;display:flex;align-items:flex-end;gap:18px;margin-top:8px;}
.undeveloped .print{transform:rotate(-3deg);flex:none;}
.undeveloped .note{transform:rotate(-4deg);margin-bottom:26px;}
.next .segs{height:26px;gap:4px;margin-top:8px;}
.next .segs i{width:12px;height:26px;}
.addr{font-family:var(--logo);font-size:clamp(2rem,5.4vw,3.6rem);line-height:1;overflow-wrap:anywhere;user-select:all;-webkit-user-select:all;margin:0 0 18px;}

/* contact: a business card. the person as a print on the left, the offer on the right, the address,
   then links boxed and big enough for a thumb, each with a picture so they read on a small phone */
.card{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px clamp(28px,5vw,72px);align-items:start;}
figure.print.me{--w:clamp(200px,24vw,280px);margin:10px auto 0;transform:rotate(var(--tilt,-3deg));transition:transform .2s ease;}
figure.print.me:hover{transform:rotate(0deg) translateY(-6px);}
figure.print.me .cap{margin:0;}
.card-text > span.mono{display:block;}
.card-text h3{font-family:var(--display);font-weight:500;font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1.1;margin:6px 0 16px;}
.card-text p{max-width:52ch;}
.card-text .lead-in{font-family:var(--mono);font-size:1.25rem;letter-spacing:0.02em;color:var(--dim);margin:26px 0 0;}
.can{list-style:none;margin:6px 0 30px;padding:0;border-top:2px dotted var(--ink);max-width:60ch;}
.can li{padding:12px 0;border-bottom:2px dotted var(--ink);}
.can b{font-weight:700;}
.links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;}
.links a,.links button{
  display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:8px 16px;
  border:2px solid var(--ink);border-radius:5px;font:1.0625rem/1.2 Arial,Helvetica,sans-serif;
  color:var(--ink);background:var(--paper);text-decoration:none;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.links a:hover,.links button:hover,.links a:active,.links button:active{background:var(--ink);color:var(--paper);}
.links .em{font-size:1.3em;line-height:1;}
@media (max-width:900px){.card{grid-template-columns:1fr;}}
@media (max-width:760px){
  .links li{flex:1 1 calc(50% - 5px);min-width:0;}
  .links a,.links button{width:100%;justify-content:flex-start;font-size:1.125rem;}
}

/* share with a friend: answers the finger at once, no double-tap wait, no grey flash */
.share{text-align:center;margin:48px 0 8px;}
.share p{margin:0 auto 12px;}
.share .share-more{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:12px 0 0;}
.share .btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;}
.share [data-share]{min-width:210px;}
.share .btn:active{background:var(--ink);color:var(--paper);}
.share-more .btn{font-size:0.9375rem;min-width:96px;}

/* record pages: one long read per record, same plates, wider pictures */
.rec-hero{padding-block:clamp(36px,7vh,80px) clamp(28px,5vh,56px);}
.rec-hero h1{margin-top:clamp(28px,5vh,56px);max-width:18ch;}
.rec-hero .lede{max-width:52ch;margin:26px 0 30px;}
.rec-facts{grid-template-columns:repeat(3,minmax(0,1fr));max-width:860px;}
.rec-wide{margin-block:0 clamp(48px,9vh,100px);}
.rec-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,5vw,72px);align-items:start;}
.rec-cols p{max-width:none;}
.rec-mark{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px clamp(28px,5vw,72px);align-items:center;}
.mark-box{position:relative;aspect-ratio:1;max-width:460px;width:100%;display:grid;place-items:center;background:var(--card);border:1px solid #D8D8D8;box-shadow:2px 3px 8px rgba(0,0,0,.2);}
.mark-box .mark{width:62%;aspect-ratio:1;background:#000;-webkit-mask:url(img/q/q-symbol.svg) center/contain no-repeat;mask:url(img/q/q-symbol.svg) center/contain no-repeat;}
.mark-box .tl,.mark-box .br{position:absolute;color:#333;}
.mark-box .tl{top:10px;left:14px;} .mark-box .br{bottom:10px;right:14px;}
.swatches{list-style:none;margin:8px 0 30px;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;}
.swatches li{display:flex;flex-direction:column;gap:2px;min-width:0;}
.swatches i{display:block;width:100%;height:clamp(110px,15vw,220px);border:1px solid var(--line);margin-bottom:8px;}
.swatches b{font-weight:500;}
.swatches .mono{overflow-wrap:anywhere;}
.ratios{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;}
.specimens{display:grid;gap:0;margin:0 0 30px;border-top:2px dotted var(--ink);}
.spec{display:grid;grid-template-columns:14rem minmax(0,1fr);gap:8px 28px;align-items:baseline;padding:18px 0;border-bottom:2px dotted var(--ink);}
.spec p{margin:0;max-width:none;line-height:1.15;}
.spec-garamond{font-family:'EB Garamond',Garamond,Georgia,serif;font-size:clamp(2.2rem,5vw,4rem);}
.spec-garamond em{font-style:italic;background:#FBDD8E;color:#28212B;padding:0 .08em;}
.spec-caslon{font-family:'Libre Caslon Text','Adobe Caslon Pro',Georgia,serif;font-size:clamp(1.6rem,3.4vw,2.6rem);}
.spec-avenir{font-family:Avenir,'Avenir Next','Nunito Sans','Helvetica Neue',sans-serif;font-size:1.125rem;line-height:1.6!important;}
.recipe{margin:0;padding:0 0 0 1.6em;display:grid;gap:6px;font-size:1rem;color:var(--ink);}
.recipe li::marker{color:var(--signal);}
.rec-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,40px);margin-top:clamp(30px,6vh,64px);}
.phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,40px);max-width:900px;margin:clamp(30px,6vh,64px) 0 10px;}
.phones figure:nth-child(2){margin-top:clamp(30px,8vw,110px);}
.phones img{aspect-ratio:600/1298;}
.readouts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(16px,3vw,40px);margin:0 0 34px;border-top:2px dotted var(--ink);}
.readouts div{padding:14px 0;border-bottom:2px dotted var(--ink);display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:4px;}
.readouts dd{margin:0;font-family:var(--logo);font-size:clamp(3rem,6vw,4.8rem);line-height:0.9;font-variant-numeric:tabular-nums;color:var(--ink);}
.mark-box.dark{background:#000;border-color:#000;}
.mark-box.dark img{width:70%;height:auto;}
.mark-box.dark .mono{color:#C8C8C8;}
.swatches.four{grid-template-columns:repeat(4,minmax(0,1fr));}
.ratios.three{grid-template-columns:repeat(3,minmax(0,1fr));}
.ratios.tiers{margin-bottom:clamp(30px,6vh,64px);}
.specimens.on-black{background:#000;border:0;padding:6px clamp(16px,3vw,32px);}
.specimens.on-black .spec{border-color:#3A3A3A;}
.specimens.on-black .spec:last-child{border-bottom:0;}
.specimens.on-black .mono{color:#C8C8C8;}
.specimens.on-black p{color:#FFF;}
.spec-mont{font-family:'Montserrat','Trebuchet MS',sans-serif;font-weight:700;font-size:clamp(1.9rem,4.4vw,3.4rem);}
.spec-mont-body{font-family:'Montserrat','Trebuchet MS',sans-serif;font-size:1.0625rem;line-height:1.6!important;}
.spec-raleway{font-family:'Raleway','Trebuchet MS',sans-serif;font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.3!important;}
.rec-split{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:clamp(16px,3vw,40px);align-items:start;margin-bottom:clamp(30px,6vh,64px);}
.rec-split .phone img{aspect-ratio:600/1298;}
@media (max-width:760px){
  .swatches.four{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ratios.three{grid-template-columns:1fr;}
  .rec-split{grid-template-columns:1fr;}
  .rec-split .phone{max-width:60%;}
}
/* the intercept: the one place a foreign signal is allowed onto the page. Always dark, one red
   light; it does not follow the page's own palette. */
.intercept{position:relative;margin-block:0 clamp(48px,9vh,100px);background:#000;color:#FFF;overflow:hidden;}
.intercept img{display:block;width:100%;height:clamp(320px,56vw,640px);object-fit:cover;object-position:50% 20%;opacity:.92;}
.intercept .scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.28) 2px 3px);}
.intercept .mono{color:#E8ECF0;}
.intercept-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;gap:12px;padding:14px clamp(16px,3vw,32px);}
.lamp{display:inline-block;width:9px;height:9px;border-radius:50%;background:#FF2E3F;box-shadow:0 0 12px #FF2E3F;margin-right:10px;}
.station-log{position:absolute;left:0;right:0;bottom:44px;list-style:none;margin:0;padding:0 clamp(16px,3vw,32px);display:grid;gap:4px;font-size:clamp(1.0625rem,1.9vw,1.3rem);text-shadow:0 1px 6px #000;}
.station-log li:last-child{margin-top:10px;color:#FFF;}
.intercept figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:10px clamp(16px,3vw,32px) 14px 36px;color:#C8C8C8;font-size:1rem;}
@media (prefers-reduced-motion:no-preference){
  .lamp{animation:lamp 2.4s steps(1,end) infinite;}
  @keyframes lamp{0%,70%{opacity:1;}71%,100%{opacity:.25;}}
}
.intercept.small{grid-column:1 / 9;margin:0;}
.intercept.small img{height:clamp(260px,40vw,460px);}
.intercept.small .station-log{bottom:18px;}
@media (max-width:760px){.intercept.small{grid-column:1 / -1;}}
.index.series li{grid-template-columns:7.5rem minmax(0,1.3fr) minmax(0,1.9fr) 7rem;}
/* the source map: a second contained panel on record 8472-005. Sources are numbered so nothing
   depends on colour; the core is the only red mark and is also the only diamond. */
.intercept.skymap{padding:52px clamp(16px,3vw,32px) 18px;margin-block:8px clamp(24px,4vh,40px);}
.skymap svg{display:block;width:100%;height:auto;}
.skymap .grid path{stroke:#2A2F36;stroke-width:1;fill:none;}
.skymap .plane{stroke:#8A949F;stroke-width:1.2;stroke-dasharray:3 6;fill:none;}
.skymap text{font-family:var(--mono);fill:#C8C8C8;font-size:19px;}
.skymap text.n{fill:#FFF;font-size:26px;}
.skymap text.pl{font-size:17px;}
.skymap .src{fill:#FFF;}
.skymap .core{fill:#FF2E3F;stroke:#FFF;stroke-width:1.5;}
.crew-log{list-style:none;margin:18px 0 0;padding:14px 0 0;border-top:1px solid #2A2F36;display:grid;gap:5px;font-size:clamp(1.0625rem,1.8vw,1.1875rem);}
.intercept.skymap figcaption{position:static;padding:14px 0 0;}
.orbit-log.sources li{grid-template-columns:2rem 9.5rem minmax(0,1fr) 15rem;}
.orbit-log.sources .mono{white-space:nowrap;}
@media (max-width:760px){
  .orbit-log.sources li{grid-template-columns:2rem minmax(0,1fr);}
  .orbit-log.sources li span{grid-column:2;}
}
.frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2.4vw,32px);margin-top:clamp(30px,6vh,64px);}
.frames img{aspect-ratio:1;}
.spec-title{font-family:var(--mono);font-size:clamp(1.2rem,2.4vw,1.7rem);line-height:1.3!important;overflow-wrap:anywhere;}
.acts{list-style:none;margin:8px 0 30px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(16px,3vw,40px);border-top:2px dotted var(--ink);}
.acts li{padding:16px 0;border-bottom:2px dotted var(--ink);min-width:0;}
.acts h3{font-family:var(--display);font-weight:500;font-size:1.3rem;line-height:1.2;margin:8px 0 10px;}
.acts p{margin:0 0 10px;max-width:none;font-size:1.0625rem;}
.acts .beat{color:var(--signal);margin:0;}
.orbit-log{list-style:none;margin:8px 0 0;padding:0;border-top:2px dotted var(--ink);}
.orbit-log li{display:grid;grid-template-columns:4.5rem 5rem minmax(0,1fr);gap:4px 18px;align-items:baseline;padding:10px 0;border-bottom:2px dotted var(--ink);}
.orbit-log b{font-family:var(--logo);font-weight:400;font-size:1.3rem;line-height:1;font-variant-numeric:tabular-nums;}
.rec-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-block:0 28px;}
.rec-nav a{color:var(--ink);text-decoration:none;}
.rec-nav a:hover{color:var(--signal);text-decoration:underline;}
@media (max-width:760px){
  .index.series li{grid-template-columns:1fr auto;}
  .frames{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
  .frames figure{padding:5px 5px 16px;}
  .acts{grid-template-columns:repeat(2,minmax(0,1fr));}
  .orbit-log li{grid-template-columns:3.6rem 4.2rem minmax(0,1fr);gap:4px 10px;}
  .station-log{bottom:58px;}
}
.record .next .segs{margin-top:34px;}
@media (max-width:760px){
  .rec-facts{grid-template-columns:repeat(2,minmax(0,1fr));}
  .rec-cols,.rec-mark,.rec-pair{grid-template-columns:1fr;}
  .swatches{grid-template-columns:repeat(3,minmax(0,1fr));}
  .ratios,.readouts{grid-template-columns:repeat(2,minmax(0,1fr));}
  .spec{grid-template-columns:1fr;}
  .phones{gap:10px;}
  .phones figure{padding:5px 5px 16px;}
}

footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-top:14px;border-top:2px dashed var(--ink);color:var(--ink);}
.foot-links{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:4px;}
.foot-links a{color:var(--ink);text-decoration:none;font-size:1.3rem;padding:4px 0;}
.foot-links a:hover{color:var(--signal);text-decoration:underline;}
@media (max-width:480px){
  footer{flex-direction:column;align-items:flex-start;gap:6px;}
  .foot-links{flex-basis:auto;width:100%;align-self:stretch;gap:6px 18px;margin-bottom:8px;}
  .foot-links a{font-size:1.35rem;padding:6px 0;}
}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;}
  .hero-prints{max-width:520px;width:100%;margin:0 auto;}
}
@media (max-width:480px){
  .lockup .px{font-size:2.1rem;}
  .bar nav{gap:2px 16px;}
  .bar nav a{font-size:1.25rem;}
  .fan{gap:20px 12px;--w:min(150px,calc((100cqw - 24px) / 3));}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  body,.bar{transition:none;}
  .fan li{transition:none;}
}

/* record 8472-006, paper: landscape cards and portrait flyers side by side, slides in a strip */
.rec-pair.cards img{aspect-ratio:1000/646;}
.rec-pair.flyer{max-width:900px;}
.rec-pair.flyer img{aspect-ratio:1000/1416;}
.rec-pair + .film{margin-top:clamp(30px,6vh,64px);}
.rec-split.receipt{grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:1000px;}
.rec-split.receipt figure{padding:10px 10px 30px;background:var(--card);border:1px solid #D8D8D8;box-shadow:2px 3px 8px rgba(0,0,0,.2);transform:rotate(0.8deg);}
.rec-split.receipt figcaption{margin:7px 0 -23px;color:#333;text-align:center;}
.rec-split.receipt .phone img{aspect-ratio:700/2009;}
.slides{list-style:none;margin:0 0 clamp(30px,6vh,64px);padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2.4vw,32px);}
.slides li{padding:8px 8px 22px;background:var(--card);border:1px solid #D8D8D8;box-shadow:2px 3px 8px rgba(0,0,0,.2);transform:rotate(var(--t,0deg));}
.slides li:nth-child(odd){--t:-0.8deg;} .slides li:nth-child(even){--t:0.8deg;}
.slides img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;}
.paper-shot img{aspect-ratio:1000/646;object-position:center;}
.plate p.small{font-size:0.95em;color:var(--dim);}
.mark-box img{width:80%;height:auto;}
@media (max-width:760px){
  .rec-split.receipt{grid-template-columns:1fr;}
  .rec-split.receipt figure{max-width:70%;margin:0 auto;}
  .slides{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.rec-pair + p.small{margin-top:30px;}

/* the found cards are shown as the cards themselves: the artwork already carries the Instax border */
.cardset{list-style:none;margin:clamp(30px,6vh,64px) 0 clamp(30px,6vh,64px);padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,2.4vw,28px);}
.cardset li{display:flex;flex-direction:column;gap:10px;align-items:center;transform:rotate(var(--t,0deg));}
.cardset img{display:block;width:100%;height:auto;aspect-ratio:697/1039;border-radius:3px;box-shadow:2px 4px 10px rgba(0,0,0,.22);}
.cardset .mono{font-size:1rem;}
@media (max-width:760px){.cardset{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px;}}

/* 8472-005 is not one of the studio's records: it was found already running. It gets no plate
   like the others: a dark ground, a terminal line for a heading, the one red, a lamp. */
.plate.signals{background:#000;color:#FFF;padding:12px clamp(16px,3vw,32px) clamp(48px,9vh,100px);margin-bottom:clamp(64px,12vh,140px);position:relative;}
.plate.signals::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 3px,rgba(255,255,255,.04) 3px 4px);}
.plate.signals .plate-head.sighead{border-color:#FF2E3F;color:#FF2E3F;}
.plate.signals .mono{color:#C8C8C8;}
.plate.signals .plate-head.sighead .lamp{vertical-align:0;}
.plate.signals .term{font-family:var(--mono);font-weight:400;font-size:clamp(1.5rem,2.9vw,2.4rem);line-height:1.2;letter-spacing:0.02em;color:#FFF;text-transform:lowercase;}
.plate.signals .term .cur{display:inline-block;width:0.55em;height:1em;margin-left:0.15em;background:#FF2E3F;vertical-align:-0.15em;}
.plate.signals .site-text h3 a{color:#FFF;}
.plate.signals .site-text h3 a:hover,.plate.signals a.more:hover{color:#FF2E3F;}
.plate.signals a.more{color:#FFF;}
.plate.signals .whisper{color:#FF2E3F;}
.plate.signals .intercept{border:1px solid #2A2A2A;}
.plate.signals .site-text p{color:#E8ECF0;}
@media (prefers-reduced-motion:no-preference){
  .plate.signals .term .cur{animation:cur 1.1s steps(1,end) infinite;}
  @keyframes cur{50%{opacity:0;}}
}
/* the station's line in the index: lower case, the one red, a lamp instead of a dot */
.index .sigrow .id,.index .sigrow .kind{color:#9A9A9A;}
.index .sigrow .name a{font-family:var(--mono);font-size:1.25rem;letter-spacing:0.02em;color:var(--signal);}
.index .sigrow .st{color:var(--signal);}
.index .sigrow .lamp{width:8px;height:8px;vertical-align:1px;}
/* and in the fan: a darker card */
.fan .sigprint{background:#111;border-color:#111;color:#E8ECF0;}
.fan .sigprint .cap{color:#FF2E3F;}

/* 8472-007: the next record is the reader's. Text beside the empty frame. */
.next-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,5vw,72px);align-items:end;}
.next-row .undeveloped{margin:0 0 6px;}
.steps{max-width:52ch;}
.steps dt{color:var(--ink);}
.next .contact-row{margin:6px 0 0;}
@media (max-width:760px){.next-row{grid-template-columns:1fr;}.next-row .undeveloped{margin-top:18px;}}
.contact-row{display:flex;flex-wrap:wrap;gap:10px 12px;margin:0 0 18px;}

/* the very bottom of the home page: a terminal left open by the companion. Green phosphor on black,
   the only green on the site, paired with shape (the prompt, the block cursor) never with red. */
.tty{display:block;margin:clamp(40px,8vh,90px) 0 0;padding:14px clamp(14px,2.5vw,22px) 18px;background:#050806;color:#5CFF8A;text-decoration:none;font-family:var(--mono);font-size:1.1875rem;line-height:1.45;letter-spacing:0.02em;border:1px solid #163A22;box-shadow:inset 0 0 40px rgba(92,255,138,.06);}
.tty:hover{color:#8CFFAE;}
.tty .tty-top{display:block;margin-bottom:10px;color:#3E9E5C;font-size:1rem;}
.tty .led{display:inline-block;width:8px;height:8px;border-radius:50%;background:#5CFF8A;box-shadow:0 0 10px #5CFF8A;margin-right:9px;vertical-align:1px;}
.tty .tty-line{display:block;text-shadow:0 0 6px rgba(92,255,138,.35);}
.tty u{text-decoration-thickness:1px;text-underline-offset:3px;}
.tty .blk{display:inline-block;width:0.6em;height:1em;margin-left:0.2em;background:#5CFF8A;vertical-align:-0.15em;}
@media (prefers-reduced-motion:no-preference){
  .tty .blk{animation:cur 1s steps(1,end) infinite;}
  .tty .tty-line{animation:ttyin .01s linear backwards;}
  .tty .tty-line:nth-child(2){animation-delay:.4s;} .tty .tty-line:nth-child(3){animation-delay:1.3s;} .tty .tty-line:nth-child(4){animation-delay:2.3s;}
  @keyframes ttyin{from{opacity:0;}}
}