@font-face{
  font-family:"PlayfairDisplay";
  src:url("fonts/playfair-display-var-latin.woff2") format("woff2-variations");
  font-weight:400 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"PlayfairDisplay Fallback";
  src:local("Georgia"),local("Times New Roman");
  size-adjust:112%;ascent-override:96%;descent-override:22%;line-gap-override:0%;
}
@font-face{
  font-family:"PlexSans";
  src:url("fonts/ibm-plex-sans-var-latin.woff2") format("woff2-variations");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+2018-201D,U+2013-2014,U+2026,U+25A0-25FF;
}
@font-face{
  font-family:"PlexSans Fallback";
  src:local("Helvetica Neue"),local("Arial");
  size-adjust:100%;ascent-override:92%;descent-override:24%;line-gap-override:0%;
}
@font-face{
  font-family:"PlexMono";
  src:url("fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2026,U+25A0-25FF;
}
@font-face{
  font-family:"PlexMono";
  src:url("fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2026,U+25A0-25FF;
}
@font-face{
  font-family:"PlexMono Fallback";
  src:local("SFMono-Regular"),local("Menlo"),local("Consolas");
  size-adjust:100%;ascent-override:92%;descent-override:24%;line-gap-override:0%;
}
:root{
  color-scheme:light dark;
  --paper:#F7F3EC;--paper-2:#FDFBF7;
  --ink:#11201C;--ink-soft:#3E504A;
  --muted:#5E6F67;          
  --faint:#55655E;          
  --faint-deco:#9AA8A1;     
  --honey:#C08A2E;          
  --ember:#D9532B;          
  --ember-text:#C4451F;     
  --rule:#E2DACB;--rule-strong:#C9BDA6;
  --edge:#9A8763;--honey-deep:#A87321;
  --grid-line:color-mix(in srgb,var(--honey) 20%,transparent);
  --grain-blend:multiply;--grain-alpha:.5;
  --serif:"PlayfairDisplay","PlayfairDisplay Fallback",ui-serif,Palatino,Georgia,serif;
  --sans:"PlexSans","PlexSans Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"PlexMono","PlexMono Fallback",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --max:1240px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#1B2F29;--paper-2:#26403A;
    --ink:#EDE7DA;--ink-soft:#C6D2CC;--muted:#9CACA5;--faint:#9DAAA4;
    --faint-deco:#6B7C74;--honey:#C08A2E;--ember:#E9663C;--ember-text:#F2926C;
    --rule:#3A554D;--rule-strong:#4E6E64;--edge:#76968C;--honey-deep:#C08A2E;
    --grid-line:color-mix(in srgb,var(--honey) 26%,transparent);
    --grain-blend:screen;--grain-alpha:.22;
  }
}
[data-theme="dark"]{
  --paper:#1B2F29;--paper-2:#26403A;--ink:#EDE7DA;--ink-soft:#C6D2CC;
  --muted:#9CACA5;--faint:#9DAAA4;--faint-deco:#6B7C74;--honey:#C08A2E;
  --ember:#E9663C;--ember-text:#F2926C;--rule:#3A554D;--rule-strong:#4E6E64;--edge:#76968C;--honey-deep:#C08A2E;
  --grid-line:color-mix(in srgb,var(--honey) 26%,transparent);
  --grain-blend:screen;--grain-alpha:.22;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink-soft);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased}
p{margin:0 0 14px}
strong{color:var(--ink);font-weight:600}
em{font-style:italic}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--honey);
  padding-bottom:1px}
a:hover{border-bottom-color:var(--ember);border-bottom-width:2px;padding-bottom:0}
a:focus-visible,summary:focus-visible,label:focus-within{
  outline:2px solid var(--ember);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);
  color:var(--paper);padding:10px 16px;border:0}
.skip:focus{left:8px;top:8px}
#grain{position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:var(--grain-alpha);mix-blend-mode:var(--grain-blend)}
.stage{position:relative;z-index:2}
#ruled{position:fixed;inset:0;z-index:0;pointer-events:none;
  max-width:var(--max);margin:0 auto;
  padding:0 clamp(20px,4.5vw,64px);
  background-image:repeating-linear-gradient(to right,
    var(--grid-line) 0 1px,transparent 1px calc(100% / 12));
  background-clip:content-box;background-origin:content-box;opacity:.85}
@media(max-width:760px){#ruled{
  background-image:repeating-linear-gradient(to right,
    var(--grid-line) 0 1px,transparent 1px calc(100% / 4))}}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4.5vw,64px)}
.lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;color:var(--muted)}
.lbl.risk{color:var(--ember-text)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
header{padding:clamp(40px,7vh,84px) 0 0}
.formhead{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
@media(max-width:760px){.formhead{grid-template-columns:repeat(2,1fr)}}
.formhead > div{padding:12px 16px 14px;border-left:1px solid var(--rule)}
.formhead > div:first-child{border-left:0;padding-left:0}
.formhead .v{font-family:var(--mono);font-size:13px;color:var(--ink);
  margin-top:6px;display:block;line-height:1.45}
.formhead .v .pip{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--ember);margin-right:7px;vertical-align:.04em}
h1{font-family:var(--serif);font-weight:500;color:var(--ink);
  font-size:clamp(54px,11.5vw,132px);line-height:.95;letter-spacing:-.02em;
  margin:clamp(28px,5vh,52px) 0 0;padding-bottom:clamp(20px,3vh,34px);
  border-bottom:1px solid var(--rule)}
.subject{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);padding:26px 0 40px;align-items:start}
@media(max-width:860px){.subject{grid-template-columns:1fr;gap:20px}}
.subject .claim{font-family:var(--sans);font-weight:400;color:var(--ink);
  font-size:clamp(21px,2.6vw,29px);line-height:1.3;letter-spacing:-.018em;
  margin:0;max-width:26ch}
.subject .note{font-family:var(--mono);font-size:13px;line-height:1.6;
  color:var(--muted);margin:0;max-width:44ch}
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:14px 0;border-top:1px solid var(--rule);
  border-bottom:2px solid var(--ink);position:sticky;top:0;z-index:5;
  background:var(--paper);
  margin-inline:calc(-1 * clamp(20px,4.5vw,64px));
  padding-inline:clamp(20px,4.5vw,64px)}
.controls .lbl{margin-right:8px}
.controls input{position:absolute;opacity:0;width:1px;height:1px}
.controls label{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);cursor:pointer;
  padding:9px 13px;min-height:44px;display:inline-flex;align-items:center;
  border:1px solid var(--edge);
  transition:color .2s var(--ease),border-color .2s var(--ease),
             background .2s var(--ease)}
.controls label:hover{color:var(--ink);border-color:var(--honey)}
.controls input:checked + label{color:var(--paper);background:var(--ink);
  border-color:var(--ink)}
.controls input:focus-visible + label{outline:2px solid var(--ember);outline-offset:3px}
.controls .n{font-family:var(--mono);font-size:11px;color:var(--faint);
  margin-left:auto;letter-spacing:.08em}
