/* ============================================================
   LILY HAIR SALON — lamplight on plum, hour by hour.

   Type: the reading face is a SERIF (Brygada 1918) and it carries
   the body, the headings and the held lines. The condensed
   grotesque (Saira Semi Condensed) is furniture only — chips,
   eyebrows, running minutes, form labels. Editorial, not
   display-serif-over-sans.

   Pictures: every one is an inset with air round it, a plate in a
   book. No frames, no caption bars; where a picture carries words
   they are set INTO its unlit corner.

   Motion: one kind only — a slow scale breath, on the opening
   picture and on the closing mark. Nothing else moves.
   ============================================================ */

:root {
  color-scheme: dark;

  --lhs-ground: #171013;
  --lhs-ground-lift: #1E1518;
  --lhs-pane: #241A1E;
  --lhs-pane-high: #2A1D21;

  --lhs-ink: #F3E7E2;
  --lhs-ink-soft: #D8C4BD;
  --lhs-muted: #A79089;

  --lhs-lamp: #E0A06B;
  --lhs-lamp-deep: #C07E4C;
  --lhs-berry: #C97E8C;
  --lhs-edge: #38282C;

  --lhs-serif: "Brygada 1918", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --lhs-grot: "Saira Semi Condensed", "Roboto Condensed", "Segoe UI", system-ui, sans-serif;

  --lhs-measure: 70rem;
  --lhs-gutter: clamp(1.1rem, 4.2vw, 3.4rem);
  --lhs-air: clamp(3.4rem, 8vw, 7rem);
  --lhs-rail: 9.5rem;

  --lhs-slow: cubic-bezier(0.37, 0.12, 0.26, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--lhs-ground);
  /* Lamplight, not geometry: three untiled washes, nothing repeats. */
  background-image:
    radial-gradient(62rem 40rem at 78% -6%, rgba(224, 160, 107, 0.17), rgba(224, 160, 107, 0) 68%),
    radial-gradient(48rem 36rem at 8% 24%, rgba(168, 90, 107, 0.12), rgba(168, 90, 107, 0) 66%),
    radial-gradient(70rem 50rem at 46% 104%, rgba(224, 160, 107, 0.08), rgba(224, 160, 107, 0) 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--lhs-ink-soft);
  font-family: var(--lhs-serif);
  font-size: 1.0625rem;
  line-height: 1.68;
  font-weight: 400;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset, legend, blockquote {
  margin: 0;
  padding: 0;
}
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg { display: block; max-width: 100%; }
a { color: var(--lhs-lamp); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--lhs-ink); }

:focus-visible {
  outline: 3px solid var(--lhs-lamp);
  outline-offset: 3px;
  border-radius: 2px;
}

.lhs-page {
  width: 100%;
  max-width: var(--lhs-measure);
  margin-inline: auto;
  padding-inline: var(--lhs-gutter);
}

.lhs-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--lhs-lamp);
  color: #1B1012;
  font-family: var(--lhs-grot);
  font-weight: 600;
  padding: 0.8rem 1.2rem;
  z-index: 30;
}
.lhs-skip:focus { left: 0.6rem; top: 0.6rem; }

/* ---------- masthead: the name first, the mark beneath it ---------- */

.lhs-mast { padding: clamp(1.4rem, 4vw, 2.6rem) 0 0; }

.lhs-mast__place {
  font-family: var(--lhs-grot);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--lhs-muted);
  margin-bottom: clamp(1.3rem, 3vw, 2rem);
}

/* The lockup is a stack and the mark sits UNDER the name, the inverse
   of the usual mark-left arrangement. Shown whole, never bled off an
   edge: a cut photograph is a crop, a cut mark is a broken image. */
.lhs-lock {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  padding-bottom: clamp(1.5rem, 4vw, 2.4rem);
}
.lhs-lock__name { width: min(27rem, 100%); }
.lhs-lock__name text {
  font-family: var(--lhs-serif);
  font-weight: 700;
  fill: var(--lhs-ink);
}
.lhs-lock__rule { stroke: var(--lhs-lamp); stroke-width: 1.4; }
.lhs-lock__mark { width: 3.7rem; height: auto; }

