/* "Seeing is believing" at the bottom of Screen Tech (item SIB, 31 Oct 2026: Michael "put the video at the top ... fix the
   gaps", Richard "None of the photos are where they're meant to be or the same size"). The section's own stylesheet: only
   screen-tech.html loads it (build.py adds the link from the page's <!-- css: --> comment, after new-look.css), and the back
   end's "Seeing is believing" tab loads it for its preview. Every rule is scoped under .sib, and every site token has a
   fallback, so the back end (which does not load new-look.css) draws the preview the same. The markup comes from
   site-src/believing.py (the build) and js/believing.js (Richard's saved version, and the editor's preview).
   The layout follows the SECTION's width (container queries), not the window's: the editor's preview at 1400 / 984 / 728
   / 353 px shows exactly what a 1440 / 1024 / 768 / 393 window shows. Content width -> layout:
     < 560   phone     one column, every photo full width (never wider than its file)
     560+    tablet    rows side by side, all photos in a row the same height; a row of several captioned groups
                       splits into its groups; the big picture stands beside the first row only
     860+    computer  rows stay whole; the big picture fills the left third beside all the chapter's rows
     1240+   wide      the film and the JB Martin card side by side
   It replaces the old .believe / .sib-row rules in style.css. */
.sib{container:sib/inline-size}
/* phone first; the custom properties below are the only spacing numbers in the section */
.sib-in{--g:10px;--band-gap:22px;--ch-gap:20px;--cap-gap:10px;--capb:10px;--r-photo:8px;--r-box:10px}

/* --- captions: Richard's words, one style (white italic, as in his PDF). Item 293 (1 Nov 2026, Richard: "I want to make that text
   full width of screen"): no line length of their own any more here, in the JB Martin card and in a chapter's lead; a caption
   runs as wide as the photos it belongs to --- */
