/* Darcy London brand kit, version 1.0, 5 October 2026
   Link this file before any other style sheet.
   Fonts load from ./fonts. Helvetica is a system font and is not bundled. */

@font-face{font-family:"Libre Baskerville";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/LibreBaskerville-Regular.woff2") format("woff2")}
@font-face{font-family:"Libre Baskerville";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/LibreBaskerville-Bold.woff2") format("woff2")}
/* Arimo is the open-source stand-in for Helvetica. It only loads where Helvetica is missing. */
@font-face{font-family:"Arimo";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/Arimo-Regular.woff2") format("woff2")}
@font-face{font-family:"Arimo";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/Arimo-Bold.woff2") format("woff2")}

:root{
  /* Colour */
  --print:#EFF2EC;
  --negative:#0A1A20;
  --slate:#38525A;
  --teal:#0B4F5A;
  --cyan:#16B3AE;
  --pale:#CDE7E0;
  --saffron:#F4A81D;
  --vermilion:#E8452C;
  --vermilion-ink:#B3301B;
  --line:#C5D0CB;
  --panel:#E0E8E3;
  --quiet:#52666C;

  /* Light leak */
  --leak:linear-gradient(90deg,#0B4F5A 0%,#16B3AE 34%,#F4A81D 68%,#E8452C 100%);
  --leak-glow:radial-gradient(70% 90% at 96% 10%,#F4A81D 0%,#EE7A22 16%,#E8452C 30%,rgba(232,69,44,0) 58%),radial-gradient(80% 70% at 0% 110%,#16B3AE 0%,rgba(22,179,174,0) 60%),linear-gradient(160deg,#0B4F5A 0%,#0A1A20 100%);

  /* Type */
  --font-head:"Helvetica Neue",Helvetica,"Nimbus Sans","Nimbus Sans L",Arimo,Arial,sans-serif;
  --font-body:"Libre Baskerville",Baskerville,"Baskerville Old Face",Georgia,serif;

  /* Type scale, 1.25 ratio from 16px */
  --step--1:.8125rem; --step-0:1rem; --step-1:1.25rem; --step-2:1.5625rem;
  --step-3:1.953rem; --step-4:2.441rem; --step-5:3.052rem; --step-6:3.815rem;

  /* Surface tokens, themed */
  --bg:var(--print); --fg:var(--negative); --fg-2:var(--slate); --link:var(--teal); --hot:var(--vermilion-ink);
  --grain-opacity:.11;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#081318; --panel:#0F262D; --fg:var(--print); --fg-2:var(--pale); --link:var(--cyan); --hot:var(--saffron);
  --line:#1D3A43; --quiet:#8FA9AE; --grain-opacity:.07; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#081318; --panel:#0F262D; --fg:var(--print); --fg-2:var(--pale); --link:var(--cyan); --hot:var(--saffron);
  --line:#1D3A43; --quiet:#8FA9AE; --grain-opacity:.07; color-scheme:dark}

/* Base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:var(--step-0);line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:500;letter-spacing:-.02em;line-height:1.12;color:var(--link);text-wrap:balance;margin:0 0 .5em}
h1{font-size:clamp(var(--step-4),6vw,var(--step-6));letter-spacing:-.03em}
h2{font-size:clamp(var(--step-3),4vw,var(--step-4))}
h3{font-size:var(--step-2)}
h4{font-size:var(--step-1)}
p{max-width:62ch}
a{color:var(--link);text-underline-offset:.2em}
a:focus-visible,button:focus-visible{outline:2px solid var(--link);outline-offset:3px}
blockquote{margin:1.5em 0;padding:0;font-size:var(--step-1);line-height:1.5;color:var(--fg-2)}
table{border-collapse:collapse;font-family:var(--font-head);font-variant-numeric:tabular-nums}
th{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;text-align:left;font-weight:500;color:var(--quiet);padding:.5rem .75rem .5rem 0;border-bottom:1px solid var(--fg)}
td{padding:.65rem .75rem .65rem 0;border-bottom:1px solid var(--line)}
code,pre{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}

/* Utilities */
.label{font-family:var(--font-head);font-size:.75rem;line-height:1;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--quiet)}
.caption{font-family:var(--font-head);font-size:var(--step--1);line-height:1.5;color:var(--fg-2)}
.accent{color:var(--hot)}

/* Grain: add class "grain" to any block with a solid or gradient fill */
body::after{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;background-image:url("grain.svg");opacity:var(--grain-opacity);mix-blend-mode:multiply}
:root[data-theme="dark"] body::after{mix-blend-mode:screen;filter:invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::after{mix-blend-mode:screen;filter:invert(1)}}
.grain{position:relative;isolation:isolate}
.grain::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background-image:url("grain.svg");opacity:.3;mix-blend-mode:multiply}

/* Light leak: use once per layout */
.leak-strip{height:6px;background:var(--leak)}
.grain>*{position:relative;z-index:2}
.leak-block{background:var(--leak-glow);color:var(--print)}
.leak-block .button{background:var(--saffron);color:var(--negative)}
.leak-block .button:hover{background:var(--print)}
.leak-block .label{color:var(--pale)}
.leak-block h1,.leak-block h2{color:var(--print)}
.leak-block .accent{color:var(--saffron)}

/* Buttons */
.button{display:inline-block;font-family:var(--font-head);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:.8rem 1.3rem;background:var(--teal);color:var(--print);border-radius:1px}
.button:hover{background:var(--negative)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .button{background:var(--cyan);color:var(--negative)}}
:root[data-theme="dark"] .button{background:var(--cyan);color:var(--negative)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}