.lhs-nav { padding-bottom: clamp(1.6rem, 4vw, 2.5rem); }
.lhs-nav__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
/* A chip paints its ground at rest and clears 44px without hover. */
.lhs-nav__chip {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0.5rem 1.05rem;
  background: var(--lhs-pane);
  color: var(--lhs-ink-soft);
  font-family: var(--lhs-grot);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-decoration: none;
  border-radius: 1.6rem;
  box-shadow: inset 0 0 0 1px rgba(243, 231, 226, 0.08);
  transition: background-color 0.24s var(--lhs-slow), color 0.24s var(--lhs-slow);
}
.lhs-nav__chip:hover {
  background: var(--lhs-pane-high);
  color: var(--lhs-ink);
}
.lhs-nav__chip[aria-current="page"] {
  background: var(--lhs-lamp);
  color: #1B1012;
  box-shadow: none;
}

/* ---------- the opening picture, with the trade named on it ---------- */

.lhs-open {
  position: relative;
  margin-bottom: var(--lhs-air);
}
/* clip, never hidden: `hidden` would make this a scroll container. */
.lhs-open__frame {
  position: relative;
  overflow: clip;
  border-radius: 0.5rem;
  background: var(--lhs-ground-lift);
}
.lhs-open__frame img {
  width: 100%;
  height: clamp(21rem, 52vw, 34rem);
  object-fit: cover;
  object-position: 70% 50%;
  transform-origin: 74% 46%;
}
/* A scrim under the words, at full strength well before the picture
   reappears, so no glyph sits on open photograph. */
.lhs-open__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(16, 9, 11, 0.96) 0%,
    rgba(16, 9, 11, 0.94) 48%,
    rgba(16, 9, 11, 0.66) 66%,
    rgba(16, 9, 11, 0.14) 84%,
    rgba(16, 9, 11, 0) 100%);
  pointer-events: none;
}
/* The headline is a SIBLING of the frame, not a child: nothing a
   reader can see may sit inside something that clips. */
.lhs-open__type {
  position: absolute;
  left: clamp(1.15rem, 3.4vw, 2.7rem);
  top: 50%;
  transform: translateY(-50%);
  width: min(27rem, 64%);
  z-index: 2;
}
.lhs-open__h {
  font-size: clamp(2.3rem, 5.4vw, 3.9rem);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: var(--lhs-ink);
  text-shadow: 0 2px 26px rgba(14, 8, 10, 0.92), 0 1px 3px rgba(14, 8, 10, 0.95);
}
.lhs-open__h em {
  display: block;
  font-style: italic;
  font-weight: 400;
  color: var(--lhs-lamp);
}
.lhs-open__stand {
  margin-top: 1rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--lhs-ink);
  text-shadow: 0 2px 20px rgba(14, 8, 10, 0.95), 0 1px 2px rgba(14, 8, 10, 0.95);
}

/* On a phone the banner is cropped to about a square and the quiet wall
   leaves the frame, so the words come off the picture and sit under it
   rather than crossing the chair. Setting type on art is only worth
   doing where the pixels underneath are still quiet. */
@media (max-width: 45.99rem) {
  .lhs-open__type {
    position: static;
    transform: none;
    width: auto;
    margin-top: 1.4rem;
  }
  .lhs-open__h, .lhs-open__stand { text-shadow: none; }
  .lhs-open__frame::after {
    background: linear-gradient(170deg,
      rgba(16, 9, 11, 0.42) 0%, rgba(16, 9, 11, 0.06) 46%, rgba(16, 9, 11, 0.5) 100%);
  }
}

/* ---------- the hour: beats on a rail of minutes ---------- */

.lhs-beats { display: grid; gap: var(--lhs-air); }

