:root {
  /* Typography notes: IBM Plex Sans Condensed** Condense Condensedd for narrow maker labels; Space Mono only in tiny quantities for serial numbers. */
  --paper: #F4E8D1;
  --pulp: #D8C7A3;
  --amber: #D89A3D;
  --black: #17130E;
  --red: #B94832;
  --blue: #93AFC2;
  --brass: #B58A45;
  --indigo: #26395A;
  --serif: Fraunces, Georgia, 'Times New Roman', serif;
  --condensed: 'IBM Plex Sans Condensed', 'Arial Narrow', Impact, sans-serif;
  --book: 'Libre Baskerville', Georgia, serif;
  --mono: 'Space Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--paper);
  background:
    radial-gradient(circle at 18% 9%, rgba(216,154,61,.22), transparent 30rem),
    radial-gradient(circle at 82% 58%, rgba(147,175,194,.16), transparent 36rem),
    linear-gradient(135deg, #17130E 0%, #211a12 38%, #26395A 100%);
  font-family: var(--book);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: .35;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(244,232,209,.16) 0 1px, transparent 1px),
    radial-gradient(circle at 50% 60%, rgba(216,199,163,.12) 0 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,232,209,.04) 1px, transparent 1px);
  background-size: 17px 19px, 29px 31px, 11px 100%;
  mix-blend-mode: screen;
}

.loupe {
  position: fixed;
  width: 150px;
  height: 150px;
  border: 2px solid rgba(216,154,61,.65);
  border-radius: 50%;
  pointer-events: none;
  z-index: 50;
  transform: translate(-50%, -50%);
  opacity: 0;
  background:
    radial-gradient(circle, rgba(244,232,209,.2), transparent 62%),
    repeating-linear-gradient(35deg, rgba(244,232,209,.18) 0 1px, transparent 1px 9px);
  box-shadow: 0 0 0 9999px rgba(23,19,14,.04), inset 0 0 24px rgba(147,175,194,.25);
  transition: opacity .25s ease;
}
body.loupe-on .loupe { opacity: 1; }

.binder-tabs {
  position: fixed;
  top: 10vh;
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  align-items: flex-start;
}
.tab {
  min-width: 118px;
  padding: .62rem .9rem .58rem .8rem;
  color: var(--black);
  text-decoration: none;
  font: 700 .72rem/1 var(--condensed);
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--pulp);
  border: 1px solid rgba(23,19,14,.35);
  border-left: 0;
  border-radius: 0 10px 10px 0;
  box-shadow: 5px 7px 18px rgba(0,0,0,.25);
  transform: translateX(-28px) rotate(var(--tilt));
  transition: transform .25s ease, background .25s ease;
  cursor: grab;
}
.tab:hover, .tab.dragging { transform: translateX(0) rotate(0deg); background: var(--paper); }
.tab-pulp { --tilt: -2deg; }
.tab-frame { --tilt: 1.5deg; background: var(--blue); }
.tab-margin { --tilt: -1deg; background: var(--red); color: var(--paper); }
.tab-press { --tilt: 2deg; background: var(--brass); }
.tab-dry { --tilt: -.5deg; background: var(--amber); }
.tab-archive { --tilt: 1deg; background: var(--indigo); color: var(--paper); }
.tab-note {
  margin-left: .6rem;
  max-width: 170px;
  padding: .65rem .72rem;
  color: var(--black);
  background: rgba(244,232,209,.88);
  font: .68rem/1.25 var(--mono);
  border: 1px dashed rgba(23,19,14,.5);
  transform: rotate(-2deg);
}

.atelier { position: relative; }
.path-line {
  position: fixed;
  inset: 5vh 4vw;
  width: 92vw;
  height: 90vh;
  z-index: 1;
  pointer-events: none;
  opacity: .52;
}
.path-line path { fill: none; stroke: rgba(216,154,61,.6); stroke-width: 2; stroke-dasharray: 12 18; }

