/* Lauched In — landing block for the hand-built lauchedin.com.
 *
 * THE DOCKET, ON THE NIGHT SHIFT. Same world as the app — ticket stock, one red,
 * condensed caps for lines, mono for every measurement, square corners, no
 * shadows, no gradients, hierarchy by rule weight and inversion — but the stock
 * is inverted: the ink is the ground and the paper is the type. The values are
 * the app family's own dark set, not a new palette invented for this page.
 *
 * TWO STOCKS. The page is printed on ink by default and on paper when the reader
 * asks for it, which is the same control the app carries. It does NOT follow the
 * OS: dark is the design this page committed to, and a light-mode visitor who
 * never touches the toggle should still see the page as it was designed.
 *
 * The whole theme is ten values. `--li-ground/-2/-3`, `--li-ink/-2`, `--li-muted`,
 * `--li-rule/-2`, the accent, and `--li-flip`, which is the stock the one inverted
 * band is printed on — always the opposite of the page, in both directions.
 *
 * Photography is FULL COLOUR. Namespaced .li / --li- so nothing collides with
 * the host page. If you are about to add a border-radius or a drop shadow, you
 * have left the world the app is in. */

.li {
  /* --- night stock, the default ----------------------------------------- */
  --li-ground:   #100f0c;
  --li-ground-2: #191814;
  --li-ground-3: #21201b;
  --li-ink:      #f2f0e9;
  --li-ink-2:    #c4c2b7;
  --li-muted:    #8d8b80;
  --li-rule:     #2f2e28;
  --li-rule-2:   #403e36;
  --li-accent:   #e8514d;
  /* what is legible ON the accent. It is NOT the same role in both stocks:
     #e8514d carries dark text (5.1:1) and white fails on it (3.7:1); the paper
     stock's #c62026 is the other way round. Declared in both blocks, so neither
     is left to a media query. */
  --li-on-accent: #100f0c;
  --li-flip-on-accent: #f7f6f3;
  /* the band's stock, and its ink: always the page's opposite */
  --li-flip:      #f7f6f3;
  --li-flip-ink:  #14140f;
  --li-flip-ink2: #3d3c34;
  --li-flip-muted:#6f6e64;
  --li-flip-rule: #c9c7bd;
  --li-flip-accent:#c62026;
  --li-shot-mat: #1d1d1d;
  --li-cond: 'Archivo Narrow', 'Arial Narrow', 'Helvetica Neue', system-ui, sans-serif;
  --li-body: 'Archivo', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --li-mono: 'Azeret Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --li-shell: min(1180px, 100% - 3rem);

  background: var(--li-ground);
  color: var(--li-ink);
  font-family: var(--li-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* --- day stock. Only on an explicit choice; see the note at the top. ----- */
:root[data-theme="light"] .li {
  --li-ground:   #f7f6f3;
  --li-ground-2: #fffefb;
  --li-ground-3: #efeee9;
  --li-ink:      #14140f;
  --li-ink-2:    #3d3c34;
  --li-muted:    #6f6e64;
  --li-rule:     #dedcd4;
  --li-rule-2:   #c9c7bd;
  --li-accent:   #c62026;
  --li-on-accent: #f7f6f3;
  --li-flip-on-accent: #100f0c;
  --li-flip:      #100f0c;
  --li-flip-ink:  #f2f0e9;
  --li-flip-ink2: #c4c2b7;
  --li-flip-muted:#8d8b80;
  --li-flip-rule: #403e36;
  --li-flip-accent:#e8514d;
  /* the photographs were shot on black; on paper the mat stays their own black
     rather than turning white, or every dish gains a hard rectangle around it */
  --li-shot-mat: #1d1d1d;
}

.li *, .li *::before, .li *::after { box-sizing: border-box; }
.li img { display: block; max-width: 100%; height: auto; }
.li h1, .li h2, .li h3 {
  font-family: var(--li-cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: .012em; text-wrap: balance; margin: 0;
}
.li p { margin: 0; }
.li__shell { width: var(--li-shell); margin-inline: auto; }
/* Mono is measurement here — counts, prices, day names. Never body prose. */
.li__meta {
  font-family: var(--li-mono); font-size: .68rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--li-muted);
  font-variant-numeric: tabular-nums;
}

/* The surfaces the browser draws, themed from the same palette. */
.li ::selection { background: var(--li-accent); color: var(--li-flip); }
.li a:focus-visible, .li button:focus-visible {
  outline: 2px solid var(--li-accent); outline-offset: 3px;
}
.li { scrollbar-color: var(--li-rule-2) var(--li-ground); }

/* ------------------------------------------------------------------ hero --- */
.li-hero { border-bottom: 3px solid var(--li-ink); background: var(--li-ground-2); }
.li-hero__in {
  width: var(--li-shell); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 3.25rem; align-items: center; padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
@media (max-width: 900px) { .li-hero__in { grid-template-columns: 1fr; gap: 2rem; } }

.li-hero__logo { width: clamp(88px, 9vw, 116px); margin-bottom: 1.6rem; }
.li-hero h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.6rem); line-height: .95; letter-spacing: -.008em;
  margin-bottom: 1.15rem;
}
.li-hero h1 span { color: var(--li-accent); }
.li-hero__lede { margin-bottom: 1.9rem; max-width: 40ch; font-size: 1.08rem; color: var(--li-ink-2); }
.li-hero .li__meta { margin-top: 1rem; }

/* Photographs: full colour, square corners, one hairline. On a dark ground a
   hairline is what separates a photograph from the page; a shadow would not. */
.li-shot { margin: 0; }
.li-shot img { border: 1px solid var(--li-rule-2); width: 100%; }
.li-shot figcaption {
  font-family: var(--li-mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--li-muted); margin-top: .6rem;
}

/* ---------------------------------------------------------------- buttons --- */
.li-cta { display: flex; flex-wrap: wrap; gap: .6rem; }
/* ⚠ The guard in the OTHER repo (`app/test/accent.test.ts`) locates this rule by
   searching for its opening line — the FIRST substring match in this file wins.
   Two consequences. **Keep the base rule the first of its kind in the file**: a
   compound selector ending in the same class, placed above, silently becomes what
   the guard asserts on and still passes, on the wrong block. (The paper-stock
   override further down is safe only because it sits after.) And **never write
   that opening line out in a comment** — this note used to quote it verbatim,
   which put a match ahead of the real rule and pointed the guard at prose.
   Raised by the app lane 2026-08-26; the second half was self-inflicted the same
   day and caught before it shipped. */
.li-btn {
  display: inline-block; font-family: var(--li-cond); font-weight: 700;
  text-transform: uppercase; letter-spacing: .025em; font-size: 1rem;
  padding: .78rem 1.5rem; text-decoration: none;
  border: 2px solid var(--li-accent); background: var(--li-accent); color: var(--li-on-accent);
  transition: background-color .12s steps(2), border-color .12s steps(2), color .12s steps(2);
}
/* ADR-120: red means GO. The primary button is the one thing on the page that
   goes, so it wears the accent and hover inverts to ink rather than reaching
   for a second colour. Before this the accent was the HOVER state, which meant
   the live control was the only thing in the viewport not wearing it. */
.li-btn:hover { background: var(--li-ink); border-color: var(--li-ink); color: var(--li-ground); }
/* The one-off line, inside the primary button rather than beside it.
   Logan, 2026-08-28: make it obvious on the landing page that you can buy a few
   meals without subscribing — "in the box where it says start your box, have it
   say in brackets".
   ⚠ It is a CLAUSE, not a second button: both go to /signup, which carries the
   box form and the single-meal form on one page, so one control is honest. It is
   set smaller so the button still reads START A BOX first — a bracket at full
   size makes the CTA two equal instructions and the visitor picks neither.
   ⚠ **No opacity.** The first version faded it to .82 and MEASURED 4.3:1 on the
   dark stock's accent, under the 4.5 floor, on text at 13px. Size carries the
   hierarchy on its own; the fade only cost contrast. */
.li-btn__or { font-size: .82em; letter-spacing: .015em; }

.li-btn--quiet { background: none; color: var(--li-ink); border-color: var(--li-rule-2); }
.li-btn--quiet:hover { background: var(--li-ink); color: var(--li-ground); border-color: var(--li-ink); }

/* ----------------------------------------------------------------- reasons -- */
/* Ruled lines, not cards, and not numbered — these are three reasons, not three
   steps, and numbering them would claim an order the content does not have. */
.li-reasons { border-top: 2px solid var(--li-ink); }
.li-reason { border-bottom: 1px solid var(--li-rule); padding-block: 1.9rem; }
.li-reason h3 { font-size: clamp(1.35rem, 2.7vw, 1.85rem); margin-bottom: .45rem; }
.li-reason p { max-width: 66ch; color: var(--li-ink-2); }

/* ------------------------------------------------------------ the paper --- */
/* The page inverts to paper exactly once. Everything inside re-reads its colours
   from the light role of the same tokens. */
.li-paper { background: var(--li-flip); color: var(--li-flip-ink); }
.li-paper h2 { color: var(--li-flip-ink); }
.li-paper p { color: var(--li-flip-ink2); }
.li-paper .li__meta { color: var(--li-flip-muted); }
.li-paper__in {
  width: var(--li-shell); margin-inline: auto;
  padding-block: clamp(3rem, 6vw, 5rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: 3.25rem; align-items: center;
}
@media (max-width: 900px) { .li-paper__in { grid-template-columns: 1fr; } }
/* No photograph in this band any more: the brother is off the page entirely,
   and the band is stronger as one statement across the full measure. */
.li-paper__in--solo { grid-template-columns: minmax(0, 1fr); }
.li-paper__in--solo h2 { max-width: 20ch; }
.li-paper h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1; margin-bottom: 1rem; }
.li p.li-paper__lede { max-width: 54ch; margin-bottom: 1.15rem; }
.li p.li-paper__lede + .li-cta { margin-top: 1.8rem; }
.li-paper .li-btn { background: var(--li-flip-accent); border-color: var(--li-flip-accent); color: var(--li-flip-on-accent); }
.li-paper .li-btn:hover { background: var(--li-flip-ink); border-color: var(--li-flip-ink); color: var(--li-flip); }
.li-paper .li-shot img {
  border-color: var(--li-flip-rule);
  /* the stall photograph is portrait; cropped to landscape it sits level with
     the column beside it instead of towering over a third of a page of nothing */
  aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 38%;
}
.li-paper .li-shot figcaption { color: var(--li-flip-muted); }

/* -------------------------------------------------------------------- food -- */
.li-sec { padding-block: clamp(2.75rem, 5.5vw, 4.5rem); }
.li-sec__head { border-bottom: 2px solid var(--li-ink); padding-bottom: .85rem; margin-bottom: 1.9rem; }
.li-sec h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.li-sec__lede { margin-top: .65rem; max-width: 62ch; color: var(--li-ink-2); }

/* THREE dishes. A menu is what /menu is for. */
.li-three { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .li-three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .li-three { grid-template-columns: 1fr; } }
.li-dish { margin: 0; }
/* `cover` cropped a quarter off the tub — the sources vary from 1.57 to 0.99
   after the black backdrop is trimmed, so no single frame ratio fits them all.
   `contain` on the page's own ground fits the whole dish inside a frame that
   still lines up across the row; the letterboxing is invisible because the
   photographs were shot on black. */
.li-dish img {
  border: 1px solid var(--li-rule-2);
  /* square, so the portrait crops fill nearly the whole frame instead of being
     letterboxed down to two thirds of it. The dish is the point of the card. */
  aspect-ratio: 1 / 1; object-fit: contain; width: 100%;
  /* sampled off the corners of the three photographs themselves — rgb(36,36,36),
     rgb(27,27,27), rgb(26,26,26) — so the letterboxing does not show as a band
     lighter or darker than the backdrop the food was shot on */
  background: var(--li-shot-mat);
}
/* The app's own photographs (LIN-133) are the untrimmed studio frame, 3:4 with the
   dish in the middle band (lit region y 0.15-0.86 on every one measured). `cover`
   in the square keeps y 0.125-0.875, so the whole dish shows at full size. */
.li-dish img.li-dish__full { object-fit: cover; }
.li-dish h3 { font-size: 1.12rem; margin-top: .85rem; }
/* A dash, never a number. No macro is printed that Lauchlan has not given us. */
.li-dish__macros { margin-top: .35rem; }

/* ------------------------------------------------------------------- strip -- */
.li-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .8rem; }
@media (max-width: 760px) { .li-strip { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.li-strip img {
  border: 1px solid var(--li-rule-2); aspect-ratio: 4/3; object-fit: cover; width: 100%;
}

/* ------------------------------------------------------------------- foot --- */
.li-foot { border-top: 2px solid var(--li-ink); padding-block: 1.7rem 3rem; }
.li-foot a { color: var(--li-accent); }

/* ------------------------------------------------------------------ motion -- */
/* One authored moment: the hero settles in two steps, the way the app's own
   motion does — it steps, it never eases. Everything is visible by default, so
   a reader with reduced motion loses nothing but the settle. */
@media (prefers-reduced-motion: no-preference) {
  .li-hero__logo, .li-hero h1, .li-hero__lede, .li-hero .li-cta,
  .li-hero .li__meta, .li-hero .li-shot { animation: li-settle .34s steps(2) both; }
  .li-hero h1        { animation-delay: .05s; }
  .li-hero__lede     { animation-delay: .10s; }
  .li-hero .li-cta   { animation-delay: .15s; }
  .li-hero .li__meta { animation-delay: .20s; }
  .li-hero .li-shot  { animation-delay: .12s; }
}
@keyframes li-settle { from { opacity: 0; transform: translateY(9px); } }

/* ------------------------------------------------------------------ stock --- */
/* The same control the app carries, in the same words. It is fixed rather than
   in a header because this block has no header — it is pasted into somebody
   else's page and cannot assume one exists. */
.li-stock {
  position: fixed; top: 1rem; right: 1rem; z-index: 40;
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--li-mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--li-muted);
  background: var(--li-ground); border: 1px solid var(--li-rule-2);
  padding: .55rem .7rem; cursor: pointer;
}
.li-stock:hover { color: var(--li-ink); border-color: var(--li-ink); }
.li-stock:focus-visible { outline: 2px solid var(--li-accent); outline-offset: 3px; }
.li-stock svg { width: 1em; height: 1em; flex: none; }
:root[data-theme="light"] .li-stock svg .li-stock__rays { opacity: 1; }
.li-stock svg .li-stock__rays { opacity: 0; }