/* SVS Design — render harness
   The CSS a construction and a layout need to actually render. Extracted
   verbatim from big-sheet.html so the two cannot drift; regenerate with
   extract-css.sh. Pair with svs-type.css.

   Markup contract:
     <div class="fr ly-poster" style="aspect-ratio:4/5;--ground:…;--a:…;--b:…">
       <div class="img" style="background:CSS_BACKGROUND">SHAPES_HTML</div>
       <div class="pnl"><p class="l">LABEL</p><h4>HEADLINE</h4><p class="fn">LEGAL</p></div>
     </div>

   --pd is the display face, --pt the text face; both default to the house pair.
   Panel type is sized in cqw against .fr, so the frame scales to any canvas.
*/
:root{ --rule-2:rgba(128,128,128,.22); }

.fr{position:relative;overflow:hidden;border:1px solid var(--rule-2);border-radius:1px;container-type:inline-size}
.fr i{position:absolute;display:block}
.fr .mod b,.fr .prog b,.fr .lw b,.fr .cp b{display:block}
.fr{--pd:"Vollkorn",Georgia,serif;--pt:"Gabarito",ui-sans-serif,sans-serif}
.pnl{position:absolute;left:6%;bottom:6%;background:#fff;padding:4.5% 5%;display:flex;flex-direction:column;gap:.3em;font-family:var(--pd);color:#14140F;z-index:6;max-width:74%}
.pnl .l{font-family:var(--pt);font-size:2.6cqw;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#7A827E;margin:0}
.pnl h4{margin:0;font-weight:700;font-size:5.4cqw;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
.pnl .fn{font-family:var(--pt);margin:.15em 0 0;font-size:2.1cqw;letter-spacing:.09em;text-transform:uppercase;color:#8A918D;border-top:1px solid #E4E7E3;padding-top:.35em}
.bt{position:absolute;left:8%;top:50%;transform:translateY(-50%);font-family:var(--pd);font-weight:700;font-size:12cqw;line-height:.86;letter-spacing:-.04em;z-index:2}
.tex{font-family:var(--pt);font-weight:700;font-size:3.6cqw;line-height:1.02;letter-spacing:-.02em;word-break:break-all;overflow:hidden;opacity:.8}
.fr .img{position:absolute;inset:0;overflow:hidden}
.ly-corner .pnl{left:0;bottom:0;max-width:70%}
.ly-split .img{right:48%}
.ly-split .pnl{left:52%;right:0;top:0;bottom:0;max-width:none;justify-content:center;padding:8% 7%}
.ly-vsplit .img{bottom:38%}
.ly-vsplit .pnl{left:0;right:0;top:62%;bottom:0;max-width:none;justify-content:center;padding:6% 7%}
.ly-poster .pnl{left:6%;right:6%;top:6%;bottom:auto;background:none;padding:0;max-width:none}
.ly-poster .pnl h4{font-size:11cqw;line-height:.94;letter-spacing:-.04em}
.ly-poster .pnl .l{order:2;margin-top:.6em}
.ly-poster .pnl .fn{order:3;border-top-color:rgba(128,128,128,.35)}
.ly-ghost .pnl{left:7%;right:7%;bottom:7%;background:none;padding:0;max-width:none}
.ly-ghost .pnl .fn{border-top-color:rgba(128,128,128,.35)}
.ly-sky .img{bottom:36%}
.ly-sky .pnl{left:6%;right:6%;bottom:5%;background:none;padding:0;max-width:none}
.ly-sky .pnl .fn{border-top-color:rgba(128,128,128,.35)}
.ly-band .pnl{left:0;right:0;top:36%;bottom:auto;max-width:none;padding:5% 7%}
.ly-quarter .pnl{left:auto;right:0;bottom:0;width:54%;max-width:none}
.ly-margin .img{right:34%}
.ly-margin .pnl{left:auto;right:4%;bottom:6%;width:30%;max-width:none;background:none;padding:0}
.ly-margin .pnl h4{font-size:4.4cqw}
.ly-margin .pnl .fn{border-top-color:rgba(128,128,128,.35)}
.ly-none .pnl{display:none}
.nopanel .pnl{display:none}
/* --- reconciliation layer (not extracted; hand-written, keep on regenerate) ---
   big-sheet.html hardcodes the house pair and the caps tracking as literals,
   which makes svs-type.css inert for an asset built from these files. These two
   rules bind the harness to the tokens instead, with the same values as
   fallbacks so nothing changes if svs-type.css is absent. */
.fr{--pd:var(--svs-serif,"Vollkorn",Georgia,serif);
    --pt:var(--svs-sans,"Gabarito",ui-sans-serif,sans-serif)}
.pnl .l{letter-spacing:var(--svs-tr-caps,.14em)}
/* --- site harmony layer (svsystems.co) ---
   1. Size type against the short side (cqmin), so landscape and portrait frames
      carry the same visual weight instead of the headline swelling with width.
   2. Layouts without a card take their text colour from the palette (--tx), so
      dark grounds stay legible.
   3. Type that sits on the construction gets a ground-coloured fade behind it,
      so lines and dots never run through the letters. */
.fr{container-type:size}
.pnl .l{font-size:2.6cqmin}
.pnl h4{font-size:5.4cqmin}
.pnl .fn{font-size:2.1cqmin}
.bt{font-size:12cqmin}
.tex{font-size:3.6cqmin}
.ly-poster .pnl h4{font-size:9.5cqmin;line-height:.98;letter-spacing:-.03em}
.ly-margin .pnl h4{font-size:4.6cqmin}
.ly-poster .pnl,.ly-ghost .pnl,.ly-sky .pnl,.ly-margin .pnl{color:var(--tx,#14140F)}
.ly-poster .pnl .l,.ly-ghost .pnl .l,.ly-sky .pnl .l,.ly-margin .pnl .l,
.ly-poster .pnl .fn,.ly-ghost .pnl .fn,.ly-sky .pnl .fn,.ly-margin .pnl .fn{color:var(--tx2,#7A827E)}
.ly-poster .pnl{left:0;right:0;top:0;padding:7% 7% 12%;background:linear-gradient(to bottom,var(--ground) 72%,transparent)}
.ly-ghost .pnl{left:0;right:0;bottom:0;padding:16% 7% 7%;background:linear-gradient(to top,var(--ground) 68%,transparent)}
.ly-sky .pnl{left:0;right:0;bottom:0;top:64%;padding:4% 6% 5%;justify-content:flex-end;background:var(--ground)}
.ly-margin .pnl{top:0;bottom:0;right:0;width:34%;padding:6% 5%;justify-content:flex-end;background:var(--ground)}
.ly-band .pnl h4{font-size:5cqmin}
/* headline measure: keep 2 to 4 lines in any frame, and let cards shrink to their text */
.pnl h4{max-width:18ch}
.ly-poster .pnl h4{max-width:16ch}
.ly-bleed .pnl,.ly-corner .pnl{max-width:min(74%,92cqmin)}
.ly-margin .img{right:42%}
.ly-margin .pnl{width:42%;padding:6% 6%}
.ly-margin .pnl h4{font-size:4.2cqmin;max-width:none}
/* on dark grounds, multiply sinks overlapping colour into black: lighten instead */
.fr.dk .img i{mix-blend-mode:screen!important}
.cgrid.dk .img i{mix-blend-mode:screen!important}