@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap");

/* tokens/fonts.css */
/* SUBSTITUTION NOTICE: HessWerk's corporate typeface has not been supplied.
   Archivo (grotesque, European technical character) and IBM Plex Mono (technical
   data/labels) stand in from Google Fonts. Swap the two @import lines and the
   --font-* stacks in typography.css when the licensed family arrives. */



/* tokens/colors.css */
:root{
  /* Brand base palette */
  --navy-900:#050F1F;
  --navy-800:#0A1F3D;
  --navy-700:#122F55;
  --navy-600:#1C426F;
  --steel-600:#3C5A73;
  --steel-500:#4F718C;
  --steel-400:#7692A8;
  --steel-200:#B6C6D2;
  --anthracite-900:#22262A;
  --anthracite-700:#343A40;
  --anthracite-500:#5A6169;
  --grey-400:#9AA3AC;
  --grey-300:#C2C9D0;
  --grey-200:#D9DEE3;
  --grey-100:#ECEFF2;
  --grey-050:#F6F8F9;
  --white:#FFFFFF;

  /* Semantic status — restrained, desaturated */
  --status-success:#2E6B4F;
  --status-warning:#B07A1E;
  --status-danger:#9C3225;
  --status-info:#4F718C;
  --status-success-surface:#EAF1ED;
  --status-warning-surface:#F7F1E4;
  --status-danger-surface:#F5EAE8;
  --status-info-surface:#EDF1F5;

  /* Semantic aliases */
  --brand:var(--navy-800);
  --brand-strong:var(--navy-900);
  --brand-accent:var(--steel-500);

  --text-heading:var(--navy-800);
  --text-body:var(--anthracite-700);
  --text-muted:var(--anthracite-500);
  --text-faint:var(--grey-400);
  --text-inverse:var(--white);
  --text-inverse-muted:var(--steel-200);
  --text-link:var(--navy-700);
  --text-link-hover:var(--steel-500);

  --surface-page:var(--white);
  --surface-subtle:var(--grey-050);
  --surface-secondary:var(--grey-200);
  --surface-card:var(--white);
  --surface-inverse:var(--navy-800);
  --surface-inverse-strong:var(--navy-900);

  --border-hairline:var(--grey-200);
  --border-default:var(--grey-300);
  --border-strong:var(--anthracite-700);
  --border-inverse:rgba(255,255,255,.18);
  --focus-ring:var(--steel-500);

  --overlay-scrim:rgba(10,31,61,.72);
  --image-protect:linear-gradient(90deg,rgba(10,31,61,.86) 0%,rgba(10,31,61,.55) 48%,rgba(10,31,61,0) 100%); /* @kind other */
}

/* tokens/typography.css */
:root{
  --font-core:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-display:var(--font-core);
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */

  /* Type scale — 1.25 major third, tightened at display sizes */
  --fs-display-1:76px;
  --fs-display-2:56px;
  --fs-h1:42px;
  --fs-h2:32px;
  --fs-h3:24px;
  --fs-h4:19px;
  --fs-body-lg:19px;
  --fs-body:16px;
  --fs-body-sm:14px;
  --fs-caption:13px;
  --fs-label:12px;

  --lh-tight:1.04; /* @kind font */
  --lh-heading:1.16; /* @kind font */
  --lh-body:1.6; /* @kind font */
  --lh-relaxed:1.7; /* @kind font */

  --ls-display:-0.022em; /* @kind font */
  --ls-heading:-0.012em; /* @kind font */
  --ls-body:0em; /* @kind font */
  --ls-label:0.14em; /* @kind font */
  --ls-mono:0.02em; /* @kind font */

  /* Semantic roles */
  --text-style-eyebrow-size:var(--fs-label); /* @kind font */
  --text-style-eyebrow-tracking:var(--ls-label); /* @kind font */
  --measure-body:68ch; /* @kind other */
  --measure-lead:52ch; /* @kind other */
}