.lhs-beat { display: grid; gap: 1.1rem; }
@media (min-width: 60rem) {
  .lhs-beat {
    grid-template-columns: var(--lhs-rail) minmax(0, 1fr);
    gap: clamp(1.6rem, 4vw, 3.2rem);
  }
}

.lhs-beat__min {
  font-family: var(--lhs-grot);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--lhs-lamp);
  font-variant-numeric: tabular-nums;
}
.lhs-beat__min span {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lhs-muted);
  margin-top: 0.3rem;
}
.lhs-beat__aside {
  margin-top: 0.9rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--lhs-muted);
  font-style: italic;
  max-width: 22rem;
}

.lhs-beat h2 {
  font-size: clamp(1.75rem, 3.3vw, 2.35rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.014em;
  color: var(--lhs-ink);
  margin-bottom: 0.9rem;
}
.lhs-beat h2 b {
  display: block;
  font-family: var(--lhs-grot);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lhs-berry);
  margin-bottom: 0.5rem;
}
.lhs-beat p + p { margin-top: 0.85rem; }
/* A reading measure, not the width of the grid cell: the serif is set at 17px and
   a line of it past ~75 characters is work to follow. */
.lhs-beat p, .lhs-beat h2 { max-width: 40rem; }
.lhs-asked li span { max-width: 38rem; }

.lhs-asked { display: grid; gap: 0.75rem; margin: 1.3rem 0 0; }
.lhs-asked li {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  align-items: start;
}
.lhs-asked li::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.62rem;
  border-radius: 50%;
  background: var(--lhs-lamp-deep);
}

/* A held line: bigger, italic, no box and no rule. */
.lhs-held {
  margin: 1.5rem 0 0;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-style: italic;
  line-height: 1.38;
  color: var(--lhs-ink);
}

/* ---------- plates: air round the picture, words set into it ---------- */

.lhs-art { position: relative; margin: 1.8rem 0 0; }
.lhs-art img { width: 100%; height: auto; border-radius: 0.4rem; }
.lhs-art--narrow { width: min(28rem, 100%); }
.lhs-art--wide { margin-top: 2.2rem; }
/* The still life was rendered 4:3 with a tall unlit wall above the subject. Keeping all of
   it leaves a third of the plate as dead black, so the plate is cut to 16:9 off the lower
   part of the frame — enough quiet wall for the words, none of the emptiness. */
.lhs-art--wide img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 68%;
}

/* The label lives in the picture's unlit corner rather than in a bar
   beneath it; figcaption, absolutely placed, so the plate itself stays
   a plain inset in the flow. */
.lhs-art figcaption {
  position: absolute;
  font-family: var(--lhs-grot);
  letter-spacing: 0.055em;
  color: var(--lhs-ink);
  z-index: 2;
}
.lhs-art--narrow figcaption {
  left: 1.1rem;
  top: 1rem;
  width: 11.5rem;
  font-size: 0.86rem;
  line-height: 1.42;
  text-shadow: 0 1px 14px rgba(12, 7, 8, 0.95), 0 1px 2px rgba(12, 7, 8, 0.95);
}
.lhs-art--wide figcaption {
  left: clamp(1rem, 3vw, 2rem);
  top: clamp(1rem, 3vw, 1.9rem);
  width: min(19rem, 58%);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  line-height: 1.44;
  text-shadow: 0 1px 16px rgba(12, 7, 8, 0.95), 0 1px 2px rgba(12, 7, 8, 0.95);
}
.lhs-art figcaption b {
  display: block;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--lhs-lamp);
  margin-bottom: 0.35rem;
}
/* A ramp over the corner the words occupy, at full strength before the
   text box ends. */
