/*
  Adam v1 tokens: white + the current Adam pink (L2, 2 Oct 2026). Contract: docs/home-v1-contract.md.
  Aaron, 1 Oct: "white with the Adam pink as an accent", "I like the current Adam pink", so #FF2D92 exactly.
  Black and white carry the page. The sky / pastel system is dropped.

  Switch on <html>:  data-type="a|b|c"  (type pairing; a is the default)
                     data-color="pink|mono|dark"  (pink is the default)
  The shell maps ?type= and ?color= onto these attributes.

  Contract tokens: --bg --surface --ink --ink-2 --muted --line --accent --accent-ink
                   --dark-bg --dark-surface --dark-ink --dark-muted --dark-line
                   --font-display --font-body --font-mono --radius --space-section
  --accent-ink is the text or icon color ON an --accent fill (ink on pink is 5.7:1; white on pink
  would be 3.5:1 and fail AA at body sizes).

  Extras (optional, additive):
    --dark-accent, --dark-accent-ink   the accent for dark sections (white in mono, so it stays visible)
    --focus                            focus-ring color
    --radius-pill                      for pill buttons
    --weight-display --tracking-display --leading-display   how the display face is set in this type option
    --weight-body --tracking-label                           body weight; mono caps label tracking

  Dark sections: put data-surface="dark" on a section, and the base tokens (--bg, --ink, --accent …)
  remap to their --dark-* values inside it. Sections written against the base tokens then work on black
  in every color mode.

  Contrast on white (WCAG): --ink 19.8:1, --ink-2 14.3:1, --muted 5.3:1 (4.9:1 on --surface).
  Pink #FF2D92 on white is 3.5:1, so pink is ONLY for large type (24 px+, or 18.7 px+ bold), graphics,
  fills and focus rings. Small text stays ink. On dark: --dark-ink 19:1, --dark-muted 7.7:1, pink 5.7:1.
*/

/* ---------------------------------------------------------------- color: pink (default) */
/* Palette (Tong, 5 Oct): pink #ff2d92, white and black only. Every grey is a pure neutral, the same as black or
   white at opacity over the ground (e.g. --muted #6b6b6b = black 58% on white, --dark-muted #a3a3a3 = white 63%
   on #0a0a0a). Hex rather than rgba: the hero visuals parse these tokens as hex, and surfaces must stay opaque. */
:root,
[data-color="pink"] {
  --bg: #ffffff;
  --surface: #f5f5f5;
  --ink: #0a0a0a;
  --ink-2: #2a2a2a;
  --muted: #6b6b6b;
  --line: #e5e5e5;
  --accent: #ff2d92;
  --accent-ink: #0a0a0a;

  --dark-bg: #0a0a0a;
  --dark-surface: #161616;
  --dark-ink: #fafafa;
  --dark-muted: #a3a3a3;
  --dark-line: #2b2b2b;
  --dark-accent: #ff2d92;
  --dark-accent-ink: #0a0a0a;

  --focus: #ff2d92;
  --radius: 4px;
  --radius-pill: 999px;
  --space-section: clamp(80px, 10vw, 144px);
}

/* ------------------------------------------------- color: mono (black and white only) */
[data-color="mono"] {
  --accent: #0a0a0a;
  --accent-ink: #ffffff;
  --dark-accent: #fafafa;
  --dark-accent-ink: #0a0a0a;
  --focus: #0a0a0a;
}

/* --------------------------------------------------- color: dark (Monolith-heavy page) */
[data-color="dark"] {
  --bg: #0a0a0a;
  --surface: #161616;
  --ink: #fafafa;
  --ink-2: #d5d5d5;
  --muted: #a3a3a3;
  --line: #2b2b2b;
  --accent: #ff2d92;
  --accent-ink: #0a0a0a;

  --dark-bg: #000000;
  --dark-surface: #121212;
  --dark-ink: #fafafa;
  --dark-muted: #a3a3a3;
  --dark-line: #262626;
  --dark-accent: #ff2d92;
  --dark-accent-ink: #0a0a0a;
  --focus: #ff2d92;
}

