/* ═══════════════════════════════════════════════════════════════
   THE ANALOGUE EDITION — artifacts on a desk
   Paper, typewriter, fountain pen, telegram, wireless, film, post.
   Palette: walnut desk #2c241c · paper #f3ebd9 · ink #29241b
            stamp red #a83a2b · pen blue-black #2c3d5c · manila #e6d3a4
   Type: IM Fell English (letterpress) · Special Elite (typewriter)
         Homemade Apple (fountain pen)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --desk: #2c241c;
  --desk-2: #241d16;
  --paper: #f3ebd9;
  --paper-aged: #eaddc0;
  --onion: #f6f0e2;
  --manila: #e6d3a4;
  --manila-2: #dcc48d;
  --kraft: #c9a97a;
  --ink: #29241b;
  --ink-soft: #4c4536;
  --ink-faint: #6f6753;
  --red: #a83a2b;
  --pen: #2c3d5c;
  --grease: #f0e9d4;
  --sheet: #17140f;
  --serif: "IM Fell English", Georgia, serif;
  --serif-sc: "IM Fell English SC", Georgia, serif;
  --type: "Special Elite", "Courier New", monospace;
  --script: "Homemade Apple", cursive;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

body {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 240, 200, 0.05), transparent 60%),
    linear-gradient(174deg, var(--desk) 0%, var(--desk-2) 100%);
  background-color: var(--desk);
  color: var(--ink);
  font-family: var(--type);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
/* wood grain — long, faint streaks */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.002 0.06' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.6 0.25 0 0 0'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: 0.5;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: rgba(168, 58, 43, 0.25); }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ── shared voices ───────────────────────────────────────────── */

.typed { font-family: var(--type); text-shadow: 0.4px 0.4px 0 rgba(41, 36, 27, 0.18); }

.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.2;
  color: var(--ink);
}
.display em { font-style: italic; }

.hand {
  font-family: var(--script);
  color: var(--pen);
  font-size: 1.02rem;
  line-height: 2.1;
}

/* ── folder-tab navigation ───────────────────────────────────── */

.tabs {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: flex-end; gap: 1rem;
  padding: 0.7rem 1rem 0;
  background: linear-gradient(180deg, rgba(20, 15, 10, 0.92), rgba(20, 15, 10, 0.78));
  border-bottom: 3px solid #191410;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.7);
}
.tabs-mark {
  font-family: var(--serif-sc);
  font-size: 1.3rem;
  color: var(--paper);
  text-decoration: none;
  padding: 0 0.4rem 0.55rem;
  opacity: 0.9;
}
.tabs-row { display: flex; gap: 0.35rem; overflow-x: auto; scrollbar-width: none; }
.tabs-row::-webkit-scrollbar { display: none; }

.tab {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.05rem;
  padding: 0.5rem 1.15rem 0.6rem;
  background: linear-gradient(180deg, var(--manila), var(--manila-2));
  color: var(--ink);
  text-decoration: none;
  font-family: var(--type);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
  transform: translateY(4px);
  transition: transform 0.2s ease, filter 0.2s ease;
  filter: brightness(0.82);
}
.tab span {
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.tab:hover { transform: translateY(2px); filter: brightness(0.95); }
.tab.is-here { transform: translateY(0); filter: brightness(1.04); }
.tab--post { background: linear-gradient(180deg, #d9b2a2, #cba18f); }

/* ── the desk & pieces ───────────────────────────────────────── */

.desk { position: relative; z-index: 1; overflow-x: clip; }

.piece {
  position: relative; /* anchors instruments set down on this part of the desk */
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 6.5rem) 1.25rem 0;
}
.piece--wide { max-width: 72rem; }
.piece:last-child { padding-bottom: clamp(3rem, 8vh, 5rem); }

/* artifacts: things that sit on the desk */
.artifact {
  position: relative;
  rotate: var(--rot, 0deg);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 14px 34px -14px rgba(0, 0, 0, 0.6);
}

.paper {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.35 0.3 0.25 0 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)' opacity='0.16'/%3E%3C/svg%3E");
}
.paper.aged { background-color: var(--paper-aged); }
.paper.onion { background-color: var(--onion); }

/* placement: papers settle onto the desk */
.js .place { opacity: 0; translate: 0 26px; rotate: calc(var(--rot, 0deg) + 1.6deg); }
.js .place.placed {
  opacity: 1; translate: 0 0; rotate: var(--rot, 0deg);
  transition: opacity 0.55s ease, translate 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.05), rotate 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.05);
}

