@font-face {
  font-family: "Big Shoulders Stencil Display";
  src: url("/fonts/big-shoulders-stencil-display.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@property --edge { syntax: "<length>"; inherits: true; initial-value: 12px; }
@property --mark-h { syntax: "<length>"; inherits: true; initial-value: 60px; }
@property --top { syntax: "<length>"; inherits: true; initial-value: 72px; }
@property --bottom { syntax: "<length>"; inherits: true; initial-value: 48px; }
@property --stage-w { syntax: "<length>"; inherits: true; initial-value: 960px; }

:root {
  /* Layout: one printed survey sheet, never scrolled. A graduated neatline runs round the edge; the frame
     stands in the middle with the wordmark, a roof and the sun standing on its top edge and the legend under
     it; the ground is drawn behind in contours, and again, inverted, inside the empty frame. */
  --paper: #f2e1c3;
  --paper-deep: #e3c99d;
  --sand: #e2bf8c;
  --ochre: #c99559;
  --umber: #85563a;
  --rust: #a6502c;
  --red: #b83b24;
  --ink: #2a201b;
  --night: #201a15;
  --cream: #f5e6ca;

  --display: "Big Shoulders Stencil Display", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --edge: clamp(10px, 1.7vmin, 18px);
  --offset: clamp(4px, 0.8vmin, 10px);
  --rule: clamp(2px, 0.25vmin + 1px, 4px);
  color-scheme: light;
}

html, body { height: 100%; margin: 0; overflow: hidden; background: var(--paper); }
body {
  color: var(--ink); font-family: var(--mono); font-size: 10px;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior: none;
}

.sheet { position: fixed; inset: 0; overflow: hidden; background: var(--paper); }

/* the drawing area inside the neatline; the paper, its grain and the ground are drawn out to the sheet's edge */
.layout {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + var(--edge));
  right: calc(env(safe-area-inset-right, 0px) + var(--edge));
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--edge));
  left: calc(env(safe-area-inset-left, 0px) + var(--edge));
  container-type: size;
  display: grid; place-items: center;
}
.ground, .grain {
  position: absolute; pointer-events: none;
  top: calc(-1 * (env(safe-area-inset-top, 0px) + var(--edge)));
  right: calc(-1 * (env(safe-area-inset-right, 0px) + var(--edge)));
  bottom: calc(-1 * (env(safe-area-inset-bottom, 0px) + var(--edge)));
  left: calc(-1 * (env(safe-area-inset-left, 0px) + var(--edge)));
}
.ground { z-index: -2; }
.topo { display: block; width: 100%; height: 100%; }
.grain {
  z-index: -1; opacity: 0.55; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .19 0 0 0 1.5 -.6'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

/* the frame and what stands on it. Full: the wordmark, a roof and the sun; compact (a phone held upright):
   the wordmark and a smaller sun */
.stage {
  --rail: clamp(10px, 3.6cqw, 120px);
  --avail: calc(100cqw - 2 * var(--rail));
  --k: 10.7;
  --mark-cap: min(11cqh, 150px);
  --mark-h: min(var(--mark-cap), calc(var(--avail) / var(--k)));
  --top: calc(var(--mark-h) * 1.08 + 6px);
  --bottom: clamp(40px, 7.6cqh, 88px);
  --stage-w: clamp(min(960px, var(--avail)), (100cqh - var(--top) - var(--bottom)) * 1.8, var(--avail));
  position: relative;
  width: var(--stage-w); height: 100cqh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--top) minmax(0, 1fr) var(--bottom);
}

.skyline { grid-row: 1; display: flex; align-items: flex-end; gap: calc(var(--mark-h) * 0.3); min-width: 0; }
.mark { margin: 0; flex: none; height: var(--mark-h); line-height: 0; }
.mark svg { display: block; height: 100%; width: calc(var(--mark-h) * 6.18); overflow: visible; fill: var(--ink); }
.mark .house { fill: var(--red); }
.roofs { flex: none; margin-left: auto; height: calc(var(--mark-h) * 0.9); width: calc(var(--mark-h) * 1.8); overflow: visible; }
.sun { --path: 1; flex: none; height: calc(var(--mark-h) * 1.05); width: calc(var(--mark-h) * 2.1); overflow: visible; }
.roofs text { font: 500 9px var(--mono); fill: var(--ink); }
.k-ink { fill: var(--ink); } .k-ochre { fill: var(--ochre); } .k-red { fill: var(--red); }
.l-ink, .l-umber, .l-rust { fill: none; } .l-ink { stroke: var(--ink); } .l-umber { stroke: var(--umber); } .l-rust { stroke: var(--rust); }
.sun-disc { fill: var(--red); transform-box: fill-box; transform-origin: 50% 50%; animation: sunrise 2.4s cubic-bezier(0.16, 0.84, 0.3, 1) 0.2s both; }
@keyframes sunrise { from { transform: translateY(64%); } }

