/* FAQ: the cabinet in the jeweller's room (scripts/faq.mjs). Drawn in gold line on ink.
   Behind the whole page stands one dark jeweller's safe, near still as you scroll: baked pictures on one fixed canvas (/v6/flow.js), no 3D on the visitor's machine.
   The cabinet is plain HTML: each drawer is a native <details name="cb"> (one open at a time); its <summary> is the drawer front with the question on a
   card in a brass label holder and a cup pull, its <p> the answer in the drawer's velvet. An open drawer has the cabinet to itself, the others wait as slim
   drawers below it. Motion: transforms and opacity only.
   Still mode (reduced motion, ?still, Pause) and no JS: nothing moves, every drawer still opens. */

/* ---------- behind the page: the safe (a picture sequence played by /v6/flow.js; the still without JS or in still mode) ---------- */
html.pg-faq body{background:#050508}
.pg-faq main .sc.ink{background:transparent}
.faqbg{position:fixed;inset:0;z-index:0;pointer-events:none;contain:strict}
.faqbg picture,.faqbg .still,.faqbg canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.faqbg .still{object-fit:cover;transition:opacity .8s var(--ease)}
.faqbg canvas{opacity:0}.faqbg.live .still{opacity:0}
/* the safe stays the backdrop: darker behind the words (left) and under the cabinet's lamp, so the gold line and the cards keep their contrast */
.faqbg .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,8,.82) 0%,rgba(5,5,8,.55) 32%,rgba(5,5,8,.3) 55%,rgba(5,5,8,.45) 100%),linear-gradient(rgba(5,5,8,.35),rgba(5,5,8,0) 30%)}
@media(max-width:767px){.faqbg .still{object-position:50% 0}.faqbg .scrim{background:linear-gradient(rgba(5,5,8,.25),rgba(5,5,8,.6) 45%,rgba(5,5,8,.8))}}

