/* CMF Writing: one fluid editorial container with consistent text and media edges. */
.writing-page{overflow-x:clip}
.writing-page .writing-opening{padding:clamp(1.5rem,2.5vw,2.5rem) var(--gutter) clamp(2rem,3vw,3rem)}
.writing-page .writing-opening h1{font-size:clamp(3rem,5.5vw,5rem);letter-spacing:-.065em;line-height:1.04;margin:.65rem 0 1rem}
.writing-page .writing-intro{font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.6;max-width:100%;margin:0;color:var(--muted)}
.writing-page .writing-collection{padding:0 var(--gutter) clamp(3rem,7vw,7rem)}
.writing-page .writing-list{list-style:none;margin:0;padding:0;display:grid;gap:3rem}
.writing-page .writing-entry{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.writing-page .writing-entry .writing-art{display:grid;place-content:center;aspect-ratio:1.2;background:var(--accent,#cd0e2c);color:var(--ink);font:800 clamp(3rem,8vw,8rem)/1 var(--display,var(--sans));letter-spacing:-.07em;overflow:hidden}
.writing-page .writing-art span{transform:rotate(-7deg);transition:transform .25s ease}
.writing-page .writing-entry:focus-within .writing-art span,.writing-page .writing-entry:hover .writing-art span{transform:rotate(0deg)}
.writing-page .writing-entry h2{font-size:clamp(1.8rem,3vw,3rem);line-height:1.15;margin:.7rem 0 1rem;max-width:22ch}
.writing-page .writing-entry h2 a{color:var(--text);text-decoration:none}
.writing-page .writing-entry h2 a:hover{text-decoration:underline;text-decoration-color:var(--accent)}
.writing-page .writing-summary{font-size:1.1rem;line-height:1.7;color:var(--muted);max-width:48ch;margin:0 0 1rem}
.writing-page .writing-meta{font-size:.86rem;line-height:1.6;color:var(--muted);margin:0}
.writing-page .writing-status{color:var(--accent);font-weight:600}
.writing-page a.writing-action{display:inline-flex;gap:.6rem;align-items:center;min-height:44px;color:var(--text);font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.3em}
.writing-page .writing-action svg{width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:1.7;flex:none}
.writing-page .writing-empty{max-width:45rem}
.writing-page .writing-empty p{color:var(--muted)}
.writing-page .essay{box-sizing:border-box;width:100%;padding:clamp(2rem,4vw,4rem) var(--gutter) clamp(3rem,6vw,6rem);max-width:1440px;margin-inline:auto}
.writing-page .essay-header{width:100%;margin-bottom:clamp(2rem,4vw,3.5rem)}
.writing-page .essay-header h1{font-size:clamp(2.3rem,5vw,4.7rem);line-height:1.08;letter-spacing:-.055em;margin:1.5rem 0;max-width:100%;text-wrap:balance;overflow-wrap:anywhere}
.writing-page .essay-deck{font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.6;color:var(--muted);max-width:100%;margin:0 0 1.5rem}
.writing-page .essay-body{--learning-inset:clamp(12px,1.6vw,24px);width:100%;font-size:clamp(1.05rem,1.5vw,1.375rem);line-height:1.7;margin:0;overflow-wrap:anywhere}
.writing-page .essay-body p{margin:0 0 1.25em;padding:0}
.writing-page .essay-body>p{padding-inline:var(--learning-inset)}
.writing-page .essay-body h2{font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.25;margin:2em 0 .7em;letter-spacing:-.035em}
.writing-page .essay-body h3{font-size:1.3em;line-height:1.3;margin:1.7em 0 .7em}
.writing-page .essay-body :is(ul,ol){padding-left:1.3em;margin:0 0 1.5em}
.writing-page .essay-body li{padding-left:.25em;margin:.35em 0}
.writing-page .essay-body blockquote{border:0;padding:0;margin:1.8em 0;color:var(--accent);font-size:1.2em;line-height:1.6}
.writing-page .essay-body img{max-width:100%;height:auto;margin:1rem 0}
.writing-page .essay-body pre{overflow:auto;background:var(--ink-2);padding:1rem;max-width:100%;font-size:.85em}
.writing-page .essay-body a{color:var(--text);text-decoration-color:var(--accent)}
.writing-page .essay-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;width:100%;margin:3rem 0 0}
.writing-page .essay-footer>.writing-action{white-space:nowrap}
.writing-page .essay-footer>.writing-section-tags{margin:0}
@media(max-width:700px){.writing-page .writing-entry{grid-template-columns:1fr;gap:1.5rem}.writing-page .writing-entry .writing-art{aspect-ratio:1.8;font-size:clamp(4rem,18vw,7rem)}.writing-page .essay-body,.writing-page .essay-footer{margin-left:0}.writing-page .writing-opening h1{font-size:clamp(3rem,12vw,4rem)}}
@media(prefers-reduced-motion:reduce){.writing-page .writing-art span{transform:none;transition:none}}

/* Owner-requested HEAR editorial media. Reading stays native and static. */
.writing-page .essay-body img[src$="oe-moresteam-stage.webp"]{display:block;width:100%;aspect-ratio:1400/934;object-fit:cover;margin:2rem 0 0}
.writing-page .essay-body img[src$="four-phases.svg"]{display:block;width:100%;aspect-ratio:680/520;margin:2rem 0}
.writing-page .essay-body h2 img{display:block;width:34px;height:34px;margin:0 0 .65rem;object-fit:contain}
.writing-page .essay-body p:has(>img:only-child){margin-bottom:.6rem}
.writing-page .essay-body p:has(>img:only-child)+p:has(>em:only-child){font-size:.84em;line-height:1.5;color:var(--muted);margin-bottom:2.5rem}

/* Owner-requested HEAR editorial media: original Mario visual. */
.writing-page .essay-body img[src$="mario-product-experience.png"]{display:block;width:100%;aspect-ratio:2/1;object-fit:contain;margin:2rem 0 0}

/* Owner revision: text, icon statements and media share the full article width. */
.writing-page .essay-body>:is(p,h2,h3,ul,ol,blockquote,pre){max-width:100%}
.writing-page .essay-body>p:has(>img:only-child)>img{width:100%;display:block}
.writing-page .essay-body>ol:has(img[src$="experience.svg"]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,6vw,5rem);box-sizing:border-box;width:min(100%,58rem);list-style:none;padding:0 var(--learning-inset);margin:clamp(1.75rem,3vw,2.5rem) auto}
.writing-page .essay-body>ol:has(img[src$="experience.svg"])>li{padding:0;margin:0;min-width:0}
.writing-page .essay-body>ol:has(img[src$="experience.svg"]) img{display:block;width:56px;height:56px;margin:0 0 1rem}
@media(max-width:700px){.writing-page .essay-body>ol:has(img[src$="experience.svg"]){grid-template-columns:1fr;gap:1.5rem}.writing-page .essay-body>ol:has(img[src$="experience.svg"])>li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:1rem;align-items:start}.writing-page .essay-body>ol:has(img[src$="experience.svg"]) img{width:40px;height:40px;margin:0}}

