/* NOSTO design system — bundled (self-hosted fonts, no @import chain, no third-party). Generated. */

/* Archivo 300 latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo 300 latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Archivo 400 latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo 400 latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Archivo 700 latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo 700 latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Mono 400 latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibmplexmono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono 400 latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibmplexmono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Mono 500 latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibmplexmono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono 500 latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibmplexmono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* NOSTO webfonts.
   Display + body: Archivo (geometric grotesque, one family, two weights in use).
   UI labels / nav / CTAs: IBM Plex Mono.
   SUBSTITUTION NOTE: no licensed brand fonts were supplied, so these are the
   closest Google Fonts matches to the reference aesthetic. Swap the @import for
   local @font-face rules when the licensed files arrive. */
:root{
  --font-display:"Archivo Expanded","Archivo",system-ui,sans-serif;
  --font-sans:"Archivo",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;
}

/* NOSTO palette — pure monochrome. All colour comes from photography.
   Never introduce a brand hue; if something needs emphasis, use contrast or scale. */
:root{
  /* base ramp */
  --nosto-black:#000000;
  --nosto-ink-900:#0A0A0A;   /* raised surface on black */
  --nosto-ink-800:#141414;   /* cards, media wells, placeholders */
  --nosto-ink-700:#1F1F1F;   /* hairline-adjacent fills, inputs */
  --nosto-grey-600:#5C5C5C;  /* disabled text on black */
  --nosto-grey-500:#8A8A8A;  /* THE muted grey — secondary text */
  --nosto-grey-300:#B4B4B4;  /* secondary text on ink, hover of grey-500 */
  --nosto-grey-100:#E6E6E6;  /* light-mode surface */
  --nosto-white:#FFFFFF;

  /* alpha utilities */
  --nosto-alpha-line:rgba(255,255,255,0.14);
  --nosto-alpha-line-strong:rgba(255,255,255,0.32);
  --nosto-alpha-line-invert:rgba(0,0,0,0.16);
  --nosto-alpha-scrim:rgba(0,0,0,0.55);   /* image protection scrim */
  --nosto-alpha-veil:rgba(0,0,0,0.92);    /* overlay menu */

  /* semantic aliases — prefer these in components */
  --surface-page:var(--nosto-black);
  --surface-raised:var(--nosto-ink-900);
  --surface-media:var(--nosto-ink-800);
  --surface-field:var(--nosto-ink-700);
  --surface-invert:var(--nosto-white);
  --surface-overlay:var(--nosto-alpha-veil);

  --text-primary:var(--nosto-white);
  --text-secondary:var(--nosto-grey-500);
  --text-tertiary:var(--nosto-grey-600);
  --text-invert:var(--nosto-black);
  --text-link:var(--nosto-white);
  --text-link-hover:var(--nosto-grey-300);

  --border-hairline:var(--nosto-alpha-line);
  --border-emphasis:var(--nosto-alpha-line-strong);
  --focus-ring:var(--nosto-white);
}

/* Rare inverted section (press kit, printed collateral, light case study). */
[data-nosto-theme="light"]{
  --surface-page:var(--nosto-white);
  --surface-raised:var(--nosto-grey-100);
  --surface-media:var(--nosto-grey-100);
  --surface-field:var(--nosto-grey-100);
  --surface-invert:var(--nosto-black);
  --text-primary:var(--nosto-black);
  --text-secondary:#6B6B6B;
  --text-tertiary:#9A9A9A;
  --text-invert:var(--nosto-white);
  --text-link:var(--nosto-black);
  --text-link-hover:#6B6B6B;
  --border-hairline:var(--nosto-alpha-line-invert);
  --border-emphasis:rgba(0,0,0,0.4);
  --focus-ring:var(--nosto-black);
}


