/* Approved narrative additions to the existing stage. */
.narrative-page{--utility:var(--body);--nav:var(--body);--small-text:18px}
.narrative-page{font-family:var(--body);font-weight:400;font-synthesis:none}
.narrative-page h1,.narrative-page h2,.narrative-page h3,.narrative-page h4,.narrative-page .giant,.narrative-page .tool-letter,.narrative-page .s-title{font-family:var(--display);font-weight:400!important}
.narrative-page ::selection{background:#FF3D1F;color:#0C0D0F}
.narrative-page a{ text-underline-offset:.25em }
.narrative-page .giant{display:block;text-decoration:none;letter-spacing:-.04em}
.narrative-page .giant:hover{color:#FF563D}
.narrative-page .giant:focus-visible{outline-offset:8px}
.narrative-page .hero-foot .label{font-weight:400;font-size:18px;max-width:60%}
.narrative-page .hero-foot a{font-size:18px}
.narrative-page .narrative-growth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);align-items:center;gap:clamp(40px,6vw,100px);padding:140px var(--pad) 120px}
.narrative-page .growth-intro h2{font-size:clamp(30px,3.1vw,48px);line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.narrative-page .growth-intro p{font:400 18px/1.7 var(--body);margin:28px 0 18px;max-width:32ch}
.narrative-page .judgment-rows{min-width:0}
.narrative-page .judgment-row{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:20px;align-items:start;padding:26px 0;border-top:1px solid rgba(243,241,238,.28);text-decoration:none;min-height:44px}
.narrative-page .judgment-row:last-child{border-bottom:1px solid rgba(243,241,238,.28)}
.narrative-page .tool-letter{color:#FF3D1F;font-size:48px;line-height:1}
.narrative-page .tool-copy{display:grid;grid-template-columns:minmax(110px,.8fr) minmax(0,1.1fr);gap:8px 24px;align-items:baseline;overflow-wrap:anywhere}
.narrative-page .tool-contrast{display:flex;flex-wrap:wrap;gap:8px 16px;font:400 18px/1.5 var(--body)}
.narrative-page .tool-contrast s{text-decoration-thickness:1px;color:rgba(243,241,238,.7)}
.narrative-page .tool-benefit{grid-column:1/-1;font:400 18px/1.55 var(--body);text-wrap:pretty}
.narrative-page .tool-arrow{font:400 24px/1.2 var(--body)}
.narrative-page .judgment-row:hover .tool-name,.narrative-page .judgment-row:hover .tool-arrow{color:#FF3D1F}
.narrative-page .reading-angle{font:400 18px/1.5 var(--body)!important;letter-spacing:0!important;min-height:44px;min-width:44px;display:inline-flex;align-items:center;text-wrap:balance}
/* Break at the spaces around the dot, not inside a word; overflow-wrap still lets a long phrase fit a phone. */
html[lang=zh-CN] .narrative-page .reading-angle{word-break:keep-all;overflow-wrap:anywhere}
.narrative-page .cap-bot{flex-wrap:wrap;justify-content:space-between;gap:4px 20px}
.narrative-page .s-foot{gap:6px}
.narrative-page .s-foot a{max-width:100%}
.narrative-page .cta .btn{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;border:1px solid #FF3D1F;border-radius:999px;background:transparent;color:inherit;font:400 18px/1.4 var(--body);letter-spacing:0;text-decoration:none;transition:background-color .2s,color .2s}
.narrative-page .cta .btn:hover,.narrative-page .cta .btn:focus-visible{background:#FF3D1F;color:#0C0D0F}
.narrative-page .narrative-close h2{font-size:clamp(38px,6.6vw,96px);font-weight:400;line-height:1.15;letter-spacing:-.02em}
.narrative-page.narrative-reading{--graphite:#0C0D0F;--pearl:#F3F1EE;--ignite:#FF3D1F;--ignite-text:#FF563D;--pad:clamp(20px,5vw,80px);background:#0C0D0F;color:#F3F1EE}
.narrative-page.narrative-reading .signal-space{background:#0C0D0F}
.narrative-page.narrative-reading .narrative-page-hero{padding:150px 0 74px;background:transparent;border:0}
.narrative-page.narrative-reading .page-hero h1{font-size:clamp(40px,5vw,72px);line-height:1.14;letter-spacing:-.02em;max-width:16em}
.narrative-page.narrative-reading .page-hero p{max-width:70ch;font:400 18px/1.8 var(--body);color:#F3F1EE}
.narrative-page .method-nav{display:flex;flex-wrap:wrap;gap:4px 28px;border-top:1px solid rgba(243,241,238,.28);border-bottom:1px solid rgba(243,241,238,.28);padding-top:12px;padding-bottom:12px}
.narrative-page .method-nav a{display:inline-flex;align-items:center;min-height:44px;font:400 18px/1.5 var(--body);text-decoration:none}
.narrative-page .method-nav [aria-current]{color:#FF563D;text-decoration:underline}
.narrative-page .narrative-section{padding:90px 0}
.narrative-page .narrative-section h2{font:400 clamp(30px,3.3vw,48px)/1.2 var(--display);letter-spacing:-.02em;margin:0;text-wrap:balance}
/* Archive keep-all leaves one-character lines in the narrow Chinese heading column; pretty also handles the line after <br>. */
html[lang=zh-CN] .narrative-page .narrative-section h2{word-break:normal;text-wrap:pretty}
.narrative-page .editorial-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(40px,6vw,100px)}
.narrative-page .reading-copy p,.narrative-page .coda{font:400 18px/1.8 var(--body);max-width:70ch;margin:0 0 24px}
.narrative-page .reading-copy .buying-intro{font:400 clamp(24px,2.6vw,36px)/1.4 var(--display);margin-bottom:30px}
.narrative-page .execution-rows article{padding:22px 0;border-top:1px solid rgba(243,241,238,.28)}
.narrative-page .execution-rows h3{font:400 28px/1.3 var(--display);margin:0 0 12px}
.narrative-page .execution-rows p{font:400 18px/1.7 var(--body);max-width:70ch;margin:0}
.narrative-page .resource-roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin:46px 0}
.narrative-page .resource-role{border-top:1px solid rgba(243,241,238,.28);padding-top:24px}
.narrative-page .resource-role h3{font:400 32px/1.3 var(--display);margin:0 0 24px}
.narrative-page .resource-role ul{list-style:none;padding:0;margin:0}
.narrative-page .resource-role li{font:400 18px/1.8 var(--body);margin:0 0 18px}
.narrative-page .resource-role b{font-weight:400;display:block}
.narrative-page .related-work{display:flex;flex-direction:column;gap:16px}
.narrative-page .related-work a{display:flex;flex-direction:column;align-items:flex-start;min-height:44px;font:400 18px/1.6 var(--body);gap:6px;padding:18px 0;border-top:1px solid rgba(243,241,238,.28)}
.narrative-page .visitor-identity{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin:0 0 32px;font:400 18px/1.6 var(--body)}
.narrative-page .visitor-identity a{display:inline-flex;align-items:center;min-height:44px}
.narrative-page .method-door{display:grid;grid-template-columns:54px minmax(0,1fr);gap:24px;padding-top:28px;margin-top:36px;border-top:1px solid rgba(243,241,238,.28)}
.narrative-page .method-door h2{font:400 32px/1.3 var(--display);margin:0 0 14px}
.narrative-page .method-door p{margin:18px 0 0}
.narrative-page .opportunity-story{display:grid;gap:24px}
.narrative-page #thermomix{scroll-margin-top:24px}
.narrative-page .opportunity-story h3{font:400 24px/1.3 var(--display);margin:0 0 12px}
.narrative-page .opportunity-story p{margin:0}
.narrative-page .narrative-section>.shell>.judgment-rows{margin-top:32px}
.narrative-page.narrative-reading .narrative-close{padding:100px var(--pad);min-height:0;border-top:1px solid rgba(243,241,238,.28)}
.narrative-page.narrative-reading .narrative-close h2{max-width:16em;margin:0}
.narrative-page.narrative-reading .sub{font:400 18px/1.7 var(--body);margin:26px 0}
.narrative-page.narrative-reading .cta{display:flex;flex-wrap:wrap;align-items:center;gap:28px}
.narrative-page.narrative-reading .cta a.t{display:inline-flex;align-items:center;min-height:44px;font:400 18px/1.5 var(--body);background:none;color:inherit;border-radius:0;padding:0;text-decoration:underline}
.narrative-page.narrative-reading .judgment-row{padding:30px 0}
.narrative-page.narrative-reading .tool-copy{grid-template-columns:1fr}

@media(max-width:760px){
.narrative-page #hero{min-height:100svh;padding-top:110px;padding-bottom:24px;gap:24px}
.narrative-page .hero-top{flex:1}
.narrative-page .hero-top h1{font-size:clamp(32px,7.5vw,54px)}
.narrative-page .hero-foot{margin-top:26px;gap:12px;align-items:flex-start;flex-direction:column}
.narrative-page .hero-foot .label{max-width:100%}
.narrative-page .hero-foot a{min-height:44px}
.narrative-page .narrative-growth{grid-template-columns:1fr;padding:80px var(--pad);gap:38px}
.narrative-page .growth-intro h2{font-size:36px}
.narrative-page .growth-intro p{max-width:40ch}
.narrative-page .judgment-row{grid-template-columns:40px minmax(0,1fr) auto;gap:14px}
.narrative-page .tool-letter{font-size:38px}
.narrative-page .tool-copy{grid-template-columns:1fr;gap:12px}
.narrative-page .cap-bot{flex-direction:column;align-items:flex-start}
.narrative-page .reading-angle{width:100%}
.narrative-page .editorial-layout,.narrative-page .resource-roles{grid-template-columns:1fr;gap:32px}
.narrative-page .narrative-section{padding:60px 0}
.narrative-page.narrative-reading .narrative-page-hero{padding:120px 0 50px}
.narrative-page.narrative-reading .page-hero h1{font-size:40px}
.narrative-page .method-nav{gap:4px 20px}
.narrative-page .method-nav>a:first-child{flex-basis:100%}
.narrative-page.narrative-reading .narrative-close{padding:70px var(--pad)}
}
.narrative-page .tool-letter{color:var(--pearl)}
.narrative-page .tool-contrast .contrast-new{color:#FF3D1F}
.narrative-page .method-link{display:inline-flex;align-items:center;min-height:44px;min-width:44px;font:400 18px/1.5 var(--body)}
.narrative-page.narrative-reading .page-hero h1{text-wrap:balance}
/* Pacing: the photo wall needs less than a full screen, and case links sit with their titles. */
@media(min-width:761px){
.narrative-page #creativity.wall-sec,.narrative-page #creativity .wall-stage{min-height:min(100svh,max(560px,76svh))}
.narrative-page .s-text{justify-content:flex-start;gap:32px}
}
@media(max-width:760px){html[lang=en] .narrative-page .vt br{display:inline}}

/* Case titles are the detail links (Jef, 2026-10-22); the theater's "all cases" link shows after the sixth case only. */
.narrative-page :is(.s-title,.vt) a{color:inherit;text-decoration:none}
.narrative-page :is(.s-title,.vt) a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em}
.narrative-page :is(.s-title,.vt) a:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.narrative-page #theater:has(.slide:not(:last-of-type).on) .th-all{visibility:hidden}
/* The Chinese home claim keeps the prototype's bold weight and vermilion “真实” (Jef, 2026-10-23). */
.narrative-page #hero .hero-top h1{font-weight:700!important}

/* Issue 83 O pilot: a work's default answer is struck as its judgment. Scripts only animate toward
   the struck final state, which is what readers get without scripts or with reduced motion. */
/* p.method-strike outranks .reading-copy p, which would otherwise reset it to body text. */
.narrative-page p.method-strike{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 24px;margin:0;font:400 var(--type-h2)/1.25 var(--display);letter-spacing:-.02em}
.narrative-page .method-strike s{color:rgba(243,241,238,.7);text-decoration-thickness:max(1px,.03em)}
.narrative-page .method-strike .strike-to{white-space:nowrap;text-wrap:balance}
.narrative-page .method-strike .strike-arrow{margin-right:.4em;color:rgba(243,241,238,.7)}
.narrative-page .method-strike .contrast-new{white-space:normal}
.narrative-page .method-strike .contrast-new{color:#FF3D1F}
/* 52.5% matches the font's own line-through (measured 51.8% en, 53.2% zh), so both states agree. */
.narrative-page .method-strike.strike-ready s{text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 52.5%/0 max(1px,.03em);transition:background-size .6s cubic-bezier(.4,0,.2,1)}
.narrative-page .method-strike.strike-ready .strike-to{opacity:0;transform:translateY(.12em);transition:opacity .45s ease .55s,transform .45s ease .55s}
.narrative-page .method-strike.is-struck s{background-size:100% max(1px,.03em)}
.narrative-page .method-strike.is-struck .strike-to{opacity:1;transform:none}
@media print{.narrative-page .method-strike.strike-ready s{background-size:100% max(1px,.03em)}.narrative-page .method-strike.strike-ready .strike-to{opacity:1;transform:none}}

/* Method slides (Jef, 2026-10-28): every method page reads like keynote slides. One type tier down,
   a compact title, and each work shown with its judgment on the same screen. */
.narrative-page.method-deck .deck-hero{padding:36px 0 28px}
/* .archive-page gives every hero paragraph a rule and top margin, and .page-hero .shell>p enlarges the
   identity line to the lead size; the compact title keeps one clean edge and a one-line identity. */
.narrative-page.method-deck .deck-hero .shell p{margin-top:0;padding-top:0;border-top:0;max-width:none}
:root .narrative-page.method-deck .deck-hero .shell>p.visitor-identity{font-size:var(--type-meta)!important;margin:0;color:rgba(243,241,238,.8)}
.method-deck .deck-title{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px 48px;align-items:end;margin-top:20px}
.narrative-page.method-deck .page-hero p.deck-method{display:flex;align-items:baseline;gap:12px;margin:0;font:600 var(--type-h4)/1.3 var(--body)}
.method-deck .deck-method .tool-letter{font-size:36px;color:#FF3D1F}
:root .narrative-page.method-deck .deck-title h1{font-size:var(--type-h2)!important;line-height:1.12;margin:10px 0 16px;max-width:none}
.method-deck .deck-title .tool-contrast{font-size:var(--type-lead)}
.narrative-page.method-deck .deck-hero .shell p.tool-benefit{margin-top:10px;max-width:30em}
:root .narrative-page.method-deck .deck-title p.deck-intro{font-size:var(--type-body)!important;line-height:1.75;margin:0;max-width:34em}
.narrative-page.method-deck .method-nav{padding-top:2px;padding-bottom:2px}
.narrative-page.method-deck .method-nav a{font-size:var(--type-meta)}
.method-deck .deck-slide{padding:44px 0;border-bottom:1px solid rgba(243,241,238,.18)}
/* Longhands, not the font shorthand: an !important shorthand would also reset the English pages'
   proportional-width quotes (visitor-ui.css). */
:root .narrative-page.method-deck .deck-slide h2{font-family:var(--body)!important;font-size:var(--type-h4)!important;font-weight:600!important;line-height:1.35;letter-spacing:0;margin:0;text-wrap:balance}
:root .narrative-page.method-deck .deck-slide>.shell>h2{margin-bottom:20px}
.method-deck .deck-slide h2 a{color:inherit;font-weight:inherit;text-decoration:none}
.method-deck .deck-slide h2 a:hover{color:#FF3D1F}
.narrative-page.method-deck p.method-strike{font-size:var(--type-h3)}
/* Copy on the left lines up with the key visual's top and bottom edges; phones read it in DOM order. */
.method-deck .deck-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto auto auto 1fr auto;grid-template-areas:"head media" "strike media" "lead media" "extra media" "note media";gap:16px 48px}
.method-deck .deck-split>h2{grid-area:head}
.method-deck .deck-split>.method-strike{grid-area:strike}
.method-deck .deck-media{grid-area:media}
.method-deck .deck-lead{grid-area:lead}
.method-deck .deck-extra{grid-area:extra;align-self:end}
.method-deck .deck-split>.deck-note{grid-area:note}
.method-deck .deck-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
/* Figures keep their inline natural-width cap, so no work is ever shown larger than its original. */
.method-deck :is(.deck-media,.deck-thumbs) .approved-case-media{margin:0}
.method-deck :is(.deck-media,.deck-thumbs) img{display:block;width:100%;height:auto}
.method-deck :is(.deck-lead,.deck-steps p,.deck-pair p,.deck-record p){font:400 var(--type-body)/1.7 var(--body);margin:0}
.method-deck p.deck-note{font:400 var(--type-meta)/1.6 var(--body);color:rgba(243,241,238,.8);margin:0}
.method-deck :is(.deck-voices,.deck-list){margin:0;padding:0;list-style:none}
.method-deck .deck-list li{padding:10px 0;border-top:1px solid rgba(243,241,238,.18);font:400 var(--type-body)/1.5 var(--body)}
/* Chinese strike phrases wrap only at their marked phrase breaks. */
html[lang=zh-CN] .method-deck .method-strike :is(s,.contrast-new){word-break:keep-all}
.method-deck .deck-voices li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:10px 0;border-top:1px solid rgba(243,241,238,.18);font:400 var(--type-body)/1.5 var(--body)}
.method-deck .deck-voices li>span:last-child{color:#FF3D1F}
.method-deck .deck-story .method-strike{margin:18px 0 28px}
/* The F page links to #thermomix; keep its heading clear of the sticky header (64–72px). */
.narrative-page.method-deck #thermomix{scroll-margin-top:48px}
.method-deck .deck-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.method-deck .deck-steps-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.method-deck .deck-steps-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.method-deck .deck-steps>div{border-top:1px solid rgba(243,241,238,.28);padding-top:14px}
:root .narrative-page.method-deck .deck-steps h3{font-family:var(--body)!important;font-size:var(--type-meta)!important;font-weight:600!important;line-height:1.4;color:#F3F1EE;margin:0 0 8px}
:root .narrative-page.method-deck .deck-steps-strong h3{font-size:var(--type-h4)!important;color:#F3F1EE}
.method-deck .deck-story :is(.method-link,.related-work){margin-top:16px}
.method-deck .deck-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.method-deck .deck-pair>div{display:grid;gap:10px;align-content:start}
.method-deck .deck-pair .buying-intro{margin:0;font:400 var(--type-lead)/1.45 var(--display)}
.method-deck .buying-intro em{font-style:normal;color:#FF3D1F}
/* Cards: one tile per work, shown whole (contained, never cropped) on the stage colour. */
.method-deck .deck-cards{display:grid;gap:24px}
.method-deck .deck-cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.method-deck .deck-cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.method-deck .deck-card{display:flex;flex-direction:column;gap:10px;min-width:0;color:inherit;text-decoration:none}
/* No overflow clipping: a type-only tile grows rather than cut its words. */
.method-deck .deck-tile{display:grid;place-items:center;aspect-ratio:16/9;background:#15171A}
/* Image frames stay 16:9; keep clipping on the image wrapper so text-only tiles can grow. */
.method-deck .deck-tile{position:relative}
.method-deck .deck-tile .approved-case-media{position:absolute;inset:0;width:100%;height:100%;max-width:none!important;margin:0;overflow:hidden}
.method-deck .deck-tile img{display:block;width:100%;height:100%;object-fit:contain}
.narrative-page.method-deck .deck-tile p.method-strike{padding:16px 20px;font-size:var(--type-h4);gap:2px 12px}
/* Type-only tiles use the card's body text, set off by the tile colour. */
.method-deck .deck-card p.deck-tile-type{padding:16px 20px;text-wrap:balance}
:root .narrative-page.method-deck .deck-card h3{display:flex;align-items:baseline;gap:10px;margin:4px 0 0;font-family:var(--body)!important;font-size:var(--type-h4)!important;font-weight:600!important;line-height:1.35}
.method-deck .deck-card h3 .tool-letter{font-size:28px;color:#FF3D1F}
.method-deck .deck-card :is(p,li){margin:0;font:400 var(--type-body)/1.6 var(--body)}
.method-deck .deck-card p.deck-card-work{font-size:var(--type-meta);color:rgba(243,241,238,.8)}
.method-deck .deck-card .tool-contrast{font-size:var(--type-body)}
.method-deck .deck-card ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.method-deck .deck-card li b{display:block;font-weight:400;font-size:var(--type-meta);color:rgba(243,241,238,.8)}
.method-deck a.deck-card:hover :is(h3,p:last-child){color:#FF3D1F}
.method-deck a.deck-card:focus-visible{outline:2px solid currentColor;outline-offset:6px}
.method-deck .deck-roles .deck-lead{max-width:62em;margin-bottom:24px}
/* The works index keeps the existing reading-angle links, in three compact columns. */
.method-deck .deck-index .related-work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}
.narrative-page.method-deck .related-work a{padding:12px 0;gap:2px}
.method-deck .decision-steps{gap:40px}
.method-deck .decision-return{margin-top:20px;padding-top:14px}
.method-deck .deck-record{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px 48px;margin-top:28px;padding-top:20px;border-top:1px solid rgba(243,241,238,.18)}
:root .narrative-page.method-deck .deck-record h3{margin:0;font-family:var(--body)!important;font-size:var(--type-h4)!important;font-weight:600!important;line-height:1.35}
/* Four cards need at least 1280px; below that they pair up so type tiles keep their words. */
/* Type hierarchy (Jef, 2026-11-08: too much same-size text). Three tiers per slide: the struck
   judgment is the anchor, headings stay at h4, and supporting copy is 16px at 80% (Jef's values). */
.narrative-page.method-deck .deck-slide>.shell>p.method-strike,.narrative-page.method-deck .deck-split>p.method-strike{font-size:var(--type-h2);line-height:1.12}
.method-deck :is(.deck-lead,.decision-steps p,.deck-steps p,.deck-pair p,.deck-record p,.deck-card p,.deck-card li,.deck-list li,.deck-voices li){font-size:16px;line-height:1.75;color:rgba(243,241,238,.8)}
.method-deck .deck-voices li>span:last-child{color:#FF3D1F}
.method-deck :is(.deck-steps,.deck-pair) p{max-width:30em}
/* The result closes each story: the struck judgment's red on its label, full white on its text (Jef, 2026-11-08). */
:root .narrative-page.method-deck .deck-story .deck-steps>div:last-child h3{color:#FF3D1F}
.method-deck .deck-story .deck-steps>div:last-child p{color:#F3F1EE}
.method-deck #thermomix .deck-steps p+p{margin-top:8px}
@media(max-width:1279px){.method-deck .deck-cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1023px){
.method-deck :is(.deck-title,.deck-steps,.deck-pair,.deck-record){grid-template-columns:minmax(0,1fr);gap:24px}
.method-deck :is(.deck-steps-4,.deck-cards-3){grid-template-columns:repeat(2,minmax(0,1fr))}
.method-deck .deck-split{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"head" "strike" "media" "lead" "extra" "note"}
.method-deck .deck-index .related-work{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
.narrative-page.method-deck .deck-hero{padding:24px 0 20px}
/* Phones keep the identity to one line, as on case pages (Jef, 2026-10-22). */
.method-deck .visitor-identity .identity-detail{display:none}
.method-deck .deck-slide{padding:32px 0}
.method-deck .deck-thumbs{gap:6px}
.method-deck :is(.deck-steps-4,.deck-cards-4,.deck-cards-3),.method-deck .deck-index .related-work{grid-template-columns:minmax(0,1fr)}
}

/* Homepage judgment rows are one line each: letter, name, contrast, arrow (Jef, 2026-11-09). */
.narrative-page .narrative-growth .judgment-row{align-items:center;padding:22px 0}
.narrative-page .narrative-growth .tool-copy{grid-template-columns:8.5em minmax(0,1fr);align-items:center}
.narrative-page .growth-intro p{text-wrap:balance}
.narrative-page .narrative-growth .tool-name{font-size:20px}
@media(max-width:760px){.narrative-page .narrative-growth .tool-copy{grid-template-columns:1fr;gap:6px}.narrative-page .narrative-growth .tool-letter{font-size:40px}}
html[lang=zh-CN] .narrative-page .growth-intro p{word-break:keep-all;overflow-wrap:anywhere}
@media(min-width:1280px){.narrative-page .narrative-growth .tool-contrast{flex-wrap:nowrap;white-space:nowrap}}
@media(min-width:761px) and (max-width:1279px){.narrative-page .narrative-growth{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px}.narrative-page .narrative-growth .tool-copy{grid-template-columns:1fr;gap:4px}}
.method-deck .deck-h a{display:inline-block;padding-block:9px}