@charset "UTF-8";
/* ============================================================================
   OVID · House stylesheet (direction 02 · House, 2026-07 redesign)
   ----------------------------------------------------------------------------
   Built from the designer's handoff (ovid.css + ovid.components.css), migrated
   from the original Maison direction's --ov-dusk/--ov-ivory/--ov-ember tokens
   to House's --ov-dusk/--ov-ivory/--ov-ember (see docs/ovid_redesign.md). Adapted
   for the multi-product webapp: app/root.tsx imports all three products'
   index.scss into one bundle, so every base/reset rule is scoped under
   [data-product="ovid"] to avoid bleeding onto narcis/quies. The :root --ov-*
   tokens and the .ov-* component classes are collision-free (only Ovid uses
   them). Archivo and Cormorant Garamond (House's display face, replacing
   Bodoni Moda) are both self-hosted below — mirrors the narcis Absans/Fraunces
   pattern (styles/partials/fonts.scss). Archivo previously loaded via the root
   links() function as a Google Fonts CDN <link rel="stylesheet">: that request
   was render-blocking (CSSOM construction — hence first paint — waits on an
   external stylesheet) and was the dominant contributor to narcis's measured
   2.5s LCP element-render delay; ovid shared the same pattern. Bundled
   @font-face rules remove the network round-trip from the critical path.
   ============================================================================ */
/* ============================================================================
   OVID · Landing — surface layout
   The identity-setting home. Reconstructed from the designer's Identity &
   Landing HTML (the identity appendix — specimens/alternates — is a design
   artifact and is intentionally not part of the product route).

   Rules wrapped in [data-product="ovid"] — the .ovh-* surface classes are
   un-namespaced and share the webapp bundle with narcis/quies.
   ============================================================================ */
[data-product=ovid] {
  /* ── Hero ──────────────────────────────────────────────────────────────────── */
  /* ── Manifesto ─────────────────────────────────────────────────────────────── */
  /* ── Two rooms (diptych) ───────────────────────────────────────────────────── */
  /* ── Contact sheet ─────────────────────────────────────────────────────────── */
  /* ── Responsive ────────────────────────────────────────────────────────────── */
}
[data-product=ovid] .ovh-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
[data-product=ovid] .ovh-hero__plate {
  position: absolute;
  inset: 0;
  z-index: 0;
}
[data-product=ovid] .ovh-hero__plate .ov-slot {
  width: 100%;
  height: 100%;
}
[data-product=ovid] .ovh-hero__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(23, 18, 16, 0.6), rgba(23, 18, 16, 0.35) 40%, rgba(23, 18, 16, 0.85));
}
[data-product=ovid] .ovh-hero > * {
  position: relative;
  z-index: 1;
}
[data-product=ovid] .ovh-hero__top {
  padding: calc(var(--ov-header-h) + var(--ov-s7)) var(--ov-gutter) 0;
}
[data-product=ovid] .ovh-issue {
  display: flex;
  justify-content: space-between;
  gap: var(--ov-s6);
}
[data-product=ovid] .ovh-issue .col {
  display: flex;
  flex-direction: column;
  gap: var(--ov-s2);
}
[data-product=ovid] .ovh-issue .col:last-child {
  text-align: right;
}
[data-product=ovid] .ovh-hero__mid {
  padding: 0 var(--ov-gutter);
  text-align: center;
}
[data-product=ovid] .ovh-masthead {
  margin: 0;
  font-family: var(--ov-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ov-track-cap);
  line-height: 0.9;
  font-size: var(--ov-masthead);
  color: var(--ov-ivory);
  padding-left: var(--ov-track-cap);
}
[data-product=ovid] .ovh-hero__sub {
  margin: var(--ov-s4) 0 0;
  font-family: var(--ov-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--ov-lede);
  color: var(--ov-ash);
}
[data-product=ovid] .ovh-hero__bot {
  padding: 0 var(--ov-gutter) var(--ov-s8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ov-s5);
  flex-wrap: wrap;
}
[data-product=ovid] .ovh-scroll-hint {
  font-family: var(--ov-grotesque);
  font-size: var(--ov-micro);
  letter-spacing: var(--ov-track-nav);
  text-transform: uppercase;
  color: var(--ov-dim);
}
[data-product=ovid] .ovh-manifesto {
  padding: var(--ov-s11) var(--ov-gutter);
  max-width: 1100px;
  margin: 0 auto;
}
[data-product=ovid] .ovh-manifesto__lede {
  margin: var(--ov-s5) 0 var(--ov-s8);
  font-family: var(--ov-display);
  font-weight: 400;
  font-size: var(--ov-display-2);
  line-height: 1.2;
  color: var(--ov-ivory);
}
[data-product=ovid] .ovh-manifesto__lede .red {
  color: var(--ov-ember);
  font-style: italic;
}
[data-product=ovid] .ovh-manifesto__foot {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ov-s7);
}
[data-product=ovid] .ovh-manifesto__foot p {
  margin: 0;
  color: var(--ov-ash);
  font-size: var(--ov-body-lg);
  line-height: 1.6;
}
[data-product=ovid] .ovh-manifesto__foot em {
  font-style: italic;
  color: var(--ov-ivory);
}
[data-product=ovid] .ovh-rooms {
  padding: var(--ov-s9) var(--ov-gutter) var(--ov-s11);
  max-width: var(--ov-maxw);
  margin: 0 auto;
}
[data-product=ovid] .ovh-rooms__head {
  display: flex;
  justify-content: space-between;
  gap: var(--ov-s5);
  margin-bottom: var(--ov-s6);
}
[data-product=ovid] .ovh-diptych {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ov-s6);
}
[data-product=ovid] .ovh-card {
  display: flex;
  flex-direction: column;
  gap: var(--ov-s4);
  text-decoration: none;
}
[data-product=ovid] .ovh-card__frame {
  position: relative;
  aspect-ratio: 4/5;
  border: 1px solid var(--ov-line);
  overflow: hidden;
  transition: border-color var(--ov-dur-3) var(--ov-ease);
}
[data-product=ovid] .ovh-card__frame .ov-slot {
  width: 100%;
  height: 100%;
}
[data-product=ovid] .ovh-card:hover .ovh-card__frame {
  border-color: var(--ov-line-strong);
}
[data-product=ovid] .ovh-card__tag {
  position: absolute;
  top: var(--ov-s4);
  left: var(--ov-s4);
  z-index: 2;
  font-family: var(--ov-grotesque);
  font-weight: 500;
  font-size: var(--ov-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ov-ash);
}
[data-product=ovid] .ovh-card__num {
  position: absolute;
  top: var(--ov-s4);
  right: var(--ov-s5);
  z-index: 2;
  font-family: var(--ov-display);
  font-style: italic;
  font-size: 24px;
  color: var(--ov-ember);
}
[data-product=ovid] .ovh-card__name {
  font-family: var(--ov-display);
  font-weight: 500;
  font-size: var(--ov-display-3);
  color: var(--ov-ivory);
}
[data-product=ovid] .ovh-card__name em {
  font-style: italic;
  font-weight: 400;
}
[data-product=ovid] .ovh-card__desc {
  margin: 0;
  color: var(--ov-ash);
  font-size: var(--ov-small);
  line-height: 1.6;
  max-width: 42ch;
}
[data-product=ovid] .ovh-card__go {
  font-family: var(--ov-grotesque);
  font-weight: 500;
  font-size: var(--ov-micro);
  letter-spacing: var(--ov-track-nav);
  text-transform: uppercase;
  color: var(--ov-ivory);
  display: inline-flex;
  gap: var(--ov-s2);
}
[data-product=ovid] .ovh-card:hover .ovh-card__go {
  color: var(--ov-ember);
}
[data-product=ovid] .ovh-sheet {
  padding: 0 var(--ov-gutter) var(--ov-s11);
  max-width: var(--ov-maxw);
  margin: 0 auto;
}
[data-product=ovid] .ovh-sheet__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ov-s5);
  margin-bottom: var(--ov-s5);
}
[data-product=ovid] .ovh-sheet__head h3 {
  margin: 0;
  font-family: var(--ov-display);
  font-weight: 500;
  font-size: var(--ov-display-3);
  color: var(--ov-ivory);
}
[data-product=ovid] .ovh-sheet__strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--ov-s4);
}
[data-product=ovid] .ovh-sheet__strip .ov-slot {
  aspect-ratio: 3/4;
  border: 1px solid var(--ov-line);
}
@media (max-width: 900px) {
  [data-product=ovid] .ovh-manifesto__foot, [data-product=ovid] .ovh-diptych {
    grid-template-columns: 1fr;
  }
  [data-product=ovid] .ovh-sheet__strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================================
   OVID · The Feed — surface layout
   Reconstructed from the designer's Feed HTML (no feed.css existed — the HTML
   was the whole handoff). Magazine-spread rhythm: full-bleed, duo, offset,
   trio, solo, sheet. All on the Maison tokens. Class names match the markup.

   All rules are wrapped in [data-product="ovid"] because the shared webapp
   bundle imports all three products' index.scss; these surface class names are
   un-namespaced (.feed, .spread, .lightbox…) and would otherwise be global.
   ============================================================================ */
[data-product=ovid] {
  /* ── Masthead band ───────────────────────────────────────────────────────── */
  /* ── Editorial scroll ────────────────────────────────────────────────────── */
  /* full-bleed opening / closing spread */
  /* duo — two equal portraits */
  /* offset — asymmetric pair, the second sits lower */
  /* trio — three of a sitting */
  /* solo — full-page centred plate */
  /* sheet — contact-sheet row of selects */
  /* ── Divider ─────────────────────────────────────────────────────────────── */
  /* ── Lightbox / plate view ───────────────────────────────────────────────── */
  /* ── Responsive ──────────────────────────────────────────────────────────── */
}
[data-product=ovid] .feed-page {
  padding-top: var(--ov-header-h);
}
[data-product=ovid] .feed-mast {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ov-s6);
  flex-wrap: wrap;
  padding: var(--ov-s9) var(--ov-gutter) var(--ov-s7);
  border-bottom: 1px solid var(--ov-line);
}
[data-product=ovid] .feed-mast__title {
  margin: 0;
  font-family: var(--ov-display);
  font-weight: 500;
  font-size: var(--ov-display-1);
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--ov-ivory);
}
[data-product=ovid] .feed-mast__right {
  display: flex;
  flex-direction: column;
  gap: var(--ov-s2);
  text-align: right;
}
[data-product=ovid] .feed {
  max-width: var(--ov-maxw);
  margin: 0 auto;
  padding: var(--ov-s8) var(--ov-gutter) var(--ov-s10);
  display: flex;
  flex-direction: column;
  gap: var(--ov-s9);
}
[data-product=ovid] .spread {
  display: grid;
  gap: var(--ov-s5);
}
[data-product=ovid] .spread--full {
  grid-template-columns: 1fr;
}
[data-product=ovid] .spread--full .ov-plate__frame {
  aspect-ratio: 21/9;
}
[data-product=ovid] .spread--duo {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ov-s6);
}
[data-product=ovid] .spread--offset {
  grid-template-columns: 1fr 1.4fr;
  gap: var(--ov-s7);
  align-items: start;
}
[data-product=ovid] .spread--offset > .ov-plate:first-child {
  margin-top: var(--ov-s9);
}
[data-product=ovid] .spread--offset .ov-plate:first-child .ov-plate__frame {
  aspect-ratio: 1/1;
}
[data-product=ovid] .spread--offset .ov-plate:last-child .ov-plate__frame {
  aspect-ratio: 16/10;
}
[data-product=ovid] .spread--trio {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ov-s5);
}
[data-product=ovid] .spread--trio .ov-plate__frame {
  aspect-ratio: 3/4;
}
[data-product=ovid] .spread--solo {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}
[data-product=ovid] .spread--solo .ov-plate__frame {
  aspect-ratio: 4/5;
}
[data-product=ovid] .spread--sheet {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ov-s4);
}
[data-product=ovid] .spread--sheet .ov-plate__frame {
  aspect-ratio: 3/4;
}
[data-product=ovid] .feed-divider {
  display: flex;
  align-items: center;
  gap: var(--ov-s5);
  font-family: var(--ov-grotesque);
  font-weight: 500;
  font-size: var(--ov-micro);
  letter-spacing: var(--ov-track-eyebrow);
  text-transform: uppercase;
  color: var(--ov-dim);
}
[data-product=ovid] .feed-divider .ln {
  flex: 1 1 auto;
  height: 1px;
  background: var(--ov-line);
}
[data-product=ovid] .feed-divider > span:first-child:not(.ln) {
  color: var(--ov-ember);
}
[data-product=ovid] .lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--ov-z-overlay);
  display: none;
  grid-template-columns: 1fr minmax(280px, 360px);
  background: rgba(8, 7, 6, 0.96);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