.sib-cap,.sib-film figcaption{margin:0;font-style:italic;font-size:.9375rem;line-height:1.5;color:var(--box-text,#eef0f4);text-wrap:pretty}
.sib-cap.large{font-size:1.0625rem;color:#fff}
.sib-cap a,.sib-card-text a,.sib-lead a,.sib-label a{color:var(--blue2,#7fb2ff);text-decoration:underline;text-underline-offset:2px}

/* --- photos: never wider than the file (--w), corners, a dark box while loading --- */
.sib-fig{position:relative;margin:0 auto;width:100%;max-width:var(--w);border-radius:var(--r-photo);overflow:hidden;background:var(--black,#1a1d22);box-shadow:var(--shadow,none)}
.sib-fig img{display:block;width:100%;max-width:none;height:auto;aspect-ratio:var(--ar,auto)}
/* a note on the photo ("On the photo"): a dark tag in the corner he picks */
.sib-label{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);padding:3px 10px 4px;border-radius:6px;background:rgba(17,20,24,.8);color:#fff;font-style:italic;font-size:.8125rem;line-height:1.4;pointer-events:none}
.sib-label.tl{top:10px;bottom:auto}
.sib-label.tr{top:10px;bottom:auto;left:auto;right:10px}
.sib-label.br{left:auto;right:10px}
/* item 299 (Richard, 1 Nov 2026: "unlimited characters and lines"): a label sits in the same corner, and when it is taller than
   the photo the box grows with it, so no word is ever cut off. On the Big picture only "huge" (over about 500 characters, too much
   for its height cap) lifts the cap, so a shorter label never changes its size or crop. A browser without :has() keeps the old box. */
.sib-label a{pointer-events:auto}
@supports selector(:has(*)){
  .sib-fig:has(>.sib-label){display:grid;grid-template-columns:minmax(0,1fr)}
  .sib-fig:has(>.sib-label)>img{grid-area:1/1}
  .sib-label,.sib-label.tl,.sib-label.tr,.sib-label.br{position:relative;display:block;grid-area:1/1;inset:auto;margin:10px;align-self:end;justify-self:start;overflow-wrap:anywhere;pointer-events:auto}
  .sib-label.tl,.sib-label.tr{align-self:start}
  .sib-label.tr,.sib-label.br{justify-self:end}
  .sib-feature>.feature:has(>.sib-label.huge){max-height:none}
}

/* --- the top: the film, then the JB Martin card (beside it on wide screens) --- */
.sib-hero{display:flex;flex-direction:column;gap:var(--g)}
.sib-film{margin:0 auto;width:100%;max-width:var(--w,1280px)}   /* never wider than its poster */
.sib-film .play{position:relative;display:block;width:100%;aspect-ratio:16/9;margin:0;padding:0;border:0;border-radius:var(--r-box);overflow:hidden;background:#000;cursor:pointer;box-shadow:var(--shadow,none)}
.sib-film .play img{width:100%;height:100%;max-width:none;object-fit:cover;opacity:.92;transition:opacity .2s}
.sib-film .play:hover img,.sib-film .play:focus-visible img{opacity:1}
/* z-index (31 Oct 2026, seen in the browser): the poster's opacity makes it a layer of its own, which painted over the blue circle */
.sib-film .play::before{content:"";position:absolute;z-index:1;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--blue,#2483ff);box-shadow:0 0 0 7px rgba(36,131,255,.28),0 10px 30px rgba(0,0,0,.55);transition:transform .2s}
.sib-film .play::after{content:"";position:absolute;z-index:1;left:50%;top:50%;transform:translate(-30%,-50%);border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff}
.sib-film .play:hover::before{transform:scale(1.07)}
.sib-film .play:focus-visible{outline:3px solid var(--blue2,#7fb2ff);outline-offset:3px}
.sib-film iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r-box);background:#000}
.sib-film figcaption{margin-top:10px}
.sib-card{background:var(--bg3,#343a42);border-radius:var(--r-box);box-shadow:var(--shadow,none);padding:20px;color:var(--box-text,#eef0f4)}
.sib-logo{display:block;width:min(220px,70%);max-width:100%;height:auto;margin:0 auto 18px;border-radius:6px}
.sib-card-text{font-style:italic;font-size:1rem;line-height:1.6}
.sib-card-text p{margin:0 0 .75em}
.sib-card-text>:last-child{margin-bottom:0}

/* --- chapters: a hairline between them; with a label ("titled") the label is the divider: a short blue bar, the
   words, then the hairline to the right edge, so the break costs one gap, not two --- */
.sib-ch{margin-top:var(--ch-gap);padding-top:var(--ch-gap);border-top:1px solid var(--hair,rgba(255,255,255,.08))}
.sib-ch.titled{padding-top:0;border-top:0}
.sib-ch.first{margin-top:var(--band-gap);padding-top:0;border-top:0}
.sib-in>.sib-ch.first:first-child{margin-top:0}
.sib-kicker{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:0;font:600 .8125rem/1.4 var(--font-head,inherit);font-stretch:100%;letter-spacing:.2em;text-transform:uppercase;text-shadow:none;color:var(--blue2,#7fb2ff)}
.sib-kicker::before{content:"";flex:none;width:28px;height:2px;background:currentColor}
.sib-kicker::after{content:"";flex:1 1 0;min-width:24px;height:1px;background:var(--hair,rgba(255,255,255,.08))}
.sib-lead{margin:0 0 16px;color:var(--box-text,#eef0f4)}
.sib-lead p{margin:0 0 .7em}
.sib-lead>:last-child{margin-bottom:0}
.sib-body,.sib-rest{display:flex;flex-direction:column;gap:var(--band-gap)}
.sib-feature+.sib-body{margin-top:var(--band-gap)}   /* rows that did not fit beside the big picture */

/* --- phone: one column; a caption sits over its photos; the big picture comes first, uncropped --- */
.sib-band{display:flex;flex-direction:column;gap:var(--band-gap)}
.sib-group{margin:0;display:flex;flex-direction:column;gap:var(--g)}
.sib-feature{display:flex;flex-direction:column;gap:var(--band-gap)}
.sib-fig.feature{max-width:var(--fw)}
/* review FID3 (31 Oct 2026): the big picture's own shape (--far, on .sib-feature) holds its height before it loads, so a phone's
   section does not jump; the tablet and computer rule below (.sib-feature>.feature img) comes later and wins there */
.sib-fig.feature img{aspect-ratio:var(--far,auto)}

/* ===== tablet and up: rows of photos side by side, the same height, filling the width ===== */
@container sib (min-width:560px){
  .sib-in{--g:16px;--band-gap:24px;--ch-gap:26px;--cap-gap:8px;--capb:12px}
  .sib-film .play::before{width:64px;height:64px;margin:-32px 0 0 -32px;box-shadow:0 0 0 8px rgba(36,131,255,.28),0 10px 30px rgba(0,0,0,.55)}
  .sib-film .play::after{border-width:12px 0 12px 20px}
  .sib-card{display:grid;grid-template-columns:clamp(170px,28%,240px) minmax(0,1fr);gap:28px;align-items:center;padding:24px 28px}
  .sib-card.no-logo{display:block}
  .sib-logo{width:100%;margin:0}
  /* a row is one grid, one column per photo as wide as its shape (1.5661fr for a 675x431 photo), so the photos come out
     the same height; captions sit in the line above (or below) and span their group. --maxw stops the row growing
     past the size where its smallest photo would be enlarged: the row then stays narrower and centred. */
  .sib-band{display:grid;grid-template-columns:var(--cols);column-gap:var(--g);row-gap:0;width:100%;max-width:var(--maxw);margin-inline:auto}
  .sib-group{display:contents}
  .sib-cap{grid-row:1;grid-column:var(--c)/span var(--s);align-self:end;margin:0 0 var(--cap-gap)}
  .sib-cap.below{grid-row:3;align-self:start;margin:var(--capb) 0 0}
  .sib-cap.large{font-size:var(--fs-lead,1.125rem);line-height:1.5}
  .sib-fig{grid-row:2;grid-column:var(--c);max-width:none;margin:0}
  .sib-band:has(.sib-label) .sib-fig{align-self:start}   /* the photos beside a label that grew its box keep their size */
  /* the big picture: cropped to its box from his focus point, at most 15% either way, never above its own size */
  .sib-feature>.feature{position:relative;grid-row:1;grid-column:1;align-self:stretch;margin:0}
  .sib-feature>.feature img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:var(--focus,50% 50%)}
}

/* ===== tablet only ===== */
@container sib (min-width:560px) and (max-width:859.98px){
  /* a row of several captioned groups (sample + foils | extrusion) splits into one row per group */
  .sib-band.multi{display:flex;flex-direction:column;gap:var(--band-gap);max-width:none}
  .sib-band.multi>.sib-group{display:grid;grid-template-columns:var(--gcols);column-gap:var(--g);width:100%;max-width:var(--gmaxw);margin-inline:auto}
  .sib-band.multi .sib-cap{grid-column:1/span var(--s)}
  .sib-band.multi .sib-fig{grid-column:var(--gc)}
  /* ...and a captioned single photo under 1.4:1 (the extrusion) takes 40% of the width, about the height of the row
     above it, with its caption beside it */
  .sib-band.multi>.sib-group.lone{grid-template-columns:min(var(--gmaxw),calc((100% - var(--g)) * .4)) minmax(0,1fr);align-items:center;max-width:none}
  .sib-band.multi>.sib-group.lone>.sib-fig{grid-row:1;grid-column:1}
  .sib-band.multi>.sib-group.lone>.sib-cap{grid-row:1;grid-column:2;align-self:center;margin:0}
  /* the big picture stands beside the first row only, whose photos stack (the split --ffn is worked out by the renderer
     so both sides come out the same height); the later rows run full width under them */
  .sib-feature{display:grid;grid-template-columns:min(var(--fw),calc((100% - var(--g)) * var(--ffn) / (var(--ffn) + 1))) minmax(0,1fr);gap:var(--band-gap) var(--g);align-items:start}
  .sib-feature>.feature{min-height:calc(min(var(--fw),(100cqw - var(--g)) * var(--ffn) / (var(--ffn) + 1)) / var(--far) * .85);
    max-height:min(var(--fh),calc(min(var(--fw),(100cqw - var(--g)) * var(--ffn) / (var(--ffn) + 1)) / var(--far) * 1.15))}
  .sib-feature>.sib-rest{display:contents}
  .sib-rest>.sib-band:first-child{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:var(--g);max-width:none}
  .sib-rest>.sib-band:first-child>.sib-group{display:contents}
  .sib-rest>.sib-band:first-child .sib-cap{margin:0}
  .sib-rest>.sib-band:first-child .sib-fig{max-width:var(--w);margin:0 auto}
  .sib-rest>.sib-band:not(:first-child){grid-column:1/-1}
}

/* ===== computer: the big picture takes its share of the width (--fs, worked out by the renderer so both sides come out
   the same height; never wider than its file) beside the rows that balance it; rows that do not fit run below ===== */
@container sib (min-width:860px){
  .sib-in{--ch-gap:28px}
  .sib-feature{display:grid;grid-template-columns:min(var(--fw),calc((100% - var(--g)) * var(--fs))) minmax(0,1fr);column-gap:var(--g);align-items:start}
  .sib-feature>.feature{min-height:calc(min(var(--fw),(100cqw - var(--g)) * var(--fs)) / var(--far) * .85);
    max-height:min(var(--fh),calc(min(var(--fw),(100cqw - var(--g)) * var(--fs)) / var(--far) * 1.15))}
  .sib-feature>.sib-rest{grid-column:2;grid-row:1;min-width:0}
}

/* ===== wide computer: the film and the JB Martin card side by side ===== */
@container sib (min-width:1240px){
  .sib-hero{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--g);align-items:stretch}
  .sib-hero.solo{display:flex}
  .sib-film{align-self:center}
  .sib-hero:not(.solo) .sib-card{display:flex;flex-direction:column;justify-content:center;padding:28px}
  .sib-hero:not(.solo) .sib-logo{width:clamp(180px,50%,240px);margin:0 0 20px}
}

@media (prefers-reduced-motion:reduce){.sib *{transition:none !important}}