/* ChaplainUSA surface system, derived from the supplied Themesberg Neumorphism UI 1.0.0.
   Use the same surface for the page and raised controls; light comes from top left.
   Typography and existing layout/animation remain the user's approved brand choices. */
:root{
  --neu-surface:var(--site-ground, #f0eee8);
  --neu-highlight:#ffffff;
  --neu-shadow:var(--site-shadow, #d3cdbf);
  --neu-border:var(--site-border, #d7d1c5);
  --neu-ink:#31344b;
  --neu-muted:#525480;
  --neu-raised:6px 6px 12px var(--site-shadow, #d3cdbf),-6px -6px 12px #ffffff;
  --neu-raised-small:3px 3px 6px var(--site-shadow, #d3cdbf),-3px -3px 6px #ffffff;
  --neu-inset:inset 2px 2px 5px var(--site-shadow, #d3cdbf),inset -3px -3px 7px #ffffff;
  --neu-radius:20px;
  --neu-radius-large:20px;
  --neu-focus:#76531b;
  /* Map both existing page systems onto one source of surface tokens. */
  --paper:var(--neu-surface);--bg:var(--neu-surface);--surface:var(--neu-surface);
  --field:var(--neu-surface);--ink:var(--neu-ink);--body:var(--neu-ink);
  --muted:var(--neu-muted);--line:var(--neu-border);--border:var(--neu-border);
  --sh-soft:var(--neu-raised);--sh-light:var(--neu-raised-small);--sh-inset:var(--neu-inset);
  --r:var(--neu-radius-large);--r-sm:var(--neu-radius);
  --nm-d:var(--neu-shadow);--nm-l:var(--neu-highlight);
}
body{background:var(--neu-surface)}
/* Navigation remains legible; its controls rise from the shared surface. */
.site-header,.site-header.restored-header,.tbnav,.tbnav.scrolled{background:var(--neu-surface);border-bottom:0;box-shadow:none}
.site-header .brand,.tbnav .brandchip{background:var(--neu-surface);padding:9px 12px;border:1px solid var(--neu-border);border-radius:var(--neu-radius);box-shadow:var(--neu-raised-small)}
.restored-header .desktop-nav{gap:clamp(10px,1.2vw,22px)}
.restored-header .desktop-nav>a,.restored-header .desktop-nav>.nav-dropdown>summary{padding:10px 8px;border-radius:var(--neu-radius)}
.restored-header .desktop-nav>a:hover,.restored-header .desktop-nav>a[aria-current="page"],.restored-header .desktop-nav>.nav-dropdown[open]>summary{color:var(--neu-ink);background:var(--neu-surface);box-shadow:var(--neu-inset);text-decoration:none}
.nav-dropdown-links,.restored-header .mobile-menu>nav,.tbnav .dd-menu{background:var(--neu-surface);border:1px solid var(--neu-border);border-radius:var(--neu-radius);box-shadow:var(--neu-raised)}
.nav-dropdown-links a:hover,.tbnav .dd-menu a:hover{background:var(--neu-surface);color:var(--neu-ink);box-shadow:var(--neu-inset)}
/* Raised at rest, inset when pressed. Gold stays an accent, not a flat fill. */
.header-donate,.header-donate:hover,.dialog-close,.dialog-close:hover,.moments-controls button,.portrait-motion-toggle,.article-watch,.btn,.btn-soft,.tbnav .donate,.car-btn{
  background:var(--neu-surface);color:var(--neu-ink);border:1px solid var(--neu-border);box-shadow:var(--neu-raised-small);
  border-radius:var(--neu-radius);transition:box-shadow .15s cubic-bezier(.22,.61,.36,1),color .15s cubic-bezier(.22,.61,.36,1);
}
.header-donate,.tbnav .donate{color:#76531b}
.dialog-close,.moments-controls button,.car-btn{border-radius:50%}
.portrait-motion-toggle{padding:11px 18px}
.header-donate:active,.dialog-close:active,.moments-controls button:active,.portrait-motion-toggle:active,.portrait-motion-toggle[aria-pressed="true"],.article-watch:active,.btn:active,.tbnav .donate:active,.car-btn:active{box-shadow:var(--neu-inset);transform:none}
button:disabled{box-shadow:none}
.btn-dark,.btn-dark:hover{background:var(--neu-surface);color:var(--neu-ink)}
.btn-gold,.btn-gold:hover{background:var(--neu-surface);color:#76531b}
/* Complete supplied artwork sits inside a raised, softly rounded rim. */
.program-video-card,.program-video-card:hover,.program-video-card:focus-visible{padding:7px;background:var(--neu-surface);border:1px solid var(--neu-border);border-radius:var(--neu-radius-large);box-shadow:var(--neu-raised)}
.program-video-card:hover,.program-video-card:focus-visible{transform:rotate(var(--card-tilt))}
.program-video-card:active{box-shadow:var(--neu-inset)}
.program-video-card img{border-radius:var(--neu-radius)}
.program-card-play{right:14px;bottom:14px;background:var(--neu-surface);color:var(--neu-ink);border:1px solid var(--neu-border);box-shadow:var(--neu-raised-small)}
.program-video-card:active .program-card-play{box-shadow:var(--neu-inset)}
/* The circle's pale rim and paired shadows are visible against the same ground. */
.video-group.narrative-videos{gap:8px}
.video-group.narrative-videos .video-chip{background:var(--neu-surface);border:5px solid var(--neu-surface);box-shadow:var(--neu-raised-small)}
.video-chip:active{box-shadow:var(--neu-inset)}
.video-chip .chip-play{background:var(--neu-surface);color:var(--neu-ink);box-shadow:var(--neu-raised-small)}
.portrait{border:4px solid var(--neu-surface);box-shadow:var(--neu-raised-small)}
/* Archive cards and popups use the kit's raised and inset surfaces. */
.moment-card{padding:14px;background:var(--neu-surface);border:1px solid var(--neu-border);border-radius:var(--neu-radius-large);box-shadow:var(--neu-raised)}
.moments-track{padding:14px 12px 28px;margin:0 -12px}
.moment-image{border-radius:var(--neu-radius);box-shadow:var(--neu-inset)}
.moment-play{background:var(--neu-surface);color:var(--neu-ink);border:1px solid var(--neu-border);box-shadow:var(--neu-raised-small)}
.moment-card:active .moment-play{box-shadow:var(--neu-inset)}
.video-dialog,.resource-dialog{background:var(--neu-surface);color:var(--neu-ink);border:1px solid var(--neu-border);border-radius:var(--neu-radius-large);box-shadow:var(--neu-inset)}
.video-dialog::backdrop,.resource-dialog::backdrop{background:rgba(29,33,48,.86)}
.video-frame{border:6px solid var(--neu-surface);border-radius:var(--neu-radius);overflow:hidden;box-shadow:var(--neu-inset)}
.video-help,.resource-status{color:var(--neu-muted)}
.article-watch{padding:10px;overflow:hidden;border-radius:var(--neu-radius-large)}
.article-watch img{border-radius:var(--neu-radius)}
/* Existing archive and supporting pages inherit these same surfaces. */
.stat-card,.ag-card,.step,.q-card,.card{background:var(--neu-surface);border:1px solid var(--neu-border);border-radius:var(--neu-radius-large);box-shadow:var(--neu-raised)}
.ag-card:hover,.doc-ad:hover{transform:none;box-shadow:var(--neu-raised)}
.ag-modal-body{background:var(--neu-surface);box-shadow:var(--neu-inset)}
/* The requested dark collection band keeps its darker embedded player. */
.collection-section{
  --neu-surface:#303c48;--neu-border:#3c4a57;--neu-ink:#f5f4ef;--neu-muted:#ced6dd;
  --neu-raised:6px 6px 12px #232d37,-6px -6px 12px #3d4b59;
  --neu-raised-small:3px 3px 6px #232d37,-3px -3px 6px #3d4b59;
  --neu-inset:inset 2px 2px 5px #232d37,inset -3px -3px 7px #3d4b59;
}
.collection-section .player-frame{background:#242e39;border:1px solid var(--neu-border);border-radius:var(--neu-radius-large);box-shadow:var(--neu-raised)}
/* Keep a real focus indicator: shadows are decoration, not the sole state cue. */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex="0"]:focus-visible{outline:3px solid var(--neu-focus);outline-offset:5px}
.collection-section{--neu-focus:#e0c88f}
@media(max-width:1150px){.restored-header .mobile-menu .nav-dropdown-links{box-shadow:none;border:0;border-left:1px solid var(--neu-border);border-radius:0}.restored-header .mobile-menu>summary{padding:10px 14px;border:1px solid var(--neu-border);border-radius:var(--neu-radius);background:var(--neu-surface);box-shadow:var(--neu-raised-small)}.restored-header .mobile-menu[open]>summary{box-shadow:var(--neu-inset)}}
@media(max-width:760px){.program-video-card{padding:6px}.moment-card{padding:12px}.site-header .brand{padding:8px 10px}.video-group.narrative-videos{gap:6px}.video-group.narrative-videos .video-chip{border-width:4px}.portrait{border-width:3px}}
@media(prefers-reduced-motion:reduce){.header-donate,.dialog-close,.moments-controls button,.portrait-motion-toggle,.btn{transition:none}}
@media(forced-colors:active){.program-video-card,.moment-card,.video-chip,.portrait{border:2px solid CanvasText}.header-donate,.dialog-close,.moments-controls button,.portrait-motion-toggle{border:1px solid ButtonText}}
@media print{.site-header,.program-video-card,.moment-card,.video-dialog,.portrait,.video-chip{box-shadow:none!important}}