/* Atlas · minimal. Same language as the five homepages (src/homepage.css):
   white paper, black type, heavy/light headings, small labels with hairlines, soft gray panels.
   The orbit map is drawn in the ink of the type, and engines carry no colour. Nothing moves on its own.
   2026-10-01 (qa/flow-fix-20261001): the shared glass bar of the company page (site-bar.css) replaces the
   masthead; the map is the list of engines (their buttons stay for keyboards and screen readers); the goal
   examples and the email-writing preview moved here from the company page; the four businesses are one
   line each; and the page keeps one type scale of nine sizes with the company page. */
@font-face{font-family:'Inter Tight';font-weight:700;font-display:swap;src:url(/assets/inter-tight-bold.woff2) format('woff2')}
:root{
  color-scheme:light;
  --paper:#fff;--ink:#0a0a0a;--ink-2:#363636;--ink-3:#6a6a6a;--line:#e7e7e7;--soft:#f4f4f5;
  --suit:'SUIT Variable',sans-serif;--latin:'Inter Tight','SUIT Variable',sans-serif;--mono:'DM Mono',ui-monospace,monospace;
  --gutter:40px;--max:1280px;--bar:76px;
  --pad-x:max(var(--gutter),calc((100% - var(--max)) / 2));
  /* The type scale shared with the company page: label, small, interface, body, lead, item, statement and
     section. The ATLAS mark above them is the ninth size. */
  --t-label:11px;--t-small:13px;--t-ui:15px;--t-body:17px;--t-lead:20px;--t-item:24px;--t-statement:40px;--t-section:clamp(34px,5vw,72px);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:auto;scroll-padding-top:calc(var(--bar) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--suit);font-weight:500;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0;margin:0}
button,a,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:disabled{cursor:default;opacity:.4}
[hidden]{display:none!important}
.mono{font-family:var(--mono);font-weight:400}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.skip-link{position:fixed;top:-100px;left:16px;z-index:70;padding:12px 16px;border-radius:10px;background:var(--ink);color:var(--paper);font-weight:700;text-decoration:none}
.skip-link:focus{top:10px}
.no-script{padding:24px;font-size:var(--t-body);line-height:1.7}
.observatory{position:relative;isolation:isolate;min-height:100svh;background:var(--paper);overflow:clip}

/* ── Studio: cover and the chosen engine left, the orbit map pinned right ── */
.workspace{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:56px;padding:40px var(--pad-x) 120px}
.intro{grid-column:1;grid-row:1;min-width:0}
.intro-heading{container-type:inline-size}
.intro h1{margin:0 0 0 -.04em;font:800 clamp(84px,30cqi,232px)/.8 var(--latin);letter-spacing:-.055em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.eyebrow{display:flex;align-items:center;gap:18px;margin:30px 0 0;font:600 var(--t-ui)/1.4 var(--suit);letter-spacing:-.01em;color:var(--ink-2)}
.eyebrow::after{content:'';flex:1;height:1px;background:currentColor;opacity:.45}
.intro-statement{margin-top:40px}
.intro h2{margin:0;font:300 var(--t-statement)/1.25 var(--suit);letter-spacing:-.045em;color:var(--ink);word-break:keep-all}
.intro h2::first-line{font-weight:800}
.intro-copy{margin:18px 0 0;font:500 var(--t-lead)/1.65 var(--suit);letter-spacing:-.02em;color:var(--ink-2);word-break:keep-all}

.visual-stage{position:sticky;z-index:2;top:calc(var(--bar) + 16px);grid-column:2;grid-row:1/3;align-self:start;height:clamp(520px,calc(100svh - var(--bar) - 40px),880px);isolation:isolate;overflow:hidden;border-radius:28px;background:var(--soft);color:var(--ink);container-type:size}
#constellation{display:block;width:100%;height:100%;touch-action:pan-y}
/* The caption keeps the size the map reserves its corner for (SMALL/ROOMY caption boxes in the map script). */
.stage-caption{position:absolute;z-index:3;left:28px;top:26px;margin:0;font-size:10px;line-height:1.3;letter-spacing:.1em;color:var(--ink-3);pointer-events:none}
.stage-hint{position:absolute;z-index:3;right:28px;bottom:30px;margin:0;font:500 var(--t-small)/1 var(--suit);color:var(--ink-3);pointer-events:none;transition:opacity .2s ease}
.observatory[data-detail=true] .stage-hint,.observatory[data-preview=true] .stage-hint{opacity:0}
/* A low stage shows the map alone; the map leaves no corner free for words there. */
@container (max-height:339.98px){.stage-caption,.stage-hint{display:none}}

/* ── The chosen engine ── */
.engine-explorer{grid-column:1;grid-row:2;align-self:start;min-width:0;margin-top:56px;container-type:inline-size;scroll-margin-top:calc(var(--bar) + 20px)}
.explorer-head{display:flex;align-items:center;gap:16px;margin:0 0 16px}
.explorer-title{flex:1;display:flex;align-items:center;gap:18px;margin:0;font:600 var(--t-small)/1.4 var(--suit);letter-spacing:-.01em;color:var(--ink-2)}
.explorer-title::after{content:'';flex:1;height:1px;background:currentColor;opacity:.45}
.view-tabs{display:flex;gap:2px;padding:4px;border-radius:999px;background:var(--soft)}
.view-tabs button{height:32px;padding:0 14px;border-radius:999px;color:var(--ink-3);font:600 var(--t-small)/1 var(--suit);letter-spacing:-.01em;transition:color .16s ease}
.view-tabs button:hover{color:var(--ink)}
.view-tabs button[aria-pressed=true]{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04)}
/* The map already names the eight engines. Their buttons stay for keyboards and screen readers: a focused
   button lights its engine on the map, as a pointer does. */
