/* v7 tokens: alexholder.studio landing, project and Willis eCOA case study, from Figma
   A2KyiZUWE17TfXjvDe1X6Y, section "FINAL 1" (2689:40698). Every value below is a Figma variable or
   frame measurement at the 1728 x 1117 design viewport. Kept apart from tokens.css (generated from
   DESIGN.md) until the v7 pages replace the current ones. */

@font-face {
  font-family: "Söhne";
  src: url("/fonts/soehne-buch.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color (content/*) */
  --content-background: #f7f9f6;
  --content-surface: #ecefe9;
  --lichen-1000: #181d16;             /* Figma color/lichen/1000 (light mode's) */
  /* Dark mode's own lichens (Figma color/lichen dark/*, Oct 30): deeper and less green than the light palette's,
     so the dark ground reads near-neutral; the light mode keeps its lichens (Alex, Oct 30) */
  --lichen-dark-1000: #131512;
  --lichen-dark-950: #1c1f1a;
  --lichen-dark-900: #262a24;
  --content-text-primary: #1b2430;
  --content-text-muted: #5a6454;
  --device-border: #bcdd88;           /* literal in the design, no variable */

  /* Type: Söhne Buch, one weight; every style tracks -2% */
  --font-primary: "Söhne", sans-serif;
  --font-weight: 400;
  --tracking: -0.02em;
  /* Type in rem (Alex, Oct 30): 1rem is the reader's default text size, 16px unless they've changed it, so
     these render at the Figma sizes by default (13/18, 21/29, 34/39, 55/52) and scale with the reader's
     setting. The diagrams laid out to measure (the wide maps' SVGs and the flows) keep px: --diagram-text-size. */
  --font-size-small: 0.8125rem;            /* fibonacci/small */
  --line-height-small: 1.125rem;
  --font-size-body: 1.3125rem;             /* fibonacci/body: the logo and the chapter headings (21/29, -0.42px) */
  --line-height-body: 1.8125rem;
  --font-size-heading: 2.125rem;          /* fibonacci/heading (font-size/header) */
  --line-height-heading: 2.4375rem;
  --font-size-display: 3.4375rem;          /* fibonacci/display */
  --line-height-display: 3.25rem;
  --paragraph-gap: 13px;              /* between paragraphs of one text block */

  /* Layout (frame/*) */
  --frame-margin: 21px;
  --frame-grid-gutter: 21px;
  --frame-column-gap: 8px;            /* frame/colum-gap: small stacks */
  --grid-columns: 13;
  --group-gap: 55px;                  /* spacing/8 on the case study: between content groups */

  /* Header (component 2689:41408) */
  --nav-arrow-w: 10px;                /* the nav's "→", then frame/colum-gap to its label (nav active, 2689:41408) */
  --header-h: 163px;
  --content-top: calc(var(--header-h) + var(--frame-margin)); /* 184px: where page content starts */
  --header-to-content: 144px;         /* frame/header-to-content: a chapter's text sits this far below chapter 01's */

  /* Grain: the frames' image fills, multiplied over their fill color */
  --grain-page: url("/assets/v7/grain-film.png"); /* the page's film grain, multiplied: it shows on light ground and fades on dark content, so laid back over the header's blur it never speckles what passes beneath (Alex, Oct 30) */
  --grain-page-blend: multiply;
  --head-blur-comp: brightness(1);     /* the blur no longer sees the page grain (v7.css body::after), so it needs no tone correction */
  --head-grain-opacity: var(--grain-opacity);
  --grain-opacity: 0.6;               /* the page's grain and static, a little quieter (Alex, Oct 30: "too much like it's snowing") */
  --static-animation: static 0.8s steps(1) infinite;   /* the living film static: eight offsets, 0.1s each, as the old site's (Alex, Oct 30: slower was choppy); it holds still while the page scrolls */
  --static-disturb-r: 15.5px;         /* the disturbance's reach: 31px across in all, the cursor at its centre (Alex, Oct 30) */
  --static-gather-scale: 0.8;         /* a still cursor draws the grain in: shrunk this much about it */
  --static-gather-in: 0.9s;           /* ... gathering this slowly once the cursor stops */
  --static-repel-scale: 1.5;          /* the grain pushed out around the cursor: enlarged this much about it, so it visibly moves within so small a reach */
  --static-repel-settle: 0.6s;        /* the grain settles back this fast once the cursor stops */
  --grain-handoff: 64px;             /* below the header's blur, the page grain takes over from the header's over this band */
  --grain-page-size: 240px;           /* the 480px tile at half size, so retina screens draw it 1:1 */
  --grain-panel: url("/assets/v7/grain-panel.png");
  --grain-portrait: url("/assets/v7/grain-portrait.png");
  --grain-blend: multiply;            /* the grain darkens the light ground; in dark mode it lightens the dark ground (screen) */
  --portrait-blend: multiply;         /* the portrait sits into the ground */
  --head-blend-mode: difference;      /* the header's text inverts over what's beneath, in both modes */
  --grain-size: 128px;

  /* Mockup panel and device (component instances "mockup" / "Assessments") */
  --panel-pad: 21px;                  /* frame/grid-gutter on the case study */
  --device-ratio: 1440 / 900;
  --device-radius: 15px;
  --device-shadow: 0 4px 10.2px 0 rgba(0, 0, 0, 0.1), -1px -1px 24px 0 rgba(222, 242, 172, 0.25);
  --device-inset: inset 2px 2px 4.1px 0 rgba(0, 0, 0, 0.06);

  /* Landing (2689:40699) */
  --landing-hero-h: 690px;
  --landing-lists-h: 264px;
  --landing-lists-row-gap: 10px;
  --landing-list-w: 194px;

  /* Project (2689:41465) */
  --project-panel-h: 1069px;          /* taller than the grid area: centered and clipped top and bottom */

  /* Case study (2690:41610; chapters 2709:43228, 2708:43117, 2712:44170, 2713:44278, 2715:44325) */
  --minimap-block-ratio: 454 / 256;
  --chapter-end: 0px;                 /* each chapter frame is the room below the header: margin, panels, margin */
  --cs-panel-pad: 21px;               /* spacing/6 (21 in the file): the chapters' panels */
  --cs-room: calc(100svh - var(--header-h) - 2 * var(--frame-margin)); /* a chapter's main panel: 912px at the design size */
  --cs-crop-h: 433px;                 /* Dec's participant table, cropped (2713:44275) */
  --cs-slider-ratio: 504 / 308;       /* Dec II's slider in the text column (2715:44323) */
  --content-border-secondary: #e0e5dd; /* content/border/secondary */
  --cs-note-rule: 1px solid var(--content-border-secondary); /* above a chapter's notes */
  --cs-note-pad: 13px;                /* spacing/5: between the rule and the first note */
  --cs-title-h: 144px;                /* spacing/10: a chapter's label and heading block */
  --cs-title-after: var(--cs-title-h); /* below chapter 01's title block, before About (spacing/10) */
  --cs-text-cols: 4;                  /* the case study's text: grid columns 1-4 (label in 1, text in 2-4); images from a column after */
  --head-slide-duration: 400ms;       /* the header slides away on the way down, back on any scroll up (specs §3b, as Pentagram) */
  --head-slide-ease: cubic-bezier(0.46, 0.03, 0.52, 0.96);
  --progress-w: 2px;                  /* tablet and phone: the reading-progress line down the right edge, in place of the minimap */
  --cs-fade-end: 0.5;                 /* case study text scrolling up fades from the content top to nothing this far down the header (a share of its height), clear of its name and links (Alex, Oct 30) */
  --note-marker-size: 0.5rem;            /* footnote numbers: the repo's 0.6em of 13px */
  --note-marker-gap: 2px;             /* between a note's number and its term */
  --device-ratio-tablet: 1364 / 1024; /* the assessment screens (tablet) */
  --device-radius-tablet: 21px;
  --device-recording: #dd9c9a;        /* the ring on a screen that's recording */

  /* Diagrams. perm and paper: FINAL 1 styling (work/brooklyn-health/reference/final1/), 13/18 */
  --diagram-rule: #cacfc6;            /* hairline under the head row */
  --diagram-rule-faint: rgba(202, 207, 198, 0.6); /* between rows */
  --diagram-none: #a3aaa1;            /* the dash for no access */
  --diagram-dot: 6px;                 /* full access */
  --diagram-dot-lift: 2px;
  --diagram-key-gap: 34px;            /* spacing/7 */
  --diagram-columns: 38.2fr repeat(5, 12.36fr); /* persona, then the five values; paper's At site / arrow / In Willis sit on these */
  --diagram-row-pad: 13px;            /* matrix rows */
  --diagram-row-pad-paper: 21px;
  --diagram-min-w: 640px;             /* phones: the matrix scrolls sideways inside its panel below this */
  --pm-group-gap: 55px;               /* phones: the matrix's groups, as blocks per role (spacing/8) */
  --pm-row-gap: 2px;                  /* between a role's term and value lines */
  /* tree, flows and growth: the repo's diagrams (scripts/build_diagrams.py), laid out for 16px Söhne at 1.44 and scaled to fit */
  --diagram-text-size: 16px;           /* px on purpose: the wide maps and flows are laid out to this size */
  --diagram-line-height: 23.04px;
  --diagram-cell: #f7f9f6;
  --diagram-ink-soft: #656c60;
  --diagram-cut: #9a4428;
  --diagram-new-fill: #e4eed6;
  --diagram-new-stroke: #3f6d12;
  --diagram-new-stroke-w: 1.5px;      /* the growth map: what a release adds, and the edges leading to it */
  /* The maps' vertical form when the page stacks (v7-vertical-maps-brief.md, Oct 30): phones here, tablet below */
  --vt-text-size: 0.8125rem;
  --vt-line-height: 1.125rem;
  --vt-indent: 21px;                  /* a child's indent under its parent */
  --vt-spine: 9px;                    /* the spine, in from the parent's left edge */
  --vt-gap: 8px;                      /* between rows, and between chips on a shared row */
  --vt-chip-h: 1.625rem;
  --vt-chip-pad: 3px 8px;
  --vt-key-chip-w: 34px;              /* the key's blank sample chips */
  --diagram-pad: 16px;
  --diagram-stack: 8px;
  --dash-mid-fi: 4 3;
  --dash-slated: 1 3;
  --dash-tossed: 4 4;

  /* Pending the designer's confirmation (built exactly as the file has them) */
  --pending-landing-section-gap: 0px; /* the frame has 24px between header and sections; Alex: a mistake, so 0 */
  --pending-landing-list-gap: 20px;   /* spacing/5: list column label-to-list gap */
  --pending-landing-list-row-h: 23px; /* list rows; the case study's lists run at line height (18px) */
  --pending-landing-label-h: 25px;    /* "Disciplines" label box; the other two labels are 18px */
  --pending-landing-grain-size: 256px;/* landing page grain tile; everywhere else 128px */
  --pending-project-panel-pad: 23px;  /* spacing/8 on the project page; case study panels use 21px */

  /* Motion: the current site's values (tokens.css), kept for the home stage and the move into the case study */
  --motion-duration: 700ms;           /* text arriving, panels crossfading, the morph into the case study */
  --motion-duration-exit: 300ms;      /* outgoing state text */
  /* huyml.co, measured Oct 29 (Alex: "the exact same ... blur animation"). A text swap (a chapter or a home
     state changing), as its project reel: the old text blurs toward 8px and is gone at 120ms; the new text is
     there at once, 8px blurred, and sharpens over 800ms. Text arriving with the page, as its project page:
     from hidden, 12px blurred and 18px low, over 700ms, about 100ms apart. */
  --motion-swap-blur: 8px;
  --motion-swap-at: 120ms;
  --motion-swap-in: 800ms;
  --motion-reveal-blur: 12px;
  --motion-reveal-distance: 18px;
  --motion-reveal-duration: 700ms;
  --motion-reveal-stagger: 100ms;
  --ease-power2-out: cubic-bezier(0.5, 1, 0.89, 1);   /* GSAP power2.out */
  --ease-power3-out: cubic-bezier(0.33, 1, 0.68, 1);  /* GSAP power3.out */
  --motion-stagger: 150ms;
  --motion-distance: 16px;
  --mm-slide: 131px;                  /* the minimap slides in from one column (and gutter) to its right */            /* rise on entry */
  --motion-exit-distance: 12px;       /* rise on exit */
  --motion-blur: 10px;                /* entering text starts from this blur */
  --motion-exit-blur: 6px;            /* leaving text ends at this blur */
  --motion-panel-delay: 100ms;        /* images start after the text */
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --state-lead: 0.5;                  /* a state switches halfway into its screen of scroll */
  --home-next-arm: 500ms;             /* Projects must be on show this long before a scroll goes into the case study */
  --home-next-quiet: 200ms;           /* a pause this long starts a new gesture */
  --home-next-run: 40svh;             /* stacked: the run after Projects whose end opens the case study */

  /* Viewer: a project shot opened full size (Figma 2705:43019) */
  --viewer-scrim: rgba(24, 29, 22, 0.7);   /* lichen/1000 at 70% */
  --viewer-grain-opacity: 0.2;
  --viewer-text: #d2dae5;             /* content/text/muted in the viewer's mode */
  --viewer-glass-blur: 14px;          /* Figma Glass, frost 28: Figma's background blur radius is twice CSS blur().
                                         Its refraction (0.46, depth 13), light (-45deg, 0.8) and dispersion (0.5)
                                         have no CSS equivalent; on a full-screen overlay they act only at its edges. */

  /* Tablet (Figma 2698:42075, 2699:42146, 987 wide): 8 columns */
  --tablet-columns: 8;
  --tablet-landing-margin: 13px;      /* the landing's sections; the project page and the header use 21px */
  --tablet-landing-gutter: 13px;
  --tablet-project-rows: 19;
  --tablet-group-gap: 34px;           /* spacing/7: between the project's content groups */

  /* Mobile (proposal, Oct 27, approved): 5 columns, 13px margin and gutter, a 55px bar */
  --mobile-columns: 5;
  --mobile-margin: 13px;
  --mobile-gutter: 13px;
  --mobile-head-h: 55px;              /* 13 + the wordmark's 29px line + 13 */
  --mobile-gap-s: 13px;
  --mobile-gap-m: 34px;
  --mobile-gap-l: 55px;
  --stacked-image-gap: 13px;          /* between the case study's images, stacked on a tablet or phone (Alex, Oct 30) */
  --mobile-foot-clear: 34px;          /* spacing/7: the footer's last line clears a phone's rounded bottom corners (Alex, Oct 30) */
  --head-soft-h: 21px;                /* under the header, the blur tapers out over this depth: it ends where the content starts (header-h + frame-margin), so content sitting there isn't blurred into a glow (Alex, Oct 30) */
  --head-soft-blur: 6px;
  --head-ground-opacity: 0%;          /* the header's ground has no colour: content beneath shows through, blurred (Alex, Oct 30: "remove the background color completely"); its text stays solid */
  --head-ground-blur: 12px;
  --head-blur-bleed: 48px;            /* the blur layer runs this far past the screen's top and sides */
  --head-blur-ramp: 72px;             /* the blur eases out over this depth, ending where the content starts (Alex, Oct 30: more gradual) */
  /* The header's text blends by difference with what's beneath it (Alex, Oct 30): set to the page ground minus
     the ink and muted colours, so over the page it comes out exactly ink and muted, and over a dark image light */
  --head-blend-text: #dcd5c6;         /* #f7f9f6 − #1b2430 */
  --head-blend-muted: #9d95a2;        /* #f7f9f6 − #5a6454 */
  /* The TL;DR / weeds toggle (Figma 2804:20676, 2690:41610: button / State=Idle and State2) */
  --modes-fill: rgba(236, 239, 233, 0.2);   /* phones: content/surface at 20%, over a glass blur */
  --modes-fill-desktop: var(--content-surface);
  --modes-blur: 19px;
  --modes-shadow: 0 4px 8.3px -1px rgba(0, 0, 0, 0.1);
  --modes-pad: 1px 2px;
  --mode-pad: 8px 13px;
  --mode-on-fill: var(--lichen-1000);
  --mode-on-text: #f7faf4;
  --modes-bottom: 15px;               /* phones: from the screen's foot */
  --modes-top: 89px;                  /* desktop: in the header band, under the name (Figma 2811:20926) */
  --modes-band: 57px;                /* desktop, header slid away: the blurred ground stays this deep behind Read mode (21 + 36), then tapers over --head-soft-h */
  --modes-in-delay: 400ms;            /* the toggle grows in once the page's text has started to reveal */
  --image-hover-scale: 1.0125;        /* an image's contents, hovered (Alex, Oct 30: half of 2.5%) */
  --image-hover-duration: 500ms;
  --image-follow: 2%;                 /* ... and follow the cursor this far (of their own size) from the centre */
  --modes-in-scale: 0.9;
  --mode-slide: 350ms;                /* the dark selection slides to the chosen side */
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration: 0ms;
    --motion-duration-exit: 0ms;
    --motion-swap-at: 0ms;
    --head-slide-duration: 0ms;
    --modes-in-delay: 0ms;
    --image-hover-duration: 0ms;
    --static-animation: none;
    --mode-slide: 0ms;
    --motion-swap-in: 0ms;
    --motion-reveal-duration: 0ms;
    --motion-reveal-stagger: 0ms;
    --motion-swap-blur: 0px;
    --motion-reveal-blur: 0px;
    --motion-reveal-distance: 0px;
    --motion-stagger: 0ms;
    --motion-distance: 0px;
    --motion-exit-distance: 0px;
    --motion-blur: 0px;
    --motion-exit-blur: 0px;
  }
}