body:has(#f-live:checked)  .r:not([data-state="live"]),
body:has(#f-proto:checked) .r:not([data-state="prototype"]),
body:has(#f-rsch:checked)  .r:not([data-state="research"]),
body:has(#f-need:checked)  .r:not([data-needs="person"]){display:none}
.sheet{border-bottom:2px solid var(--ink);counter-reset:row}
@scope (.sheet){
  .r{
    display:grid;
    grid-template-columns:
      [id] 3.2rem
      [claim] minmax(0,1.6fr)
      [conf] 10rem
      [needs] minmax(0,1fr);
    column-gap:clamp(14px,2vw,30px);
    align-items:start;
    padding:20px 0 22px;
    border-top:1px solid var(--rule);
    scroll-margin-top:72px;
  }
  @media(max-width:980px){
    .r{grid-template-columns:[id] 2.6rem [claim] minmax(0,1fr) [conf] 9rem;
       row-gap:14px}
    .r > .needs{grid-column:claim/-1}
  }
  @media(max-width:620px){
    .r{grid-template-columns:[id] 2.2rem [claim] minmax(0,1fr);row-gap:12px}
    .r > .conf,.r > .needs{grid-column:claim/-1}
  }
  .r > .id{
    font-family:var(--mono);font-size:11px;letter-spacing:.06em;
    color:var(--faint);padding-top:.35em;
  }
  .r > .id::before{counter-increment:row;content:counter(row,decimal-leading-zero)}
  .r > .claim .state{
    font-family:var(--mono);font-size:10px;letter-spacing:.2em;
    text-transform:uppercase;font-weight:600;color:var(--muted);
    display:inline-block;margin-bottom:8px;
    border:1px solid var(--edge);padding:3px 7px;
  }
  .r[data-state="live"]    > .claim .state{color:var(--ink);border-color:var(--honey)}
  .r[data-state="research"]> .claim .state{color:var(--ember-text);border-color:var(--ember)}
  .r > .claim h3{
    font-family:var(--sans);font-weight:600;color:var(--ink);
    font-size:19px;line-height:1.3;letter-spacing:-.012em;margin:0 0 8px;
  }
  .r > .claim p{font-size:15.5px;line-height:1.56;color:var(--ink-soft);
    margin:0 0 10px;max-width:58ch}
  .r > .claim .limit{
    font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--ink-soft);
    border-left:2px solid var(--ember);padding:2px 0 2px 14px;margin:12px 0 0;
    max-width:56ch;
  }
  .r > .claim .limit b{color:var(--ember-text);font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;font-size:10px;
    display:block;margin-bottom:5px}
  .r > .conf .cap{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--faint);display:block;margin-bottom:9px}
  .scale{display:flex;gap:3px;margin-bottom:8px}
  .scale i{display:block;height:16px;flex:1;background:var(--edge);
    opacity:.30;transform-origin:bottom;transform:scaleY(.42)}
  .scale i.on{background:var(--honey-deep);opacity:1;transform:scaleY(1)}
  .r[data-state="research"] .scale i.on{background:var(--ember)}
  .r > .conf .word{font-family:var(--mono);font-size:12px;color:var(--muted);
    display:block;line-height:1.45}
  .r > .needs .cap{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--faint);display:block;margin-bottom:9px}
  .r > .needs ul{margin:0;padding:0;list-style:none}
  .r > .needs li{font-size:14px;line-height:1.5;color:var(--ink-soft);
    position:relative;padding-left:15px;margin-bottom:8px}
  .r > .needs li::before{content:"";position:absolute;left:0;top:.55em;
    width:7px;height:8px;background:var(--honey-deep);
    clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
  .r > .needs li b{color:var(--ink);font-weight:600}
  .r > .needs .ask{display:inline-flex;align-items:center;gap:9px;
    width:fit-content;
    font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--ember-text);margin-top:10px;
    border-bottom:1px solid var(--ember);padding:9px 0 4px;
    transition:gap .3s var(--ease)}
  .r > .needs .ask:hover{gap:15px;border-bottom-width:2px}
  .arw{display:inline-block;width:15px;height:7px;position:relative;flex:none}
  .arw::before{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;
    background:currentColor}
  .arw::after{content:"";position:absolute;right:0;top:50%;width:5px;height:5px;
    border-top:1px solid currentColor;border-right:1px solid currentColor;
    transform:translateY(-50%) rotate(45deg)}
  .r:target{background:var(--paper-2);
    box-shadow:inset 3px 0 0 var(--ember),inset -3px 0 0 var(--ember)}
  .r:target > .id::after{content:"";display:block;width:14px;height:2px;
    background:var(--ember);margin-top:8px;
    opacity:1;scale:1 1;transform-origin:left;
    transition:opacity .45s var(--ease-out),scale .45s var(--ease-out),
               display .45s allow-discrete}
  @starting-style{.r:target > .id::after{opacity:0;scale:0 1}}
}
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .sheet .scale i.on{animation:fill linear both;animation-timeline:view();
      animation-range:entry 8% cover 26%;
      animation-delay:calc(sibling-index() * -0.05s)}
    @keyframes fill{from{transform:scaleY(.42);opacity:.45}
                    to{transform:scaleY(1);opacity:1}}
    .sheet .r{animation:rise linear both;animation-timeline:view();
      animation-range:entry 0% cover 16%}
    @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  }
}
.aside{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);padding:40px 0 0}
@media(max-width:860px){.aside{grid-template-columns:1fr;gap:8px}}
.aside p{font-size:16px;line-height:1.6;color:var(--ink-soft);max-width:58ch}
.aside .hand{font-family:var(--mono);font-size:13.5px;line-height:1.7;
  color:var(--muted);border-top:1px solid var(--rule);padding-top:16px}
footer{font-family:var(--mono);font-size:11.5px;color:var(--faint);
  letter-spacing:.06em;line-height:2.1;padding:34px 0 90px;margin-top:44px;
  border-top:2px solid var(--ink)}
footer a{color:var(--faint);border-bottom-color:var(--rule-strong)}
footer a:hover{color:var(--ink)}
footer .s{color:var(--honey);margin:0 7px}
.proof{margin-top:12px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
@media print{
  *{animation:none !important;transition:none !important}
  .rv,.facets > a,.feed li,.sheet .r{opacity:1 !important;transform:none !important}
  .sheet .scale i.on{transform:scaleY(1) !important;opacity:1 !important}
  .thud::before{transform:scaleY(1) !important}
  .hl::after{transform:scaleX(1) !important}
  #grain,#comb,#ruled{display:none !important}
  .controls{position:static !important}
  body{background:#fff;color:#000;font-size:11pt}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
}
/* johnfkim.com — site layer. Built only from the Assay tokens and type steps above:
   no new colors, fonts or sizes. */
.sitenav{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;
  padding:14px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase}
.sitenav a{color:var(--muted);border-bottom:1px solid transparent;
  padding:9px 0 4px;display:inline-block}
.sitenav a:hover{color:var(--ink);border-bottom-color:var(--ember)}
.sitenav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--honey)}
.sitenav .home{margin-right:auto;color:var(--ink)}
.sitenav + header{padding-top:clamp(24px,4vh,48px)}
h1.t{font-size:clamp(46px,9vw,112px)}
h1.essay{font-size:clamp(36px,6vw,76px);line-height:1.02;letter-spacing:-.015em}