.engine-dock{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.inspector{position:relative;min-width:0;min-height:280px;padding:28px 30px 30px;border-radius:24px;background:var(--soft)}
.panel-index{margin:0 0 16px;font:400 var(--t-label)/1.4 var(--mono);letter-spacing:.14em;color:var(--ink-3)}
.inspector h3{margin:0 0 10px;font:800 var(--t-item)/1.35 var(--suit);letter-spacing:-.035em;word-break:keep-all}
.inspector h3 .engine-name{display:block;margin:0 0 8px;font:700 var(--t-statement)/1 var(--latin);letter-spacing:-.045em}
#detail-description{margin:0;font:500 var(--t-body)/1.7 var(--suit);letter-spacing:-.02em;color:var(--ink-2);word-break:keep-all}
.concepts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 20px;margin:18px 0 0;padding:16px 0 0;list-style:none;border-top:1px solid rgba(0,0,0,.1)}
.concepts li{position:relative;min-width:0;padding-left:15px;font:600 var(--t-small)/1.45 var(--suit);letter-spacing:-.02em;color:var(--ink-2);word-break:keep-all}
.concepts li::before{content:'';position:absolute;left:0;top:.7em;width:7px;height:1px;background:var(--ink-3)}
/* Roomy stages print the same five lines on the map; the list then stays for screen readers only. */
.observatory[data-legend=map] .concepts{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.related{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px}
.related-caption{width:100%;margin-bottom:2px;font:700 var(--t-small)/1.4 var(--suit);letter-spacing:-.02em;color:var(--ink-3)}
.related button[data-engine]{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;background:var(--paper);color:var(--ink);font:700 var(--t-small)/1 var(--latin);box-shadow:0 0 0 1px rgba(0,0,0,.06);transition:box-shadow .16s ease}
.related button[data-engine]:hover,.related button.is-preview{box-shadow:0 0 0 1.5px var(--ink)}
.text-action,.glass-action{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;border-radius:999px;background:var(--ink);color:var(--paper);font:700 var(--t-ui)/1 var(--suit);letter-spacing:-.02em;text-decoration:none;transition:background-color .16s ease}
.text-action:hover,.glass-action:hover{background:#2b2b2b}
.arrow-icon{display:inline-block;flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:url('/assets/arrow-up-right.svg') center/contain no-repeat;mask:url('/assets/arrow-up-right.svg') center/contain no-repeat}
.inspector[data-engine=strata]::after{content:'설계·준비 중';position:absolute;top:24px;right:26px;padding:7px 11px;border-radius:999px;background:var(--paper);box-shadow:0 0 0 1px var(--line);color:var(--ink-2);font:700 var(--t-small)/1 var(--suit)}
.story-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.story-heading .panel-index{margin:0}
#story-back{height:32px;padding:0 14px;border-radius:999px;background:var(--paper);box-shadow:0 0 0 1px var(--line);font:700 var(--t-small)/1 var(--suit)}
#scenario-picker{border-top:1px solid var(--ink)}
.scenario-card{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:18px 2px 18px 0;border-bottom:1px solid rgba(0,0,0,.08);text-align:left}
.scenario-card strong{display:block;font:800 var(--t-body)/1.4 var(--suit);letter-spacing:-.03em}
.scenario-card small{display:block;margin-top:4px;font:600 var(--t-small)/1.4 var(--suit);color:var(--ink-3)}
.scenario-card>span:last-child{font:500 var(--t-body)/1 var(--latin)}
.scenario-card:hover strong{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.story-name{margin:0 0 14px;font:800 var(--t-body)/1.35 var(--suit);letter-spacing:-.03em}
.story-progress{display:flex;gap:6px;margin-bottom:18px}
.story-progress button{position:relative;flex:1;height:20px}
.story-progress button::before{content:'';position:absolute;left:0;right:0;top:9px;height:2px;background:rgba(0,0,0,.12)}
.story-progress button.past::before{background:var(--ink);opacity:.4}
.story-progress button[aria-current=step]::before{background:var(--ink)}
.story-step-label{display:block;margin-bottom:8px;font:400 var(--t-label)/1.4 var(--mono);letter-spacing:.14em;color:var(--ink-3)}
#story-step h3{margin:0 0 8px;font:800 var(--t-item)/1.3 var(--suit);letter-spacing:-.04em}
#story-step p{margin:0;font:500 var(--t-body)/1.7 var(--suit);letter-spacing:-.02em;color:var(--ink-2);word-break:keep-all}
.glass-action{margin-top:22px}

/* ── Sections ── */
.personalization,.adaptation,.hands-on,.applications{padding:120px var(--pad-x) 0;scroll-margin-top:var(--bar)}
/* A section opens with its title across the page and the lead under it, as on the company page. */
.section-heading{display:grid;justify-items:start}
.section-index{display:flex;align-items:center;gap:18px;width:100%;max-width:560px;margin:0 0 20px;font-size:var(--t-label);line-height:1.4;letter-spacing:.14em;color:var(--ink-3)}
.section-index::after{content:'';flex:1;height:1px;background:currentColor;opacity:.45}
.section-heading h2{margin:0;font:300 var(--t-section)/1.12 var(--suit);letter-spacing:-.05em;color:var(--ink);word-break:keep-all}
.section-heading h2::first-line{font-weight:900}
.section-lead{max-width:36em;margin:24px 0 0;font:500 var(--t-lead)/1.7 var(--suit);letter-spacing:-.02em;color:var(--ink-2);word-break:keep-all}
.system-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:64px 0 0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.system-flow li{display:flex;flex-direction:column;min-width:0;padding:28px 28px 8px 0}
.system-flow li+li{padding-left:28px;border-left:1px solid var(--line)}
.flow-icon{display:block;width:56px;height:56px;object-fit:contain;margin:0 0 20px}
.flow-number{font-size:var(--t-label);letter-spacing:.14em;color:var(--ink-3)}
.system-flow h3{margin:10px 0 0;font:900 var(--t-statement)/1 var(--suit);letter-spacing:-.05em}
.flow-detail p{margin:16px 0 0;font:500 var(--t-body)/1.7 var(--suit);letter-spacing:-.02em;color:var(--ink-2);word-break:keep-all}
.flow-engines{display:block;margin-top:14px;font:600 var(--t-small)/1.4 var(--latin);letter-spacing:.01em;color:var(--ink-3)}
.flow-result{margin-top:20px;font:700 var(--t-ui)/1.4 var(--suit);letter-spacing:-.02em;color:var(--ink)}
.flow-result::before{content:'→ ';font-family:var(--latin)}
.scope-note{margin:28px 0 0;font:500 var(--t-small)/1.7 var(--suit);letter-spacing:-.01em;color:var(--ink-3);word-break:keep-all}

/* ── Examples: practice that follows a goal, and the email-writing preview ── */
.example-explorer{margin-top:56px}
.example-nav{display:flex;flex-wrap:wrap;gap:2px;width:fit-content;max-width:100%;padding:4px;border-radius:999px;background:var(--soft)}
.example-nav button{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 18px;border-radius:999px;color:var(--ink-3);font:600 var(--t-ui)/1 var(--suit);letter-spacing:-.02em;transition:color .16s ease}
.example-nav button .mono{font-size:var(--t-label);letter-spacing:.1em}
.example-nav button:hover{color:var(--ink)}
.example-nav button[aria-selected=true]{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04)}
.example-label{margin:0;font:600 var(--t-small)/1.4 var(--suit);letter-spacing:-.01em;color:var(--ink-3)}
.goal-panel{margin-top:36px}
.goal-panel:focus-visible,.letter-panel:focus-visible{outline-offset:8px;border-radius:12px}
.goal-context{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px;align-items:center}
/* The felt object on a soft plate: the photo's white paper takes the plate's grey. */
.goal-art{display:block;width:100%;max-width:400px;aspect-ratio:1;padding:6%;border-radius:24px;background:var(--soft);isolation:isolate}
.goal-art img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.goal-context h3{margin:8px 0 0;font:800 var(--t-item)/1.35 var(--suit);letter-spacing:-.035em;word-break:keep-all}
.goal-context p:not(.example-label){margin:14px 0 0;font:500 var(--t-body)/1.75 var(--suit);letter-spacing:-.02em;color:var(--ink-2);word-break:keep-all}
.goal-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:40px 0 0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.goal-steps li{min-width:0;padding:24px 28px 8px 0}
.goal-steps li+li{padding-left:28px;border-left:1px solid var(--line)}
.goal-steps .mono{font-size:var(--t-label);letter-spacing:.14em;color:var(--ink-3)}
.goal-steps h4{margin:10px 0 0;font:800 var(--t-body)/1.4 var(--suit);letter-spacing:-.03em;word-break:keep-all}
.goal-steps p{margin:10px 0 0;font:500 var(--t-ui)/1.7 var(--suit);letter-spacing:-.02em;color:var(--ink-2);word-break:keep-all}
.goal-takeaway{margin:24px 0 0;font:700 var(--t-ui)/1.6 var(--suit);letter-spacing:-.02em;color:var(--ink);word-break:keep-all}
.letter-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px;align-items:start;margin-top:56px}
.letter-situation{padding-top:24px;border-top:1px solid var(--ink)}
.letter-situation h3{margin:10px 0 0;font:800 var(--t-item)/1.35 var(--suit);letter-spacing:-.035em;word-break:keep-all}
.letter-situation p:not(.example-label){margin:14px 0 0;font:500 var(--t-body)/1.75 var(--suit);letter-spacing:-.02em;color:var(--ink-2);word-break:keep-all}
.hands-on .example-explorer{margin-top:0}
.letter-layout .example-guide{grid-column:1/-1;margin:0 0 18px}
.example-guide{margin:0 0 14px;font:500 var(--t-small)/1.6 var(--suit);letter-spacing:-.01em;color:var(--ink-3);word-break:keep-all}
.example-nav--help{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;padding:0;gap:0;border-radius:0;background:none;border-top:1px solid var(--ink)}
.example-nav--help button{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:5px;height:auto;padding:16px 14px 16px 0;border-radius:0;border-bottom:1px solid var(--line);text-align:left}
.example-nav--help button strong{font:700 var(--t-ui)/1.3 var(--suit);letter-spacing:-.02em}
.example-nav--help button span{font:500 var(--t-small)/1.4 var(--suit);letter-spacing:-.01em;word-break:keep-all}
.example-nav--help button[aria-selected=true]{background:none;box-shadow:inset 0 2px 0 var(--ink);color:var(--ink)}
.letter-panel{padding-top:24px}
.letter-panel h3{margin:0;font:800 var(--t-item)/1.35 var(--suit);letter-spacing:-.035em;word-break:keep-all}
.letter-panel>p:not(.panel-index){margin:12px 0 0;font:500 var(--t-body)/1.75 var(--suit);letter-spacing:-.02em;color:var(--ink-2);word-break:keep-all}
.letter-prompts{margin:20px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.letter-prompts li{display:grid;grid-template-columns:34px minmax(0,1fr);padding:14px 0;border-bottom:1px solid var(--line);font:500 var(--t-ui)/1.6 var(--suit);letter-spacing:-.02em;color:var(--ink);word-break:keep-all}
.letter-prompts .mono{padding-top:3px;font-size:var(--t-label);letter-spacing:.1em;color:var(--ink-3)}
.letter-hint{border-bottom:1px solid var(--line)}
.letter-hint summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;cursor:pointer;list-style:none;font:700 var(--t-ui)/1.3 var(--suit);letter-spacing:-.02em}
.letter-hint summary::-webkit-details-marker{display:none}
.letter-hint summary::after{content:'+';font:400 var(--t-lead)/1 var(--latin)}
.letter-hint[open] summary::after{content:'−'}
.letter-hint p{margin:0 0 18px;font:500 var(--t-ui)/1.7 var(--suit);letter-spacing:-.02em;color:var(--ink-2);word-break:keep-all}
.letter-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:44px;padding-top:24px;border-top:1px solid var(--line)}
.letter-footer p{margin:0;max-width:640px;font:500 var(--t-small)/1.7 var(--suit);letter-spacing:-.01em;color:var(--ink-3);word-break:keep-all}

