/* ---------- self-hosted faces (latin) ---------- */
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque-wght.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(fonts/newsreader-wght.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(fonts/newsreader-wght-italic.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

  :root{
    --paper:#EDEFEC;
    --paper-2:#E2E5E0;
    --ink:#14171A;
    --ink-soft:#57615C;
    --rule:#C9CEC7;

    /* product colours */
    --panel:#2B3FE8;      /* Crit Panel */
    --bridge:#D9256E;     /* CRIT Bridge */
    --colour:#E8A21B;     /* CRIT ColourStudio */
    --companion:#197954;  /* Course companion — darkened from #1E8C63 for label contrast */
    --screen:#0F6E8C;     /* Screen Check */
    --bearing:#6B2FBF;    /* Bearing */

    --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
    --text:"Newsreader",Georgia,"Times New Roman",serif;
    --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

    --gutter:clamp(20px,5vw,64px);
    --max:1120px;
  }

  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:var(--text);font-size:clamp(17px,1.05vw,19px);line-height:1.62;
    font-synthesis-weight:none;
  }
  ::selection{background:var(--ink);color:var(--paper)}
  img{max-width:100%;height:auto;display:block}
  figure{margin:0}

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

  a{color:inherit}
  a:focus-visible,button:focus-visible{outline:2px solid var(--panel);outline-offset:3px;border-radius:2px}

  .skip{position:absolute;left:-9999px;background:var(--paper);color:var(--ink);padding:12px 16px;z-index:100;border:1px solid var(--ink)}
  .skip:focus{left:20px;top:20px}

  h1,h2,h3,.ui{font-family:var(--display);font-weight:700;letter-spacing:-.022em;line-height:1.02}
  .ui{font-weight:500;letter-spacing:0;line-height:1.3}
  .mono{font-family:var(--mono);font-size:12px;line-height:1.4;color:var(--ink-soft)}

  /* ---------- masthead ---------- */
  .masthead{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding-block:22px 0}
  .wordmark{
    font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.03em;
    text-decoration:none;display:inline-flex;align-items:center;gap:9px;
  }
  .wordmark svg{width:15px;height:auto;translate:0 1px}
  .wordmark svg path{fill:var(--bridge)}
  .nav{display:flex;gap:clamp(14px,2.4vw,30px);font-family:var(--display);font-size:15px;font-weight:500}
  .nav a{text-decoration:none;color:var(--ink-soft);padding-block:4px}
  .nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
  @media (max-width:560px){ .nav a:nth-child(2),.nav a:nth-child(3){display:none} }

  /* ---------- hero ---------- */
  .hero{padding-block:clamp(48px,9vw,104px) 0}
  .hero h1{font-size:clamp(38px,7.4vw,80px);margin:0 0 26px;max-width:15ch}
  .hero p.sub{margin:0;max-width:56ch;font-size:clamp(18px,1.5vw,21px);color:var(--ink-soft)}

  /* ---------- swatch bands ---------- */
  .band-label{
    display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    border-top:1px solid var(--ink);padding-top:8px;margin-top:clamp(40px,6vw,72px);
  }
  .band-label:first-of-type{margin-top:clamp(40px,7vw,76px)}
  .band-label b{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.02em}
  .band{display:grid;gap:4px;margin-top:4px;grid-template-columns:repeat(4,1fr)}
  .band.pair{grid-template-columns:repeat(2,1fr)}
  .swatch{
    display:block;text-decoration:none;color:#fff;padding:14px 14px 16px;min-height:132px;
    background:var(--sw);border:1px solid rgba(20,23,26,.28);
    transition:filter .16s ease;
  }
  .swatch:hover{filter:brightness(1.1)}
  .swatch.on-light{color:var(--ink)}
  .swatch b{font-family:var(--display);font-weight:700;font-size:clamp(15px,1.5vw,19px);letter-spacing:-.02em;display:block}
  .swatch em{font-style:normal;font-family:var(--display);font-weight:500;font-size:13px;display:block;margin-top:5px;opacity:.86}
  .swatch .st{display:block;margin-top:12px;font-family:var(--mono);font-size:11px;opacity:.86}
  @media (max-width:600px){
    .band-label{flex-direction:column;align-items:flex-start;gap:3px}
    .band-label .mono{font-size:11px;line-height:1.35}
  }
  @media (max-width:700px){
    .band{grid-template-columns:repeat(2,1fr)}
    .swatch{min-height:112px}
  }

  /* ---------- sections ---------- */
  section{padding-block:clamp(64px,10vw,120px)}
  .sec-head{
    display:flex;align-items:baseline;gap:16px;
    border-bottom:1px solid var(--ink);padding-bottom:12px;margin-bottom:clamp(32px,5vw,56px);
  }
  .sec-head h2{font-size:clamp(26px,3.4vw,38px);margin:0}
  .sec-head p{margin:0 0 0 auto;color:var(--ink-soft);font-size:15px;text-align:right;max-width:32ch}
  @media (max-width:640px){
    .sec-head{flex-direction:column;align-items:flex-start;gap:8px}
    .sec-head p{margin:0;text-align:left}
  }

  .fam-head{margin-bottom:clamp(28px,4vw,44px)}
  .fam-head h3{font-size:clamp(21px,2.4vw,28px);margin:0 0 8px}
  .fam-head p{margin:0;color:var(--ink-soft);max-width:52ch}
  .fam{border-top:1px solid var(--ink);padding-top:clamp(24px,3vw,36px);margin-top:clamp(56px,8vw,96px)}
  .fam:first-of-type{margin-top:0;border-top:0;padding-top:0}

  /* ---------- tool rows ---------- */
  .tool{
    display:grid;grid-template-columns:76px minmax(0,1fr) minmax(0,.85fr);
    gap:clamp(20px,3vw,44px);padding-block:clamp(28px,4vw,44px);
    border-bottom:1px solid var(--rule);align-items:start;
  }
  .tool:first-of-type{padding-top:0}
  .chip{width:56px;height:56px;border-radius:3px;background:var(--sw);border:1px solid rgba(20,23,26,.28)}
  .tool h3{font-size:clamp(22px,2.6vw,30px);margin:0 0 4px}
  .meta{font-family:var(--mono);font-size:12px;color:var(--ink-soft);margin:0 0 14px}
  .tool p.body{margin:0;max-width:46ch;color:var(--ink-soft)}
  .facts{margin:0;padding:0;list-style:none;font-family:var(--display);font-weight:500;font-size:14.5px;line-height:1.45}
  .facts li{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;padding-block:8px;border-top:1px solid var(--rule)}
  .facts li:first-child{border-top:0;padding-top:0}
  .facts .k{font-family:var(--mono);font-size:11px;color:var(--ink-soft);padding-top:2px}
  .get{
    display:inline-block;margin-top:18px;font-family:var(--display);font-weight:500;font-size:15px;
    text-decoration:none;border-bottom:2px solid var(--sw);padding-bottom:2px;
    transition:background .16s ease,color .16s ease;
  }
  .get:hover{background:var(--sw);color:#fff;border-color:transparent;padding-inline:6px}
  .get.on-light:hover{color:var(--ink)}
  .get.none{border-bottom-color:var(--rule);color:var(--ink-soft);cursor:not-allowed}
  .get.none:hover{background:none;color:var(--ink-soft);padding-inline:0}
  @media (max-width:860px){
    .tool{grid-template-columns:1fr;gap:14px}
    .chip{width:40px;height:40px}
    .facts li{grid-template-columns:76px minmax(0,1fr)}
  }
  @media (max-width:479px){ .facts li{grid-template-columns:1fr;gap:2px} }

  /* ---------- screens ---------- */
  .screens{display:grid;gap:12px;margin-top:clamp(24px,3vw,36px)}
  .screens.two{grid-template-columns:1fr 1fr}
  .screens.three{grid-template-columns:repeat(3,1fr)}
  .screen{border:1px solid var(--rule);background:var(--paper-2);overflow:hidden}
  .screen.bare{border:0;background:none}
  .cap{display:flex;flex-wrap:wrap;gap:4px 20px;justify-content:space-between;margin-top:10px}
  @media (max-width:599px){
    .screens.three{grid-template-columns:1fr 1fr}
    .screens.three .screen:last-child{display:none}
  }
  .hero-shot{margin-top:clamp(40px,6vw,72px);border:1px solid var(--rule);background:var(--paper-2);overflow:hidden}


  /* ---------- colour engine demo ---------- */
  .demo{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,52px);align-items:start}
  @media (max-width:820px){ .demo{grid-template-columns:1fr} }
  .demo-row{margin-bottom:18px}
  .demo-row label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    font-family:var(--mono);font-size:11px;color:var(--ink-soft);margin-bottom:7px}
  .demo-row output{font-family:var(--mono);font-size:11px;color:var(--ink)}
  .demo-row input[type=range]{width:100%;height:22px;margin:0;background:none;cursor:pointer;accent-color:var(--ink)}
  .demo-row input[type=range].hue{
    -webkit-appearance:none;appearance:none;height:14px;border:1px solid var(--rule);
    background:linear-gradient(to right,hsl(0 100% 50%),hsl(60 100% 50%),hsl(120 100% 50%),hsl(180 100% 50%),hsl(240 100% 50%),hsl(300 100% 50%),hsl(360 100% 50%));
  }
  .demo-row input[type=range].hue::-webkit-slider-thumb{
    -webkit-appearance:none;width:12px;height:22px;background:var(--paper);
    border:2px solid var(--ink);border-radius:2px;cursor:pointer}
  .demo-row input[type=range].hue::-moz-range-thumb{
    width:12px;height:22px;background:var(--paper);border:2px solid var(--ink);border-radius:2px;cursor:pointer}
  .demo fieldset{border:0;padding:0;margin:0 0 18px}
  .demo legend{font-family:var(--mono);font-size:11px;color:var(--ink-soft);padding:0;margin-bottom:8px}
  .chips{display:flex;flex-wrap:wrap;gap:5px}
  .chip-btn{
    font-family:var(--display);font-weight:500;font-size:13px;line-height:1;
    padding:8px 11px;border:1px solid var(--rule);background:var(--paper);color:var(--ink-soft);
    border-radius:2px;cursor:pointer;min-height:34px}
  .chip-btn:hover{border-color:var(--ink);color:var(--ink)}
  .chip-btn[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
  .demo-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
  @media (max-width:560px){ .demo-swatches{grid-template-columns:repeat(3,1fr)} }
  .sw-cell{
    border:1px solid rgba(20,23,26,.28);border-radius:2px;overflow:hidden;
    display:flex;flex-direction:column;justify-content:flex-end;min-height:132px;
    padding:0;cursor:pointer;font:inherit;text-align:left;background:none}
  .sw-cell .fill{flex:1;width:100%}
  .sw-cell .hex{
    font-family:var(--mono);font-size:11px;padding:7px 8px;background:var(--paper);
    color:var(--ink);border-top:1px solid rgba(20,23,26,.18);letter-spacing:.02em}
  .sw-cell:focus-visible{outline:2px solid var(--panel);outline-offset:2px}
  .demo-status{margin:12px 0 0;min-height:1.4em}

  /* ---------- note ---------- */
  .note{
    border-left:3px solid var(--colour);background:var(--paper-2);
    padding:16px 20px;margin-top:clamp(32px,4vw,48px);font-size:16.5px;
  }
  .note b{font-family:var(--display);font-weight:700}

  /* ---------- builds ---------- */
  .builds{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ink)}
  .build{background:var(--paper);padding:clamp(24px,3.4vw,40px)}
  .build.studio{background:var(--paper-2)}
  .build h3{font-size:clamp(21px,2.3vw,27px);margin:0 0 6px}
  .build .price{font-family:var(--mono);font-size:12px;color:var(--ink-soft);margin:0 0 20px}
  .build ul{margin:0;padding:0;list-style:none;font-size:16.5px}
  .build ul li{padding:10px 0 10px 22px;position:relative;border-top:1px solid var(--rule)}
  .build ul li::before{content:"";position:absolute;left:0;top:19px;width:10px;height:10px;border-radius:2px;background:var(--panel)}
  .build.studio ul li::before{background:var(--bridge)}
  @media (max-width:720px){ .builds{grid-template-columns:1fr} }

  /* ---------- method ---------- */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,28px)}
  .step{border-top:3px solid var(--sw);padding-top:12px}
  .step h3{font-size:19px;margin:0 0 6px}
  .step p{margin:0;color:var(--ink-soft);font-size:15.5px;line-height:1.45}
  @media (max-width:760px){ .steps{grid-template-columns:1fr 1fr} }
  @media (max-width:440px){ .steps{grid-template-columns:1fr} }

  /* ---------- studio ---------- */
  .teach{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
  .teach p{margin:0 0 18px;max-width:52ch}
  .quote{
    border-left:3px solid var(--companion);padding:2px 0 2px 20px;
    font-size:clamp(19px,2.1vw,24px);line-height:1.45;font-style:italic;margin:0;
  }
  .quote cite{display:block;font-style:normal;font-family:var(--mono);font-size:12px;color:var(--ink-soft);margin-top:14px}
  @media (max-width:760px){ .teach{grid-template-columns:1fr} }

  /* ---------- contact ---------- */
  .contact{background:var(--ink);color:var(--paper);margin-top:clamp(40px,6vw,80px)}
  .contact .wrap{padding-block:clamp(56px,8vw,96px)}
  .contact h2{font-size:clamp(30px,5vw,54px);margin:0 0 20px;max-width:18ch}
  .contact p{color:#A9B2AD;max-width:48ch;margin:0 0 32px}
  .routes{margin:0;padding:0;border-top:1px solid #333A36}
  .routes div{
    display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:16px;
    padding:16px 0;border-bottom:1px solid #333A36;align-items:baseline;
  }
  .routes dt{font-family:var(--mono);font-size:12px;color:#8B948F}
  .routes dd{margin:0}
  /* secondary routes: same grid, quieter type, so labels and addresses line up */
  .routes div.minor{padding:11px 0}
  .routes div.minor a{
    font-family:var(--mono);font-size:13px;color:var(--paper);
    text-decoration:none;border-bottom:1px solid #3D453F;
  }
  .routes div.minor a:hover{color:var(--colour);border-color:var(--colour)}
  @media (max-width:560px){
    .routes div{grid-template-columns:1fr;gap:6px}
  }
  .mailto{
    font-family:var(--display);font-weight:700;font-size:clamp(17px,1.6vw,20px);
    color:var(--paper);text-decoration:none;border-bottom:3px solid var(--colour);
    letter-spacing:-.02em;word-break:break-word;
  }
  .mailto:hover{color:var(--colour)}
  .contact a:focus-visible{outline-color:var(--colour)}

  footer{
    border-top:1px solid #333A36;margin-top:clamp(48px,7vw,80px);padding-top:24px;
    font-family:var(--mono);font-size:12px;color:#8B948F;
  }
  .foot-nav{display:flex;flex-wrap:wrap;gap:10px 22px;font-family:var(--display);font-weight:500;font-size:14.5px;margin-bottom:14px}
  .foot-nav a{color:var(--paper);text-decoration:none;border-bottom:1px solid #3D453F;padding-bottom:2px}
  .foot-nav a:hover{color:var(--colour);border-color:var(--colour)}
  .foot-nav.quiet a{color:#8B948F}
  .foot-credit{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;margin-top:22px;padding-top:18px;border-top:1px solid #333A36}
  footer a{color:#8B948F;text-decoration:none}
  footer a:hover{color:var(--paper)}


  /* ---------- intro ---------- */
  html.intro-lock:not(.intro-done),html.intro-lock:not(.intro-done) body{overflow:hidden}
  /* hidden by default: only shown when the head script arms it, so it is painted
     in the first frame instead of being dropped on top of an already-painted page */
  #intro{display:none}
  html.intro-lock #intro{
    position:fixed;inset:0;z-index:9999;background:var(--ink);
    display:grid;place-items:center;
    transform:translateY(0);
  }
  #intro .i-in{display:flex;flex-direction:column;align-items:center;width:min(420px,72vw)}
  #intro .i-mark{width:44px;height:auto;opacity:0;transform:scale(.62) translateY(10px)}
  #intro .i-mark path{fill:var(--bridge)}
  #intro .i-name{
    display:flex;gap:.34em;margin-top:22px;
    font-family:var(--display);font-weight:700;letter-spacing:-.035em;
    font-size:clamp(30px,6.4vw,46px);line-height:1;color:var(--paper);
  }
  #intro .i-name span{opacity:0}
  #intro .i-name .b{opacity:0;font-weight:500;color:#8B948F}
  #intro .i-rule{display:flex;gap:2px;width:100%;height:3px;margin-top:26px}
  #intro .i-rule i{flex:1;background:var(--c);transform:scaleX(0);transform-origin:left}
  #intro .i-line{
    margin-top:20px;font-family:var(--mono);font-size:12px;letter-spacing:.07em;
    color:#8B948F;opacity:0;text-align:center;
  }
  #intro .i-skip{
    position:absolute;top:20px;right:20px;background:none;border:0;cursor:pointer;
    font-family:var(--mono);font-size:11px;color:#6C756F;padding:10px 12px;opacity:0;
    min-height:44px;
  }
  #intro .i-skip:hover{color:var(--paper)}

  /* one continuous build: mark, wordmark, colour rule, line */
  #intro.run .i-mark{animation:iMark .46s cubic-bezier(.16,1,.3,1) .05s forwards}
  #intro.run .i-name .a{animation:iL .40s cubic-bezier(.16,1,.3,1) .24s forwards}
  #intro.run .i-name .b{animation:iR .40s cubic-bezier(.16,1,.3,1) .30s forwards}
  #intro.run .i-rule i{animation:iBar .34s cubic-bezier(.22,1,.36,1) forwards}
  #intro.run .i-rule i:nth-child(1){animation-delay:.50s}
  #intro.run .i-rule i:nth-child(2){animation-delay:.545s}
  #intro.run .i-rule i:nth-child(3){animation-delay:.59s}
  #intro.run .i-rule i:nth-child(4){animation-delay:.635s}
  #intro.run .i-rule i:nth-child(5){animation-delay:.68s}
  #intro.run .i-rule i:nth-child(6){animation-delay:.725s}
  /* the tagline is the point of the intro, so it lands early and is left alone */
  #intro.run .i-line{animation:iFade .42s ease-out .95s forwards}
  #intro.run .i-skip{animation:iFade .4s ease-out .45s forwards}

  /* one exit: the lockup releases upward while the panel dissolves to the page.
     No reverse, no second pause — the build is never undone, it is let go. */
  #intro.out{
    pointer-events:none;
    transition:opacity .60s cubic-bezier(.4,0,.2,1),transform .60s cubic-bezier(.4,0,.2,1);
    opacity:0;transform:scale(1.045);
  }
  #intro.out .i-in{
    transition:opacity .34s ease-out,transform .50s cubic-bezier(.4,0,.2,1);
    opacity:0;transform:translateY(-10px);
  }
  #intro.out .i-skip{transition:opacity .2s ease;opacity:0}

  @keyframes iMark{to{opacity:1;transform:none}}
  @keyframes iL{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
  @keyframes iR{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
  @keyframes iBar{to{transform:scaleX(1)}}
  @keyframes iFade{to{opacity:1}}

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *{animation:none !important;transition:none !important}
  }