/* An independent collar guide, matching the site's prison dossier aesthetic. */
.collar-section{background:#272521;color:#eee8de}
.collar-section .section-heading h2 span{color:#aa9b8d}
.collar-section .section-intro{color:#c0b6aa}
.collar-section .eyebrow{color:#c5967e}
.collar-layout{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:44px;align-items:start}
.collar-visual{position:relative;min-height:510px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:radial-gradient(ellipse at 50% 44%,#3a332f 0%,#221f1d 46%,#141413 100%)}
.collar-visual:after{content:'';position:absolute;inset:14px;border:1px solid rgba(229,213,193,.26);pointer-events:none}
.collar-visual>span,.collar-visual small{font-size:9px;letter-spacing:.16em;color:#c2aa98}
.collar-visual>div{position:relative;z-index:1}
.collar-showcase{display:flex;align-items:center;justify-content:center;flex:1;min-height:260px;position:relative}
.collar-canvas,.collar-fallback{display:block;width:100%;height:100%;max-width:450px}
.collar-canvas{position:absolute;inset:0;margin:auto;cursor:grab;touch-action:pan-y;z-index:1}
.collar-canvas:active{cursor:grabbing}
.collar-canvas:focus-visible{outline:1px solid #c8997e;outline-offset:2px}
.collar-fallback{object-fit:contain;position:absolute;inset:0;margin:auto}
.collar-showcase.is-ready .collar-fallback{display:none}
.collar-canvas[hidden],.collar-motion-toggle[hidden]{display:none}
.collar-drag-hint{margin-top:7px!important;color:#9c8e82!important;font-size:10px!important}
.collar-caption{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.collar-motion-toggle{flex:none;color:#d5c2b1;background:transparent;border:1px solid #807065;padding:8px 10px;font-size:10px;cursor:pointer;line-height:1.25}
.collar-motion-toggle:hover,.collar-motion-toggle:focus-visible{background:#57473f;color:#fff;outline-offset:3px}
.collar-motion-toggle span{margin-left:4px;font-size:9px}
.collar-visual strong{display:block;font:900 58px/1.3 var(--serif);letter-spacing:.1em;margin:10px 0 4px}
.collar-visual p{font-size:12px;color:#c9beb1;margin:0}
.collar-content details{border-top:1px solid #60574c}
.collar-content details:last-child{border-bottom:1px solid #60574c}
.collar-content summary{display:flex;align-items:center;gap:20px;min-height:68px;list-style:none;cursor:pointer}
.collar-content summary::-webkit-details-marker{display:none}
.collar-no{font-size:10px;color:#b8856e;letter-spacing:.12em}
.collar-content summary strong{font:700 17px var(--serif);flex:1}
.collar-content summary i{font:normal 19px var(--sans);color:#c0afa0}
.collar-content details[open] summary i{transform:rotate(45deg)}
.collar-content details>p{margin:0 22px 21px 38px;color:#c9bfb4;font-size:12px;line-height:2}
.collar-content details>p.collar-reminder{border-left:2px solid #b8856e;padding-left:14px;color:#dfc2ac}
#character-story-dialog{width:min(720px,calc(100vw - 36px));max-width:min(720px,calc(100vw - 36px));overflow:auto}
.story-detail{display:grid;gap:22px}
.story-block h3,.story-traits h3,.story-relationship h3{font:700 10px var(--sans);letter-spacing:.12em;color:#9c4a37;margin:0 0 8px}
.story-block p,.story-traits p,.story-relationship p{font-size:13px;line-height:2;color:#5f5a52;margin:0}
.story-traits{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.story-traits>div{background:#e4ddd2;border:1px solid #d0c6b8;padding:17px 18px}
.story-relationship{border-left:3px solid #a95640;background:#e5d9cd;padding:15px 18px}
.story-relationship[hidden]{display:none}
.story-relationship p{font-weight:600;color:#694b3e}
@media(max-width:850px){.collar-layout{grid-template-columns:1fr;gap:25px}.collar-visual{min-height:350px}.collar-showcase{min-height:200px}.collar-visual strong{font-size:48px}}
@media(max-width:720px){.collar-content summary{min-height:62px;gap:14px}.collar-content details>p{margin-left:28px}.story-traits{grid-template-columns:1fr}.story-detail{gap:18px}.story-block p,.story-traits p,.story-relationship p{font-size:13px}.nav{gap:14px}}

/* Exploded function diagram and four-direction model controls. */
.collar-canvas{touch-action:none}
.collar-controls{display:flex;flex-direction:column;gap:7px;align-items:flex-end;flex:none}
.collar-controls[hidden]{display:none}
.collar-orbit-buttons{display:flex;gap:4px}
.collar-orbit-buttons button{width:27px;height:27px;display:grid;place-items:center;border:1px solid #695d53;background:rgba(24,23,22,.72);color:#d9c6b5;line-height:1;padding:0;font-size:14px}
.collar-orbit-buttons button:hover,.collar-orbit-buttons button:focus-visible{background:#6a4a3e;color:#fff;outline-offset:2px}
.collar-exploded{background:linear-gradient(155deg,#252321,#191a19);border:1px solid #5f574d;padding:27px 30px 20px;min-width:0}
.collar-exploded-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:15px}
.collar-exploded-heading .eyebrow{margin:0 0 10px;color:#c5967e}
.collar-exploded-heading h3{font:700 24px/1.3 var(--serif);color:#f0e8db;margin:0}
.collar-exploded-heading>span{font-size:10px;letter-spacing:.12em;color:#a99a8b;white-space:nowrap}
.collar-exploded-intro{font-size:12px;line-height:1.8;color:#c0b3a6;margin:12px 0 0}
.collar-diagram{position:relative;width:100%;aspect-ratio:620/480;margin:10px auto 4px}
.collar-diagram img{display:block;width:100%;height:100%;object-fit:contain}
.collar-hotspot{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:grid;place-items:center;width:34px;height:34px;border:1px solid #d3987a;border-radius:50%;background:#8b3d2d;color:#fff6ed;font:700 10px var(--sans);box-shadow:0 0 0 4px rgba(167,75,54,.14);z-index:2}
.collar-hotspot:hover,.collar-hotspot:focus-visible{background:#d17755;box-shadow:0 0 0 6px rgba(211,119,85,.2);outline:2px solid #f5d8bf;outline-offset:2px}
.collar-feature-legend{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;border-top:1px solid #504a42}
.collar-feature-legend button{display:flex;align-items:center;gap:11px;text-align:left;min-height:44px;padding:7px 2px;background:transparent;color:#e6dcd0;border-bottom:1px solid #504a42;font-size:12px;line-height:1.45}
.collar-feature-legend button:hover{color:#f2b69a}
.collar-feature-legend button span{font-size:10px;color:#c3856a;letter-spacing:.08em}
.collar-feature-legend button i{font-style:normal;margin-left:auto;color:#b89986}
.collar-exploded-note{font-size:10px;color:#998c7e;margin:13px 0 0}
#collar-feature-dialog{width:min(570px,calc(100vw - 36px))}
#collar-feature-dialog .collar-feature-warning:not([hidden]){padding:14px 16px;background:#e4d8ca;border-left:3px solid #a95640;color:#694b3e}
@media(max-width:720px){.collar-exploded{padding:22px 18px 18px}.collar-exploded-heading h3{font-size:21px}.collar-feature-legend{gap:0 12px}.collar-feature-legend button{font-size:11px;gap:7px}.collar-hotspot{width:30px;height:30px}.collar-controls{gap:5px}.collar-orbit-buttons button{width:26px;height:26px}}
@media(max-width:720px){
  .collar-caption{display:block}
  .collar-controls{margin-top:15px;flex-direction:row;align-items:center;justify-content:space-between}
  .collar-orbit-buttons button{width:36px;height:36px}
  .collar-motion-toggle{min-height:36px}
  .collar-feature-legend button{font-size:12px}
}
@media(max-width:380px){.collar-controls{flex-wrap:wrap}.collar-orbit-buttons button{width:32px}}