
@font-face{font-family:"Funnel Display";src:url("assets/fd-400.81.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Funnel Display";src:url("assets/fd-500.e1.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Funnel Display";src:url("assets/fd-600.7a.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Funnel Display";src:url("assets/fd-700.57.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#121212;
  --hard:#000000;
  --stock:#F5F2EC;
  --stock-deep:#EAE4D8;
  --paper:#FFFFFF;
  --muted:#6B6B6B;
  --label:#7D7D7D;
  --blue:#228FFF;   --blue-tint:#3F9EFF;
  --orange:#FF951C; --orange-tint:#FFA53D;
  --purple:#AA6CE4; --purple-tint:#B47EE7;
  --green:#089D47;  --green-tint:#14A852;

  --t-display:clamp(2rem, 4.4vw, 3.5rem);
  --t-h:clamp(1.375rem, 1.9vw, 1.75rem);
  --t-h3:clamp(1.0625rem, 1.25vw, 1.1875rem);
  --t-lead:clamp(1.0625rem, 1.35vw, 1.25rem);
  --t-body:1.0625rem;
  --t-small:0.875rem;
  --t-eyebrow:0.8125rem;

  --radius:12px;
  --shell:min(1240px, 100% - 3rem);
  --section-y:clamp(4rem, 6.8vw, 8rem);
  --ease:cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:240ms;

  --measure:68ch;
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:7rem;
}
body{
  margin:0;
  font-family:"Funnel Display", system-ui, sans-serif;
  font-weight:400;
  font-size:var(--t-body);
  line-height:1.55;
  color:var(--ink);
  background:var(--stock);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,blockquote,table{margin:0}
.shell{width:var(--shell);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  a,.cta{transition:none!important}
  .cta:hover{transform:none}
}

.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("assets/grain.b7.png");
  background-repeat:repeat;background-size:64px 64px;
  mix-blend-mode:screen;opacity:0.30;
}

.display{font-size:var(--t-display);font-weight:600;line-height:1.12;text-wrap:balance}
.lead{font-size:var(--t-lead);font-weight:400;line-height:1.5}
.small{font-size:var(--t-small);line-height:1.45}
.eyebrow{
  font-size:var(--t-eyebrow);font-weight:500;line-height:1.2;
  letter-spacing:0.16em;text-transform:uppercase;
}
.dim{color:var(--muted)}
.on-ink{color:var(--paper)}
.on-ink .dim,.on-ink .eyebrow{color:rgba(255,255,255,0.6)}

.mark{display:block;width:118px;height:auto}

.cta{
  display:inline-flex;align-items:center;gap:0.75rem;
  padding:1.0625rem 1.5rem;
  background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);border-radius:var(--radius);
  font-weight:600;font-size:var(--t-body);line-height:1;
  text-decoration:none;
  box-shadow:2px 2px 0 var(--hard);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.cta:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--hard)}
.cta:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--hard)}
.cta:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

.top{
  position:sticky;top:0;z-index:60;
  background:rgba(245,242,236,0.92);
  backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid rgba(18,18,18,0.14);
}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.25rem 0}
.top nav{display:flex;align-items:center;gap:1.5rem}
.top nav a.lnk{font-size:0.9375rem;font-weight:500;text-decoration:none;color:var(--muted);transition:color var(--dur) var(--ease)}
.top nav a.lnk:hover,.top nav a.lnk[aria-current="page"]{color:var(--ink)}
.top .cta{
  padding:0.75rem 1.125rem;font-size:0.9375rem;
  margin-left:clamp(0.5rem,1.4vw,1.25rem);
  margin-right:2px;
}

.band{position:relative;overflow:hidden;padding:var(--section-y) 0}
.band--ink{background:var(--ink);color:var(--paper)}
.band--stock{background:var(--stock)}

.plate{padding-top:clamp(2.75rem,5vw,4.5rem);padding-bottom:clamp(2.5rem,4.4vw,4rem)}
.plate .display{max-width:18ch;margin-top:clamp(0.75rem,1.2vw,1.125rem)}
.plate__meta{
  margin-top:clamp(1.25rem,2vw,1.75rem);
  display:flex;flex-wrap:wrap;gap:0.5rem 1.5rem;align-items:baseline;
}
.plate__updated{font-size:var(--t-small);color:rgba(255,255,255,0.6)}
.plate__updated b{font-weight:600;color:var(--paper)}

.doc{
  display:grid;
  grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(2rem,4vw,4.5rem);
  align-items:start;
}
.doc>*{min-width:0}

.toc{position:sticky;top:7rem}
.toc__h{
  font-size:var(--t-eyebrow);font-weight:600;line-height:1.2;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);
  padding-bottom:0.75rem;margin-bottom:0.75rem;
  border-bottom:1px solid rgba(18,18,18,0.18);
}
.toc ol{list-style:none;padding:0;margin:0;counter-reset:toc}
.toc li{counter-increment:toc}
.toc a{
  display:grid;grid-template-columns:1.75rem 1fr;gap:0.25rem;
  padding:0.3125rem 0;
  font-size:var(--t-small);line-height:1.35;
  color:var(--muted);text-decoration:none;
  transition:color var(--dur) var(--ease);
}
.toc a::before{content:counter(toc) "."; font-weight:600;font-variant-numeric:tabular-nums}
.toc a:hover{color:var(--ink)}
.toc a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.toc li.toc--plain{counter-increment:none}
.toc li.toc--plain a::before{content:"·";color:var(--label)}

.prose{max-width:var(--measure)}
.prose p,.prose ul,.prose ol,.prose .callout,.prose .note,.prose .tw{
  font-size:var(--t-body);line-height:1.7;
}
.prose{overflow-wrap:break-word}

