/* gbx-on-the-record.css · the On the Record flow · one kit component, every forum.
   Ruled by Patrick 2026-10-11: "on the record push to 007 to depoly all sites put into law".
   The layout is Webwizard's amended mock of 10 and 11 October, written to the house tokens.
   Seven lines, GOLDFINGER 9.9:
     1  one 16:9 frame per record, edge to edge, mono at rest
     2  nothing over the frame: no quote, no name, no scrim, no eyebrow; the hover film plays
        from its intro, the still returns on leave, touch is the link
     3  below the frame, in order: the quote, the name as the house eyebrow with the 34px rule,
        the fact line where a rating or a dated fact exists, verbatim from the film
     4  captions alternate left and right at desktop, left only at 375
     5  only people with a live page sit on the record page; every frame is the link to it
     6  the six forums carry the same page from one kit component, never per forum markup
     7  quotes print only as verified verbatim against the film, with the transcript on file
   The grade is the DDIF pair, ruled 2026-10-11 "option 1, hover setting", GOLDFINGER 9.10:
     rest  grayscale(1) contrast(1.06) brightness(.55)
     hover grayscale(1) contrast(1.06) brightness(.82)
   SOURCE: 00_canonical/gbx-on-the-record.css. Every forum copy is byte identical. npm run kit. */

.otr-flow{display:flex;flex-direction:column;gap:var(--sp6,89px);padding:var(--sp5,55px) 0 var(--sp7,144px)}
.otr-rec{display:block;position:relative;text-decoration:none;color:inherit;width:100%;max-width:1600px;margin:0 auto;outline:none}
.otr-frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--stone,#1F2828)}
.otr-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;
  filter:grayscale(1) contrast(1.06) brightness(.55);
  transition:opacity .72s ease,transform 1.6s var(--ease-enter,cubic-bezier(.22,1,.36,1)),filter .72s ease}
.otr-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;
  filter:grayscale(1) contrast(1.06) brightness(.82);opacity:0;transition:opacity .72s ease}
/* the sound control is the one thing allowed in the frame beside the picture and the film */
.otr-sound{position:absolute;right:var(--sp3,21px);bottom:var(--sp3,21px);z-index:2;display:none;align-items:center;gap:8px;
  background:transparent;border:0;padding:6px 0;cursor:pointer;color:var(--cashmere,#F3F6F9);
  font-family:var(--sans,'Jost',system-ui,sans-serif);font-weight:300;font-size:10px;letter-spacing:.2em;text-transform:lowercase;opacity:.72}
.otr-sound::before{content:"";display:block;width:34px;height:.5px;background:var(--g2,rgba(186,153,51,.236))}
.otr-rec.is-playing .otr-sound{display:inline-flex}
.otr-sound:hover{opacity:1}
.otr-cap{padding:var(--sp4,34px) var(--sp6,89px) 0;max-width:62ch;margin:0}
.otr-rec.right .otr-cap{margin-left:auto;text-align:right}
.otr-quote{font-family:var(--serif,'Cormorant',Georgia,serif);font-weight:300;font-style:italic;font-size:clamp(22px,2.5vw,31px);
  line-height:1.22;margin:0 0 var(--sp3,21px);color:var(--cashmere,#F3F6F9);text-wrap:balance}
.otr-name{font-family:var(--sans,'Jost',system-ui,sans-serif);font-weight:300;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold,#ba9933);margin:0 0 4px;padding-top:var(--sp2,13px);position:relative}
.otr-name::before{content:"";position:absolute;top:0;left:0;width:34px;height:.5px;background:var(--g2,rgba(186,153,51,.236))}
.otr-rec.right .otr-name::before{left:auto;right:0}
.otr-fact{font-family:var(--sans,'Jost',system-ui,sans-serif);font-weight:300;font-size:12px;letter-spacing:.04em;
  color:var(--cashmere,#F3F6F9);opacity:.62;margin:6px 0 0}
.otr-org{font-family:var(--sans,'Jost',system-ui,sans-serif);font-weight:300;font-size:11px;letter-spacing:.12em;color:var(--dim2,rgba(243,246,249,.52));margin:0}
/* hover: the DDIF voices transition. The still recedes, the film takes the frame, mono alike */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .otr-rec.is-playing .otr-still{opacity:0;transform:scale(1.03)}
  .otr-rec.is-playing .otr-film{opacity:1}
  .otr-rec:hover .otr-still{filter:grayscale(1) contrast(1.06) brightness(.82)}
}
.otr-rec:focus-visible .otr-frame{outline:.5px solid var(--g2,rgba(186,153,51,.236));outline-offset:-1px}
/* the reveal, gated on the script so it never fails closed */
html.otr-rev-on .otr-rev{opacity:0;transform:translateY(14px);transition:opacity .72s ease,transform .72s var(--ease-enter,cubic-bezier(.22,1,.36,1))}
html.otr-rev-on .otr-rev.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.otr-rev-on .otr-rev{opacity:1;transform:none;transition:none}
  .otr-film{display:none}
}
@media (max-width:900px){
  .otr-flow{gap:var(--sp5,55px);padding:var(--sp3,21px) 0 var(--sp6,89px)}
  .otr-cap{padding:var(--sp3,21px) 22px 0;max-width:none}
  .otr-rec.right .otr-cap{margin-left:0;text-align:left}
  .otr-rec.right .otr-name::before{left:0;right:auto}
  .otr-quote{font-size:clamp(22px,6vw,28px)}
}