[data-product=ovid] .lightbox[data-open] {
  display: grid;
}
[data-product=ovid] .lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ov-s8);
  min-height: 0;
}
[data-product=ovid] .lightbox__stage .ov-slot {
  max-width: 100%;
  max-height: 86vh;
  width: auto;
  aspect-ratio: 4/5;
  box-shadow: var(--ov-shadow-plate);
}
[data-product=ovid] .lightbox__side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--ov-s4);
  padding: var(--ov-s8) var(--ov-s7);
  border-left: 1px solid var(--ov-line);
}
[data-product=ovid] .lightbox__no {
  font-family: var(--ov-grotesque);
  font-weight: 500;
  font-size: var(--ov-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ov-ember);
}
[data-product=ovid] .lightbox__title {
  margin: 0;
  font-family: var(--ov-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--ov-display-3);
  color: var(--ov-ivory);
}
[data-product=ovid] .lightbox__credit {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--ov-ash);
  font-size: var(--ov-small);
}
[data-product=ovid] .lightbox__credit .k {
  font-family: var(--ov-grotesque);
  font-size: var(--ov-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ov-dim);
}
[data-product=ovid] .lightbox__nav {
  display: flex;
  gap: var(--ov-s5);
  margin-top: var(--ov-s4);
}
[data-product=ovid] .lightbox__close {
  position: absolute;
  top: var(--ov-s5);
  right: var(--ov-s5);
  font-size: 28px;
  line-height: 1;
  color: var(--ov-ash);
}
[data-product=ovid] .lightbox__close:hover {
  color: var(--ov-ivory);
}
[data-product=ovid] .lightbox__count {
  position: absolute;
  bottom: var(--ov-s5);
  left: var(--ov-gutter);
  font-family: var(--ov-grotesque);
  font-size: var(--ov-micro);
  letter-spacing: 0.2em;
  color: var(--ov-dim);
}
@media (max-width: 900px) {
  [data-product=ovid] .spread--duo, [data-product=ovid] .spread--offset, [data-product=ovid] .spread--trio {
    grid-template-columns: 1fr;
  }
  [data-product=ovid] .spread--offset > .ov-plate:first-child {
    margin-top: 0;
  }
  [data-product=ovid] .spread--sheet {
    grid-template-columns: repeat(2, 1fr);
  }
  [data-product=ovid] .lightbox {
    grid-template-columns: 1fr;
  }
  [data-product=ovid] .lightbox__side {
    border-left: 0;
    border-top: 1px solid var(--ov-line);
  }
}

/* ============================================================================
   OVID · The Atelier — surface layout
   Reconstructed from the designer's Atelier HTML (no atelier.css existed). The
   face→muse flow in three acts: the Sitting, Developing, the Muse. Acts toggle
   via [data-active]; the rail tracks progress.

   Rules are wrapped in [data-product="ovid"] (un-namespaced surface classes
   like .act/.sitting/.muse must not leak into the shared bundle). @keyframes is
   kept at root — keyframe names are global and cannot be scoped.
   ============================================================================ */
