/* Shared surface and interaction owner. Existing files retain layout geometry. */
:root{
 --red-deep:#850d17;--red:#d71920;--red-light:#ff2638;--line:#ffffff20;
 --control-line:#ffffff38;--ease:cubic-bezier(.22,1,.36,1);--control-time:180ms;
}
.button{
 color:#fff;background:linear-gradient(145deg,var(--red) 0%,#b6101c 64%,var(--red-deep) 100%);
 border-color:#ec343c;border-radius:6px;
 box-shadow:inset 0 1px 0 #ffffff26,0 3px 12px #0003;
 transition:box-shadow var(--control-time) var(--ease),border-color var(--control-time) var(--ease),transform var(--control-time) var(--ease);
}
.button-outline{background:transparent;border-color:var(--control-line);box-shadow:none}
.action,.work-links a,.close-music{border-bottom-color:var(--control-line);background:transparent;transition:border-color var(--control-time) var(--ease),color var(--control-time) var(--ease)}
.action .glyph,.work-links a .arrow{transition:transform var(--control-time) var(--ease)}
.header{background:#090b0c;border-bottom-color:#ffffff18;box-shadow:0 4px 18px #0002}
@supports ((backdrop-filter:blur(12px)) or (-webkit-backdrop-filter:blur(12px))){
 .header{background:#090b0cee;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
}
#navigation a:after{background:var(--red-light);transition:right var(--control-time) var(--ease)}
.menu-toggle{background:transparent;border-radius:6px;transition:background var(--control-time) var(--ease)}
.menu-toggle span{background:var(--ink);transition:transform 240ms var(--ease),opacity 180ms var(--ease)}
.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.preview-controls button,.program-controls button{background:#090b0cd9;border-color:var(--control-line);border-radius:6px;transition:background var(--control-time) var(--ease),border-color var(--control-time) var(--ease),transform var(--control-time) var(--ease)}
.load-music{background:transparent;border-color:var(--control-line);border-radius:6px;transition:border-color var(--control-time) var(--ease),background var(--control-time) var(--ease)}
.editorial-grid img,.crew-summary img,.founder-layout img,.crew-silas img,.portrait-frame,.support-portrait,.timber-work img,.journal-feature>img,.journal-entry>img,.field-note-entry>img,.archive-grid img,.product-frame,.merch-preview img,.music-mount{border-radius:4px}
.chase-screen video,.chase-screen>img{border-radius:4px}
/* The adjacent journal/crew boundary uses one visible hairline. */
.journal+.crew-summary{border-top-color:transparent}
.watch-channels[hidden]+.watch-notes{border-top-color:transparent}
:where(a,button,summary):focus-visible{outline:2px solid #fff;outline-offset:5px}
.button:focus-visible{border-color:var(--red-light);box-shadow:inset 0 1px 0 #ffffff30,0 0 18px #ff263830}
@media(hover:hover) and (pointer:fine){
 .button:hover{border-color:var(--red-light);box-shadow:inset 0 1px 0 #ffffff30,0 0 18px #ff26382e,0 4px 14px #0004}
 .button-outline:hover{background:#850d1720}
 .action:hover,.work-links a:hover,.close-music:hover{border-color:var(--red-light);background:transparent}
 .action:hover .glyph,.work-links a:hover .arrow{transform:translateX(2px)}
 .menu-toggle:hover,.preview-controls button:hover,.program-controls button:hover{background:#ffffff0d}
 .load-music:hover{background:#ffffff04;border-color:#ffffff65}
}
.button:active,.preview-controls button:active,.program-controls button:active{transform:translateY(1px);box-shadow:inset 0 1px 3px #0004}
@media(max-width:1000px){
 #navigation{display:flex;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-6px);background:#090b0cfa;box-shadow:0 12px 24px #0003;transition:none}
 #navigation[data-menu-motion]{transition:opacity 240ms var(--ease),transform 240ms var(--ease),visibility 240ms}
 #navigation.is-open{visibility:visible;opacity:1;pointer-events:auto;transform:none}
}
@media(prefers-reduced-motion:reduce){
 .button,.action,.action .glyph,.work-links a,.work-links a .arrow,.menu-toggle,.menu-toggle span,#navigation,#navigation a:after,.preview-controls button,.program-controls button,.load-music{transition:none!important}
 .button:active,.action:hover .glyph,.work-links a:hover .arrow,.preview-controls button:active,.program-controls button:active{transform:none}
 #navigation{transform:none}
}