/* ═══════════════════════════════════════════════════════════════════════════
   meridian.css — STAGE ONE of the Meridian transition: PALETTE and GROUND.
   Laura, 2026-09-05.

   Jon, same day, on the exploration at tools/laura/explorations/meridian/:
   "I love the meridian coloring much better than what we have going, let's
   start transitioning over to that design."

   WHAT THIS FILE IS
   A token layer. It is loaded AFTER site.css and after index.html's own
   <style>, so every rule here wins on source order and nothing in either of
   those files had to be edited to make it. Removing one <link> puts the page
   back exactly where it was — that is the whole point of doing stage one this
   way rather than rewriting site.css while another session is editing it.

   Stage one is the homepage only. /plans/, /templates/ and /signup.html link
   the same site.css, so stage two is this same file linked from their heads
   (through their generators — /plans/ and /templates/ are GENERATED) and then
   folded into site.css once, when the shared tree is still.

   THE PALETTE, and where every value comes from
   Meridian's own system, measured off meridian-wf-template.webflow.io's CSS
   variables on 2026-09-05, is FIVE values and ONE chroma: two darks, two
   lights, one brand amber. Ours is the same shape, tinted to our own mark:

     ink     #14100E   warm near-black. Warm, NOT navy — the old --navy #16233F
                       was a blue, and it fought both the mark's blue terminal
                       and every piece of work shown on the page.
     paper   #FBF7F1   the card / raised value
     sand    #EFE8DF   the page ground
     stone   #EFE8DF→#E2D9CC  the band value and the hairline
     amber   #F09A16   the one accent. Derived from the mark itself: #FBA002 is
                       10.1% of c-mark-square.png's opaque pixels by median-cut,
                       its second-largest colour after the blue. So the accent
                       is the logo's, not Meridian's, even though they land
                       close.

   Why a chromatically empty ground: this page is a gallery of OTHER PEOPLE'S
   colourful work — FEAST is magenta, ATLAS green, SAY YES coral. The purple
   field competed with every one of them. A neutral ground lets the work be
   the colour, and puts the full spectrum in exactly one place: the mark.

   CONTRAST, MEASURED (sRGB, WCAG 2.1), tools/laura or a 12-line python — none
   of these is eyeballed and none was carried over from the old sheet:
     ink #14100E on paper #FBF7F1 ........ 17.72   AA
     body #3D3530 on paper ............... 11.24   AA
     muted #5A5049 on paper ...............  7.35   AA
     muted on sand #EFE8DF ................  6.45   AA
     muted on shell #F4EEE5 ...............  6.80   AA
     sand #EFE8DF on ink ................. 15.56   AA
     on-dark-2 #B9AFA3 on ink .............  8.76   AA
     ink on amber #F09A16 .................  8.41   AA   ← every CTA label
     amber on ink .........................  8.41   AA   ← accent on dark bands
     ochre #96590A on paper ...............  5.27   AA   ← accent on LIGHT grounds
     ochre on sand / shell ............ 4.63 / 4.88  AA
     goldlight #F5B84A on ink ............ 10.66   AA   (house mark on dark)

   THE OCHRE IS NOT A SECOND ACCENT. Amber #F09A16 on cream measures 2.2:1 and
   cannot carry text or a 2px icon stroke there; Meridian never puts its amber
   on a light ground as anything but a filled button. The old sheet had the
   same problem with coral (#FF7A4D on cream, ~2.9:1) and shipped it. So the
   accent has two VALUES — amber where the ground is dark or the accent is a
   fill, ochre where it is text or a stroke on a light ground — and one hue.
   The token names below are the OLD names (--navy, --coral, --hot …) because
   site.css and index.html consume them by those names; renaming them is stage
   two's job, when the sheet is folded. Read --navy as "ink" and --coral as
   "accent on light" until then.

   THE GROUND
   The hero ground is app/shots/v2/art-dark-desk.webp, referenced in place.
   Provenance: PROVENANCE.json, "generated", fal-ai/gpt-image-2, 2k medium,
   2560×1440 master archived untouched as
   ~/Yellow8_Archive/2026-08-22_crevano-site-redesign/dark-band-desk-c.png with
   its sidecar (content-matched 2026-09-05, mean abs diff 0.18 against 31.2 for
   the next candidate). Rights: internal-only, which is the correct status for
   marketing furniture on our own page — we are the end user here, not the
   supplier, and the file is never offered to a subscriber. Nothing new was
   generated for this stage and nothing cost anything.

   Why the type moved LEFT with the picture: measured on the photograph, the
   left half is under 0.03 luminance everywhere and the lit sheet occupies the
   right half at 0.3–0.8 (99th percentile, 12×8 grid). Centred cream type would
   have straddled the sheet edge, and holding it there needs a scrim at ~.85,
   which turns a photograph into a dark rectangle with a picture faintly
   behind it — Rosa's exact objection on the exploration's own first rounds.
   Left-aligned type over the picture's own darkness needs only Meridian's
   .72/.44/.02 ramp, measured there at a worst-column 5.79:1 at 1440 and
   6.16:1 at 390. The composition is the ground's, not a taste change.

   What did NOT move, on purpose: radii (still pills), the type scale, the nav
   (still the sticky bar, not the floating pill), section rhythm, the chip row,
   and the studio plinth. Those are layout, they are stage three, and they need
   review — this file is the cheap, reversible, visible piece Jon named.
   ═════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── grounds ── */
  --paper:#FBF7F1;
  --shell:#F4EEE5;
  --sand:#EFE8DF;
  --card:#FFFFFF;
  --navy:#14100E;        /* read: ink */
  --navy-d:#14100E;      /* the close band and the footer are ONE field — see
                            index.html's .close note; a 6-value step reads as
                            banding, so both stay on the one ink */

  /* ── ink ── */
  --body:#3D3530;
  --muted:#5A5049;
  --on-dark:#EFE8DF;
  --on-dark-2:#B9AFA3;

  /* ── lines ── */
  --line:#E2D9CC;
  --line-2:#EBE3D7;
  --line-dark:rgba(239,232,223,.14);

  /* ── accent: one hue, two values ── */
  --coral:#96590A;       /* read: accent on LIGHT grounds (text, strokes) */
  --tang:#F09A16;        /* read: amber */
  --hot:#F09A16;         /* was a coral→tangerine gradient; every consumer of it
                            takes a plain colour just as happily */
  --brandgold:#96590A;   /* house mark on light: 5.27 on paper (the old #A2660F
                            measures 4.43 on the new paper — under AA) */
  --goldlight:#F5B84A;   /* house mark on dark */

  /* ── the dark field: retired. body.home .hero paints the photograph below ── */
  --field:#14100E;
  --field-hue:#EFE8DF;

  /* shadows stay warm; the old ones were already (30,22,10)-based */
}