.lhs-art--narrow::before,
.lhs-art--wide::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.4rem;
  pointer-events: none;
  z-index: 1;
}
.lhs-art--narrow::before {
  background: linear-gradient(168deg,
    rgba(13, 7, 9, 0.94) 0%, rgba(13, 7, 9, 0.91) 36%,
    rgba(13, 7, 9, 0.46) 54%, rgba(13, 7, 9, 0) 74%);
}
.lhs-art--wide::before {
  background: linear-gradient(112deg,
    rgba(13, 7, 9, 0.95) 0%, rgba(13, 7, 9, 0.91) 42%,
    rgba(13, 7, 9, 0.5) 62%, rgba(13, 7, 9, 0) 84%);
}
/* At 390 the wide plate is barely wider than its own caption, so the ramp has to reach
   full strength sooner: measured, the worst pixel behind that line sat at 4.50:1 with the
   desktop ramp — on the line rather than clear of it. */
@media (max-width: 45.99rem) {
  .lhs-art--wide::before {
    background: linear-gradient(150deg,
      rgba(13, 7, 9, 0.96) 0%, rgba(13, 7, 9, 0.94) 52%,
      rgba(13, 7, 9, 0.58) 68%, rgba(13, 7, 9, 0) 88%);
  }
  .lhs-art--wide figcaption { width: min(19rem, 72%); }
}

.lhs-art__note {
  margin: 0.8rem 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--lhs-muted);
  max-width: 30rem;
}

/* ---------- the minutes tool ---------- */

.lhs-tool {
  margin-top: var(--lhs-air);
  background: var(--lhs-ground-lift);
  border-radius: 0.7rem;
  padding: clamp(1.4rem, 3.6vw, 2.6rem);
}
.lhs-tool__head {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.14;
  color: var(--lhs-ink);
}
.lhs-tool__lead { margin-top: 0.7rem; max-width: 44rem; }
.lhs-tool__grid { display: grid; gap: 1.6rem; margin-top: 1.7rem; }
@media (min-width: 54rem) {
  .lhs-tool__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 2.4rem; }
}

.lhs-pick { display: grid; gap: 0.5rem; }
.lhs-pick legend {
  font-family: var(--lhs-grot);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lhs-muted);
  margin-bottom: 0.7rem;
}
.lhs-opt {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 48px;
  padding: 0.45rem 0.95rem;
  background: var(--lhs-pane);
  border-radius: 0.45rem;
  cursor: pointer;
  transition: background-color 0.2s var(--lhs-slow);
}
.lhs-opt:hover { background: var(--lhs-pane-high); }
.lhs-opt input {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  flex: 0 0 auto;
  background: var(--lhs-ground);
  box-shadow: inset 0 0 0 1.5px var(--lhs-lamp-deep);
  border-radius: 0.2rem;
  cursor: pointer;
}
/* A tick, not just a filled square: "on" should be readable without comparing it to the
   row above it. Drawn in the ground colour so it reads as cut out of the copper. */
.lhs-opt input:checked {
  background: var(--lhs-lamp) no-repeat center / 0.78rem 0.78rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.6l3.4 3.4L13.5 4.4' fill='none' stroke='%23171013' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 1.5px var(--lhs-lamp);
}
.lhs-opt__txt { font-size: 1rem; color: var(--lhs-ink-soft); }
.lhs-opt input:checked ~ .lhs-opt__txt { color: var(--lhs-ink); }
.lhs-opt__min {
  margin-left: auto;
  font-family: var(--lhs-grot);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--lhs-muted);
  font-variant-numeric: tabular-nums;
}

.lhs-sum {
  background: var(--lhs-pane);
  border-radius: 0.5rem;
  padding: clamp(1.1rem, 2.6vw, 1.6rem);
  align-self: start;
}
.lhs-sum__lab {
  font-family: var(--lhs-grot);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lhs-muted);
}
.lhs-sum__span {
  font-family: var(--lhs-grot);
  font-size: clamp(2.2rem, 5vw, 3.1rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--lhs-lamp);
  font-variant-numeric: tabular-nums;
  margin-top: 0.4rem;
}
.lhs-sum__unit {
  font-family: var(--lhs-grot);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lhs-muted);
}
.lhs-sum__say { margin-top: 0.9rem; font-size: 0.98rem; line-height: 1.55; }
.lhs-sum__how { margin-top: 0.8rem; font-size: 0.88rem; line-height: 1.5; color: var(--lhs-muted); }