/* ── Built with Atlas: one line for each business; their felt objects open the company page ── */
.application-list{margin:56px 0 0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.application-link{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,8fr) 24px;align-items:baseline;column-gap:24px;padding:26px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.application-name{font:700 var(--t-item)/1 var(--latin);letter-spacing:-.03em}
.application-link strong{font:800 var(--t-body)/1.4 var(--suit);letter-spacing:-.03em;word-break:keep-all}
.application-detail{font:500 var(--t-ui)/1.6 var(--suit);letter-spacing:-.02em;color:var(--ink-2);word-break:keep-all}
.application-link .arrow-icon{align-self:center;justify-self:end;width:18px;height:18px;color:var(--ink)}
.application-link:hover .application-name{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.application-link:focus-visible{outline-offset:6px;border-radius:6px}

/* ── Footer and dialog ── */
.colophon{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:120px var(--pad-x) 0;padding:36px 0 56px;border-top:1px solid var(--line)}
.colophon p{display:flex;align-items:center;gap:16px;margin:0;font:700 var(--t-ui)/1.5 var(--suit);letter-spacing:-.03em}
.colophon .mono{font-size:var(--t-label);letter-spacing:.2em;color:var(--ink-3);font-weight:400}
.footer-dot{display:none}
#about-open{display:inline-flex;align-items:center;gap:8px;min-height:40px;border-bottom:1.5px solid var(--ink);font:700 var(--t-ui)/1 var(--suit);letter-spacing:-.02em}
dialog{max-width:560px;width:calc(100% - 32px);padding:32px;border:0;border-radius:24px;background:var(--paper);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.25)}
dialog::backdrop{background:rgba(0,0,0,.4)}
dialog .eyebrow{display:block;margin:0;font:400 var(--t-label)/1.4 var(--mono);letter-spacing:.2em;color:var(--ink-3)}
dialog .eyebrow::after{display:none}
dialog>h2{margin:10px 0 14px;font:900 var(--t-item)/1.3 var(--suit);letter-spacing:-.04em}
dialog>p:not(.eyebrow){margin:0 0 12px;font:500 var(--t-ui)/1.75 var(--suit);letter-spacing:-.02em;color:var(--ink-2);word-break:keep-all}
#about-close{display:block;min-width:96px;height:44px;margin:22px 0 0 auto;padding:0 22px;border-radius:999px;background:var(--ink);color:var(--paper);font:700 var(--t-ui)/1 var(--suit)}

/* ── Short screens ── */
@media(min-width:1100px) and (max-height:820px){
  .workspace{padding-top:28px}
  .intro h1{font-size:clamp(80px,26cqi,190px)}
  .eyebrow{margin-top:24px}
  .intro-statement{margin-top:28px}
  .intro-copy{margin-top:12px}
  .visual-stage{top:calc(var(--bar) + 12px);height:clamp(480px,calc(100svh - var(--bar) - 28px),880px)}
  .engine-explorer{margin-top:44px}
}

/* ── Tablets: cover, map and the chosen engine, one after another. Nothing stays pinned over the text. ── */
@media(max-width:1099px){
  :root{--gutter:28px}
  .workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:none;padding:32px var(--pad-x) 24px}
  .intro,.engine-explorer{grid-column:1;grid-row:auto}
  .intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;align-items:end}
  .intro-statement{margin-top:0}
  .visual-stage{position:relative;top:auto;grid-column:1;grid-row:auto;height:min(72vw,600px);margin-top:40px}
  .engine-explorer{margin-top:44px}
  .section-lead{margin-top:20px}
  .system-flow,.goal-steps{grid-template-columns:minmax(0,1fr)}
  .system-flow li,.system-flow li+li,.goal-steps li,.goal-steps li+li{padding:24px 0 20px;border-left:0;border-bottom:1px solid var(--line)}
  .goal-context,.letter-layout{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .goal-art{max-width:320px}
  .application-link{grid-template-columns:minmax(0,1fr) 24px;row-gap:6px}
  .application-link>:not(.arrow-icon){grid-column:1}
  .application-link .arrow-icon{grid-column:2;grid-row:1}
}

