/* ─────────────────────────────────────────────────────────────────────────────
   bnfldt — lock.css
   ─────────────────────────────────────────────────────────────────────────────
   The lock page only (lock.html, served by middleware.js). Standalone on
   purpose: style.css stays behind the lock with the rest of the site, and
   this page is temporary. The tokens below are copies of the ones in
   style.css §1 — if the palette changes while the lock is up, change both.

   The look is the footer's gradient wrap (style.css §12), grown to fill the
   screen: the same six uneven strips over the same blurred image, the same
   grain, the same ink.
   ───────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Absans';
  src: url('/assets/fonts/Absans-Regular.woff2') format('woff2');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gambetta';
  src: url('/assets/fonts/Gambetta-Variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* Light is the theme; dark is opt-in, exactly as on the site. */
:root {
  --brand-sour-cream:  #FFFDF7;
  --brand-cream:       #FDFBD4;
  --brand-moss-desat:  #4C5446;
  --brand-dark:        #1D1D1D;

  --page-bg:     var(--brand-sour-cream);
  --frame-pad:   10px;
  --radius-card: 1.5rem;

  --ink:         var(--brand-moss-desat);
  --ink-soft:    rgba(76, 84, 70, 0.84);
  --ink-error:   #AD4C1F;                          /* --color-accent-ink */
  --field-bg:    rgba(255, 253, 247, 0.55);
  --field-line:  rgba(76, 84, 70, 0.32);
  --copy-ink:    rgba(255, 253, 247, 0.86);        /* over the green foot of the image */
  --submit-ink:  var(--brand-sour-cream);

  --img:         url('/assets/img/footer/gradient-light.webp');
  --grain:       0.05;

  --font-display: 'Gambetta', Georgia, serif;
  --font-body:    'Absans', system-ui, sans-serif;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-fast:     cubic-bezier(0, 0, 0.2, 1);
}

html[data-theme="dark"] {
  --page-bg:     var(--brand-cream);               /* the site's dark --frame-bg */
  --ink:         var(--brand-sour-cream);
  --ink-soft:    rgba(255, 253, 247, 0.78);
  --ink-error:   #ff854d;
  --field-bg:    rgba(0, 0, 0, 0.28);
  --field-line:  rgba(255, 253, 247, 0.28);
  --copy-ink:    rgba(255, 253, 247, 0.66);
  --submit-ink:  var(--brand-dark);
  --img:         url('/assets/img/footer/gradient-dark.webp');
  --grain:       0.06;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }


/* ─── The block ───────────────────────────────────────────────────────────── */

.lock {
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--frame-pad);
  display: flex;
}

.lock-block {
  position: relative;
  flex: 1;
  min-height: 36rem;
  border-radius: var(--radius-card);
  overflow: hidden;
  /* The strips and the wordmark size in cqw/cqh, so their numbers mean
     "% of this block" whatever the screen measures. */
  container-type: size;
  color: var(--ink);
  /* The strip columns land on fractional pixels, and the seams between them
     can open by a hairline. Without a ground of its own the block shows the
     frame through them — invisible in light, a cream line in dark. */
  background: var(--img) 50% 50% / 100% 150% no-repeat;
}

.lock-strips {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 4% 12% 27% 9% 32% 16%;
}

.lock-strip {
  position: relative;
  overflow: hidden;
}

/* The footer's coverage rule, unchanged — with c the strip's own width:
     x ≤ 0 and x + dx ≤ 0               x + w ≥ c and x + dx + w ≥ c
     y ≤ 0 and y + dy ≤ 0               y + h ≥ 100 and y + dy + h ≥ 100
   What is new is the vertical: y + h/2 sits within a few points of 50 on
   every strip, so the image's cream band lies across the middle of the
   screen in all six, at rest and slid, with the orange above and the moss
   below. (Stretching h to twice the block widened the band further, but
   washed both colours out to almost nothing.) That is
   where the text is. The footer's strips scatter the band instead; with
   text spread across the full width that would put the ink on orange. */
.lock-strip::before {
  content: '';
  position: absolute;
  left:   calc(var(--x) * 1cqw);
  top:    calc(var(--y) * 1cqh);
  width:  calc(var(--w) * 1cqw + 1px);   /* +1px closes the seam to the next strip */
  height: calc(var(--h) * 1cqh);
  background: var(--img) 0 0 / 100% 100% no-repeat;
  transition: transform 0.9s var(--ease-out-expo);
}

@media (hover: hover) {
  .lock-strip:hover::before {
    transform: translate(calc(var(--dx) * 1cqw), calc(var(--dy) * 1cqh));
  }
}