/* Section tags share one editable value across each article and its archive entry. */
.writing-page .writing-section-tags{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:center;font-size:.9rem;line-height:1.5;margin:.7rem 0}
.writing-page .writing-section-tags a{display:inline-flex;gap:.4rem;align-items:center;min-height:44px;color:var(--accent);font-weight:600;text-decoration:none;text-underline-offset:.3em}
.writing-page .writing-section-tags svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7}
.writing-page .writing-section-tags a:hover{text-decoration:underline}
.writing-page .writing-section-filters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;gap:1rem 1.5rem;margin:0 0 1.5rem}
.writing-page .writing-section-filters button,.writing-page button.writing-action{font:inherit;background:none;border:0;border-radius:0;box-shadow:none;color:var(--text);cursor:pointer;min-height:44px;padding:.4rem 0}
.writing-page .writing-section-filters button{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.6rem;font-size:.95rem;font-weight:600;line-height:1.35;text-align:center;text-underline-offset:.4em;padding:.75rem .25rem;min-width:0}
.writing-page .writing-section-filters img{display:block;width:clamp(76px,9vw,112px);height:auto;aspect-ratio:1;flex:none;transition:transform .2s ease;transform-origin:center}
.writing-page .writing-section-filters button:hover img,.writing-page .writing-section-filters button:focus-visible img{transform:translateY(-4px) rotate(-5deg)}
.writing-page .writing-section-filters button[aria-pressed="true"] img{transform:scale(1.06)}
.writing-page .writing-section-filters button span{max-width:17ch;min-height:2.7em;display:flex;align-items:center}
.writing-page .writing-section-filters button[aria-pressed="true"]{color:var(--accent);text-decoration:underline;text-decoration-thickness:2px}
.writing-page :is(.writing-section-filters button,.writing-section-tags a,button.writing-action):focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.writing-page .writing-filter-status{color:var(--muted);font-size:.9rem;margin:0 0 1.5rem}
.writing-page .writing-filter-empty{padding:1rem 0 3rem}
.writing-page :is(.writing-entry,.writing-section-filters,.writing-filter-empty)[hidden]{display:none!important}
@media(max-width:700px){.writing-page .writing-section-filters{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem .6rem}.writing-page .writing-section-filters button{font-size:.82rem;gap:.35rem;padding:.4rem .1rem}.writing-page .writing-section-filters img{width:72px}.writing-page .writing-section-tags{gap:.2rem 1rem}}
@media(prefers-reduced-motion:reduce){.writing-page .writing-section-filters img{transition:none}.writing-page .writing-section-filters button:is(:hover,:focus-visible,[aria-pressed="true"]) img{transform:none}}