.station {
  position: relative;
  min-height: 100vh;
  padding: 8vh 7vw 7vh 12vw;
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) minmax(270px, .9fr);
  align-items: center;
  gap: 5vw;
  isolation: isolate;
}
.station::before {
  content: attr(data-station);
  position: absolute;
  right: 5vw;
  top: 6vh;
  font: 700 8rem/.8 var(--condensed);
  color: rgba(244,232,209,.045);
  z-index: -1;
}
.station-label {
  position: absolute;
  top: 7vh;
  left: 12vw;
  color: var(--amber);
  font: 700 .76rem/1 var(--condensed);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.copy-block {
  position: relative;
  z-index: 6;
  max-width: 610px;
  padding: 2rem;
  color: var(--black);
  background: rgba(244,232,209,.9);
  box-shadow: 0 24px 60px rgba(0,0,0,.33), inset 0 0 0 1px rgba(23,19,14,.12);
  clip-path: polygon(1.5% 0, 98% 1%, 100% 94%, 96% 100%, 2% 98%, 0 6%);
}
.eyebrow, .measurement {
  color: var(--red);
  font: 700 .76rem/1 var(--condensed);
  letter-spacing: .18em;
  text-transform: uppercase;
}
h1, h2 {
  margin: .45rem 0 .9rem;
  font-family: var(--serif);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .92;
}
h1 { font-size: clamp(3.1rem, 7vw, 7.9rem); }
h2 { font-size: clamp(2.6rem, 5.6vw, 6.4rem); }
p { font-size: clamp(1rem, 1.35vw, 1.22rem); line-height: 1.65; }

.document-sheet {
  position: relative;
  width: min(42vw, 570px);
  aspect-ratio: 4 / 5.35;
  background:
    radial-gradient(circle at 25% 20%, rgba(147,175,194,.2), transparent 20%),
    radial-gradient(circle at 78% 80%, rgba(184,72,50,.12), transparent 23%),
    repeating-linear-gradient(86deg, rgba(23,19,14,.035) 0 1px, transparent 1px 15px),
    var(--paper);
  color: var(--black);
  box-shadow: 0 34px 65px rgba(0,0,0,.45), inset 0 0 28px rgba(181,138,69,.18);
  clip-path: polygon(2% 0, 8% 1.5%, 14% .4%, 22% 1.8%, 31% .7%, 43% 1.2%, 54% 0, 66% 1.5%, 77% .6%, 89% 1.6%, 98% .5%, 100% 12%, 99% 24%, 100% 37%, 98.5% 48%, 100% 61%, 99% 73%, 100% 86%, 98% 100%, 86% 98.6%, 73% 100%, 59% 98.7%, 44% 100%, 31% 98.4%, 18% 100%, 6% 98.5%, 0 100%, 1.5% 84%, .4% 70%, 1.5% 58%, .3% 45%, 1.4% 31%, .2% 17%);
}
.document-sheet::after {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(38,57,90,.22);
  background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(38,57,90,.1) 31px 32px);
}
.watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-16deg);
  color: rgba(38,57,90,.18);
  font: 900 clamp(2rem, 5vw, 5.6rem)/1 var(--serif);
  white-space: nowrap;
  z-index: 2;
}
.corner-curl {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30%;
  height: 24%;
  background: linear-gradient(135deg, rgba(244,232,209,.1), #D8C7A3 50%, #B58A45 100%);
  border-radius: 100% 0 0 0;
  box-shadow: -10px -10px 22px rgba(0,0,0,.16);
  transform-origin: bottom right;
  animation: curl 5s ease-in-out infinite;
}

.vat {
  position: relative;
  width: min(56vw, 720px);
  aspect-ratio: 1.25;
  display: grid;
  place-items: center;
  border-radius: 48% 52% 45% 55%;
  background: radial-gradient(ellipse, rgba(147,175,194,.45), rgba(38,57,90,.62) 56%, rgba(23,19,14,.88) 75%);
  box-shadow: inset 0 0 58px rgba(147,175,194,.3), 0 40px 100px rgba(0,0,0,.55);
}
.water-ring { position: absolute; inset: 9%; border: 2px solid rgba(147,175,194,.45); border-radius: 50%; animation: soak 6s ease-in-out infinite; }
.floating-fibers { position: absolute; inset: 0; background: repeating-radial-gradient(circle at 35% 45%, rgba(244,232,209,.18) 0 1px, transparent 1px 14px); animation: drift 14s linear infinite; }
.wet-sheet { transform: translateY(8%) rotate(-18deg); opacity: .9; animation: surface 7s ease-in-out infinite; }
.pulp-copy { margin-left: -7vw; transform: rotate(1.4deg); }
.measurement { position: absolute; bottom: 9vh; right: 8vw; color: var(--blue); font-family: var(--mono); }

.deckle-frame-object { position: relative; height: 72vh; display: grid; place-items: center; transform: rotate(8deg); }
.framed-sheet { width: min(34vw, 450px); transform: rotate(-11deg); }
.frame-rail { position: absolute; background: linear-gradient(90deg, var(--brass), var(--amber), var(--brass)); box-shadow: 0 12px 25px rgba(0,0,0,.35); z-index: 3; }
.rail-top, .rail-bottom { width: min(44vw, 570px); height: 18px; }
.rail-left, .rail-right { width: 18px; height: min(62vh, 600px); }
.rail-top { top: 7vh; animation: railTop 4s ease-in-out infinite; }
.rail-bottom { bottom: 7vh; animation: railBottom 4s ease-in-out infinite; }
.rail-left { left: 5vw; animation: railLeft 4s ease-in-out infinite; }
.rail-right { right: 5vw; animation: railRight 4s ease-in-out infinite; }
.vellum-slip { position: absolute; top: 18%; left: -12%; z-index: 4; padding: .8rem 1rem; background: rgba(147,175,194,.46); color: var(--indigo); font: 700 .75rem var(--condensed); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-7deg); }
.tape-note::before { content: ""; position: absolute; width: 110px; height: 28px; top: -12px; left: 12%; background: rgba(216,199,163,.75); transform: rotate(-5deg); }
.tool-mark { position: absolute; color: rgba(244,232,209,.5); font: .8rem var(--mono); border: 1px solid rgba(244,232,209,.22); padding: .45rem .7rem; }
.awl { left: 18vw; bottom: 12vh; transform: rotate(-13deg); } .folder { right: 11vw; top: 19vh; transform: rotate(8deg); }

