:root{color-scheme:dark;--bg:#0b1715;--panel:#10201c;--text:#e9e9df;--muted:#aebdb4;--gold:#c6ad7d;--line:#c6ad7d42}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:2rem}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:1rem;line-height:1.8}a{color:inherit;text-decoration-color:var(--gold);text-underline-offset:.35em}a:hover{color:var(--gold)}a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:6px}.skip{position:absolute;left:1rem;top:-5rem;background:var(--bg);padding:1rem;z-index:10}.skip:focus{top:1rem}.masthead{max-width:1440px;margin:auto;padding:28px 5%;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:24px}.wordmark{font-family:Georgia,serif;letter-spacing:.18em;font-size:1.5rem;color:var(--gold);text-decoration:none}.wordmark span{display:block;font-family:system-ui,sans-serif;font-size:.75rem;letter-spacing:.08em;color:var(--muted)}nav{display:flex;gap:24px}nav a{font-size:.875rem;text-decoration:none;padding:.25rem 0}nav a[aria-current=page]{border-bottom:1px solid var(--gold);color:var(--gold)}main{max-width:1440px;margin:auto}.title-block{padding:80px 7% 70px;border-bottom:1px solid var(--line)}.eyebrow,.story-label{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600}h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;line-height:1.15;text-wrap:balance}h1{font-size:clamp(2.6rem,5.4vw,5.4rem);letter-spacing:-.045em;margin:24px 0 32px;max-width:1150px}h2{font-size:clamp(2rem,3.3vw,3.2rem);letter-spacing:-.025em;margin:15px 0 30px}h3{font-size:clamp(1.65rem,2.5vw,2.4rem);margin:18px 0 24px}.deck{font-size:clamp(1.1rem,1.8vw,1.45rem);max-width:760px;color:var(--muted);line-height:1.65}.jump{display:inline-flex;align-items:center;gap:18px;color:var(--gold);font-size:.9rem;text-decoration:none;padding:12px 0 8px;border-bottom:3px double var(--gold)}.reading-layout{display:grid;grid-template-columns:220px minmax(0,790px);gap:6%;padding:0 7%;justify-content:center}.contents{position:sticky;top:32px;align-self:start;margin-top:72px}.contents nav{flex-direction:column;gap:12px}.aside-note{font-size:.8rem;color:var(--muted);line-height:1.6;margin-top:36px}article{min-width:0}section{padding:65px 0;border-bottom:1px solid var(--line)}p{margin:0 0 22px}strong{font-weight:600;color:#f2ede3}li{margin-bottom:12px}ul{padding-left:1.25rem}blockquote{font-family:Georgia,serif;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.5;margin:32px 0;padding:8px 0 8px 24px;border-left:2px solid var(--gold);color:#dcc99f}code{font-size:.88em;overflow-wrap:anywhere;color:#d7c9ad}figure{margin:32px 0}.diagram-scroll{overflow-x:auto;border:1px solid var(--line);padding:18px 8px;background:#0a1311}.diagram-scroll svg{display:block;width:100%;min-width:680px;color:var(--gold)}.boxes rect{fill:#12201b;stroke:#a9926a;stroke-width:1}.diagram-text text{text-anchor:middle;fill:var(--text);font:16px system-ui,sans-serif}.diagram-text .small{font-size:13px;fill:var(--muted)}.connections path{fill:none;stroke:var(--gold);stroke-width:1.3;marker-end:url(#arrow)}.edge-label{font:13px system-ui,sans-serif;fill:var(--muted)}figcaption{font-size:.8rem;color:var(--muted);margin-top:12px}.principles{margin:0}.principles dt{color:var(--gold);font-weight:500;margin:26px 0 8px}.principles dd{margin:0}.section-lead{color:var(--muted);font-size:1.15rem}.story{padding:42px 0;border-top:1px solid var(--line);margin-top:36px}.story:last-child{padding-bottom:0}.story-label{margin:0}.terminal{white-space:pre;overflow-x:auto;background:#050d0b;border:1px solid var(--line);border-top:3px double var(--gold);padding:26px 22px;margin:28px 0;color:#e4d5b7;font-size:.875rem;line-height:1.8}.terminal code{font-size:inherit;color:inherit}.evidence{background:var(--panel);padding:30px;border:1px solid var(--line)}.evidence h3{font:600 1rem system-ui,sans-serif;color:var(--gold);margin-top:0}.evidence h3:not(:first-child){margin-top:32px}.evidence p:last-child{margin-bottom:0}.closing-line{font-family:Georgia,serif;font-size:1.65rem;line-height:1.5;margin:36px 0}footer{max-width:1440px;margin:auto;padding:32px 7%;display:flex;justify-content:space-between;gap:24px;font-size:.875rem;color:var(--muted)}
/* Study surface */
.study-shell{max-width:1050px;padding:52px 7% 80px;margin:auto}.study-shell h1{font-size:clamp(2.5rem,5vw,4.4rem)}.study-intro{max-width:750px;color:var(--muted)}.study-tools{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}button{font:inherit;font-size:.9rem;cursor:pointer;background:transparent;color:var(--gold);border:1px solid var(--gold);padding:10px 18px}button:hover{background:var(--gold);color:var(--bg)}.flashcard{border-top:1px solid var(--line);padding:24px 0}.flashcard summary{font-family:Georgia,serif;font-size:1.4rem;cursor:pointer;padding-right:20px;line-height:1.4}.flashcard summary::marker{color:var(--gold)}.answer{padding:24px 0 0;max-width:760px}.answer p:last-child{margin-bottom:0}.answer a{font-size:.875rem;color:var(--gold)}.study-group{padding:32px 0}.study-group h2{font-size:1.8rem}.practice{background:var(--panel);border:1px solid var(--line);padding:24px;margin:24px 0}.practice label{display:block;font-size:1rem;margin-bottom:12px}.practice textarea{width:100%;min-height:140px;background:var(--bg);border:1px solid var(--line);color:var(--text);font:inherit;padding:14px;resize:vertical}.privacy-note{color:var(--muted);font-size:.8rem;margin:10px 0 0}.study-tools[hidden]{display:none}
@media(max-width:1000px){.reading-layout{grid-template-columns:minmax(0,790px)}.contents{position:static;margin:30px 0 0;border-bottom:1px solid var(--line);padding-bottom:26px}.contents nav{flex-direction:row;flex-wrap:wrap;gap:12px 24px}.aside-note{display:none}.contents .eyebrow{margin-bottom:12px}.title-block{padding:55px 7%}.wide{display:none}}
@media(max-width:600px){.masthead{align-items:flex-start;flex-direction:column;padding:20px 7%;gap:16px}.wordmark span{font-size:.7rem}.title-block{padding:42px 7%}.title-block h1{font-size:2.65rem}.reading-layout{padding:0 7%}section{padding:42px 0}.story{padding:28px 0;margin-top:26px}blockquote{padding-left:18px}.evidence{padding:22px}.terminal{padding:18px 14px;font-size:.78rem}footer{flex-direction:column;gap:8px}.study-shell{padding-top:36px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{body{background:white;color:black}.masthead,.contents,.study-tools,.jump,footer{display:none}.reading-layout{display:block;padding:0}.title-block{padding:0 0 20px}section{padding:24px 0}h1{font-size:32pt}h2{font-size:24pt}h3{font-size:18pt}strong,code,.eyebrow,.story-label,blockquote{color:black}.evidence,.terminal{background:white;color:black}.diagram-scroll{background:white}.diagram-text text{fill:black}.boxes rect{fill:white}.answer{display:block}}
/* Atrium carries the portfolio's light type, double rules and restrained motion. */
:root{--text:#eceae2;--muted:#b7c1bb;--line:#c6ad7d40}
body{font-family:'Josefin Sans',sans-serif;font-weight:300;font-size:1.13rem;line-height:1.75;background:linear-gradient(90deg,transparent calc(5% - 1px),var(--line) 5%,transparent calc(5% + 1px),transparent calc(95% - 1px),var(--line) 95%,transparent calc(95% + 1px)),#0c1715}
h1,h2,h3,blockquote,.closing-line,.flashcard summary{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400}h1{font-size:clamp(3.15rem,6.3vw,6.1rem);line-height:1.02;letter-spacing:-.025em}h2{font-size:clamp(2.5rem,4vw,3.65rem);line-height:1.08}h3{font-size:clamp(2.15rem,3vw,2.9rem)}h1 em,h2 em{color:var(--gold);font-weight:400}.wordmark{font-family:'Cormorant Garamond',serif;font-size:2rem;letter-spacing:.14em}.wordmark span{font-family:'Josefin Sans',sans-serif;font-weight:300;font-size:.8rem}.eyebrow,.story-label{font-weight:400;font-size:.8rem;letter-spacing:.19em}strong{font-weight:500;color:#f5efdf}p,dd,li{color:#c5cec8}strong,blockquote{color:#e8d5ad}.deck{font-size:clamp(1.25rem,2.1vw,1.65rem);font-weight:300;line-height:1.6;max-width:780px}.deck em{display:block;color:var(--gold);font-family:'Cormorant Garamond',serif;font-size:1.2em;margin-top:10px}.lead-copy,.section-lead{font-size:1.35rem;line-height:1.6;color:#e0e2d9}.title-block{position:relative}.title-block:after{content:'';position:absolute;left:7%;bottom:-3px;width:70px;border-top:5px double var(--gold)}
.masthead nav a{font-size:.95rem;font-weight:400;position:relative;padding:10px 0 16px;border:0}.masthead nav a:after{content:'';position:absolute;left:0;right:0;bottom:4px;height:5px;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}.masthead nav a[aria-current=page]:after,.masthead nav a:hover:after,.masthead nav a:focus-visible:after{transform:scaleX(1)}.jump{font-size:1rem;transition:color .25s}.jump:hover{color:#efcf8f}.jump svg{transition:transform .25s;vertical-align:middle}.jump:hover svg{transform:translateY(-3px)}
.reading-layout{column-gap:5%;row-gap:0;grid-template-columns:205px minmax(0,760px)}.contents{top:24px;margin-top:66px;z-index:20;min-width:0}.contents-menu summary{font-size:.8rem;font-weight:400;text-transform:uppercase;letter-spacing:.15em;color:var(--gold);list-style:none;cursor:pointer;margin-bottom:22px}.contents-menu summary::-webkit-details-marker{display:none}.contents-menu nav{gap:13px}.contents-menu nav a{font-size:.98rem;font-weight:300;line-height:1.4;border-left:1px solid var(--line);padding:5px 0 5px 16px;transition:color .2s,border-color .2s}.contents-menu nav a:hover{border-color:var(--gold)}.aside-note{font-size:.85rem;line-height:1.6}.contents-chevron{display:none}section{scroll-margin-top:80px}blockquote{font-size:clamp(1.6rem,2.8vw,2.15rem);line-height:1.35;margin:36px 0;border-left:1px solid var(--gold);font-style:italic}.story{padding-top:36px}.story-brief{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:28px 0 34px;padding:20px 0;gap:25px}.story-brief dt{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:400;margin-bottom:8px}.story-brief dd{margin:0;font-size:1.1rem;line-height:1.45}.narrative-turn{margin:30px 0 8px;font-size:.8rem;text-transform:uppercase;letter-spacing:.15em;color:var(--gold);font-weight:400}.story p{max-width:68ch}.story-label{font-size:.78rem}.terminal{font-family:ui-monospace,SFMono-Regular,monospace}.evidence h3{font-family:'Josefin Sans',sans-serif;font-weight:400;font-size:1.1rem;line-height:1.5}.closing-line{font-size:2.2rem;line-height:1.25}
.architecture{background:linear-gradient(#0a171540,#0a1715e6),url('images/roman-boundaries.png') center top/cover;border:1px solid var(--line);padding:12px}.architecture-scene{height:230px;background:url('images/roman-boundaries.png') center 64%/cover;border:1px solid var(--line)}.diagram-scroll{background:#07120fe8;border-top:0}.boxes rect{fill:#10221e;stroke:#c6ad7d90}.diagram-text text{font-family:'Josefin Sans',sans-serif;font-weight:400}.diagram-text .small{font-family:'Josefin Sans',sans-serif;font-weight:300;fill:#c7d0c9}.edge-label{fill:#c7d0c9}.architecture figcaption{padding:0 10px;font-size:.88rem;line-height:1.5;color:#d1d6cf}.role-gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:32px 0 40px}.role-card{text-align:center;min-width:0}.ceramic-avatar{width:100%;height:145px;background-image:url('images/roman-roles.png');background-size:500% 100%;background-repeat:no-repeat;margin-bottom:12px}.avatar-ai{background-position:0% 50%}.avatar-bridge{background-position:25% 50%}.avatar-mcp{background-position:50% 50%}.avatar-sender{background-position:75% 50%}.avatar-human{background-position:100% 50%}.role-card h3{font-family:'Josefin Sans',sans-serif;font-size:.94rem;font-weight:400;line-height:1.3;color:var(--gold);margin:0 0 10px}.role-card p{font-size:.85rem;line-height:1.45;margin:0 0 7px}.role-card .role-action{font-weight:400;color:#e7e8dd}.roman-analogy{padding:26px 0 0;border-top:1px solid var(--line);margin:32px 0 0}.roman-analogy p:last-child{font-family:'Cormorant Garamond',serif;font-size:1.55rem;line-height:1.45;margin-bottom:0}.roman-analogy strong{font-weight:500}
.floating-top{position:fixed;right:26px;bottom:26px;width:58px;height:58px;display:grid;place-items:center;color:var(--gold);border:1px solid var(--gold);border-radius:50%;background:#0b1715ed;backdrop-filter:blur(12px);z-index:50;transition:background .25s,color .25s,transform .25s}.floating-top[hidden]{display:none}.floating-top:hover{background:var(--gold);color:var(--bg);transform:translateY(-3px)}footer{padding-right:110px;padding-bottom:40px;font-size:.95rem}.scroll-reveal{transform:translateY(10px);transition:transform .7s ease}.scroll-reveal.in-view{transform:translateY(0)}.study-shell{max-width:1120px}.study-shell h1{font-size:clamp(3rem,6vw,5.2rem)}.study-intro{font-size:1.3rem;line-height:1.6}.flashcard summary{font-size:1.75rem}.study-group h2{font-size:2.3rem}.study-tools button{position:relative;padding:13px 22px;font-weight:300;transition:background .25s,color .25s}.study-tools button:after{content:'';position:absolute;inset:4px;border:1px solid var(--line);pointer-events:none}.answer{font-size:1.15rem}.answer a{font-size:.95rem}.practice{background:transparent;border-width:1px 0}.practice label{font-weight:400}.privacy-note{font-size:.88rem}
@media(max-width:1100px){.reading-layout{display:block;padding:0 7%}.contents{position:sticky;top:12px;margin:20px 0 0;padding:0;border:0;width:min(300px,100%);height:52px;z-index:30}.contents-menu{background:#0c1916f7;border:1px solid var(--gold);box-shadow:0 8px 28px #0004;backdrop-filter:blur(16px)}.contents-menu summary{display:flex;align-items:center;justify-content:space-between;margin:0;padding:15px 18px;font-size:.78rem;min-height:50px;gap:16px}.contents-chevron{display:block;width:8px;height:8px;border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);transform:rotate(45deg) translateY(-2px);transition:transform .25s}.contents-menu[open] .contents-chevron{transform:rotate(225deg)}.contents-menu nav{display:flex;flex-direction:column;flex-wrap:nowrap;padding:4px 18px 18px;gap:6px;max-height:65svh;overflow:auto}.contents-menu nav a{font-size:1rem;padding-block:8px}.aside-note{display:none}.title-block{padding:55px 7%}.wide{display:none}.role-gallery{gap:20px}.ceramic-avatar{height:170px}}
@media(max-width:600px){body{font-size:1.1rem;background:#0c1715}.masthead{gap:12px}.masthead nav{gap:30px}.title-block h1{font-size:3.15rem;line-height:1.03}.title-block{padding:42px 7%}.deck{font-size:1.25rem}h2{font-size:2.6rem}h3{font-size:2.25rem}.contents{top:10px;margin-top:20px}.story-brief{grid-template-columns:1fr;gap:18px}.lead-copy,.section-lead{font-size:1.22rem}.architecture{padding:7px}.architecture-scene{height:180px}.role-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}.role-card:last-child{grid-column:1/-1;width:calc(50% - 9px);justify-self:center}.ceramic-avatar{height:160px}.role-card h3{font-size:1rem}.role-card p{font-size:.95rem}.roman-analogy p:last-child{font-size:1.45rem}.floating-top{right:16px;bottom:16px;width:48px;height:48px}footer{padding:28px 85px 32px 7%;min-height:120px;justify-content:center}.flashcard summary{font-size:1.6rem}.study-shell h1{font-size:3rem}.study-intro{font-size:1.2rem}.closing-line{font-size:1.9rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}.scroll-reveal{transform:none}.floating-top:hover,.jump:hover svg{transform:none}}
@media print{.floating-top,.architecture-scene,.ceramic-avatar{display:none}.scroll-reveal{transform:none}.architecture{background:white}.role-gallery{display:none}}
/* Compact navigation, proportionate artwork and responsive flow. */
.title-block:after{display:none}.masthead{padding-inline:7%}.footer-signature{color:var(--gold);letter-spacing:.035em;display:flex;align-items:center;gap:12px}.footer-signature i{font-style:normal;opacity:.55}.footer-signature>span{font-family:'Cormorant Garamond',serif;font-variant:small-caps;letter-spacing:.13em}.footer-return{font-size:.95rem}.contents-icon{display:none}.contents{transition:transform .35s ease}.contents.is-compact{position:fixed;top:24px;right:24px;left:auto;width:52px;height:52px;margin:0;animation:menu-arrive .35s ease}.is-compact .contents-menu{border:0;background:none;box-shadow:none}.is-compact summary{width:52px;height:52px;min-height:52px;margin:0;padding:12px;display:grid;place-items:center;border:1px solid var(--line);background:#0c1916f5;color:var(--gold);cursor:pointer}.is-compact .contents-label,.is-compact .contents-chevron,.is-compact .aside-note{display:none}.is-compact .contents-icon{display:block}.is-compact nav{position:absolute;right:0;top:62px;width:min(290px,calc(100vw - 32px));padding:18px;background:#0c1916fa;border:1px solid var(--line);box-shadow:0 10px 30px #0005;max-height:65svh;overflow:auto}.is-compact details:not([open]) nav{display:none}@keyframes menu-arrive{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
.architecture{background:#091411}.architecture-scene{height:auto;position:relative;aspect-ratio:3/2;background:none;overflow:hidden}.architecture-scene>img{display:block;width:100%;height:100%;object-fit:contain}.scene-pin{position:absolute;padding:6px 9px;font-size:.72rem;line-height:1.2;background:#0b1715ed;border:1px solid var(--gold);border-radius:20px;transform:translate(-50%,-50%);white-space:nowrap;box-shadow:0 0 15px #c6ad7d30}.scene-pin:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);margin-right:5px}.scene-pin[aria-pressed=true]{background:var(--gold);color:var(--bg)}.pin-ai{left:17%;top:62%}.pin-bridge{left:37%;top:34%}.pin-mcp{left:81%;top:30%}.pin-sender{left:90%;top:66%}.pin-human{left:62%;top:72%}.scene-explanation{font-size:.95rem;line-height:1.5;min-height:3em;padding:14px 10px;margin:0;color:var(--gold)}.diagram-scroll{padding:20px 10px;overflow:visible}.diagram-scroll .diagram-wide{min-width:0;width:100%;max-width:850px;margin:auto}.diagram-vertical{display:none}.ceramic-avatar{height:auto!important;aspect-ratio:3/5;background-size:500% 100%;position:relative;filter:drop-shadow(0 10px 8px #0005);transition:transform .35s}.role-card:hover .ceramic-avatar,.role-card:focus .ceramic-avatar{transform:translateY(-5px)}.code-portrait{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .4s;background:transparent}.role-card:hover .code-portrait,.role-card:focus .code-portrait{opacity:1}.role-card.code-ready:hover .ceramic-avatar,.role-card.code-ready:focus .ceramic-avatar{background-image:none}.role-card{outline-offset:5px}.role-card.is-selected h3{color:#f3d799;text-decoration:underline;text-underline-offset:6px}
@media(max-width:600px){.contents.is-compact{right:16px;top:16px}.scene-pin{font-size:.58rem;padding:5px}.scene-pin:before{display:none}.pin-sender{left:85%;top:77%}.pin-human{left:57%;top:84%}.pin-ai{left:17%;top:74%}.diagram-scroll .diagram-wide{display:none}.diagram-vertical{display:flex;align-items:center;flex-direction:column;max-width:320px;margin:auto;gap:8px}.flow-node{border:1px solid var(--line);background:#10221e;width:100%;padding:13px;text-align:center;font-size:1rem}.flow-node small,.flow-branch small{display:block;font-size:.8rem;color:var(--muted)}.flow-arrow{font-size:.9rem;color:var(--gold)}.flow-branch{border-left:2px solid var(--gold);padding:12px;text-align:center;color:var(--gold);font-size:.95rem}.architecture-scene{min-height:0}.scene-explanation{font-size:.85rem}.masthead{padding-inline:7%}.footer-signature{gap:8px;flex-wrap:wrap}}
@media(min-width:1101px){.reading-layout>article{grid-column:2}}
@media(prefers-reduced-motion:reduce){.contents.is-compact{animation:none}.role-card:hover .ceramic-avatar,.role-card:focus .ceramic-avatar{transform:none}}
/* A shared, bounded rail keeps controls aligned at every zoom level. */
:root{--rail:max(5vw,calc((100vw - 1440px)/2 + 72px))}
body{background:linear-gradient(90deg,transparent calc(var(--rail) - 1px),var(--line) var(--rail),transparent calc(var(--rail) + 1px),transparent calc(100% - var(--rail) - 1px),var(--line) calc(100% - var(--rail)),transparent calc(100% - var(--rail) + 1px)),#0c1715}
.masthead,.title-block,.reading-layout,footer{padding-inline:clamp(24px,7vw,100px)}
.study-shell{width:100%;padding-inline:clamp(24px,5vw,72px)}
.contents.is-compact{right:calc(var(--rail) - 26px);max-width:calc(100vw - 32px)}
.is-compact summary{background:rgb(12 25 22 / 35%);backdrop-filter:blur(8px)}
.is-compact nav{max-width:calc(100vw - 32px);box-sizing:border-box}
.floating-top{right:calc(var(--rail) - 29px)}
footer{padding-right:100px}
.scene-pin:before{background:currentColor}.scene-pin.just-cleared,.scene-pin.just-cleared:hover{background:#0b1715ed;color:var(--gold)}
.ceramic-avatar{filter:none}.role-card{position:relative}
.ceramic-avatar:after{content:'';position:absolute;left:18%;right:18%;bottom:-9px;height:10px;background:radial-gradient(ellipse,#0009,transparent 70%);z-index:0;transition:transform .35s,opacity .35s}.role-card:hover .ceramic-avatar:after{transform:translateY(5px) scale(.85);opacity:.65}
@media(max-width:600px){:root{--rail:42px}body{background:#0c1715}.contents.is-compact{right:16px;max-width:52px}.floating-top{right:18px}.masthead,.title-block,.reading-layout,footer{padding-inline:7%}.study-shell{padding-inline:7%}footer{padding-right:85px}.is-compact nav{width:min(290px,calc(100vw - 32px))}}

/* Keep the adjacent bridge outside the operator sprite cell. */
.avatar-ai{clip-path:inset(0 9% 0 0)}
/* Keep Q&A inside the frame, including Safari page zoom. */
.study-shell{max-width:1120px;padding-inline:clamp(28px,7vw,100px)}
.study-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,420px);gap:12px}
.study-tools button{width:100%;min-width:0;min-height:48px;text-align:center;background:transparent;color:var(--gold)}
@media(hover:hover) and (pointer:fine){.study-tools button:hover{background:var(--gold);color:var(--bg)}}
@media(hover:none){.study-tools button:hover,.study-tools button:focus{background:transparent;color:var(--gold)}}
@media(max-width:480px){.study-tools{grid-template-columns:1fr;width:min(100%,260px)}}
.contents.is-compact .contents-menu,.contents.is-compact summary{backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.contents.is-compact summary{background:rgb(12 25 22 / 12%)}

.brand-caption{display:block;font-size:.75rem;letter-spacing:.12em;color:var(--muted);font-family:inherit;margin:8px 0 0}.brand-caption a,.footer-signature>a{color:inherit;text-decoration:none}.brand-caption a:hover,.footer-signature>a:hover{color:var(--gold);text-decoration:underline;text-underline-offset:4px}.brand-caption a:focus-visible,.footer-signature>a:focus-visible{outline:1px solid var(--gold);outline-offset:5px}

/* Explicit toggles, stable descriptions and a preserved menu slot. */
.study-tools button:hover,.study-tools button:focus{background:transparent;color:var(--gold)}
.study-tools button[aria-pressed="true"],.study-tools button[aria-pressed="true"]:hover,.study-tools button[aria-pressed="true"]:focus{background:var(--gold);color:var(--bg)}
.study-group>h2{position:relative;padding-left:.6em}
.study-group>h2:before{content:'';position:absolute;left:.05em;top:.45em;width:.18em;height:.18em;background:var(--gold);transform:rotate(45deg)}
.scene-explanation{display:grid;align-items:center}
.scene-explanation>span{grid-area:1/1;visibility:hidden}
.scene-explanation>span.is-active{visibility:visible}
.contents-slot{display:flow-root;min-width:0;overflow-anchor:none}
.contents.is-compact{right:var(--rail);transform:translateX(50%);animation:none;transition:none}
.contents-menu summary{transform-origin:top left}
.contents.is-compact summary{overflow:hidden;position:relative}
.contents.is-compact .contents-label{display:block;position:absolute;left:18px;white-space:nowrap;opacity:0;pointer-events:none}
.floating-top,.floating-top:hover{right:var(--rail);transform:translateX(50%);background:rgb(12 25 22 / 12%);color:var(--gold);backdrop-filter:none;-webkit-backdrop-filter:none}
/* Match the visible outlines, not just the centers of the controls. */
:root{--floating-control-size:58px}
.contents.is-compact,.floating-top{width:var(--floating-control-size);height:var(--floating-control-size);max-width:var(--floating-control-size)}
.contents.is-compact .contents-menu summary{width:100%;height:var(--floating-control-size);min-height:0;padding:0;display:grid;place-items:center;justify-content:center}
.study-tools button:disabled{cursor:default;opacity:1}
.study-group>h2{padding-left:1.1em}
.study-group>h2:before{display:none}
.section-mark{position:absolute;left:0;top:.15em;width:.85em;height:.85em;color:var(--gold)}
@media(max-width:600px){:root{--floating-control-size:48px}}

/* A lightweight vector standard occupies the reading rail on wide screens. */
.sidebar-standard{display:none}
@media(min-width:1200px){.sidebar-standard{display:block;position:sticky;top:28px;width:100%;margin:36px 0 0;text-align:center}.roman-standard{display:block;width:100%;height:auto;max-height:calc(100svh - 230px);margin:auto}.sidebar-standard figcaption{font-size:.7rem;line-height:1.6;letter-spacing:.025em;color:var(--muted);margin:12px 0 0}}
/* Keep the neighboring column cropped while allowing the shadow below. */
.avatar-ai{clip-path:inset(0 9% -24px 0)}
.ceramic-avatar{background-image:none}
.portraits-loaded .ceramic-avatar{background-image:url('images/roman-roles.png')}
.role-card.code-ready:hover .ceramic-avatar,.role-card.code-ready:focus .ceramic-avatar{background-image:none}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:160ms;animation-timing-function:ease-out}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}
@media print{.sidebar-standard{display:none}}

/* Center the footer on the page; reserve button space below, not on one side. */
footer{width:100%;padding-inline:7%;padding-bottom:100px;flex-direction:column;justify-content:center;align-items:center;gap:8px;text-align:center}
footer .footer-signature{max-width:100%;min-width:0;justify-content:center;flex-wrap:wrap;white-space:normal;gap:4px 8px}
footer .footer-signature>a,footer .footer-return{max-width:100%;overflow-wrap:anywhere;white-space:normal}
.sidebar-standard figcaption strong,.standard-key{display:block}.standard-key{margin:6px 0;color:var(--gold)}
@keyframes standard-sway{0%,100%{transform:perspective(900px) rotateY(-3deg) rotate(-.5deg) skewX(-.35deg)}50%{transform:perspective(900px) rotateY(3deg) rotate(.5deg) skewX(.35deg)}}
@media(min-width:1200px) and (prefers-reduced-motion:no-preference){.roman-standard{transform-origin:50% 4%;animation:standard-sway 10s ease-in-out infinite}}