/* esefcosic.me — "Instrument" design system.
   Tokens defined here. No preset framework.
   Fonts are self-hosted, not loaded from a CDN: embedding Google Fonts leaks
   visitor IPs under GDPR and this site serves EU consumers. 63 KiB total. */

@font-face{font-family:"Archivo";src:url("../fonts/archivo-var.8f704806.woff2") format("woff2");
  font-weight:100 900;font-display:swap;font-style:normal}
@font-face{font-family:"Plex Mono";src:url("../fonts/plex-mono-400.08949f72.woff2") format("woff2");
  font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:"Plex Mono";src:url("../fonts/plex-mono-500.01d28544.woff2") format("woff2");
  font-weight:500;font-display:swap;font-style:normal}

:root{
  --ground:#0D1317;
  --surf:#141C21;
  --ink:#EDF3F5;
  --ink-2:#C8D3D8;
  --mut:#9DACB4;
  --sig:#F2A03D;
  --rule:rgba(237,243,245,.14);
  --rule-2:rgba(237,243,245,.42);

  --f-sans:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* a real middle register — the old scale jumped 17px straight to 176px */
  --s-mono:.6875rem;
  --s--1:.8125rem;
  --s-0:1.0625rem;
  --s-1:1.3125rem;
  --s-2:1.625rem;
  --s-3:2.125rem;
  --s-4:2.75rem;
  --hero:clamp(2.375rem,5.6vw,4.25rem);
  --display:clamp(3rem,10.5vw,8rem);

  --sp-1:.5rem; --sp-2:.75rem; --sp-3:1rem;  --sp-4:1.5rem; --sp-5:2rem;
  --sp-6:3rem;  --sp-7:4.5rem; --sp-8:6rem;  --sp-9:8rem;

  --shell:1120px;
  --gutter:clamp(1.25rem,5vw,3.5rem);
  --measure:66ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--f-sans);font-size:var(--s-0);line-height:1.6;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{margin:0;line-height:1.1;letter-spacing:-.025em;font-weight:800}
p{margin:0}
a{color:var(--sig);text-underline-offset:.18em;text-decoration-thickness:.06em;
  transition:color 150ms ease}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--sig);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;background:var(--sig);color:#0D1317;
  padding:var(--sp-2) var(--sp-3);z-index:20;font-weight:700}
.skip:focus{left:var(--gutter);top:var(--sp-2)}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.measure{max-width:var(--measure)}

/* label — styled by class ONLY. The previous build had `.section h2` (0,1,1)
   overriding `.eyebrow` (0,1,0), which rendered every label at double size. */
.label{font-family:var(--f-mono);font-size:var(--s-mono);font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--mut);margin:0}

.masthead{border-bottom:1px solid var(--rule)}
.masthead__in{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);
  align-items:center;justify-content:space-between;padding-block:var(--sp-4)}
.masthead__name{font-size:var(--s--1);font-weight:700;letter-spacing:-.01em;
  color:var(--ink);text-decoration:none}
.masthead__nav ul{display:flex;flex-wrap:wrap;gap:var(--sp-4);list-style:none;margin:0;padding:0}
.masthead__nav a{font-family:var(--f-mono);font-size:var(--s-mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--mut);text-decoration:none;
  display:inline-block;min-height:24px;padding-block:4px}
.masthead__nav a:hover{color:var(--sig)}

.hero{padding-block:var(--sp-7) var(--sp-6)}
.hero__grid{display:grid;gap:var(--sp-6)}
@media(min-width:56rem){.hero__grid{grid-template-columns:1.4fr .6fr;gap:var(--sp-7);align-items:center}}
.hero h1{font-size:var(--hero);letter-spacing:-.035em;line-height:.98;margin-top:var(--sp-4)}
.hero h1 .sig{color:var(--sig);display:block}
.hero__sub{margin-top:var(--sp-4);font-size:var(--s-1);line-height:1.45;
  color:var(--ink-2);max-width:42ch}
.hero__por{border:1px solid var(--rule);background:var(--surf);overflow:hidden}
.hero__por img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;
  filter:grayscale(.3) contrast(1.05)}