/* NOSTO type scale.
   Three voices only: DISPLAY (Archivo Expanded 700/800, tight, uppercase for the
   wordmark-scale statements), SANS LIGHT (Archivo 300 for all reading copy),
   MONO (IBM Plex Mono 400/500, uppercase, tracked out, small only). */
:root{
  /* families are declared in fonts.css */
  --weight-display:800;
  --weight-heading:700;
  --weight-body:300;
  --weight-body-medium:400;
  --weight-mono:400;

  /* size / line-height / tracking triplets */
  --type-mega-size:clamp(4rem,17.5vw,17rem);   /* footer wordmark, full-bleed */
  --type-mega-lh:0.82;
  --type-mega-track:-0.03em;

  --type-display-size:clamp(2.75rem,7vw,7rem); /* hero statement */
  --type-display-lh:0.94;
  --type-display-track:-0.025em;

  --type-h1-size:clamp(2.25rem,4.4vw,4rem);
  --type-h1-lh:1.02;
  --type-h1-track:-0.02em;

  --type-h2-size:clamp(1.75rem,2.8vw,2.75rem);
  --type-h2-lh:1.08;
  --type-h2-track:-0.015em;

  --type-h3-size:1.5rem;   /* 24px */
  --type-h3-lh:1.2;
  --type-h3-track:-0.01em;

  --type-body-lg-size:1.25rem;  /* 20px — intro paragraphs */
  --type-body-lg-lh:1.55;

  --type-body-size:1.0625rem;   /* 17px — default reading size */
  --type-body-lh:1.6;

  --type-caption-size:0.875rem; /* 14px — credits, meta, legal */
  --type-caption-lh:1.5;

  --type-ui-size:0.75rem;       /* 12px — nav, CTAs, labels */
  --type-ui-lh:1;
  --type-ui-track:0.12em;

  --type-ui-sm-size:0.6875rem;  /* 11px — index numbers, tags */
  --type-ui-sm-track:0.16em;
}

/* Utility classes — components may use these or the raw tokens. */
.nosto-mega{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--type-mega-size);line-height:var(--type-mega-lh);letter-spacing:var(--type-mega-track);text-transform:uppercase}
.nosto-display{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--type-display-size);line-height:var(--type-display-lh);letter-spacing:var(--type-display-track)}
.nosto-h1{font-family:var(--font-sans);font-weight:var(--weight-heading);font-size:var(--type-h1-size);line-height:var(--type-h1-lh);letter-spacing:var(--type-h1-track)}
.nosto-h2{font-family:var(--font-sans);font-weight:var(--weight-heading);font-size:var(--type-h2-size);line-height:var(--type-h2-lh);letter-spacing:var(--type-h2-track)}
.nosto-h3{font-family:var(--font-sans);font-weight:var(--weight-heading);font-size:var(--type-h3-size);line-height:var(--type-h3-lh);letter-spacing:var(--type-h3-track)}
.nosto-body-lg{font-family:var(--font-sans);font-weight:var(--weight-body);font-size:var(--type-body-lg-size);line-height:var(--type-body-lg-lh)}
.nosto-body{font-family:var(--font-sans);font-weight:var(--weight-body);font-size:var(--type-body-size);line-height:var(--type-body-lh)}
.nosto-caption{font-family:var(--font-sans);font-weight:var(--weight-body);font-size:var(--type-caption-size);line-height:var(--type-caption-lh);color:var(--text-secondary)}
.nosto-ui{font-family:var(--font-mono);font-weight:var(--weight-mono);font-size:var(--type-ui-size);line-height:var(--type-ui-lh);letter-spacing:var(--type-ui-track);text-transform:uppercase}
.nosto-ui-sm{font-family:var(--font-mono);font-weight:var(--weight-mono);font-size:var(--type-ui-sm-size);line-height:1;letter-spacing:var(--type-ui-sm-track);text-transform:uppercase}


/* 8px base. --space-1 = 8px. Half-step (4px) exists only for optical nudges
   inside mono labels and hairline offsets. */