/* ── picking things up: items lift off the desk in 3D ────────── */
/* JS drives transform (perspective·rotateX·rotateY·translateZ·scale);
   the independent translate/rotate properties above stay untouched. */
.lift { transition: box-shadow 0.35s ease; }
.lift.is-lifted {
  z-index: 6;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.22),
    0 34px 60px -18px rgba(0, 0, 0, 0.72);
}
.lift.is-held {
  box-shadow:
    0 3px 5px rgba(0, 0, 0, 0.2),
    0 52px 80px -22px rgba(0, 0, 0, 0.78);
}
/* items whose shadow lives on a child image */
.print.is-lifted img, .photo.is-lifted img { box-shadow: 0 26px 44px -10px rgba(0, 0, 0, 0.75); }
.print img, .photo img { transition: box-shadow 0.35s ease; }
.wireless.is-lifted .radio { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.62)); }
.wireless .radio { transition: filter 0.35s ease; }

/* masking tape */
.tape {
  position: absolute; width: 96px; height: 26px;
  background: rgba(228, 216, 182, 0.65);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  z-index: 2;
}
.tape--tl { top: -12px; left: 8%; rotate: -5deg; }
.tape--tr { top: -12px; right: 8%; rotate: 4deg; }

/* rubber stamps */
.stamp {
  position: absolute;
  font-family: var(--type);
  color: var(--red);
  border: 3px solid var(--red);
  padding: 0.15em 0.5em;
  line-height: 1.15;
  text-align: center;
  letter-spacing: 0.14em;
  opacity: 0.75;
  rotate: -8deg;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.28' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 -0.18'/%3E%3C/filter%3E%3Crect width='160' height='80' fill='%23fff' filter='url(%23r)'/%3E%3C/svg%3E");
  mask-size: 160px 80px;
  pointer-events: none;
  z-index: 3;
}
.js .stamp { opacity: 0; scale: 1.5; }
.js .stamp.stamped {
  opacity: 0.75; scale: 1;
  transition: opacity 0.16s ease-out, scale 0.16s cubic-bezier(0.3, 1.6, 0.6, 1);
}
.stamp--corner { top: 1.4rem; right: 1.4rem; font-size: 0.72rem; }
.stamp--active { top: 0.9rem; right: 1rem; font-size: 0.9rem; rotate: -11deg; }
.stamp--approved { top: 1.2rem; right: 1.6rem; font-size: 1.15rem; rotate: 7deg; }

/* paperclip */
.paperclip {
  position: absolute; top: -14px; left: 18px;
  width: 16px; height: 46px;
  border: 3px solid #8f8a7d;
  border-radius: 8px 8px 10px 10px;
  border-bottom-color: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.25);
  z-index: 3;
}
.paperclip::after {
  content: ""; position: absolute; inset: 4px 3px -8px 3px;
  border: 2.5px solid #a09a8b;
  border-radius: 6px 6px 8px 8px;
  border-top-color: transparent;
}

/* ═══ §1 · THE LETTER ════════════════════════════════════════── */

.letter { padding: clamp(2.2rem, 5vw, 3.8rem) clamp(1.4rem, 5vw, 3.6rem) clamp(2rem, 4vw, 3rem); }

.letterhead { text-align: center; margin-bottom: 2.4rem; }
.wordmark {
  font-family: var(--serif-sc);
  font-weight: 400;
  font-size: clamp(2.3rem, 5.4vw, 3.6rem);
  letter-spacing: 0.06em;
  line-height: 1.05;
}
.letterhead-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-top: 0.5rem;
}
.letterhead-wave { width: 110px; margin: 0.9rem auto 0; display: block; }
.letterhead-wave path { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; opacity: 0.75; }

.letter-body { font-size: 1.02rem; }
.letter-body > p + p { margin-top: 1.15rem; }
.letter-re { letter-spacing: 0.05em; border-bottom: 1.5px solid rgba(41, 36, 27, 0.35); padding-bottom: 0.8rem; margin-bottom: 1.6rem; min-height: 1.7em; }
.letter-salute { margin-top: 1.6rem; }

.letter-cta-line { margin-top: 1.8rem; text-align: center; }
.pen-circled {
  position: relative; display: inline-block;
  padding: 0.9rem 1.6rem;
  text-decoration: none;
  color: var(--ink);
}
.pen-ellipse { position: absolute; inset: -4px -8px; width: calc(100% + 16px); height: calc(100% + 8px); overflow: visible; }
.pen-ellipse path {
  stroke: var(--pen); stroke-width: 2.6; stroke-linecap: round;
  opacity: 0.85;
}
.js .pen-ellipse path { stroke-dasharray: 1120; stroke-dashoffset: 1120; }
.js .placed .pen-ellipse path { animation: pen-draw 1.1s ease-out 0.9s forwards; }
@keyframes pen-draw { to { stroke-dashoffset: 0; } }
.pen-circled:hover .pen-ellipse path { stroke-width: 3.4; }

