/* Heron kit: a drafting sheet. Warm grey grained paper inside a 12px hairline frame, tight uppercase grotesk,
   one signal orange used only as a small square. */
:root {
  --paper: #f4f4ee;
  --ink: #282828;
  --muted: #626260;
  --rule: #b3b3af;
  --signal: #fa3600;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 500 16px/1.4 "Inter Tight", system-ui, sans-serif;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
/* fine paper grain */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .16 0 0 0 0 .15 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* the window frame: a hairline 12px in from every edge */
body::after {
  content: ""; position: fixed; inset: 12px; z-index: 9; pointer-events: none; border: 1px solid var(--rule);
}

.sheet {
  position: relative; z-index: 1;
  min-height: calc(100svh + var(--travel, 300px));
  padding: clamp(40px, 6vh, 72px) clamp(28px, 4.6vw, 48px) 40px;
}
.head { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: clamp(24px, 3.6vh, 44px); }
.head h1 {
  margin: 0;
  font: 600 clamp(30px, 6.1vw, 66px)/1 "Inter Tight", system-ui, sans-serif;
  letter-spacing: -.025em; text-transform: uppercase;
}
.head h1 span { color: #b4b4b0; }
.pin { flex: none; width: 12px; height: 12px; margin-top: .4em; background: var(--signal); }

.plate { position: relative; margin: 0; }
.inkscroll { aspect-ratio: 10 / 9; outline: 1px solid var(--rule); outline-offset: 0; }
.inkscroll__base img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* corner + marks on the plate */
.tick { position: absolute; width: 15px; height: 15px; pointer-events: none; }
.tick::before, .tick::after { content: ""; position: absolute; background: var(--ink); }
.tick::before { left: 7px; top: 0; width: 1px; height: 15px; }
.tick::after { top: 7px; left: 0; height: 1px; width: 15px; }
.tick--tl { left: -8px; top: -8px; } .tick--tr { right: -8px; top: -8px; }
.tick--bl { left: -8px; bottom: -8px; } .tick--br { right: -8px; bottom: -8px; }

.foot { display: flex; justify-content: flex-end; margin-top: 22px; }
.foot p { margin: 0; max-width: 24em; color: var(--muted); font-size: clamp(14px, 1.6vw, 17px); text-align: right; }
@media (max-width: 600px) {
  .inkscroll { aspect-ratio: 4 / 5; }
  .foot p { text-align: left; }
  .foot { justify-content: flex-start; }
}