@keyframes ov-scan {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(550px);
  }
}
[data-product=ovid] {
  /* Header is variant="static" (sticky, in-flow) — no --ov-header-h offset here; see
     PackLandingTemplate.module.scss for the full note on the fixed-vs-static contract. */
  /* ── Act rail (progress) ─────────────────────────────────────────────────── */
  /* ── Act stage ───────────────────────────────────────────────────────────── */
  /* ── Act I · The Sitting ─────────────────────────────────────────────────── */
  /* ── Act II · Developing ─────────────────────────────────────────────────── */
  /* veil lifts as the print "develops" */
  /* lacquer scan edge sweeps down while running */
  /* ── Act III · The Muse ──────────────────────────────────────────────────── */
  /* ── Responsive ──────────────────────────────────────────────────────────── */
}
[data-product=ovid] .atelier-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
[data-product=ovid] .act-rail {
  display: flex;
  gap: var(--ov-s7);
  justify-content: center;
  padding: var(--ov-s6) var(--ov-gutter);
  border-bottom: 1px solid var(--ov-line);
}
[data-product=ovid] .act-rail__item {
  display: flex;
  align-items: baseline;
  gap: var(--ov-s2);
  color: var(--ov-dim);
  transition: color var(--ov-dur-2) var(--ov-ease);
}
[data-product=ovid] .act-rail__item:hover {
  color: var(--ov-ash);
}
[data-product=ovid] .act-rail__item[aria-current=true] {
  color: var(--ov-ember);
}
[data-product=ovid] .act-rail__num {
  font-family: var(--ov-display);
  font-style: italic;
  font-size: 18px;
}
[data-product=ovid] .act-rail__label {
  font-family: var(--ov-grotesque);
  font-weight: 500;
  font-size: var(--ov-micro);
  letter-spacing: var(--ov-track-nav);
  text-transform: uppercase;
}
[data-product=ovid] .act-stage {
  flex: 1 1 auto;
}
[data-product=ovid] .act {
  display: none;
}
[data-product=ovid] .act[data-active] {
  display: block;
}
[data-product=ovid] .sitting {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 110px);
  align-items: center;
  max-width: var(--ov-maxw);
  margin: 0 auto;
  padding: var(--ov-s10) var(--ov-gutter);
}
[data-product=ovid] .sitting__copy {
  display: flex;
  flex-direction: column;
}
[data-product=ovid] .sitting__title {
  margin: var(--ov-s4) 0 var(--ov-s5);
  font-family: var(--ov-display);
  font-weight: 500;
  font-size: var(--ov-display-1);
  line-height: 1.02;
  color: var(--ov-ivory);
}
[data-product=ovid] .sitting__title em {
  font-style: italic;
  font-weight: 400;
}
[data-product=ovid] .sitting__lede {
  margin: 0 0 var(--ov-s6);
  color: var(--ov-ash);
  font-size: var(--ov-body-lg);
  line-height: 1.6;
  max-width: 46ch;
}
[data-product=ovid] .sitting__notes {
  list-style: none;
  margin: 0 0 var(--ov-s7);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ov-s4);
}
[data-product=ovid] .sitting__notes li {
  display: flex;
  gap: var(--ov-s4);
  color: var(--ov-ash);
  font-size: var(--ov-small);
  line-height: 1.5;
}
[data-product=ovid] .sitting__notes .n {
  font-family: var(--ov-grotesque);
  font-weight: 500;
  font-size: var(--ov-micro);
  letter-spacing: 0.2em;
  color: var(--ov-ember);
  flex: 0 0 auto;
  padding-top: 2px;
}
[data-product=ovid] .sitting__cta {
  display: flex;
  align-items: center;
  gap: var(--ov-s5);
  flex-wrap: wrap;
}
[data-product=ovid] .sitting__hint {
  font-family: var(--ov-grotesque);
  font-size: var(--ov-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ov-dim);
}
[data-product=ovid] .sitting__plate {
  display: flex;
  justify-content: center;
}
[data-product=ovid] .developing {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--ov-s10) var(--ov-gutter);
  text-align: center;
}
[data-product=ovid] .develop {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 4/5;
  margin: 0 auto var(--ov-s7);
  border: 1px solid var(--ov-line);
  background: var(--ov-panel);
  overflow: hidden;
}
[data-product=ovid] .develop__plate {
  position: absolute;
  inset: 0;
}
[data-product=ovid] .develop__plate .ov-slot {
  width: 100%;
  height: 100%;
}
[data-product=ovid] .develop__veil {
  position: absolute;
  inset: 0;
  background: var(--ov-dusk);
  opacity: 1;
  transition: opacity var(--ov-dur-4) var(--ov-ease);
  pointer-events: none;
}
[data-product=ovid] .develop.is-revealed .develop__veil {
  opacity: 0;
}
[data-product=ovid] .develop__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--ov-ember);
  opacity: 0;
  box-shadow: 0 0 24px 4px rgba(180, 113, 76, 0.5);
}
[data-product=ovid] .developing.is-running .develop__scan {
  animation: ov-scan var(--ov-dur-4) var(--ov-ease-inout) infinite;
  opacity: 1;
}
[data-product=ovid] .develop__ticks {
  position: absolute;
  inset: 14px;
  pointer-events: none;
}
[data-product=ovid] .develop__ticks i {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--ov-ash);
  opacity: 0.6;
}
[data-product=ovid] .develop__ticks i:nth-child(1) {
  top: 0;
  left: 0;
  border-top: 1px solid;
  border-left: 1px solid;
}
[data-product=ovid] .develop__ticks i:nth-child(2) {
  top: 0;
  right: 0;
  border-top: 1px solid;
  border-right: 1px solid;
}
[data-product=ovid] .develop__ticks i:nth-child(3) {
  bottom: 0;
  left: 0;
  border-bottom: 1px solid;
  border-left: 1px solid;
}
[data-product=ovid] .develop__ticks i:nth-child(4) {
  bottom: 0;
  right: 0;
  border-bottom: 1px solid;
  border-right: 1px solid;
}
[data-product=ovid] .developing__title {
  margin: 0 0 var(--ov-s2);
  font-family: var(--ov-display);
  font-weight: 500;
  font-size: var(--ov-display-3);
  color: var(--ov-ivory);
}
[data-product=ovid] .developing__status {
  margin: 0 0 var(--ov-s5);
  color: var(--ov-ash);
  font-size: var(--ov-small);
  transition: opacity var(--ov-dur-1) var(--ov-ease);
  min-height: 1.2em;
}
[data-product=ovid] .developing__bar {
  height: 1px;
  background: var(--ov-line);
  overflow: hidden;
}
[data-product=ovid] .developing__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ov-ember);
}
[data-product=ovid] .developing.is-running .developing__bar i {
  transition: width 3.4s linear;
  width: 100%;
}
[data-product=ovid] .developing.is-done .developing__bar i {
  width: 100%;
}
[data-product=ovid] .developing__continue {
  margin-top: var(--ov-s7);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ov-dur-3) var(--ov-ease);
}
[data-product=ovid] .developing.is-done .developing__continue {
  opacity: 1;
  pointer-events: auto;
}
[data-product=ovid] .muse {
  max-width: var(--ov-maxw);
  margin: 0 auto;
  padding: var(--ov-s9) var(--ov-gutter) var(--ov-s10);
}
[data-product=ovid] .muse__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ov-s6);
  flex-wrap: wrap;
  margin-bottom: var(--ov-s8);
}
[data-product=ovid] .muse__title {
  margin: var(--ov-s2) 0 0;
  font-family: var(--ov-display);
  font-weight: 500;
  font-size: var(--ov-display-1);
  color: var(--ov-ivory);
}
[data-product=ovid] .muse__title em {
  font-style: italic;
  font-weight: 400;
}
[data-product=ovid] .muse__actions {
  display: flex;
  align-items: center;
  gap: var(--ov-s5);
  flex-wrap: wrap;
}
[data-product=ovid] .muse__set {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--ov-s6);
  margin-bottom: var(--ov-s6);
}
[data-product=ovid] .muse__cover .ov-plate__frame {
  aspect-ratio: 4/5;
}
[data-product=ovid] .muse__looks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ov-s5);
}
[data-product=ovid] .muse__looks .ov-plate__frame {
  aspect-ratio: 3/4;
}
[data-product=ovid] .muse__strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ov-s4);
}
[data-product=ovid] .muse__strip .ov-plate__frame {
  aspect-ratio: 1/1;
}
@media (max-width: 900px) {
  [data-product=ovid] .sitting {
    grid-template-columns: 1fr;
    gap: var(--ov-s8);
  }
  [data-product=ovid] .muse__set {
    grid-template-columns: 1fr;
  }
  [data-product=ovid] .muse__strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Self-hosted display face — Cormorant Garamond (OFL, Google Fonts) ─────── */
/* Variable weight 400–600, latin subset, regular + italic. Woff2 only (no
   legacy woff fallback shipped — matches the narcis Absans self-host, which
   also ships woff2-only from its @font-face declaration). */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 600;
  src: url(/s/fonts/CormorantGaramond-Regular.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400 600;
  src: url(/s/fonts/CormorantGaramond-Italic.woff2) format("woff2");
  font-display: swap;
}
/* ── Self-hosted grotesque/UI face — Archivo (OFL, Google Fonts) ───────────── */
/* Weights 300/400/500/600, upright only — the exact set root.tsx requested
   from Google Fonts (css2?family=Archivo:wght@300;400;500;600). Two files per
   weight: latin (ASCII/basic-Latin, fetched first) and latin-ext (accented
   Latin — French copy is on this site) — font-display: swap + unicode-range
   means latin-ext only downloads lazily, on encountering a glyph it covers. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/s/fonts/Archivo-300-Regular.woff2) format("woff2");
  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: "Archivo";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/s/fonts/Archivo-300-Regular-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/s/fonts/Archivo-400-Regular.woff2) format("woff2");
  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: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/s/fonts/Archivo-400-Regular-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/s/fonts/Archivo-500-Regular.woff2) format("woff2");
  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: "Archivo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/s/fonts/Archivo-500-Regular-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/s/fonts/Archivo-600-Regular.woff2) format("woff2");
  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: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/s/fonts/Archivo-600-Regular-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ── Colour · House + tokens (global, namespaced) ──────────────────────────── */
/* House palette (2026-07 redesign): dusk/panel/raise ground + ivory/ash/dim text
   + ember as the one accent, ink and CTA fill both. --ov-panel is REUSED with a
   NEW value here — the old --ov-panel (card surface, #16130F) is now --ov-panel;
   the old --ov-raise (hover/gate box, #1D1812) is now what --ov-panel means. */
:root {
  --ov-dusk: #171210; /* page ground — warm near-black                */
  /* The header's own veil — `--ov-dusk`'s colour (23, 18, 16) at the header's shipped 0.92 alpha
     (`@core/wall/ui/Header.module.scss`'s `background`), held literal for the same reason Toile's
     own `--tl-stage-veil` is. */
  --ov-dusk-veil: rgba(23, 18, 16, 0.92);
  --ov-ink-2: #1F1814; /* second ground band / footer — raised above dusk (House: = panel) */
  --ov-panel: #1F1814; /* card / workbench surface                     */
  --ov-raise: #261F19; /* hover surface, gate box                      */
  --ov-ivory: #EAE2D2; /* primary warm ivory — headings, key text      */
  --ov-ash: #A99F8C; /* secondary prose                              */
  --ov-dim: #75695A; /* tertiary — captions, colophon, credits       */
  --ov-ember: #B4714C; /* THE accent — ink AND the one solid CTA fill  */
  --ov-ember-hover: #C4805B;
  --ov-ember-pressed: #8F5638; /* depth, pressed states                      */
  --ov-on-ember: #1B120C; /* text on ember fills                        */
  /* Notice kinds — plan 2026_09_01_notice_component, the standard four in the House's own range. */
  --ov-error: #E45E50; /* lacquer red — the one hue beside ember, 5.0:1 on panel */
  --ov-warning: var(--ov-ember);
  --ov-success: var(--ov-ivory); /* the House owns no green; good news reads brightest      */
  --ov-info: var(--ov-ash);
  /* Notice component tokens (`@core/ui/Notice`, plan 2026_09_01_notice_component.md § 4). */
  --notice-error: var(--ov-error);
  --notice-warning: var(--ov-warning);
  --notice-success: var(--ov-success);
  --notice-info: var(--ov-info);
  --ov-line: rgba(234, 226, 210, .13); /* hairline rule / border       */
  --ov-line-soft: rgba(234, 226, 210, .08);
  --ov-line-strong: rgba(234, 226, 210, .24); /* emphasised hairline — inputs, dropdown */
  --ov-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ov-grotesque: "Archivo", -apple-system, system-ui, sans-serif;
  --ov-font: var(--ov-grotesque);
  --ov-masthead: clamp(72px, 16vw, 200px);
  --ov-display-1: clamp(44px, 7vw, 104px);
  --ov-display-2: clamp(32px, 4.4vw, 64px);
  --ov-display-3: clamp(26px, 3vw, 42px);
  --ov-lede: clamp(19px, 2.1vw, 28px);
  --ov-body-lg: 18px;
  --ov-body: 16px;
  --ov-small: 14px;
  --ov-caption: 12px;
  --ov-micro: 10.5px;
  --ov-lh-tight: 1.02;
  --ov-lh-display: 1.14;
  --ov-lh-body: 1.65;
  --ov-track-eyebrow: .2em;
  --ov-track-nav: .22em;
  --ov-track-cap: .16em;
  --ov-s1: 4px;
  --ov-s2: 8px;
  --ov-s3: 12px;
  --ov-s4: 16px;
  --ov-s5: 24px;
  --ov-s6: 32px;
  --ov-s7: 48px;
  --ov-s8: 64px;
  --ov-s9: 96px;
  --ov-s10: 128px;
  --ov-s11: 176px;
  --ov-gutter: clamp(20px, 5vw, 72px);
  --ov-maxw: 1640px;
  --ov-header-h: 72px;
  /* Radius ladder (P6, 2026-09-18): one arithmetic step of 8 between tiers, one notch softer
     than Toile at every tier — the operator's "kind of threatening" verdict on the all-square
     estate, resolved as Ovid's own grammar rather than Toile's borrowed one. */
  --ov-radius-art: 4px; /* tiles, result frame, thumbnails, ghost cell, kbd keys */
  --ov-radius: 12px; /* chrome — buttons, fields, menu items, search field, notices */
  --ov-radius-container: 20px; /* the bar, the sign-in card, the sheet's top corners */
  --ov-radius-pill: 9999px; /* chips, escape pill, door pill, ratio chip */
  --ov-radius-soft: var(--ov-radius-art);
  --ov-shadow-plate: 0 24px 60px -20px rgba(0, 0, 0, .7);
  --ov-shadow-lift: 0 2px 40px rgba(0, 0, 0, .45);
  --ov-ease: cubic-bezier(.2, .7, .2, 1);
  --ov-ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ov-dur-1: .18s;
  --ov-dur-2: .35s;
  --ov-dur-3: .6s;
  --ov-dur-4: 1.2s;
  --ov-z-header: 200;
  --ov-z-overlay: 900;
  --ov-z-grain: 9999;
}

/* ── Bridge — Ovid's palette onto the shared --tl-* names ──────────────────── */
/* The shared wall and sign-in card draw with the `--tl-*` names, owned by Toile's `:root`
   (products/toile/styles/index.scss). `[data-product="ovid"]` and `:root` both match the one
   <html> element at equal specificity (0,1,0), so source order decided the tie — and in the one
   bundled stylesheet (app/root.tsx imports all three products' index.scss into one), Toile's
   block lands after Ovid's, so Toile's tungsten won the wall, the sign-in pill and the sign-in
   card on Ovid rather than this house's own palette. `html[data-product="ovid"]` adds the type
   selector, (0,1,1), which outranks `:root` regardless of import order. The `--notice-*` and
   `--tl-z-*` tokens are not colours and stay inherited from Toile's `:root` as before. */
/* Sticky-stick fix (2026-09-18) — same defect Toile's own incident note carries
   (products/toile/styles/index.scss:112-133): quies's index.scss, in the same bundle as every
   product (app/root.tsx), sets `body{overflow-x:hidden}`/`html{overflow-x:hidden}` UNSCOPED, which
   makes body register as the shared wall header's nearest scrolling ancestor for `position:
   sticky` ahead of html, so the header tracked the page 1:1 instead of staying put. Overriding back
   to `visible` here (this selector already carries the specificity to beat quies's bare `html`) —
   the body-side half of the fix is the nested `body` rule below. */
html[data-product=ovid] {
  --tl-stage: var(--ov-dusk);
  --tl-stage-veil: var(--ov-dusk-veil);
  --tl-surface: var(--ov-panel);
  --tl-border: var(--ov-line);
  --tl-border-strong: var(--ov-line-strong);
  --tl-text: var(--ov-ivory);
  --tl-muted: var(--ov-ash);
  --tl-dim: var(--ov-dim);
  --tl-accent: var(--ov-ember);
  --tl-accent-ink: var(--ov-on-ember);
  --tl-error: var(--ov-error);
  --tl-font: var(--ov-font);
  --tl-radius-art: var(--ov-radius-art);
  --tl-radius-chrome: var(--ov-radius);
  --tl-radius-container: var(--ov-radius-container);
  --tl-radius-pill: var(--ov-radius-pill);
  overflow-x: visible;
}

/* ── Base & reset — SCOPED to the product root so siblings are untouched ───── */
[data-product=ovid] {
  background: var(--ov-dusk);
  color: var(--ov-ivory);
  font-family: var(--ov-font);
  font-weight: 400;
  font-size: var(--ov-body);
  line-height: var(--ov-lh-body);
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* :where(&) — same specificity fix as the heading/paragraph reset below (Bug 1): a bare
     `[data-product="ovid"] button` (0,1,1) was outranking single-class module rules like
     .ctaButtonActive (0,1,0), so PackHeroStage's ad-stage CTA lost its ember `background` and
     `border` to this reset's `background: none; border: 0` — the button rendered as bare text
     (Bug 3, 2026-07-13). Zeroing the scope's specificity via :where() lets any ovid module
     class win, while unclassed buttons/links/media still get the reset (ties bare-element
     narcis leaks the same way, see the note below). */
  /* :where(&) — same specificity fix as the button reset above: a bare `[data-product="ovid"]
     :focus-visible` (0,2,0) was outranking a module's own `outline` decision (e.g. the wall
     field's `outline: none`, Column.module.scss), landing a generic ring where the module
     already gave focus its own expression. Zeroing the scope's specificity lets any module's
     own `:focus-visible`/`outline` rule win; unstyled elements still get this ring. */
  /* The shared bundle ships narcis + quies index.scss alongside ovid's (app/root.tsx).
     Narcis defines bare `body { font: …Inter }` and applies a v-rhythm() mixin to h1–h4 and p
     that sets font-size, line-height, padding-top, and margin-bottom on bare element selectors
     (h1 { @include v-rhythm(4) } etc, styles/partials/typography.scss:50-68) — specificity
     (0,0,1), a single element selector. That leak needs neutralising for UNCLASSED ovid
     elements, but the previous fix over-corrected: `[data-product="ovid"] h1` compiles to
     specificity (0,1,1) — the attribute selector counts as a class — which then beat EVERY
     ovid CSS-module class (0,1,0: .heroMasthead, .detailHero__heading, …), flattening every
     heading in the product to inherited body size (thinking/threads — Bug 1, 2026-07-13).
     Fix: wrap the product-root scope in :where() so it contributes zero specificity. The
     reset then ties narcis's bare h1 at (0,0,1) each — broken by source order, and ovid's
     index.scss is imported AFTER narcis's in app/root.tsx (lines 22-24), so ovid's reset
     still wins that tie and neutralises the leak on unclassed elements. Against any ovid
     module class (0,1,0), the reset now correctly loses, so heading font-size/line-height
     are governed by the module — the intended cascade. */
  /* overflow-x: visible — the body-side half of the sticky-header fix above (this file's own
     `html[data-product="ovid"]` block); compiles to `[data-product="ovid"] body`, the same
     specificity Toile's own fix uses (`products/toile/styles/index.scss`'s `[data-product='toile']
     body`) to outrank quies's bare `body{overflow-x:hidden}`. */
}
[data-product=ovid] *, [data-product=ovid] *::before, [data-product=ovid] *::after {
  box-sizing: border-box;
}
:where([data-product=ovid]) img, :where([data-product=ovid]) svg, :where([data-product=ovid]) video {
  display: block;
  max-width: 100%;
}
:where([data-product=ovid]) a {
  color: inherit;
  text-decoration: none;
}
:where([data-product=ovid]) button {
  font: inherit;
  color: inherit;
  margin: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
[data-product=ovid] ::-moz-selection {
  background: var(--ov-ember);
  color: var(--ov-on-ember);
}
[data-product=ovid] ::selection {
  background: var(--ov-ember);
  color: var(--ov-on-ember);
}
:where([data-product=ovid]) :focus-visible {
  outline: 1px solid var(--ov-ember);
  outline-offset: 3px;
}
[data-product=ovid] body {
  font-family: var(--ov-font);
  font-size: var(--ov-body);
  line-height: var(--ov-lh-body);
  background: var(--ov-dusk);
  color: var(--ov-ivory);
  overflow-x: visible;
}
:where([data-product=ovid]) h1, :where([data-product=ovid]) h2, :where([data-product=ovid]) h3, :where([data-product=ovid]) h4, :where([data-product=ovid]) h5, :where([data-product=ovid]) h6, :where([data-product=ovid]) p {
  padding-top: 0;
  margin-bottom: 0;
  font-size: inherit;
  line-height: inherit;
}

/* ── Type primitives ───────────────────────────────────────────────────────── */
.ov-eyebrow {
  font-family: var(--ov-grotesque);
  font-weight: 500;
  font-size: var(--ov-micro);
  letter-spacing: var(--ov-track-eyebrow);
  text-transform: uppercase;
  color: var(--ov-ash);
  margin: 0;
}

.ov-eyebrow .ov-mk {
  color: var(--ov-ember);
}

.ov-display {
  font-family: var(--ov-display);
  font-weight: 500;
  line-height: var(--ov-lh-display);
  letter-spacing: -0.005em;
  color: var(--ov-ivory);
  margin: 0;
}

.ov-display--italic {
  font-style: italic;
  font-weight: 400;
}

.ov-lede {
  font-family: var(--ov-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--ov-lede);
  line-height: 1.4;
  color: var(--ov-ivory);
}

.ov-rule {
  height: 1px;
  border: 0;
  background: var(--ov-line);
  width: 100%;
}

.ov-rule--strong {
  background: var(--ov-line-strong);
}

/* ── Wordmark ──────────────────────────────────────────────────────────────── */
/* Cormorant Garamond 500, upright (not italic — the italic register is
   reserved for display/lede/card-title text). The ember period is part of
   the wordmark: always rendered, never recolored to ivory. */
.ov-wordmark {
  font-family: var(--ov-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  line-height: 1;
  color: var(--ov-ivory);
  padding-left: 0.3em;
}

.ov-wordmark .ov-pt {
  color: var(--ov-ember);
}

/* ── Oculus mark ───────────────────────────────────────────────────────────── */
/* Geometry + colour are fixed inline on the SVG (components/Oculus/Oculus.tsx) —
   the mark never recolors with theme/hover, so no token classes are needed here. */
.ov-oculus {
  width: var(--s, 32px);
  height: var(--s, 32px);
  flex: 0 0 auto;
  display: block;
}

/* ── Film grain overlay ────────────────────────────────────────────────────── */
.ov-grain {
  position: fixed;
  inset: 0;
  z-index: var(--ov-z-grain);
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── OvidSlot — production replacement for the canvas <image-slot> ──────────── */
.ov-slot {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--ov-panel);
  overflow: hidden;
}

.ov-slot__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: saturate(0.94) contrast(1.02);
}

.ov-slot__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--ov-s4);
  gap: 12px;
  color: #938B7B;
  font-family: var(--ov-grotesque);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: var(--ov-micro);
}

/* ── HEADER ────────────────────────────────────────────────────────────────── */
.ov-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--ov-z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ov-s5);
  height: var(--ov-header-h);
  padding: 0 var(--ov-gutter);
  background: linear-gradient(to bottom, rgba(23, 18, 16, 0.88), rgba(23, 18, 16, 0.42) 60%, transparent);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  transition: background var(--ov-dur-2) var(--ov-ease), border-color var(--ov-dur-2) var(--ov-ease);
  border-bottom: 1px solid transparent;
}

.ov-header[data-solid] {
  background: rgba(23, 18, 16, 0.94);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-bottom-color: var(--ov-line);
}

.ov-header--static {
  position: sticky;
  background: rgba(23, 18, 16, 0.94);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-bottom-color: var(--ov-line);
}

.ov-header__brand {
  display: flex;
  align-items: center;
  gap: var(--ov-s3);
  flex: 0 0 auto;
}

.ov-header__brand .ov-oculus {
  --s: 30px;
}

.ov-header__brand .ov-wordmark {
  font-size: 18px;
}

.ov-header__center {
  display: flex;
  justify-content: center;
  flex: 1 1 auto;
}

