/*
 * The entrance at laurathompson.uk: her stamp, big and central, her line
 * under it and the way in under that. One control, one page, no scroll.
 * Warm cream by day; a calm, warm dusk by night (never pure white, never
 * near black). The stamp's own look is the shared stamp stylesheet.
 */
@font-face { font-family: "Instrument Serif"; src: url(/2026-10-11-stamp/_assets/hub/fonts/instrument-serif-regular.5eb09b5ac0.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Funnel Sans"; src: url(/2026-10-11-stamp/_assets/hub/fonts/funnel-sans-var.478c99dc8b.woff2) format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;
  --ground: light-dark(#F6F1E7, #262420);
  --ink: light-dark(#1F1D1A, #ECE5D8);
  --ink-2: light-dark(#5F584E, #B5AC9E);
  --line: light-dark(#D9D0BF, #45403A);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.45, 0, .25, 1);
  --stamp-size: min(80vw, 58svh, 36rem);
  /* The handoff layer takes the hub's own ground, so the way in is seamless. */
  --handoff-colour: light-dark(#EEF0EC, #101215);
  --handoff-duration: 520ms;
  --handoff-easing: cubic-bezier(.65, 0, .35, 1);
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--ground);
  color: var(--ink);
  font-family: "Funnel Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- the page: one column, dead centre ---------- */
.entrance {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(1.5rem, env(safe-area-inset-top)) 1.25rem max(1.5rem, env(safe-area-inset-bottom));
}
.enter {
  display: grid;
  justify-items: center;
  gap: clamp(1.25rem, 3.2svh, 2.25rem);
  min-width: 44px;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  border-radius: 1.5rem;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}
.enter-stamp {
  display: block;
  width: var(--stamp-size);
  border-radius: 50%;
  touch-action: none;
  transition: transform 160ms var(--ease-out);
}
.enter:active .enter-stamp, .enter.is-pressed .enter-stamp { transform: scale(.975); transition-duration: 90ms; }
.enter-words { display: grid; justify-items: center; gap: .85rem; text-align: center; }
.tagline {
  font-family: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.cue {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .25rem;
  font-size: .8125rem;
  font-weight: 560;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-2);
}
/* A hairline draws in under the way in on hover and on focus. */
.cue::after {
  content: "";
  position: absolute;
  left: .25rem; right: calc(.25rem + .24em); bottom: .55rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(.12);
  transition: transform 420ms var(--ease-out), opacity 300ms ease-out;
  opacity: .4;
}
.enter:hover .cue, .enter:focus-visible .cue { color: var(--ink); }
.enter:hover .cue::after, .enter:focus-visible .cue::after { transform: scaleX(1); opacity: 1; }
.cue-tap { display: none; }
@media (hover: none) and (pointer: coarse) {
  .cue-click { display: none; }
  .cue-tap { display: inline; }
}

/* Keyboard focus: a ring round the stamp itself, clear in both themes. */
.enter:focus-visible .enter-stamp { outline: 2px solid var(--ink); outline-offset: clamp(8px, 1.6vmin, 14px); }

/* ---------- the drift: nine soft discs of the areas' patterns ---------- */
.drift {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  --rx: max(46vw, calc(var(--stamp-size) * .5 + 9rem));
  --ry: max(42svh, calc(var(--stamp-size) * .5 + 7rem));
  --disc: clamp(9rem, 26vmin, 19rem);
}
.drift-disc {
  position: absolute;
  left: calc(50% + sin(var(--a)) * var(--rx) - var(--disc) / 2);
  top: calc(50% - cos(var(--a)) * var(--ry) - var(--disc) / 2);
  width: var(--disc);
  height: var(--disc);
  opacity: var(--o, .17);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, rgb(0 0 0 / .5) 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 30%, rgb(0 0 0 / .5) 62%, transparent 100%);
}
.drift-disc svg { display: block; width: 100%; height: 100%; }
.drift .stp-off { fill: var(--ground); }
.drift-disc--1 { --a: 20deg; --dx: 1.2; --dy: -.8; --t: 61s; --d: -12s; }
.drift-disc--2 { --a: 60deg; --dx: -.9; --dy: 1.1; --t: 73s; --d: -40s; }
.drift-disc--3 { --a: 100deg; --dx: .7; --dy: 1.3; --t: 67s; --d: -21s; }
.drift-disc--4 { --a: 140deg; --dx: -1.2; --dy: -.6; --t: 79s; --d: -55s; }
.drift-disc--5 { --a: 180deg; --dx: 1; --dy: -1; --t: 64s; --d: -8s; }
.drift-disc--6 { --a: 220deg; --dx: -.8; --dy: -1.2; --t: 71s; --d: -33s; }
.drift-disc--7 { --a: 260deg; --dx: 1.1; --dy: .9; --t: 59s; --d: -47s; }
.drift-disc--8 { --a: 300deg; --dx: -1; --dy: .7; --t: 76s; --d: -19s; }
.drift-disc--9 { --a: 340deg; --dx: .9; --dy: 1; --t: 69s; --d: -61s; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .drift-disc { --o: .13; } }
html[data-theme="dark"] .drift-disc { --o: .13; }

/* ---------- motion (none of it under reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Each disc floats on a slow loop of its own, so no two ever keep step. */
  .drift-disc { animation: drift var(--t) var(--ease-soft) var(--d) infinite alternate; }
  @keyframes drift {
    0% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(calc(var(--dx) * 2.2vmin), calc(var(--dy) * -1.4vmin)) rotate(calc(var(--dx) * 5deg)); }
    100% { transform: translate(calc(var(--dx) * -1.2vmin), calc(var(--dy) * 2.4vmin)) rotate(calc(var(--dx) * -4deg)); }
  }
  /* The arrival: the stamp settles, the bands ink in round the ring, her line and the way in settle after.
     Nothing starts hidden, so the first paint already shows the page. */
  .lt-ready .enter-stamp .stamp { animation: set-down 900ms var(--ease-out) both; }
  .lt-ready .enter-stamp .stp-seg { animation: ink-in 520ms ease-out both; animation-delay: calc(220ms + var(--i) * 55ms); }
  .lt-ready .tagline { animation: rise 760ms var(--ease-out) 520ms both; }
  .lt-ready .cue { animation: rise 760ms var(--ease-out) 700ms both; }
  .lt-ready .drift { animation: fade 1800ms ease-out 200ms both; }
  @keyframes set-down { from { transform: scale(1.04); } }
  @keyframes ink-in { from { opacity: 0; } }
  @keyframes rise { from { transform: translateY(6px); } }
  @keyframes fade { from { opacity: 0; } }
}
.stp-seg:nth-child(2) { --i: 0; } .stp-seg:nth-child(3) { --i: 1; } .stp-seg:nth-child(4) { --i: 2; }
.stp-seg:nth-child(5) { --i: 3; } .stp-seg:nth-child(6) { --i: 4; } .stp-seg:nth-child(7) { --i: 5; }
.stp-seg:nth-child(8) { --i: 6; } .stp-seg:nth-child(9) { --i: 7; } .stp-seg:nth-child(10) { --i: 8; }

/* ---------- the 404 ---------- */
.entrance-page--lost .entrance { align-content: center; gap: 1.5rem; }
.entrance-page--lost { --stamp-size: min(56vw, 36svh, 18rem); }
.lost-title {
  margin: 0;
  font-family: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  line-height: 1.1;
  text-align: center;
}