.letter-close { margin-top: 1.8rem; }
.signature {
  font-family: var(--script);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  color: var(--pen);
  rotate: -2deg;
  margin: 0.4rem 0 0 clamp(0.5rem, 6vw, 3rem);
}
.signature-typed { font-size: 0.72rem; letter-spacing: 0.1em; color: var(--ink-faint); margin-top: 0.6rem; }

/* ═══ §2 · THE WIRE ══════════════════════════════════════════── */

.telegram { margin-top: 0; padding: 1.6rem clamp(1.2rem, 4vw, 2.6rem) 2rem; }
.telegram--reply { max-width: 34rem; margin: 2.2rem auto 0; }

.tg-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.2rem 1rem;
  border-bottom: 2.5px solid var(--ink);
  padding-bottom: 0.7rem;
  margin-bottom: 1.3rem;
}
.tg-co { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--ink-soft); }
.tg-word {
  font-family: var(--serif-sc);
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  letter-spacing: 0.14em;
  grid-column: 1 / -1;
}
.tg-meta { font-size: 0.68rem; letter-spacing: 0.08em; color: var(--ink-faint); grid-column: 1 / -1; }

.tg-strips { display: grid; gap: 0.7rem; }
.tg-strip {
  background: #f8f2e2;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
  padding: 0.45rem 0.9rem;
  font-size: 0.93rem;
  letter-spacing: 0.06em;
  width: fit-content;
  max-width: 100%;
  rotate: -0.3deg;
}
.tg-strip:nth-child(even) { rotate: 0.4deg; }
.js .tg-strip { clip-path: inset(0 100% 0 0); }
.js .tg-strip.printed { animation: print 0.9s steps(24) forwards; }
@keyframes print { to { clip-path: inset(0 -2% 0 0); } }
.telegram--reply .tg-strip { background: #faf5e8; font-size: 1.02rem; }

/* the wireless + transcript */
.wireless-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: center;
  margin-top: clamp(2.5rem, 6vh, 4rem);
}
.wireless { rotate: var(--rot, 0deg); }
.radio {
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.5));
}
.radio svg { width: 100%; height: auto; display: block; }
.r-case { fill: #4a3524; stroke: #2e2013; stroke-width: 2; }
.r-face { fill: #e8dcbc; stroke: #8a744f; stroke-width: 1.5; }
.r-arc { fill: none; stroke: var(--ink); stroke-width: 1.6; opacity: 0.8; }
.r-ticks path { stroke: var(--ink); stroke-width: 1.4; opacity: 0.65; }
.r-band { font-family: var(--type); font-size: 11px; fill: var(--ink-soft); letter-spacing: 0.08em; }
.r-band--music { fill: var(--red); }
.r-needle { stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; }
.r-needle-g { transform-origin: 170px 150px; transform: rotate(0deg); transition: transform 2.4s cubic-bezier(0.34, 1.2, 0.4, 1); }
.tuned .r-needle-g { transform: rotate(96deg); }
.r-hub { fill: #2e2013; }
.r-knob { fill: #4a3524; stroke: #2e2013; stroke-width: 1.5; }
.r-label { font-family: var(--type); font-size: 8.5px; fill: #8a744f; text-anchor: middle; letter-spacing: 0.18em; }
.hand--under { text-align: center; margin-top: 0.9rem; color: var(--grease); opacity: 0.85; }

.transcript { padding: 1.4rem 1.6rem 1.1rem; }
.transcript-head { font-size: 0.7rem; letter-spacing: 0.14em; color: var(--ink-faint); border-bottom: 1.5px solid rgba(41, 36, 27, 0.3); padding-bottom: 0.55rem; }
.transcript-quote { margin-top: 1rem; font-size: 0.95rem; }
.transcript-quote cite { display: block; font-style: normal; font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.8rem; }
.transcript-note { margin-top: 0.9rem; rotate: -1deg; }

/* ═══ §3 · THE FILE ══════════════════════════════════════════── */

.folder { position: relative; rotate: var(--rot, 0deg); margin-top: 1rem; }
.folder-tab {
  display: inline-block;
  background: linear-gradient(180deg, var(--manila), var(--manila-2));
  padding: 0.5rem 1.6rem 0.8rem;
  margin-left: 6%;
  margin-bottom: -0.35rem;
  clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  position: relative; z-index: 0;
}
.folder-body {
  position: relative; z-index: 1;
  background: linear-gradient(180deg, var(--manila) 0%, var(--manila-2) 100%);
  border-radius: 3px;
  padding: clamp(1.4rem, 4vw, 2.8rem);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 18px 40px -16px rgba(0, 0, 0, 0.65);
}

.file-top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 1.6rem;
  align-items: start;
  margin-bottom: 2.4rem;
}
.record { position: relative; padding: 1.3rem 1.4rem; box-shadow: 0 2px 8px rgba(0,0,0,0.2); rotate: -0.5deg; }
.record-grid { display: grid; gap: 0.9rem; }
.record-grid dt { font-size: 0.62rem; letter-spacing: 0.2em; color: var(--ink-faint); }
.record-grid dd { font-size: 0.88rem; letter-spacing: 0.04em; border-bottom: 1px dotted rgba(41, 36, 27, 0.35); padding-bottom: 0.25rem; }

.photo { position: relative; rotate: 1.2deg; }
.photo img {
  border: 10px solid #fbf7ec;
  border-bottom-width: 30px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  filter: grayscale(0.9) contrast(1.08) sepia(0.14);
}
.photo figcaption { margin-top: -1.7rem; text-align: center; font-size: 0.86rem; position: relative; rotate: -0.6deg; }

.folder-body .display { margin-top: 0.6rem; }
.file-lede { margin: 0.5rem 0 1.8rem; color: var(--ink-soft); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.2rem; }
.cards--loose { max-width: 60rem; margin: clamp(2rem, 5vh, 3rem) auto 0; }
.index-card {
  position: relative;
  background:
    repeating-linear-gradient(180deg, transparent 0 26px, rgba(72, 108, 150, 0.25) 26px 27px),
    linear-gradient(180deg, transparent 2.1rem, transparent 2.1rem),
    #f9f4e6;
  background-position: 0 2.4rem, 0 0, 0 0;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  padding: 0.7rem 1.1rem 1.1rem;
  rotate: var(--rot, 0deg);
  font-size: 0.86rem;
  line-height: 1.65;
}
.index-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 2rem;
  border-top: 1.5px solid rgba(168, 58, 43, 0.55);
}
.ic-title { font-size: 0.8rem; letter-spacing: 0.14em; color: var(--red); margin-bottom: 0.8rem; }

.pull {
  font-style: italic;
  text-align: center;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  max-width: 34rem;
  margin: clamp(2.2rem, 5vh, 3.4rem) auto;
}

.pages { display: grid; gap: 1.8rem; }
.page { padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.4rem, 4vw, 2.8rem); }
.paperclip--page { left: auto; right: 34px; }
.page-no { text-align: center; font-size: 0.72rem; color: var(--ink-faint); margin-bottom: 1.2rem; }
.page h3 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-bottom: 1rem; }
.page-body { font-size: 0.94rem; }
.page-body p + p { margin-top: 1rem; }
.page-pull { font-family: var(--serif); font-style: italic; font-size: 1.25rem; }

.margin-note { rotate: -1.4deg; margin-top: 1.2rem; font-size: 0.98rem; }
.margin-note--right { text-align: right; rotate: 1deg; }

.file-close { margin-top: 2.2rem; font-size: 0.95rem; }
.file-close p + p { margin-top: 1rem; }
.typed-link { color: var(--red); text-decoration: none; border-bottom: 1.5px solid rgba(168, 58, 43, 0.5); }
.typed-link:hover { border-bottom-color: var(--red); }

/* ═══ §4 · THE PRINTS ════════════════════════════════════════── */

.sheet {
  background-color: var(--sheet);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 0.9  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23s)'/%3E%3C/svg%3E");
  color: var(--grease);
  padding: clamp(1.6rem, 4vw, 3rem);
}
.sheet-head { margin-bottom: 1.8rem; }
.hand--grease { color: var(--grease); font-size: clamp(1.15rem, 2.4vw, 1.5rem); rotate: -0.8deg; }
.sheet-lede { font-size: 0.72rem; letter-spacing: 0.1em; color: rgba(240, 233, 212, 0.6); max-width: 56rem; margin-top: 0.8rem; }

