/* ============================================================================
   Legal Eagle Practice Companion — bealegaleagle.com
   "Advance Sheet"

   An advance sheet is the paperbound pamphlet a court issues before the bound
   volume: authoritative, professionally set, explicitly provisional, and made
   to sit beside the permanent reporter rather than replace it. That is this
   product's exact argument, so it is the page's form.

   THREE RULES THIS FILE OBEYS

   1. There is no grey. Every neutral is warm — bone, oat, stock, brown-black.
      The colour comes from the product itself: the brass is the app's own
      timer Start button (#C9A227, a named brand token in App.xaml) and the
      oxblood descends from its deadline colour (#A32020).

   2. Brass has THREE tokens and they are NOT interchangeable. --gilt fills
      only; --brass-rule marks only; --brass-text is the only one that may be
      a word on light stock. Collapsing them fails WCAG AA immediately.

   3. Components never name a ground colour. They name a ROLE (--fg, --line,
      --mark). Bands rebind roles, so a caption cannot silently fail contrast.

   The page is LIGHT and does not follow prefers-color-scheme, deliberately.
   The screenshots are of a light Windows app; a dark wrapper around light
   plates reads as two products. Exactly one band on the page is dark, and it
   is given to the disclaimer rather than to a call to action.
   ========================================================================= */

:root {
    color-scheme: light;               /* never auto-darkened by the browser */

    /* ── MEASURE ──────────────────────────────────────────────────────── */
    --shell:      1180px;
    --shell-wide: 1420px;
    --gutter:     clamp(1.25rem, 4vw, 2.5rem);
    --rail:       7.5rem;

    /* ── TYPE STACKS ──────────────────────────────────────────────────── */
    --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino,
             "Book Antiqua", Georgia, "Times New Roman", serif;
    --sans:  "IBM Plex Sans", "Segoe UI", -apple-system, BlinkMacSystemFont,
             Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono:  "IBM Plex Mono", "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

    /* ── GROUNDS · six warm stocks, one dark band ─────────────────────── */
    --stock:   #FFFCF6;   /* brightest — 3, 6, 9, 14                       */
    --bone:    #F7F3EC;   /* the default page — 1, 4, 7, 12                */
    --oat:     #EFE6D5;   /* 8                                             */
    --gilt-w:  #F7E7BE;   /* brass wash — 2, 10                            */
    --blush:   #F5DFD6;   /* oxblood wash — 5                              */
    --sage:    #E6EBDA;   /* 13                                            */
    --oxblood: #5C1A24;   /* the page's ONLY dark band — 11, the limits    */
    --abyss:   #2A1218;   /* footer                                        */
    --mat:     #E1D6C0;   /* mount board behind every screenshot           */

    /* ── INK ON LIGHT ─────────────────────────────────────────────────── */
    --ink:   #191512;    /* 16.41 bone · 17.72 stock · 14.65 oat           */
    --ink-2: #5A5248;    /*  6.94 bone ·  7.50 stock ·  6.20 oat           */
    --ink-3: #6E6455;    /*  5.25 bone ·  5.67 stock ·  4.69 oat           */

    /* ── OXBLOOD ──────────────────────────────────────────────────────── */
    --accent:      #7B1E2B;   /* 9.20 on bone · 9.94 on stock              */
    --accent-deep: #5C1A24;
    --accent-wash: #F5DFD6;

    /* ── BRASS · three roles, never interchanged ──────────────────────── */
    --gilt:       #C9A227;   /* FILLS only on light. 2.19 on bone — never a word */
    --brass-rule: #A8801A;   /* rules and marks. 3.29 on bone, non-text          */
    --brass-text: #7A5C0E;   /* the only brass WORD on light. 5.64 on bone       */
    --gilt-edge:  #8A6A1E;   /* 1px edge under the brass button                  */

    /* ── ON THE DARK BAND ─────────────────────────────────────────────── */
    --cream:   #F5EEE2;      /* 11.18 on oxblood                           */
    --cream-2: #D8CDBA;      /*  8.21 on oxblood                           */

    /* ── LINES ────────────────────────────────────────────────────────── */
    --rule:        #E0D8C9;
    --rule-strong: #C2B7A3;
    --edge:        #8A8071;   /* meaningful boundary, 3.51 on bone          */
    --hair:        #2A241C;   /* the 1px drawn on every plate, 10.66 on mat */

    /* ── ROLE TOKENS · every band rebinds these ───────────────────────── */
    --ground: var(--bone);
    --fg:     var(--ink);
    --fg-2:   var(--ink-2);
    --fg-3:   var(--ink-3);
    --mark:   var(--accent);      /* links, drop cap, chips        */
    --label:  var(--brass-text);  /* kickers, numerals, FIG. nos   */
    --line:   var(--rule);
    --line-2: var(--rule-strong);
    --focus:  var(--accent);

    --radius: 3px;
}