.ov-header__actions {
  display: flex;
  align-items: center;
  gap: var(--ov-s5);
  flex: 0 0 auto;
}

/* Phone (2026-08-23): the header had no mobile rule — its actions ran ~140px past a 393px
   viewport, and on iOS that widens the whole document (every pack page panned right). The ghost
   "Browse the packs" duplicates the nav link, so it goes; the rest tightens and stays on one line. */
@media (max-width: 720px) {
  .ov-header {
    gap: var(--ov-s3);
  }
  .ov-header__brand {
    gap: var(--ov-s2);
  }
  .ov-header__brand .ov-wordmark {
    font-size: 16px;
  }
  .ov-header__actions {
    gap: var(--ov-s3);
  }
  .ov-header__actions > .ov-btn--ghost {
    display: none;
  }
  .ov-nav {
    gap: var(--ov-s4);
  }
  .ov-nav__link {
    white-space: nowrap;
  }
}
/* ── NAV ───────────────────────────────────────────────────────────────────── */
/* Sentence case (2026-07-13 correction, docs/ovid_redesign.md §5): tracked uppercase is an
   eyebrow/label register, never a control or nav. */
.ov-nav {
  display: flex;
  align-items: center;
  gap: var(--ov-s8);
}

.ov-nav__link {
  position: relative;
  padding: 6px 0;
  font-family: var(--ov-grotesque);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--ov-ash);
  transition: color var(--ov-dur-2) var(--ov-ease);
}

.ov-nav__link:hover, .ov-nav__link[aria-current=page] {
  color: var(--ov-ivory);
}

.ov-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--ov-ember);
  transition: right var(--ov-dur-2) var(--ov-ease);
}

.ov-nav__link:hover::after, .ov-nav__link[aria-current=page]::after {
  right: 0;
}

/* ── BUTTONS ───────────────────────────────────────────────────────────────── */
/* Sentence case, weight 400, 14px, +.04em (2026-07-13 correction, docs/ovid_redesign.md §5):
   uppercase tracking on a control read as Narcis's eyebrow register, not an invitation.
   Tracked uppercase stays reserved for eyebrows/labels — never buttons or nav. */
.ov-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ov-s3);
  font-family: var(--ov-grotesque);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 13px 32px;
  border: 1px solid transparent;
  border-radius: var(--ov-radius);
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: background var(--ov-dur-2) var(--ov-ease), color var(--ov-dur-2) var(--ov-ease), border-color var(--ov-dur-2) var(--ov-ease);
}

.ov-btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.ov-btn--primary {
  background: var(--ov-ember);
  color: var(--ov-on-ember);
  border-color: var(--ov-ember);
}

.ov-btn--primary:hover {
  background: var(--ov-ember-hover);
  border-color: var(--ov-ember-hover);
}

.ov-btn--primary:active {
  background: var(--ov-ember-pressed);
  border-color: var(--ov-ember-pressed);
}

.ov-btn--secondary {
  background: transparent;
  color: var(--ov-ivory);
  border-color: var(--ov-line-strong);
}

.ov-btn--secondary:hover {
  background: var(--ov-ivory);
  color: var(--ov-dusk);
  border-color: var(--ov-ivory);
}

.ov-btn--ghost {
  padding: 6px 0;
  font-size: 13.5px;
  border: 0;
  background: none;
  color: var(--ov-ivory);
  position: relative;
  overflow: hidden;
}

.ov-btn--ghost .ov-btn__ln {
  width: 40px;
  height: 1px;
  background: currentColor;
  position: relative;
  overflow: hidden;
}

.ov-btn--ghost .ov-btn__ln::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ov-ember);
  transform: translateX(-101%);
  transition: transform var(--ov-dur-3) var(--ov-ease);
}

.ov-btn--ghost:hover .ov-btn__ln::after {
  transform: translateX(0);
}

.ov-btn--lg {
  padding: 17px 36px;
  font-size: 15px;
}

.ov-btn--sm {
  padding: 9px 16px;
  font-size: 12.5px;
}

/* ── FOOTER ────────────────────────────────────────────────────────────────── */
.ov-footer {
  padding: var(--ov-s10) var(--ov-gutter) var(--ov-s7);
  border-top: 1px solid var(--ov-line);
  background: var(--ov-ink-2);
}

.ov-footer__top {
  display: flex;
  justify-content: space-between;
  gap: var(--ov-s7);
  flex-wrap: wrap;
  align-items: flex-start;
}

.ov-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--ov-s5);
  max-width: 420px;
}

.ov-footer__brand .ov-row {
  display: flex;
  align-items: center;
  gap: var(--ov-s4);
}

.ov-footer__brand .ov-oculus {
  --s: 44px;
}

.ov-footer__brand .ov-wordmark {
  font-size: 26px;
}

.ov-footer__brand p {
  margin: 0;
  color: var(--ov-ash);
  font-size: var(--ov-small);
  line-height: var(--ov-lh-body);
}

.ov-footer__cols {
  display: flex;
  gap: clamp(40px, 7vw, 110px);
  flex-wrap: wrap;
}

.ov-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--ov-s3);
}

.ov-footer__col h4 {
  margin: 0 0 var(--ov-s1);
  font-family: var(--ov-grotesque);
  font-weight: 500;
  font-size: var(--ov-micro);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ov-dim);
}

.ov-footer__col a {
  font-size: 13.5px;
  color: var(--ov-ash);
  transition: color var(--ov-dur-2) var(--ov-ease);
}

.ov-footer__col a:hover {
  color: var(--ov-ivory);
}

.ov-footer__brand .ov-row {
  color: inherit;
}

/* .ov-footer__packs / __packsGrid retired 2026-08-11 with the per-pack footer index they styled. */
.ov-footer__base {
  margin-top: var(--ov-s9);
  padding-top: var(--ov-s5);
  border-top: 1px solid var(--ov-line);
  display: flex;
  justify-content: space-between;
  gap: var(--ov-s5);
  flex-wrap: wrap;
}

.ov-footer__base span {
  font-family: var(--ov-grotesque);
  font-size: var(--ov-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ov-dim);
}

/* ── FEED PLATE / CARD ─────────────────────────────────────────────────────── */
.ov-plate {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ov-s3);
}

.ov-plate__frame {
  position: relative;
  overflow: hidden;
  background: var(--ov-panel);
  border: 1px solid var(--ov-line);
  aspect-ratio: 4/5;
  transition: border-color var(--ov-dur-3) var(--ov-ease);
}

.ov-plate__frame > .ov-slot, .ov-plate__frame > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.ov-plate__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 55%, rgba(23, 18, 16, 0.45));
  opacity: 0;
  transition: opacity var(--ov-dur-3) var(--ov-ease);
}

.ov-plate__frame img {
  transition: transform var(--ov-dur-4) var(--ov-ease), filter var(--ov-dur-3) var(--ov-ease);
  transform-origin: center;
}

.ov-plate:hover .ov-plate__frame {
  border-color: var(--ov-line-strong);
}

.ov-plate:hover .ov-plate__frame::after {
  opacity: 1;
}

.ov-plate:hover .ov-plate__frame img {
  transform: scale(1.03);
}

.ov-plate__cap {
  display: flex;
  align-items: baseline;
  gap: var(--ov-s3);
  min-height: 18px;
}

.ov-plate__no {
  font-family: var(--ov-grotesque);
  font-weight: 500;
  font-size: var(--ov-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ov-ember);
  flex: 0 0 auto;
}

.ov-plate__title {
  font-family: var(--ov-display);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: var(--ov-ivory);
  line-height: 1.2;
}

.ov-plate__meta {
  margin-left: auto;
  font-family: var(--ov-grotesque);
  font-size: var(--ov-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ov-dim);
  flex: 0 0 auto;
}

.ov-plate--clickable {
  cursor: pointer;
}

.ov-plate--overlaycap .ov-plate__cap {
  position: absolute;
  left: var(--ov-s4);
  right: var(--ov-s4);
  bottom: var(--ov-s4);
  z-index: 2;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--ov-dur-3) var(--ov-ease), transform var(--ov-dur-3) var(--ov-ease);
}

.ov-plate--overlaycap:hover .ov-plate__cap {
  opacity: 1;
  transform: none;
}

.ov-plate--overlaycap .ov-plate__title {
  color: var(--ov-ivory);
}

/* ── LOGIN ─────────────────────────────────────────────────────────────────── */
/* SignInCard — House redesign (2026-07-13): the mark/title/sub now sit INSIDE a
   bordered panel card (canvas §06), replacing the earlier bare-brand-row-above-
   a-transparent-stack layout. Mechanics (Google POST, magic-link Form, nonce,
   error/sent branches) are untouched — this is composition + tokens only. */
.ov-login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--ov-s8) var(--ov-gutter);
}

.ov-login__card {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ov-s3);
  text-align: center;
  padding: 36px 34px;
  border: 1px solid var(--ov-line);
  background: var(--ov-panel);
}

.ov-login__card .ov-btn {
  width: 100%;
}

.ov-login__title {
  font-family: var(--ov-display);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  color: var(--ov-ivory);
  margin: var(--ov-s2) 0 0;
}

.ov-login__sub {
  font-size: var(--ov-small);
  color: var(--ov-ash);
  margin: 0 0 var(--ov-s2);
}

.ov-login__divider {
  display: flex;
  align-items: center;
  gap: var(--ov-s3);
  width: 100%;
  color: var(--ov-dim);
  font-family: var(--ov-grotesque);
  font-size: var(--ov-micro);
  letter-spacing: 0.2em;
}

.ov-login__divider .ln {
  flex: 1;
  height: 1px;
  background: var(--ov-line);
}

.ov-login__field {
  display: flex;
  flex-direction: column;
  gap: var(--ov-s2);
  width: 100%;
}

/* Email + "Send link" side by side (canvas §06) — the field row modifier. */
.ov-login__field--row {
  flex-direction: row;
}

.ov-login__field--row .ov-login__input {
  flex: 1;
  width: auto;
}

.ov-login__field--row .ov-btn {
  width: auto;
  padding: 13px 22px;
}

.ov-login__input {
  width: 100%;
  padding: 13px 16px;
  background: var(--ov-raise);
  color: var(--ov-ivory);
  border: 1px solid var(--ov-line-strong);
  border-radius: var(--ov-radius);
  font-family: var(--ov-grotesque);
  font-size: var(--ov-small);
}

.ov-login__input::-moz-placeholder {
  color: var(--ov-dim);
}

.ov-login__input::placeholder {
  color: var(--ov-dim);
}

.ov-login__input:focus {
  outline: none;
  border-color: var(--ov-ember);
}

.ov-login__msg {
  margin: 0;
  font-size: var(--ov-small);
}

.ov-login__msg--err {
  color: var(--ov-ember);
}

.ov-login__msg--ok {
  color: var(--ov-ash);
}

/* The shared code field (core SignInCodeForm) reads these names; the house maps them to its own ink. */
.ov-login__card {
  --text: var(--ov-ivory);
  --text-muted: var(--ov-ash);
  --text-dim: var(--ov-dim);
  --border: var(--ov-line-strong);
  --surface: var(--ov-panel);
  --yolk: var(--ov-ember);
  --error: var(--ov-ember);
  --font-body: var(--ov-grotesque);
}

.ov-login__foot {
  color: var(--ov-dim);
  font-size: var(--ov-micro);
  letter-spacing: 0.04em;
  text-align: center;
}

.ov-login__back {
  font-family: var(--ov-grotesque);
  font-size: 12px;
  color: var(--ov-dim);
  transition: color var(--ov-dur-2) var(--ov-ease);
}

.ov-login__back:hover {
  color: var(--ov-ivory);
}

/* ── FACE-UPLOAD SURFACE ───────────────────────────────────────────────────── */
.ov-upload {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 4/5;
  margin: 0 auto;
}

.ov-upload__frame {
  position: absolute;
  inset: 0;
  border: 1px solid var(--ov-line);
  background: var(--ov-panel);
  overflow: hidden;
}

.ov-upload__frame > .ov-slot {
  width: 100%;
  height: 100%;
}

.ov-upload__tick {
  position: absolute;
  width: 18px;
  height: 18px;
  z-index: 3;
  pointer-events: none;
  border-color: var(--ov-ash);
  opacity: 0.7;
}

.ov-upload__tick--tl {
  top: 14px;
  left: 14px;
  border-top: 1px solid;
  border-left: 1px solid;
}

.ov-upload__tick--tr {
  top: 14px;
  right: 14px;
  border-top: 1px solid;
  border-right: 1px solid;
}

.ov-upload__tick--bl {
  bottom: 14px;
  left: 14px;
  border-bottom: 1px solid;
  border-left: 1px solid;
}

.ov-upload__tick--br {
  bottom: 14px;
  right: 14px;
  border-bottom: 1px solid;
  border-right: 1px solid;
}

.ov-upload__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -34px;
  text-align: center;
}

.ov-upload[data-filled] .ov-upload__tick {
  border-color: var(--ov-ember);
  opacity: 1;
}

/* Visually-hidden utility — global so className="sr-only" works on every surface
   (homepage + pack landings). Mirrors narcis styles/index.scss .sr-only. */