.lock-grain {
  position: absolute;
  inset: -80px;
  background: url('/assets/img/footer/noise.png') 0 0 / 240px 240px repeat;
  opacity: var(--grain);
  pointer-events: none;
  animation: lock-grain 0.3s steps(1) infinite;
}
@keyframes lock-grain {
  0%     { transform: translate(0, 0); }
  33.3%  { transform: translate(-53px, 31px); }
  66.6%  { transform: translate(41px, -67px); }
}


/* ─── Content ─────────────────────────────────────────────────────────────── */

/* Lets the pointer through to the strips, like the footer; only the links
   and the form take it back. */
.lock-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem clamp(1.25rem, 4cqw, 3rem);
  text-align: center;
  pointer-events: none;
}
.lock-content a,
.lock-form { pointer-events: auto; }

/* The full mark is 13.705 × --wm-h wide (4.6355 + 0.9212 + 8.1483 — the
   SVG's own geometry, as in style.css §4). 62% of the block's width, held
   down by its height on a short, wide window. */
.lock-mark {
  --wm-h: min(calc(62cqw / 13.705), 7cqh);
  display: flex;
  align-items: flex-end;
  line-height: 0;
  margin-bottom: 1.1rem;
}
.wm-jacob,
.wm-beenfeldt {
  display: block;
  height: var(--wm-h);
  fill: currentColor;
}
.wm-jacob     { width: calc(var(--wm-h) * 4.6355); }
.wm-beenfeldt { width: calc(var(--wm-h) * 8.1483); margin-left: calc(var(--wm-h) * 0.9212); }

.lock-role {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: clamp(1.5rem, 4cqh, 2.5rem);
}

.lock-note {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.15rem, 1.8cqw, 1.45rem);
  line-height: 1.35;
  max-width: 32ch;
  margin-bottom: 1.1rem;
}

.lock-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.6rem;
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
}

.lock-links a,
.lock-address a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--field-line);
  transition: text-decoration-color 0.2s var(--ease-fast);
}
@media (hover: hover) {
  .lock-links a:hover,
  .lock-address a:hover { text-decoration-color: currentColor; }
}
.lock-content a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

.lock-address {
  font-style: normal;
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-bottom: clamp(1.75rem, 5cqh, 3rem);
}


/* ─── Passcode ────────────────────────────────────────────────────────────── */

.lock-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.3rem 0.3rem 1.1rem;
  border: 1px solid var(--field-line);
  border-radius: 999px;
  background: var(--field-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color 0.2s var(--ease-fast);
}
.lock-form:focus-within { border-color: var(--ink); }

.lock-input {
  width: 11rem;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;              /* 16px — iOS zooms on anything smaller */
  letter-spacing: 0.02em;
  outline: none;
}
.lock-input::placeholder { color: var(--ink-soft); opacity: 1; }

.lock-submit {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--submit-ink);
  cursor: pointer;
  transition: transform 100ms var(--ease-fast), opacity 0.2s var(--ease-fast);
}
.lock-submit svg { width: 1.05rem; height: 1.05rem; }
.lock-submit:active { transform: scale(0.94); }
.lock-submit:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lock-form.is-busy .lock-submit { opacity: 0.5; }

.lock-error {
  min-height: 1.4em;             /* holds its line, so the form never jumps */
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--ink-error);
}

.lock-form.is-wrong { animation: lock-shake 0.4s var(--ease-fast); }
@keyframes lock-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(7px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(3px); }
}

/* Sits on the green foot of the image in light and the near-black in dark,
   so it takes a light ink in both. */
.lock-copy {
  position: absolute;
  z-index: 1;
  left: 0; right: 0;
  bottom: 1.25rem;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--copy-ink);
  pointer-events: none;
}


/* ─── Phone ───────────────────────────────────────────────────────────────── */

/* No hover, so the strips would only stand still: one image across the block
   does the same job, stretched so its cream band covers the stacked text. */
@media (max-width: 768px) {
  :root { --frame-pad: 0px; --radius-card: 0px; }
  .lock-strips { display: none; }
  .lock-block {
    min-height: 40rem;
    background: var(--img) 50% 50% / 100% 165% no-repeat;
  }
  .lock-mark { --wm-h: calc(82cqw / 13.705); }
  .lock-links { flex-direction: column; gap: 0.55rem; }
  .lock-copy { bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); }
}


/* ─── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .lock-strip::before { transition: none; transform: none !important; }
  .lock-grain { animation: none; }
  .lock-form.is-wrong { animation: none; }
}