.arw{display:inline-block;width:15px;height:7px;position:relative;flex:none}
.arw::before{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;
  background:currentColor}
.arw::after{content:"";position:absolute;right:0;top:50%;width:5px;height:5px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg)}
.arw.l{transform:scaleX(-1)}

.sec{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  column-gap:clamp(24px,4vw,64px);padding:26px 0 30px;
  border-top:1px solid var(--rule);scroll-margin-top:24px}
.sec.first{border-top:2px solid var(--ink)}
@media(max-width:760px){.sec{grid-template-columns:1fr;row-gap:12px}}
.sec > .k .lbl{display:block}
.sec > .k .n{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--faint);display:block;margin-bottom:6px}
.sec > .k .xref{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--muted);display:inline-block;margin-top:12px}
.sec h2{font-family:var(--sans);font-weight:600;color:var(--ink);font-size:19px;
  line-height:1.3;letter-spacing:-.012em;margin:0 0 10px;max-width:40ch}
.sec h3{font-family:var(--sans);font-weight:600;color:var(--ink);font-size:15.5px;
  line-height:1.4;margin:22px 0 6px}
.sec h3:first-child{margin-top:0}
.prose p,.prose li{font-size:16px;line-height:1.6;color:var(--ink-soft);max-width:58ch}
.prose ul{margin:0 0 14px;padding:0;list-style:none}
.prose li{position:relative;padding-left:15px;margin-bottom:8px}
.prose li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:8px;
  background:var(--honey-deep);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.beat{font-family:var(--sans);font-weight:400;color:var(--ink);
  font-size:clamp(21px,2.6vw,29px);line-height:1.3;letter-spacing:-.018em;
  margin:22px 0 !important;max-width:26ch !important}
.pull{border-left:2px solid var(--honey);padding-left:16px}

.limit{font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--ink-soft);
  border-left:2px solid var(--ember);padding:2px 0 2px 14px;margin:14px 0 0;
  max-width:56ch}
.limit b{color:var(--ember-text);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;font-size:10px;display:block;margin-bottom:5px}
.askbox{margin-top:18px}
.askbox .lbl{display:block;margin-bottom:8px}
.ask{display:inline-flex;align-items:center;gap:9px;width:fit-content;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ember-text);margin-top:4px;
  border-bottom:1px solid var(--ember);padding:9px 0 4px;
  transition:gap .3s var(--ease)}
.ask:hover{gap:15px;border-bottom-width:2px}
.back{display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--muted);
  border-bottom-color:var(--rule-strong);padding:6px 0 4px}

.doors{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rule)}
.doors li{border-top:1px solid var(--rule)}
.doors a{display:grid;grid-template-columns:3.2rem minmax(0,1fr);
  column-gap:clamp(14px,2vw,30px);padding:14px 0;border:0;color:var(--ink);
  font-size:16px;line-height:1.5}
.doors a:hover{background:var(--paper-2)}
.doors .n{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--faint);padding-top:.3em}
.hint{font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--muted);
  max-width:56ch;margin:0 0 16px}

.tiers{width:100%;border-collapse:collapse;margin:6px 0 18px;max-width:720px}
.tiers th{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;color:var(--muted);text-align:left;
  padding:0 16px 8px 0;border-bottom:2px solid var(--ink)}
.tiers td{padding:14px 16px 14px 0;border-bottom:1px solid var(--rule);
  vertical-align:top;font-size:15.5px;line-height:1.5;color:var(--ink-soft)}
.tiers td.amt{font-family:var(--mono);font-size:13px;color:var(--ink);white-space:nowrap}
@media(max-width:620px){
  .tiers thead{display:none}
  .tiers,.tiers tbody,.tiers tr,.tiers td{display:block;width:100%}
  .tiers tr{border-bottom:1px solid var(--rule);padding:12px 0}
  .tiers td{border:0;padding:2px 0}
}
.essay-foot{font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--muted);
  max-width:56ch;border-top:1px solid var(--rule);padding-top:16px;margin-top:28px}
.prose .limit{font-size:13px;line-height:1.6;max-width:56ch}
.prose .beat{font-size:clamp(21px,2.6vw,29px);line-height:1.3;color:var(--ink);max-width:26ch}
.prose .hint,.prose .essay-foot{font-size:13px;line-height:1.7}
#grain{width:100%;height:100%}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:760px){.formhead > div:nth-child(odd){border-left:0;padding-left:0}}