.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;
}
@charset "UTF-8";
/**
 * PackHeroStage.module.scss — Toile.
 *
 * Copied from `@product/narcis/packs/PackHeroStage.module.scss` and cut to the showcase: the
 * canvas, trainbar, shimmer, noise plate, ad veil, intro dissolve, status chip, inlet group,
 * connector, error panel, honesty band, auth/consent gate wrappers and the whole CTA bar are gone
 * with the states that drove them. What is kept is the stage box, the pager zones and their
 * hover-only arrow discs, the thumb strip, and the two condition blocks that make the card behave
 * on real devices — `(hover: hover) and (pointer: fine)` and `prefers-reduced-motion`.
 *
 * Retokened onto `--tl-*` (styles/index.scss). Narcis's yolk has no Toile counterpart with hover
 * and dim variants, so the accent's translucent forms are written as literals over
 * rgb(255, 223, 168), which is `--tl-accent`.
 *
 * The one structural change from narcis: the frame is the PACK's ratio, not a fixed 3/4. Narcis
 * caps the portrait with a hardcoded `calc(min(660px, 80vh) * 3 / 4)` and, on desktop, swaps the
 * ratio to 4/4.1 to buy back the fold. Both are the same idea — bound the HEIGHT, derive the width
 * — so this file names that height once (`--tl-hero-h`) and multiplies it by the pack's own aspect
 * ratio, which keeps a wallpaper wide and a coloring page tall while honouring the same budget.
 */
/* ── Stage container ─────────────────────────────────────────────────────────── */
._stage_3u2bi_23 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-height: 0;
  /* Fallbacks: the component sets all three inline, per selected cell. */
  --tl-stage-ratio: 3 / 4;
  --tl-stage-ar: 0.75;
  --tl-thumb-ratio: 3 / 4;
  /* The height the frame is allowed to take. Everything else derives from it. */
  --tl-hero-h: min(660px, 80vh);
  /* Cap + center the whole stack at every width — otherwise the capped frame hugs one edge (the
     copy edge on desktop, the left edge on tablet). Phones narrower than the cap fill naturally. */
  max-width: min(100%, var(--tl-hero-h) * var(--tl-stage-ar));
  margin-inline: auto;
}

/* Desktop fold budget (narcis §15, generalized): 49px header + the hero's own top padding (40) +
   the rows that follow the frame (thumb strip ~60 + gaps ≈ 40) = 189px, floored at 380px so a short
   but still ≥640 window scrolls the page rather than crushing the image. svh, never vh — the
   formula's own source unit. */
@media (min-width: 1024px) and (min-height: 640px) {
  ._stage_3u2bi_23 {
    --tl-hero-h: max(380px, min(660px, calc(100svh - 189px)));
  }
}
/* ── The frame ───────────────────────────────────────────────────────────────── */
/* The gesture surface: a look's card or the coda, whichever shows. `scroll-margin-top` clears the
   sticky header when the aside's coda door brings the stage into view. */
._frame_3u2bi_53 {
  position: relative;
  width: 100%;
  scroll-margin-top: 64px;
}

/* The coda frame is always mounted (the action inside must mount once) and `hidden` while a look
   shows — this class sets no `display`, so the attribute's own display:none holds. */
._codaSlot_3u2bi_61 {
  width: 100%;
  max-width: min(100%, var(--tl-hero-h) * var(--tl-stage-ar));
  margin-inline: auto;
}

._bigArea_3u2bi_67 {
  position: relative;
  width: 100%;
  max-width: min(100%, var(--tl-hero-h) * var(--tl-stage-ar));
  aspect-ratio: var(--tl-stage-ratio);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--tl-border);
  background: var(--tl-surface);
  margin-inline: auto;
}

._bigImage_3u2bi_79 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  z-index: 1;
}

/* ── Card as pager ───────────────────────────────────────────────────────────── */
/* The prev zone takes the left 28% of the card because the dominant gesture is "forward" — the
   wide majority surface goes to it, the way a comic reader pages by tapping anywhere but the back
   edge. z-index 5 keeps the zones above the image and below the corner tag (which is
   pointer-events:none anyway). */
._pager_3u2bi_94 {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
}

._pagerZone_3u2bi_101 {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  background: none;
  padding: 0 14px;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}
._pagerZone_3u2bi_101:focus-visible {
  outline: 2px solid var(--tl-accent);
  outline-offset: -3px;
  border-radius: 16px;
}

._pagerZonePrev_3u2bi_117 {
  flex: 0 0 28%;
  justify-content: flex-start;
}

._pagerZoneNext_3u2bi_122 {
  flex: 1 1 auto;
  justify-content: flex-end;
}

/* Feedback, not chrome: the discs exist only while a fine pointer is over the card (or a zone holds
   keyboard focus). display:none is the base state so a touch device never renders them at all. */
._pagerArrow_3u2bi_129 {
  display: none;
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  background: rgba(20, 18, 16, 0.72);
  color: var(--tl-text);
  font-size: 16px;
  line-height: 1;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

@media (hover: hover) and (pointer: fine) {
  ._pagerArrow_3u2bi_129 {
    display: flex;
    opacity: 0;
    transition: opacity 160ms ease;
  }
  ._bigArea_3u2bi_67:hover ._pagerArrow_3u2bi_129,
  ._pagerZone_3u2bi_101:focus-visible ._pagerArrow_3u2bi_129 {
    opacity: 1;
  }
}
/* ── Corner tag (bottom-right) ───────────────────────────────────────────────── */
._cornerTag_3u2bi_155 {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 6;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--tl-text);
  background: rgba(20, 18, 16, 0.82);
  padding: 5px 11px;
  border-radius: 9999px;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  pointer-events: none;
}

/* The look door takes the bottom-right corner (`core/packs/stage` LookDoor); the tag moves left and
   yields the width the door needs (~150px with its gaps) — a long READING · STYLE pair ellipsizes
   rather than running under the door at 390. */
._cornerTagLeft_3u2bi_174 {
  right: auto;
  left: 12px;
  max-width: calc(100% - 172px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Nine-thumb strip ────────────────────────────────────────────────────────── */
._thumbStrip_3u2bi_184 {
  display: flex;
  gap: 6px;
  align-items: stretch;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* The strip's slot geometry, shared by the nine thumbs and the coda thumb (whose ghost look is
   core's `CodaThumb`); `.thumb` adds the picture thumb's own border and ground. */
._thumb_3u2bi_184,
._thumbSlot_3u2bi_196 {
  flex: 1;
  position: relative;
  aspect-ratio: var(--tl-thumb-ratio);
  border-radius: 4px;
  overflow: hidden;
  min-width: 0;
}

._thumb_3u2bi_184 {
  padding: 0;
  border: 1px solid var(--tl-border);
  background: var(--tl-surface);
  cursor: pointer;
  display: block;
}
._thumb_3u2bi_184:hover {
  border-color: var(--tl-border-strong);
}
._thumb_3u2bi_184:focus-visible {
  outline: 2px solid var(--tl-accent);
  outline-offset: 2px;
}

._thumbActive_3u2bi_220 {
  border-color: var(--tl-accent);
  box-shadow: 0 0 0 1px rgba(180, 113, 76, 0.9), 0 0 18px rgba(180, 113, 76, 0.25);
}

/* The coda's press: a link to the wall, styled as the verb the wall's own coda frames carry. */
._codaPress_3u2bi_226 {
  display: block;
  width: 100%;
  margin-top: 12px;
  text-align: center;
  font-family: var(--tl-font);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
  color: var(--tl-accent-ink);
  background: var(--tl-accent);
  border-radius: var(--tl-radius-chrome, 12px);
  padding: 12px;
}

._thumbImage_3u2bi_242 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  z-index: 1;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
/* The strip fits all ten at 390 — nine thumbs and the coda — so the set's end, and what follows
   it, is seen before any swipe (plan 2026_09_23_pack_stage_coda.md § Decided 2). No scroll, no
   fixed thumb width: each slot takes a tenth of the row. */
@media (max-width: 639px) {
  ._thumbStrip_3u2bi_184 {
    gap: 5px;
  }
  ._thumb_3u2bi_184,
  ._thumbSlot_3u2bi_196 {
    border-radius: 3px;
  }
}
/* ── Reduced motion ──────────────────────────────────────────────────────────── */
/* The pager discs still appear on hover — they are the only signal that the card pages at all.
   Only the fade is dropped. */
@media (prefers-reduced-motion: reduce) {
  ._pagerArrow_3u2bi_129 {
    transition: none;
  }
}
@charset "UTF-8";
/* The nine frames as three rows of three — Toile's `PackGrid.module.scss` without the reading-label
   column, which Ovid's packs (nine curated samples, no reading × style nesting) do not have. */
._row_1fk6e_4 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  min-width: 0;
}

._cell_1fk6e_11 {
  display: block;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  min-width: 0;
}
._cell_1fk6e_11:focus-visible {
  outline: 2px solid var(--tl-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

._cellImg_1fk6e_26 {
  width: 100%;
  aspect-ratio: 832/1216;
  overflow: hidden;
  border-radius: var(--tl-radius-art, 4px);
  border: 1px solid var(--tl-border);
  background: var(--tl-surface);
}

._cellImg_1fk6e_26 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

._cell_1fk6e_11:hover ._cellImg_1fk6e_26 {
  border-color: var(--tl-border-strong);
}

@media (max-width: 639px) {
  ._row_1fk6e_4 {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
@charset "UTF-8";
/**
 * StagePieces.module.scss — the coda thumb, the look door and the coda door (board
 * `TenthFrame.dc.html`: `.thumb.ghost`, `.door`). `--stage-*` variables only; the dashed accent is
 * `core/wall/ui/Ghost.module.scss`'s mix.
 */
/* ── The coda thumb ──────────────────────────────────────────────────────────── */
._codaThumb_w51iw_8 {
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--stage-accent) 4%, transparent);
  border: 1px dashed color-mix(in srgb, var(--stage-accent) 55%, transparent);
  cursor: pointer;
  padding: 0;
}
._codaThumb_w51iw_8:focus-visible {
  outline: 2px solid var(--stage-accent);
  outline-offset: 2px;
}

._codaThumbOn_w51iw_22 {
  border: 2px dashed var(--stage-accent);
  background: color-mix(in srgb, var(--stage-accent) 10%, transparent);
}

._codaThumbPen_w51iw_27 {
  width: 13px;
  height: 13px;
  display: block;
  color: var(--stage-accent);
}
._codaThumbPen_w51iw_27 svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── The doors ───────────────────────────────────────────────────────────────── */
._doorPen_w51iw_40 {
  width: 14px;
  height: 14px;
  flex: none;
  display: block;
}
._doorPen_w51iw_40 svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* On the look, bottom-right, above the pager zones (the house's zones sit at z-index 5). */
._lookDoor_w51iw_53 {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  line-height: 1.2;
  color: var(--stage-accent);
  text-decoration: none;
  background: color-mix(in srgb, var(--stage-ground) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--stage-accent) 55%, transparent);
  border-radius: 9999px;
  padding: 6px 12px 6px 10px;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
._lookDoor_w51iw_53:hover {
  background: color-mix(in srgb, var(--stage-ground) 88%, transparent);
}
._lookDoor_w51iw_53:focus-visible {
  outline: 2px solid var(--stage-accent);
  outline-offset: 2px;
}

/* In the aside: the ghost's dashed accent as a full-width button, accent words, never filled —
   the coda holds the house's one filled verb. */
._codaDoor_w51iw_81 {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font: inherit;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 0 0;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--stage-accent);
  background: color-mix(in srgb, var(--stage-accent) 4%, transparent);
  border: 1px dashed color-mix(in srgb, var(--stage-accent) 55%, transparent);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: border-color 150ms ease;
  /* The ghost materialises: the dashed line turns solid, the ground stays. A deeper accent fill
     read as a muddy khaki box — the faded-verb look the coda retired (operator, 2026-09-23). */
}
._codaDoor_w51iw_81:hover {
  border-style: solid;
  border-color: var(--stage-accent);
}
._codaDoor_w51iw_81:focus-visible {
  outline: 2px solid var(--stage-accent);
  outline-offset: 2px;
}
@charset "UTF-8";
/**
 * PackLandingTemplate.module.scss — Toile.
 *
 * The page shell copied from `@product/narcis/packs/PackLandingTemplate.module.scss`: the hero's
 * 12-column grid with the sticky 5-column aside and the 7-column stage, the mobile header hoist and
 * its desktop/mobile visibility pair, the gallery-proof band, the SEO block. Everything that styled
 * a state Toile does not have came out with it — price rows, queue chips and ghosts, CTA and its
 * gates, train card, workbench/uploader/slots/preview panels, price bar, dialogs, how-it-works,
 * returning-buyer banner, legal note, delivered-view leftovers. The chips row and the per-cell
 * recipe block that used to occupy the CTA's slot are also gone (pack page canon convergence,
 * 2026-09-01) — narcis/ovid carry neither. The related strip came back in its own module
 * (`PackRelatedStrip.module.scss`), matching canon: it renders independent of any purchase state.
 *
 * Retokened onto `--tl-*`. Narcis's mixin imports (`@styles/fonts.scss` et al. resolve to narcis's
 * own partials) are dropped: Toile sets one face and states it, which is what its other route
 * modules do.
 *
 * Breakpoints are narcis's set, unchanged — 1023 (mobile header hoist), 899 (hero collapses to one
 * column, aside reorders below the stage), 900/600 (padding steps), 639 (cells single-column, strip
 * scrolls; in PackGrid/PackHeroStage).
 */
._page_1nzl6_23 {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--tl-stage);
}

/* ── Detail hero ─────────────────────────────────────────────────────────────── */
._detailHero_1nzl6_32 {
  /* The shared stage pieces (`core/packs/stage/`: the coda, its thumb, the two doors) read these
     and nothing else — Toile's tokens, set once for the stage and the aside together. */
  --stage-accent: var(--tl-accent);
  --stage-ground: var(--tl-stage);
  --stage-text: var(--tl-text);
  --stage-muted: var(--tl-muted);
  --stage-line: var(--tl-border);
  --stage-radius: 16px;
  padding: 40px 26px 28px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  ._detailHero_1nzl6_32 {
    padding: 32px 26px 22px;
  }
}
@media (max-width: 600px) {
  ._detailHero_1nzl6_32 {
    padding: 26px 18px 18px;
  }
}

._detailHero__grid_1nzl6_58 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
  align-items: start;
}
@media (max-width: 899px) {
  ._detailHero__grid_1nzl6_58 {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

._detailHero__left_1nzl6_71 {
  grid-column: span 5;
  position: sticky;
  /* The header is 49px tall and sticky; this clears it with the same breathing room narcis
     gives its own 56px bar. */
  top: 72px;
  align-self: start;
  min-width: 0;
}
@media (max-width: 899px) {
  ._detailHero__left_1nzl6_71 {
    grid-column: 1/-1;
    position: static;
    /* The aside renders below the stage on one column: the phone reads eyebrow → H1 (hoisted
       above the grid) → stage → thumbs → recipe → grid. */
    order: 2;
    /* The phone's first screen owes the reader the picture and the verb; the tagline opens the
       body below. The left column becomes a flex column here so the tagline can sink under
       the aside (order: 1, set on .detailHero__tagline) while the source order stays prose. */
    display: flex;
    flex-direction: column;
    /* A grid item's automatic min-width is content-based, not 0. The thumb strip below 640
       holds nine non-shrinking 44px thumbs (444px of intrinsic content); without min-width:0
       on BOTH tracks that content forces the single 1fr track wider than the viewport and the
       whole document scrolls horizontally. narcis carried this fix from a live phone report. */
    min-width: 0;
  }
}

._detailHero__right_1nzl6_100 {
  grid-column: span 7;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  min-width: 0;
}
@media (max-width: 899px) {
  ._detailHero__right_1nzl6_100 {
    grid-column: 1/-1;
    order: 1;
    align-items: stretch;
    /* Same fix as the aside, same root cause — and this is the column that actually carries
       the offending subtree. */
    min-width: 0;
  }
}

/* Mobile-only eyebrow + title block: visible only below 1024, above the grid. The in-aside copies
   are hidden there, so exactly one H1 renders at any width. */
._detailHero__mobileHeader_1nzl6_121 {
  display: none;
}
@media (max-width: 1023px) {
  ._detailHero__mobileHeader_1nzl6_121 {
    display: block;
    margin-bottom: 16px;
  }
  ._detailHero__desktopOnly_1nzl6_132 {
    display: none;
  }
}

._detailHero__eyebrow_1nzl6_137 {
  font-family: "JetBrains Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10.5px;
  color: var(--tl-muted);
  margin: 0 0 12px;
}

._detailHero__heading_1nzl6_146 {
  font-weight: 500;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--tl-text);
  margin: 0 0 14px;
}
@media (max-width: 900px) {
  ._detailHero__heading_1nzl6_146 {
    font-size: 32px;
  }
}
@media (max-width: 600px) {
  ._detailHero__heading_1nzl6_146 {
    font-size: 28px;
  }
}

._detailHero__tagline_1nzl6_89 {
  font-size: 15px;
  line-height: 1.55;
  color: var(--tl-muted);
  margin: 0 0 16px;
}
@media (max-width: 899px) {
  ._detailHero__tagline_1nzl6_89 {
    order: 1;
    margin: 16px 0 0;
  }
}

/* ── Gallery proof — the nine cells below the hero ───────────────────────────── */
._galleryProof_1nzl6_179 {
  padding: 28px 26px 0;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  border-top: 1px solid var(--tl-border);
  overflow: hidden;
}
@media (max-width: 900px) {
  ._galleryProof_1nzl6_179 {
    padding: 24px 26px 0;
  }
}
@media (max-width: 600px) {
  ._galleryProof_1nzl6_179 {
    padding: 20px 18px 0;
  }
}

._galleryProofInner_1nzl6_199 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── SEO block ───────────────────────────────────────────────────────────────── */
._seoContent_1nzl6_206 {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 26px;
  box-sizing: border-box;
}

._seoSection_1nzl6_214 {
  border-top: 1px solid var(--tl-border);
  padding: 3rem 0;
}

._seoHeading_1nzl6_219 {
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--tl-text);
  margin: 0 0 1.5rem;
}
@media (max-width: 600px) {
  ._seoHeading_1nzl6_219 {
    font-size: 19px;
  }
}

._seoFaqList_1nzl6_232 {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

._seoFaqItem_1nzl6_240 {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

._seoFaqQ_1nzl6_246 {
  font-size: 15px;
  font-weight: 500;
  color: var(--tl-text);
  margin: 0;
}

._seoFaqA_1nzl6_253 {
  font-size: 14px;
  line-height: 1.7;
  color: var(--tl-muted);
  margin: 0;
}

._seoParagraph_1nzl6_260 {
  font-size: 15px;
  line-height: 1.75;
  color: var(--tl-muted);
  margin: 0 0 1.25rem;
}

._seoUseCasesList_1nzl6_267 {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
._seoUseCasesList_1nzl6_267 li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--tl-muted);
  padding-left: 1.25rem;
  position: relative;
}
._seoUseCasesList_1nzl6_267 li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--tl-text);
}
._ghost_1et0j_1 {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font: inherit;
  width: 100%;
  margin: 0;
  border-radius: var(--tl-radius-art, 3px);
  background: color-mix(in srgb, var(--tl-accent) 4%, transparent);
  border: 1px dashed color-mix(in srgb, var(--tl-accent) 45%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 5cqw, 12px);
  padding: clamp(8px, 9cqw, 18px);
  text-align: center;
  cursor: pointer;
  min-width: 0;
  container-type: inline-size;
}
._ghost_1et0j_1:focus-visible {
  outline: 2px solid var(--tl-accent);
  outline-offset: 2px;
}

._split_1et0j_25 {
  justify-content: space-between;
}

._rule_1et0j_29 {
  font-family: var(--tl-font);
  font-size: clamp(11px, 8cqw, 15px);
  line-height: 1.25;
  color: var(--tl-text);
  max-width: 82%;
  overflow-wrap: break-word;
}

._ownRow_1et0j_38 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

._verb_1et0j_45 {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tl-muted);
}