/* One aligned service blueprint; each supporting row arrives once on native scroll. */
.writing-page .essay-body .service-blueprint{margin:3rem 0;padding:clamp(1rem,3vw,2.5rem);background:var(--ink-2);container-type:inline-size}
.writing-page .essay-body .blueprint-layer{margin:0;padding:0 0 2.5rem}
.writing-page .essay-body .blueprint-layer+ .blueprint-layer{padding-top:1rem}
.writing-page .essay-body .blueprint-layer header{margin-bottom:1.6rem}
.writing-page .essay-body .blueprint-layer h3{font-size:clamp(1.2rem,2.2cqi,1.7rem);line-height:1.25;margin:0 0 .5rem;letter-spacing:-.025em}
.writing-page .essay-body .blueprint-layer header p{font-size:clamp(.9rem,1.5cqi,1.05rem);line-height:1.55;color:var(--muted);margin:0}
.writing-page .essay-body .blueprint-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.5rem,2cqi,1.5rem);list-style:none;margin:0;padding:0}
.writing-page .essay-body .blueprint-grid>li{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.6rem;min-width:0;text-align:center;padding:0;margin:0;font-size:clamp(.85rem,1.6cqi,1.05rem);line-height:1.4;overflow-wrap:normal}
.writing-page .essay-body .blueprint-grid img{display:block;width:clamp(56px,11cqi,120px);height:auto;aspect-ratio:96/80;object-fit:contain;margin:0}
.writing-page .essay-body .journey-stages{position:relative;isolation:isolate}
.writing-page .journey-stages::before{content:"";position:absolute;z-index:-1;left:12.5%;right:12.5%;top:clamp(25px,4.5cqi,48px);height:1px;background:color-mix(in srgb,var(--accent) 28%,transparent)}
.writing-page .journey-stages img{background:var(--ink-2)}
.writing-page .journey-stages strong{font-size:clamp(.9rem,2cqi,1.25rem);color:var(--text)}
.writing-page .journey-stages .journey-human strong{color:var(--accent)}
.writing-page .journey-stages span{color:var(--muted)}
.writing-page .essay-body .journey-outcome{margin:1.5rem 0 0;text-align:center;font-size:clamp(.9rem,1.5cqi,1.05rem);line-height:1.55;color:var(--muted)}
.writing-page .blueprint-swimlane{padding:1rem 0;background:var(--ink)}
.writing-page .blueprint-swimlane--back{background:color-mix(in srgb,var(--text) 5%,var(--ink));margin-top:.5rem}
.writing-page .essay-body p.blueprint-lane-name{margin:0 0 .9rem;font-size:.8rem;font-weight:600;color:var(--muted)}
.writing-page .essay-body .blueprint-steps>li{justify-content:center;padding:.8rem .35rem;border:1px solid color-mix(in srgb,var(--text) 18%,transparent);border-radius:3px;background:var(--ink);min-height:4rem;box-sizing:border-box}
.writing-page .blueprint-steps>li:not(:last-child)::after{content:"";position:absolute;left:100%;width:clamp(.5rem,2cqi,1.5rem);top:50%;height:1px;background:color-mix(in srgb,var(--text) 35%,transparent)}
.writing-page .essay-body .blueprint-platforms,.writing-page .essay-body .blueprint-sources{padding-top:1.5rem}
.writing-page :is(.blueprint-platforms,.blueprint-sources)>li::before{content:"";position:absolute;width:1px;height:1.3rem;background:color-mix(in srgb,var(--accent) 45%,transparent);top:-1.5rem;left:50%}
.writing-page .essay-body .blueprint-sources img{width:clamp(44px,7cqi,72px)}
.writing-page .essay-body .blueprint-data{padding-bottom:0}
.writing-page .service-blueprint>figcaption{font-size:.78em;line-height:1.6;color:var(--muted);margin-top:2rem;text-align:left}
.writing-page [data-blueprint-layer][data-hear-state="pending"]{opacity:0;translate:0 28px}
@media(prefers-reduced-motion:reduce){.writing-page [data-blueprint-layer][data-hear-state="pending"]{opacity:1;translate:none}}
@media print{.writing-page [data-blueprint-layer][data-hear-state="pending"]{opacity:1;translate:none}}
@container(max-width:24rem){
 .writing-page .essay-body .blueprint-grid{gap:.5rem}
 .writing-page .essay-body .blueprint-grid>li{font-size:.82rem;gap:.45rem;overflow-wrap:anywhere}
 .writing-page .journey-stages strong{font-size:.9rem}
 .writing-page .essay-body .blueprint-grid img{width:60px;max-width:100%}
 .writing-page .essay-body .blueprint-steps>li{padding:.65rem .25rem;min-height:5rem}
 .writing-page .essay-body .blueprint-sources img{width:48px}
 .writing-page .blueprint-swimlane{padding-inline:0;background:transparent}
 .writing-page .blueprint-swimlane--back{padding-top:1.25rem}
}

