/* ==== BARS EVERYWHERE — SITEWIDE FRAME LAYER (2026-11-09) ====
   Steve's order: the entire site, front to back, wears the left bar
   and the right bar — every reader page. This file carries the SAME
   frame the article pages run (skin rules lifted verbatim from
   build_magazine.SD_CSS): at >=1500px two fixed full-height skins
   (~300px) flank the page — LEFT the six-brand house panel (one
   swappable art file, assets/house/skin-left-b.webp, six logo
   hotspots), RIGHT the pets panel — while each family's own content
   wrapper narrows into the centered channel between them. Below
   1500px the skins do not render at all: phones stay clean and
   mid widths keep each family's shipped layout. */
.sd-skin{--gold:#C9A227;--gold-lo:#8C6D1F;--bone2:#F4EEE1;
  --ink:#17130B;--ink85:rgba(23,19,11,.85);--ink60:rgba(23,19,11,.6);
  --serif:'Fraunces',Georgia,serif;--sans:'Libre Franklin',Helvetica,Arial,sans-serif}
.sd-skin{display:none}
@media (min-width:1500px){
  /* pet base (front.css, scoped — families without .pet rules);
     precedes the skin overrides so they win ties, as on articles */
  .sd-skin .pet{border:2px solid var(--ink);border-radius:8px;background:#fff;   box-shadow:4px 4px 0 var(--gold);padding:15px 16px 16px}
  .sd-skin .pet-kick{font-size:11px;font-weight:800;letter-spacing:2.2px;   text-transform:uppercase;color:var(--gold-lo)}
  .sd-skin .pet-frame{aspect-ratio:1;border:1.5px dashed var(--gold-lo);   border-radius:6px;background:var(--bone2);display:flex;align-items:center;   justify-content:center;margin:12px 0}
  .sd-skin .pet-frame-photo{border:1.5px solid var(--ink);overflow:hidden;display:block}
  .sd-skin .pet-frame img{width:100%;height:100%;object-fit:cover;display:block}
  .sd-skin .pet-line{font-family:var(--serif);font-weight:700;font-size:16px;   line-height:1.35;margin:0}
  .sd-skin .pet-sub{font-size:12.5px;line-height:1.55;color:var(--ink85);margin:8px 0 0}
  .sd-skin .pet-credit{font-size:10.5px;font-weight:700;letter-spacing:1.1px;   text-transform:uppercase;color:var(--ink60);margin:10px 0 0}
  .sd-skin .pet-frame-photo{aspect-ratio:auto}
  .sd-skin .pet-frame-photo img{height:auto}
  .sd-skin .pet-link{display:block;text-decoration:none;color:inherit}
  .sd-skin .pet-link:hover .pet-line{text-decoration:underline;   text-underline-offset:3px}
  .sd-skin{display:block;position:fixed;top:0;bottom:0;width:300px;
    z-index:40;overflow:hidden}
  .sd-skin-l{left:0;border-right:1px solid var(--gold-lo)}
  .sd-skin-r{right:0;border-left:1px solid var(--gold-lo);
    background:var(--bone2)}
  .sd-skin-l{background:#070708}
  .sd-skin-art{position:absolute;top:var(--bartop,52px);left:50%;
    transform:translateX(-50%);width:min(300px,calc((100vh - var(--bartop,52px))*0.3));max-width:100%;
    aspect-ratio:3/10;
    background:url(assets/house/skin-left-b.webp) center top/100% 100%
    no-repeat}
  .sd-hot{position:absolute;left:0;right:0;display:block}
  .sd-hot-re4rge{top:16.5%;height:8%}
  .sd-hot-atf{top:25%;height:16%}
  .sd-hot-cm{top:42.5%;height:10.5%}
  .sd-hot-jynx{top:53.5%;height:11.5%}
  .sd-hot-ss{top:66%;height:10%}
  .sd-hot-mint{top:76.5%;height:17.5%}
  .sd-skin-in{position:relative;height:100%;overflow:hidden;
    display:flex;flex-direction:column;align-items:stretch;
    padding:26px 22px;gap:14px}
  .sd-skin .house{background:transparent;border:none;
    box-shadow:none;padding:0}
  .sd-skin .house-seam{margin:0 0 10px}
  .sd-skin .house-line{font-size:16px}
  .sd-skin .house-logo{width:150px}
  .sd-skin .house-ss .house-logo{width:72%}
  .sd-skin .house-jynx{height:40px}
  .sd-skin .house-atf-logo{height:54px;width:54px}
  .sd-skin .house-cm-logo{width:170px}
  .sd-skin .house-usa{font-size:12.5px}
  .sd-skin .tease{padding:14px}
  .sd-skin .tease-copy{font-size:13.5px;line-height:1.5}
  .sd-skin .cfu-rail{background:transparent;border:none;
    box-shadow:none;padding:0}
  .sd-skin-r .sd-skin-in{padding:calc(var(--bartop,52px) - 45px) 0 0}
  .sd-skin-r .pet{border:none;box-shadow:none;background:transparent;
    border-radius:0;padding:20px 20px 16px;margin:0}
  .sd-skin-r .pet-frame{width:100%;height:auto;margin:12px 0}
  .sd-skin-r .pet-kick{font-size:11px}
  .sd-skin-r .pet-line{font-family:var(--serif);font-size:19px;
    line-height:1.3}
  .sd-skin-r .pet-sub{font-size:12.5px;line-height:1.55}
  .site-ticker{position:relative;z-index:60}
  /* — sleeve caps: each family's own wrapper, same channel — */
  .lf-wrap{max-width:min(1360px,calc(100vw - 660px))}
  .sheet{max-width:min(1180px,calc(100vw - 660px))}
  .gx-top,.gx-wrap,.gx-foot{max-width:min(920px,calc(100vw - 660px))}
  .gp-head,.gp-main{max-width:min(780px,calc(100vw - 660px))}
  .gp-head.gp-wide,.gp-main.gp-wide{max-width:min(920px,calc(100vw - 660px))}
  .mh-desk-in{max-width:min(1460px,calc(100vw - 660px))}
}
@media (min-width:1500px) and (max-height:840px){
  .sd-skin-in{gap:10px;padding:18px 20px}
  .sd-skin .house-logo{width:128px}
  .sd-skin .house-cm-logo{width:150px}
  .sd-skin .tease-copy{font-size:12.5px;line-height:1.45}
  .sd-skin-r .pet-frame{height:auto}
}