._pen_1et0j_53 {
  width: 22px;
  height: 22px;
  color: var(--tl-accent);
  display: block;
  opacity: 0.9;
}
._pen_1et0j_53 svg {
  width: 100%;
  height: 100%;
  display: block;
}

._words_1et0j_66 {
  font-family: var(--tl-font);
  font-size: clamp(11px, 8cqw, 15px);
  line-height: 1.25;
  color: var(--tl-accent);
  max-width: 82%;
  overflow-wrap: break-word;
}

._cta_1et0j_75 {
  font-family: var(--tl-font);
  font-size: 12.5px;
  color: var(--tl-accent-ink);
  background: var(--tl-accent);
  border-radius: var(--tl-radius-chrome, 10px);
  padding: 8px 16px;
}

@container (max-width: 140px) {
  ._rule_1et0j_29,
  ._words_1et0j_66 {
    max-width: 100%;
  }
}
@container (max-width: 100px) {
  ._ownRow_1et0j_38 ._words_1et0j_66 {
    display: none;
  }
}
@container (max-width: 70px) {
  ._pen_1et0j_53 {
    display: none;
  }
}
._overlay_l9xx9_1 {
  position: fixed;
  inset: 0;
  z-index: var(--tl-z-signin);
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

._scrim_l9xx9_11 {
  position: absolute;
  inset: 0;
  background: rgba(12, 11, 9, 0.82);
}

._card_l9xx9_17 {
  position: relative;
  z-index: 1;
}
._card_129fb_1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 420px;
  max-width: calc(100vw - 32px);
  background: var(--tl-surface);
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius-container, 16px);
  padding: 34px 32px 28px;
  font-family: var(--tl-font);
  animation: _cardMount_129fb_1 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes _cardMount_129fb_1 {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
._lockup_129fb_25 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
}

._word_129fb_33 {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--tl-text);
  text-transform: lowercase;
}

._title_129fb_42 {
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--tl-text);
  margin: 0 0 4px;
  text-align: center;
}

._subtitle_129fb_51 {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--tl-muted);
  margin: 0 0 22px;
  text-align: center;
}

._errorBanner_129fb_59 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--tl-radius-chrome, 10px);
  background: var(--tl-stage);
  border: 1px solid var(--tl-border-strong);
  margin-bottom: 16px;
  font-size: 13px;
  text-align: left;
}

._errorDot_129fb_73 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tl-error);
  margin-top: 6px;
  flex: none;
}

._errorText_129fb_82 {
  flex: 1;
  color: var(--tl-error);
  line-height: 1.5;
}

._errorBannerDismiss_129fb_88 {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--tl-dim);
  font-size: 16px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
}
._errorBannerDismiss_129fb_88:hover {
  color: var(--tl-muted);
}

._googleForm_129fb_102 {
  width: 100%;
}

._googleBtn_129fb_106 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  background: var(--tl-stage);
  color: var(--tl-text);
  border: 1px solid var(--tl-border-strong);
  border-radius: var(--tl-radius-chrome, 10px);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}
._googleBtn_129fb_106:hover {
  border-color: var(--tl-muted);
}
._googleBtn_129fb_106:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tl-accent) 18%, transparent);
}

._spinner_129fb_131 {
  animation: _spin_129fb_131 700ms linear infinite;
  color: var(--tl-accent);
  flex-shrink: 0;
}

@keyframes _spin_129fb_131 {
  to {
    transform: rotate(360deg);
  }
}
._divider_129fb_142 {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 16px 0;
}
._divider_129fb_142::before, ._divider_129fb_142::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--tl-border);
}
._divider_129fb_142 span {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--tl-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

._magicRow_129fb_163 {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

._emailInput_129fb_170 {
  flex: 1;
  min-width: 0;
  background: var(--tl-stage);
  border: 1px solid var(--tl-border-strong);
  border-radius: var(--tl-radius-chrome, 10px);
  padding: 10px 13px;
  color: var(--tl-text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
._emailInput_129fb_170::-moz-placeholder {
  color: var(--tl-dim);
}
._emailInput_129fb_170::placeholder {
  color: var(--tl-dim);
}
._emailInput_129fb_170:focus {
  border-color: var(--tl-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tl-accent) 18%, transparent);
}

._emailInputError_129fb_191 {
  border-color: var(--tl-error);
}
._emailInputError_129fb_191:focus {
  border-color: var(--tl-error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tl-error) 16%, transparent);
}

._magicBtn_129fb_199 {
  padding: 10px 18px;
  background: var(--tl-accent);
  color: var(--tl-accent-ink);
  border: none;
  border-radius: var(--tl-radius-chrome, 10px);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 0 24px color-mix(in srgb, var(--tl-accent) 35%, transparent);
  transition: box-shadow 150ms ease, opacity 150ms ease;
}
._magicBtn_129fb_199:hover:not(:disabled) {
  box-shadow: 0 0 30px color-mix(in srgb, var(--tl-accent) 55%, transparent);
}
._magicBtn_129fb_199:disabled {
  opacity: 0.6;
  box-shadow: none;
  cursor: not-allowed;
}
._magicBtn_129fb_199:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--tl-surface), 0 0 0 5px var(--tl-accent);
}

._fieldError_129fb_226 {
  font-size: 12px;
  color: var(--tl-error);
  margin: 8px 0 0;
  width: 100%;
  text-align: left;
}

._sentBlock_129fb_234 {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--tl-stage);
  border: 1px solid var(--tl-border-strong);
  border-radius: var(--tl-radius-chrome, 10px);
  padding: 14px 16px;
  animation: _fadeIn_129fb_1 180ms ease both;
}

@keyframes _fadeIn_129fb_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
._sentCheck_129fb_254 {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--tl-accent);
  color: var(--tl-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  box-shadow: 0 0 14px color-mix(in srgb, var(--tl-accent) 30%, transparent);
  flex: none;
}

._sentHeading_129fb_268 {
  display: block;
  font-weight: 500;
  font-size: 14px;
  color: var(--tl-text);
}

._sentBody_129fb_275 {
  font-size: 12.5px;
  color: var(--tl-muted);
}

._retryLink_129fb_280 {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--tl-dim);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 12px 0 0;
}
._retryLink_129fb_280:hover {
  color: var(--tl-muted);
}

._tos_129fb_295 {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--tl-dim);
  margin: 18px 0 0;
  text-align: center;
}
._tos_129fb_295 a {
  color: var(--tl-dim);
  text-decoration: underline;
}
._tos_129fb_295 a:hover {
  color: var(--tl-muted);
}

._backLink_129fb_310 {
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  color: var(--tl-dim);
  text-decoration: none;
  margin-top: 14px;
  background: none;
  border: none;
  cursor: pointer;
}
._backLink_129fb_310:hover {
  color: var(--tl-muted);
}
/* Reads the host's own tokens: the --tl-* wall tokens where a wall card mounts it, else the product's
 * --text/--border/--yolk set. The --auth-* hooks are the ones MagicLinkForm already offers. */
._form_4mx84_3 {
  width: 100%;
  max-width: 360px;
  margin-top: 4px;
  text-align: start;
}

._label_4mx84_10 {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--tl-muted, var(--text-muted));
}

._row_4mx84_18 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

._input_4mx84_24 {
  flex: 1 1 140px;
  min-width: 0;
  padding: 10px 14px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--auth-input-border, var(--tl-border-strong, var(--border)));
  background: var(--auth-input-bg, var(--tl-stage, var(--surface)));
  color: var(--tl-text, var(--text));
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 1.05rem;
  letter-spacing: 0.18em;
}
._input_4mx84_24::-moz-placeholder {
  color: var(--tl-dim, var(--text-dim));
  letter-spacing: 0.18em;
}
._input_4mx84_24::placeholder {
  color: var(--tl-dim, var(--text-dim));
  letter-spacing: 0.18em;
}
._input_4mx84_24:focus-visible {
  outline: 2px solid var(--tl-accent, var(--yolk));
  outline-offset: 2px;
}