.strip-label {
  font-size: 0.68rem; letter-spacing: 0.18em;
  color: rgba(240, 233, 212, 0.55);
  border-bottom: 1px solid rgba(240, 233, 212, 0.2);
  padding-bottom: 0.4rem;
  margin: 2rem 0 1.1rem;
}

/* film strip */
.filmstrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 0.5rem;
  background:
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(240,233,212,0.16) 14px 22px, transparent 22px 36px) top / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(240,233,212,0.16) 14px 22px, transparent 22px 36px) bottom / 100% 14px no-repeat,
    #0d0b08;
  padding: 22px 14px;
  border-radius: 2px;
}
.frame { position: relative; }
.frame img { width: 100%; border: 1px solid rgba(240, 233, 212, 0.12); }
.frame figcaption { font-size: 0.62rem; letter-spacing: 0.06em; color: rgba(240, 233, 212, 0.6); margin-top: 0.45rem; line-height: 1.7; }
.frame figcaption a { color: rgba(240, 233, 212, 0.85); text-decoration: none; border-bottom: 1px solid rgba(240,233,212,0.3); }
.grease-circle { position: absolute; inset: -6px -4px auto; width: calc(100% + 8px); height: calc(100% - 34px); z-index: 2; pointer-events: none; }
.grease-circle path { stroke: #e8b23a; stroke-width: 5; opacity: 0.8; stroke-linecap: round; }

/* prints */
.prints-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 1.4rem;
}
.print { position: relative; }
.print img {
  border: 8px solid #fbf7ec;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
}
.print:nth-child(odd) { rotate: -0.5deg; }
.print:nth-child(even) { rotate: 0.6deg; }
.print figcaption { font-size: 0.64rem; letter-spacing: 0.06em; color: rgba(240, 233, 212, 0.6); margin-top: 0.55rem; line-height: 1.7; }
.print figcaption a { color: rgba(240, 233, 212, 0.85); text-decoration: none; border-bottom: 1px solid rgba(240,233,212,0.3); }