.frame {
  grid-row: 2; position: relative; z-index: 1; min-height: 0;
  border: var(--rule) solid var(--ink);
  background: var(--night);
  box-shadow: var(--offset) var(--offset) 0 var(--ink);
  container-type: size;
}
.frame-app { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--night); }
.frame:has(.frame-app) .frame-slot { display: none; }
.frame-slot { position: absolute; inset: 0; overflow: hidden; }
.frame-topo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.frame-x { position: absolute; inset: 0; width: 100%; height: 100%; }
.frame-x path { fill: none; stroke: color-mix(in srgb, var(--cream) 24%, transparent); stroke-width: 1; stroke-dasharray: 7 7; vector-effect: non-scaling-stroke; }
.plate {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max-content; max-width: calc(100% - 32px); box-sizing: border-box;
  padding: clamp(14px, 3.2cqh, 30px) clamp(16px, 3.6cqw, 44px);
  background: var(--night); border: 1px solid color-mix(in srgb, var(--cream) 40%, transparent);
  color: var(--cream); text-align: center;
}
.plate-title { margin: 0; font: 800 clamp(26px, 5.6cqw, 68px)/0.92 var(--display); text-transform: uppercase; letter-spacing: 0.01em; text-wrap: balance; }
.plate-note { margin: 0.8em 0 0; font: 400 clamp(11px, 1.25cqw, 13px)/1.45 var(--mono); color: color-mix(in srgb, var(--cream) 74%, transparent); }

/* the legend under the frame */
.legend {
  grid-row: 3; display: flex; align-items: center; gap: clamp(12px, 2.4cqw, 32px);
  padding-top: calc(var(--offset) + 3px); min-width: 0;
  container: legend / inline-size;
  font: 500 10px/1.25 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.legend > * { flex: none; }
.scale { display: flex; align-items: center; gap: 10px; }
.scale svg { height: 24px; width: auto; display: block; overflow: visible; }
.scale svg text { font: 500 8.5px var(--mono); letter-spacing: 0.04em; fill: var(--ink); }
.keys { display: flex; gap: clamp(12px, 1.8cqw, 22px); margin: 0; padding: 0; list-style: none; }
.keys li { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.keys svg { width: 24px; height: 14px; flex: none; overflow: visible; }
.titleblock { margin-left: auto; display: flex; align-items: stretch; border: 1.5px solid var(--ink); background: var(--paper); }
.tb-n { display: grid; place-items: center; padding: 2px 8px 0; background: var(--red); color: var(--cream); font: 800 26px/1 var(--display); letter-spacing: 0.02em; }
.tb-t { padding: 5px 9px; font-size: 9.5px; line-height: 1.35; }
.tb-t b { font-weight: 600; }
@container legend (max-width: 820px) { .keys li:nth-child(n + 3) { display: none; } }
@container legend (max-width: 600px) { .keys { display: none; } }
@container legend (max-width: 380px) { .scale-note { display: none; } .tb-t { display: none; } }

/* the margins either side of the frame, when there is room for them */
.rail {
  position: absolute; top: var(--top); bottom: var(--bottom);
  width: calc((100cqw - var(--stage-w)) / 2);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 2px; box-sizing: border-box; overflow: hidden; pointer-events: none;
  container: rail / inline-size;
}
.rail--l { right: 100%; }
.rail--r { justify-content: flex-end; }
.rail--r { left: calc(100% + var(--offset)); width: calc((100cqw - var(--stage-w)) / 2 - var(--offset)); }
.rail-text { margin: 0; writing-mode: vertical-rl; transform: rotate(180deg); font: 500 10px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.north { width: 22px; height: 52px; flex: none; overflow: visible; }
.north text { font: 800 15px var(--display); fill: var(--ink); }
@container rail (max-width: 34px) { .rail > * { display: none; } }

/* a phone held upright: the wordmark wider, a smaller sun, no roof */
@media (orientation: portrait) and (max-width: 639px) {
  .stage { --k: 7.75; --mark-cap: min(8.5cqh, 120px); --top: calc(var(--mark-h) + 8px); --bottom: clamp(40px, 6.8cqh, 64px); }
  .roofs { display: none; }
  .sun { margin-left: auto; height: calc(var(--mark-h) * 0.6); width: calc(var(--mark-h) * 1.2); }
  .sun { --path: 0; }
}
@media (orientation: portrait) and (min-width: 640px) {
  .stage { --mark-cap: min(8.5cqh, 130px); }
}
/* a phone turned sideways: the wordmark turned up the left edge, everything else for the frame */
@media (orientation: landscape) and (max-height: 520px) {
  .stage {
    --mark-h: min(calc((100cqh - 16px) / 6.18), 7cqw, 58px);
    --top: 0px; --bottom: 0px;
    width: 100cqw;
    grid-template-columns: calc(var(--mark-h) + 16px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .skyline { grid-area: 1 / 1; display: block; position: relative; }
  .mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); }
  .frame { grid-area: 1 / 2; margin: 0 calc(var(--offset) + 2px) calc(var(--offset) + 2px) 0; }
  .roofs, .sun, .legend, .rail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sun-disc { animation: none; }
}
@media (forced-colors: active) {
  .frame { border-color: CanvasText; }
  .mark svg, .mark .house { fill: CanvasText; }
}