._button_4mx84_45 {
  padding: 10px 18px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--auth-input-border, var(--tl-border-strong, var(--border)));
  background: transparent;
  color: var(--tl-text, var(--text));
  font-family: var(--font-body, inherit);
  font-size: var(--auth-control-size, 0.9375rem);
  font-weight: var(--auth-control-weight, 500);
  white-space: nowrap;
  cursor: pointer;
}
._button_4mx84_45:hover:not(:disabled) {
  border-color: var(--tl-accent, var(--yolk));
}
._button_4mx84_45:disabled {
  opacity: 0.5;
  cursor: default;
}

._error_4mx84_65 {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--error, var(--tl-error, #c0504d));
}
._word_kwg15_1 {
  font-size: 17px;
}

@media (max-width: 640px) {
  ._word_kwg15_1 {
    display: none;
  }
}
._header_1lt20_1 {
  position: sticky;
  top: 0;
  z-index: var(--tl-z-header);
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 13px 26px;
  border-bottom: 1px solid var(--tl-border);
  background: var(--tl-stage-veil);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 180ms ease;
}
@media (prefers-reduced-motion: reduce) {
  ._header_1lt20_1 {
    transition: none;
  }
}

._headerHidden_1lt20_21 {
  transform: translateY(-100%);
}

._headerFloating_1lt20_25 {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

._brand_1lt20_29 {
  display: flex;
  align-items: center;
  gap: 9px;
}

._nav_1lt20_35 {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
}

._right_1lt20_42 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

@media (min-width: 641px) {
  ._nav_1lt20_35 + ._right_1lt20_42 {
    margin-left: 0;
  }
}
@media (max-width: 640px) {
  ._header_1lt20_1 {
    padding: 11px 16px;
    gap: 14px;
  }
  ._nav_1lt20_35 {
    display: none;
  }
  ._headerSearching_1lt20_62 ._brand_1lt20_29,
  ._headerSearching_1lt20_62 ._nav_1lt20_35,
  ._headerSearching_1lt20_62 ._right_1lt20_42 {
    display: none;
  }
}
._slot_1v7bb_1 {
  flex: 1;
  max-width: 460px;
  min-width: 0;
  display: flex;
  align-items: center;
}

._field_1v7bb_9 {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--tl-surface);
  border: 1px solid var(--tl-border-strong);
  border-radius: var(--tl-radius-chrome, 12px);
  padding: 9px 15px;
  color: var(--tl-dim);
}

._input_1v7bb_22 {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  caret-color: var(--tl-accent);
  font-family: var(--tl-font);
  font-size: 13.5px;
  color: var(--tl-text);
}
._input_1v7bb_22::-moz-placeholder {
  color: var(--tl-dim);
}
._input_1v7bb_22::placeholder {
  color: var(--tl-dim);
}

._glyph_1v7bb_37,
._close_1v7bb_38 {
  display: none;
}

._clear_1v7bb_42 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: -14px -15px -14px 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--tl-muted);
}

html[data-wall-surface="sheet"] ._input_1v7bb_22 {
  font-size: 16px;
}
html[data-wall-surface="sheet"] ._field_1v7bb_9 {
  padding: 7px 12px;
}
html[data-wall-surface="sheet"] ._clear_1v7bb_42 {
  margin: -14px -15px -14px 0;
}
html[data-wall-surface="sheet"] ._slotFold_1v7bb_66 {
  flex: 0 0 auto;
  max-width: none;
}
html[data-wall-surface="sheet"] ._slotFold_1v7bb_66 ._field_1v7bb_9 {
  display: none;
}
html[data-wall-surface="sheet"] ._slotFold_1v7bb_66 ._glyph_1v7bb_37 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 44px;
  height: 44px;
  margin: -10px -13px;
  padding: 0;
  border: none;
  border-radius: var(--tl-radius-chrome, 10px);
  background: none;
  color: var(--tl-muted);
}
html[data-wall-surface="sheet"] ._glyphLit_1v7bb_87 {
  color: var(--tl-text);
}
html[data-wall-surface="sheet"] ._glyphLit_1v7bb_87::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tl-accent);
}
html[data-wall-surface="sheet"] ._slotOpen_1v7bb_100 {
  flex: 1;
  min-width: 0;
}
html[data-wall-surface="sheet"] ._slotOpen_1v7bb_100 ._glyph_1v7bb_37 {
  display: none;
}
html[data-wall-surface="sheet"] ._slotOpen_1v7bb_100 ._field_1v7bb_9 {
  display: flex;
}
html[data-wall-surface="sheet"] ._slotOpen_1v7bb_100 ._close_1v7bb_38 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: -14px -26px -14px 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--tl-muted);
}
._signIn_1y06w_1 {
  font-family: var(--tl-font);
  font-size: 12.5px;
  color: var(--tl-text);
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius-pill, 9999px);
  padding: 6px 16px;
  line-height: 1.4;
  white-space: nowrap;
  transition: border-color 150ms ease;
}
._signIn_1y06w_1:hover {
  border-color: var(--tl-border-strong);
}

._menu_1y06w_16 {
  position: relative;
  display: flex;
  align-items: center;
}

._avatar_1y06w_22 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--tl-surface);
  border: 1px solid var(--tl-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tl-font);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tl-text);
  cursor: pointer;
  padding: 0;
}
._avatar_1y06w_22:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tl-accent) 18%, transparent);
}

._dropdown_1y06w_43 {
  position: absolute;
  right: 0;
  top: 40px;
  width: 220px;
  background: var(--tl-surface);
  border: 1px solid var(--tl-border-strong);
  border-radius: var(--tl-radius-chrome, 12px);
  padding: 8px;
  z-index: 2;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}

._packsItem_1y06w_56,
._menuItem_1y06w_57 {
  display: block;
  font-family: var(--tl-font);
  font-size: 13px;
  color: var(--tl-muted);
  padding: 7px 10px;
  border-radius: var(--tl-radius-chrome, 8px);
}
._packsItem_1y06w_56:hover,
._menuItem_1y06w_57:hover {
  color: var(--tl-text);
  background: var(--tl-stage);
}

._divider_1y06w_71,
._rule_1y06w_72 {
  border: none;
  border-top: 1px solid var(--tl-border);
  margin: 4px 0;
}

@media (min-width: 641px) {
  ._packsItem_1y06w_56,
  ._divider_1y06w_71 {
    display: none;
  }
}
._email_1y06w_84 {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--tl-dim);
  padding: 6px 10px 8px;
  border-bottom: 1px solid var(--tl-border);
  margin: 0 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._item_1y06w_96 {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--tl-font);
  font-size: 13px;
  color: var(--tl-muted);
  background: none;
  border: none;
  padding: 7px 10px;
  border-radius: var(--tl-radius-chrome, 8px);
  cursor: pointer;
}
._item_1y06w_96:hover {
  color: var(--tl-text);
  background: var(--tl-stage);
}
._caption_isagl_1 {
  margin: 0 0 var(--ov-s4);
  font-family: var(--ov-grotesque);
  font-size: var(--ov-micro);
  letter-spacing: var(--ov-track-cap);
  text-transform: uppercase;
  color: var(--ov-dim);
}
@charset "UTF-8";
/**
 * StageCoda.module.scss — the coda frame (board `TenthFrame.dc.html`, `.tenth` / `.tin`).
 *
 * Reads the house's `--stage-*` variables only (plan § Tokens): `--stage-accent`, `--stage-ground`,
 * `--stage-text`, `--stage-muted`, `--stage-radius`. The dashed border and the faint accent wash
 * are `core/wall/ui/Ghost.module.scss`'s recipe — the accent mixed toward transparent — at stage
 * weight (1.5px, 60%, as the board draws it), so the coda reads as the wall's ghost, not a second
 * one.
 */
._coda_tbtwj_11 {
  position: relative;
  width: 100%;
  /* The inline aspect-ratio is a minimum: with overflow visible and `min-height: auto` (never set
     it to 0 here), the box's automatic minimum height is its content, so a short frame — a wide
     pack's — grows to fit the action instead of clipping it. */
  border-radius: var(--stage-radius, 16px);
  border: 1.5px dashed color-mix(in srgb, var(--stage-accent) 60%, transparent);
  background: color-mix(in srgb, var(--stage-accent) 4%, var(--stage-ground));
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* One picture, whole and faded — a grid of nine crops read as a patchwork (operator, 2026-09-25). */
._backdrop_tbtwj_26 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.22;
  border-radius: inherit;
  pointer-events: none;
}

._body_tbtwj_37 {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 18px;
  border-radius: inherit;
  /* The board's scrim: the ground, denser at the centre, so the head reads over the picture. */
  background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--stage-ground) 55%, transparent), color-mix(in srgb, var(--stage-ground) 20%, transparent) 70%);
}
@media (min-width: 900px) {
  ._body_tbtwj_37 {
    padding: 32px 36px;
  }
}

._pen_tbtwj_54 {
  width: 22px;
  height: 22px;
  margin: 0 auto 10px;
  display: block;
  color: var(--stage-accent);
}
._pen_tbtwj_54 svg {
  width: 100%;
  height: 100%;
  display: block;
}

._head_tbtwj_67 {
  margin: 0;
  text-align: center;
  color: var(--stage-text);
}

._lead_tbtwj_73 {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--stage-muted);
}

._name_tbtwj_81 {
  display: block;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

._sub_tbtwj_90 {
  margin: 6px 0 16px;
  font-size: 13.5px;
  line-height: 1.45;
  text-align: center;
  color: var(--stage-muted);
}

/* The stage is wider beside the aside: the head scales with it. */
@media (min-width: 900px) {
  ._lead_tbtwj_73 {
    font-size: 14px;
  }
  ._name_tbtwj_81 {
    font-size: 32px;
  }
  ._sub_tbtwj_90 {
    font-size: 15px;
    margin-bottom: 20px;
  }
}
._action_tbtwj_111 {
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}

/* Words going in (board frame C): the pen and the sub-line fold and the name tightens, so field,
   chips and verb sit above a phone keyboard. CSS only — no JS reads focus here.

   The fold is instant; the UNFOLD waits 250ms. A press on the verb (or a chip) blurs the field first —
   WebKit gives a pressed button no focus, so `:focus-within` drops on pointer-down — and an instant
   unfold would reflow the frame between pointer-down and pointer-up, moving the verb out from under
   the press so the click never lands (observed on toile dev, WebKit 390×844, 2026-09-23). Folding
   with animatable properties (height, margin, opacity, font-size) lets the unfold be delayed past
   the click; `display: none` could not be. */
._pen_tbtwj_54,
._sub_tbtwj_90,
._name_tbtwj_81,
._head_tbtwj_67 {
  transition-property: height, margin, opacity, font-size, line-height, max-height;
  transition-duration: 0s;
  transition-delay: 250ms;
}

._sub_tbtwj_90 {
  max-height: 4.5em;
  overflow: hidden;
}

/* Phones only: the fold exists to make room for a keyboard, and a desktop has none — there it would
   only move the frame under the pointer (operator, 2026-09-23). */
@media (max-width: 899px) {
  ._coda_tbtwj_11:focus-within ._pen_tbtwj_54,
  ._coda_tbtwj_11:focus-within ._sub_tbtwj_90,
  ._coda_tbtwj_11:focus-within ._name_tbtwj_81,
  ._coda_tbtwj_11:focus-within ._head_tbtwj_67 {
    transition-delay: 0s;
  }
  ._coda_tbtwj_11:focus-within ._pen_tbtwj_54 {
    height: 0;
    margin-bottom: 0;
    opacity: 0;
  }
  ._coda_tbtwj_11:focus-within ._name_tbtwj_81 {
    font-size: 20px;
  }
  ._coda_tbtwj_11:focus-within ._sub_tbtwj_90 {
    max-height: 0;
    margin: 0;
    opacity: 0;
    font-size: 0;
    line-height: 0;
  }
  ._coda_tbtwj_11:focus-within ._head_tbtwj_67 {
    margin-bottom: 12px;
  }
}
._issue_2esgc_1 {
  background: var(--ov-dusk);
  color: var(--ov-ivory);
  font-family: var(--ov-grotesque);
  font-size: var(--ov-body);
  line-height: var(--ov-lh-body);
}
._issue_2esgc_1 main a {
  color: var(--ov-ivory);
  text-decoration: underline;
  text-decoration-color: rgba(180, 113, 76, 0.7);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
._issue_2esgc_1 main a:hover {
  color: var(--ov-ember-hover);
  text-decoration-color: var(--ov-ember-hover);
}
._issue_2esgc_1 main a.ov-btn {
  text-decoration: none;
}
._issue_2esgc_1 main a.ov-btn--primary {
  color: var(--ov-on-ember);
}
._issue_2esgc_1 figure {
  margin: 0;
}
._issue_2esgc_1 p {
  margin: 0;
  text-wrap: pretty;
}
._issue_2esgc_1 h1, ._issue_2esgc_1 h2, ._issue_2esgc_1 h3, ._issue_2esgc_1 h4 {
  margin: 0;
  text-wrap: balance;
}

._issue_2esgc_1 > header {
  position: static;
}

._section_2esgc_41, ._terms_2esgc_41, ._packs_2esgc_41, ._spread_2esgc_41, ._toc_2esgc_41 {
  border-top: 1px solid var(--ov-line);
}

._display_2esgc_45, ._faq_2esgc_45 dt, ._card_2esgc_45 h3, ._h2_2esgc_45, ._num_2esgc_45, ._n_2esgc_45, ._toc_2esgc_41 h2, ._h1_2esgc_45 {
  font-family: var(--ov-display);
  font-style: italic;
  font-weight: 500;
}

._figcap_2esgc_51, ._spread_2esgc_41 figcaption {
  font-size: var(--ov-small);
  line-height: 1.5;
  color: var(--ov-ash);
  margin-top: var(--ov-s3);
}

._plate_2esgc_58 {
  display: block;
  overflow: hidden;
  background: var(--ov-panel);
  border: 1px solid var(--ov-line);
  border-radius: var(--ov-radius-art);
  transition: border-color var(--ov-dur-3) var(--ov-ease);
}
._plate_2esgc_58 img {
  display: block;
  width: 100%;
  aspect-ratio: 2/3;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform var(--ov-dur-4) var(--ov-ease);
}
._plate_2esgc_58:hover {
  border-color: var(--ov-line-strong);
}
._plate_2esgc_58:hover img {
  transform: scale(1.03);
}

._cover_2esgc_80 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  height: calc(100svh - var(--ov-header-h));
  min-height: 520px;
  max-height: 1000px;
}

._coverTxt_2esgc_88 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--ov-s6);
  padding: var(--ov-s7) var(--ov-gutter);
}