/* ---------------------------------------- dark mode (Tong, 15 Oct, evening: "follow the system setting, across every
   page and animation"; the contract is docs/dark-mode.md). The head's theme line (tools/site/stamp.mjs) sets
   <html data-theme="dark|light"> before the first paint, from prefers-color-scheme or ?theme=dark|light, and live on a
   system change; in dark it also sets data-color="dark", so the dark palette above and the accent rules below apply
   (raspberry's hot pink #ff2d92 on black, with its black label). Here: what dark mode adds to that palette.
   Grid paper: --grid-minor / --grid-major, today's greys in light (#f0f0f0 / #e3e3e3 on white, 1.13:1 and 1.28:1) and
   the same strength on #0a0a0a in dark. A dark band ([data-surface="dark"]) is #161616 in dark mode, a step up from the
   page, so it stays a band. color-scheme only in dark: light stays exactly as it was (normal). */
:root { --grid-minor: #f0f0f0; --grid-major: #e3e3e3; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --grid-minor: #1a1a1a;
  --grid-major: #242424;
  --dark-bg: #161616;
  --dark-surface: #1f1f1f;
  --dark-line: #2e2e2e;
}

/* ---------------------------------------- a dark section inside any page: remap the base tokens */
[data-surface="dark"] {
  --bg: var(--dark-bg);
  --surface: var(--dark-surface);
  --ink: var(--dark-ink);
  --ink-2: var(--dark-ink);
  --muted: var(--dark-muted);
  --line: var(--dark-line);
  --accent: var(--dark-accent);
  --accent-ink: var(--dark-accent-ink);
  --focus: var(--dark-accent);
  background-color: var(--dark-bg);
  color: var(--dark-ink);
}

/* ------------------------------------------------- pink roles (8 Oct; Tong: "do the pink recolouring for the CTA
   and certain things"; docs/pink-usage.md; specimen /brand/pink-usage/). Pink is for actions and the current state,
   never big fields. Each role is built on the base tokens and declared again on [data-color] and [data-surface], so
   mono mode stays mono and a dark section recomputes them.
   Contrast: white on pink 3.48:1 (AA only for labels 18.7 px+ bold or 24 px+; the hover and press pinks pass AA with
   white); ink on pink 5.70:1 (AA at any size; --cta-fg-aa); pink on white 3.48:1 (marks and graphics, 3:1); pink on
   #0a0a0a 5.70:1 (text at any size). */