/* ── RESET ────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
* { min-width: 0; }                  /* or one long mono path widens the page */

html {
    font-size: 100%;
    font-optical-sizing: auto;
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bone);
    color: var(--ink-2);
    font-family: var(--sans);
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.72;
    overflow-x: clip;                /* clip, not hidden — hidden kills sticky */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

/* ── TYPOGRAPHY ───────────────────────────────────────────────────────── */

h1, h2, h3 { margin: 0; color: var(--fg); }

h1 {
    font-family: var(--serif); font-weight: 500;
    font-variation-settings: "opsz" 72;
    font-size: clamp(2.5rem, 6.2vw, 4.4rem);
    line-height: 1.03; letter-spacing: -.024em;
    max-width: 15ch; text-wrap: balance;
}

/* The turn of the headline sentence. Set as its own line and in the accent, so
   the pivot the whole line depends on is the part the eye lands on. display:
   block puts the break at the full stop rather than wherever text-wrap:balance
   would have chosen, which is the difference between a sentence and a slogan. */
h1 .turn { display: block; color: var(--mark); }

h2 {
    font-family: var(--serif); font-weight: 500;
    font-variation-settings: "opsz" 40;
    font-size: clamp(1.8rem, 3.4vw, 2.7rem);
    line-height: 1.12; letter-spacing: -.016em;
    max-width: 22ch; text-wrap: balance;
}

h3 {
    font-family: var(--serif); font-weight: 600;
    font-variation-settings: "opsz" 24;
    font-size: clamp(1.18rem, 1.6vw, 1.35rem);
    line-height: 1.26; letter-spacing: -.008em;
}

h4 {
    margin: 0; font-family: var(--sans); font-weight: 600;
    font-size: 1.02rem; line-height: 1.35; letter-spacing: -.004em; color: var(--fg);
}

p { margin: 0 0 1.1rem; max-width: 34rem; }
p:last-child { margin-bottom: 0; }

/* LEDES ARE SERIF, BODY IS SANS. That alternation is itself a rhythm device,
   and it is why fourteen sections of prose do not go soporific. */
.lede {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(1.18rem, 1.9vw, 1.4rem);
    line-height: 1.52; color: var(--fg-2); max-width: 34rem;
}
/* Glosses almost always follow a list or a paragraph and need air above them,
   or they read as the last bullet rather than as an aside. */
.gloss {
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: 1.02rem; line-height: 1.5; color: var(--fg-3);
    margin-top: 1.5rem;
}
.small { font-size: .875rem; line-height: 1.6; }

