/* hebra.dk — public page. Follows Julie's "Hebra Loom" prototype (Oct 20). */
@font-face { font-family: 'Instrument Sans'; src: url('/fonts/InstrumentSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto Mono'; src: url('/fonts/RobotoMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Courier Prime'; src: url('/fonts/CourierPrime-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ABC Areal (Dinamo) is not used on the public page any more — see README → Fonts. */

:root {
  /* --bg and --text are overridden by the page and text colours set in the editor */
  --bg: #3e2021; --text: #b2aba1;
  --ink: var(--text); --soft: color-mix(in srgb, var(--text) 70%, var(--bg)); --edit: #5b7cff;
  --sans: 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'Roboto Mono', ui-monospace, Menlo, monospace;
  --type: 'Courier Prime', 'Courier New', Courier, monospace;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100%; overflow-x: hidden; overflow-y: auto; position: relative;
  background: var(--bg); color: var(--ink); font: 14px var(--sans); text-transform: uppercase;
}

/* ---- above the fold (fixed, fades once you scroll past half a screen) ---- */
.stamp {
  position: fixed; left: max(1.5vw, env(safe-area-inset-left)); top: 14px; z-index: 4; margin: 0;
  color: var(--text); pointer-events: none; white-space: pre;
  font: 400 11px/1.18 var(--type); text-transform: none;
}
.stamp i { font-style: italic; }

.cinfo {
  position: fixed; right: max(3vw, env(safe-area-inset-right)); top: 18px; z-index: 4;
  display: flex; flex-direction: column; align-items: flex-end; text-align: right;
  font: 12px/19px var(--mono); font-style: normal; text-transform: none;
}
.cinfo a { color: var(--text); text-decoration: none; }
.cinfo a:hover { text-decoration: underline; }

.lang { display: flex; gap: 6px; align-items: center; font-size: 12px; letter-spacing: .06em; color: var(--text); }
.lang a { font: inherit; letter-spacing: inherit; text-transform: uppercase; color: var(--text); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.lang a:hover { opacity: .6; }
.lang a.on { text-decoration: underline; text-underline-offset: 3px; }
.langfix { position: fixed; left: max(24px, calc(env(safe-area-inset-left) + 8px)); bottom: max(56px, calc(env(safe-area-inset-bottom) + 24px)); z-index: 4; }

/* Pins: bottom-right; hover (or tap) and they fly across the page.
   The SVG stays small (overflow: visible) so flying pins never widen the page. */
.pins { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(40px, calc(env(safe-area-inset-bottom) + 16px)); width: 236.7px; height: 180.3px; z-index: 2; color: var(--text); pointer-events: none; }
.pin { transform-box: fill-box; transform-origin: center; transform: translate(var(--bx), var(--by)) rotate(var(--br)); transition: transform 1.3s cubic-bezier(.2, .8, .2, 1) var(--dl, 0s); }
.pins.fly .pin { transform: translate(var(--tx), var(--ty)) rotate(var(--fr)); }
.pins svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pins path, .pins ellipse { fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.stamp, .cinfo, .langfix, .pins { transition: opacity .35s; }
body.past .stamp, body.past .cinfo, body.past .langfix, body.past .pins { opacity: 0; pointer-events: none; }

.hero { height: 100vh; height: 100svh; pointer-events: none; }

/* ---- below the fold ---- */
.rest { position: relative; z-index: 3; background: var(--bg); color: var(--text); font: 12px/1.55 var(--mono); text-transform: none; }
.rest section { padding: 14vh 5vw; }
#om { padding-bottom: 5vh; }
#om p { margin: 0; max-width: 440px; white-space: pre-line; }
#billeder { padding: 0; overflow: hidden; }
#billeder:has(.frames:empty), #citater:has(.tests:empty) { display: none; }
#citater { padding-top: 2vh; padding-bottom: 10vh; }
.foot { text-align: center; padding: 0 5vw max(28px, calc(env(safe-area-inset-bottom) + 12px)); }
.foot .fc { display: flex; flex-direction: column; align-items: center; margin-bottom: 2.2em; }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { text-decoration: underline; }

/* Image frames. Julie's composition of four, repeated for every four images.
   Margins are % of the page width, taken from her layout. */
.frames { display: flow-root; padding-bottom: 6vh; }
.frame { margin: 0; }
.frame img, .frame .ph { display: block; width: 100%; height: auto; object-fit: cover; }
.frame .ph {
  border: 1px solid var(--text);
  background: linear-gradient(to top left, transparent calc(50% - .6px), var(--text) calc(50% - .6px), var(--text) calc(50% + .6px), transparent calc(50% + .6px));
}
.frame .cap { margin-top: 8px; }
.s1 { width: 26%; margin: 4.2% 0 0 0; }   .s1 img, .s1 .ph { aspect-ratio: 3 / 4; }   .s1 .cap { padding-left: 1.5vw; }
.s2 { width: 36%; margin: -8% 0 0 64%; }  .s2 img, .s2 .ph { aspect-ratio: 1.08; }
.s3 { width: 27%; margin: -8.2% 0 0 14%; } .s3 img, .s3 .ph { aspect-ratio: 3 / 4; }
.s4 { width: 40%; margin: -5.1% 0 0 54%; } .s4 img, .s4 .ph { aspect-ratio: 1.25; }
.s1:not(:first-child) { margin-top: 12.9%; }

/* Testimonials */
.tests figure { margin: 0 0 12vh; font: 13px/1.4 var(--type); text-transform: none; }
.tests figure:nth-child(3n + 2) { margin-left: 48%; }
.tests figure:nth-child(3n + 3) { margin-left: 14%; }
.tests figure:last-child { margin-bottom: 0; }
.tests blockquote { margin: 0; max-width: 30ch; white-space: pre-line; }
.tests figcaption { margin-top: 1.4em; }
@media (max-width: 700px) {
  .tests figure:nth-child(3n + 2) { margin-left: 30%; }
  .tests figure:nth-child(3n + 3) { margin-left: 8%; }
}

/* ---- live needles: other visitors ---- */
#needles { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.peer { position: absolute; left: 0; top: 0; width: 80px; height: 50px; color: var(--text); transition: opacity .6s; will-change: transform; }
.peer svg { position: absolute; left: 0; top: 0; width: 80px; height: 50px; overflow: visible; }
.peer path, .peer ellipse { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.peer .cc { position: absolute; left: 0; top: 28px; font: 10px var(--mono); letter-spacing: .08em; color: var(--soft); }
.peer.gone { opacity: 0; }

@media (prefers-reduced-motion: reduce) { .pin { transition: none; } }

/* Touch screens: links and EN/DA get finger-sized hit areas (≥24px). */
@media (pointer: coarse) {
  .cinfo a, .foot a { padding: 3px 0; }
  .lang { gap: 0; }
  .lang a { padding: 5px 4px; }
  .langfix { margin: -5px -4px; }
}

/* Phones: Julie's composition, scaled up so the images aren't thumbnails. */
@media (max-width: 600px) {
  .s1 { width: 62%; margin: 6% 0 0 0; }
  .s2 { width: 70%; margin: 12% 0 0 30%; }
  .s3 { width: 60%; margin: 12% 0 0 6%; }
  .s4 { width: 76%; margin: 12% 0 0 24%; }
  .s1:not(:first-child) { margin-top: 16%; }
}
/* The narrowest phones (≈320px): a smaller stamp keeps clear of the contact lines. */
@media (max-width: 340px) { .stamp { font-size: 9.5px; } .cinfo { font-size: 11px; line-height: 19px; } }

@media (max-width: 760px) {
  .pins { width: 171.8px; height: 130.9px; right: max(6px, env(safe-area-inset-right)); bottom: max(30px, calc(env(safe-area-inset-bottom) + 12px)); }
}

/* ---- edit mode (inside the editor preview only) ---- */
[data-mode="edit"] [data-field], [data-mode="edit"] [data-item-field] { cursor: text; outline: 1px dashed transparent; outline-offset: 4px; border-radius: 2px; transition: outline-color .15s; }
[data-mode="edit"] [data-field]:hover, [data-mode="edit"] [data-item-field]:hover { outline-color: color-mix(in srgb, var(--edit) 80%, transparent); }
[data-mode="edit"] .is-selected { outline: 1.5px solid var(--edit) !important; background: color-mix(in srgb, var(--bg) 70%, transparent); }
[data-mode="edit"] .frame img, [data-mode="edit"] .frame .ph { cursor: pointer; }
[data-mode="edit"] [data-list].is-current > img, [data-mode="edit"] [data-list].is-current > .ph { outline: 2px solid var(--edit); outline-offset: 3px; }