:root,
[data-color],
[data-surface] {
  /* the primary CTA: pink, white label; darker pink on hover and press (#FF2D92 with 16% and 28% black) */
  --cta-bg: var(--accent);
  --cta-fg: var(--cta-on-pink, #0a0a0a);     /* Tong, 7 Oct: black text on the pink CTA (5.70:1, AA at any size) */
  --cta-fg-aa: var(--accent-ink);            /* the AA label (5.70:1): swap --cta-fg to this if contrast must win */
  --cta-bg-hover: var(--cta-accent-hover, #d8277c);   /* white on it 4.67:1 */
  --cta-bg-press: var(--cta-accent-press, #ba236c);   /* white on it 5.92:1 */
  /* marks: section brackets "[ 01 / 06 ]", eyebrow squares and rules; a decorative index beside the real heading */
  --mark: var(--accent);
  /* the current state: the active tab, step or row indicator (a 2 px bar or a dot; labels stay ink) */
  --active: var(--accent);
  --active-weight: 2px;
  /* progress lines: a pink fill on a hairline track */
  --progress: var(--accent);
  --progress-track: var(--line);
  --progress-weight: 2px;
  /* link hover: the words stay ink, a pink underline comes in */
  --link-hover-line: var(--accent);
  --link-hover-thickness: 2px;
  /* focus: a 2 px ring, 2 px off (--focus is pink; black in mono) */
  --focus-ring: 2px solid var(--focus);
  --focus-offset: 2px;
  /* brand: the Adam "a" mark stays pink on black wherever the logo sits on a dark tile */
  --brand-mark: #ff2d92;
}
/* mono keeps every role black and white: the CTA is the black button (white on a dark section) with grey states */
/* ------------------------------------------------- Klein study (Tong, 7 Oct): ?accent=klein swaps every Adam pink for
   International Klein Blue (#002FA7). Pages set html[data-accent="klein"] before first paint (docs/klein-notes.md);
   motions read the same colours from /shared/accent.js. Blue is for the line being made and the one CTA; tints mix
   the blue ramp with cool greys so the page doesn't read as blue. Contrast: white on #002FA7 10.7:1 (black on it
   fails, so the CTA label is white). On dark grounds, see Brand's review note below: #587BE5 for marks and text, #496DDE for the CTA. */
:root[data-accent="klein"] {
  --klein-900: #001a5e; --klein-700: #00237d; --klein: #002fa7; --klein-400: #3359b9; --klein-300: #6682ca;
  --klein-200: #99acdc; --klein-100: #ccd5ed; --klein-50: #e6eaf6;
  --cool-900: #25272d; --cool-700: #4a4e57; --cool-500: #7a7f8a; --cool-300: #b3b7bf; --cool-200: #d3d6dc;
  --cool-100: #e9ebee; --cool-50: #f4f5f7;
}
:root[data-accent="klein"],
:root[data-accent="klein"] [data-color]:not([data-color="mono"]) {
  --accent: #002fa7; --accent-ink: #ffffff;
  --dark-accent: #587be5; --dark-accent-ink: #ffffff;            /* was #4a6fe3: see the review note below */
  --focus: #002fa7;
}
:root[data-accent="klein"],
:root[data-accent="klein"] [data-color]:not([data-color="mono"]),
:root[data-accent="klein"] [data-surface] {
  --cta-on-pink: #ffffff; --cta-on-accent: #ffffff;
  --cta-accent-hover: #00237d; --cta-accent-press: #001a5e;
  --brand-mark: #002fa7;
}
:root[data-accent="klein"] [data-surface="dark"] { --cta-accent-hover: #3359b9; --cta-accent-press: #002fa7; --brand-mark: #4a6fe3; }
/* Brand's review, 8 Oct: #4A6FE3 is 4.41:1 on #0a0a0a and white on it is 4.49:1, a hair under AA either way, so a dark
   ground takes two blues. Marks and text use #587BE5: 5.07:1 on #0a0a0a and 4.64:1 on #161616. The CTA fill is
   #496DDE, which carries a white label at 4.64:1. The a mark keeps its own #4A6FE3. A whole dark page
   (data-color="dark") gets the same, instead of #002FA7, which is 1.85:1 on black. */
:root[data-accent="klein"][data-color="dark"], :root[data-accent="klein"] [data-color="dark"]:not([data-color="mono"]) {
  --accent: #587be5; --accent-ink: #ffffff; --focus: #587be5;
  --cta-accent-hover: #3359b9; --cta-accent-press: #002fa7; --brand-mark: #4a6fe3;
}
:root[data-accent="klein"] [data-surface="dark"], :root[data-accent="klein"][data-color="dark"], :root[data-accent="klein"] [data-color="dark"]:not([data-color="mono"]) { --cta-bg: #496dde; }
/* ------------------------------------------------- Raspberry study (Tong, 8 Oct: "an enterprise pink"): ?accent=raspberry, two
   tiers. On white the working pink #D8277C: 4.7:1, so it carries text, thin lines and a white CTA label (4.67:1; hover
   #BA236C 5.9:1, press #9C1E5C 7.6:1). On black, and in the logo (--brand-mark), the brand's hot pink #FF2D92 stays,
   with its black label, as today. */
:root[data-accent="raspberry"],
:root[data-accent="raspberry"] [data-color]:not([data-color="mono"]):not([data-color="dark"]) {
  --accent: #d8277c; --accent-ink: #ffffff; --focus: #d8277c;
}
:root[data-accent="raspberry"],
:root[data-accent="raspberry"] [data-color]:not([data-color="mono"]):not([data-color="dark"]),
:root[data-accent="raspberry"] [data-surface]:not([data-surface="dark"]) {
  --cta-on-pink: #ffffff; --cta-on-accent: #ffffff;
  --cta-accent-hover: #ba236c; --cta-accent-press: #9c1e5c;
  --brand-mark: #ff2d92;
}
:root[data-accent="raspberry"][data-color="dark"],
:root[data-accent="raspberry"] [data-color="dark"],
:root[data-accent="raspberry"] [data-surface="dark"] {
  --cta-on-pink: #0a0a0a; --cta-on-accent: #0a0a0a; --cta-accent-hover: #d8277c; --cta-accent-press: #ba236c;
}
:root[data-accent="raspberry"][data-color="dark"], :root[data-accent="raspberry"] [data-color="dark"] { --accent: #ff2d92; --accent-ink: #0a0a0a; --focus: #ff2d92; }
[data-color="mono"] { --cta-on-pink: var(--accent-ink); --cta-on-accent: var(--accent-ink); --cta-accent-hover: #2a2a2a; --cta-accent-press: #444444; }
[data-color="mono"] [data-surface="dark"] { --cta-on-pink: var(--accent-ink); --cta-on-accent: var(--accent-ink); --cta-accent-hover: #d5d5d5; --cta-accent-press: #bdbdbd; }

/* ------------------------------------------------ type a: Switzer + Paper Mono, the live type (Tong, 15 Oct: H in
   the type study, /studies/type/, docs/type-paper-mono.md). Both self-hosted (the @font-face rules below, and
   /shared/fonts/fonts.css for frames without this file): Switzer is set to Paper Mono's cap height (size-adjust), so
   every size in the scale is as it was. Paper Mono's features (--mono-features, applied by site.css to the shell's mono
   pieces): the slashed zero on; contextual alternates, coding ligatures and the narrow space off; cv01 (the single-story
   a) only with html[data-mono-a="single"]. Geist + Geist Mono, the default until 15 Oct, is type k (?type=k). */
:root,
[data-type="a"] {
  --font-display: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Paper Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --mono-features: "zero" 1, "calt" 0, "ss01" 0, "ss03" 0, "cv01" var(--mono-cv01, 0);
  --weight-display: 600;
  --tracking-display: -0.045em;
  --leading-display: 1.04;             /* Switzer: its tallest ascender (f) and deepest descender (g) stack to 1.007 em, so .94 let the lines touch (Tong, 15 Oct, review b 3.1); 1.04 clears them by .03 em */
  --weight-body: 400;
  --tracking-label: 0.08em;
}

/* ------------------------------------------------ type k: Geist + Geist Mono, the default until 15 Oct (?type=k loads
   Geist from Google Fonts; it is no longer in the default load) */
[data-type="k"] {
  --font-display: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --mono-features: normal;
  --weight-display: 600;
  --tracking-display: -0.045em;
  --leading-display: 0.94;
  --weight-body: 400;
  --tracking-label: 0.08em;
}

/* ------------------------------------------------------- type b: IBM Plex, the technical one */
[data-type="b"] {
  --font-display: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --weight-display: 500;
  --tracking-display: -0.035em;
  --leading-display: 0.96;
  --weight-body: 400;
  --tracking-label: 0.06em;
}

/* ----------------------------------------------- type c: Newsreader + Inter, the editorial serif */
[data-type="c"] {
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --weight-display: 400;
  --tracking-display: -0.025em;
  --leading-display: 1;
  --weight-body: 400;
  --tracking-label: 0.06em;
}

/* ------------------------------------------- types d–j: Paper Mono with a display/body face (Tong, 15 Oct; the study
   /studies/type/, the numbers docs/type-paper-mono.md). The live default stays a (Geist + Geist Mono); a page shows a
   pairing with ?type=d…j. Paper Mono (Paper Design, OFL, variable 100–800) is self-hosted. Each face is set to Paper
   Mono's cap height, 0.71 em (font-size-adjust), so the type scale keeps every size and only the family changes:
   Geist 0 (0.71), Helvetica Neue −0.6 % (0.714), Inter −2.5 % (0.728), Hanken Grotesk +1.9 % (0.697), Switzer +4.4 %
   (0.680), Instrument Sans −1.4 % (0.720), IBM Plex Sans +1.7 % (0.698).
   Free to self-host: Geist, Inter, Hanken Grotesk, Instrument Sans, IBM Plex Sans (OFL), Switzer (Fontshare's FFL).
   Helvetica Neue has no free web licence: local() only, Hanken Grotesk stands in where it isn't installed. */
@font-face {
  font-family: "Switzer";
  src: url("/marketing/shared/fonts/switzer/Switzer-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap; size-adjust: 104.4%;   /* to Paper Mono's cap height */
}
@font-face {
  font-family: "Paper Mono";
  src: url("/marketing/shared/fonts/paper-mono/PaperMono-Variable.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
}
@font-face { font-family: "Helvetica Neue Local"; src: local("Helvetica Neue"), local("HelveticaNeue"); font-weight: 100 900; font-display: swap; }
:is([data-type="d"], [data-type="e"], [data-type="f"], [data-type="g"], [data-type="h"], [data-type="i"], [data-type="j"]) {
  --font-mono: "Paper Mono", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Paper Mono's features, for the mono text that asks for them (font-feature-settings: var(--mono-features)): the
     slashed zero on (dimensions read as CAD), contextual alternates and the coding ligatures off, the narrow space off;
     cv01 (the single-story a) with html[data-mono-a="single"] */
  --mono-features: "zero" 1, "calt" 0, "ss01" 0, "ss03" 0, "cv01" var(--mono-cv01, 0);
  --weight-display: 600; --tracking-display: -0.045em; --leading-display: 0.94; --weight-body: 400; --tracking-label: 0.08em;
  font-size-adjust: cap-height 0.71;
}
/* the font shorthand (font: 400 12px/18px …) resets font-size-adjust, so a pairing holds its correction on every
   element; it's a no-op for Paper Mono itself (0.71) */
:is([data-type="d"], [data-type="e"], [data-type="f"], [data-type="g"], [data-type="h"], [data-type="i"], [data-type="j"]) * { font-size-adjust: cap-height 0.71 !important; }
[data-mono-a="single"] { --mono-cv01: 1; }
[data-type="d"] { --font-display: "Geist", "Helvetica Neue", Arial, sans-serif; --font-body: var(--font-display); }                       /* the control */
[data-type="e"] { --font-display: "Helvetica Neue Local", "Hanken Grotesk", Helvetica, Arial, sans-serif; --font-body: var(--font-display); }  /* local() only */
[data-type="f"] { --font-display: "Inter", "Helvetica Neue", Arial, sans-serif; --font-body: var(--font-display); }
[data-type="g"] { --font-display: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; --font-body: var(--font-display); }
[data-type="h"] { --font-display: "Switzer", "Helvetica Neue", Arial, sans-serif; --font-body: var(--font-display); }
[data-type="i"] { --font-display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; --font-body: var(--font-display); }
[data-type="j"] { --font-display: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; --font-body: var(--font-display); }

/* --------------------------------------- zero-specificity defaults; any section rule wins */
:where(html) {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
}
:where(:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
/* no lone last word (Tong, 7 Oct): headings balance their lines; running text avoids a one-word last line where the
   browser can (text-wrap: pretty). Bind the last two words with &nbsp; where it still matters. */
:where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
:where(p, li, figcaption, blockquote, dd, button, summary) { text-wrap: pretty; }

/* ------------------------------------------- .btn-cta: the primary CTA, a 3D box on hover (Tong, 8 Oct)
   At rest it is the flat pink button. On hover the flat button becomes the front face of an extruded block. Hairline
   edges grow back from its corners, up and to the right at 45° like the 3D a. The back's top and right edges draw in,
   and then the top face fills with --cta-bg-hover and the side with --cta-bg-press, while the front lifts 1 px. It's
   one eased move, 260 ms, and it eases back to flat on the way out. A press compresses it to 2 px of depth.
   Tong, 15 Oct (1.2): the box ends without its outline. The hairlines draw while the box forms, then fade once the faces
   are in (an animation on --cta-lines, 420 ms), so the finished block is solid faces only.
   .btn-ink (and the site's .site-btn--book): the solid black Book a demo, with the same move (1.3). Its faces are the ink
   shades mono mode already uses (#2a2a2a top, #444 side; on a dark surface, where the button is white, #d5d5d5 and #bdbdbd).
   Focus-visible gets the hover state plus the ring.
   The depth draws outside the button's box (two pseudo-elements behind its label), so nothing in the layout moves.
   Give the button no ::before or ::after of its own, keep its parent from clipping 8 px up and right, and set --cta-bw
   if its border isn't 1 px. Touch screens get the flat button; reduced motion gets the states without the motion. */
@property --cta-depth { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --cta-fill { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --cta-lines { syntax: '<number>'; inherits: true; initial-value: 0; }
:is(.btn-ink, .site-btn--book) {
  --cta-bg: var(--ink); --cta-fg: var(--bg); --cta-bg-hover: #2a2a2a; --cta-bg-press: #444444;
}
:is([data-surface="dark"], [data-color="dark"]) :is(.btn-ink, .site-btn--book), [data-color="dark"]:is(.btn-ink, .site-btn--book) { --cta-bg-hover: #d5d5d5; --cta-bg-press: #bdbdbd; }
:is(.btn-cta, .btn-ink, .site-btn--book) {
  --cta-bw: 1px;
  --cta-ease: cubic-bezier(0.65, 0, 0.35, 1);      /* ease-in-out, as the logo construct's beats */
  position: relative;
  isolation: isolate;
  background: var(--cta-bg);
  color: var(--cta-fg);
  border: var(--cta-bw) solid var(--cta-bg);
  /* on the way out: the faces fade first, the depth eases back */
  transition: --cta-depth 260ms var(--cta-ease), --cta-fill 120ms ease-out, transform 260ms var(--cta-ease);
}
:is(.btn-cta, .btn-ink, .site-btn--book)::before,
:is(.btn-cta, .btn-ink, .site-btn--book)::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: calc(-1 * var(--cta-bw));
  bottom: calc(-1 * var(--cta-bw));
  top: calc(-1 * (var(--cta-bw) + var(--cta-depth)));
  right: calc(-1 * (var(--cta-bw) + var(--cta-depth)));
}
/* the faces: the top and the side, an L round the front's top-right (the front itself stays the button) */
:is(.btn-cta, .btn-ink, .site-btn--book)::before {
  --top: color-mix(in srgb, var(--cta-bg-hover) calc(var(--cta-fill) * 100%), transparent);
  --side: color-mix(in srgb, var(--cta-bg-press) calc(var(--cta-fill) * 100%), transparent);
  background:
    linear-gradient(to bottom right, var(--top) 50%, var(--side) 50%) right top / var(--cta-depth) var(--cta-depth) no-repeat,
    linear-gradient(var(--side), var(--side)) right bottom / var(--cta-depth) calc(100% - var(--cta-depth)) no-repeat,
    var(--top);
  clip-path: polygon(0 var(--cta-depth), var(--cta-depth) 0, 100% 0, 100% calc(100% - var(--cta-depth)), calc(100% - var(--cta-depth)) 100%, calc(100% - var(--cta-depth)) var(--cta-depth));
}
/* the hairlines: three depth edges from the front's corners, and the back's top and right edges */
:is(.btn-cta, .btn-ink, .site-btn--book)::after {
  --e: var(--cta-edge, var(--ink));
  --diag: linear-gradient(to bottom right, transparent calc(50% - 0.6px), var(--e) calc(50% - 0.6px), var(--e) calc(50% + 0.6px), transparent calc(50% + 0.6px));
  background:
    var(--diag) left top / var(--cta-depth) var(--cta-depth) no-repeat,
    var(--diag) right top / var(--cta-depth) var(--cta-depth) no-repeat,
    var(--diag) right bottom / var(--cta-depth) var(--cta-depth) no-repeat,
    linear-gradient(var(--e), var(--e)) right top / calc(100% - var(--cta-depth)) 1px no-repeat,
    linear-gradient(var(--e), var(--e)) right top / 1px calc(100% - var(--cta-depth)) no-repeat;
  opacity: var(--cta-lines);
}
/* the hairlines' one pass: in at once, held while the depth grows and the faces fill (to 260 ms), then gone */
@keyframes cta-lines { 0% { --cta-lines: 0; } 12% { --cta-lines: 1; } 62% { --cta-lines: 1; } 100% { --cta-lines: 0; } }
:is(.btn-cta, .btn-ink, .site-btn--book):focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
@media (hover: hover) and (pointer: fine) {
  /* on the way in: the hairlines at once, the depth over 260 ms, the faces fill once the lines are out, the lines go */
  :is(.btn-cta, .btn-ink, .site-btn--book):hover {
    --cta-depth: 8px; --cta-fill: 1;
    transform: translate(-1px, 1px);
    transition: --cta-depth 260ms var(--cta-ease), --cta-fill 150ms ease-out 110ms, transform 260ms var(--cta-ease);
    animation: cta-lines 420ms linear;
  }
  :is(.btn-cta, .btn-ink, .site-btn--book):active { --cta-depth: 2px; --cta-fill: 1; transform: translate(1px, -1px); transition-duration: 90ms; transition-delay: 0ms; }
}
/* .is-hover, .is-press and .is-focus hold a state, for specimens */
:is(.btn-cta, .btn-ink, .site-btn--book):is(:focus-visible, .is-focus, .is-hover) {
  --cta-depth: 8px; --cta-fill: 1;
  transform: translate(-1px, 1px);
  transition: --cta-depth 260ms var(--cta-ease), --cta-fill 150ms ease-out 110ms, transform 260ms var(--cta-ease);
  animation: cta-lines 420ms linear;
}
:is(.btn-cta, .btn-ink, .site-btn--book).is-press { --cta-depth: 2px; --cta-fill: 1; transform: translate(1px, -1px); }
:is(.btn-cta, .btn-ink, .site-btn--book).is-focus { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
@media (prefers-reduced-motion: reduce) {
  :is(.btn-cta, .btn-ink, .site-btn--book), :is(.btn-cta, .btn-ink, .site-btn--book):is(:hover, :active, :focus-visible, .is-focus, .is-hover) { transition: none; animation: none; }
}
/* ------------------------------------------------ .visually-hidden: read by screen readers, never seen (14 Oct)
   e.g. " (opens in a new tab)" inside a link that opens one. Out of the flow, so it moves nothing; !important so no
   section rule on the link's spans can bring it back. */
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }