/* ==========================================================================
   legal.css -- Lydd & Yaffa, Inc. policy pages
   Loaded AFTER /css/site.css. Adds nothing to the palette: every color here
   is an Aurora Midnight token already defined in site.css :root. The two wash
   tints below are the only values that are not a bare token reference, and they
   are derived from --fg with color-mix rather than re-entered as RGB numbers.

   These pages run on a fixed daylight ground. The document element carries
   class="legal-page" and data-scheme="light", so site.css's own light-scheme
   token block supplies --bg (ivory), --fg (ink-plum), --fg-2 (ink-plum-2)
   and --gold-text (gold-deep). Nothing is redefined; the aurora is simply
   switched off, because a policy page has to be legible before it is pretty.
   ========================================================================== */

/* ---------- Ground: flat ivory, no mesh, no veil ---------- */
/* Washes: low-alpha tints of the page's own foreground token, mixed at use
   strength. The rgba() line is the pre-color-mix fallback and resolves to the
   same ink-plum; browsers with color-mix take the second declaration. */
.legal-page{
  --wash:rgba(30,20,46,.035);
  --wash:color-mix(in srgb, var(--fg) 3.5%, transparent);
  --wash-2:rgba(30,20,46,.05);
  --wash-2:color-mix(in srgb, var(--fg) 5%, transparent);
}
.legal-page{background:var(--bg)}
.legal-page body{background:var(--bg)}
.legal-page body::before,
.legal-page body::after{display:none;content:none}

/* ---------- Header ---------- */
.legal-nav{background:var(--nav-bg)}
.legal-nav .nav-inner{flex-wrap:wrap;gap:.6rem 1rem;padding-block:.5rem}
/* This tree ships no JavaScript at all and site.css hides nothing at any width:
   the header links stay visible and wrap. Kept as its own rule so the legal pages
   do not silently inherit a future change to the storefront header. */
.legal-nav .nav-links{display:flex;flex-wrap:wrap;margin-inline-start:auto;gap:.2rem 1.1rem}
.legal-nav .nav-links a{font-size:.7rem;letter-spacing:.12em}
@media (min-width:900px){.legal-nav .nav-links{gap:1.4rem}.legal-nav .nav-links a{font-size:.76rem;letter-spacing:.14em}}
@media (max-width:560px){.legal-nav .brand span{display:inline}.legal-nav .brand{font-size:.95rem}.legal-nav .brand img{inline-size:32px;block-size:32px}}

/* ---------- Masthead ---------- */
.legal-masthead{background:var(--bg-floor);border-block-end:1px solid var(--line);padding-block:clamp(2.5rem,6vw,4rem) clamp(1.75rem,4vw,2.5rem)}
.legal-masthead .eyebrow{color:var(--gold-text);margin-block-end:.75rem}
.legal-masthead h1{font-size:clamp(2rem,1.6rem + 2.2vw,3.4rem);max-inline-size:22ch}
/* The rule under the h1 is site.css's .ly-rule — the one coral element on the page, as on
   every other page (Brand Guide v2 §1: exactly one coral per view; a policy page is a view).
   The gold hairline that used to sit here (.legal-rule) left the three policy pages with no
   accent at all; decided 2026-09-06 on the legal-copy review. */
.legal-version{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.02em;color:var(--fg-2);max-inline-size:none;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem}
.legal-standfirst{margin-block-start:1.1rem;max-inline-size:60ch;color:var(--fg-2)}

/* Staging notice -- not part of the legal text; it states the page's status. */
.legal-status{margin-block-start:1.5rem;max-inline-size:66ch;padding:.9rem 1.1rem;border:1px solid var(--line);border-inline-start:2px solid var(--gold-text);border-radius:0 12px 12px 0;background:var(--wash)}
.legal-status p{margin:0;font-family:var(--font-label);font-size:.82rem;line-height:1.6;letter-spacing:.01em;max-inline-size:none;color:var(--fg-2)}
.legal-status b{color:var(--fg);font-weight:600}

/* ---------- Unfilled placeholders ---------- */
/* Deliberately conspicuous. Every one of these is a value the owner supplies
   on the day of publication; none is invented here. */
.tbs{display:inline-block;font-family:var(--font-mono);font-size:.82em;font-weight:600;letter-spacing:.06em;
  color:var(--gold-text);background:var(--wash-2);
  border:1px dashed var(--gold-text);border-radius:4px;padding:.05em .45em;white-space:nowrap}