/* tokens/spacing.css */
:root{
  --space-0:0px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;
  --space-11:160px;

  --section-y:var(--space-10);
  --section-y-tight:var(--space-9);
  --gutter:var(--space-6);
  --container-max:1360px;
  --container-text:820px;
  --grid-columns:12; /* @kind other */

  /* Radii — near-square, technical */
  --radius-0:0px;
  --radius-1:2px;
  --radius-2:3px;
  --radius-pill:999px;
  --radius-card:var(--radius-1);
  --radius-control:var(--radius-1);

  --border-width-hairline:1px;
  --border-width-strong:2px;
  --rule-accent-width:3px;
  --control-h-sm:34px;
  --control-h-md:44px;
  --control-h-lg:54px;
}

/* tokens/elevation.css */
:root{
  --shadow-none:none;
  --shadow-1:0 1px 2px rgba(10,31,61,.06);
  --shadow-2:0 6px 18px rgba(10,31,61,.08);
  --shadow-3:0 18px 48px rgba(10,31,61,.14);
  --shadow-inset-hairline:inset 0 -1px 0 var(--border-hairline);
  --shadow-focus:0 0 0 2px var(--white),0 0 0 4px var(--focus-ring);
  --shadow-focus-inverse:0 0 0 2px var(--navy-800),0 0 0 4px var(--steel-400);
  --blur-panel:saturate(120%) blur(12px); /* @kind other */
}

/* tokens/motion.css */
:root{
  --ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
  --ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
  --dur-instant:80ms; /* @kind other */
  --dur-fast:140ms; /* @kind other */
  --dur-base:220ms; /* @kind other */
  --dur-slow:420ms; /* @kind other */
  --dur-reveal:700ms; /* @kind other */
  --motion-distance:12px; /* @kind spacing */
}

/* tokens/base.css */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-core);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-heading);font-weight:var(--fw-semibold);line-height:var(--lh-heading);letter-spacing:var(--ls-heading)}
p{margin:0}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid var(--border-default);transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover);border-color:var(--brand-accent)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
img{display:block;max-width:100%}
.hw-eyebrow{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--brand-accent)}
.hw-container{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.hw-rule{height:1px;background:var(--border-hairline);border:0}

/* shared/hw-site.css */
/* HessWerk — canonical runtime stylesheet for the React-rendered chrome/hero.
   Loaded by the design preview AND by every static production page (/assets/hw-site.css).
   Holds the keyframes and the responsive overrides that the inline-styled canonical
   components rely on. Tokens live in styles.css. */
body{background:var(--surface-page)}a{color:var(--brand-accent);text-decoration:none;border-bottom:1px solid transparent}a:hover{color:var(--brand);border-bottom-color:currentColor}@keyframes hwFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}html{scroll-snap-type:y proximity;scroll-padding-top:var(--header-h,96px)}main.hw-full>div:first-child{scroll-snap-align:start}main.hw-full>section{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;scroll-snap-align:start}main.hw-full>section>div{width:100%}
@media (max-width:1024px){:root{--fs-display-1:52px;--fs-display-2:40px;--fs-h1:33px;--fs-h2:26px;--fs-h3:21px;--section-y:var(--space-8);--container-max:100%}main [style*="grid-template-columns"],footer [style*="grid-template-columns"]{grid-template-columns:1fr!important;gap:var(--space-6)!important}main [style*="repeat(3,1fr)"],main [style*="repeat(4,1fr)"],main [style*="repeat(5,1fr)"],main [style*="repeat(6,1fr)"],main [style*="repeat(7,1fr)"],footer [style*="repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important}main.hw-full>section{min-height:0}html{scroll-snap-type:none}}
@media (max-width:768px){:root{--fs-display-1:38px;--fs-display-2:31px;--fs-h1:27px;--fs-h2:23px;--fs-h3:19px;--space-9:40px;--space-10:56px;--section-y:var(--space-8)}main [style*="grid-template-columns"],footer [style*="grid-template-columns"]{grid-template-columns:1fr!important}main [style*="100dvh"]{min-height:0!important}main [style*="680px"]{min-height:0!important}main figure div[style*="height"],main [style*="min(320px"],main [style*="min(440px"]{height:240px!important}}
/* production mount points: no layout of their own */
.hwmount{display:block}