/* reference.css — fidelity layer for the case screen, built against the user's approved reference image
   (cinematic scene centre, paper notebook left, narrow labelled rail right, witness + chapter band below).
   Loaded after style.css. Engineering-owned interim; visual decisions are logged in DESIGN_REQUESTS.md. */

/* ---- rail: labelled, ruled, accent edge on the active item ---- */
.rail nav{gap:0}
.rail-link{min-height:84px;border-bottom:1px solid #ffffff14;gap:8px}
.rail nav .rail-link:last-child{border-bottom:0}
.rail-link .icon,.rail-preferences .icon{width:24px;height:24px}
.rail-link.active::before{right:0;height:44px;width:3px}
.rail-preferences{flex-direction:column;gap:7px;width:100%;height:auto;min-height:76px;font-size:10px;color:#b4beb0}
.rail-preferences:hover{color:var(--accent)}

/* ---- top bar: title right, hairline, actions, place left ---- */
.case-top{height:72px;gap:20px}
.case-top .brand>span{font-size:31px}
.top-rule{flex:1;height:1px;background:linear-gradient(270deg,var(--line),transparent)}
.case-place{display:flex;flex-direction:column;gap:2px;font-size:11px;color:#d4d8c8;padding-left:14px;border-left:1px solid var(--accent);line-height:1.6;text-align:right}
.case-place small{font-size:10px;color:var(--muted)}
.case-place strong{font-weight:500}.case-place strong span{color:var(--accent);margin:0 4px}
.mobile-only-settings{display:none}
.case-breadcrumb,.case-kicker{display:none}

/* ---- scene: clean image, question as caption strip, compact tools ---- */
.image-plane>img{filter:none}
.scene-shade{background:linear-gradient(#03100d45,transparent 16%,transparent 84%,#04100c55)}
.scene-stage{position:relative}
.scene-stage>.scene-question,body[data-theme] .scene-stage>.scene-question{position:static;width:auto;max-width:none;display:flex;align-items:baseline;gap:14px;padding:9px 16px;background:#0a130f;backdrop-filter:none;border:0;border-top:1px solid var(--line);border-right:2px solid var(--accent);pointer-events:auto}
.scene-stage>.scene-question>span{font-size:10px;color:var(--accent);white-space:nowrap}
.scene-stage>.scene-question p{font:20px/1.3 var(--serif);margin:0;color:#eee8d7}
.pin-dot{width:30px;height:30px;border-width:1.5px;outline:5px solid #f0e4c722;font-size:13px}

/* ---- chapter band: headline + chapter number + witness card ---- */
.scene-band{display:grid;grid-template-columns:minmax(0,1.5fr) 104px minmax(0,1fr);align-items:stretch;padding:20px 0 4px}
.band-story{padding-left:26px}
.band-story .eyebrow{font-size:10px;margin:0}
.band-story h1{font:700 34px/1.2 var(--serif);margin:4px 0 8px}
.band-story p:not(.eyebrow){font-size:13px;line-height:1.95;color:#c5cebe;margin:0 0 14px;max-width:62ch}
.gold-button{display:inline-flex;align-items:center;gap:16px;min-height:48px;padding:8px 34px;background:linear-gradient(#dcc388,#b8955a);color:#17150f;border:1px solid #e9d7a6;outline:1px solid color-mix(in srgb,var(--accent) 50%,transparent);outline-offset:3px;font:600 16px var(--body);cursor:pointer}
.gold-button:hover{filter:brightness(1.06)}
.gold-button .icon{width:18px;height:18px}
.band-number{display:flex;flex-direction:column;align-items:center;justify-content:center;border-left:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-right:1px solid color-mix(in srgb,var(--accent) 45%,transparent);color:var(--accent)}
.band-number span{font-size:12px}
.band-number b{font:400 66px/1 var(--serif)}
.band-witness{margin:0;padding:0 24px}
.band-witness figcaption{font-size:12px;color:#e9e2cf;border-bottom:1px solid var(--line);padding-bottom:7px;margin-bottom:10px}
.band-witness blockquote{font-size:13px;line-height:1.95;color:#d6dacb;margin:0 0 8px}
.band-witness cite{display:block;font-style:normal;font-size:11px;color:var(--muted)}
.scene-extras{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;border-top:1px solid var(--line);margin-top:16px;padding:6px 0}
.object-list-wrap summary{cursor:pointer;font-size:11px;color:#a9b49f;min-height:36px;display:flex;align-items:center}
.object-list-wrap[open] .object-list{margin-top:4px}
.tool-line{display:flex;align-items:center;gap:10px;font-size:11px;color:#a9b49f;min-height:36px}
.tool-line .text-button{color:var(--accent);display:inline-flex;align-items:center;gap:8px}
.tool-line .icon{width:14px;height:14px}

/* ---- notebook: stacked paper, photo cards, paperclip, round stamp, three tabs ---- */
.notebook{box-shadow:4px 5px 0 -1px color-mix(in srgb,var(--paper) 76%,#000),8px 10px 0 -2px color-mix(in srgb,var(--paper) 56%,#000),0 26px 46px #000a}
.notebook-header>div{display:none}
.notebook-header{text-align:center;padding-bottom:12px}
.notebook-header h2{font-size:36px;margin:2px 0 4px}
.notebook-tabs button{font-size:12px;gap:6px}
.notebook-exhibit{display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-areas:"thumb copy" "note note";gap:6px 14px;align-items:start;padding:16px 0}
.notebook-exhibit>.thumb-wrap{grid-area:thumb;position:relative;display:block;min-width:0}
.thumb{display:block;width:104px;height:92px;background-size:520% auto;background-repeat:no-repeat;border:4px solid #fffdf5;box-shadow:0 2px 7px #0006;transform:rotate(-2deg)}
.clip{position:absolute;top:-10px;left:-4px;width:18px;height:36px;color:#6b6d68;transform:rotate(-12deg)}
.notebook-exhibit>.ex-copy{grid-area:copy;min-width:0}
.ex-copy .ex-no{display:inline-block;border:1px solid #53613f55;padding:0 8px;font:10px Georgia,serif;direction:ltr;margin-bottom:6px;color:#53634b}
.ex-copy strong{font-size:14px;margin-bottom:3px}
.ex-copy>span{font-size:11px;line-height:1.7}
.notebook-exhibit>.ex-note{grid-area:note;display:block;font-size:11px;line-height:1.8;color:#3f4c39;border-top:1px solid #53613f30;padding-top:7px;margin-top:4px}
.ex-note b{font-weight:700}
.ex-note small{display:block;font-size:8px;color:#687052;margin-top:4px}
.ghost-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.ghost-list li{border:1px dashed #53613f55;padding:12px;font-size:11px;color:#6a7560;display:flex;gap:12px;align-items:center}
.ghost-list span{font:10px Georgia,serif;border:1px solid #53613f45;padding:0 8px}
.notebook-empty{padding:18px 3px 6px}
.notebook-empty h3{font-size:23px}
.notebook-person{display:flex;gap:14px;align-items:center;padding:18px 0;border-bottom:1px solid #53613f25;color:var(--paper-ink)}
.person-mark{display:grid;place-items:center;width:48px;height:48px;border:1px solid #53613f55;border-radius:50%}
.person-mark .icon{width:26px;height:26px}
.notebook-person strong{display:block;font-size:15px}.notebook-person span>span{display:block;font-size:11px;color:#53634b}.notebook-person small{font-size:9px;color:#687052}
.notebook-hint{font-size:11px;color:#606b55;margin:14px 0 0}
.notebook-footer{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;align-items:center}
.notebook .paper-stamp{width:92px;height:92px;border-radius:50%;border:2px solid #a23a30;color:#a23a30;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-12deg);position:relative;opacity:.86;background:none;padding:0;margin:0;font:700 13px/1.2 var(--serif);text-align:center}
.notebook .paper-stamp::before{content:'';position:absolute;inset:5px;border:1px solid #a23a30;border-radius:50%}
.notebook .paper-stamp b{font-weight:700}.notebook .paper-stamp small{font-size:9px;letter-spacing:1px}
.notebook-footer>p{margin:0;font-size:11px}
.footer-links{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 18px}
.footer-links button{font-size:11px;min-height:40px}

/* ---- desktop: fit chapter + image + band in one screen ---- */
@media(min-width:981px){
  .case-main{padding:16px 28px 0}
  .case-layout{grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
  .desktop-notebook{position:sticky;top:10px;max-height:calc(100vh - 20px);overflow:auto;padding:0 10px 14px 0}
  .scene-top,.scene-bottom-label{display:none}
  .scene-toolbar{position:absolute;top:12px;right:12px;z-index:5;min-height:0;border:1px solid #ffffff2e;background:#0b1410c4;backdrop-filter:blur(4px)}
  .scene-toolbar>button{flex:none;width:44px;min-height:44px;padding:0}
  .scene-toolbar>button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .case-footer{margin-top:10px;padding:10px 0 14px}
}

/* ---- tablet/phone ---- */
@media(max-width:980px){
  .case-place,.top-rule{display:none}
  .case-top-actions .quiet:not([data-action=brief]){display:none}
  .mobile-only-settings{display:inline-flex}
  .case-top{height:80px}
  .scene-band{grid-template-columns:1fr;gap:18px;padding-top:18px}
  .band-number{display:none}
  .band-story{padding-left:0}
  .band-story h1{font-size:30px}
  .band-witness{padding:14px 16px;border-right:2px solid var(--accent);background:#ffffff07}
  .scene-extras{flex-direction:column;gap:0}
  .scene-stage>.scene-question{flex-direction:column;gap:2px}
  .scene-stage>.scene-question p{font-size:19px}
  .gold-button{width:100%;justify-content:center}
}
.notebook .paper-stamp b{font-size:11px;max-width:68px;line-height:1.25}

/* ---- geometry pass: flush edges and proportions measured from the reference (1586x992) ---- */
@media(min-width:981px){
  .case-main{padding:0;max-width:none}
  .case-layout{grid-template-columns:minmax(0,1fr) clamp(330px,25.7vw,440px);gap:0;align-items:start}
  .desktop-notebook{top:3px;height:calc(100vh - 100px);max-height:none;padding:0 0 0 8px;margin-top:3px}
  .desktop-notebook .notebook{min-height:100%}
  .scene-stage{border:0}
  .scene-stage>.scene-question,body[data-theme] .scene-stage>.scene-question{position:absolute;top:auto;left:0;right:0;bottom:0;background:linear-gradient(transparent,#050b08e6 55%);border:0;border-right:0;padding:26px 22px 9px;pointer-events:none}
  .scene-band{grid-template-columns:minmax(0,1.45fr) 120px minmax(0,1fr);padding:22px 28px 0 24px}
  .band-story h1{font-size:38px}
  .band-story p:not(.eyebrow){font-size:15px}
  .band-witness blockquote{font-size:15px}
  .band-witness cite{font-size:12px}
  .scene-extras{margin:12px 28px 0 24px}
  .case-footer{margin:0 28px 0 24px}
  .thumb{width:140px;height:118px}
  .notebook-exhibit{grid-template-columns:140px minmax(0,1fr)}
  .ex-copy strong{font-size:18px}
  .ex-copy>span{font-size:12.5px}
  .notebook-exhibit>.ex-note{font-size:12.5px}
}

/* ---- desktop plane matches the reference crop (1085x640). Image is cover-cropped horizontally
   (image 1672:941 → 4.6% total, 2.3% each side); pin x is re-mapped so hotspots stay on their objects. ---- */
@media(min-width:981px){
  .image-plane{aspect-ratio:1085/640}
  .image-plane>img{object-fit:cover;object-position:50% 50%}
  .scene-pin{left:calc((var(--x) - 2.3) / .954 * 1%)!important}
  .gold-button{min-height:66px;padding:8px 58px;font-size:21px;gap:22px}
  .gold-button .icon{width:22px;height:22px}
}

@media(min-width:981px){
  .rail-link{min-height:clamp(84px,13.3vh,140px);gap:12px;font-size:12px}
  .rail-link .icon,.rail-preferences .icon{width:30px;height:30px}
  .rail-preferences{font-size:12px;min-height:clamp(84px,13.3vh,140px);gap:12px}
  .rail-link.active::before{height:56px}
}

/* ---- final fidelity pass: gold headline, ring pins, warm paper, witness ornament, single-screen fit ---- */
.band-story h1{color:color-mix(in srgb,var(--accent) 82%,#fff)}
.band-witness figcaption{text-align:right}
.band-witness blockquote{position:relative}
.band-witness cite{display:flex;align-items:center;gap:12px;margin-top:14px}
.band-witness cite::before{content:'';flex:1;height:1px;background:linear-gradient(270deg,var(--accent),transparent)}
.pin-dot{width:34px;height:34px;border:1.5px solid var(--accent);outline:0;box-shadow:0 0 0 3px #f1e7cbd9,0 0 14px #000a;font-size:15px}
.scene-pin.found .pin-dot{box-shadow:0 0 0 3px #f1e7cb99,0 0 14px #000a}
.notebook.archive{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .36  0 0 0 0 .27  0 0 0 0 .16  0 0 0 .20 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),radial-gradient(ellipse at 28% 6%,#f3e8cd 0,transparent 55%),radial-gradient(ellipse at 100% 100%,#c9b68c 0,transparent 42%),radial-gradient(ellipse at 0 55%,#d8c9a6 0,transparent 30%);background-color:#e7dbbf}
@media(min-width:981px){
  .thumb{width:150px;height:128px}
  .notebook-exhibit{grid-template-columns:150px minmax(0,1fr)}
  .case-footer{display:none}
  .case-workspace{position:relative}
  .scene-extras{position:absolute;left:24px;bottom:8px;width:min(44%,420px);margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:0;z-index:4;background:#0b120fe6}
  .object-list-wrap[open]{max-height:260px;overflow:auto}
  .object-list-wrap .object-list{flex-direction:column}
}

@media(min-width:981px){
  .rail-link span,.rail-preferences span{white-space:nowrap;font-size:11.5px}
  .scene-extras{left:24px;right:28px;bottom:-40px;width:auto;flex-direction:row;justify-content:space-between;align-items:center;background:none;max-height:none}
  .object-list-wrap{position:relative;max-height:none;overflow:visible}
  .object-list-wrap[open] .object-list{position:absolute;bottom:100%;right:0;width:360px;max-height:240px;overflow:auto;background:#0b120ff2;border:1px solid var(--line);padding:6px;margin:0}
  .notebook-exhibit{padding:12px 0}
  .ghost-list{margin-top:10px}.ghost-list li{padding:9px 12px}
  .notebook-footer{margin-top:10px;padding-top:12px}
  .notebook .paper-stamp{width:80px;height:80px}
  .footer-links{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
  .footer-links button{font-size:11px;min-height:36px;text-align:right}
}