/* Single recipe page shell. Owns the layout the theme used to provide badly. */
body.scr-single{
  margin:0;background:var(--scr-page,#fff);color:var(--scr-ink,#333);font-family:var(--scr-font-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility
}
body.scr-single *{box-sizing:border-box}
body.scr-single img{max-width:100%;height:auto}

body.scr-single .scr-main{display:block;padding:0 0 60px}
.scr-article{display:block}
/* One shared measure so header, body and related all line up. */
body.scr-single .scr-shell{width:100%;max-width:760px;margin:0 auto;padding:0 20px}
.scr-shell-body{padding-top:4px}

body.scr-single .scr-crumbs{font-family:var(--scr-font-head);font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--scr-soft);padding:30px 0 0;display:flex;gap:8px;align-items:center}
body.scr-single .scr-crumbs a{color:var(--scr-soft);text-decoration:none}
body.scr-single .scr-crumbs a:hover{color:var(--scr-accent)}

body.scr-single .scr-title{font-family:var(--scr-font-head);font-weight:800;font-size:clamp(30px,5vw,46px);
  line-height:1.1;letter-spacing:-.015em;margin:14px 0 0;color:var(--scr-ink)}

body.scr-single .scr-byline{display:flex;align-items:center;gap:11px;margin:16px 0 22px;
  padding-bottom:20px;border-bottom:1px solid var(--scr-line)}
.scr-avatar img{width:44px;height:44px;border-radius:50%;display:block}
body.scr-single .scr-byline-text{font-family:var(--scr-font-head);font-size:13px;font-weight:600;color:var(--scr-soft)}
.scr-byline-text b{color:var(--scr-ink);font-weight:800}
.scr-byline-sep{margin:0 6px;opacity:.5}

/* The injected recipe body inherits the shell measure, so no nested max-width. */
body.scr-single .scr-post{max-width:none;margin:0}

/* Hero and gallery images break out slightly for presence, but never overflow. */
body.scr-single .scr-hero{margin:0 0 26px}
body.scr-single .scr-hero-img{width:100%;border-radius:var(--scr-radius);display:block;margin-inline:auto}
/* Landscape: full measure, cropped to a band so it never dominates the fold. */
body.scr-single .scr-hero-landscape .scr-hero-img{max-height:560px;object-fit:cover}
/* Portrait: narrower and uncropped — cropping a vertical shot to a band throws
   away most of the dish, and portrait is the norm for Instagram-first creators. */
body.scr-single .scr-hero-portrait{display:flex;justify-content:center}
body.scr-single .scr-hero-portrait .scr-hero-img{width:auto;max-width:min(100%,460px);
  max-height:640px;object-fit:contain}

.scr-related{margin:44px 0 0;padding-top:30px;border-top:1px solid var(--scr-line)}
body.scr-single .scr-related h2{font-family:var(--scr-font-head);font-weight:800;font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--scr-soft);margin:0 0 18px}
.scr-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
body.scr-single .scr-related-card{text-decoration:none;color:inherit;display:block}
.scr-related-card img,.scr-related-noimg{width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--scr-radius-sm);display:block;background:var(--scr-accent-tint);margin-bottom:9px}
body.scr-single .scr-related-card h3{font-family:var(--scr-font-head);font-weight:700;font-size:15px;line-height:1.35;margin:0}
body.scr-single .scr-related-card:hover h3{color:var(--scr-accent)}
body.scr-single .scr-related-meta{font-family:var(--scr-font-head);font-weight:600;font-size:11.5px;color:var(--scr-soft);margin:5px 0 0}

.scr-comments{margin-top:44px;padding-top:30px;border-top:1px solid var(--scr-line)}
.scr-comments h2,.scr-comments h3{font-family:var(--scr-font-head);font-weight:800}

@media(max-width:700px){
  body.scr-single .scr-shell{padding:0 16px}
  .scr-related-grid{grid-template-columns:1fr 1fr;gap:14px}
  .scr-related-grid > :nth-child(3){display:none}
  body.scr-single .scr-hero-landscape .scr-hero-img{border-radius:var(--scr-radius-sm);max-height:380px}
  body.scr-single .scr-hero-portrait .scr-hero-img{border-radius:var(--scr-radius-sm);max-height:480px}
}

/* ---------- header chrome band ----------
   Transparent by default, so a theme that sets no chrome colour renders exactly
   as before. When --scr-chrome is set the band becomes the dark strip and every
   colour inside it has to flip too — a breadcrumb in --scr-soft on charcoal is
   unreadable, so these override rather than inherit. Each selector carries
   body.scr-single .scr-topband (0,0,3,1) so it outranks the base rules above. */
body.scr-single .scr-topband{
  background:var(--scr-chrome,transparent);
  color:var(--scr-on-chrome,inherit);
  padding:var(--scr-chrome-pad,0);
  margin-bottom:var(--scr-chrome-gap,0)}
body.scr-single .scr-topband .scr-title{color:var(--scr-on-chrome,var(--scr-ink));
  text-transform:var(--scr-head-transform,none);
  letter-spacing:var(--scr-head-tracking,-.015em);
  font-weight:var(--scr-head-weight,800)}
body.scr-single .scr-topband .scr-crumbs,
body.scr-single .scr-topband .scr-crumbs a,
body.scr-single .scr-topband .scr-byline-text{color:var(--scr-on-chrome-soft,var(--scr-soft))}
body.scr-single .scr-topband .scr-crumbs a:hover{color:var(--scr-accent)}
/* --scr-chrome-line is only emitted when a band exists, so a bandless theme
   falls through to the original hairline and is untouched. */
body.scr-single .scr-topband .scr-byline{border-bottom-color:var(--scr-chrome-line,var(--scr-line))}