.reading-page{max-width:900px;margin:auto;padding:65px 30px 85px}.reading-header{margin-bottom:40px}.reading-header h1{font-size:clamp(38px,5vw,66px);line-height:1.12;margin:20px 0;overflow-wrap:anywhere}.reading-label{font:11px/1.6 var(--mono);letter-spacing:1px;color:var(--muted);margin-top:35px}.reading-dek{font-size:20px;color:var(--muted);line-height:1.7;margin:22px 0}.reading-byline{font-size:13px;color:var(--muted)}.reading-nav{display:flex;flex-wrap:wrap;gap:12px 24px;padding:20px 0;border-block:1px solid var(--line);font-size:13px;margin-bottom:40px}.reading-nav a:hover{text-decoration:underline}.at-article{font-size:17px;line-height:1.85;overflow-wrap:anywhere}.at-article h2,.contact-offers h2{font-size:32px;letter-spacing:-1px;line-height:1.25;margin:36px 0 18px}.at-article h3,.contact-offers h3{font-size:24px;letter-spacing:-.5px;line-height:1.35;margin:25px 0 12px}.at-article p,.contact-offers p{margin:18px 0}.at-article a{color:#80532c;text-decoration:underline;text-underline-offset:3px}.at-article ul,.at-article ol{padding-left:25px}.at-article li{margin:9px 0}.at-article blockquote{margin:25px 0;padding:10px 25px;background:#e6e9dc;border-left:3px solid #889969}.at-article pre{overflow:auto;padding:20px;background:var(--dark);color:var(--paper);white-space:pre-wrap;font-size:13px}.at-article img{max-width:100%;height:auto;object-fit:contain}.at-article table{display:block;overflow:auto;max-width:100%;border-collapse:collapse}.at-article td,.at-article th{padding:12px;border:1px solid var(--line)}.at-panel,.at-prompt-panel,.at-takeaways{border-top:1px solid var(--line);margin-top:42px;padding-top:5px}.reading-back{margin-top:35px}.contact-offers{border-top:1px solid var(--line);padding-top:10px}@media(max-width:600px){.reading-page{padding:32px 6% 55px}.reading-header h1{font-size:38px}.reading-dek{font-size:17px}.at-article{font-size:16px}.at-article h2{font-size:27px}.reading-nav{font-size:12px;gap:12px 20px}.at-article blockquote{padding:8px 17px}}
/* Contact page: email first, what to include, and what each offer delivers */
.contact-actions{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin:26px 0 8px}.contact-address{font-size:15px;color:var(--muted)}.contact-address a{text-decoration:underline}
.contact-include{margin:10px 0 0 20px;padding-left:0;color:var(--muted);font-size:18px}
/* The offer links are already separated by " · " in the markup, so no extra margin (it made the dots lopsided) */
.contact-offer{padding:6px 0 18px;border-bottom:1px solid var(--line)}.offer-deliverable{font:12px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#566052}.offer-links a{text-decoration:underline;text-underline-offset:3px}.contact-learner{margin-top:30px}.contact-learner a{text-decoration:underline;text-underline-offset:3px}
/* ===== Field notes: one-idea articles and the learning-path index (2026-09-23) ===== */
.fn-page,.fn-index,.production-story,.fn-next{--sage:#e6e9dc;--sage-line:#cfd6c4;--moss:#566549;--card:#faf9f1;--link:#80532c;--brick:#c4532d}
.fn-label{font:500 11px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--moss);margin:0}
.fn-progress{position:fixed;inset:0 0 auto;height:3px;z-index:40;pointer-events:none}
.fn-progress span{display:block;height:100%;background:var(--orange);transform-origin:0 50%;transform:scaleX(0)}

/* The learning path: every idea as a numbered node, grouped by stage */
.fn-path-head{display:flex;justify-content:space-between;gap:16px;font:500 11px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.fn-stages{list-style:none;margin:0;padding:0;display:flex;gap:18px;align-items:flex-end}
.fn-stage{display:flex;flex-direction:column;gap:9px;min-width:0;flex:1 1 0}
.fn-stage:nth-child(1){flex-grow:1.5}
.fn-stage-name{font:500 10px/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-wrap:balance}
.fn-stage-name>span{color:#a3421d;margin-right:2px}
.fn-stage ol{list-style:none;margin:0;padding:0;display:flex;align-items:center}
.fn-stage li{position:relative;flex:1 1 auto;min-width:30px;display:flex}
.fn-stage li:last-child{flex:0 0 auto}
.fn-stage li:not(:last-child)::after{content:'';position:absolute;top:50%;left:30px;right:0;height:1px;background:#b3bca6}
.fn-node{position:relative;z-index:1;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid #9aa78c;background:var(--paper);font:500 11px/1 var(--mono);color:var(--ink);transition:background .2s,border-color .2s,transform .2s}
.fn-node:hover{border-color:var(--ink);transform:translateY(-2px)}
.fn-node.is-read{background:var(--lime);border-color:#8fa36c}
.fn-node[aria-current=page]{background:var(--orange);border-color:var(--orange);box-shadow:0 0 0 4px #ff805133}
.fn-node-title{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);width:max-content;max-width:240px;background:var(--dark);color:var(--paper);font:500 12px/1.4 'DM Sans',Arial,sans-serif;padding:7px 10px;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .15s;text-align:center}
.fn-node:hover .fn-node-title,.fn-node:focus-visible .fn-node-title{opacity:1}
/* Idea pages only (not the /articles/ map): stages never shrink below their nodes; edge tooltips hug the edges */
[data-idea-page] .fn-stage{min-width:min-content}
[data-idea-page] .fn-stage:first-child li:first-child .fn-node-title{left:0;transform:none;text-align:left}
[data-idea-page] .fn-stage:last-child .fn-node-title{left:auto;right:0;transform:none;text-align:right}
/* main.learning underlines li>a; the path nodes are numbered circles, not text links */
[data-idea-page] .fn-node{text-decoration:none;color:var(--ink)}

/* Article hero */
.fn-hero{max-width:1240px;margin:0 auto;padding:30px 5% 0}
.fn-hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,4.5vw,64px);align-items:center;padding:52px 0 60px}
.fn-kicker{font:500 11px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 22px}
.fn-kicker a{border-bottom:1px solid #9aa78c;padding-bottom:1px}
.fn-kicker a:hover{color:#ac441f;border-color:#ac441f}
.fn-hero h1{font-size:clamp(40px,4.4vw,68px);line-height:1.03;letter-spacing:-.05em;text-wrap:balance}
.fn-hero h1 em,.fn-next-feature h2 em,.fn-note h3 em,.fn-index-hero h1 em{letter-spacing:-.015em}
.fn-dek{font-size:20px;line-height:1.6;color:#454e43;margin:24px 0 0;max-width:34em;text-wrap:pretty}
.fn-byline{display:flex;align-items:center;gap:14px;margin:30px 0 0;font-size:14px;line-height:1.5}
.fn-byline img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:1px solid #b3bca6}
.fn-byline>span>span{color:var(--muted);font-size:13px}
.fn-hero-art{margin:0;background:#f7ecdd;border:1px solid #e7d2b6;box-shadow:0 26px 60px #1d2a1a22;overflow:hidden}
.fn-hero-art img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

/* The idea in one minute */
.fn-brief{max-width:1240px;margin:0 auto;padding:0 5%}
.fn-brief>.fn-label{margin-bottom:12px}
.fn-brief dl{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--sage);border:1px solid #d7ddce}
.fn-brief dl>div{padding:24px 26px 26px;border-left:1px solid var(--sage-line)}
.fn-brief dl>div:first-child{border-left:0}
.fn-brief dt{font:500 11px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--moss);margin-bottom:10px}
.fn-brief dd{margin:0;font-size:17px;line-height:1.55}

/* Body: sticky contents rail + reading column */
.fn-body{max-width:1240px;margin:0 auto;padding:72px 5% 24px;display:grid;grid-template-columns:190px minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.fn-rail{position:sticky;top:116px}
.fn-rail ol{list-style:none;margin:14px 0 0;padding:0;border-left:1px solid var(--line)}
.fn-rail a{display:block;padding:7px 0 7px 16px;margin-left:-1px;border-left:2px solid transparent;font-size:14px;color:var(--muted);transition:color .15s,border-color .15s}
.fn-rail a:hover{color:var(--ink)}
.fn-rail a[aria-current=true]{color:var(--ink);border-left-color:var(--orange);font-weight:500}
.fn-article{max-width:66ch;min-width:0}
.fn-article>section{margin:0 0 80px}
.fn-article h2{font-size:clamp(28px,2.6vw,36px);line-height:1.15;letter-spacing:-.04em;margin:8px 0 18px;text-wrap:balance}
.fn-prose h2:not(:first-child){margin-top:56px}
.fn-prose p,.fn-prose li{font-size:18px;line-height:1.75;color:#262e28}
.fn-prose p{margin:0 0 20px}
.fn-prose ul,.fn-prose ol{margin:0 0 24px;padding-left:22px}
.fn-prose li{margin:8px 0}
.fn-prose li::marker{color:#7d8b6c}
.fn-article em{font-family:inherit}
.fn-story>p:first-of-type{font-size:21px;line-height:1.62;color:var(--ink)}
.fn-article blockquote{position:relative;margin:34px 0;padding:0 0 0 30px;font:italic 400 23px/1.5 Georgia,serif;color:var(--ink)}
.fn-article blockquote::before{content:'✳';position:absolute;left:0;top:3px;font:400 18px/1 'DM Sans',sans-serif;color:var(--brick)}
.fn-article blockquote p{font:inherit;color:inherit;margin:0 0 10px}
.fn-article code{font:.88em var(--mono);background:var(--sage);padding:1px 5px;border-radius:3px}
.fn-prose .fn-label{font-size:11px;line-height:1.5;color:var(--moss)}
.fn-article a:not(.fn-copy){color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.fn-article a:not(.fn-copy):hover{color:#ac441f}

/* Inside the prose: comic figures, worked examples and numbered step cards */
.fn-figure{margin:28px 0 32px}.fn-figure a{display:block}.fn-figure img{width:100%;height:auto;border:1px solid var(--line)}.fn-figure figcaption{font:12px/1.5 var(--mono);color:var(--muted);margin-top:8px}
.fn-comic-panel{margin:34px auto;max-width:420px;background:#e8e9df;border:1px solid #cfd6c4}.fn-comic-panel a{display:block}.fn-comic-panel img{display:block;width:100%;height:auto}.fn-comic-panel figcaption{border-top:1px solid #cfd6c4;color:#566052;font:12px/1.55 var(--mono);padding:12px 14px}
.fn-example{margin:32px 0;padding:22px 24px;background:var(--sage);border-left:3px solid var(--moss)}.fn-prose .fn-example .fn-label{margin:0 0 12px}.fn-prose .fn-example li,.fn-prose .fn-example p:not(.fn-label){font-size:16px;line-height:1.6}.fn-prose .fn-example ol,.fn-prose .fn-example ul{margin:0 0 14px}.fn-prose .fn-example>:last-child{margin-bottom:0}.fn-example code{background:var(--paper)}
.fn-prose ol.fn-loop{list-style:none;counter-reset:fn-loop;margin:28px 0 32px;padding:0}
.fn-prose .fn-loop>li{position:relative;counter-increment:fn-loop;margin:0 0 14px;padding:16px 20px 16px 58px;background:var(--card);border:1px solid var(--sage-line);border-radius:6px;font-size:17px;line-height:1.65}
.fn-prose .fn-loop>li:last-child{margin-bottom:0}
.fn-prose .fn-loop>li::before{content:counter(fn-loop,decimal-leading-zero);position:absolute;left:18px;top:16px;font:500 12px/28px var(--mono);letter-spacing:.06em;color:#a3421d}
.fn-prose .fn-loop>li:not(:last-child)::after{content:'';position:absolute;left:26px;top:calc(100% + 1px);width:1px;height:14px;background:#b3bca6}

/* Try it: a worksheet you can tick off */
.fn-try{background:var(--sage);border:1px solid #d7ddce;padding:34px 36px 30px}
.fn-try-head{display:flex;justify-content:space-between;gap:16px}
.fn-try-intro{font-size:17px;line-height:1.6;color:#3c463a;margin:0 0 18px}
.fn-steps{list-style:none;margin:0;padding:0;counter-reset:step}
.fn-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:16px;padding:18px 0;border-top:1px solid var(--sage-line);counter-increment:step}
.fn-steps input{appearance:none;-webkit-appearance:none;width:28px;height:28px;margin:0;border:1.5px solid #7d8b6c;border-radius:50%;background:var(--paper);display:grid;place-items:center;cursor:pointer;transition:background .15s,border-color .15s}
.fn-steps input::before{content:counter(step);font:500 12px/1 var(--mono);color:var(--ink)}
.fn-steps input:checked{background:var(--lime);border-color:#6f8a47}
.fn-steps input:checked::before{content:'✓';font:700 14px/1 'DM Sans',sans-serif}
.fn-steps input:focus-visible{outline:3px solid #b7562f;outline-offset:3px}
.fn-steps strong{display:block;font:600 17px/1.4 Manrope,Arial,sans-serif;letter-spacing:-.01em;margin:3px 0 5px}
.fn-steps p{margin:0;font-size:16.5px;line-height:1.65;color:#2f382f}
.fn-steps li:has(input:checked) strong{text-decoration:line-through;text-decoration-color:#6f8a47}
.fn-success{margin-top:8px;background:var(--paper);border:1px solid var(--sage-line);padding:16px 20px}
.fn-success p:last-child{margin:6px 0 0;font-size:16.5px;line-height:1.6}
.fn-try code{background:var(--paper)}
/* A copyable prompt under a step; .fn-steps p would otherwise turn its text dark on dark */
.fn-step-prompt{background:var(--dark);border-radius:6px;padding:14px 16px;margin-top:12px;display:grid;gap:10px;justify-items:start}.fn-steps .fn-step-prompt .fn-prompt-text{color:#dfe6d6;font-size:14.5px;line-height:1.7}

/* Mistakes, prompts, tools, remember */
.fn-mistakes ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.fn-mistakes li{padding:18px 0;border-top:1px solid var(--line)}
.fn-mistakes strong{display:block;font:600 17px/1.4 Manrope,Arial,sans-serif;letter-spacing:-.01em}
.fn-mistakes p{margin:6px 0 0;font-size:16px;line-height:1.6;color:#3c463a}
.fn-prompts>p:not(.fn-label){font-size:17px;color:#3c463a;margin:0 0 18px}
.fn-prompt{background:var(--dark);color:var(--paper);border-radius:6px;padding:20px 22px 22px;margin:0 0 14px}
.fn-prompt-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:10px}
.fn-prompt h3{font:600 16px/1.3 Manrope,Arial,sans-serif;letter-spacing:-.01em;color:var(--paper)}
.fn-copy{background:transparent;color:var(--paper);border:1px solid #56634c;border-radius:30px;padding:7px 14px;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;min-height:36px;transition:background .15s,color .15s,border-color .15s}
.fn-copy:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.fn-copy:focus-visible{outline:3px solid #b7562f;outline-offset:3px}
.fn-prompt-text{font:14.5px/1.7 var(--mono);color:#dfe6d6;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.fn-prompts .fn-copy-status{font-size:14px;color:var(--moss);min-height:1.5em;margin:4px 0 0}
.fn-tools ul{list-style:none;padding:0;margin:0}
.fn-tools li{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:4px 24px;padding:14px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.55}
.fn-tools li span{color:var(--muted)}
.fn-remember{border-top:2px solid var(--ink);padding-top:26px}
.fn-remember ul{list-style:none;margin:0;padding:0}
.fn-remember li{position:relative;padding:15px 0 15px 34px;font:500 21px/1.4 Manrope,Arial,sans-serif;letter-spacing:-.02em;border-bottom:1px solid var(--line)}
.fn-remember li::before{content:'✳';position:absolute;left:0;top:15px;color:var(--brick);font-size:19px}

/* Ending: next idea (dark band) and practice */
.fn-next{background:var(--dark);color:var(--paper);margin-top:24px}
.fn-next-feature{max-width:1240px;margin:0 auto;padding:76px 5%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center;color:var(--paper)}
.fn-next-feature .fn-label{color:#b8c2af}
.fn-next-feature h2{font-size:clamp(34px,3.8vw,58px);line-height:1.05;letter-spacing:-.05em;margin:14px 0 18px;text-wrap:balance}
.fn-next-feature h2 em{color:var(--lime)}
.fn-next-feature p:not(.fn-label){color:#bec5bb;font-size:17px;line-height:1.65;max-width:34em;margin:0}
.fn-next-go{display:inline-flex;gap:14px;align-items:center;margin-top:30px;background:var(--orange);color:var(--ink);padding:15px 20px;font-weight:600;font-size:14px;transition:transform .2s,background .2s}
.fn-next-feature:hover .fn-next-go{transform:translateY(-3px);background:#ff9973}
.fn-next-feature figure{margin:0;border:1px solid #364132;overflow:hidden}
.fn-next-feature img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .6s}
.fn-next-feature:hover img{transform:scale(1.03)}
.fn-next-done{grid-template-columns:1fr}
/* Practice comes first, on paper, lined up with the article column (.fn-brief); no max-width on .fn-practice itself, or dark bands show beside it */
.fn-practice{background:var(--paper);color:var(--ink);padding:60px 0 80px}
.fn-practice>*{max-width:1240px;margin-left:auto;margin-right:auto;padding-left:5%;padding-right:5%}
.fn-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:16px}
.fn-card{background:var(--card);border:1px solid #cdd3c1;border-radius:4px;transition:border-color .15s,transform .2s}
.fn-card:hover{border-color:#77896a;transform:translateY(-3px)}
.fn-card a{display:flex;flex-direction:column;height:100%;padding:24px;color:var(--ink)}
.fn-card h3{font-size:22px;line-height:1.25;letter-spacing:-.03em;margin:14px 0 10px}
.fn-card p{font-size:15px;line-height:1.6;color:#58614e;margin:0}
.fn-card-primary{box-shadow:inset 0 3px 0 var(--orange)}
.fn-card-go{margin-top:auto;padding-top:16px;font-weight:600;font-size:14px;color:var(--link)}
/* Comic card: thumbnail beside the text; the last row is 1fr so the tall thumb never spreads the text rows */
.fn-card-comic a:has(>.fn-card-thumb){display:grid;grid-template-columns:80px minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:16px;align-items:start}
.fn-card-comic a>.fn-card-thumb{grid-column:1;grid-row:1/span 4}.fn-card-comic a:has(>.fn-card-thumb)>:not(.fn-card-thumb){grid-column:2}
.fn-card-thumb{width:80px;height:auto;border:1px solid var(--sage-line)}

/* Index: the whole path */
.fn-index{max-width:1240px;margin:0 auto;padding:44px 5% 90px}
.fn-index-hero{padding:18px 0 60px;border-bottom:1px solid var(--line)}
.fn-index-hero h1{font-size:clamp(48px,6.4vw,96px);line-height:.98;letter-spacing:-.055em;text-wrap:balance}
.fn-index-hero .fn-dek{max-width:40em;margin-top:28px}
.fn-index .fn-path{margin-top:52px}
.fn-index .fn-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 0;align-items:start;border-top:1px solid var(--line)}
.fn-index .fn-stage{padding:18px 18px 4px;border-left:1px solid var(--line);gap:14px}
.fn-index .fn-stage:first-child{border-left:0;padding-left:0}
.fn-index .fn-stage:nth-child(4){border-left:0;padding-left:0}
.fn-index .fn-stage ol{flex-direction:column;align-items:stretch;gap:12px}
.fn-index .fn-stage li{min-width:0}
.fn-index .fn-stage li::after{display:none}
.fn-index .fn-node{width:auto;height:auto;border:0;border-radius:0;background:none;box-shadow:none;display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;place-items:start;text-align:left}
.fn-index .fn-node:hover{transform:none}
.fn-index .fn-node-num{width:30px;height:30px;border-radius:50%;border:1px solid #9aa78c;display:grid;place-items:center;background:var(--paper);transition:background .2s}
.fn-index .fn-node.is-read .fn-node-num{background:var(--lime);border-color:#8fa36c}
.fn-index .fn-node-title{position:static;width:auto;opacity:1;transform:none;background:none;color:var(--ink);font:550 15px/1.35 Manrope,Arial,sans-serif;letter-spacing:-.01em;padding:5px 0 0;max-width:none;text-align:left;border-radius:0}
.fn-index .fn-node{text-decoration:none;color:var(--ink)}
.fn-index .fn-node:hover .fn-node-title,.fn-index .fn-node:focus-visible .fn-node-title{text-decoration:underline;text-underline-offset:3px}
.fn-index .fn-node:hover .fn-node-num{background:var(--orange);border-color:var(--orange)}
.fn-index-stage{padding:72px 0 8px}
.fn-index-stage-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:12px 48px;align-items:end;margin-bottom:30px}
.fn-index-stage-head .fn-label{grid-column:1/-1}
.fn-index-stage-head h2{font-size:clamp(32px,3.4vw,50px);letter-spacing:-.05em;line-height:1.05}
.fn-index-stage-head p:not(.fn-label){color:var(--muted);font-size:16px;line-height:1.7;margin:0;max-width:30em}
.fn-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px}
.fn-notes:has(>:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.fn-note a{display:block;color:var(--ink)}
.fn-note figure{margin:0;position:relative;aspect-ratio:16/9;overflow:hidden;background:#d6ddc9;border:1px solid #d7ddce}
.fn-note img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.fn-note a:hover img{transform:scale(1.035)}
.fn-note .fn-label{margin:18px 0 10px;display:flex;justify-content:space-between;gap:12px;color:var(--muted)}
.fn-read-mark{display:none;color:var(--moss)}
.fn-note.is-read .fn-read-mark{display:inline}
.fn-note h3{font-size:clamp(24px,2.1vw,30px);line-height:1.12;letter-spacing:-.045em;text-wrap:balance}
.fn-note p:not(.fn-label){margin:12px 0 0;color:var(--muted);font-size:15px;line-height:1.65}
.fn-note a:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.fn-flag{position:absolute;right:14px;top:14px;background:var(--orange);color:var(--ink);font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:7px 10px}
.fn-index-foot{margin-top:72px;border-top:1px solid var(--line);padding-top:28px;font-size:15px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}

/* The Phantasy Star making-of keeps its bespoke layout; give it the shared path and brief */
.production-heading .fn-path{margin-bottom:34px}
.production-heading .fn-brief{padding:0;margin-top:30px;max-width:none}
/* Its Try-it worksheet reuses the field-note classes; production-story.css loads later, so restate the worksheet rhythm */
.production-story .fn-try{margin:36px 0 28px}
.production-story .fn-try .fn-label{margin:0;font-size:11px;line-height:1.5}
.production-story .fn-try h2{margin:10px 0 16px}
.production-story .fn-try-intro{font-size:17px;line-height:1.6;margin:0 0 18px}
.production-story .fn-steps p{margin:0;font-size:16.5px;line-height:1.65}

@media(prefers-reduced-motion:no-preference){.fn-hero-art img{animation:fn-settle 1s cubic-bezier(.2,.7,.2,1) both}@keyframes fn-settle{from{transform:scale(1.045)}to{transform:none}}}
@media(prefers-reduced-motion:reduce){.fn-page *,.fn-index *,.fn-next *,[data-idea-page] .fn-path *{transition:none!important;animation:none!important}}
@media(max-width:1000px){.fn-body{grid-template-columns:minmax(0,1fr);padding-top:48px;gap:28px}.fn-rail{position:static}.fn-rail ol{display:flex;flex-wrap:wrap;gap:8px;border:0}.fn-rail a{border:1px solid var(--line);border-radius:30px;padding:6px 13px;margin:0;font-size:13px}.fn-rail a[aria-current=true]{border-color:var(--orange)}.fn-article{max-width:none}}
@media(max-width:900px){.fn-hero-grid{grid-template-columns:minmax(0,1fr);gap:32px;padding:34px 0 44px}.fn-brief dl{grid-template-columns:minmax(0,1fr)}.fn-brief dl>div{border-left:0;border-top:1px solid var(--sage-line)}.fn-brief dl>div:first-child{border-top:0}.fn-next-feature{grid-template-columns:minmax(0,1fr);padding:60px 6%}.fn-mistakes ul{grid-template-columns:minmax(0,1fr)}.fn-index-stage-head{grid-template-columns:minmax(0,1fr)}.fn-notes,.fn-notes:has(>:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.fn-hero{padding:20px 6% 0}.fn-dek{font-size:18px}.fn-stage-name{display:none}.fn-path-head{font-size:10px;flex-direction:column;gap:2px}.fn-brief{padding:0 6%}.fn-brief dl>div{padding:18px 20px}.fn-body{padding:36px 6% 16px}.fn-try{padding:24px 18px 20px}.fn-prose p,.fn-prose li{font-size:17px}.fn-story>p:first-of-type{font-size:19px}.fn-remember li{font-size:18px}.fn-tools li{grid-template-columns:minmax(0,1fr)}.fn-practice{padding:48px 0 64px}.fn-practice>*{padding-left:6%;padding-right:6%}.fn-prose .fn-loop>li{padding:14px 16px 14px 50px}.fn-prose .fn-loop>li::before{left:14px;top:14px}.fn-prose .fn-loop>li:not(:last-child)::after{left:22px}.fn-example{padding:18px 18px}.fn-index{padding:28px 6% 64px}.fn-index .fn-stages{grid-template-columns:minmax(0,1fr)}.fn-index .fn-stage,.fn-index .fn-stage:nth-child(4){border-left:0;border-top:1px solid var(--line);padding:16px 0 4px}.fn-index .fn-stage-name{display:block}.fn-notes,.fn-notes:has(>:nth-child(2):last-child){grid-template-columns:minmax(0,1fr)}.fn-index-stage{padding-top:56px}}
@media(max-width:900px){[data-idea-page] .fn-node-title{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;left:auto;overflow:hidden;position:absolute;right:auto;transform:none;white-space:nowrap;width:1px}}
/* Phones: the path wraps by stage onto up to three rows, with 32px tap targets */
@media(max-width:600px){[data-idea-page] .fn-stages{flex-wrap:wrap;column-gap:16px;row-gap:14px}[data-idea-page] .fn-stage{flex:1 1 auto}[data-idea-page] .fn-stage li{min-width:40px}[data-idea-page] .fn-stage li:not(:last-child)::after{left:32px}[data-idea-page] .fn-node{width:32px;height:32px;font-size:11px}}