/* echo//exit: the paper world. Photocopied sheets lying on the copier's glass.
   Nothing fades, slides, eases or scales: every change is a hard cut. The only
   movements are the sheet's 2px jolt when the stamp lands (main.js) and turning
   sheet 1 over on a phone or upright tablet (pages.js). */

@font-face { font-family: 'Archivo'; src: url('/assets/fonts/archivo-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('/assets/fonts/archivo-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('/assets/fonts/archivo-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Typed'; src: url('/assets/fonts/courier-prime-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Typed'; src: url('/assets/fonts/courier-prime-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  /* paper, ink, and one red (the red lives only in the stamp images) */
  --paper: #ebe8e0;
  --tag: #f3efe3;            /* the exhibit tag: a warmer, lighter card */
  --glass: #262523;          /* the dark edge of the copier's glass, rgb(38, 37, 35) */
  --ink: #161513;
  --label: rgba(22, 21, 19, 0.64);  /* about 60% ink: 5.0:1 on the paper, so AA */
  --muted: #57534c;          /* 6.1:1 on the paper */
  --rule: rgba(22, 21, 19, 0.2);
  --rule-strong: rgba(22, 21, 19, 0.85);

  /* two typefaces, strict jobs */
  --furniture: 'Archivo', 'Helvetica Neue', Arial, sans-serif;   /* labels, headers, footers */
  --typed: 'Typed', 'Courier New', Courier, monospace;           /* what was typed in */

  --label-w: 170px;
  --gap: 28px;
  --pad: clamp(16px, 5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 400 15px/1.5 var(--furniture);
  background: var(--glass) url('/assets/img/glass.webp') repeat;
}
h1, h2, p, ul, ol { margin: 0; font: inherit; }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.typed { font-family: var(--typed); font-weight: 700; letter-spacing: 0; }

/* a redaction: slightly irregular, as if drawn over with a marker */
.redacted {
  display: block;
  width: min(100%, 17em);
  height: 46px;
  background: var(--ink);
  clip-path: polygon(0 3%, 22% 0, 48% 4%, 74% 1%, 100% 5%, 99% 52%, 100% 96%, 76% 100%, 51% 95%, 26% 99%, 0 97%, 1% 48%);
}

/* stamp-style buttons: an ink rectangle, never red */
.btn {
  min-height: 44px; min-width: 88px;
  padding: 0 16px;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 600 13px/1 var(--furniture);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:disabled { opacity: 0.55; cursor: wait; }

/* the email capture */
.address { display: flex; align-items: flex-end; gap: 16px; }
.address input {
  flex: 1; min-width: 0;
  height: 44px;
  padding: 0 2px;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 700 17px var(--typed);            /* 16px or more: no zoom on iOS */
}
/* The placeholder is a pencilled hint, not typed text: the regular weight of
   a typewriter face in a lighter ink (3.6:1 on the paper). */
.address input::placeholder { color: #7b766d; font-family: 'Courier New', Courier, monospace; font-weight: 400; opacity: 1; }
.address input:focus { outline: none; border-bottom-width: 3px; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.error { margin-top: 8px; font-size: 13px; }
.consent { margin-top: 10px; font-size: 13px; color: var(--muted); max-width: 46ch; }
.consent a { color: var(--ink); }
.filed { position: relative; padding: 6px 0 2px; outline: none; }
.filed .typed { font-size: 18px; }
.filed .stamp-filed { position: absolute; left: 34%; top: -14px; width: 140px; height: auto; pointer-events: none; }
.filed .noted { margin-top: 18px; font-size: 16px; }

/* the socials, as printed glyphs */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.social { list-style: none; padding: 0; display: flex; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink); }   /* tap target */
.social svg { width: 24px; height: 24px; fill: currentColor; mix-blend-mode: multiply; }
.social a:hover svg { opacity: 0.75; }

/* ════════════════════════════════════════════════════════════════════════
   The home page: two sheets on the glass, laid out three ways
   - paged (phones, and tablets held upright): one sheet per screen, sheet 2
     lying under sheet 1, turned over by pages.js
   - side by side (1024px and wider, landscape, at least 640px tall): an open
     file, both sheets sized from the window's height
   - stacked (anything else, or with no script): one above the other, scrolling
   Type and spacing scale with the sheet, through container units (cqi).
   ════════════════════════════════════════════════════════════════════════ */
.home .sheets {
  display: grid; justify-content: center; gap: 40px;
  grid-template-columns: min(100%, 560px);
  padding: 48px 16px 64px;
}
.home .sheet {
  --pad-t: 44px; --pad-x: 36px; --pad-b: 24px;
  --field: 36px;                      /* between fields */
  --group: 52px;                      /* between groups */
  position: relative; z-index: 1;
  isolation: isolate;                 /* its paper sits behind its own content */
  container-type: inline-size;
  padding: var(--pad-t) var(--pad-x) var(--pad-b);
  display: flex; flex-direction: column;
  outline: none;
}
.home .sheet[data-sheet='1'] { grid-area: 1 / 1; z-index: 2; }
.home .sheet[data-sheet='2'] { grid-area: 2 / 1; }
/* The paper is a layer behind the content, and only the paper is turned, so
   the text stays crisp. */
.home .sheet::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--paper) url('/assets/img/paper.webp') center / cover;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 18px 40px rgba(0, 0, 0, 0.5);
  transform: rotate(-0.6deg);
}
.home .sheet[data-sheet='2']::before { transform: rotate(0.4deg); }
.stamp-pending .stamp-nfa,
.pto-pending .pto img { visibility: hidden; }        /* until each lands (early.js, main.js) */

/* The paperclip over the top-left corner, at an angle, about half of it on
   the paper. It belongs to the pile, not to sheet 1, so it stays put when
   sheet 1 is turned over. */
.home .clip {
  grid-area: 1 / 1; justify-self: start; align-self: start;
  position: relative; z-index: 3;
  width: 22px; height: 60px; margin: -26px 0 0 14px;
  transform: rotate(-36deg);
  /* lying on the paper: a soft shadow just below it and a tight contact
     shadow along the wire (offsets given before the turn, so they fall
     down and slightly right on screen) */
  filter: drop-shadow(-0.3px 2.9px 1.6px rgba(0, 0, 0, 0.32)) drop-shadow(0 0 0.6px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

/* the one rule on the page, under the header */
.home .head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap);
  padding-bottom: 0.75em;
  border-bottom: 1.5px solid var(--rule-strong);
  font-size: clamp(13px, 2.5cqi, 17px);
}

/* fields: a label, then what was typed in. Space, not rules, keeps them apart. */
.home .field { margin-top: var(--field); }
.home .group { margin-top: var(--group); }
.home .group > .field:first-of-type { margin-top: 12px; }
.home .sheet > .field:first-child { margin-top: 0; }
.home .label {
  display: block;
  font: 400 clamp(13px, 2.5cqi, 17px)/1.4 var(--furniture);
  color: var(--label);
  text-transform: lowercase;
  margin-bottom: 0.5em;
}
.home .typed { font-weight: 400; }
.home .redacted { height: clamp(30px, 6.4cqi, 46px); }
.home .fine .value { position: relative; }
.home .fine-word {
  display: block;
  font-weight: 700;
  font-size: 31cqi;                  /* as large as the line allows: five typewriter characters are three ems */
  line-height: 0.9;
}
.home .stamp-nfa {
  position: absolute; right: -3cqi; bottom: -4cqi;
  width: 56%; height: auto;
  pointer-events: none;
}
.home .sounds { font-size: clamp(24px, 6.2cqi, 42px); line-height: 1.2; }
.home .description { font-size: clamp(19px, 4.4cqi, 30px); line-height: 1.5; }

/* ── the exhibits ── */
.exhibit-list { list-style: none; padding: 0; display: grid; gap: 4px; }
.exhibit-list:empty { min-height: 220px; }          /* held while the list is built */
/* The tag: a warmer card with one corner clipped, a punched hole and a
   short string, turned against the sheet. The shadow is on its wrapper, as
   the clip would cut a box-shadow off. */
.tag-wrap {
  position: relative;
  max-width: max(300px, 64cqi); margin: 8px 0 14px 14px;
  transform: rotate(1.5deg);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18));
}
.tag-wrap::before {                 /* the string, running off from the hole */
  content: '';
  position: absolute; left: 17px; top: 18px; width: 46px; height: 1.5px;
  background: #5c5a57;
  transform-origin: 0 50%; transform: rotate(-145deg);
}
.tag {
  position: relative;
  padding: 14px 20px 18px 42px;
  background: var(--tag) url('/assets/img/paper.webp') center / cover;
  background-blend-mode: multiply;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.tag .hole {
  position: absolute; left: 12px; top: 13px; width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--glass);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(22, 21, 19, 0.12);
}
.tag-label { display: block; font: 400 clamp(13px, 2.5cqi, 17px)/1.4 var(--furniture); color: var(--label); }
.tag-title { margin-top: 4px; font-size: clamp(22px, 4.6cqi, 32px); line-height: 1.2; }
.tag-row { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.tag-play {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1.5px solid var(--ink); border-radius: 50%;
  background: transparent; color: var(--ink);
  cursor: pointer;
}
.tag-play svg { width: 16px; height: 16px; fill: currentColor; }
.tag-play .i-pause { display: none; }
.tag[data-state='playing'] .tag-play .i-play { display: none; }
.tag[data-state='playing'] .tag-play .i-pause { display: block; }
.tag-time { font-size: clamp(15px, 2.9cqi, 19px); font-variant-numeric: tabular-nums; }
/* progress: a thin ink line along the foot, grown once a second */
.tag-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.tag-fill { position: absolute; inset: 0; background: var(--ink); transform-origin: left center; transform: scaleX(0); }
.tag[data-state='rest'] .tag-progress { display: none; }
.tag-after, .tag-note { margin: 0 0 4px 14px; font-size: 13px; color: var(--muted); }
/* the items not yet released: two compact rows, a label and a blacked-out line */
.exhibit-redacted { display: flex; align-items: center; gap: 14px; min-height: clamp(24px, 5cqi, 34px); }
.exhibit-redacted .tag-label { flex: none; width: 3.6em; }
.exhibit-redacted .bar {
  display: block; height: clamp(12px, 2.4cqi, 16px); background: var(--ink);
  clip-path: polygon(0 8%, 30% 0, 62% 10%, 100% 4%, 99% 92%, 70% 100%, 34% 90%, 0 100%);
}

/* ── further correspondence ── */
.home [data-signup] > .label { margin-bottom: 0; }
.home .address input { font-weight: 400; font-size: clamp(17px, 3.2cqi, 21px); }

/* ── see also: the glyphs smaller, in the label's ink ── */
.home .see-also .social { margin: -8px 0 0 -11px; gap: 6px; align-items: center; }
.home .see-also .social a { color: var(--label); }
.home .see-also .social svg { width: 22px; height: 22px; }
.home .see-also .also-album a { width: auto; padding: 0 0 0 9px; font: 400 clamp(13px, 2.5cqi, 17px)/1.4 var(--furniture); text-underline-offset: 3px; }

/* ── every sheet's footer: one thin line above it ── */
.home .foot {
  margin-top: auto; padding-top: 8px;
  border-top: 1px solid var(--rule);
  font-size: clamp(13px, 2.5cqi, 16px); color: var(--label);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; column-gap: var(--gap);
  align-items: center;
}
.home .foot .help { grid-column: 1 / -1; line-height: 1.35; }
.home .foot a { color: var(--ink); }
.home .foot .links { list-style: none; padding: 0; display: flex; }
.home .foot .links li:not(:last-child)::after { content: '·'; padding: 0 0.6ch; }
/* 44px tap targets that don't push the Samaritans line down */
.home .foot .links a { display: inline-block; padding: 12px 0; margin: -12px 0; min-width: 44px; text-align: center; }
.home .sheet > :nth-last-child(2) { margin-bottom: var(--group); }   /* the gap above the footer, however short the sheet */

/* The turn controls, only when the sheets are paged. On sheet 1 it's a
   stamp, PLEASE TURN OVER, in black at about 70% of NO FURTHER ACTION and
   leaning the other way (the lean is in the image), pressed to turn. It sits
   just above the footer, and when the sheet is full it rides up beside the
   last redacted item. On sheet 2, "↓ back" is small print, top right. */
.home .pto, .home .turn { display: none; }
.home .pto {
  align-self: flex-end;
  margin: auto -6px 10px 0;
  min-height: 44px; padding: 6px;
  border: 0; background: none; cursor: pointer;
}
.home .pto img { display: block; width: calc(56cqi * 0.7); height: auto; }
.home .pto:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.home .sheet > .pto + .foot { margin-top: 0; }
.home .turn {
  position: absolute; top: calc(var(--pad-t) / 2 - 6px); right: var(--pad-x);
  margin-right: -6px; padding: 12px 6px; min-width: 44px;
  border: 0; background: none; cursor: pointer;
  font: 400 clamp(13px, 2.5cqi, 17px)/1 var(--furniture); color: var(--label);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.home .turn:hover { color: var(--ink); }
.home .sheet > .turn + .field { margin-top: 0; }

/* ── phones ── */
@media (max-width: 767px) {
  .home .sheets {
    gap: 32px;
    padding: max(24px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  .home .sheet {
    --pad-t: 22px; --pad-x: 20px; --pad-b: 14px;
    --field: clamp(12px, 2.2svh, 26px);
    --group: clamp(18px, 3svh, 34px);
  }
  .home .fine-word { font-size: min(31cqi, 14svh); }
  .tag-wrap { margin: 6px 0 10px 14px; }
  .tag { padding: 12px 18px 14px 40px; }
  .tag-row { margin-top: 6px; }
  .address { gap: 12px; }
}

/* ── paged: one sheet per screen, sheet 2 under sheet 1 ── */
.paged.home, .paged .home { overflow-x: hidden; }
.paged { overscroll-behavior-y: none; }   /* no rubber-band to fight a swipe that turns the page */
.paged .home .sheets { min-height: 100svh; }
.paged .home .sheet { min-height: calc(100svh - 48px); }
.paged .home .sheet[data-sheet='2'] { grid-area: 1 / 1; padding-top: calc(var(--pad-t) + 22px); }   /* clear of the clip */
.paged .home .sheet[data-sheet='1'] { transform-origin: 50% 0; }
.paged[data-page='2'] .home .sheet[data-sheet='1'] { visibility: hidden; }
.paged .home .turn { display: block; }
.paged .home .pto { display: block; }
.paged .home .sheet > .exhibits { margin-bottom: calc(-1 * clamp(40px, 7cqi, 56px)); }   /* room for the stamp to ride up */

/* tablets held upright: a larger sheet, up to 640px wide */
@media (min-width: 768px) {
  .paged .home .sheets { grid-template-columns: min(100%, 640px); padding: 24px; align-content: center; }
  .paged .home .sheet {
    --pad-t: 56px; --pad-x: 52px; --pad-b: 20px;
    --field: clamp(24px, 4.8svh, 72px);
    --group: clamp(32px, 6.6svh, 96px);
    min-height: 0; height: calc(100svh - 48px);
  }
  .paged .home .tag-wrap { margin: 1.4cqi 0 2.6cqi 2.6cqi; }
  .paged .home .tag { padding: 2.6cqi 3.6cqi 3.2cqi 7.6cqi; }
  .paged .home .tag-play { width: 52px; height: 52px; }
  .paged .home .clip { width: 26px; height: 70px; margin: -30px 0 0 18px; }
}

/* ── side by side: an open file on the glass ── */
@media (min-width: 1024px) and (orientation: landscape) and (min-height: 640px) {
  .home .sheets {
    /* height from the window (64px clear above and below), width in the A-series
       proportion, and both sheets plus 32px within 92% of the width */
    --h: min(100vh - 128px, 1000px, (92vw - 32px) / 2 * 1.414);
    --w: calc(var(--h) / 1.414);
    min-height: 100vh;
    grid-template-columns: var(--w) var(--w);
    gap: 0;
    align-content: center;
    padding: 64px 0;
  }
  .home .sheet {
    --pad-t: calc(var(--w) * 0.075); --pad-x: calc(var(--w) * 0.068); --pad-b: calc(var(--w) * 0.035);
    --field: 4.4cqi;
    --group: 6.4cqi;
    height: var(--h);
  }
  /* overlapping by 24px, sheet 1 on top, the pair centred */
  .home .sheet[data-sheet='1'] { translate: 12px 0; }
  .home .sheet[data-sheet='2'] { grid-area: 1 / 2; translate: -12px 0; }
  .home .sheet[data-sheet='1']::before { transform: rotate(-0.8deg); }
  .home .sheet[data-sheet='2']::before { transform: rotate(0.6deg); }
  .home .clip { translate: 12px 0; width: calc(var(--w) * 0.045); height: auto; aspect-ratio: 24 / 64; margin: calc(var(--w) * -0.05) 0 0 calc(var(--w) * 0.03); }
  .home .tag-wrap { margin: 1.4cqi 0 2.6cqi 2.6cqi; }
  .home .tag { padding: 2.6cqi 3.6cqi 3.2cqi 7.6cqi; }
}

/* ════════════════════════════════════════════════════════════════════════
   Inner documents (privacy, 404): one sheet on the glass, as form rows
   ════════════════════════════════════════════════════════════════════════ */
body:not(.home) main.sheet {
  max-width: 820px;
  margin: 48px auto;
  padding: 48px var(--pad) 40px;
  background: var(--paper) url('/assets/img/paper.webp') center / cover;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 18px 40px rgba(0, 0, 0, 0.5);
}
.head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap); padding-bottom: 10px; border-bottom: 1.5px solid var(--rule-strong); }
.row { display: grid; grid-template-columns: var(--label-w) minmax(0, 1fr); column-gap: var(--gap); align-items: center; }
.row > .label { padding: 14px 0; }
.row > .answer { padding: 12px 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.doc-rows .answer .typed { font-size: 15px; line-height: 1.6; }
.doc-rows .answer .typed + .typed { margin-top: 8px; }
.home-link { font-size: 13px; }
.doc-rows .home-link { margin-bottom: 18px; }
.doc-rows .head h1 { font-weight: 600; }
.doc-rows .row { align-items: start; }
.doc-rows .row > .label { font-weight: 400; }
.doc-rows .answer a { overflow-wrap: anywhere; }
.doc-rows .row:last-of-type > .answer { border-bottom: 0; }
.lost .stamp-lost { position: relative; display: block; width: min(260px, 60%); height: auto; margin: -64px -30px 10px auto; pointer-events: none; }
/* the lost document: every answer blacked out, each bar a different length */
.lost .row:nth-of-type(1) .redacted { width: min(100%, 17em); }
.lost .row:nth-of-type(2) .redacted { width: min(100%, 7em); }
.lost .row:nth-of-type(3) .redacted { width: min(100%, 12em); }
.lost .row:nth-of-type(4) .redacted { width: min(100%, 26em); height: 30px; }
.lost-line { font-size: 18px; }
/* their footer: the small print left, the page count and links right */
body:not(.home) main.sheet .foot {
  margin-top: 36px; padding-top: 10px; border-top: 1px solid var(--rule);
  font-size: 13px; color: var(--muted);
  display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "doc page" "help links"; column-gap: var(--gap); align-items: baseline;
}
body:not(.home) main.sheet .foot .doc { grid-area: doc; }
body:not(.home) main.sheet .foot .page { grid-area: page; text-align: right; }
body:not(.home) main.sheet .foot .help { grid-area: help; }
body:not(.home) main.sheet .foot .links { grid-area: links; justify-content: flex-end; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
body:not(.home) main.sheet .foot a { color: var(--ink); }
body:not(.home) main.sheet .foot .links li:not(:last-child)::after { content: '·'; padding: 0 0.6ch; }
body:not(.home) main.sheet .foot .links a[aria-current='page'] { text-decoration-thickness: 2px; }

@media (max-width: 640px) {
  body:not(.home) main.sheet { margin: 12px; padding: 20px 16px 28px; }
  .row { grid-template-columns: 1fr; }
  .row > .label { padding: 10px 0 0; font-size: 13px; }
  .row > .answer { padding: 4px 0 10px; }
  .redacted { height: 34px; }
  .doc-rows .row > .label { padding-top: 14px; }
  .lost .row:nth-of-type(4) .redacted { height: 24px; }
  .lost .stamp-lost { margin: -40px -4px 12px auto; }
  body:not(.home) main.sheet .foot { grid-template-areas: "doc doc" "page links" "help help"; align-items: center; }
  body:not(.home) main.sheet .foot .page { text-align: left; }
  body:not(.home) main.sheet .foot .links a, .home-link a,
  .doc-rows [data-controller-contact] { display: inline-block; padding: 12px 0; min-height: 44px; }
  body:not(.home) main.sheet .foot .links a { min-width: 44px; text-align: center; }
}