/* Suchmugs sketches: shared faces, reset, control states and the motion switch. Each page sets its own tokens. */
@font-face{font-family:"Fraunces";src:url("fonts/Fraunces-VF.ttf") format("truetype");font-weight:100 900;font-style:normal}
@font-face{font-family:"DM Sans";src:url("fonts/DMSans-VF.ttf") format("truetype");font-weight:100 1000}
@font-face{font-family:"Bowlby One";src:url("fonts/BowlbyOne.ttf") format("truetype");font-weight:400}
@font-face{font-family:"Figtree";src:url("fonts/Figtree-VF.ttf") format("truetype");font-weight:300 900}
@font-face{font-family:"Bricolage Grotesque";src:url("fonts/Bricolage-VF.ttf") format("truetype");font-weight:200 800;font-stretch:75% 100%}
@font-face{font-family:"Instrument Sans";src:url("fonts/InstrumentSans-VF.ttf") format("truetype");font-weight:400 700;font-stretch:75% 100%}
@font-face{font-family:"Gabarito";src:url("fonts/Gabarito-VF.ttf") format("truetype");font-weight:400 900}
@font-face{font-family:"Caveat Brush";src:url("fonts/CaveatBrush.ttf") format("truetype");font-weight:400}
@font-face{font-family:"Young Serif";src:url("fonts/YoungSerif.ttf") format("truetype");font-weight:400}
@font-face{font-family:"Instrument Serif";src:url("fonts/InstrumentSerif.ttf") format("truetype");font-weight:400;font-style:normal}
@font-face{font-family:"Instrument Serif";src:url("fonts/InstrumentSerif-Italic.ttf") format("truetype");font-weight:400;font-style:italic}
@font-face{font-family:"Archivo";src:url("fonts/Archivo-VF.ttf") format("truetype");font-weight:100 900;font-stretch:62% 125%}
@font-face{font-family:"Climate Crisis";src:url("fonts/ClimateCrisis-VF.ttf") format("truetype");font-weight:400}
@font-face{font-family:"Bungee";src:url("fonts/Bungee.ttf") format("truetype");font-weight:400}
@font-face{font-family:"Caprasimo";src:url("fonts/Caprasimo.ttf") format("truetype");font-weight:400}
@font-face{font-family:"Jost";src:url("fonts/Jost-VF.ttf") format("truetype");font-weight:100 900}
@font-face{font-family:"Syne";src:url("fonts/Syne-VF.ttf") format("truetype");font-weight:400 800}
@font-face{font-family:"Rubik";src:url("fonts/Rubik-VF.ttf") format("truetype");font-weight:300 900}
@font-face{font-family:"Inter";src:url("fonts/Inter-VF.ttf") format("truetype");font-weight:100 900}
@font-face{font-family:"Space Grotesk";src:url("fonts/SpaceGrotesk-VF.ttf") format("truetype");font-weight:300 700}
@font-face{font-family:"Outfit";src:url("fonts/Outfit-VF.ttf") format("truetype");font-weight:100 900}
@font-face{font-family:"Lilita One";src:url("fonts/LilitaOne.ttf") format("truetype");font-weight:400}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;font-feature-settings:"tnum" 1;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
::selection{background:var(--accent,#b70a1a);color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Buttons: one solid colour, a slide-fill hover, the page's ring on focus, a press that sinks. .btn positions; .btn>.f is the face and sinks. */
.btn{position:relative;display:inline-flex;border:0;padding:0;background:none;cursor:pointer;text-decoration:none;border-radius:var(--r,6px);outline:0;min-height:48px}
.btn>.f{position:relative;display:inline-flex;align-items:center;gap:.6em;min-height:48px;padding:0 1.35em;border-radius:inherit;overflow:hidden;background:var(--bb,var(--accent,#b70a1a));color:var(--bc,#fff);font-weight:700;letter-spacing:-.005em;white-space:nowrap;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18);transition:transform 240ms cubic-bezier(.2,.9,.3,1.2),box-shadow 240ms cubic-bezier(.2,.9,.3,1.2),color 180ms cubic-bezier(.2,.7,.2,1)}
.btn>.f::before{content:"";position:absolute;inset:0;background:var(--bh,var(--ink,#1b1a16));transform:translateX(-101%);transition:transform 220ms cubic-bezier(.2,.7,.2,1)}
.btn>.f>*{position:relative}
@media(hover:hover){.btn:hover>.f::before{transform:translateX(0)}.btn:hover>.f{color:var(--bhc,#fff)}}
.btn:active>.f{transform:translateY(2px);box-shadow:inset 0 2px 3px rgba(0,0,0,.28);transition-duration:80ms}
.btn:focus-visible>.f{box-shadow:0 0 0 2px var(--ground,#fff),0 0 0 5px var(--accent,#b70a1a)}
.btn.ghost>.f{background:transparent;color:var(--ink,#1b1a16);box-shadow:inset 0 0 0 2px var(--ink,#1b1a16)}
.btn.ghost>.f::before{background:var(--ink,#1b1a16)}
@media(hover:hover){.btn.ghost:hover>.f{color:var(--ground,#fff)}}
.btn.ghost:active>.f{box-shadow:inset 0 0 0 2px var(--ink,#1b1a16),inset 0 2px 3px rgba(0,0,0,.28)}
.btn.ghost:focus-visible>.f{box-shadow:inset 0 0 0 2px var(--ink,#1b1a16),0 0 0 2px var(--ground,#fff),0 0 0 5px var(--accent,#b70a1a)}

/* Fields: 16px on phones, the page's ring on focus */
.field{display:block;width:100%;min-height:52px;padding:0 14px;border:2px solid var(--ink,#1b1a16);border-radius:var(--r,6px);background:#fff;font-size:16px;outline:0;transition:box-shadow 180ms cubic-bezier(.2,.7,.2,1),border-color 180ms cubic-bezier(.2,.7,.2,1)}
.field:focus-visible,.field:focus{border-color:var(--accent,#b70a1a);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent,#b70a1a) 22%,transparent)}

/* Text links: a 2px underline that thickens; focus ring */
.lnk{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;transition:text-decoration-color 180ms,color 180ms;outline:0;border-radius:3px}
@media(hover:hover){.lnk:hover{text-decoration-color:var(--accent,#b70a1a)}}
.lnk:focus-visible{box-shadow:0 0 0 3px var(--accent,#b70a1a)}

/* The sticky nav bar is each page's own; the skip link is shared */
.skip{position:absolute;left:12px;top:-60px;z-index:50;padding:10px 14px;background:var(--ink,#1b1a16);color:#fff;border-radius:6px;text-decoration:none}
.skip:focus{top:12px}

/* Motion: full by default; ?motion=reduce gives the finished still (base.js). Arrival only runs under full. */
html[data-motion="full"] .arr{opacity:0;transform:translateY(14px)}
html[data-motion="full"] .arr.in{opacity:1;transform:none;transition:opacity 420ms cubic-bezier(.2,.8,.2,1),transform 420ms cubic-bezier(.2,.8,.2,1)}
b,strong{font-weight:700}
.concept-badge{position:fixed;left:12px;bottom:12px;z-index:60;padding:7px 11px;border-radius:999px;background:rgba(27,26,22,.9);color:#fff;font:12px/1 "DM Sans",system-ui,sans-serif;letter-spacing:.01em}

/* the phone menu: the list drops under the bar */
@media(max-width:900px){.nav.open ul{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;margin:0;padding:8px 20px 14px;background:inherit;box-shadow:0 18px 30px -16px rgba(0,0,0,.5)}.nav.open ul a{display:block;padding:12px 0;font-weight:700}}