._h1_2esgc_45 {
  font-size: min(var(--ov-display-1), 11svh);
  line-height: 0.9;
  letter-spacing: -0.015em;
}

._coverTxt_2esgc_88 ._deck_2esgc_102 {
  margin-top: var(--ov-s6);
  max-width: 18em;
}

._ctas_2esgc_107 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ov-s4) var(--ov-s6);
  margin-top: var(--ov-s7);
}

._coverFig_2esgc_115 {
  position: relative;
  display: flex;
  min-height: 0;
}
._coverFig_2esgc_115 ._plate_2esgc_58 {
  flex: 1;
  border: 0;
  border-radius: 0;
}
._coverFig_2esgc_115 ._plate_2esgc_58 img {
  height: 100%;
  aspect-ratio: auto;
  -o-object-position: center 20%;
     object-position: center 20%;
}
._coverFig_2esgc_115 figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--ov-s8) var(--ov-s5) var(--ov-s4);
  font-size: 13px;
  background: linear-gradient(to top, rgba(23, 18, 16, 0.9), rgba(23, 18, 16, 0));
}

._toc_2esgc_41 {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--ov-s7);
  padding: var(--ov-s9) var(--ov-gutter);
}
._toc_2esgc_41 h2 {
  font-size: var(--ov-display-2);
  line-height: 1;
}
._toc_2esgc_41 ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ov-line);
}
._toc_2esgc_41 li {
  border-bottom: 1px solid var(--ov-line);
}
._toc_2esgc_41 a {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: baseline;
  padding: 16px 0;
  font-size: 20px;
  line-height: 1.3;
  text-decoration: none !important;
}

._n_2esgc_45 {
  font-size: 28px;
  color: var(--ov-dim);
}

._spread_2esgc_41 {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: center;
  padding: var(--ov-s9) var(--ov-gutter);
}
._flip_2esgc_181 > ._spTxt_2esgc_181 {
  order: 2;
}

._num_2esgc_45 {
  font-size: clamp(56px, 6vw, 88px);
  line-height: 1;
  color: var(--ov-dim);
  margin-bottom: 20px !important;
}

._h2_2esgc_45 {
  font-size: var(--ov-display-2);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 28px !important;
}

._spTxt_2esgc_181 p:not(._num_2esgc_45) {
  font-size: var(--ov-body-lg);
  line-height: 1.55;
  max-width: 30em;
}

._spTxt_2esgc_181 p + p {
  margin-top: var(--ov-s4);
}

._wide_2esgc_209 {
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
}

._wide_2esgc_209 > ._spTxt_2esgc_181 {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: end;
  order: 0;
}

._mosaic_2esgc_222 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2px;
}
._mosaic_2esgc_222 figcaption {
  font-size: 13px;
  margin-top: 10px;
}

._strip_2esgc_232 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ov-s3);
}
._strip_2esgc_232 figcaption {
  font-size: 13px;
  margin-top: 10px;
}

._nineFig_2esgc_242 {
  max-width: 560px;
  justify-self: center;
  width: 100%;
}

._nine_2esgc_242 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}

._narrow_2esgc_254 {
  max-width: 380px;
  justify-self: center;
  width: 100%;
}

._editFig_2esgc_260 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ov-s5);
  max-width: 440px;
  width: 100%;
  justify-self: center;
}

._armed_2esgc_270 {
  width: 100%;
  aspect-ratio: 2/3;
}
._armed_2esgc_270 img {
  display: block;
}

._bar_2esgc_278 {
  --wall-bar-w: 100%;
  max-width: 100%;
}

._packs_2esgc_41 {
  padding: var(--ov-s9) var(--ov-gutter);
}

._packsHead_2esgc_287 {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: end;
  margin-bottom: 56px;
}
._packsHead_2esgc_287 ._h2_2esgc_45 {
  margin: 0 !important;
}
._packsHead_2esgc_287 p {
  font-size: var(--ov-body-lg);
  color: var(--ov-ash);
}

._grid_2esgc_302 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 40px 20px;
}

._card_2esgc_45 a {
  text-decoration: none !important;
}
._card_2esgc_45 img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 832/1216;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--ov-radius-art);
  background: var(--ov-panel);
}
._card_2esgc_45 .ov-eyebrow {
  margin-top: 14px;
}
._card_2esgc_45 h3 {
  font-size: 24px;
  line-height: 1.15;
  margin-top: 6px;
}
._card_2esgc_45 p:not(.ov-eyebrow) {
  font-size: var(--ov-small);
  line-height: 1.5;
  color: var(--ov-ash);
  margin-top: 6px;
}

._terms_2esgc_41 {
  padding: var(--ov-s9) var(--ov-gutter);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
}

._faq_2esgc_45 {
  margin: 0 0 var(--ov-s7);
}
._faq_2esgc_45 > div {
  border-top: 1px solid var(--ov-line);
  padding: var(--ov-s5) 0;
}
._faq_2esgc_45 dt {
  font-size: 24px;
  line-height: 1.2;
}
._faq_2esgc_45 dd {
  margin: var(--ov-s3) 0 0;
  font-size: 17px;
  color: var(--ov-ash);
  max-width: 36em;
}

@media (max-width: 720px) {
  ._cover_2esgc_80 {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    max-height: none;
  }
  ._coverFig_2esgc_115 {
    order: -1;
  }
  ._coverFig_2esgc_115 ._plate_2esgc_58 img {
    min-height: 0;
    aspect-ratio: 2/3;
  }
  ._coverFig_2esgc_115 figcaption {
    padding: 48px 18px 14px;
    font-size: 12px;
  }
  ._coverTxt_2esgc_88 {
    padding: 28px 20px 48px;
    gap: 20px;
  }
  ._ctas_2esgc_107 {
    flex-direction: column;
    align-items: stretch;
  }
  ._ctas_2esgc_107 .ov-btn {
    width: 100%;
  }
  ._toc_2esgc_41 {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 56px 20px;
  }
  ._toc_2esgc_41 h2 {
    font-size: 40px;
  }
  ._toc_2esgc_41 a {
    grid-template-columns: 40px minmax(0, 1fr);
    font-size: 18px;
    padding: 15px 0;
  }
  ._n_2esgc_45 {
    font-size: 22px;
  }
  ._spread_2esgc_41, ._wide_2esgc_209 > ._spTxt_2esgc_181, ._packsHead_2esgc_287, ._terms_2esgc_41 {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  ._spread_2esgc_41 {
    padding: 64px 20px;
  }
  ._flip_2esgc_181 > ._spTxt_2esgc_181 {
    order: 0;
  }
  ._wide_2esgc_209 > ._spTxt_2esgc_181 {
    gap: 0;
  }
  ._num_2esgc_45 {
    font-size: 60px;
    margin-bottom: 12px !important;
  }
  ._h2_2esgc_45 {
    font-size: 38px;
    margin-bottom: 18px !important;
  }
  ._spTxt_2esgc_181 p:not(._num_2esgc_45) {
    font-size: 17px;
  }
  ._mosaic_2esgc_222 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  ._strip_2esgc_232 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 8px;
  }
  ._packs_2esgc_41 {
    padding: 64px 20px;
  }
  ._packsHead_2esgc_287 {
    margin-bottom: 32px;
    gap: 12px;
  }
  ._packsHead_2esgc_287 p {
    font-size: 16px;
  }
  ._grid_2esgc_302 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 10px;
  }
  ._card_2esgc_45 h3 {
    font-size: 20px;
  }
  ._card_2esgc_45 p {
    font-size: 13px;
  }
  ._terms_2esgc_41 {
    padding: 72px 20px;
    gap: 0;
  }
  ._faq_2esgc_45 dt {
    font-size: 22px;
  }
}
._stage_11eow_1 {
  position: fixed;
  inset: 0;
  z-index: var(--tl-z-arena);
}

._scrim_11eow_7 {
  position: absolute;
  inset: 0;
  background: rgba(12, 11, 9, 0.82);
}

._esc_11eow_13 {
  position: absolute;
  top: 18px;
  left: 22px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  background: color-mix(in srgb, var(--tl-surface) 92%, transparent);
  border: 1px solid var(--tl-border-strong);
  border-radius: var(--tl-radius-pill, 9999px);
  padding: 7px 15px;
  font-size: 12.5px;
  color: var(--tl-muted);
  font-family: var(--tl-font);
  pointer-events: none;
}

._key_11eow_31 {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tl-dim);
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius-art, 5px);
  padding: 2px 6px;
}

._sep_11eow_42 {
  color: var(--tl-dim);
}

._col_11eow_46 {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  padding: var(--wall-col-top) 16px var(--wall-col-bottom);
  pointer-events: none;
}
._col_11eow_46 > * > * {
  pointer-events: auto;
}

._pictureRegion_11eow_59 {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

._dock_11eow_70 {
  position: relative;
  align-self: center;
  width: var(--wall-bar-w);
  max-width: 90vw;
  margin-top: 14px;
}

._caption_11eow_78 {
  justify-content: center;
  max-width: 92%;
}

._plain_11eow_83 {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tl-muted);
  text-decoration: none;
  transition: color 150ms ease;
}
._plain_11eow_83:is(a):hover, ._plain_11eow_83:is(a):focus-visible {
  color: var(--tl-text);
}

._frameWrap_11eow_96 {
  position: relative;
}

._result_11eow_100 {
  border-radius: var(--tl-radius-art, 4px);
  overflow: hidden;
  background: var(--tl-surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tl-accent) 90%, transparent), 0 0 44px color-mix(in srgb, var(--tl-accent) 28%, transparent), 0 24px 60px rgba(0, 0, 0, 0.6);
  position: relative;
  container-type: inline-size;
}
._result_11eow_100 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

._resultWorking_11eow_115 {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tl-accent) 50%, transparent);
}

._resultScratch_11eow_119 {
  border: 1px dashed color-mix(in srgb, var(--tl-accent) 45%, transparent);
  background: color-mix(in srgb, var(--tl-accent) 4%, transparent);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  color: var(--tl-accent);
}
._resultScratch_11eow_119 span {
  font-family: var(--tl-font);
  font-size: 15px;
  line-height: 1.35;
  max-width: 80%;
}
._resultScratch_11eow_119 ._scratchRule_11eow_138 {
  color: var(--tl-text);
}

._consentSlot_11eow_142 {
  position: absolute;
  bottom: calc(100% + 14px);
  width: var(--wall-bar-w);
  max-width: 90vw;
}

._bar_11eow_149 {
  width: var(--wall-bar-w);
  max-width: 90vw;
  display: flex;
  align-items: center;
  gap: 12px;
  background: color-mix(in srgb, var(--tl-surface) 92%, transparent);
  border: 1px solid var(--tl-border-strong);
  border-radius: var(--tl-radius-container, 16px);
  padding: 10px 10px 10px 18px;
}

._slot_11eow_161 {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

._idChip_11eow_169 {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
}

._idOpen_11eow_176 {
  flex: 1;
  min-width: 0;
  display: flex;
}

._ratioSlot_11eow_182 {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 3px;
  margin: -3px;
}
._ratioSlot_11eow_182::-webkit-scrollbar {
  display: none;
}

._ratioPills_11eow_197 {
  flex: none;
}

._pencil_11eow_201 {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tl-door-border, var(--tl-border-strong));
  border-radius: var(--tl-radius-chrome, 10px);
  background: var(--tl-door-bg, color-mix(in srgb, var(--tl-text) 6%, transparent));
  color: var(--tl-door, var(--tl-text));
  cursor: pointer;
}
._pencil_11eow_201:hover {
  border-color: var(--tl-door, var(--tl-dim));
}
._pencil_11eow_201:focus-visible {
  outline: 1px solid var(--tl-accent);
  outline-offset: 2px;
}

._input_11eow_222 {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  caret-color: var(--tl-accent);
  font-family: var(--tl-font);
  font-size: 14px;
  color: var(--tl-text);
}
._input_11eow_222::-moz-placeholder {
  color: var(--tl-dim);
}
._input_11eow_222::placeholder {
  color: var(--tl-dim);
}
@media (pointer: coarse) {
  ._input_11eow_222 {
    font-size: 16px;
  }
}

._verb_11eow_242 {
  background: var(--tl-accent);
  color: var(--tl-accent-ink);
  font-family: var(--tl-font);
  font-weight: 500;
  font-size: 13.5px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--tl-radius-chrome, 10px);
  white-space: nowrap;
  box-shadow: 0 0 24px color-mix(in srgb, var(--tl-accent) 35%, transparent);
  cursor: pointer;
}

._note_11eow_256 {
  margin: 10px 0 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-align: center;
}