/* ── blueprints: cyanotype, white ink on Prussian blue ───────── */

.schematics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
}

.blueprint {
  --bp-ink: #dbe8f5;
  --bp-ink-soft: rgba(219, 232, 245, 0.62);
  --bp-chalk: #ecc98b;
  color: var(--bp-ink);
  background:
    radial-gradient(90% 70% at 18% 12%, rgba(255, 255, 255, 0.05), transparent 60%),
    radial-gradient(70% 55% at 85% 85%, rgba(0, 0, 0, 0.22), transparent 70%),
    repeating-linear-gradient(0deg, rgba(219, 232, 245, 0.06) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(219, 232, 245, 0.06) 0 1px, transparent 1px 24px),
    linear-gradient(158deg, #1c3e6e, #143057 55%, #16345f);
  padding: 1.1rem 1.1rem 0.9rem;
}

.schema-title { font-size: 0.68rem; letter-spacing: 0.08em; margin-bottom: 0.5rem; }
.blueprint .schema-title { color: var(--bp-ink-soft); }
.schematic { width: 100%; height: auto; }

.blueprint .s-box { fill: rgba(219, 232, 245, 0.05); stroke: var(--bp-ink); stroke-width: 1.3; }
.blueprint .s-box--hub { stroke: var(--bp-chalk); }
.blueprint .s-glyph { fill: none; stroke: var(--bp-ink); stroke-width: 1.2; opacity: 0.85; }
.blueprint .s-title { font-family: var(--type); font-size: 11px; letter-spacing: 0.1em; fill: #f2f7fc; }
.blueprint .s-sub { font-family: var(--serif); font-style: italic; font-size: 9.5px; fill: var(--bp-ink-soft); }
.blueprint .s-label { font-family: var(--type); font-size: 8px; letter-spacing: 0.1em; fill: #aecdec; }
.blueprint .s-flow { fill: none; stroke: #aecdec; stroke-width: 1.2; stroke-dasharray: 5 4; }
.blueprint .s-flow--back { stroke: var(--bp-chalk); }
.blueprint .s-head { fill: #aecdec; stroke: none; }
.blueprint .s-flow--back + .s-head { fill: var(--bp-chalk); }

/* drawing-office title block */
.tblock {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 1.2rem;
  border: 1px solid rgba(219, 232, 245, 0.5);
  padding: 0.5rem 0.7rem;
  margin-top: 0.7rem;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: var(--bp-ink-soft);
}
.tblock span:nth-child(odd) { color: var(--bp-ink); }

/* ── the drafting table ──────────────────────────────────────── */

.drafting-note { text-align: center; margin-bottom: 1.6rem; }
.drafting-scene { position: relative; max-width: 62rem; margin: 0 auto; }

.blueprint--jura { padding: clamp(0.8rem, 2vw, 1.4rem); }
.lines-plan { width: 100%; height: auto; display: block; }
.bp-frame { fill: none; stroke: #dbe8f5; stroke-width: 2; opacity: 0.85; }
.bp-frame--fine { stroke-width: 1; opacity: 0.55; }
.bp-line { fill: none; stroke: #e6f0f9; stroke-width: 1.6; stroke-linecap: round; }
.bp-fine { fill: none; stroke: #dbe8f5; stroke-width: 1; opacity: 0.7; }
.bp-hair { fill: none; stroke: #dbe8f5; stroke-width: 0.7; opacity: 0.38; }
.bp-dash { fill: none; stroke: #dbe8f5; stroke-width: 1; stroke-dasharray: 8 5; opacity: 0.65; }
.bp-dashdot { fill: none; stroke: #dbe8f5; stroke-width: 0.9; stroke-dasharray: 14 4 2 4; opacity: 0.55; }
.bp-head { fill: #dbe8f5; stroke: none; opacity: 0.8; }
.bp-h { font-family: var(--type); font-size: 22px; letter-spacing: 0.18em; fill: #f2f7fc; }
.bp-h--small { font-size: 13px; letter-spacing: 0.14em; }
.bp-sub { font-family: var(--serif); font-style: italic; font-size: 12px; fill: rgba(219, 232, 245, 0.65); letter-spacing: 0.08em; }
.bp-t { font-family: var(--type); font-size: 10px; letter-spacing: 0.1em; fill: rgba(219, 232, 245, 0.75); }
.bp-hand {
  position: absolute; left: 6%; bottom: 4%;
  color: #cfe0f2; opacity: 0.85; rotate: -1.5deg;
  font-size: 1.05rem;
}

/* drafting equipment */
.tool {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5));
  z-index: 3;
}
.tool--tsquare { left: clamp(-3rem, -3vw, -1rem); top: -3.5rem; height: calc(100% + 6rem); width: auto; rotate: -2.5deg; }
.tool--setsquare { top: -3.2rem; right: 7%; width: clamp(120px, 16vw, 200px); rotate: 9deg; }
.tool--compass { bottom: -4rem; right: 12%; width: clamp(80px, 10vw, 128px); rotate: 14deg; }
.tool--scale { bottom: -2.4rem; left: 14%; width: clamp(200px, 30vw, 360px); rotate: -1.5deg; }
.tool--pencil { position: absolute; right: clamp(-2rem, -2vw, 0rem); bottom: 6.5rem; width: clamp(180px, 22vw, 280px); rotate: -24deg; }

.tl-wood { fill: #b98c4f; stroke: #7d5a2c; stroke-width: 1.5; }
.tl-wood--lt { fill: #caa066; }
.tl-edge { stroke: #7d5a2c; stroke-width: 1; opacity: 0.6; }
.tl-tick path { stroke: #5c4420; stroke-width: 1; opacity: 0.7; fill: none; }
.tl-screw { fill: #8f8a7d; stroke: #5f5b50; }
.tl-cell { fill: rgba(233, 196, 124, 0.34); }
.tl-cell-edge { fill: none; stroke: rgba(120, 85, 30, 0.85); stroke-width: 2; }
.tl-cell-edge--in { stroke-width: 1.2; opacity: 0.7; }
.tl-tick--ink path { stroke: rgba(60, 45, 20, 0.75); }
.tl-steel { fill: #b9bec6; stroke: #7c828c; stroke-width: 1; }
.tl-steel-fill { fill: #9aa1ab; stroke: #6d737d; stroke-width: 1.5; }
.tl-steel-leg { stroke: #a8aeb8; stroke-width: 6; stroke-linecap: round; }
.tl-needle { stroke: #6d737d; stroke-width: 2; stroke-linecap: round; }
.tl-brass { fill: #c9a24e; stroke: #8a6c2c; }
.tl-brass-fill { fill: #c9a24e; stroke: #8a6c2c; stroke-width: 1.5; }
.tl-lead { stroke: #3a3630; stroke-width: 3; stroke-linecap: round; }
.tl-ivory-top { fill: #efe7d2; stroke: #b8ad92; stroke-width: 1; }
.tl-ivory { fill: #ddd2b8; stroke: #b8ad92; stroke-width: 1; }
.tl-pencil { fill: #e2ac35; stroke: #a87f22; stroke-width: 1; }
.tl-pencil-line { stroke: #c9962a; stroke-width: 1.4; }
.tl-cedar { fill: #dcb98a; stroke: #a8855a; stroke-width: 1; }
.tl-eraser { fill: #d98a80; stroke: #a05f57; stroke-width: 1; }

.prints-close { text-align: center; font-style: italic; max-width: 38rem; margin: clamp(2.4rem, 6vh, 3.6rem) auto 0; color: var(--paper); }

/* ═══ §5 · THE MEMO ══════════════════════════════════════════── */

.memo { padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.4rem, 4vw, 3rem) 1.6rem; }
.memo-head { border-bottom: 2.5px solid var(--ink); padding-bottom: 0.8rem; }
.memo-head p:first-child { font-size: 1.15rem; letter-spacing: 0.16em; }
.memo-sub { font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-soft); margin-top: 0.3rem; }

.steps { list-style: none; margin-top: 1.6rem; display: grid; gap: 1.4rem; }
.step { display: grid; grid-template-columns: 3rem 1fr; gap: 0.9rem; align-items: start; }
.step h3 { font-size: 0.98rem; letter-spacing: 0.1em; font-weight: 400; }
.step p { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.2rem; }
.step-check { display: block; width: 2.5rem; margin-top: 0.1rem; }
.step-check svg { width: 100%; overflow: visible; }
.step-check path { stroke: var(--pen); stroke-width: 3.4; stroke-linecap: round; opacity: 0.9; }
.js .step-check path { stroke-dasharray: 60; stroke-dashoffset: 60; }
.js .placed .step:nth-child(1) .step-check path { animation: pen-draw 0.45s ease-out 0.5s forwards; }
.js .placed .step:nth-child(2) .step-check path { animation: pen-draw 0.45s ease-out 0.85s forwards; }
.js .placed .step:nth-child(3) .step-check path { animation: pen-draw 0.45s ease-out 1.2s forwards; }
.js .placed .step:nth-child(4) .step-check path { animation: pen-draw 0.45s ease-out 1.55s forwards; }

.finale { text-align: center; margin-top: clamp(2.6rem, 7vh, 4.5rem); }
.finale-stakes { color: var(--paper); opacity: 0.85; max-width: 34rem; margin: 0 auto; font-size: 0.95rem; }
.finale-line {
  position: relative;
  display: inline-block;
  color: var(--paper);
  font-size: clamp(2.4rem, 5.5vw, 3.8rem);
  margin-top: 1.4rem;
}
.pen-flourish { position: absolute; left: 6%; right: -2%; bottom: -0.35em; width: 96%; height: 0.5em; }
.pen-flourish path { stroke: var(--red); stroke-width: 3; stroke-linecap: round; opacity: 0.85; }
.js .pen-flourish path { stroke-dasharray: 440; stroke-dashoffset: 440; }
.js .placed .pen-flourish path { animation: pen-draw 0.9s ease-out 0.5s forwards; }

/* ═══ §6 · THE POST ══════════════════════════════════════════── */

.envelope {
  display: block;
  position: relative;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.3 0.25 0.2 0 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23k)' opacity='0.18'/%3E%3C/svg%3E"),
    linear-gradient(174deg, #d9bd90, var(--kraft));
  rotate: var(--rot, 0deg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 18px 40px -16px rgba(0,0,0,0.65);
  text-decoration: none;
  color: var(--ink);
  transition: translate 0.25s ease, box-shadow 0.25s ease;
}
.envelope:hover { translate: 0 -4px; box-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 26px 48px -18px rgba(0,0,0,0.7); }

/* airmail border */
.airmail {
  position: absolute; inset: 0; pointer-events: none;
  border: 10px solid transparent;
  border-image: repeating-linear-gradient(45deg, var(--red) 0 12px, transparent 12px 24px, var(--pen) 24px 36px, transparent 36px 48px) 10;
  opacity: 0.85;
}

.env-inner { position: relative; padding: clamp(2rem, 5vw, 3.4rem) clamp(1.6rem, 5vw, 3.4rem) clamp(1.6rem, 4vw, 2.6rem); }
.env-corner { font-size: 0.62rem; letter-spacing: 0.1em; line-height: 1.8; color: var(--ink-soft); max-width: 14rem; }

.env-stamp { position: absolute; top: clamp(1.6rem, 4vw, 2.6rem); right: clamp(1.6rem, 4vw, 2.6rem); width: clamp(72px, 10vw, 92px); }
.env-stamp svg {
  width: 100%; display: block;
  background: var(--paper);
  padding: 5px;
  /* perforated edge — scalloped border only, not the field */
  --perf: radial-gradient(circle, transparent 0 2.6px, #fff 2.8px);
  mask-image:
    linear-gradient(#fff, #fff),
    var(--perf), var(--perf), var(--perf), var(--perf);
  mask-size: calc(100% - 10px) calc(100% - 10px), 10px 10px, 10px 10px, 10px 10px, 10px 10px;
  mask-position: 5px 5px, 0 0, 0 0, 100% 0, 0 100%;
  mask-repeat: no-repeat, repeat-x, repeat-y, repeat-y, repeat-x;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  rotate: 3deg;
}
.st-field { fill: #e8ddc2; stroke: var(--pen); stroke-width: 2; }
.st-wave { fill: none; stroke: var(--pen); stroke-width: 3; stroke-linecap: round; }
.st-text { font-family: var(--type); font-size: 10px; letter-spacing: 0.12em; fill: var(--pen); }
.st-val { font-family: var(--type); font-size: 9px; fill: var(--red); }
.postmark {
  position: absolute; top: -14px; left: -46px;
  width: 84px; height: 84px;
  border: 2.5px solid rgba(41, 36, 27, 0.55);
  border-radius: 50%;
  rotate: -12deg;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.3' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.3 -0.12'/%3E%3C/filter%3E%3Crect width='120' height='120' fill='%23fff' filter='url(%23m)'/%3E%3C/svg%3E");
}
.postmark::after {
  content: "PACIFIC NW · 2026";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--type);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  color: rgba(41, 36, 27, 0.6);
  text-align: center;
  padding: 0 8px;
}

.env-address { margin: clamp(2rem, 5vw, 3rem) 0 0 clamp(0.5rem, 12vw, 8rem); font-size: clamp(1.05rem, 2.2vw, 1.35rem); }
.env-indent { margin-left: 2.2rem; }

.env-cta {
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  text-align: center;
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  background: rgba(243, 235, 217, 0.75);
  border: 1.5px dashed rgba(41, 36, 27, 0.5);
  padding: 0.85rem 1rem;
}
.envelope:hover .env-cta { background: rgba(243, 235, 217, 0.95); }

.post-notes { max-width: 34rem; margin: 2.2rem auto 0; text-align: center; }
.post-notes .typed { color: var(--paper); opacity: 0.8; font-size: 0.9rem; }
.post-hand { color: #d9bd90; margin-top: 0.8rem; rotate: -1.2deg; }

/* colophon */
.colophon {
  text-align: center;
  margin-top: clamp(3.5rem, 9vh, 6rem);
  padding-top: 1.8rem;
  border-top: 1px solid rgba(243, 235, 217, 0.2);
}
.colophon-name { font-family: var(--serif-sc); color: var(--paper); font-size: 1.05rem; }
.colophon-links { margin-top: 0.7rem; font-size: 0.72rem; letter-spacing: 0.12em; }
.colophon-links a { color: #d9bd90; text-decoration: none; border-bottom: 1px solid rgba(217, 189, 144, 0.35); }
.colophon-links a:hover { color: var(--paper); }
.colophon-note { margin-top: 1rem; font-size: 0.6rem; letter-spacing: 0.14em; color: rgba(243, 235, 217, 0.4); }

/* ═══ RESPONSIVE ═════════════════════════════════════════════── */

@media (max-width: 54rem) {
  .wireless-row { grid-template-columns: 1fr; }
  .wireless { max-width: 24rem; margin: 0 auto; }
  .file-top { grid-template-columns: 1fr; }
  .photo { max-width: 22rem; margin: 0 auto; }
  .tab { padding: 0.45rem 0.8rem 0.5rem; font-size: 0.72rem; }
  .tab span { display: none; }
  .tabs-mark { font-size: 1.1rem; }
  .env-address { margin-left: clamp(0.5rem, 6vw, 3rem); }
  .postmark { left: auto; right: -20px; top: -30px; }
  /* small desks hold fewer instruments */
  .tool--tsquare, .tool--scale { display: none; }
  .tool--setsquare { top: -2.2rem; right: 2%; }
  .tool--compass { bottom: -2.6rem; right: 4%; }
  .tool--pencil { bottom: 2rem; }
  .bp-hand { display: none; }
}

/* ═══ REDUCED MOTION ═════════════════════════════════════════── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .place { opacity: 1; translate: 0 0; rotate: var(--rot, 0deg); }
  .js .stamp { opacity: 0.75; scale: 1; }
  .js .tg-strip { clip-path: none; animation: none; }
  .js .pen-ellipse path, .js .step-check path, .js .pen-flourish path {
    stroke-dasharray: none; stroke-dashoffset: 0; animation: none;
  }
  .r-needle-g { transition: none; }
  .tuned .r-needle-g, .r-needle-g { transform: rotate(96deg); }
  .envelope, .tab { transition: none; }
  .lift, .print img, .photo img, .wireless .radio { transition: none; }
}