/* FONTS: self-hosted by fetch-fonts.js, do not hand-edit */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/chakra-petch-400-normal-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;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/chakra-petch-400-normal-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;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/chakra-petch-700-normal-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;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/chakra-petch-700-normal-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-400-normal-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-400-normal-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-500-normal-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-500-normal-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-700-normal-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-700-normal-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;
}
/* END FONTS */

/* SITE: referrals.scrolltheory.media. Tokens first; no colour outside :root. */
:root{
  --bg:#f6f4ee;--paper:#fbfaf6;--panel:#ffffff;--ink:#15150f;--text:#15150f;--soft:#3f3f38;--dim:#5f5f57;
  --line:#dedad0;--lime:#bfff00;--green:#2f6b00;--on-dark:#f6f4ee;--on-dark-soft:#c9c7bd;
  --font-display:'Chakra Petch',system-ui,sans-serif;--font-body:'Chakra Petch',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{background:var(--bg);color:var(--text);font:400 1.125rem/1.6 var(--font-body)}
img{max-width:100%;height:auto}
a{color:var(--green)}
.skip{position:absolute;left:-9999px;top:0;background:var(--lime);color:var(--ink);padding:.6rem 1rem;font:700 .9rem var(--mono);z-index:20}
.skip:focus{left:1rem;top:1rem}
.wrap{max-width:72rem;margin:0 auto;padding:0 1.25rem}
.narrow{max-width:46rem}

/* The top bar sticks, and the wordmark always goes home to the main site. */
.top{position:sticky;top:0;z-index:10;background:var(--bg);border-top:12px solid var(--lime);box-shadow:0 2px 0 var(--ink)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.9rem}
.wm{font:700 1.35rem var(--font-display);color:var(--ink);text-decoration:none}.wm span{color:var(--green)}
.top nav a{font-family:var(--mono);font-size:.85rem;color:var(--soft);text-decoration:none;margin-left:1.2rem;transition:color .15s var(--ease)}
.top nav a:hover{color:var(--ink);text-decoration:underline}

.eq{font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
section{padding-block:clamp(3rem,7vw,5.5rem)}
h1,h2,h3{font-family:var(--font-display)}
.hero h1{font-size:clamp(2.6rem,7vw,5rem);line-height:1.04;letter-spacing:-.02em;margin-top:.8rem;max-width:18ch}
/* The highlight covers the whole figure, numbers included (cap height, not x-height). */
mark{background:linear-gradient(transparent 14%,var(--lime) 14%,var(--lime) 92%,transparent 92%);color:inherit;padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lede{font-size:clamp(1.15rem,2.2vw,1.35rem);color:var(--soft);max-width:40rem;margin-top:1.2rem}
h2{font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.08;letter-spacing:-.015em;margin-top:.6rem}

/* Buttons: lift on hover, press on click. */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--lime);color:var(--ink);border:2px solid var(--ink);border-radius:8px;padding:.85rem 1.3rem;font:700 1rem var(--mono);text-decoration:none;box-shadow:5px 5px 0 var(--ink);cursor:pointer;transition:transform .15s var(--ease),box-shadow .15s var(--ease),background-color .15s var(--ease)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.btn.ghost{background:var(--panel)}
.row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}

/* Cards: calm at rest, lift with a hard shadow on hover. */
.lift{transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.lift:hover{transform:translateY(-4px);box-shadow:6px 6px 0 var(--ink)}
.grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2rem}
.card{background:var(--panel);border:2px solid var(--ink);border-radius:12px;padding:1.3rem 1.3rem 1.4rem}
.card h3{font-size:1.25rem;line-height:1.2}
.card p{color:var(--soft);margin-top:.4rem;font-size:1rem}
.steps{counter-reset:s;display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2rem;list-style:none}
.steps li{counter-increment:s;color:var(--ink);background:var(--panel);border:2px solid var(--ink);border-radius:12px;padding:1.3rem}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font:700 .85rem var(--mono);color:var(--green);letter-spacing:.1em;margin-bottom:.4rem}
.steps b{display:block;font-size:1.2rem}
.steps span{color:var(--soft);font-size:1rem}
.dark{background:var(--ink);color:var(--on-dark)}
.dark .eq{color:var(--lime)}
.dark .lede,.dark p{color:var(--on-dark-soft)}
.dark .lift:hover{box-shadow:6px 6px 0 var(--lime)}
.dark a{color:var(--lime)}
.tiers{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-top:2rem}
.tier{border:2px solid var(--on-dark);border-radius:14px;padding:1.5rem}
.tier.hot{background:var(--lime);color:var(--ink);border-color:var(--lime);box-shadow:8px 8px 0 var(--on-dark)}
.tier.hot p{color:var(--ink)}
.dark .tier.hot.lift:hover{box-shadow:10px 10px 0 var(--on-dark)}
.tier .amt{font-size:clamp(2.2rem,5vw,3rem);font-weight:700;line-height:1.05;margin:.4rem 0 .6rem}
.tier small{font:700 .78rem var(--mono);letter-spacing:.12em;text-transform:uppercase}

.form{background:var(--panel);border:2px solid var(--ink);border-radius:14px;padding:clamp(1.2rem,3vw,2rem);box-shadow:8px 8px 0 var(--ink);margin-top:2rem}
fieldset{border:0;margin-top:1.4rem;min-width:0}
legend{font:700 .8rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:.6rem}
.two{display:grid;grid-template-columns:1fr;gap:.9rem}
.two > div{min-width:0}
label{display:block;font-size:.95rem;font-weight:700;margin-bottom:.3rem}
label i{font-style:normal;font-weight:400;color:var(--dim)}
input,select,textarea{width:100%;font:400 1rem var(--mono);color:var(--ink);background:var(--paper);border:2px solid var(--line);border-radius:8px;padding:.7rem .8rem;transition:border-color .15s var(--ease)}
input:hover,select:hover,textarea:hover{border-color:var(--dim)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink)}
textarea{min-height:6rem;resize:vertical}
.check{display:flex;gap:.6rem;align-items:flex-start;margin-top:1.2rem;font-size:1rem}
.check input{width:1.2rem;height:1.2rem;margin-top:.25rem;flex:none}
/* Turnstile's flexible widget will not render below 300px; on a phone the padded
   card is narrower than that, so the widget bleeds into the padding instead of
   bursting the form. */
.cf-turnstile{margin-top:1.2rem;min-width:0}
@media (max-width:26rem){.cf-turnstile{margin-left:-1rem;margin-right:-1rem}}
.fine{font-size:.95rem;color:var(--soft)}
.fine li{margin:.35rem 0 0 1.2rem}
.prose p{margin-top:1rem;color:var(--soft)}
.prose h2{font-size:1.5rem;margin-top:2rem}
footer{border-top:1px solid var(--line);padding-block:2rem;font:400 .85rem var(--mono);color:var(--dim)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}
footer a{margin-left:1rem}

/* Explicit column counts that divide the item counts: 6 cards 1/2/3, 3 steps 1/3, 2 tiers 1/2. */
@media (min-width:40rem){.grid{grid-template-columns:repeat(2,1fr)}.two{grid-template-columns:repeat(2,1fr)}}
@media (min-width:48rem){.steps{grid-template-columns:repeat(3,1fr)}.tiers{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:40rem){.top nav a.wide{display:none}.btn{width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}.lift:hover,.btn:hover{transform:none}}