/* ---------- Layout ---------- */
.legal-main{padding-block-end:clamp(3rem,7vw,5rem)}
.legal-layout{display:grid;gap:2.5rem;padding-block-start:clamp(2rem,5vw,3rem)}
@media (min-width:1000px){
  .legal-layout{grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:3.5rem;align-items:start}
  .legal-toc{position:sticky;inset-block-start:5.5rem;max-block-size:calc(100dvh - 8rem);overflow-y:auto}
}

/* ---------- Contents ---------- */
.legal-toc h2{font-family:var(--font-label);font-weight:600;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2);margin-block-end:.9rem}
.legal-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:.1rem;counter-reset:toc}
.legal-toc li{counter-increment:toc}
.legal-toc a{display:block;padding:.4rem .5rem .4rem 2.2rem;text-indent:-1.7rem;font-family:var(--font-label);font-size:.8rem;line-height:1.45;text-decoration:none;color:var(--fg-2);border-inline-start:1px solid var(--line);border-radius:0 4px 4px 0}
.legal-toc a::before{content:counter(toc) ".";font-family:var(--font-mono);font-size:.78em;color:var(--gold-text);margin-inline-end:.55rem}
.legal-toc a:hover{color:var(--fg);background:var(--wash);border-inline-start-color:var(--gold-text)}
.legal-toc[data-unnumbered] ol{counter-reset:none}
.legal-toc[data-unnumbered] li{counter-increment:none}
.legal-toc[data-unnumbered] a{padding-inline-start:.8rem;text-indent:0}
.legal-toc[data-unnumbered] a::before{content:none}

/* ---------- Document body ---------- */
.legal-body{--measure:68ch;font-size:clamp(1rem,.96rem + .28vw,1.14rem);line-height:1.62;scroll-margin-block-start:6rem}
.legal-body > section{padding-block-start:clamp(2rem,4vw,2.75rem);scroll-margin-block-start:5.5rem}
.legal-body > section + section{border-block-start:1px solid var(--line)}
.legal-body h2{font-size:clamp(1.35rem,1.15rem + .85vw,1.9rem);margin-block-end:1rem;max-inline-size:26ch}
.legal-body h2 .sec-no{font-family:var(--font-mono);font-size:.62em;font-weight:400;color:var(--gold-text);margin-inline-end:.7rem;letter-spacing:.02em}
.legal-body h3{font-size:clamp(1.05rem,1rem + .4vw,1.25rem);margin-block:1.8rem .7rem;color:var(--fg)}
.legal-body h3 .sec-no{font-family:var(--font-mono);font-size:.78em;font-weight:400;color:var(--gold-text);margin-inline-end:.55rem}
.legal-body p{margin-block-end:1.05em}
.legal-body strong{font-weight:700;color:var(--fg)}
.legal-body em{font-style:italic}
.legal-body a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--gold-text);text-underline-offset:.16em}
.legal-body a:hover{text-decoration-color:var(--fg)}
.legal-body ul,.legal-body ol{max-inline-size:var(--measure);margin:0 0 1.15em;padding-inline-start:1.35rem;display:grid;gap:.5rem}
.legal-body li{padding-inline-start:.25rem}
.legal-body li::marker{color:var(--gold-text)}
.legal-body ol{counter-reset:none}
.legal-body hr{border:0;border-block-start:1px solid var(--line);margin-block:2rem}

/* an indented sub-block: the lettered delay cases in Terms 8.3 */
.legal-case{margin:0 0 1.05em;padding-inline-start:1.1rem;border-inline-start:2px solid var(--line);max-inline-size:var(--measure)}
.legal-case:last-of-type{margin-block-end:0}

/* ---------- Tables ---------- */
.table-scroll{overflow-x:auto;margin-block:1.4rem 1.8rem;border:1px solid var(--line);border-radius:10px;-webkit-overflow-scrolling:touch}
.legal-body table{inline-size:100%;border-collapse:collapse;font-size:.92rem;line-height:1.5;min-inline-size:34rem}
.legal-body table.table-narrow{min-inline-size:24rem}
.legal-body caption{caption-side:top;text-align:start;font-family:var(--font-label);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2);padding:.9rem 1rem .3rem}
.legal-body thead th{font-family:var(--font-label);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);text-align:start;vertical-align:bottom}
.legal-body th,.legal-body td{padding:.75rem 1rem;text-align:start;vertical-align:top;border-block-start:1px solid var(--line)}
.legal-body thead th{border-block-start:0;border-block-end:1px solid var(--line-gold)}
.legal-body tbody th{font-weight:600;color:var(--fg)}
.legal-body td .num,.legal-body td .mono,.legal-body th .mono{color:var(--gold-text)}
/* identity table in Terms 1 -- a two-column key/value sheet, no head row */
.legal-body table.sheet{min-inline-size:0}
.legal-body table.sheet th{inline-size:34%;font-family:var(--font-label);font-weight:600;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}

