/* field-note.css — the article layout for one Field Note.
   Tokens, masthead, footer and fonts come from writing.css. Body-copy sizes here
   are my best defaults, matched to the site's mono/coral/paper system: I don't have
   ai-org-chart.css to check against the essay's own .prose rules, so confirm these
   read right in the preview before treating them as final. */

.fn{display:grid;grid-template-columns:clamp(140px,16vw,220px) minmax(0,1fr);gap:0 clamp(16px,2vw,28px);
  padding:clamp(2.4rem,5vw,4rem) 0 clamp(2rem,4vw,3rem)}

.fn-meta{display:flex;flex-direction:column;gap:.5rem;padding-top:.5rem}
.fn-meta .tag{font-family:var(--disp);text-transform:uppercase;font-size:12px;letter-spacing:.06em;color:var(--coral)}
.fn-meta .date{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.fn-meta .rt{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}

.fn-title{font-family:var(--disp);text-transform:uppercase;font-size:clamp(38px,7vw,72px);line-height:.97;margin:0}
.fn-body .scribble{width:min(380px,58%);margin-top:.5rem}
.fn-body .scribble svg{display:block;width:100%;height:auto}

.prose{margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.prose p{font-size:15px;line-height:1.8;color:var(--muted);max-width:66ch;margin:0 0 1.1rem}
.prose ol,.prose ul{max-width:66ch;margin:0 0 1.2rem;padding-left:1.6rem;font-size:15px;line-height:1.8;color:var(--muted)}
.prose li{padding-left:.3rem}
.prose li::marker{color:var(--coral);font-weight:700}
.prose h2{font-family:var(--disp);text-transform:uppercase;font-size:clamp(24px,3vw,34px);line-height:1.02;color:var(--ink);max-width:66ch;margin:2.4rem 0 1rem}
.prose h2 .c{color:var(--coral)}
.prose a{color:var(--ink);text-decoration-color:var(--coral);text-underline-offset:3px}
.prose a:hover{color:var(--coral)}

.fn-sources{max-width:66ch;margin:2rem 0 0;padding-top:1rem;border-top:1.5px solid var(--line);
  font-size:12.5px;line-height:1.7;color:var(--faint)}
.fn-sources a{color:var(--muted);text-decoration-color:var(--coral);text-underline-offset:3px}

.fn-end{max-width:66ch;margin:1rem 0 0;font-size:13px;line-height:1.7;color:var(--muted)}
.fn-end a{color:var(--ink);text-decoration-color:var(--coral);text-underline-offset:3px}
.fn-end a:hover{color:var(--coral)}

@media(max-width:640px){
  .fn{grid-template-columns:1fr}
  .fn-meta{flex-direction:row;gap:1rem;padding-top:0;margin-bottom:1rem;flex-wrap:wrap}
}

/* ===== Reactions: "What do you think?" ===== */
.react{max-width:66ch;margin:2.4rem 0 0;padding-top:1.4rem;border-top:2px solid var(--line)}
.react-h .c{color:var(--coral)}
.react-h{font-family:var(--disp);text-transform:uppercase;font-size:clamp(20px,2.4vw,26px);line-height:1.1;margin:0 0 1rem}
.react-btns{display:flex;flex-wrap:wrap;gap:.6rem}
.react-b{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--ink);background:transparent;
  border:1.5px solid var(--line);padding:.55rem .95rem;cursor:pointer;transition:background .16s ease-out,color .16s ease-out,border-color .16s ease-out}
.react-b:hover:not(.is-on){border-color:var(--coral);color:var(--coral)}
.react-b:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.react-b.is-on{background:var(--coral);border-color:var(--coral);color:var(--paper);cursor:default}

.react-more{margin-top:1.4rem}
.react-more[hidden]{display:none}
.react-prompt{font-size:14.5px;line-height:1.7;color:var(--ink);margin:0 0 1rem}
.react-l{display:block;font-size:12px;letter-spacing:.04em;color:var(--muted);margin:0 0 .35rem}
.react-l span{color:var(--faint)}
.react-more textarea,.react-more input[type=text]{display:block;width:100%;font-family:var(--mono);font-size:14px;color:var(--ink);
  background:rgba(255,255,255,.4);border:1.5px solid var(--line);padding:.6rem .7rem;margin:0 0 1rem;border-radius:0}
.react-more textarea:focus,.react-more input[type=text]:focus{outline:2px solid var(--coral);outline-offset:1px}
.react-hp{position:absolute;left:-9999px;width:1px;height:1px}
.react-send{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper);background:var(--ink);
  border:0;padding:.65rem 1.1rem;cursor:pointer;transition:background .16s ease-out}
.react-send:hover{background:var(--coral)}
.react-status{font-size:13px;color:var(--muted);margin:.8rem 0 0;min-height:1em}