.margin-sheet { justify-self: center; transform: rotate(-8deg); }
.crop { position: absolute; width: 52px; height: 52px; z-index: 5; }
.crop::before, .crop::after { content: ""; position: absolute; background: var(--indigo); }
.crop::before { width: 52px; height: 2px; } .crop::after { width: 2px; height: 52px; }
.crop-tl { top: 5%; left: 5%; } .crop-tr { top: 5%; right: 5%; transform: rotate(90deg); } .crop-bl { bottom: 5%; left: 5%; transform: rotate(-90deg); } .crop-br { bottom: 5%; right: 5%; transform: rotate(180deg); }
.rule { position: absolute; z-index: 4; background: rgba(184,72,50,.72); transform-origin: center; }
.rule-a { left: 15%; top: 26%; width: 68%; height: 2px; animation: marginSlide 4.5s ease-in-out infinite; }
.rule-b { left: 24%; top: 18%; width: 2px; height: 70%; animation: marginSlide 5s ease-in-out infinite reverse; }
.rule-c { right: 18%; top: 20%; width: 2px; height: 58%; }
.pencil-mark {
  position: absolute;
  z-index: 7;
  border: 0;
  color: var(--red);
  background: transparent;
  font: 800 1rem var(--condensed);
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .25s ease, color .25s ease;
}
.pencil-mark::after { content: ""; position: absolute; inset: -.7rem -1rem; border: 2px solid var(--red); border-radius: 50%; transform: rotate(-14deg); }
.pencil-mark:hover { color: var(--indigo); transform: scale(1.25) rotate(-8deg); }
.pencil-mark.active { font-family: var(--mono); color: var(--indigo); }
.mark-one { top: 28%; left: 43%; } .mark-two { top: 53%; left: 22%; } .mark-three { top: 69%; right: 19%; }
.registration-target { position: absolute; right: 14vw; bottom: 13vh; width: 118px; height: 118px; border: 2px solid var(--blue); border-radius: 50%; opacity: .75; }
.registration-target::before, .registration-target::after { content: ""; position: absolute; background: var(--blue); left: 50%; top: 0; width: 2px; height: 100%; }
.registration-target::after { transform: rotate(90deg); }
.registration-target span { position: absolute; inset: 30%; border: 2px solid var(--red); border-radius: 50%; }