a { color: var(--mark); text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { border-bottom-width: 2px; }
strong { color: var(--fg); font-weight: 600; }

/* ── MONO APPARATUS · the voice of the record ─────────────────────────── */

.kicker {
    font-family: var(--mono); font-weight: 500; font-size: .7rem;
    text-transform: uppercase; letter-spacing: .16em; color: var(--label);
    display: flex; align-items: center; gap: .7rem; margin: 0 0 .9rem;
}
.kicker::before { content: ""; width: 24px; height: 1px; background: currentColor; flex: 0 0 24px; }

.secnum { font-family: var(--mono); font-weight: 500; font-size: .8125rem;
          letter-spacing: .08em; color: var(--label); }
.fignum { font-family: var(--mono); font-weight: 500; font-size: .7rem;
          text-transform: uppercase; letter-spacing: .14em; color: var(--label); }
.mono   { font-family: var(--mono); font-size: .8125rem; letter-spacing: .01em;
          font-variant-numeric: tabular-nums; }

/* ── SHELL & BANDS ────────────────────────────────────────────────────── */

.shell { width: min(var(--shell), 100% - var(--gutter) * 2); margin-inline: auto; }

.band { background: var(--ground); color: var(--fg-2); padding: clamp(3.5rem, 7vw, 6rem) 0; }

.band--stock { --ground: var(--stock);  }
.band--bone  { --ground: var(--bone);   }
.band--oat   { --ground: var(--oat);    }
.band--gilt  { --ground: var(--gilt-w); }
.band--blush { --ground: var(--blush);  }
.band--sage  { --ground: var(--sage);   }

/* The one dark band on the page. It is the disclaimer, not a call to action:
   the loudest design on the site is the list of things the software cannot do. */
.band--oxblood {
    --ground: var(--oxblood);
    --fg:     var(--cream);
    --fg-2:   var(--cream-2);
    --fg-3:   var(--cream-2);
    --mark:   var(--gilt);
    --label:  var(--gilt);
    --line:   #7A2A34;
    --line-2: #8E3A44;
    --focus:  var(--gilt);
}

/* ── SECTION HEAD & MARGIN RAIL ───────────────────────────────────────── */

.head { margin: 0 0 clamp(2rem, 4vw, 3rem); }
.head .lede { margin-top: 1.1rem; }

.railed { display: grid; grid-template-columns: 1fr; }

/* The rail carries at most two items per section — the numeral and one note.
   That quota is what stops annotation-as-design becoming clutter. */
@media (min-width: 1180px) {
    .railed { grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: 2.5rem; }
    .rail { text-align: right; padding-top: .5rem; }
    .rail .secnum { display: block; }
    .rail__note {
        display: block; margin-top: .9rem; font-family: var(--serif);
        font-style: italic; font-size: .92rem; line-height: 1.45; color: var(--fg-3);
    }
}

/* Below the rail breakpoint its contents do not disappear — they reflow as one
   inline line above the heading. Without this, everything under 1180px becomes
   the generic version of this site. */
@media (max-width: 1179px) {
    .rail { display: flex; align-items: center; gap: .7rem; margin: 0 0 .9rem; flex-wrap: wrap; }
    .rail::before { content: ""; width: 24px; height: 1px; background: var(--label); flex: 0 0 24px; }
    .rail__note { display: none; }
}

/* ── DOUBLE RULE · the signature device ───────────────────────────────── */

.drule { border-top: 3px solid var(--fg); position: relative; padding-top: 1.6rem; }
.drule::after {
    content: ""; position: absolute; left: 0; right: 0; top: 4px;
    height: 1px; background: var(--fg);
}

/* ── BUTTONS ──────────────────────────────────────────────────────────── */

.btn {
    display: inline-block; font-family: var(--sans); font-weight: 600;
    font-size: .97rem; line-height: 1.2; padding: .85rem 1.5rem;
    border: 1px solid transparent; border-radius: 2px; cursor: pointer;
    text-decoration: none;
    transition: box-shadow .14s, transform .14s, background .14s;
}

/* The brass button is the app's own Start button. The block behind it is an
   impression pressed into the paper, so its inner layer must be painted in the
   colour of the band it sits on — hence var(--ground), not a fixed value. */
.btn--primary {
    background: var(--gilt); color: #191512; border-color: var(--gilt-edge);
    box-shadow: 5px 5px 0 -1px var(--ground), 5px 5px 0 0 var(--accent);
}
.btn--primary:hover { box-shadow: 7px 7px 0 -1px var(--ground), 7px 7px 0 0 var(--accent); }
.btn--primary:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 -1px var(--ground), 2px 2px 0 0 var(--accent);
}
/* A #7B1E2B ring on #C9A227 is about 2.4:1 and fails. Not optional. */
.btn--primary:focus-visible { outline-color: #191512; }

.btn--ghost { background: transparent; color: var(--fg); border-color: var(--edge); }
.btn--ghost:hover { background: rgba(123, 30, 43, .06); border-color: var(--accent); }

.band--oxblood .btn--ghost { color: var(--cream); border-color: #9A4A54; }
.band--oxblood .btn--ghost:hover { background: rgba(245, 238, 226, .10); border-color: var(--gilt); }

.rule-link {
    font-family: var(--sans); font-weight: 500; font-size: .97rem;
    color: var(--fg); border-bottom: 1px solid var(--mark); padding-bottom: 2px;
}
.rule-link:hover { border-bottom-width: 2px; }

.actions { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; margin: 2.2rem 0 0; }

/* ── FOCUS & SKIP ─────────────────────────────────────────────────────── */

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

.skip {
    position: fixed; top: .75rem; left: -9999px; z-index: 200;
    background: var(--mat); color: var(--ink); border: 1px solid var(--hair);
    border-left: 3px solid var(--gilt); padding: .7rem 1.1rem;
    font-family: var(--sans); font-weight: 600; font-size: .9rem;
}
.skip:focus { left: .75rem; }

/* ── MASTHEAD ─────────────────────────────────────────────────────────── */

.masthead {
    position: sticky; top: 0; z-index: 50;
    background: var(--bone); border-bottom: 1px solid var(--rule-strong);
}
.masthead__inner {
    display: flex; align-items: center; gap: 1.5rem; padding: .75rem 0;
}
.brand { display: flex; align-items: center; gap: .75rem; border: 0; color: var(--ink); }
.brand img { width: 34px; height: 34px; }
.brand__name {
    font-family: var(--serif); font-weight: 600; font-size: 1.12rem;
    letter-spacing: -.01em; line-height: 1.1; color: var(--ink);
}
.brand__sub {
    display: block; font-family: var(--mono); font-size: .62rem;
    text-transform: uppercase; letter-spacing: .17em; color: var(--brass-text);
    margin-top: 2px;
}

.nav { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; }
.nav a:not(.btn) {
    font-family: var(--sans); font-size: .88rem; font-weight: 500;
    color: var(--ink-2); border: 0; position: relative; padding-bottom: 3px;
}
.nav a:not(.btn)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: var(--accent); transform: scaleX(0); transform-origin: left;
    transition: transform .16s ease;
}
.nav a:not(.btn):hover { color: var(--ink); }
.nav a:not(.btn):hover::after { transform: scaleX(1); }
.nav .btn { padding: .6rem 1.1rem; font-size: .88rem; }

/* ── THE PLATE · how every screenshot is mounted ──────────────────────── */

/* A card tipped into a printed page — not a browser mockup and not a device
   frame. The shots already contain Windows chrome; a second frame would be a
   double frame. The mat gives the light app an edge it otherwise has none of:
   the app body is #F1F3F6, which against warm bone is about 1.03:1. */
.plate { margin: 0; }
.plate__mat {
    background: var(--mat); padding: 10px; border-radius: 2px;
    box-shadow: 10px 10px 0 -1px var(--ground), 10px 10px 0 0 rgba(123, 30, 43, .40);
}
/* The hairline drawn on the image is what turns "a light rectangle" into "a
   print". It replaces the 8px black capture border cropped away above with a
   deliberate one. Covers both shapes: a CSS-cropped plate (.crop) and a
   pre-cut detail image, which sits inside <picture>. */
.plate__mat > .crop,
.plate__mat > img,
.plate__mat > picture > img { border: 1px solid var(--hair); border-radius: 1px; }

.plate__cap { margin-top: .85rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.plate__cap b { display: block; margin-bottom: .2rem; }
.plate__cap span {
    font-family: var(--serif); font-style: italic; font-size: .95rem;
    line-height: 1.45; color: var(--fg-3);
}

/* THE CROP MACHINERY.
   Every capture carries an 8px band of pure #000000 on its left, right and
   bottom edges — verified on all nine files. Left in place it reads as a
   fourth, unplanned colour (20.7:1 against the mat). It is cropped off here
   rather than by re-saving the PNGs, so the originals stay canonical.

   Given a region (X, Y, W, H) inside an image of natural width Wn:
       width : Wn / W * 100%
       left  : -X / W * 100%      (resolves against container width)
       top   : -Y / H * 100%      (resolves against container height, which
                                   aspect-ratio derives from the width)
   so the crop stays exact at every viewport size. */
.crop { position: relative; overflow: hidden; display: block; }
.crop img { position: absolute; display: block; max-width: none; }

/* Main windows (1600x980): drop the 8px border and the 31px Windows title bar. */
.c-main { aspect-ratio: 1584 / 941; }
.c-main img { width: 101.0101%; left: -0.5051%; top: -3.2944%; }

/* The hero keeps its title bar — its job is to prove this is a real installed
   Windows application and not a browser tab. */
.c-hero { aspect-ratio: 1584 / 972; }
.c-hero img { width: 101.0101%; left: -0.5051%; top: 0; }

/* The three dialogs have no charcoal app header at row 31 (verified: #F1F3F6,
   #F1F3F6, #FFFFFF) — they keep their own in-window heading instead. */
.c-search { aspect-ratio: 884 / 561; }
.c-search img { width: 101.8100%; left: -0.9050%; top: -5.5258%; }
.c-real { aspect-ratio: 964 / 581; }
.c-real img { width: 101.6598%; left: -0.8299%; top: -5.3356%; }
.c-about { aspect-ratio: 544 / 681; }
.c-about img { width: 102.9412%; left: -1.4706%; top: -4.5521%; }

/* DETAIL CROPS. A 1600px screenshot rendered at 360px puts app text at roughly
   2.7 CSS pixels — garnish, not evidence, so each wide plate shows a legible
   detail beneath it on a phone.

   These are cut as their own files rather than CSS-cropped from the original.
   The CSS approach magnifies — .c-statrail rendered the source at 187% of its
   box — so it forced a phone to download the full 44 KB screenshot to display a
   100px strip. The pre-cut file is 6.4 KB. Regions used (x, y, w, h):
     detail-statrail  calendar     196,  36,  856, 101
     detail-quickbar  calendar      16, 886, 1568,  64
     detail-legend    calendar    1080, 258,  492,  30
     detail-kpi       realization   22,  84,  936,  85
   Re-cut these if any screenshot is retaken. */
.detail { width: 100%; height: auto; display: block; }

.plate__mobile { display: none; margin-top: .8rem; }
.plate__mobile .plate__mat { box-shadow: none; }

/* ── 1 · HERO ─────────────────────────────────────────────────────────── */

.hero { background: var(--bone); padding: clamp(2.2rem, 5vw, 3.4rem) 0 0; }

/* Centred, and the full width of the shell. The type is the largest thing on
   the page, so it gets the whole measure rather than 58% of it. */
.hero__head { text-align: center; }

.hero__spec {
    display: flex; align-items: center; justify-content: center; gap: .85rem;
    flex-wrap: wrap;
    font-family: var(--mono); font-weight: 500; font-size: .7rem;
    text-transform: uppercase; letter-spacing: .16em; color: var(--brass-text);
    margin: 0 0 1.5rem;
}
.hero__spec i { width: 1px; height: .85em; background: var(--rule-strong); display: inline-block; }

/* No ch cap here: the first sentence is 34 characters and the clamp keeps it on
   one line down to about 645px, below which it wraps and the headline runs to
   three lines. Capping it would force a break mid-sentence at full size. */
.hero h1 { margin: 0 auto; max-width: none; }
.hero__lede { margin: 1.6rem auto 0; max-width: 46rem; text-wrap: pretty; }
.hero__lede strong { font-family: var(--serif); font-weight: 500; color: var(--ink); }
.hero__actions { justify-content: center; margin-top: 2.4rem; }

/* THE AT-A-GLANCE LEDGER.
   A specification strip across the full measure, the way a reference work
   states its edition. The last cell is the point of the whole component: the
   first thing a sceptical attorney reads is a limitation, stated before it
   was asked for. */
.glance {
    display: grid; margin: clamp(2.6rem, 5vw, 3.6rem) 0 0;
    border-top: 1px solid var(--rule-strong);
    border-bottom: 1px solid var(--rule-strong);
}
@media (min-width: 860px) {
    .glance { grid-template-columns: repeat(5, 1fr); }
    .glance__cell + .glance__cell { border-left: 1px solid var(--rule); }
}
.glance__cell { padding: 1rem 1.2rem; text-align: center; }
.glance__cell dt {
    margin: 0 0 .35rem; font-family: var(--mono); font-size: .66rem;
    text-transform: uppercase; letter-spacing: .12em; color: var(--brass-text);
}
.glance__cell dd {
    margin: 0; font-family: var(--sans); font-size: .95rem; color: var(--ink);
    font-variant-numeric: tabular-nums; line-height: 1.4;
}
/* The one cell that states a limit is set in the accent, so the eye lands on
   it rather than skating over five identical rows. */
.glance__cell:last-child dd { color: var(--accent); font-weight: 500; }

@media (max-width: 859px) {
    .glance__cell {
        display: flex; justify-content: space-between; align-items: baseline;
        gap: 1.2rem; text-align: left; padding: .7rem 0;
    }
    .glance__cell + .glance__cell { border-top: 1px solid var(--rule); }
    .glance__cell dt { margin: 0; }
    .glance__cell dd { text-align: right; }
}

/* Full width, and no longer bleeding off the viewport — the whole application
   window is visible, which is the plate's entire job in the hero. */
.hero__plate { margin: clamp(2.6rem, 5vw, 3.6rem) 0 0; }
.plate__cap--centre { text-align: center; }
.plate__cap--centre b { margin-bottom: .25rem; }

/* ── 2 · THREE THINGS · ruled columns ─────────────────────────────────── */

.columns { display: grid; gap: 0; }
@media (min-width: 900px) {
    .columns { grid-template-columns: repeat(3, 1fr); column-gap: 2.5rem; }
    .columns > * + * { border-left: 1px solid var(--line-2); padding-left: 2.5rem; }
}
@media (max-width: 899px) {
    .columns > * + * { border-top: 1px solid var(--line-2); padding-top: 1.8rem; margin-top: 1.8rem; }
}
.column__no {
    font-family: var(--serif); font-size: 2.6rem; font-weight: 400; line-height: 1;
    color: var(--mark); margin: 0 0 .6rem; font-variant-numeric: lining-nums;
}
.column h3 { margin-bottom: .6rem; }

/* ── 3 · ALONGSIDE · the pull-quote ───────────────────────────────────── */

.split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .split--wide { grid-template-columns: 7fr 5fr; } }

/* Plate on the LEFT. Applied to alternating feature sections so the eye is not
   dragged down the same rail for six sections running — which is what made the
   first draft feel uniform. Works regardless of source order, so the text can
   stay first in the DOM for readers who are not seeing the layout. */
@media (min-width: 900px) {
    .split--flip { grid-template-columns: 6fr 5fr; }
    .split--flip > figure { order: -1; }
}

/* The section heading set as a pull quote. It stays a real <h2> so the document
   outline holds — one h1 and exactly one h2 per section. */
.quote { border-top: 3px solid var(--mark); padding-top: 1.4rem; margin: 0 0 1.6rem; }
.quote h2 { max-width: 24ch; }
.quote__cite {
    margin: .9rem 0 0; font-family: var(--mono); font-size: .7rem;
    text-transform: uppercase; letter-spacing: .14em; color: var(--label);
}

/* ── 4 · CAPTURE · the key ledger ─────────────────────────────────────── */

.keys { display: grid; gap: 0 2.5rem; margin: 0; }
@media (min-width: 720px) { .keys { grid-template-columns: 1fr 1fr; } }
.keys div {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: .6rem 0; border-bottom: 1px solid var(--line);
}
.keys dt { margin: 0; font-size: .95rem; color: var(--fg-2); }
.keys dd { margin: 0; }

kbd {
    font-family: var(--mono); font-size: .74rem; font-weight: 500;
    background: var(--stock); color: var(--ink);
    border: 1px solid var(--rule-strong); border-bottom-width: 2px;
    border-radius: 3px; padding: .2rem .45rem; white-space: nowrap;
}

/* ── 5, 7, 9 · list of features with a marker ─────────────────────────── */

.marks { list-style: none; margin: 0; padding: 0; }
.marks li { position: relative; padding: 0 0 1rem 1.6rem; max-width: 34rem; }
.marks li::before {
    content: ""; position: absolute; left: 0; top: .62em;
    width: 8px; height: 1px; background: var(--brass-rule);
}
.marks li:last-child { padding-bottom: 0; }

/* The "what never leaves" column. Same list, accent marker, so the two halves
   of the ledger read as a pair rather than as two unrelated lists. */
.marks--stop li::before { background: var(--accent); width: 10px; height: 2px; }

/* ── 7 · THE HIERARCHY · a stemma, not a screenshot ───────────────────── */

.stemma { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.stemma li {
    display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .9rem;
    background: var(--stock); border: 1px solid var(--line);
    border-left: 3px solid var(--brass-rule);
    padding: .85rem 1.1rem;
}
.stemma li:nth-child(1) { margin-left: 0; }
.stemma li:nth-child(2) { margin-left: 1.5rem; }
.stemma li:nth-child(3) { margin-left: 3rem; }
.stemma li:nth-child(4) { margin-left: 4.5rem; border-left-color: var(--accent); }
.stemma__k {
    font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
    letter-spacing: .13em; color: var(--label);
}
.stemma__v { font-family: var(--sans); font-size: .97rem; color: var(--fg); font-weight: 500; }
@media (max-width: 720px) {
    .stemma li { margin-left: 0 !important; grid-template-columns: 1fr; gap: .15rem; }
}

/* ── 8 · REALIZATION · the four figures ───────────────────────────────── */

.figures { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 640px) { .figures { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .figures { grid-template-columns: repeat(4, 1fr); } }
.figures div { background: var(--ground); padding: 1.3rem 1.2rem; }
.figures dt {
    font-family: var(--mono); font-size: .66rem; text-transform: uppercase;
    letter-spacing: .13em; color: var(--label); margin: 0 0 .5rem;
}
.figures dd {
    margin: 0; font-family: var(--serif); font-size: 1.05rem; line-height: 1.4;
    color: var(--fg-2);
}

/* ── 9 · MODULES · the roster ─────────────────────────────────────────── */

.roster { display: grid; gap: 0; }
.roster__row {
    display: grid; grid-template-columns: 14rem 9rem 1fr; gap: 1.5rem;
    align-items: baseline; padding: 1.2rem 0; border-top: 1px solid var(--line);
}
.roster__row:last-child { border-bottom: 1px solid var(--line); }
.chip {
    display: inline-block; font-family: var(--mono); font-size: .64rem;
    text-transform: uppercase; letter-spacing: .12em; padding: .25rem .55rem;
    border: 1px solid currentColor; border-radius: 2px; white-space: nowrap;
}
.chip--on  { color: var(--brass-text); }
.chip--off { color: var(--accent); }
@media (max-width: 899px) {
    .roster__row { grid-template-columns: 1fr; gap: .5rem; }
}

/* ── 10 · THE DATA FOLDER ─────────────────────────────────────────────── */

/* A real grid, not <br> and &nbsp;. It wraps on a phone instead of scrolling
   sideways, and each path keeps its annotation on the same row on desktop. */
.filelist {
    margin: 0 0 1.6rem; border: 1px solid var(--line); border-left: 3px solid var(--brass-rule);
    background: var(--stock); padding: 1.2rem 1.3rem;
}
.filelist__root {
    font-family: var(--mono); font-size: .8rem; color: var(--brass-text);
    word-break: break-all; display: block; margin-bottom: .8rem;
    padding-bottom: .8rem; border-bottom: 1px solid var(--line);
}
.filelist dl { display: grid; gap: .55rem 1.5rem; margin: 0; }
@media (min-width: 620px) { .filelist dl { grid-template-columns: 21rem 1fr; } }
.filelist dt {
    font-family: var(--mono); font-size: .8rem; color: var(--ink);
    margin: 0; word-break: break-all;
}
.filelist dd {
    margin: 0; font-family: var(--serif); font-style: italic;
    font-size: .95rem; color: var(--fg-3);
}
@media (max-width: 619px) { .filelist dd { padding-left: 2ch; margin-bottom: .3rem; } }

/* ── 11 · THE LIMITS · the one dark band ──────────────────────────────── */

.limits { list-style: none; margin: 0; padding: 0; counter-reset: limit; display: grid; gap: 0; }
@media (min-width: 900px) { .limits { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.limits li {
    counter-increment: limit; position: relative;
    padding: 1.15rem 0 1.15rem 3rem; border-top: 1px solid var(--line);
}
.limits li::before {
    content: counter(limit, decimal-leading-zero);
    position: absolute; left: 0; top: 1.15rem;
    font-family: var(--mono); font-size: .78rem; letter-spacing: .06em;
    color: var(--label);
}
.limits strong { display: block; margin-bottom: .2rem; color: var(--fg); }
.limits p { margin: 0; font-size: .97rem; color: var(--fg-2); max-width: none; }

/* ── 12 · REQUIREMENTS · the steps ────────────────────────────────────── */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
    counter-increment: step; position: relative;
    padding: 0 0 1.5rem 3.2rem; max-width: 36rem;
}
.steps li::before {
    content: counter(step);
    position: absolute; left: 0; top: -.1rem;
    width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
    border: 1px solid var(--brass-rule); border-radius: 50%;
    font-family: var(--mono); font-size: .8rem; color: var(--brass-text);
}
.steps li:last-child { padding-bottom: 0; }

/* ── 13 · CLOSER ──────────────────────────────────────────────────────── */

.closer { text-align: center; }
.closer h2 { margin-inline: auto; }
.closer .lede { margin: 1.2rem auto 0; }
.closer .actions { justify-content: center; }
.closer .small { margin-top: 1.6rem; color: var(--fg-3); }

/* ── 14 · FAQ ─────────────────────────────────────────────────────────── */

.faq { display: grid; gap: 0; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
    list-style: none; cursor: pointer; padding: 1.25rem 3rem 1.25rem 0;
    position: relative; font-family: var(--serif); font-weight: 600;
    font-size: 1.13rem; line-height: 1.35; color: var(--fg);
}
.faq summary::-webkit-details-marker { display: none; }
/* A plus that resolves into a minus. No rotation, no chevron. */
.faq summary::before,
.faq summary::after {
    content: ""; position: absolute; right: .35rem; top: 50%;
    background: var(--brass-rule); transition: height .18s ease, opacity .18s ease;
}
.faq summary::before { width: 13px; height: 1px; margin-top: -.5px; right: .1rem; }
.faq summary::after  { width: 1px; height: 13px; margin-top: -6.5px; right: 6.1px; }
.faq details[open] summary::after { height: 0; margin-top: 0; opacity: 0; }
.faq .faq__body { padding: 0 0 1.5rem; }
.faq .faq__body p { max-width: 46rem; }

/* ── FOOTER ───────────────────────────────────────────────────────────── */

.foot {
    background: var(--abyss); color: #C9BCA9;
    padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem;
}
.foot a { color: var(--gilt); border-bottom-color: rgba(201, 162, 39, .45); }
.foot a:hover { border-bottom-color: var(--gilt); }
.foot__grid { display: grid; gap: 2.5rem; }
/* 820px, not 760px: between 760 and 800 the third column lands at about 173px
   while "info@fortiscollective.net" sets 189px, and an email address has no
   break opportunity, so the line box pushed the page 5px wider than the
   viewport. The overflow-wrap below is the belt to that braces. */
@media (min-width: 820px) { .foot__grid { grid-template-columns: 2fr 1fr 1fr; } }
.foot ul a, .foot__legal { overflow-wrap: anywhere; }
.foot h3 {
    font-family: var(--mono); font-weight: 500; font-size: .68rem;
    text-transform: uppercase; letter-spacing: .15em; color: var(--gilt);
    margin: 0 0 1rem;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.foot__brand { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.foot__brand img { width: 40px; height: 40px; }
.foot__brand span {
    font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: #F5EEE2;
}
.foot__legal {
    margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #4A2028;
    display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
    font-size: .84rem; color: #A08F7E;
}

/* ── MOTION ───────────────────────────────────────────────────────────── */

/* Print does not animate — and nothing here hides content waiting for a script
   to un-hide it. An entrance animation that fails leaves an unreadable page, so
   the only motion on this site is on hover and focus, in CSS, where the resting
   state is already the correct one. */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    html { scroll-behavior: auto; }
}

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */

@media (max-width: 899px) {
    .split, .split--wide, .split--flip { grid-template-columns: 1fr; }
    .split--flip > :first-child { order: 0; }
}

/* A 1600px screenshot at 360px puts app text at about 2.7 CSS pixels. Below
   this width every wide plate reveals a legible detail crop beneath it. */
@media (max-width: 720px) {
    .plate__mobile { display: block; }
}

@media (max-width: 640px) {
    .nav a:not(.btn) { display: none; }
    .brand__sub { display: none; }
    .actions { gap: 1rem; }
    .actions .btn { width: 100%; text-align: center; }
    .hero { padding-top: 2.2rem; }
}

/* ── TAP TARGETS ──────────────────────────────────────────────────────── */

/* On a phone every link has to be hittable with a thumb. Measured at 360px,
   these were 21-38px high: the masthead wordmark, the masthead Download, both
   rule-links, and the seven footer links. 44px is the platform guidance and
   comfortably clears the WCAG 2.5.8 minimum of 24px. Height is added with
   padding and flex centring so nothing moves visually on desktop. */
@media (max-width: 860px) {
    .brand { min-height: 44px; }
    .nav .btn { padding: .8rem 1.2rem; }

    .rule-link {
        display: inline-flex; align-items: center; min-height: 44px;
        /* the underline is the component, so keep it tight to the text */
        padding-bottom: 0; border-bottom: 0; position: relative;
    }
    .rule-link::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: 11px;
        height: 1px; background: var(--mark);
    }
    .rule-link:hover::after { height: 2px; }

    .foot ul { gap: 0; }
    .foot ul a {
        display: inline-flex; align-items: center; min-height: 44px;
    }
}

@media (max-width: 400px) {
    .plate__mat { padding: 6px; box-shadow: 6px 6px 0 -1px var(--ground), 6px 6px 0 0 rgba(123,30,43,.40); }
    body { font-size: 1rem; line-height: 1.6; }
}

/* ── SPACING UTILITIES ────────────────────────────────────────────────── */

.stack    { margin-top: clamp(2rem, 4vw, 2.8rem); }
.stack-lg { margin-top: clamp(2.6rem, 5vw, 3.6rem); }

h3.drule { margin-top: clamp(2rem, 4vw, 2.6rem); }

/* The passphrase warning. It earns a heavier frame than an ordinary gloss
   because it is the one irreversible thing on the page. */
.note-stop {
    margin-top: clamp(1.6rem, 3vw, 2.2rem);
    border-left: 3px solid var(--accent);
    background: rgba(123, 30, 43, .05);
    padding: 1.1rem 1.3rem;
    max-width: 46rem; font-style: normal; color: var(--fg-2);
}
.note-stop strong { color: var(--accent); }

/* Needs to outrank `.foot h3`, which sets margin:0 0 1rem and would otherwise
   leave this heading sitting directly on the link above it. */
.foot h3.foot__notices { margin-top: 2.2rem; }

@media print {
    .masthead, .nav, .skip { display: none; }
    .band { padding: 1.5rem 0; break-inside: avoid; }
    body { background: #fff; color: #000; }
}