.strip{display:grid;grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
@media(min-width:48rem){.strip{grid-template-columns:repeat(4,1fr)}}
.strip__cell{padding:var(--sp-5) var(--sp-4);border-left:1px solid var(--rule)}
.strip__cell:first-child{border-left:0;padding-left:0}
@media(max-width:47.99rem){
  .strip__cell:nth-child(odd){border-left:0;padding-left:0}
  .strip__cell:nth-child(n+3){border-top:1px solid var(--rule)}
}
.strip__n{font-size:var(--s-4);font-weight:800;letter-spacing:-.035em;line-height:1}
.strip__n.sig{color:var(--sig)}
.strip .label{margin-top:var(--sp-2);line-height:1.5}

.section{padding-block:var(--sp-7)}
.section__h{font-size:var(--s-3);margin-top:var(--sp-3)}
.section__body{margin-top:var(--sp-4)}
.section__body p + p{margin-top:var(--sp-4)}
.section__body p{color:var(--ink-2)}

.td{padding-block:var(--sp-8);border-top:1px solid var(--rule)}
.td__name{font-size:var(--display);font-weight:800;letter-spacing:-.05em;
  line-height:.84;margin-top:var(--sp-5)}
.td__name .sig{color:var(--sig)}
.td__def{margin-top:var(--sp-5);font-size:var(--s-2);line-height:1.35;
  letter-spacing:-.02em;max-width:30ch;font-weight:600}
.sym{margin-top:var(--sp-6);display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
@media(min-width:48rem){.sym{grid-template-columns:repeat(3,1fr)}}
.sym__c{background:var(--ground);padding:var(--sp-4)}
.sym__c p{margin-top:var(--sp-2);font-size:var(--s--1);line-height:1.5;color:var(--ink-2)}
.td__close{margin-top:var(--sp-6);font-size:var(--s-1);line-height:1.5;color:var(--ink-2);
  max-width:52ch;border-left:2px solid var(--sig);padding-left:var(--sp-4)}

.co{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  margin-top:var(--sp-5)}
.co__c{background:var(--ground);padding:var(--sp-5) var(--sp-4)}
.co__c h3{font-size:var(--s-1);margin-top:var(--sp-3)}
.co__c p{margin-top:var(--sp-2);font-size:var(--s--1);line-height:1.55;color:var(--mut)}
.co__c a{display:inline-block;margin-top:var(--sp-3);font-family:var(--f-mono);
  font-size:var(--s-mono);letter-spacing:.1em;text-transform:uppercase;min-height:24px}

.ev{list-style:none;margin:var(--sp-6) 0 0;padding:0}
.ev li{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);justify-content:space-between;
  padding-block:var(--sp-3);border-top:1px solid var(--rule);font-size:var(--s--1)}
.ev li:last-child{border-bottom:1px solid var(--rule)}
.ev__yr{font-family:var(--f-mono);font-size:var(--s-mono);letter-spacing:.1em;
  color:var(--mut);white-space:nowrap}

.contact{border-top:1px solid var(--rule);padding-block:var(--sp-7)}
.contact__mail{display:inline-block;margin-top:var(--sp-4);font-size:var(--s-2);
  font-weight:700;letter-spacing:-.02em}
.contact__alt{margin-top:var(--sp-4);display:flex;flex-wrap:wrap;gap:var(--sp-4);
  list-style:none;padding:0}
.contact__alt a{font-family:var(--f-mono);font-size:var(--s-mono);letter-spacing:.12em;
  text-transform:uppercase;min-height:24px;display:inline-block}

/* bio page */
.bio{padding-block:var(--sp-7) var(--sp-6)}
.bio h1{font-size:var(--s-4);margin-top:var(--sp-3)}
.bio__lede{margin-top:var(--sp-4);font-size:var(--s-1);line-height:1.5;
  color:var(--ink-2);max-width:52ch}
.prose{max-width:var(--measure);margin-top:var(--sp-6)}
.prose p{color:var(--ink-2)}
.prose p + p{margin-top:var(--sp-4)}
.prose h2{font-size:var(--s-2);margin-top:var(--sp-7);margin-bottom:var(--sp-3);color:var(--ink)}
.prose blockquote{margin:var(--sp-4) 0 0;padding-left:var(--sp-4);
  border-left:2px solid var(--sig);color:var(--ink);font-size:var(--s-1);line-height:1.45}

.topics{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:grid;gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
@media(min-width:48rem){.topics{grid-template-columns:repeat(2,1fr)}}
.topics li{background:var(--ground);padding:var(--sp-4)}
.topics h3{font-size:var(--s-1);letter-spacing:-.02em}
.topics p{margin-top:var(--sp-2);font-size:var(--s--1);line-height:1.55;color:var(--mut)}

.kit{margin-top:var(--sp-5);border:1px solid var(--rule);background:var(--surf);
  padding:var(--sp-5) var(--sp-4)}
.kit dl{margin:0;display:grid;gap:var(--sp-4)}
.kit dt{font-family:var(--f-mono);font-size:var(--s-mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--mut);padding-top:3px}
.kit dd{margin:var(--sp-2) 0 0;font-size:var(--s--1);line-height:1.6;color:var(--ink-2)}
/* wide screens: labels in a fixed left column so the card isn't half empty */
@media(min-width:48rem){
  .kit dl{grid-template-columns:11rem 1fr;column-gap:var(--sp-5);row-gap:var(--sp-5);align-items:start}
  .kit dt{grid-column:1}
  .kit dd{grid-column:2;margin:0;max-width:68ch}
}

.footer{border-top:1px solid var(--rule);padding-block:var(--sp-5) var(--sp-7);
  font-size:var(--s--1);color:var(--mut)}
.footer ul{display:flex;flex-wrap:wrap;gap:var(--sp-4);list-style:none;margin:0 0 var(--sp-3);padding:0}
.footer a{display:inline-block;min-height:24px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---- masthead: contact reachable from the first screen (audit fix) ---- */
.masthead__mail{font-family:var(--f-mono);font-size:var(--s-mono);letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;border:1px solid var(--rule-2);
  padding:7px 12px;display:inline-block;min-height:24px}
.masthead__mail:hover{border-color:var(--sig);color:var(--sig)}
/* mobile: a two-page site does not need four nav items eating a fifth of the fold */
@media(max-width:47.99rem){
  .masthead__nav li:nth-child(n+3){display:none}
  .masthead__in{gap:var(--sp-3)}
}

/* ---- the loop, as a genuine sequence (so numbering is earned) ---- */
.loop{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  margin-top:var(--sp-5);list-style:none;padding:0}
@media(min-width:48rem){.loop{grid-template-columns:repeat(4,1fr)}}
.loop li{background:var(--ground);padding:var(--sp-4)}
.loop h3{font-size:var(--s-1);margin-top:var(--sp-3);letter-spacing:-.02em}
.loop p{margin-top:var(--sp-2);font-size:var(--s--1);line-height:1.55;color:var(--mut)}

/* ---- conference strip, directly under the facts ---- */
.conf{display:grid;gap:var(--sp-3);margin-top:var(--sp-5)}
@media(min-width:44rem){.conf{grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}}
.conf figure{margin:0}
.conf img{width:100%;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--rule)}
.conf figcaption{margin-top:var(--sp-2);font-family:var(--f-mono);font-size:var(--s-mono);
  letter-spacing:.11em;text-transform:uppercase;color:var(--mut);line-height:1.5}

/* four company cards read better 2x2 than squeezed into four columns */
@media(min-width:48rem){.co{grid-template-columns:repeat(2,1fr)}}
@media(min-width:68rem){.co{grid-template-columns:repeat(4,1fr)}}
.co__proof{margin-top:var(--sp-3);font-family:var(--f-mono);font-size:var(--s-mono);
  letter-spacing:.09em;text-transform:uppercase;color:var(--sig);line-height:1.6}

/* mobile fold: the four facts are the fastest proof on the page and were landing
   1.4 screens down. A tall 4:5 portrait was most of the cost — on narrow screens
   it becomes a band instead, and the headline steps down one notch. */
@media(max-width:47.99rem){
  .hero{padding-block:var(--sp-5) var(--sp-4)}
  .hero h1{font-size:clamp(2rem,8.4vw,2.375rem)}
  .hero__por img{aspect-ratio:16/9;object-position:50% 22%}
  .hero__grid{gap:var(--sp-4)}
  .hero__sub{font-size:var(--s-0)}
}