/* ndibe design tokens: colour. One source for every page (30 Oct 2026).
   Pages may add their own aliases, but must not redefine these values.
   --field-blush-soft is the paler blush for large fields (career pages).
   --wash-apricot is the apricot warm wash behind the About and Career intros. */
:root{
  --wash-apricot:#F7C59F;
  --bg:#FFFDF3;
  --ink:#5C1B1F;
  --ink-2:rgba(92,27,31,.95);
  --ink-3:rgba(92,27,31,.78);
  --accent:#E8842E;
  --accent-deep:#B25A10;
  --accent-text:#A2510E;
  --on-accent:#3A1206;
  --field-blush:#E7BCC4;
  --field-butter:#FCE383;
  --leaf:#3A4614;
  --leaf-mid:#52611F;
  --rule:rgba(92,27,31,.18);
  --rule-strong:rgba(92,27,31,.40);
  --quiet:#FBF3E4;
  --band:#3A4614;
  --on-blush:#5C1B1F;
  --petal:.40;
  --surface:#fff;
  --field-blush-soft:#F3DBE0;
  --cs-fade:linear-gradient(120deg,var(--field-blush),var(--field-butter)); /* pink-to-butter fade: Role and impact card, case-study insight */
}
html[data-pb="dark"]{
  --wash-apricot:#D88A5C;
  --bg:#1B1012;
  --ink:#F6EDE4;
  --ink-2:rgba(246,237,228,.94);
  --ink-3:rgba(246,237,228,.60);
  --accent:#F09346;
  --accent-deep:#F5B173;
  --accent-text:#F09346;
  --on-accent:#231208;
  --field-blush:#8A5560;
  --field-butter:#7A6A2C;
  --leaf:#C3D291;
  --leaf-mid:#A3B26A;
  --rule:rgba(246,237,228,.18);
  --rule-strong:rgba(246,237,228,.40);
  --quiet:#241518;
  --band:#38430F;
  --on-blush:#FFFDF3;
  --petal:.34;
  --surface:#241518;
  --field-blush-soft:#9C6B76;
  --cs-fade:linear-gradient(120deg,var(--field-blush),#946230); /* ends in warm amber; the dark butter reads as olive */
}

/* Type scale (30 Oct 2026). Display: Fraunces; reading and interface: Work Sans.
   Sizes are role-neutral steps; fluid steps scale with the viewport. */
:root{
  --fs-hero:clamp(2.99rem,6vw,6rem);
  --fs-title:clamp(2.6rem,5.1vw,5.3rem);
  --fs-section:clamp(2.08rem,3.77vw,3.51rem);
  --fs-numeral:clamp(2.6rem,3.6vw,3.6rem);
  --fs-heading:clamp(1.82rem,3.12vw,2.86rem);
  --fs-subhead:clamp(1.5rem,2.1vw,2rem);
  --fs-lede:clamp(1.3rem,1.85vw,1.85rem);
  --fs-card-title:clamp(1.3rem,1.8vw,1.6rem);
  --fs-body-lg:clamp(1.4rem,1.76vw,1.66rem);
  --fs-body:clamp(1.15rem,1.35vw,1.29rem);
  --fs-ui-lg:18px;
  --fs-ui:16px;
  --fs-ui-sm:14px;
  --fs-label:13px;
}

/* Shape: the cut corner (30 Oct 2026). Two opposite corners rounded, two square.
   --corner-* rounds top-left and bottom-right (buttons, photos, quotes);
   --corner-*-alt rounds top-right and bottom-left (cards, media panels).
   sm: controls, fields, tooltips · md: buttons, cards · lg: media panels and diagrams · xl: large photos and quotes.
   Art-directed portrait shapes (160px, 200px) stay local to their pages. */
:root{
  --cut-sm:14px; --cut-md:22px; --cut-lg:28px; --cut-xl:56px;
  --corner-sm:var(--cut-sm) 0 var(--cut-sm) 0; --corner-sm-alt:0 var(--cut-sm) 0 var(--cut-sm);
  --corner-md:var(--cut-md) 0 var(--cut-md) 0; --corner-md-alt:0 var(--cut-md) 0 var(--cut-md);
  --corner-lg:var(--cut-lg) 0 var(--cut-lg) 0; --corner-lg-alt:0 var(--cut-lg) 0 var(--cut-lg);
  --corner-xl:var(--cut-xl) 0 var(--cut-xl) 0; --corner-xl-alt:0 var(--cut-xl) 0 var(--cut-xl);
  --round:50%;
}

/* Elevation: three warm shadows, tinted with the burgundy ink rather than black.
   soft: media panels resting on the page · float: cards over images, menus, tooltips · lift: expanded diagrams and images. */
:root{
  --shadow-soft:0 12px 28px -20px rgba(58,18,6,.28);
  --shadow-float:0 18px 40px -18px rgba(43,12,14,.45);
  --shadow-lift:0 22px 52px -22px rgba(58,18,6,.42);
}

/* Bands and overlays (31 Oct 2026). The green band and the dark scrim look the same in both modes,
   so these values don't change in dark mode. */
:root{
  --on-band:#FCE383;              /* butter headings, links and buttons on the green band */
  --on-band-text:#FFFDF3;         /* body text on the band */
  --on-band-muted:rgba(253,248,242,.72);
  --on-band-faint:rgba(253,248,242,.6);
  --on-band-rule:rgba(252,227,131,.5);
  --on-band-divider:rgba(253,248,242,.25);
  --band-hover:#52611F;           /* hover fill for buttons on the band */
  --on-band-link-hover:#E7BCC4;   /* email link hover on the band */
  --scrim:rgba(30,10,8,.82);      /* behind expanded images and diagrams */
  --on-scrim:#FFFDF3;
  --on-scrim-rule:rgba(255,253,242,.5);
  --on-scrim-hover-text:#3A1206;
  --scrim-button:rgba(30,10,8,.6);/* solid close button sitting over a diagram, not the scrim */
  --glass:rgba(255,253,242,.82);  /* expand buttons sitting on images */
  --glass-hover:rgba(255,253,242,.95);
  --media-ctrl:rgba(20,14,15,.55);/* play and pause buttons sitting on images */
  --media-ctrl-hover:rgba(20,14,15,.75);
}

/* Motion (31 Oct 2026). Five durations and one easing for interface movement.
   quick: hover colour and background · short: menus, tooltips, small reveals · medium: the light and dark switch
   reveal: sections and images arriving as you scroll · slow: the insight words settling.
   Art-directed showpieces (the frangipani story, showreels) keep their own timing.
   Everything still respects a preference for reduced motion (site.css). */
:root{
  --dur-quick:.15s; --dur-short:.25s; --dur-medium:.5s; --dur-reveal:.7s; --dur-slow:1.5s;
  --ease:ease;
  /* Drift: the zoom on a showreel picture when you point at it or tab to its button. Hints that it plays. */
  --dur-drift:4s; --ease-drift:cubic-bezier(.25,.1,.25,1);
}

/* Spacing (31 Oct 2026). One scale on a 4px base with an 8px rhythm.
   Padding, margin and gap always come from here.
   Fixed steps for components (inside cards, buttons, lists, small gaps).
   Fluid steps for layout: they grow with the viewport between a phone and a laptop.
   xs: tight inline gaps · s: inside cards and lists · m: between related blocks · l: between groups
   xl: between sub-sections · 2xl: between sections · 3xl: around large bands.
   A few art-directed values (the 404 page, the Eagle Genomics journey, the homepage panel inset)
   stay as recorded one-offs in design-system-baseline.json. */
:root{
  --space-2:2px; --space-4:4px; --space-8:8px; --space-12:12px; --space-16:16px; --space-20:20px;
  --space-24:24px; --space-32:32px; --space-40:40px; --space-48:48px; --space-64:64px;
  --space-80:80px; --space-96:96px; --space-128:128px;
  --space-fluid-xs:clamp(4px,1vw,12px);
  --space-fluid-s:clamp(16px,2vw,24px);
  --space-fluid-m:clamp(20px,3vw,32px);
  --space-fluid-l:clamp(24px,4vw,48px);
  --space-fluid-xl:clamp(32px,5vw,64px);
  --space-fluid-2xl:clamp(48px,6vw,96px);
  --space-fluid-3xl:clamp(64px,8vw,128px);
}

/* Weight, line-height and letter-spacing (31 Oct 2026). Both faces are variable fonts, so every weight here is real.
   Weight: light for quiet captions · book for running text (the body default) · regular for Fraunces headings and plain UI
   · medium for labels, buttons and eyebrows · semibold for emphasis and figures. No faked bold.
   Line-height: none for single-line controls and numerals · display for the largest headings · heading for headings and titles
   · snug for ledes, captions and short UI text · body for reading text.
   Letter-spacing: tighter and tight for large display type · snug for headings · open for small text · caps for uppercase labels. */
:root{
  --fw-light:300; --fw-book:350; --fw-regular:400; --fw-medium:500; --fw-semibold:600;
  --lh-none:1; --lh-display:1.05; --lh-heading:1.15; --lh-snug:1.4; --lh-body:1.6;
  --track-tighter:-.028em; --track-tight:-.02em; --track-snug:-.01em; --track-open:.02em; --track-caps:.12em;
}

/* Breakpoints and layout grid (31 Oct 2026).
   Breakpoints can't be custom properties (CSS doesn't allow var() in @media), so these are the only widths
   a media query may use; the design system check enforces them.
     sm  max-width:480px   small phones
     md  max-width:640px   phones
     lg  max-width:768px   tablets and phones held sideways (min-width:769px above it)
     xl  max-width:900px   small laptops and large tablets
   One recorded exception: the portrait footer keeps its own 1100px step, where its closing line needs the room.
   Component-level changes use container queries instead, sized to the component (role and impact).
   Page width and margins: --page-max and --gutter (site.css). Layout grids:
     --grid-aside  a narrow label column beside the content (case-study chapters, reframes)
     --grid-cards  cards that wrap from one column on phones to as many 280px columns as fit */
:root{
  --grid-aside:minmax(0,.34fr) minmax(0,1fr);
  --grid-cards:repeat(auto-fit,minmax(min(280px,100%),1fr));
}

/* Control sizes (31 Oct 2026). The height of buttons and round icon buttons.
   lg: page actions · md: actions on cards and pictures, and round buttons on pictures (also the minimum touch size) · sm: quiet, repeated actions. */
:root{
  --control-sm:36px; --control-md:44px; --control-lg:56px;
  /* Feature media: showreel promos and standalone illustrations share one frame, so they line up.
     75% of the content width (full width from 900px down), at most 1500px wide; height grows with the screen. */
  --feature-w:75%; --feature-max:1500px; --feature-h:clamp(260px,38vw,560px);
}

/* Status (31 Oct 2026). Only for telling someone what happened: a form error or a message sent.
   Each pair is a text-and-icon colour and a pale background. Never use them for decoration, and never alone:
   a status always carries an icon and words, so it doesn't depend on colour. */
:root{
  --status-error:#A4231B; --status-error-bg:#FBE7E3;
  --status-success:#3A4614; --status-success-bg:#EDF0DA;
}
html[data-pb="dark"]{
  --status-error:#FF9E90; --status-error-bg:#3B1A1B;
  --status-success:#C3D291; --status-success-bg:#262D14;
}