/*  Sexy Domination blog skin
    Applies the approved light layout on top of GeneratePress + the freelancer child.
    Fonts are SELF HOSTED next to this file, nothing is fetched from Google at runtime,
    per the standing rule about never depending on an outside service for static assets.
    Everything here is additive CSS. Removing the mu-plugin removes the skin entirely. */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:600;font-display:swap;src:url('fonts/playfairdisplay-600-italic.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/playfairdisplay-700.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/playfairdisplay-800.woff2') format('woff2')}

:root{
  --sd-bg:#F4EFF1; --sd-card:#ffffff; --sd-line:#ece2e6; --sd-ink:#241d21; --sd-head:#14000C;
  --sd-muted:#7c6c74; --sd-red:#E60912; --sd-red-dk:#C00711; --sd-plum:#12000C;
  --sd-serif:'Playfair Display',Georgia,serif; --sd-sans:Inter,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}

/* ---------- page shell ---------- */
body.sd-skin{background:var(--sd-bg)!important;font-family:var(--sd-sans);color:var(--sd-ink)}
body.sd-skin .site-content{max-width:1180px;margin:0 auto;padding:22px 20px 40px;
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;align-items:start}
body.sd-skin .content-area,body.sd-skin #primary{width:100%!important;max-width:none!important;
  float:none!important;padding:0!important;margin:0!important}
@media(max-width:900px){body.sd-skin .site-content{grid-template-columns:1fr}}

/* ---------- header and nav ---------- */
body.sd-skin .site-header{background:transparent!important;border:0!important;padding:0!important}
body.sd-skin .main-navigation{background:#fff!important;border-bottom:1px solid #e6dade!important;
  box-shadow:none!important;margin:0 0 6px}
body.sd-skin .main-navigation .main-nav ul li a{color:#5a4a51!important;font-weight:600;font-size:14.5px;
  font-family:var(--sd-sans);letter-spacing:.01em}