:root{
  --space-half:4px;
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:40px;
  --space-6:48px;
  --space-8:64px;
  --space-10:80px;
  --space-12:96px;
  --space-16:128px;
  --space-20:160px;
  --space-24:192px;
  --space-32:256px;

  /* layout */
  --gutter-page:var(--space-3);        /* mobile page inset */
  --gutter-page-lg:var(--space-6);     /* desktop page inset — 48px */
  --grid-columns:12; /* @kind other */
  --grid-gap:var(--space-2);           /* 16px between media cells */
  --measure-copy:64ch; /* @kind other */                 /* max reading width */
  --measure-lede:44ch; /* @kind other */
  --header-height:64px;
  --section-space:var(--space-16);     /* mobile rhythm between sections */
  --section-space-lg:var(--space-24);  /* desktop — 192px */
  --content-max:1680px;
}


/* Slow, confident, never bouncy. Nothing scales or springs; things fade and rise. */
:root{
  --ease-out-soft:cubic-bezier(0.16,1,0.30,1); /* @kind other */   /* default for reveals */
  --ease-inout-soft:cubic-bezier(0.65,0,0.35,1); /* @kind other */ /* overlays, image crossfade */
  --ease-linear:linear; /* @kind other */                          /* marquees only */

  --dur-instant:120ms; /* @kind other */   /* opacity on hover */
  --dur-fast:240ms; /* @kind other */      /* link + label states */
  --dur-base:420ms; /* @kind other */      /* small element reveal */
  --dur-slow:700ms; /* @kind other */      /* word-by-word reveal, overlay menu */
  --dur-cinematic:1200ms; /* @kind other *//* full-bleed media fade-in */

  --reveal-shift:16px;   /* fade-up travel distance */
  --stagger-word:60ms; /* @kind other */   /* per-word delay in headline reveals */
  --stagger-item:90ms; /* @kind other */   /* per-row delay in lists/grids */
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-base:1ms; /* @kind other */ --dur-slow:1ms; /* @kind other */ --dur-cinematic:1ms; /* @kind other */ --reveal-shift:0px;--stagger-word:0ms; /* @kind other */ --stagger-item:0ms /* @kind other */}
}


/* Square by default. Radius is reserved for the two circular affordances
   (hover-arrow puck, scroll cue) and the pill on filter chips. No shadows:
   depth comes from value, scrim gradients, and hairlines. */
:root{
  --radius-none:0px;
  --radius-pill:999px;
  --radius-circle:50%;

  --hairline:1px solid var(--border-hairline);
  --hairline-emphasis:1px solid var(--border-emphasis);
  --rule-weight:1px; /* @kind other */

  --shadow-none:none;
  /* the only permitted "shadow" is a protection gradient over imagery */
  --scrim-bottom:linear-gradient(to top,rgba(0,0,0,0.72) 0%,rgba(0,0,0,0.28) 38%,rgba(0,0,0,0) 72%); /* @kind other */
  --scrim-top:linear-gradient(to bottom,rgba(0,0,0,0.60) 0%,rgba(0,0,0,0) 60%); /* @kind other */
  --scrim-flat:rgba(0,0,0,0.35);

  --blur-overlay:blur(14px); /* @kind other */   /* only behind the fixed header over media */
}


/* Minimal element defaults so raw HTML in this system looks correct. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-sans);font-weight:var(--weight-body);font-size:var(--type-body-size);line-height:var(--type-body-lh);text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-family:var(--font-sans);font-weight:var(--weight-heading)}
p{margin:0}
img,video{display:block;max-width:100%}
a{color:var(--text-link);text-decoration:none;transition:color var(--dur-fast) var(--ease-out-soft),opacity var(--dur-fast) var(--ease-out-soft)}
a:hover{color:var(--text-link-hover)}
a:focus-visible,button:focus-visible{outline:1px solid var(--focus-ring);outline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--nosto-white);color:var(--nosto-black)}
hr{border:0;border-top:var(--hairline);margin:0}