/* Atelier free tools. Tokens copied from site/site.css (the template's own palette and type), nothing new.
   Motion contract: one curve, transform/opacity only, <= 300ms for UI, hover only on fine pointers,
   reduced motion = gentler, never nothing. Everything renders complete before any script runs. */
/* metric-matched fallbacks, so the web fonts swap in without moving the page (CLS). Measured 2026-11-03 with canvas
   measureText in Chromium: Instrument Serif vs Times New Roman width 0.8226, ascent .99, descent .31; Inter vs Arial
   width 1.0655, ascent .97, descent .24. Overrides are divided by size-adjust. */
@font-face{font-family:"Instrument Serif Fallback";src:local("Times New Roman"),local("TimesNewRomanPSMT"),local("Times");size-adjust:82.26%;ascent-override:120.35%;descent-override:37.69%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica");size-adjust:106.55%;ascent-override:91.04%;descent-override:22.52%;line-gap-override:0%}
:root{
  --paper:#f3f0ea;--raised:#fbf9f5;--ink:#181713;--soft:#57534b;--mute:#8b867b;
  --hair:rgba(24,23,19,.10);--line:rgba(24,23,19,.16);--accent:#9c4a29;--night:#1b1915;
  --on-dark:#f6f3ec;--on-dark-soft:rgba(246,243,236,.74);
  --ease:cubic-bezier(0.23,1,0.32,1);
  --display:"Instrument Serif","Instrument Serif Fallback",Georgia,serif;--text:Inter,"Inter Fallback",system-ui,sans-serif;
  --pad:20px;--max:1280px;
}
@media (min-width:900px){:root{--pad:48px}}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.dark :focus-visible{outline-color:var(--on-dark)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.mono{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);font-weight:500}
.display{font:400 clamp(46px,7vw,104px)/.92 var(--display);letter-spacing:-.025em;margin:0}
.h2{font:400 clamp(36px,5.2vw,76px)/.98 var(--display);letter-spacing:-.018em;margin:0}
.h3{font:400 clamp(24px,2.4vw,32px)/1.08 var(--display);letter-spacing:-.01em;margin:0}
em{font-style:italic}
.lede{font-size:clamp(16.5px,1.3vw,19px);color:var(--soft);max-width:44ch;margin:0;line-height:1.55}
.num{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;text-decoration:none}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* header + footer */
.top{border-bottom:1px solid var(--hair)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand{font:400 26px/1 var(--display);letter-spacing:-.01em;text-decoration:none}
.top nav{display:flex;gap:20px;font-size:14.5px}
.top nav a{text-decoration:none;color:var(--soft);padding-block:10px}
.top nav a[aria-current=page]{color:var(--ink)}
.foot{background:var(--night);color:var(--on-dark);padding-block:48px 40px;font-size:14.5px;border-top:1px solid rgba(246,243,236,.12)}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px}
.foot a{color:var(--on-dark-soft);text-decoration:none;padding-block:6px;display:inline-block}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 24px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:999px;background:var(--ink);color:var(--paper);text-decoration:none;font:500 15px var(--text);border:0;cursor:pointer;white-space:nowrap;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btn.light{background:var(--on-dark);color:var(--ink)}
.btn.ghost{background:none;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.btn.sm{min-height:44px;padding:0 18px;font-size:14px}
.btn[aria-disabled=true]{opacity:.45;pointer-events:none}
.btn:active{transform:translateY(1px)}
.link{display:inline-flex;gap:8px;align-items:center;text-decoration:none;font-weight:500;font-size:15px;border-bottom:1px solid currentColor;padding-block:10px 2px}
@media (hover:hover) and (pointer:fine){
  .btn{transition:transform 220ms var(--ease)}
  .btn:hover{transform:translateY(-2px)}
  .top nav a,.foot a{transition:opacity 160ms var(--ease)}
  .top nav a:hover,.foot a:hover{opacity:.7}
}

section{padding-block:clamp(56px,8vw,112px)}
.sec-head{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,48px)}

/* the closing call to action, shared by both tools */
.cta{background:var(--night);color:var(--on-dark)}
.cta .mono{color:var(--on-dark-soft)}
.cta .h2{margin-top:14px}
.cta .lede{color:var(--on-dark-soft)}
.cta .wrap{display:grid;gap:22px}
.cta .row{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:6px}
.cta .link{color:var(--on-dark)}
@media (min-width:900px){.cta .wrap{grid-template-columns:1.1fr .9fr;align-items:end;gap:48px}}

/* small facts list */
.facts{list-style:none;padding:0;margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.facts li{padding:14px 0;border-bottom:1px solid var(--line);display:grid;gap:4px}
.facts b{font-weight:500}
.facts span{color:var(--soft)}
@media (min-width:900px){.facts{grid-template-columns:repeat(2,1fr);column-gap:48px}}

@media (prefers-reduced-motion:reduce){
  .btn,.top nav a,.foot a{transition:opacity 160ms var(--ease)!important;transform:none!important}
}