body.sd-skin .main-navigation .main-nav ul li:hover>a,
body.sd-skin .main-navigation .main-nav ul li.current-menu-item>a{background:var(--sd-red)!important;color:#fff!important}
body.sd-skin .top-bar{background:var(--sd-plum)!important;color:#d8c6cf!important;font-size:13px}
body.sd-skin .top-bar a{color:#fff!important}

/* ---------- the article card ---------- */
body.sd-skin .inside-article{background:var(--sd-card);border:1px solid var(--sd-line);
  border-radius:16px;padding:34px 38px;box-shadow:0 2px 14px rgba(30,0,18,.05)}
@media(max-width:600px){body.sd-skin .inside-article{padding:22px 18px;border-radius:12px}}
body.sd-skin article.post,body.sd-skin .site-main>article{background:transparent;border:0;margin:0 0 24px}

body.sd-skin .entry-title,body.sd-skin h1.entry-title{font-family:var(--sd-serif)!important;
  font-weight:800!important;font-size:clamp(28px,3.6vw,42px)!important;line-height:1.13!important;
  color:var(--sd-head)!important;letter-spacing:-.01em;margin:0 0 14px!important}
body.sd-skin .entry-title a{color:var(--sd-head)!important;text-decoration:none}
body.sd-skin .entry-title a:hover{color:var(--sd-red-dk)!important}

body.sd-skin .entry-meta{font-size:13px!important;color:var(--sd-muted)!important;
  padding:0 0 18px;border-bottom:1px solid #efe6ea;margin:0 0 20px!important}
body.sd-skin .entry-meta a{color:var(--sd-muted)!important;text-decoration:none}

/* ---------- article body ---------- */
body.sd-skin .entry-content{font-size:16.5px;line-height:1.78;color:var(--sd-ink)}
body.sd-skin .entry-content p{margin:0 0 17px;font-size:16.5px;line-height:1.78}
body.sd-skin .entry-content h2{font-family:var(--sd-serif);font-size:26px;line-height:1.25;
  font-weight:700;color:var(--sd-head);margin:30px 0 12px}
body.sd-skin .entry-content h3{font-family:var(--sd-serif);font-size:21px;font-weight:700;
  color:var(--sd-head);margin:26px 0 10px}
body.sd-skin .entry-content a{color:var(--sd-red-dk);font-weight:600}
/* The old posts open with a full width photo that pushed every word below the fold. */
body.sd-skin .entry-content img,body.sd-skin .post-image img{max-width:100%;height:auto;
  border-radius:10px;max-height:460px;width:auto;display:block;margin:0 auto 18px}

/* ---------- category pills ---------- */
body.sd-skin .sd-tags{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 12px}
body.sd-skin .sd-tags a{font:700 11px/1 var(--sd-sans);letter-spacing:.09em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;background:#fdeaec;color:#B0060F;text-decoration:none}
body.sd-skin .sd-tags a:hover{background:var(--sd-red);color:#fff}

/* ---------- the call box inside the article ---------- */
body.sd-skin .sd-cta{background:linear-gradient(135deg,#1C0012,#2C0019);border:1px solid #3a0022;
  border-radius:14px;padding:24px 26px;margin:28px 0}
body.sd-skin .sd-cta h3{font-family:var(--sd-serif);font-style:italic;font-size:23px;font-weight:600;
  color:#fff;margin:0 0 8px}
body.sd-skin .sd-cta p{font-size:15px;line-height:1.6;color:#d9c8d1;margin:0 0 16px}
body.sd-skin .sd-btn{display:inline-block;text-decoration:none;font:700 15px var(--sd-sans);
  padding:13px 22px;border-radius:999px;margin:0 8px 8px 0;background:var(--sd-red);color:#fff!important}
body.sd-skin .sd-btn:hover{background:#ff1a24;color:#fff!important}
body.sd-skin .sd-btn.ghost{background:#fff;color:var(--sd-head)!important;border:1px solid #d9cbd2}
body.sd-skin .sd-btn.ghost:hover{background:#f7f0f3;color:var(--sd-head)!important}

/* ---------- sidebar ---------- */
body.sd-skin .sd-side .sd-box{background:#fff;border:1px solid var(--sd-line);border-radius:14px;
  padding:18px 20px;margin:0 0 16px}
body.sd-skin .sd-side h4{font:700 12px var(--sd-sans);letter-spacing:.14em;text-transform:uppercase;
  color:#8a7a82;margin:0 0 13px}
body.sd-skin .sd-side .sd-dom{display:block;text-decoration:none;padding:11px 0;border-bottom:1px solid #f2eaee}
body.sd-skin .sd-side .sd-dom:last-child{border-bottom:0}
body.sd-skin .sd-side .sd-dom .n{font:700 15.5px var(--sd-sans);color:var(--sd-head);display:block;margin:0 0 2px}
body.sd-skin .sd-side .sd-dom .l{font:400 13.5px/1.45 var(--sd-sans);font-style:italic;color:var(--sd-muted);display:block}
body.sd-skin .sd-side .sd-dom:hover .n{color:var(--sd-red-dk)}
body.sd-skin .sd-side .sd-row{display:block;padding:9px 0;font-size:15px;font-weight:600;
  color:var(--sd-ink);text-decoration:none;border-bottom:1px solid #f2eaee}
body.sd-skin .sd-side .sd-row:last-child{border-bottom:0}
body.sd-skin .sd-side .sd-row:hover{color:var(--sd-red-dk)}
body.sd-skin .sd-side .sd-box.dark{background:linear-gradient(135deg,#1C0012,#2C0019);border-color:#3a0022}
body.sd-skin .sd-side .sd-box.dark h4{color:#e79aa8}
body.sd-skin .sd-side .sd-box.dark p{font-size:14.5px;line-height:1.6;color:#d9c8d1;margin:0 0 14px}
@media(max-width:900px){body.sd-skin .sd-side{margin-top:8px}}

/* ---------- footer ---------- */
body.sd-skin .site-footer,body.sd-skin .site-info{background:#fff!important;color:var(--sd-muted)!important;
  border-top:1px solid #e6dade;font-size:13px}
body.sd-skin .site-footer a{color:var(--sd-red-dk)!important}

/* ---------- archive and index listings ---------- */
body.sd-skin .blog .inside-article,body.sd-skin .archive .inside-article{padding:26px 30px}
body.sd-skin .blog .entry-title,body.sd-skin .archive .entry-title{font-size:clamp(22px,2.4vw,29px)!important}
body.sd-skin .paging-navigation,body.sd-skin .nav-links{font-family:var(--sd-sans);font-weight:600}

/* ---------- normalising the 2017 editor habits in the old posts ----------
   Many posts were written with the whole opening paragraph centred and wrapped in
   <strong>, which fights the layout and reads as shouting. Left-aligning and
   normalising weight is a display fix only; the post content is not edited. */
body.sd-skin .entry-content p[style*="center"],
body.sd-skin .entry-content p[align="center"]{text-align:left!important}
body.sd-skin .entry-content p>strong:only-child{font-weight:400}
body.sd-skin .entry-content p>b:only-child{font-weight:400}
/* Stray inline font sizes and colours from the old editor. */
body.sd-skin .entry-content span[style*="font-size"]{font-size:inherit!important}
body.sd-skin .entry-content font{font-size:inherit!important;font-family:inherit!important}

/* The header banner is a fixed 930px graphic; centre it and let it breathe. */
body.sd-skin .site-header .header-image,
body.sd-skin .site-header img{display:block;margin:0 auto;max-width:100%;height:auto}
body.sd-skin .inside-header{padding:14px 20px!important}

/* Featured image at the top of a post: centre it and cap it so it never
   swallows the fold the way the old flogger photo did. */
body.sd-skin .post-image,body.sd-skin .featured-image{text-align:center;margin:0 0 20px}
body.sd-skin .post-image img{max-height:380px;width:auto;border-radius:10px}

/* The body text was rendering heavy. It is NOT bold in the post markup, there is no
   <strong> anywhere; the freelancer child theme sets its own weights and my rules never
   declared one, so the paragraphs inherited it. Setting it explicitly. */
body.sd-skin .entry-content,
body.sd-skin .entry-content p,
body.sd-skin .entry-content li{font-weight:400!important}
body.sd-skin .entry-content strong,
body.sd-skin .entry-content b{font-weight:700!important}
body.sd-skin .entry-content h2,
body.sd-skin .entry-content h3{font-weight:700!important}
body.sd-skin .entry-title{font-weight:800!important}

/* ============================================================================
   HEADER REPLACED, NOT RESTYLED.
   The old theme header is a fixed 930px banner graphic plus a full width
   GeneratePress nav. Restyling it could never match the approved design, so both
   are removed and the skin prints its own header instead.
   ============================================================================ */
body.sd-skin .site-header,
body.sd-skin .main-navigation,
body.sd-skin .top-bar,
body.sd-skin #site-navigation,
body.sd-skin .header-image,
body.sd-skin .site-branding,
body.sd-skin .site-logo{display:none!important}

body.sd-skin .sd-top{background:var(--sd-plum);color:#d8c6cf;font:400 13px/1.5 var(--sd-sans);
  padding:11px 20px;text-align:center;letter-spacing:.01em}
body.sd-skin .sd-top b{color:#fff;font-weight:700}
body.sd-skin .sd-top a{color:#fff;font-weight:700;text-decoration:none}
body.sd-skin .sd-top a:hover{color:#ff8f95}
body.sd-skin .sd-dot{opacity:.45;margin:0 6px}

body.sd-skin .sd-head{background:#fff;border-bottom:1px solid #e6dade}
body.sd-skin .sd-head-in{max-width:1180px;margin:0 auto;padding:13px 20px;display:flex;
  align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
body.sd-skin .sd-brand{font-family:var(--sd-serif);font-size:23px;font-weight:800;
  color:var(--sd-plum);text-decoration:none;margin-right:14px;letter-spacing:-.01em}
body.sd-skin .sd-brand span{color:var(--sd-red)}
body.sd-skin .sd-nav{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
body.sd-skin .sd-nav a{font:600 14.5px var(--sd-sans);color:#5a4a51;text-decoration:none;
  padding:8px 13px;border-radius:8px}
body.sd-skin .sd-nav a:hover{background:#f6eef1;color:var(--sd-head)}
body.sd-skin .sd-nav a.on{background:var(--sd-red);color:#fff}
@media(max-width:600px){
  body.sd-skin .sd-head-in{padding:11px 14px;gap:6px}
  body.sd-skin .sd-brand{font-size:20px;margin-right:0;width:100%;text-align:center}
  body.sd-skin .sd-nav a{font-size:13.5px;padding:7px 10px}
  body.sd-skin .sd-top{font-size:12px;padding:9px 14px}
}

/* ---------- headline first, exactly as in the approved mockup ----------
   GeneratePress prints the featured image ABOVE the entry header, so the first thing
   in the card was a photo rather than the title. Flex ordering puts the header first
   without moving anything in the markup or touching a post. */
body.sd-skin .inside-article{display:flex;flex-direction:column}
body.sd-skin .inside-article>.entry-header{order:1}
body.sd-skin .inside-article>.post-image,
body.sd-skin .inside-article>.featured-image{order:2;margin:4px 0 22px}
body.sd-skin .inside-article>.entry-content{order:3}
body.sd-skin .inside-article>.entry-summary{order:3}
body.sd-skin .inside-article>footer,
body.sd-skin .inside-article>.entry-meta{order:4}
/* The lead photo now sits under the headline, so give it real presence. */
body.sd-skin .inside-article>.post-image img{max-height:none;width:100%;max-width:100%;
  border-radius:12px;object-fit:cover}

/* ---------- the blog index as a LIST you click into ---------- */
body.sd-skin .sd-excerpt{font-size:16px!important;line-height:1.7!important;color:#4d3f46!important;
  margin:0 0 16px!important;font-weight:400!important}
body.sd-skin a.sd-more{display:inline-block;font:700 14px var(--sd-sans);text-decoration:none;
  color:var(--sd-red-dk)!important;border:1px solid #e3d3d8;border-radius:999px;padding:10px 20px;background:#fff}
body.sd-skin a.sd-more:hover{background:var(--sd-red);color:#fff!important;border-color:var(--sd-red)}
/* Listing cards sit tighter than a full article and their titles are smaller. */
body.sd-skin:not(.single) .inside-article{padding:26px 30px;margin:0 0 18px}
body.sd-skin:not(.single) .entry-title{font-size:clamp(21px,2.3vw,28px)!important;margin:0 0 10px!important}
body.sd-skin:not(.single) .entry-meta{padding:0 0 14px;margin:0 0 16px!important}
/* Listing thumbnails: a band across the top of the card, not a giant portrait. */
body.sd-skin:not(.single) .inside-article>.post-image img{width:100%;height:210px;object-fit:cover;
  border-radius:10px;margin:0 0 4px}
@media(max-width:600px){body.sd-skin:not(.single) .inside-article>.post-image img{height:160px}}

/* ---------- pagination ---------- */
body.sd-skin .paging-navigation,body.sd-skin .nav-links{display:flex;gap:8px;flex-wrap:wrap;
  justify-content:center;margin:22px 0 10px}
body.sd-skin .nav-links .page-numbers{display:inline-block;font:700 15px var(--sd-sans);
  padding:11px 17px;border-radius:999px;background:#fff;border:1px solid #e3d3d8;
  color:var(--sd-head);text-decoration:none}
body.sd-skin .nav-links .page-numbers:hover{background:#f6eef1}
body.sd-skin .nav-links .page-numbers.current{background:var(--sd-red);color:#fff;border-color:var(--sd-red)}
body.sd-skin .nav-links .page-numbers.dots{background:transparent;border:0}

/* On the listing, the footer prints every category AND every tag, which on these posts
   is 20+ links per card and swamps the excerpt. Hidden on listings only; the tags stay
   on the single post where they are useful, and nothing is deleted from the posts. */
body.sd-skin:not(.single) .entry-meta .cat-links,
body.sd-skin:not(.single) .entry-meta .tags-links,
body.sd-skin:not(.single) footer.entry-meta{display:none!important}
body.sd-skin:not(.single) .inside-article>footer{display:none!important}
/* Read link sits at the foot of the card with room around it. */
body.sd-skin a.sd-more{margin:4px 0 2px}

/* ---------- wider page ----------
   GeneratePress caps its container at 900px in the theme settings; these override that
   so the layout uses the screen. Sidebar widens a little with it so the proportions
   hold rather than the article just stretching. */
body.sd-skin .site-content{max-width:1440px!important;grid-template-columns:minmax(0,1fr) 350px!important;gap:30px!important}
body.sd-skin .sd-head-in{max-width:1440px!important}
body.sd-skin .grid-container,body.sd-skin .site-content .container,
body.sd-skin .inside-article,body.sd-skin .content-area{max-width:none!important}
body.sd-skin .single .inside-article{padding:40px 52px}
body.sd-skin:not(.single) .inside-article{padding:30px 36px}
@media(max-width:1100px){
  body.sd-skin .site-content{grid-template-columns:minmax(0,1fr) 310px!important;gap:22px!important}
}
@media(max-width:900px){
  body.sd-skin .site-content{grid-template-columns:1fr!important}
}
@media(max-width:600px){
  body.sd-skin .single .inside-article{padding:22px 18px}
  body.sd-skin:not(.single) .inside-article{padding:20px 16px}
}

/* 15 percent narrower than the last pass: 1440 -> 1224. */
body.sd-skin .site-content{max-width:1224px!important;grid-template-columns:minmax(0,1fr) 330px!important}
body.sd-skin .sd-head-in{max-width:1224px!important}
body.sd-skin .single .inside-article{padding:36px 44px}
@media(max-width:600px){body.sd-skin .single .inside-article{padding:22px 18px}}

/* ============================================================================
   DARK PAGE BACKGROUND ONLY.
   The page background, which was #F4EFF1, goes black. The header strip, the white
   nav bar, the cards, the sidebar and the footer all stay exactly as they were in
   the light version. Only the surface behind the content changes.
   Delete this block to go back to the pink background.
   ============================================================================ */
body.sd-skin{background:#000!important}
/* The cards need a little lift so they do not sit flat on the black. */
body.sd-skin .inside-article{box-shadow:0 4px 34px rgba(230,9,18,.10)!important}
body.sd-skin .sd-side .sd-box{box-shadow:0 4px 24px rgba(230,9,18,.07)}

/* The body was already black but nothing showed, because GeneratePress paints its own
   #page .site wrapper white across the full height and covers it. Measured in the
   browser: #page.site.grid-container = rgb(255,255,255) at 1400x3730. */
body.sd-skin #page,
body.sd-skin .site,
body.sd-skin #content,
body.sd-skin .site-content,
body.sd-skin #primary,
body.sd-skin .content-area,
body.sd-skin .site-main,
body.sd-skin #main{background:transparent!important}

/* ============================================================================
   DEPTH ON THE LISTING CARDS.
   It read as a stock blog because every card was identical, flat, and had no
   label, no rhythm and no reaction to the cursor. Added: a crimson hairline
   across the top of each card, a category eyebrow, a read time, a real shadow,
   and a lift on hover.
   ============================================================================ */
body.sd-skin:not(.single) .inside-article{
  position:relative;overflow:hidden;
  box-shadow:0 10px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(230,9,18,.10)!important;
  border:0!important;border-radius:16px;
  transition:transform .18s ease, box-shadow .18s ease}
body.sd-skin:not(.single) .inside-article::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#E60912,#7d0007 55%,transparent)}
body.sd-skin:not(.single) .inside-article:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 44px rgba(0,0,0,.65), 0 0 0 1px rgba(230,9,18,.30)!important}

/* Category eyebrow above the headline. */
body.sd-skin .sd-eyebrow{font:700 11.5px var(--sd-sans)!important;letter-spacing:.16em!important;
  text-transform:uppercase;color:var(--sd-red-dk)!important;margin:0 0 9px!important}

/* Bigger, softer excerpt now that it runs to 75 words. */
body.sd-skin .sd-excerpt{font-size:16.5px!important;line-height:1.75!important;color:#3b3037!important}

/* Card foot: read link on the left, read time on the right. */
body.sd-skin .sd-cardfoot{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin:18px 0 0;padding-top:16px;border-top:1px solid #f1e8ec}
body.sd-skin .sd-read{font:600 13px var(--sd-sans);color:#9a8b92;letter-spacing:.03em}
body.sd-skin a.sd-more{margin:0}

/* Listing images: one consistent band, and a soft floor so cut-out shots on white
   do not float. The flogger photo is a transparent cut-out, which is why it looked
   like it was hanging in mid air. */
body.sd-skin:not(.single) .inside-article>.post-image{margin:0 0 20px;border-radius:12px;
  overflow:hidden;background:linear-gradient(180deg,#f7f2f4,#efe6ea)}
body.sd-skin:not(.single) .inside-article>.post-image img{width:100%;height:250px;object-fit:cover;
  border-radius:12px;margin:0;display:block;mix-blend-mode:multiply}
@media(max-width:600px){body.sd-skin:not(.single) .inside-article>.post-image img{height:180px}}

/* Titles get a touch more presence and a colour shift on hover. */
body.sd-skin:not(.single) .entry-title a{transition:color .15s ease}
body.sd-skin:not(.single) .inside-article:hover .entry-title a{color:var(--sd-red-dk)!important}
body.sd-skin:not(.single) .entry-meta{border-bottom:0;padding:0 0 4px;margin:0 0 16px!important}

/* ============================================================================
   FIXES AFTER LOOKING AT A REAL SINGLE POST.
   ============================================================================ */

/* 1. THE PADDING BUG. I wrote "body.sd-skin .single" with a SPACE, which is a
   descendant selector looking for .single INSIDE the body. WordPress puts .single ON
   the body, so it matched nothing and single posts had text running to the card edge.
   Verified against the real body classes: wp-singular ... single single-post postid-837 */
body.sd-skin.single .inside-article,
body.sd-skin.single-post .inside-article{padding:44px 56px!important}
@media(max-width:900px){body.sd-skin.single .inside-article{padding:30px 26px!important}}
@media(max-width:600px){body.sd-skin.single .inside-article{padding:24px 18px!important}}

/* 2. TWO LEAD IMAGES. The featured image was printing above a post whose content
   already opens with its own photo. On single posts the featured one goes; the
   listing still uses it. */
body.sd-skin.single .inside-article>.post-image,
body.sd-skin.single .inside-article>.featured-image{display:none!important}

/* 3. Pure black was too hard. Darkest grey instead. */
body.sd-skin{background:#141414!important}

/* 4. Give the article some air inside the shell as well as inside the card. */
body.sd-skin.single .site-content{padding:26px 20px 44px}
body.sd-skin.single .entry-content{max-width:74ch}
body.sd-skin.single .entry-content p{margin:0 0 19px}
body.sd-skin.single .entry-content h2{margin:34px 0 12px}

/* 5. The theme's own footer clutter under a post: related posts, share icons and the
   category and tag dump. Kept off the reading surface. */
body.sd-skin.single .entry-meta .cat-links,
body.sd-skin.single .entry-meta .tags-links{display:none!important}
body.sd-skin .sharedaddy,body.sd-skin .jp-relatedposts,body.sd-skin #jp-relatedposts{display:none!important}

/* ---------- THE LEAD IMAGE ----------
   Printed after the entry header, so it lands below the date and above the first line
   of the article. Fixed proportions on every post so the page reads the same from one
   post to the next: 85 percent of the article width, which is the 15 percent narrower
   than the call box, and 40 percent taller than the old 250px band, giving 1.92 to 1.
   The RATIO is fixed rather than the pixel height, so it holds that same shape all the
   way down to a phone instead of squashing.

   The order:2 is not optional. .inside-article is a flex column where the header is
   order 1 and the body is order 3; anything without an order defaults to 0 and would
   jump above the headline, which is the opposite of what was asked for. */
body.sd-skin.single .inside-article>figure.sd-hero{order:2}
body.sd-skin.single figure.sd-hero{width:85%;margin:22px auto 30px;padding:0;
  border-radius:14px;overflow:hidden;border:1px solid #3a0022;background:#0e0009;
  box-shadow:0 12px 34px rgba(0,0,0,.34)}
body.sd-skin.single figure.sd-hero img{display:block;width:100%;height:auto;
  aspect-ratio:1.92/1;object-fit:cover;border-radius:0;max-height:none;margin:0}
/* On a phone the article card is already narrow, so the inset just wastes width. */
@media(max-width:700px){
  body.sd-skin.single figure.sd-hero{width:100%;margin:18px auto 24px;border-radius:12px}
}

/* ---------- MOBILE STACK, and it has to be the LAST word in this file ----------
   The width rule further up sets the two column grid unconditionally with !important,
   and it sits AFTER the max-width:900px stacking rule, so it was winning at every
   size and the sidebar stayed jammed beside the article on a phone. Equal specificity
   plus equal !important means whichever comes last wins, so the stack must come last.
   Measured before this fix: a 500px viewport still computed the columns as
   108px 330px, which squeezed the article to about a hundred pixels wide. */
@media(max-width:900px){
  body.sd-skin .site-content{grid-template-columns:1fr!important;gap:18px!important;
    max-width:100%!important;padding-left:14px!important;padding-right:14px!important}
  body.sd-skin .sd-side{margin-top:8px}
}