/* ---------- the scene: the words, and the cabinet under its lamp ---------- */
.cb{padding-top:clamp(40px,6vh,72px);padding-bottom:clamp(170px,22vh,230px)}
.cb-two{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(32px,5vw,88px);align-items:start}
.cb .txt{position:sticky;top:calc(var(--bar,72px) + 48px);padding-top:56px}
.cb .sub{margin-bottom:28px}
.cb-cab{position:relative;padding-top:168px;max-width:820px;justify-self:end;width:100%}
/* the cord comes down from the ceiling (above the page top) to the shade */
.cb-cab::before{content:"";position:absolute;left:50%;bottom:calc(100% - 24px);height:60vh;width:1.5px;margin-left:-.75px;background:rgba(226,194,156,.55)}
.cb-lamp{position:absolute;left:50%;top:0;width:96px;margin-left:-48px;overflow:visible;transform-origin:50% 0;z-index:3}
.cb-lamp .cord{fill:none;stroke:rgba(226,194,156,.55);stroke-width:1.5}
.cb-lamp .shade{fill:url(#cb-brass);stroke:#9A6B3A;stroke-width:1}
.cb-lamp .bulb{fill:#FFF1CF}
.js:not(.still) .cb-lamp{animation:cb-hang 6s cubic-bezier(.4,0,.6,1) .3s both}
@keyframes cb-hang{0%{transform:rotate(5deg)}14%{transform:rotate(-3.6deg)}28%{transform:rotate(2.5deg)}42%{transform:rotate(-1.7deg)}56%{transform:rotate(1.1deg)}70%{transform:rotate(-.6deg)}84%{transform:rotate(.3deg)}100%{transform:rotate(0)}}
/* its light falls on the top of the cabinet */
.cb-pool{position:absolute;left:50%;top:112px;width:110%;height:70%;transform:translateX(-50%);z-index:2;pointer-events:none;
  clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);background:radial-gradient(60% 75% at 50% 0,rgba(255,227,176,.2),rgba(224,168,102,.05) 60%,transparent)}

/* the carcass: cornice with dentils, fluted pilasters at the sides, the plinth */
.cb-body{position:relative;padding:30px 42px 34px;border:1.5px solid rgba(226,194,156,.8);border-radius:2px;
  background:repeating-linear-gradient(90deg,rgba(226,194,156,.32) 0 1px,transparent 1px 7px) 10px 0/22px 100% no-repeat,
    repeating-linear-gradient(90deg,rgba(226,194,156,.32) 0 1px,transparent 1px 7px) right 10px top 0/22px 100% no-repeat,linear-gradient(#151B36,#0D1227);
  box-shadow:inset 0 0 0 7px #10152B,inset 0 0 0 8px rgba(226,194,156,.22),0 50px 90px rgba(0,0,0,.55)}
.cb-body::before{content:"";position:absolute;left:-24px;right:-24px;top:-34px;height:34px;border:1.5px solid rgba(226,194,156,.85);border-radius:2px;
  background:repeating-linear-gradient(90deg,transparent 0 13px,rgba(226,194,156,.5) 13px 14.5px) left 8px bottom 4px/calc(100% - 16px) 9px no-repeat,linear-gradient(#1C2346,#121731)}
.cb-body::after{content:"";position:absolute;left:-14px;right:-14px;bottom:-28px;height:28px;border:1.5px solid rgba(226,194,156,.85);border-radius:2px;background:linear-gradient(#1A2042,#0F1430);
  box-shadow:0 30px 0 -20px rgba(226,194,156,0)}

/* ---------- the drawers ---------- */
.cb-dw{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:fq}
.cb-dw details{display:flex;flex-direction:column;counter-increment:fq;border-radius:3px;background:#05070F;box-shadow:inset 0 8px 16px rgba(0,0,0,.85)}
/* the opening behind a pulled drawer: lit velvet */
.cb-dw details[open]{background:radial-gradient(90% 80% at 50% 0,rgba(255,214,150,.55),rgba(140,60,50,.35) 45%,transparent 80%),linear-gradient(#5B2A2E,#2A1218)}
/* the front: lacquer lit from the lamp above, a gold bevel and an inlay line */
.cb-dw summary{list-style:none;position:relative;isolation:isolate;display:block;min-height:132px;padding:32px 22px 48px;cursor:pointer;text-align:center;
  font:500 clamp(15px,1.15vw,17.5px)/1.28 var(--display);color:#2A1A0C;letter-spacing:0;
  background:linear-gradient(180deg,#28325F 0%,#1B2249 42%,#121834 100%);border:1px solid rgba(226,194,156,.8);border-radius:3px;
  box-shadow:inset 0 0 0 6px rgba(18,24,52,.6),inset 0 0 0 7px rgba(226,194,156,.26),0 2px 0 rgba(0,0,0,.45);
  transition:transform .55s cubic-bezier(.2,.9,.3,1),box-shadow .55s,opacity .4s}
.cb-dw summary::-webkit-details-marker{display:none}
.cb-dw summary{flex:1 0 auto}
/* the card in its brass label holder, with the drawer's number at the top */
.cb-dw summary::before{content:counter(fq,decimal-leading-zero);position:absolute;inset:14px 13px 38px;z-index:-1;padding-top:6px;border-radius:2px;
  font:600 9.5px/1 var(--text);letter-spacing:.24em;color:#8A5E33;
  background:linear-gradient(#F8EFDC,#EADBBD);box-shadow:0 0 0 3px #C99A6E,0 0 0 4px #6B4420,0 0 0 5px rgba(255,241,207,.25),inset 0 0 0 1px rgba(107,68,32,.2),0 3px 6px 3px rgba(0,0,0,.35)}
/* the brass cup pull */
.cb-dw summary::after{content:"";position:absolute;left:50%;bottom:13px;width:54px;height:15px;margin-left:-27px;border-radius:0 0 30px 30px;
  background:radial-gradient(48% 70% at 50% 0,#1A0F07 70%,transparent 74%),linear-gradient(#FFF1CF,#D6A874 55%,#7A5230);box-shadow:0 3px 3px rgba(0,0,0,.5)}
.cb-dw summary:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
/* a closed drawer under the hand comes a little toward you */
.cb-dw details:not([open]) summary:hover{transform:translateY(3px) scale(1.018);box-shadow:inset 0 0 0 6px rgba(18,24,52,.6),inset 0 0 0 7px rgba(226,194,156,.4),0 10px 18px rgba(0,0,0,.5)}
/* ---------- one drawer open: it has the cabinet to itself ----------
   The open drawer moves to the top of the cabinet, full width, pulled toward you and lit, and its answer lies in the velvet tray under it (nothing over it).
   Every other drawer closes up into a slim drawer below: its question still readable on its label, one click from being the open one.
   Clicking the open drawer's front shuts it and the cabinet is whole again. /v6/faq.js morphs between the two (View Transitions, where the browser has them). */
.cb-dw:has(details[open]){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.cb-dw details[open]{grid-column:1/-1;order:-1;margin-bottom:10px;padding:0 0 14px;
  background:radial-gradient(80% 60% at 50% 0,rgba(255,214,150,.4),rgba(140,60,50,.25) 45%,transparent 80%),linear-gradient(#4A2128,#22101A);
  box-shadow:inset 0 8px 18px rgba(0,0,0,.7),0 0 0 1px rgba(226,194,156,.35),0 26px 50px rgba(0,0,0,.6)}
.cb-dw details[open] summary{z-index:3;min-height:0;padding:44px 90px 54px;font-size:clamp(22px,2vw,29px);border-color:var(--gold-hi);
  box-shadow:inset 0 0 0 6px rgba(18,24,52,.6),inset 0 0 0 7px rgba(246,221,176,.5),0 16px 28px rgba(0,0,0,.6)}
.cb-dw details[open] summary::before{inset:16px 64px 42px;background:linear-gradient(#FFF7E6,#F1E2C2)}
/* the open drawer's front shuts it: a small close mark at its corner (clicks go through it to the front) */
.cb-dw details[open]{position:relative}
.cb-dw details[open]::after{content:"";position:absolute;top:22px;right:18px;z-index:4;width:30px;height:30px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(226,194,156,.6);background:linear-gradient(45deg,transparent 47%,var(--gold-hi) 47% 53%,transparent 53%),linear-gradient(-45deg,transparent 47%,var(--gold-hi) 47% 53%,transparent 53%) center/14px 14px no-repeat}
.cb-dw details p{margin:0;padding:24px clamp(20px,4%,44px) 10px;max-width:none;font-size:clamp(18px,1.45vw,21px);line-height:1.6;color:#FBF3E4;text-align:center}
.js:not(.still) .cb-dw details[open] p{animation:cb-slide .7s cubic-bezier(.2,.9,.3,1) .1s both}
@keyframes cb-slide{0%{opacity:0;transform:translateY(-18px)}70%{opacity:1;transform:translateY(2px)}100%{transform:none}}
/* the slim drawers: the label strip with its number and the question, the pull at the right */
.cb-dw:has(details[open]) details:not([open]) summary{min-height:0;padding:15px 56px 15px 58px;text-align:left;font-size:15.5px;line-height:1.25;opacity:.82}
.cb-dw:has(details[open]) details:not([open]) summary::before{inset:6px 46px 6px 8px;padding:0 0 0 12px;display:flex;align-items:center}
.cb-dw:has(details[open]) details:not([open]) summary::after{left:auto;right:12px;bottom:auto;top:50%;width:26px;height:9px;margin:-4px 0 0}
.cb-dw:has(details[open]) details:not([open]) summary:hover{opacity:1;transform:translateY(2px)}
/* the morph (faq.js): the drawers glide to their new places, the answer comes in after */
::view-transition-group(*){animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.9,.3,1)}

/* as the page opens the drawers settle home one after another (only before they start: hover and open keep their own transform) */
.js:not(.still) .cb-dw summary{animation:cb-in .9s cubic-bezier(.2,.9,.3,1) calc(.5s + var(--i) * 70ms) backwards}
@keyframes cb-in{0%{transform:translateY(12px) scale(1.06);opacity:0}100%{transform:none;opacity:1}}
.still .cb-dw summary,.still .cb-dw p,.still .cb-lamp{animation:none;transition:none}

@media(max-width:899px){
  .cb-two{grid-template-columns:1fr;gap:8px}
  .cb .txt{position:static;padding-top:0}
  .cb-cab{padding-top:136px;justify-self:stretch}
  .cb-lamp{width:76px;margin-left:-38px}
  .cb-cab::before{height:48px}
  .cb-pool{top:92px}
  .cb-body{padding:22px 16px 24px;background:linear-gradient(#151B36,#0D1227)}
  .cb-body::before{left:-10px;right:-10px;top:-26px;height:26px}
  .cb-body::after{left:-6px;right:-6px}
  .cb-dw{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cb-dw summary{min-height:132px;padding:30px 14px 46px;font-size:15px}
  .cb-dw summary::before{inset:12px 8px 36px}
  .cb-dw summary::after{bottom:11px;width:44px;height:13px;margin-left:-22px}
  .cb-dw:has(details[open]){grid-template-columns:1fr;gap:8px}
  .cb-dw details[open] summary{padding:34px 64px 46px 28px;font-size:21px}
  .cb-dw details[open] summary::before{inset:12px 52px 36px 12px}
  .cb-dw details[open]::after{top:16px;right:12px}
  .cb-dw details p{padding:18px 18px 8px;font-size:17px}
  .cb-dw:has(details[open]) details:not([open]) summary{padding:13px 50px 13px 52px;font-size:15px}
  .cb{padding-bottom:240px}
}

/* short laptop screens (1280x585 at 150%): the words sit higher and the title is smaller, so both buttons show on the first screen (Roast Room 2026-10-26) */
@media(min-width:900px) and (max-height:760px){
  .cb{padding-top:16px}
  .cb .txt{padding-top:8px;top:calc(var(--bar,72px) + 16px)}
  .cb .crumbs ol{margin-bottom:clamp(16px,4vh,40px)}
  .cb .eyebrow{margin-bottom:14px}
  .cb h1{font-size:clamp(56px,14vh,196px);margin-bottom:14px}
  .cb .sub{margin-bottom:20px}
}

/* ---------- phones: the questions as a plain quick list (owner 2026-10-26) ----------
   No cabinet to look through on a small screen: twelve lines, a number and the question; tap one and its answer opens right under it, in place. */
@media(max-width:767px){
  .cb-lamp,.cb-pool,.cb-cab::before{display:none}
  .cb-cab{padding-top:28px}
  .cb-body,.cb-body::before,.cb-body::after{padding:0;border:0;background:none;box-shadow:none}
  .cb-body::before,.cb-body::after{display:none}
  .cb-dw,.cb-dw:has(details[open]){grid-template-columns:1fr;gap:0;border-top:1px solid rgba(226,194,156,.28)}
  .cb-dw details,.cb-dw details[open]{order:0;margin:0;padding:0;border-radius:0;background:none;box-shadow:none;border-bottom:1px solid rgba(226,194,156,.28)}
  .cb-dw details[open]::after{display:none}
  .cb-dw summary,.cb-dw details[open] summary,.cb-dw:has(details[open]) details:not([open]) summary{min-height:0;padding:17px 40px 17px 42px;text-align:left;
    font:500 18px/1.3 var(--display);color:#F6ECDA;opacity:1;background:none;border:0;border-radius:0;box-shadow:none;animation:none;transform:none}
  .cb-dw details[open] summary{color:var(--gold-hi)}
  .cb-dw summary::before,.cb-dw details[open] summary::before,.cb-dw:has(details[open]) details:not([open]) summary::before{inset:auto;left:0;top:21px;padding:0;display:block;
    background:none;box-shadow:none;font:600 11px/1 var(--text);letter-spacing:.14em;color:#C99A6E}
  .cb-dw summary::after,.cb-dw:has(details[open]) details:not([open]) summary::after{content:"+";left:auto;right:4px;top:50%;bottom:auto;width:auto;height:auto;margin:0;
    transform:translateY(-50%);background:none;box-shadow:none;border-radius:0;font:300 26px/1 var(--text);color:#E2C29C}
  .cb-dw details[open] summary::after{content:"\2013"}
  .cb-dw details:not([open]) summary:hover,.cb-dw:has(details[open]) details:not([open]) summary:hover{transform:none;box-shadow:none}
  .cb-dw details p{padding:0 8px 20px 42px;font-size:16.5px;line-height:1.6;text-align:left;color:#EFE5D2}
}