/* ---------- Callouts ---------- */
.legal-lead{font-size:1.08em;line-height:1.5;color:var(--fg)}
.legal-key{margin:0 0 1.4em;padding:1rem 1.15rem;border:1px solid var(--line);border-inline-start:2px solid var(--gold-text);border-radius:0 12px 12px 0;background:var(--wash);max-inline-size:var(--measure)}
.legal-key > :last-child{margin-block-end:0}
.legal-key p{max-inline-size:none}

/* address / contact block set as a plain typed block */
.legal-address{font-style:normal;line-height:1.7;margin-block:0 1.2em}
.legal-address strong{display:block}

/* ---------- Footer ---------- */
.legal-footer{flex:0 0 auto;background:var(--bg-floor);border-block-start:1px solid var(--line-gold);padding-block:clamp(2.25rem,5vw,3rem)}
.legal-footer-nav{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-block-end:1.75rem}
.legal-footer-nav a{font-family:var(--font-label);font-weight:600;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--fg-2);padding-block:.35rem;min-block-size:32px;display:inline-flex;align-items:center}
.legal-footer-nav a:hover,.legal-footer-nav a[aria-current="page"]{color:var(--fg)}
.legal-footer-nav a[aria-current="page"]{border-block-end:1px solid var(--gold-text)}
.legal-identity{display:grid;gap:.75rem 2.5rem;padding-block-start:1.5rem;border-block-start:1px solid var(--line)}
@media (min-width:760px){.legal-identity{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.legal-identity .label{display:block;margin-block-end:.4rem;color:var(--fg-2)}
.legal-identity p{margin:0;font-size:.9rem;line-height:1.65;max-inline-size:46ch;color:var(--fg-2)}
.legal-identity strong{color:var(--fg);font-weight:600}
.legal-identity .mono{color:var(--gold-text);font-size:.86rem}
.legal-fine{margin-block-start:1.5rem;font-size:.8rem;line-height:1.6;color:var(--fg-2);max-inline-size:72ch}

/* ---------- Print ---------- */
@media print{
  .legal-nav,.legal-toc,.skip{display:none}
  /* .legal-status stays: a printed or PDF'd copy is exactly the artifact that
     loses its context, so the sentence saying these terms are not yet in force
     must travel with it. */
  .legal-status{border:1px dashed #000;border-inline-start:1px dashed #000;background:none;break-inside:avoid;page-break-inside:avoid}
  .legal-status p,.legal-status b{color:#000}
  .legal-page,.legal-page body,.legal-masthead,.legal-footer{background:#fff;color:#000}
  .legal-layout{display:block}
  .legal-body{--measure:none;font-size:10.5pt}
  .legal-body > section{break-inside:auto;page-break-inside:auto}
  .legal-body h2,.legal-body h3{break-after:avoid;page-break-after:avoid}
  .table-scroll{overflow:visible;border:0}
  .legal-body a{text-decoration:none}
  .tbs{border:1px dashed #000;color:#000;background:none}
}

/* ---------- Typographic wordmark (no Lydd & Yaffa mark exists yet) ---------- */
.legal-nav .brand{flex-direction:column;align-items:flex-start;gap:.12rem;line-height:1.15}
.legal-nav .brand .wordmark{font-family:var(--font-display);font-weight:700;font-size:1.12rem;letter-spacing:-.01em;color:var(--fg)}
.legal-nav .brand .sub{font-family:var(--font-label);font-weight:600;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-2)}

/* ---------- Sticky rail ---------- */
/* site.css sets body{overflow-x:hidden}. Because html carries overflow-x:clip,
   that declaration is not propagated to the viewport -- it turns <body> into its
   own scroll container, which silently disables position:sticky for everything
   inside it. html's overflow-x:clip already prevents sideways scrolling, so on
   these pages the body clamp is released and the header and contents rail stick
   as intended. Scoped to .legal-page; the rest of the site is untouched. */
.legal-page body{overflow-x:visible}