/* ── Phones ── */
@media(max-width:760px){
  :root{--gutter:20px;--bar:64px;--t-body:16px;--t-lead:18px;--t-item:20px;--t-statement:28px}
  .workspace{padding:24px var(--pad-x) 8px}
  .intro{display:block}
  .intro h1{font-size:30cqi}
  .eyebrow{margin-top:22px}
  .intro-statement{margin-top:28px}
  .intro h2{line-height:1.3}
  .intro-copy{margin-top:12px;line-height:1.65}
  .visual-stage{height:min(98vw,420px);margin-top:28px;border-radius:20px}
  .stage-caption{left:20px;top:20px;font-size:9.5px}
  .stage-hint{right:20px;bottom:24px}
  .engine-explorer{margin-top:36px}
  .view-tabs button{padding:0 12px}
  .inspector{min-height:260px;padding:22px 20px 24px;border-radius:20px}
  .inspector[data-engine=strata]::after{top:18px;right:18px}
  .concepts{gap:8px 14px}
  .personalization,.adaptation,.hands-on,.applications{padding-top:84px}
  .system-flow,.example-explorer,.letter-layout,.application-list{margin-top:36px}
  .example-nav{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:100%}
  .example-nav button{justify-content:center;gap:6px;padding:0 8px}
  .example-nav--help{grid-auto-flow:row;grid-template-columns:minmax(0,1fr)}
  .example-nav--help button{flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 0}
  .goal-panel{margin-top:28px}
  .goal-art{max-width:240px}
  .letter-footer{flex-direction:column;align-items:flex-start}
  .application-link{padding:20px 0}
  .colophon{flex-direction:column;align-items:flex-start;margin-top:84px;padding:28px 0 44px}
  .colophon p{flex-direction:column;align-items:flex-start;gap:8px}
  dialog{padding:24px 22px 22px}
}
@media(max-width:370px){
  :root{--gutter:16px}
  .inspector{padding:20px 16px 22px}
}

@media(prefers-reduced-motion:reduce){
  .observatory,.observatory *{transition:none!important;animation:none!important}
}
@media(forced-colors:active){
  .observatory,.inspector,dialog{background:Canvas;color:CanvasText}
  .view-tabs button,.example-nav button,.related button[data-engine],.scenario-card,.text-action,.glass-action,#about-open,#about-close,#story-back{border:1px solid ButtonText}
  .view-tabs button[aria-pressed=true],.example-nav button[aria-selected=true]{outline:3px solid Highlight}
  .visual-stage{forced-color-adjust:none;background:#f4f4f5;color:#0a0a0a}
  .arrow-icon{background:LinkText;forced-color-adjust:none}
}