.prose h2{
  font-size:var(--t-h);font-weight:600;line-height:1.2;text-wrap:balance;
  margin-top:clamp(2.5rem,4vw,3.25rem);
  padding-top:clamp(2.5rem,4vw,3.25rem);
  border-top:1px solid rgba(18,18,18,0.14);
}
.prose>h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{
  font-size:var(--t-h3);font-weight:600;line-height:1.3;
  margin-top:clamp(1.75rem,2.6vw,2.25rem);
}
.prose>*+*{margin-top:1.125rem}
.prose h2+p,.prose h2+ul,.prose h2+ol,.prose h2+.callout,.prose h2+.note,.prose h2+.tw{margin-top:1.25rem}
.prose h3+p,.prose h3+ul,.prose h3+ol{margin-top:0.75rem}
.prose strong,.prose b{font-weight:600}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:0.16em;text-decoration-thickness:1px;text-decoration-color:rgba(18,18,18,0.35);transition:text-decoration-color var(--dur) var(--ease)}
.prose a:hover{text-decoration-color:var(--ink)}
.prose a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}

.prose ul,.prose ol{padding-left:1.5rem}
.prose ul{list-style:none;padding-left:1.375rem}
.prose ul>li{position:relative}
.prose ul>li::before{
  content:"";position:absolute;left:-1.375rem;top:0.68em;
  width:5px;height:5px;background:var(--label);
}
.prose ol{list-style:decimal}
.prose ol>li::marker{font-weight:600;color:var(--label)}
.prose li+li{margin-top:0.5rem}
.prose li>ul,.prose li>ol{margin-top:0.5rem}

.callout{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:0.875rem;
  align-items:start;
  padding:1.125rem 1.25rem;
  border:1px solid var(--ink);border-radius:var(--radius);
  box-shadow:2px 2px 0 var(--hard);
  background:var(--orange-tint);
}
.callout__i{font-size:1.25rem;line-height:1.35}
.callout p{margin:0}
.callout--blue{background:var(--blue-tint)}
.callout--green{background:var(--green-tint);color:var(--paper)}
.callout--purple{background:var(--purple-tint)}

.note{
  border-left:3px solid var(--blue);
  padding:0.125rem 0 0.125rem 1.125rem;
  color:var(--muted);
}
.note strong,.note b{color:var(--ink)}

.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tw:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.prose table{
  border-collapse:collapse;width:100%;min-width:34rem;
  background:var(--paper);
  border:1px solid var(--ink);border-radius:var(--radius);
  overflow:hidden;
  font-size:var(--t-small);line-height:1.55;
}
.prose thead th{
  text-align:left;font-weight:600;
  background:var(--stock-deep);
  border-bottom:1px solid var(--ink);
}
.prose th,.prose td{padding:0.75rem 0.9375rem;vertical-align:top}
.prose tbody tr+tr td{border-top:1px solid rgba(18,18,18,0.14)}
.prose td>p+p{margin-top:0.5rem}

.prose h2{position:relative}
.a-link{
  position:absolute;left:-1.75rem;top:calc(clamp(2.5rem,4vw,3.25rem) + 0.04em);
  width:1.75rem;
  font-size:0.75em;font-weight:600;color:var(--label);
  text-decoration:none;
  opacity:0;transition:opacity var(--dur) var(--ease);
}
.prose>h2:first-child .a-link{top:0.04em}
h2:hover .a-link,.a-link:focus-visible{opacity:1}
.a-link:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}
@media (max-width:1080px){
  .a-link{position:static;width:auto;margin-left:0.5rem;opacity:0}
  .a-link:focus-visible{opacity:1}
}

.sources{margin-top:clamp(3rem,5vw,4rem)}
.sources .prose-sub{font-size:var(--t-small);line-height:1.6;color:var(--muted)}
.sources .prose-sub>*+*{margin-top:0.75rem}
.sources .prose-sub h3{color:var(--ink);margin-top:1.75rem}
.sources .prose-sub>h3:first-child{margin-top:0}
.sources code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.9375em;
  background:var(--stock-deep);
  padding:0.1em 0.35em;border-radius:4px;
  overflow-wrap:break-word;
}

footer{background:var(--ink);color:rgba(255,255,255,0.5);padding:clamp(2.5rem,4.5vw,3.5rem) 0}
.foot__in{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.5rem 2rem;font-size:var(--t-small);
}
.foot__in .mark{width:104px;opacity:0.7}
.foot__nav{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem 1.5rem}
.foot__nav a{
  color:rgba(255,255,255,0.5);text-decoration:none;
  transition:color var(--dur) var(--ease);
}
.foot__nav a:hover,.foot__nav a[aria-current="page"]{color:var(--paper)}
.foot__nav a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}
.foot__c{margin:0}

@media (max-width:1080px){
  .doc{grid-template-columns:1fr;gap:clamp(2rem,4vw,2.75rem)}
  .toc{
    position:static;
    padding:1.25rem 1.375rem;
    background:var(--paper);
    border:1px solid var(--ink);border-radius:var(--radius);
    box-shadow:2px 2px 0 var(--hard);
  }
  .toc__h{border-bottom-color:rgba(18,18,18,0.14)}
  .toc ol{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.5rem;
  }
  .prose{max-width:none}
}
@media (max-width:760px){
  :root{--shell:min(1240px, 100% - 2.25rem)}
  .top nav a.lnk{display:none}
  .toc ol{grid-template-columns:1fr}
  .foot__in{flex-direction:column;align-items:flex-start}
}
@media (max-width:420px){
  :root{--shell:min(1240px, 100% - 1.75rem)}
  .callout{grid-template-columns:1fr;gap:0.5rem}
  .prose table{min-width:26rem}
}
