/* Heron kit: a drafting sheet. Grey grained paper, black pen lines, tight uppercase grotesk, small mono labels,
   one signal orange for pins, a hard offset shadow on the floating card. */
:root { --paper: #f4f4ee; --ink: #282828; --muted: #8a8a86; --rule: #b3b3af; --signal: #fa3600; }
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; }
body::after { content: ""; position: fixed; inset: 12px; z-index: 9; pointer-events: none; border: 1px solid var(--rule); }

.sss {
  --sss-length: 520svh; --sss-length-m: 460svh;
  --sss-bg: var(--paper); --sss-ink: var(--ink); --sss-muted: var(--muted); --sss-line: var(--rule); --sss-accent: var(--signal);
  --sss-card-shadow: 0 7px 0 -2px #000;
}
.sss__stage { 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 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.sss__step h2 { font: 600 clamp(44px, 10.4vw, 118px)/.94 "Inter Tight", system-ui, sans-serif; letter-spacing: -.035em; text-transform: uppercase; }
.sss__layer { padding: clamp(32px, 4vh, 52px) clamp(24px, 4vw, 52px) clamp(150px, 17vh, 200px); }

.plan .wall { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: square; }
.plan .win { fill: none; stroke: var(--ink); stroke-width: 2; }
.plan .door { fill: none; stroke: var(--ink); stroke-width: 3; }
.plan .swing { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 5; }
.plan .dot { fill: #9d9d98; }
.plan .thing, .plan .thing-g circle { fill: rgb(250 54 0 / .1); stroke: var(--signal); stroke-width: 2; }
.plan .dim { stroke: var(--muted); stroke-width: 1.5; fill: none; }
.plan text { font: 500 13px "Geist Mono", ui-monospace, monospace; letter-spacing: .06em; fill: var(--muted); }
.plan .flag { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 7 6; }
.plan .pin rect { fill: var(--signal); }
.plan .pin text { fill: #fff; font-size: 14px; text-anchor: middle; dominant-baseline: central; }

.sss__intro { left: clamp(24px, 4vw, 48px); bottom: clamp(28px, 4vw, 48px); width: min(340px, calc(100vw - 48px)); }
.sss__intro-head { font: 500 12px/1.2 "Geist Mono", ui-monospace, monospace; letter-spacing: .06em; padding: 10px 12px; }
.sss__caption { padding: 14px 14px 16px; }
.sss__caption p { margin: 0; font-size: clamp(15px, 1.7vw, 18px); line-height: 1.35; }
.tail { height: 40vh; }
@media (max-width: 767px) { .sss__intro { right: auto; } }