::selection{background:#F6D9A8;color:#14100E}
:focus-visible{outline-color:#D8850B}

/* ── buttons: flat amber, ink label. No gradient anywhere on the site now ── */
.cta{background:#F09A16;color:#14100E;
  box-shadow:0 1px 2px rgba(20,16,14,.18),0 10px 24px rgba(240,154,22,.22)}
.cta:hover{background:#E8900F;
  box-shadow:0 2px 4px rgba(20,16,14,.20),0 16px 34px rgba(240,154,22,.30)}
.cta.sm{box-shadow:0 1px 2px rgba(20,16,14,.16),0 6px 14px rgba(240,154,22,.18)}
.ghost{color:#14100E;border-color:#D6CBBB;background:rgba(255,255,255,.6)}
.ghost:hover{border-color:#B9AC99;background:#fff}

/* ── emphasis inside headings: ochre on light, amber on dark. The base rule
   clips --hot to the text; only the fill changes here.
   background-COLOR, never the shorthand: `background:` resets background-clip
   to border-box and the emphasised word becomes a solid rectangle. That
   shipped in the first render of this file — "Free to start. ▇ when you need
   the print file." — and only the picture showed it. ── */
h1 em,h2 em,.hot-text{background-color:#96590A}
.on-dark h1 em,.on-dark h2 em,.on-dark .hot-text{background-color:#F09A16}

/* ── the lifted-for-dark coral, wherever index.html hard-coded it ── */
.on-dark .rowtext .num{color:#F09A16}
.on-dark .rowlist svg{stroke:#F09A16}
.capstrip .ic svg .a{stroke:#F09A16}
.wallgrid figure{background:#14100E}
.plinth figcaption{color:#5A5049}

/* ═══ THE HOME HERO — photograph as ground ═══════════════════════════════ */
body.home .hero{background:#14100E;
  /* site.css sets the top padding to clear the header; the photo band owns it
     now, so the section's own is zero and the band's includes the header. */
  padding-top:0}
/* THE FOLD IS A BUDGET (fix 2, 2026-09-05). At 1440x900 the header is 72px,
   the headline block is ~450px, and every px of padding around it is a px
   of product pushed out of the first screen. Measured before: hero-top
   ended at y=687 and the studio shot began at y=802 -- 97px of toolbar in
   the fold; on the phone the shot began at y=914 and the fold ended at
   the tick list. So: the top pad shrinks from 92 to 64 max, the bottom pad
   from 120 to 56 max, and the chip row moves under the studio (index.html).
   The headline keeps its size; nothing in the type scale moved.
   SECOND PASS, same day (Rosa: "the product is not in the fold at any
   width", Jon: "fix it"). Padding could not do it: the still is 659px tall
   at 1440 and the header 72, so NO stack above it fits in 900 -- the
   readout in the app's status bar was always going to be a screen away.
   From 1024 up the hero is therefore two columns (see THE CLAIM BESIDE
   THE PRODUCT, end of file); these pads now govern the stacked phone and
   tablet hero only, and they are tighter still: 28 top, 24 bottom. */
body.home .hero .hero-top{position:relative;
  padding-top:calc(clamp(24px,3.5vw,40px) + var(--hdrh,84px));
  padding-bottom:clamp(24px,3vh,40px)}
body.home .hero .hero-media{position:absolute;inset:0;overflow:hidden;z-index:0;
  background:#14100E}
/* THE CROP IS A PLACEMENT, NOT A COVER (fix 1, 2026-09-05). Rosa's rule: a
   backdrop photograph is cropped so its emptiest, darkest part sits under the
   text. `object-fit:cover` at 60% 40% put the lit sheet's apex a few px from
   "true." and ran the paragraph's first two lines across its edge — measured
   with the type hidden, 4.05:1 and 4.39:1 under the 4.5 body floor, with a
   hot spot of L99 0.12 beside the headline.
   So the picture is placed explicitly: 160% of the box wide, its left edge
   1.67% outside the frame, 10px of its top hidden (the -0.69vw). Found by
   search over (scale, offset) against the MEASURED line boxes with a 60px
   inflation, including the header band: the highest pre-scrim luminance under
   any text or control is 0.030, the sheet's apex lands at (863,508) — 72px
   clear of the nearest box — and the sheet enters as a CORNER in the lower
   right, ~10% of the frame, with the laptop and the lamp's warmth kept at the
   top right so it reads as a desk and not as a grey triangle. The two
   candidates that showed more sheet both put the laptop's rim highlight
   behind the nav links (L 0.41 and 0.47); the one with the apex beside the
   headline made the featureless field the largest bright form again.
   tools/laura/_meridian-s2/crop_search.py and crop_eval.py are the search;
   hero_fold.mjs + hero_ground.py are the after-measurement.
   `height:auto` and `max-width:none` are load-bearing: site.css's img reset
   plus the width/height attributes would otherwise hand back a wrong-shaped
   box (field note, 2026-09-05). */
body.home .hero .hero-media img{position:absolute;left:-1.67%;top:-0.69vw;
  width:160%;height:auto;max-width:none;object-fit:fill;object-position:0 0}
/* Two ramps. The second lands on SOLID ink at 0%, so the band below — the
   studio and the chips — meets the photograph with no seam. It is shorter
   than it was (7%/30% instead of 10%/44%): the sheet corner now lives in the
   bottom fifth of the frame and the old ramp took it to L≈0.17 before the
   eye found it. Nothing of the type sits in the bottom fifth. */
body.home .hero .hero-media::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(20,16,14,.72) 0%,rgba(20,16,14,.44) 40%,
                    rgba(20,16,14,.02) 74%),
    linear-gradient(to top,#14100E 0%,rgba(20,16,14,.88) 7%,
                    rgba(20,16,14,0) 30%)}
body.home .hero .hero-top > .wrap{position:relative;z-index:1;text-align:left}
body.home .hero .hero-bottom{position:relative;z-index:1}

/* type over the picture: cream, full value, both lines. The claim line is not
   allowed to be dimmer than the setup line (Rosa, 2026-09-05, greyscale). */
body.home .hero h1.ask{color:#EFE8DF;max-width:16ch;text-shadow:none;
  letter-spacing:-.03em}
body.home .hero h1.ask .line1{background:none;color:#EFE8DF;
  -webkit-text-fill-color:#EFE8DF}
body.home .hero h1.ask em{color:#EFE8DF;-webkit-text-fill-color:#EFE8DF}
body.home .hero .lede{margin-inline:0;max-width:44ch;color:rgba(239,232,223,.86)}
body.home .hero .stack-cta{justify-content:flex-start}
body.home .hero .reassure{justify-content:flex-start;color:rgba(239,232,223,.82)}
body.home .hero .reassure span{color:rgba(239,232,223,.86)}
body.home .hero .reassure svg{stroke:#F09A16}

body.home .hero .cta{background:#F09A16;color:#14100E;
  box-shadow:0 1px 2px rgba(0,0,0,.28),0 14px 34px rgba(240,154,22,.28)}
body.home .hero .cta:hover{background:#E8900F;
  box-shadow:0 2px 4px rgba(0,0,0,.30),0 18px 40px rgba(240,154,22,.36)}
body.home .hero .ghost{color:#EFE8DF;border-color:rgba(239,232,223,.55);
  background:rgba(20,16,14,.30)}
body.home .hero .ghost:hover{border-color:#EFE8DF;background:rgba(20,16,14,.5)}

/* ═══ THE STUDIO LOOP — a video over the still, never instead of it ══════
   index.html's loader gives #heroLoop its src after load and adds .on when
   it reports `playing`; until then it is transparent and the still is what
   is on screen. inset:0 + object-fit:cover keeps it inside the still's box
   exactly (2240x1368 in a 2240x1369 box: the half-pixel is covered, never a
   seam). Reduced motion and the phone are ALSO settled here, not only in the
   script: a stylesheet gate holds when a script does not run, and the still
   is the correct picture in both cases (see the loader's comment for why the
   phone gets the still). */
body.home .plinth.collage .loopwrap{position:relative}
body.home .plinth.collage .loopwrap video{position:absolute;inset:0;width:100%;height:100%;
  display:block;object-fit:cover;border-radius:14px;opacity:0;pointer-events:none;
  transition:opacity .5s ease}
body.home .plinth.collage .loopwrap video.on{opacity:1}
@media (prefers-reduced-motion:reduce){
  body.home .plinth.collage .loopwrap video{display:none}
}
@media (max-width:759.98px){
  body.home .plinth.collage .loopwrap video{display:none}
}

/* the band under the picture: the studio, then the chips, on ink. The
   plinth's own margin-top (index.html: clamp(40px,5vw,68px)) was 68px of
   ink between the photograph and the product; 20px is enough to read as a
   seam and returns the rest to the fold. */
body.home .hero .hero-bottom .plinth.collage{margin-top:16px}
body.home .hero .hero-bottom .catrow{margin-top:clamp(20px,3vw,32px);justify-content:flex-start}
.cat{color:#EFE8DF;background:rgba(239,232,223,.08);
  border-color:rgba(239,232,223,.22)}
.cat:hover{background:rgba(239,232,223,.16)}
.cat svg{stroke:#EFE8DF}
body.home .plinth.collage{background:#241E1A;border-color:rgba(239,232,223,.14);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
/* the readout is the evidence, so it carries the higher value of the two */
body.home .plinth.collage figcaption{color:rgba(239,232,223,.72)}
body.home .plinth.collage figcaption b{color:#EFE8DF}

/* header over the picture */
body.home header.site:not(.stuck) .navlinks a,
body.home header.site:not(.stuck) .brand .name{color:#EFE8DF}
body.home header.site:not(.stuck) .brand .house{color:#F5B84A}
@media(max-width:839.98px){
  body.home header.site:not(.stuck) .navtog{color:#EFE8DF}
}

/* the phone: the scrim is a vertical band over the type, released in the
   bottom fifth so the picture still has somewhere to be a picture; the crop
   moves the picture's own dark passage under the paragraph. Both values are
   the exploration's, measured there at a worst column of 6.16:1. */
@media(max-width:760px){
  /* THE PHONE HAS NO ROOM FOR THE SHEET, and the search says so rather than
     me: the type spans the full column from y≈106 to y≈630 of a 672px box,
     so the only placements with every line off the sheet need the picture
     ≥3.07x the column wide — and at that scale the sheet leaves the frame.
     Below that scale the sheet ran behind the paragraph's lines 2–4 and the
     outline button's top edge (2.99:1, 13% of its length under floor). So
     the phone shows the picture's left third — the stone and the laptop's
     edge — and the studio shot 20px below it is the bright thing. The
     photograph is a ground here, not a subject. */
  body.home .hero .hero-media img{width:310%;left:0;top:0}
  body.home .hero .hero-media::after{
    background:
      linear-gradient(180deg,rgba(20,16,14,.54) 0%,rgba(20,16,14,.48) 34%,
                      rgba(20,16,14,.44) 70%,rgba(20,16,14,.86) 92%,#14100E 100%),
      linear-gradient(100deg,rgba(20,16,14,.28) 0%,rgba(20,16,14,.12) 55%,
                      rgba(20,16,14,0) 100%)}
}
@media(max-width:559px){
  /* the reassure grid and the chip grid hug the page's left edge, which is
     now the hero's one axis */
  body.home .hero .reassure{margin-inline:0}
  body.home .hero .catrow{margin-inline:0}
}

/* ═══ THE CLAIM BESIDE THE PRODUCT (2026-09-05, second fold pass) ════════
   Arithmetic first: at 1440x900 the still is 1078x659 under a 72px header,
   so a stacked hero has 900-72-659-46(caption)-16 = 107px for the headline,
   lede, two buttons and the tick row. That is not a padding problem and no
   pad can solve it; measured after the first pass the still entered at
   y=643 (28.5% of the fold) with its readout at y=1300. So from 1024 up
   the section is a grid: the claim in a 4.6fr column on the left, the
   studio, its readout and then the chips in an 8fr column on the right,
   both starting under the header. At 1440 the still is ~805px wide and
   ~490px tall, and the WHOLE of it -- toolbar, page, status-bar readout and
   the caption's 300 ppi -- sits inside 900. The loop plays where it can be
   seen, which is the only reason it exists.
   The photograph becomes the ground of the whole section, not of the top
   band: .hero-top goes position:static here so .hero-media's inset:0
   resolves against the section (the containing block moves; nothing in the
   markup does). At 160% width the picture is ~1296px tall at 1440 and
   covers the ~800px section; the lit sheet's apex at (863,508) now sits
   UNDER the plinth, which is the darkest thing that could sit over it.
   Type ground re-measured after: hero_fold.mjs r8post + hero_ground.py.
   The headline steps down from 7vw to 4.3vw because its column is 460px,
   not 1080: two lines at 62px, three or fewer levels, same face. The lede's
   44ch cap is the column's own measure now. Below 1024 nothing here applies
   and the stacked hero above stands. */
@media(min-width:1024px){
  body.home .hero{position:relative;display:grid;
    grid-template-columns:minmax(360px,5fr) minmax(0,8fr);
    column-gap:clamp(32px,3.2vw,48px);align-items:center;
    padding-top:calc(clamp(32px,3.6vw,52px) + var(--hdrh,84px));
    padding-bottom:clamp(32px,3.4vw,48px);
    padding-inline:max(var(--gut),calc((100% - 1600px)/2))}
  body.home .hero .hero-top{position:static;padding:0;min-width:0}
  body.home .hero .hero-top > .wrap{max-width:none;padding:0;margin:0}
  body.home .hero .hero-bottom{max-width:none;padding:0;margin:0;min-width:0}
  body.home .hero .hero-bottom .plinth.collage{margin-top:0}
  body.home .hero h1.ask{font-size:clamp(2.6rem,4.3vw,3.9rem);max-width:12ch}
  body.home .hero .hero-bottom .catrow{margin-top:clamp(16px,1.6vw,22px)}
  /* The section is ~700-800px tall now and the picture's lit sheet sits in
     its lower right: at 1440 the plinth covers it, at 1024 the corner came
     out beside the chips as the grey wedge Rosa already killed once. The
     bottom ramp therefore starts at mid-section here (55% instead of 30%),
     so everything under the plinth's foot is on ink; the diagonal is
     unchanged and the lamp's warmth at the top right survives. */
  body.home .hero .hero-media::after{
    background:
      linear-gradient(100deg,rgba(20,16,14,.72) 0%,rgba(20,16,14,.44) 40%,
                      rgba(20,16,14,.02) 74%),
      linear-gradient(to top,#14100E 0%,rgba(20,16,14,.94) 12%,
                      rgba(20,16,14,.70) 32%,rgba(20,16,14,0) 55%)}
}