/* Narrower than the 1440 frame (the split layout, 988-1439), the text takes a fifth column, so it runs across
   four and wraps to fewer lines; the images keep columns 7-12 (Alex, Oct 28) */
@media (min-width: 988px) and (max-width: 1439px) {
  :root { --cs-text-cols: 5; --cs-title-after: var(--group-gap); }  /* and About comes closer to the title (spacing/8) */
}

/* Phones: the header is short, so the fade ends further down it, clear of the name and links */
@media (max-width: 767px) {
  :root { --cs-fade-end: 0.75; }
}

/* Tablet: the maps' vertical form at the diagram size */
@media (min-width: 768px) and (max-width: 987px) {
  :root { --vt-text-size: 1rem; --vt-line-height: 1.44rem; --vt-indent: 34px; --vt-spine: 13px; --vt-chip-h: 1.9375rem; }
}

/* Dark mode (prefers-color-scheme; Figma Component collection, mode "dark", Oct 30). The page, surface,
   text and border colours are the file's; the rest are derived to the same contrast as in light mode. The
   grain tiles are inverted and screened, so it still reads as film grain on a dark ground. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --content-background: var(--lichen-dark-1000);
    --content-surface: var(--lichen-dark-950);
    --content-text-primary: #f5f7fa;
    --content-text-muted: #b5bcae;      /* Figma dark muted (#d2dae5) sits too close to the ink; this keeps the light mode's step between them */
    --content-border-secondary: var(--lichen-dark-900);
    --grain-page: url("/assets/v7/grain-film-dark.png");
    --grain-page-blend: screen;
    --grain-panel: url("/assets/v7/grain-panel-dark.png");
    --grain-portrait: url("/assets/v7/grain-portrait-dark.png");
    --grain-blend: screen;
    --portrait-blend: normal;
    --head-blend-text: #fefefe;         /* the ground plus the ink: over the dark ground it reads as the ink, over a light image beneath, dark */
    --head-blend-muted: #c8d1c0;        /* the ground (#131512) plus the dark muted (#b5bcae) */
    --device-shadow: 0 4px 10.2px 0 rgba(0, 0, 0, 0.4), -1px -1px 24px 0 rgba(222, 242, 172, 0.06);
    --device-inset: inset 2px 2px 4.1px 0 rgba(0, 0, 0, 0.06);  /* as in light: at 0.25 it read as a dark line inside the stroke (Alex, Oct 30) */
    --diagram-rule: #363b33;
    --diagram-rule-faint: rgba(54, 59, 51, 0.6);
    --diagram-none: #6c7268;
    --diagram-cell: var(--lichen-dark-1000);
    --diagram-ink-soft: #a3ab9d;
    --diagram-cut: #e3906f;
    --diagram-new-fill: #25351a;
    --diagram-new-stroke: #a5cc72;
    --modes-fill: rgba(28, 31, 26, 0.5);
    --modes-shadow: 0 4px 8.3px -1px rgba(0, 0, 0, 0.4);
    --mode-on-fill: #f5f7fa;
    --mode-on-text: var(--lichen-dark-1000);
  }
}