/* ---------- asking for an hour ---------- */

.lhs-ask { margin-top: var(--lhs-air); }
.lhs-ask__wrap {
  background: var(--lhs-pane);
  border-radius: 0.7rem;
  padding: clamp(1.4rem, 3.6vw, 2.6rem);
}
.lhs-form { display: grid; gap: 1.05rem; margin-top: 1.5rem; }
@media (min-width: 46rem) {
  .lhs-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.4rem; }
  .lhs-f--full { grid-column: 1 / -1; }
}
.lhs-f { display: grid; gap: 0.4rem; }
.lhs-f label {
  font-family: var(--lhs-grot);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lhs-ink-soft);
}
.lhs-f label span { color: var(--lhs-berry); }
.lhs-f input,
.lhs-f select,
.lhs-f textarea {
  font-family: var(--lhs-serif);
  font-size: 1.0625rem;
  color: var(--lhs-ink);
  background: var(--lhs-ground);
  border: 1px solid var(--lhs-edge);
  border-radius: 0.4rem;
  padding: 0.75rem 0.85rem;
  min-height: 48px;
  width: 100%;
}
.lhs-f select { font-family: var(--lhs-grot); letter-spacing: 0.03em; }
/* Chrome's own calendar button inside <input type="date"> is a shadow part and takes no
   ring from the :focus-visible rule above — tabbing to it was the one stop on the page
   that painted nothing. It is also near-black on near-black by default. */
.lhs-f input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(82%) sepia(24%) saturate(640%) hue-rotate(336deg) brightness(95%);
  cursor: pointer;
}
.lhs-f input[type="date"]::-webkit-calendar-picker-indicator:focus-visible {
  outline: 3px solid var(--lhs-lamp);
  outline-offset: 2px;
}
.lhs-f textarea { min-height: 7.5rem; resize: vertical; line-height: 1.55; }
.lhs-f input:focus,
.lhs-f select:focus,
.lhs-f textarea:focus { border-color: var(--lhs-lamp); }
.lhs-f__hint { font-size: 0.86rem; color: var(--lhs-muted); line-height: 1.45; }
.lhs-f__err { font-family: var(--lhs-grot); font-size: 0.9rem; font-weight: 600; color: #F2A9A9; }
/* The honeypot. `opacity: 0` as well as off-screen, on purpose: A12 asks whether a glyph a
   visitor can SEE is being cut in half, and it reads an off-screen-but-opaque label as
   exactly that. Zero opacity is the honest statement that nothing here is painted — the
   field stays in the DOM for the script that fills it, and aria-hidden plus tabindex="-1"
   keep it away from anyone using the page properly. */
.lhs-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* The button sizes to its own words. Inside a grid cell a flex child stretches to the
   column, which turned a pill into a 900px bar. */
.lhs-send__row { display: block; }
.lhs-send {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.7rem 1.7rem;
  background: var(--lhs-lamp);
  color: #1B1012;
  border: 0;
  border-radius: 1.8rem;
  font-family: var(--lhs-grot);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.2s var(--lhs-slow);
}
.lhs-send:hover { background: var(--lhs-ink); }
.lhs-send[disabled] { opacity: 0.65; cursor: progress; }
.lhs-ask__after {
  margin-top: 1.1rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--lhs-ink);
}
.lhs-ask__after b {
  color: var(--lhs-lamp);
  font-family: var(--lhs-grot);
  letter-spacing: 0.08em;
}
.lhs-ask__foot { margin-top: 1rem; font-size: 0.88rem; color: var(--lhs-muted); line-height: 1.5; }

/* ---------- the company, and the mark at a size you can see ---------- */