@container(max-width:18rem){
 .writing-page .essay-body .blueprint-grid>li{font-size:.75rem;overflow-wrap:normal}
 .writing-page .journey-stages strong{font-size:.8rem}
 .writing-page .essay-body .blueprint-steps>li{padding-inline:.1rem}
}

/* Chapter arrivals are progressive enhancement; content is visible without JS. */
.writing-page .essay-body .hear-section{padding:0;margin-block:clamp(2.75rem,5vw,4.5rem)}
.writing-page .essay-body .hear-section>h2{margin:0 0 1.1rem;scroll-margin-top:6rem}
.writing-page .essay-body .hear-section-body>p{padding-inline:var(--learning-inset)}
.writing-page .essay-body .hear-phase{margin-block:clamp(3.5rem,6vw,5.5rem)}
.writing-page .essay-body .hear-phase>h2 img{width:44px;height:44px;margin-bottom:1rem}
.writing-page .essay-body .hear-chapter{margin-block:clamp(4rem,8vw,7rem)}
.writing-page .essay-body .hear-chapter>h2 img{width:clamp(72px,8vw,104px);height:clamp(72px,8vw,104px);margin:0 0 1.5rem}

/* Mountain climb: icons arrive with their phase, followed by the sustained summit. */
.writing-page .essay-body .hear-climb{margin:2.5rem var(--learning-inset) 3rem;container-type:inline-size}
.writing-page .hear-climb-scene{position:relative;aspect-ratio:1000/470}
.writing-page .hear-climb-scene>svg{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.writing-page .hear-climb-scene>.hear-climb-portrait{display:none}
.writing-page .hear-mountain{fill:var(--ink-2,#eeebe4)}
.writing-page .hear-ridge{fill:none;stroke:color-mix(in srgb,var(--muted) 16%,transparent);stroke-width:2}
.writing-page .hear-climb-line,.writing-page .hear-climb-arrow{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.writing-page .essay-body .hear-climb ol{list-style:none;margin:0;padding:0}
.writing-page .essay-body .hear-climb-stop{position:absolute;width:22%;left:var(--x);top:var(--y);transform:translate(-50%,-28px);padding:0;margin:0;text-align:center;line-height:1.25;font-weight:650;font-size:clamp(1rem,2.2cqi,1.55rem)}
.writing-page .essay-body .hear-climb-stop img{display:block;box-sizing:border-box;width:56px;height:56px;padding:5px;margin:0 auto 10px;background:var(--ink);border-radius:50%}
.writing-page .hear-climb-stop:nth-child(n+3) span{display:block;padding-top:clamp(1.75rem,3.5cqi,3rem)}
.writing-page .hear-climb-stop:nth-child(1){--x:10%;--y:83.546%;--mx:11.76%;--my:82.6%}
.writing-page .hear-climb-stop:nth-child(2){--x:26.5%;--y:61.702%;--mx:16.18%;--my:59.1%}
.writing-page .hear-climb-stop:nth-child(3){--x:56%;--y:38.298%;--mx:20.59%;--my:35.6%}
.writing-page .hear-climb-stop:nth-child(4){--x:81%;--y:13.830%;--mx:25%;--my:12.1%}
.writing-page .essay-body .hear-sustain{position:absolute;right:2%;top:2%;padding:0;margin:0;color:var(--accent);font-weight:600;font-size:clamp(.9rem,1.8cqi,1.2rem)}
.writing-page .hear-climb>figcaption{font-size:.8em;line-height:1.6;color:var(--muted);margin-top:1rem}
@container(max-width:40rem){
 .writing-page .hear-climb-scene{aspect-ratio:340/660}
 .writing-page .hear-climb-scene>.hear-climb-landscape{display:none}
 .writing-page .hear-climb-scene>.hear-climb-portrait{display:block}
 .writing-page .essay-body .hear-climb-stop{left:0;top:var(--my);width:100%;transform:translateY(-50%);text-align:left;font-size:clamp(1rem,5.5cqi,1.4rem)}
 .writing-page .essay-body .hear-climb-stop img{position:absolute;left:var(--mx);top:50%;width:48px;height:48px;transform:translate(-50%,-50%);margin:0}
 .writing-page .hear-climb-stop span,.writing-page .hear-climb-stop:nth-child(n+3) span{display:block;width:62%;margin-left:36%;padding-top:0}
 .writing-page .essay-body .hear-sustain{top:1%;right:3%;font-size:1rem}
}
@media(prefers-reduced-motion:reduce){.writing-page :is(.hear-climb,.hear-section) *{animation:none!important;transition:none!important}}
@media print{.writing-page .hear-climb-stop,.writing-page .hear-section{opacity:1!important;translate:none!important}.writing-page .hear-climb-line{stroke-dashoffset:0!important}}

/* Article attribution and section links follow the learning, before navigation. */
.writing-page .essay-closing{margin-top:2.5rem;padding:0}
.writing-page .essay-closing .essay-footer{margin-top:.5rem}

/* Frame of Mind: two inclined topic orbits, with a bounded learning picker. */
.writing-page .writing-orbit{max-width:1040px;margin-inline:auto}
.writing-page .writing-orbit:not([data-ready]) .writing-orbit-stage{display:contents}
.writing-page .writing-orbit-stage{position:relative;height:520px;touch-action:pan-y;user-select:none;cursor:grab}
.writing-page .writing-orbit-stage:active{cursor:grabbing}
.writing-page .writing-orbit[data-ready] .writing-section-filters{position:absolute;inset:0;display:block;margin:0;pointer-events:none}
.writing-page .writing-orbit[data-ready] .writing-section-filters button{position:absolute;left:50%;top:50%;width:152px;min-height:140px;padding:6px;gap:8px;pointer-events:auto;transform:translate(-50%,-50%) translate(var(--orbit-x,0px),var(--orbit-y,0px)) scale(var(--orbit-scale,1));will-change:transform}
.writing-page .writing-orbit[data-ready] .writing-section-filters img{width:88px;transform:none;transition:filter .2s ease}
.writing-page .writing-orbit[data-ready] .writing-section-filters button:is(:hover,:focus-visible,[aria-expanded="true"]){color:var(--accent)}
.writing-page .writing-orbit[data-ready] .writing-section-filters button span{justify-content:center;max-width:100%;min-height:2.7em;background:var(--ink);border-radius:3px;padding:0 3px}
.writing-page .writing-orbit[data-ready] .writing-section-filters button:is(:hover,:focus-visible) span{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.25em}
.writing-page .writing-orbit-ring{position:absolute;left:50%;top:50%;width:calc(var(--orbit-major-a)*2);height:calc(var(--orbit-minor-a)*2);transform:translate(-50%,-50%) rotate(var(--orbit-tilt-a));border:1px solid color-mix(in srgb,var(--text) 13%,transparent);border-radius:50%;pointer-events:none}
.writing-page .writing-orbit-ring--b{width:calc(var(--orbit-major-b)*2);height:calc(var(--orbit-minor-b)*2);transform:translate(-50%,-50%) rotate(var(--orbit-tilt-b));border-color:color-mix(in srgb,var(--accent) 19%,transparent)}
.writing-page .writing-orbit-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.writing-page .writing-orbit-center img{display:block;width:112px;height:112px}
.writing-page .writing-orbit-tools{display:flex;justify-content:center;align-items:center;gap:1rem 2rem;margin:0 0 1rem}
.writing-page .writing-orbit-tools p{margin:0;font-size:.85rem;color:var(--muted)}
.writing-page .writing-orbit-tools [role="group"]{display:flex;align-items:center;gap:.3rem}
.writing-page .writing-orbit-tools button,.writing-page .writing-picker-pager button{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;border:0;background:transparent;color:var(--text);font:500 .9rem/1.4 var(--sans);cursor:pointer;min-width:44px;min-height:44px;padding:4px 8px}
.writing-page .writing-orbit-tools svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.writing-page .writing-orbit-tools button:hover,.writing-page .writing-picker-pager button:hover{color:var(--accent)}
.writing-page :is(.writing-orbit-tools button,.writing-picker-pager button,.writing-picker-link):focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.writing-page .writing-list[hidden],.writing-page .writing-orbit [hidden],.writing-page .writing-picker [hidden],.writing-page .writing-filter-status[hidden]{display:none!important}
body.writing-page .info-dialog[data-kind="writing-picker"]{inline-size:min(52rem,calc(100vw - 2 * var(--modal-gap)));overflow:hidden}
body.writing-page .info-dialog[data-kind="writing-picker"] .info-sheet{min-block-size:0}
body.writing-page .info-dialog[data-kind="writing-picker"] .info-body{padding-top:0}
.writing-page .writing-picker-count{font-size:.85rem;color:var(--muted);margin:0 0 1.25rem}
.writing-page .writing-picker-results{list-style:none;margin:0;padding:0;display:grid;gap:1.75rem}
body.writing-page .writing-picker-results>li{margin:0;padding:0}
.writing-page .writing-picker-link{display:flex;gap:clamp(1rem,3vw,2rem);align-items:center;text-decoration:none!important;min-height:44px}
.writing-page .writing-picker-art{display:grid;place-items:center;background:var(--accent);color:var(--ink);width:clamp(90px,14vw,128px);aspect-ratio:1;flex:none;overflow:hidden}
.writing-page .writing-picker-art span{font:800 clamp(1.5rem,4vw,2.5rem)/1 var(--display);letter-spacing:-.07em;transform:rotate(-7deg)}
body.writing-page .writing-picker-copy h3{font:700 clamp(1.15rem,2vw,1.45rem)/1.3 var(--display);letter-spacing:-.035em;color:var(--text);margin:.35rem 0 .6rem}
body.writing-page .writing-picker-summary{font-size:.95rem;line-height:1.55;margin:0 0 .6rem;color:var(--muted)}
.writing-page .writing-picker-action{display:inline-block;font-size:.9rem;font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.3em;color:var(--text)}
.writing-page .writing-picker-link:hover h3{color:var(--accent)}
.writing-page .writing-picker-empty{font-size:1.05rem;line-height:1.6;padding-block:1rem!important}
.writing-page .writing-picker-pager{display:flex;justify-content:space-between;gap:1rem;margin-top:1.25rem}
.writing-page .writing-picker-pager button{padding:0;justify-content:flex-start;font-size:.95rem}
.writing-page .writing-picker-pager button:disabled{opacity:.4;cursor:default;color:var(--muted)}
@media(max-width:700px){
 .writing-page .writing-orbit-stage{height:460px}
 .writing-page .writing-orbit[data-ready] .writing-section-filters button{width:100px;min-height:106px;font-size:.76rem;gap:5px;padding:4px}
 .writing-page .writing-orbit[data-ready] .writing-section-filters img{width:60px}
 .writing-page .writing-orbit-center img{width:82px;height:82px}
 .writing-page .writing-orbit-tools{flex-direction:column;gap:.4rem}
 body.writing-page .info-dialog[data-kind="writing-picker"]{margin:auto auto max(1rem,env(safe-area-inset-bottom));}
 .writing-page .writing-picker-link{align-items:flex-start;gap:1rem}
 .writing-page .writing-picker-art{width:64px}
 .writing-page .writing-picker-art span{font-size:1.4rem}
 body.writing-page .writing-picker-summary{font-size:.88rem}
 .writing-page .writing-picker-count{margin-bottom:1rem}
}
@media(max-height:500px){
 body.writing-page .info-dialog[data-kind="writing-picker"] .info-sheet>header{padding-top:.7rem;padding-bottom:.4rem}
 body.writing-page .info-dialog[data-kind="writing-picker"] .info-body{padding-bottom:.7rem}
 .writing-page .writing-picker-count{margin-bottom:.5rem}
 .writing-page .writing-picker-art{width:80px}
 .writing-page .writing-picker-pager{margin-top:.5rem}
}
@media(prefers-reduced-motion:reduce){
 .writing-page .writing-orbit *,body.writing-page .info-dialog[data-kind="writing-picker"] .info-sheet{animation:none!important;transition:none!important}
}

/* A hovered or keyboard-focused topic stays above the crossing orbital planes. */
.writing-page .writing-orbit[data-ready] .writing-section-filters button:is(:hover,:focus-visible){z-index:20!important}

/* Pending arrivals are enabled only by the controller; no-JS and Admin remain complete. */
.writing-page [data-hear-state="pending"]>h2,.writing-page [data-hear-state="pending"]>.hear-section-body{opacity:0;translate:0 28px}
@media(prefers-reduced-motion:reduce){.writing-page [data-hear-state="pending"]>h2,.writing-page [data-hear-state="pending"]>.hear-section-body{opacity:1;translate:none}}
@media print{.writing-page [data-hear-state="pending"]>h2,.writing-page [data-hear-state="pending"]>.hear-section-body{opacity:1;translate:none}}

/* A deliberate, compact ending shared by the Frame of Mind index and learnings. */
.writing-page .writing-site-footer{background:var(--ink-2);padding-block:clamp(2rem,4vw,3.5rem);font-size:.9rem}
.writing-page .writing-site-footer>.wrap{display:grid;grid-template-columns:minmax(0,1fr);justify-content:normal;gap:2rem;width:100%;max-width:1440px;box-sizing:border-box;padding-inline:var(--gutter);margin-inline:auto}
.writing-page .writing-footer-lead{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
.writing-page .writing-footer-lead p{display:grid;gap:.25rem;margin:0;line-height:1.5}
.writing-page .writing-footer-lead strong{font-size:1.15rem;color:var(--text)}
.writing-page .writing-footer-lead .writing-action{font-size:1rem;white-space:nowrap}
.writing-page .writing-site-footer .foot-social{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 3rem;margin:0}
.writing-page .writing-site-footer .foot-social a{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:.65rem;row-gap:.25rem;align-content:start;align-items:center;min-height:44px;font-size:.9rem}
.writing-page .writing-site-footer .foot-social svg{width:20px;height:20px;align-self:center;color:var(--accent)}
.writing-page .writing-site-footer .foot-social span{grid-column:2;font-size:.84rem;line-height:1.5}
.writing-page .writing-footer-utility{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.85rem}
.writing-page .writing-footer-utility a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:.3em;color:var(--muted)}
@media(max-width:600px){.writing-page .writing-site-footer .foot-social{grid-template-columns:1fr;gap:1.25rem}.writing-page .writing-footer-lead{align-items:flex-start}.writing-page .writing-footer-lead .writing-action{font-size:.9rem}.writing-page .writing-site-footer>.wrap{gap:1.5rem}}

/* HEAR opening uses its full measure; date is secondary to the subtitle. */
.writing-page .essay:has(.hear-climb) .essay-header h1{max-width:none;text-wrap:wrap;font-size:clamp(2.3rem,4.4vw,4.4rem)}
.writing-page .essay-body>p.hear-original-date{font-size:.82em;line-height:1.5;color:var(--muted);margin:0 0 clamp(2.75rem,5vw,4.5rem);padding-inline:0}
.writing-page .essay-body>ol:has(img[src$="experience.svg"]){margin-block:clamp(3.25rem,6vw,5.5rem);row-gap:2.5rem}
.writing-page .essay-body>p:has(+ol img[src$="experience.svg"]){margin-top:clamp(1rem,2vw,2rem)}
.writing-page .essay-body>ol:has(img[src$="experience.svg"])+p{margin-bottom:clamp(2.5rem,4vw,3.75rem)}
/* Source photos stay uncropped; a true float gives Ashy wins a magazine rhythm. */
.writing-page .essay-body .hear-section-body{display:flow-root}
.writing-page .essay-body .hear-media{margin:2.5rem var(--learning-inset)}
.writing-page .essay-body .hear-media img{display:block;width:100%;height:auto;margin:0}
.writing-page .hear-media--pair>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;align-items:center}
.writing-page .hear-media figcaption{font-size:.75em;line-height:1.55;color:var(--muted);margin-top:.8rem}
.writing-page .essay-body .hear-media--aside{float:right;width:34%;max-width:400px;margin:0 var(--learning-inset) 1.5rem 2rem}
.writing-page .hear-media--aside figcaption a{text-decoration-color:color-mix(in srgb,var(--muted) 50%,transparent)}
@media(max-width:700px){.writing-page .essay-body .hear-media--aside{float:none;width:auto;max-width:400px;margin:0 var(--learning-inset) 2rem}.writing-page .hear-media--pair>div{grid-template-columns:1fr;gap:1rem}.writing-page .essay-body .hear-media{margin-block:2rem}}