.press-machine { position: relative; min-height: 74vh; display: grid; place-items: end center; }
.press-screw { position: absolute; top: 2vh; width: 48px; height: 36vh; background: repeating-linear-gradient(0deg, var(--brass) 0 8px, var(--black) 8px 11px); border-radius: 18px; z-index: 4; }
.press-plate { position: absolute; top: 31vh; width: min(45vw, 560px); height: 68px; background: linear-gradient(#B58A45, #D89A3D 55%, #7d5b2b); border-radius: 8px; box-shadow: 0 24px 35px rgba(0,0,0,.55); animation: pressDown 5.4s ease-in-out infinite; z-index: 5; }
.press-sheet { width: min(38vw, 500px); transform: rotate(4deg); }
.emboss { position: absolute; top: 36%; left: 12%; color: rgba(23,19,14,.18); font: 900 2.2rem var(--condensed); letter-spacing: .08em; z-index: 4; text-shadow: 1px 1px rgba(255,255,255,.35); }
.seal { position: absolute; right: 16%; bottom: 18%; width: 105px; height: 105px; display: grid; place-items: center; border-radius: 50%; border: 4px double rgba(184,72,50,.7); color: rgba(184,72,50,.65); font: 900 2.4rem var(--serif); z-index: 4; }
.stamp-button { border: 2px solid var(--red); background: rgba(184,72,50,.12); color: var(--red); padding: .8rem 1.2rem; font: 800 .82rem var(--condensed); letter-spacing: .15em; text-transform: uppercase; cursor: pointer; transform: rotate(-2deg); }
.stamp-impression { display: inline-block; margin-left: 1rem; padding: .55rem .85rem; color: rgba(184,72,50,.0); border: 3px solid rgba(184,72,50,0); font: 900 .95rem var(--condensed); text-transform: uppercase; transform: rotate(5deg) scale(1.8); transition: all .3s ease; }
.stamp-impression.stamped { color: rgba(184,72,50,.72); border-color: rgba(184,72,50,.55); transform: rotate(-6deg) scale(1); filter: blur(.25px); }

.station-dry { grid-template-columns: 1.25fr .75fr; }
.drying-line { position: relative; height: 76vh; }
.drying-line .line { position: absolute; left: 0; right: -8vw; top: 18%; height: 3px; background: var(--brass); transform: rotate(-6deg); box-shadow: 0 0 20px rgba(216,154,61,.4); }
.hanging-sheet { position: absolute; width: 210px; height: 285px; background: var(--paper); color: var(--black); padding: 2.5rem 1rem; box-shadow: 0 24px 42px rgba(0,0,0,.32); clip-path: polygon(4% 0, 100% 2%, 97% 100%, 0 97%); transform-origin: 50% -8%; animation: sway 4.8s ease-in-out infinite; }
.hanging-sheet p { font: 900 1.55rem var(--serif); color: rgba(38,57,90,.45); transform: rotate(-12deg); }
.clip { position: absolute; top: -22px; left: 50%; width: 34px; height: 46px; transform: translateX(-50%); border-radius: 8px; background: linear-gradient(var(--amber), var(--brass)); box-shadow: 0 7px 12px rgba(0,0,0,.25); }
.sheet-a { left: 8%; top: 21%; transform: rotate(4deg); } .sheet-b { left: 40%; top: 13%; transform: rotate(-6deg); animation-delay: -1.5s; } .sheet-c { left: 66%; top: 27%; transform: rotate(5deg); animation-delay: -.7s; }
.vellum-panel { background: rgba(147,175,194,.78); color: var(--black); }

.archive-envelope { position: relative; width: min(52vw, 700px); aspect-ratio: 1.32; background: #D8C7A3; color: var(--black); box-shadow: 0 34px 80px rgba(0,0,0,.45), inset 0 0 0 2px rgba(23,19,14,.16); transform: rotate(-5deg); clip-path: polygon(0 13%, 8% 0, 100% 2%, 98% 100%, 2% 97%); }
.envelope-flap { position: absolute; inset: 0; background: linear-gradient(150deg, rgba(244,232,209,.75) 0 49%, transparent 50%); transform-origin: top; transition: transform .7s ease; z-index: 4; }
.archive-envelope:hover .envelope-flap, .archive-envelope.open .envelope-flap { transform: rotateX(62deg); }
.archive-sheet { position: absolute; width: 48%; left: 27%; top: 20%; transform: rotate(2deg); transition: transform .7s ease; z-index: 3; }
.archive-envelope:hover .archive-sheet, .archive-envelope.open .archive-sheet { transform: translateY(-18%) rotate(2deg); }
.archive-lines { position: absolute; bottom: 22%; left: 14%; z-index: 5; color: rgba(38,57,90,.55); font: 700 .8rem var(--mono); }
.string { position: absolute; background: rgba(184,72,50,.65); z-index: 7; }
.string.vertical { width: 3px; height: 85%; left: 51%; top: 8%; } .string.horizontal { height: 3px; width: 86%; left: 7%; top: 54%; }
.string-button { position: absolute; z-index: 8; width: 42px; height: 42px; border-radius: 50%; background: var(--red); border: 3px solid rgba(23,19,14,.25); }
.string-button.one { left: calc(51% - 21px); top: 38%; } .string-button.two { left: calc(51% - 21px); top: 61%; }
.final-stamp { position: absolute; right: 7%; bottom: 8%; z-index: 9; color: var(--red); border: 4px double var(--red); padding: .7rem 1rem; font: 900 1rem var(--condensed); letter-spacing: .14em; text-transform: uppercase; transform: rotate(-8deg); }
.archive-copy { transform: rotate(2deg); }

@keyframes surface { 0%,100% { transform: translateY(11%) rotate(-18deg); filter: brightness(.86); } 50% { transform: translateY(-5%) rotate(-13deg); filter: brightness(1.12); } }
@keyframes soak { 0%,100% { transform: scale(.94); opacity: .35; } 50% { transform: scale(1.06); opacity: .75; } }
@keyframes drift { to { transform: rotate(360deg); } }
@keyframes curl { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-9deg); } }
@keyframes railTop { 0%,100% { transform: translateY(-22px); } 50% { transform: translateY(6px); } }
@keyframes railBottom { 0%,100% { transform: translateY(22px); } 50% { transform: translateY(-6px); } }
@keyframes railLeft { 0%,100% { transform: translateX(-22px); } 50% { transform: translateX(6px); } }
@keyframes railRight { 0%,100% { transform: translateX(22px); } 50% { transform: translateX(-6px); } }
@keyframes marginSlide { 0%,100% { transform: translateX(-14px); } 50% { transform: translateX(18px); } }
@keyframes pressDown { 0%,100% { transform: translateY(-38px); } 45%,60% { transform: translateY(46px); } }
@keyframes sway { 0%,100% { rotate: -3deg; } 50% { rotate: 4deg; } }

@media (max-width: 860px) {
  .station { grid-template-columns: 1fr; padding-left: 4.5rem; }
  .copy-block { margin: 0; }
  .document-sheet, .vat, .archive-envelope { width: min(78vw, 560px); }
  .binder-tabs { top: 5vh; }
  .tab { min-width: 90px; font-size: .62rem; }
  .tab-note { display: none; }
  .station-dry { grid-template-columns: 1fr; }
  .sheet-c { display: none; }
}