.lhs-reg { margin-top: var(--lhs-air); }
.lhs-reg__grid { display: grid; gap: clamp(1.6rem, 4vw, 3rem); }
@media (min-width: 58rem) {
  .lhs-reg__grid { grid-template-columns: minmax(0, 1fr) 13rem; align-items: start; }
}
.lhs-facts { display: grid; margin-top: 1.3rem; }
@media (min-width: 34rem) {
  .lhs-facts { grid-template-columns: 11.5rem minmax(0, 1fr); }
}
.lhs-facts dt {
  font-family: var(--lhs-grot);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lhs-muted);
  padding: 0.55rem 0 0;
}
.lhs-facts dd { padding: 0 0 0.75rem; color: var(--lhs-ink); }
.lhs-facts code {
  font-family: var(--lhs-grot);
  font-size: 1.02rem;
  letter-spacing: 0.1em;
  color: var(--lhs-lamp);
}
.lhs-seal { display: grid; justify-items: center; gap: 0.7rem; }
.lhs-seal img { width: clamp(7rem, 20vw, 10rem); height: auto; }
.lhs-seal p {
  font-family: var(--lhs-grot);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lhs-muted);
  text-align: center;
}

/* ---------- foot ---------- */

.lhs-foot {
  margin-top: var(--lhs-air);
  padding: clamp(2rem, 5vw, 3.2rem) 0 clamp(2.4rem, 5vw, 3.6rem);
  background: #120C0E;
}
.lhs-foot__grid { display: grid; gap: 1.3rem; }
@media (min-width: 48rem) {
  .lhs-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}
.lhs-foot__name {
  font-family: var(--lhs-grot);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lhs-ink);
}
.lhs-foot p + p { margin-top: 0.45rem; }
.lhs-foot__where, .lhs-foot__reg {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--lhs-muted);
}

/* ---------- sub-pages ---------- */

.lhs-inner__h {
  font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--lhs-ink);
  margin-bottom: 0.9rem;
}
.lhs-inner__stand {
  max-width: 44rem;
  font-size: 1.1rem;
  line-height: 1.62;
  padding-bottom: clamp(1.4rem, 4vw, 2.4rem);
}
.lhs-noscript {
  margin-top: 1.1rem;
  background: var(--lhs-pane-high);
  border-radius: 0.45rem;
  padding: 0.9rem 1.1rem;
  font-size: 0.95rem;
  color: var(--lhs-ink);
}
.lhs-sub { display: grid; gap: var(--lhs-air); }
.lhs-sub h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--lhs-ink);
  margin-bottom: 0.85rem;
}
.lhs-sub h2 b {
  display: block;
  font-family: var(--lhs-grot);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lhs-berry);
  margin-bottom: 0.45rem;
}
.lhs-sub h3 {
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--lhs-ink);
  margin: 1.4rem 0 0.5rem;
}
.lhs-sub p + p { margin-top: 0.85rem; }
.lhs-sub__body { max-width: 46rem; }
.lhs-runs { display: grid; gap: 0.1rem; margin-top: 1.2rem; }
.lhs-runs li {
  display: grid;
  gap: 0.3rem 1rem;
  padding: 0.8rem 0;
  box-shadow: inset 0 -1px 0 var(--lhs-edge);
}
@media (min-width: 40rem) {
  .lhs-runs li { grid-template-columns: 8rem minmax(0, 1fr); }
}
.lhs-runs b {
  font-family: var(--lhs-grot);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--lhs-lamp);
  font-variant-numeric: tabular-nums;
}

/* ---------- the one kind of motion here: a slow breath ---------- */

@media (prefers-reduced-motion: no-preference) {
  .lhs-open__frame img { animation: lhs-breathe 19s var(--lhs-slow) infinite alternate; }
  .lhs-seal img { animation: lhs-breathe-soft 13s var(--lhs-slow) infinite alternate; }
}

@keyframes lhs-breathe {
  from { transform: scale(1.004); }
  to   { transform: scale(1.055); }
}
@keyframes lhs-breathe-soft {
  from { transform: scale(0.965); }
  to   { transform: scale(1.035); }
}