/* ===========================================================================
   HGN editorial media + post types.
   One media frame, two post types, two King stacks, one batched stream.
   Geometry lives here and nowhere else — a genre skin may recolour these
   surfaces but may not redefine their dimensions.
   =========================================================================== */

/* ---- MediaFrame ---------------------------------------------------------- */
.mh-mf{position:relative;display:block;margin:0;width:100%;overflow:hidden;border-radius:14px;background:var(--mh-mf-ground,linear-gradient(168deg,#2B153D 0%,#1A0E24 62%,#140A1E 100%));isolation:isolate}
.mh-mf__pic{display:block;width:100%;height:100%}
.mh-mf__img{display:block;width:100%;height:100%}
.mh-mf--cover .mh-mf__img{object-fit:cover}
/* Inset presentation: the photo sits inside the approved MusicHaven field, with
   a deliberate gold hairline — never a blur-fill or a detached white card. */
.mh-mf--contain{padding:clamp(10px,2.2%,20px);background:var(--mh-mf-ground,radial-gradient(120% 130% at 78% -10%,rgba(228,200,120,.22),transparent 58%),linear-gradient(168deg,#2B153D 0%,#1A0E24 62%,#140A1E 100%));box-shadow:inset 0 0 0 1px rgba(228,200,120,.28)}
.mh-mf--contain .mh-mf__pic{display:grid;place-items:center}
.mh-mf--contain .mh-mf__img{object-fit:contain;border-radius:8px;box-shadow:0 10px 26px rgba(10,4,16,.45)}
.mh-mf__credit,.mh-mf__caption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:16px 12px 7px;font-size:.66rem;font-weight:700;letter-spacing:.04em;color:rgba(243,236,224,.9);background:linear-gradient(0deg,rgba(16,8,24,.82),rgba(16,8,24,0));pointer-events:none}
.mh-mf__caption{position:static;padding:8px 2px 0;color:var(--mh-text-muted);background:none;font-weight:600;font-size:.74rem;line-height:1.45}
.mh-mf__fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;height:100%;padding:16px;text-align:center;color:var(--mh-text-on-dark-soft)}
.mh-mf__fallbackglyph{font-family:var(--mh-serif);font-size:2rem;color:var(--mh-link-on-dark)}
.mh-mf__fallbacktext{font-size:.78rem;line-height:1.45;max-width:34ch}

/* ---- Approved card silhouettes, art-directed media well ------------------
   The Regular card is the shipped mh-card story silhouette and the Flip card is
   the shipped mh-flipcard — neither is redesigned here. These rules only let the
   shared MediaFrame fill the media well those cards already define, and dress
   the two elements the article flow adds (the back summary and its CTA). */
.mh-card__media .mh-mf,.mh-flipcard__artlink .mh-mf{width:100%;height:100%;border-radius:0;background:none}
.mh-card__media .mh-mf__pic,.mh-flipcard__artlink .mh-mf__pic{width:100%;height:100%}
.mh-flipcard__artlink{display:block;width:100%;height:100%;text-decoration:none}
.mh-flipcard__artlink:hover .mh-mf__img{transform:scale(1.05)}
.mh-card__media .mh-mf__img,.mh-flipcard__artlink .mh-mf__img{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.mh-card__media .mh-mf--contain,.mh-flipcard__artlink .mh-mf--contain{padding:clamp(8px,3%,16px);background:var(--mh-mf-ground,radial-gradient(120% 130% at 78% -10%,rgba(228,200,120,.22),transparent 58%),linear-gradient(168deg,#2B153D 0%,#1A0E24 62%,#140A1E 100%))}
.mh-flipcard__title a{color:inherit;text-decoration:none}
.mh-flipcard__title a:hover{text-decoration:underline}
.mh-flipcard__summary{margin:0;font-size:.88rem;line-height:1.55;color:var(--sk-text,var(--mh-ink));text-wrap:pretty}
/* Back-face player region. Mounted only while the back face is visible, so the
   hidden face never keeps an invisible duplicate player alive. Fixed height —
   the provider's natural ratio must never resize the approved card. */
.mh-flipcard__media{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;min-height:0}
.mh-flipcard__media iframe{display:block;width:100%;height:80px;border:0;border-radius:10px;background:#120A18}
.mh-flipcard__media[data-media-type="youtube"] iframe,.mh-flipcard__media[data-media-type="video"] iframe{height:132px}
.mh-flipcard__medialink{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;min-height:44px;padding:9px 14px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--sk-accent,var(--mh-gold)) 52%,transparent);background:color-mix(in srgb,var(--sk-accent,var(--mh-gold)) 12%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.55);font-size:.76rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--sk-text,var(--mh-ink));text-decoration:none}
.mh-flipcard__medialink:hover{background:color-mix(in srgb,var(--sk-accent,var(--mh-gold)) 22%,transparent)}
.mh-flipcard__medialink:focus-visible{outline:3px solid var(--sk-accent,var(--mh-gold));outline-offset:2px}
.mh-flipcard__flips{flex-wrap:wrap;gap:10px}
.mh-flipcard__read{padding:11px 27px;font-size:1.26rem;font-weight:900;min-height:66px;text-transform:uppercase;white-space:nowrap;max-inline-size:100%;display:inline-flex;align-items:center;justify-content:center}
/* Photo-led flip cards: the art well absorbs the card's free height so the front
   never shows a blank field between the excerpt and the Flip control. */
.mh-flipcard{--mh-fc-media:52%}
.mh-flipcard__face:has(.mh-flipcard__artlink) .mh-flipcard__art{flex:0 0 var(--mh-fc-media);height:var(--mh-fc-media);aspect-ratio:auto;min-height:0}
.mh-flipcard__face:has(.mh-flipcard__artlink) .mh-flipcard__body{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain}
/* Back face: photo strip up top (linked, never scrolls); the excerpt absorbs the
   slack; Read The Full Story ↗ and Return To Front ↻ share one dedicated action
   area at the bottom. No detached button, no blank cavity, no text collision. */
/* The photograph absorbs the back face's free height, so the slack is filled by
   the approved image instead of a cream cavity. Its minimum keeps the crop
   honest; the excerpt and the action area keep their own space. */
.mh-flipcard__face--back:has(.mh-flipcard__backart){padding:0}
.mh-flipcard__face--back:has(.mh-flipcard__backart) > *:not(.mh-flipcard__backart){margin-inline:16px}
.mh-flipcard__face--back:has(.mh-flipcard__backart) > *:last-child{margin-bottom:16px}
.mh-flipcard__face--back > .mh-flipcard__artlink.mh-flipcard__backart{flex:0 0 var(--mh-fc-media);height:var(--mh-fc-media);min-height:0;aspect-ratio:auto;overflow:hidden;border-radius:10px 10px 0 0}
.mh-flipcard__face--back .mh-flipcard__summary{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.mh-flipcard__face--back .mh-flipcard__backart .mh-mf,.mh-flipcard__face--back .mh-flipcard__backart .mh-mf__pic,.mh-flipcard__face--back .mh-flipcard__backart .mh-mf__img{height:100%;width:100%;object-fit:cover}
.mh-flipcard__face--back .mh-flipcard__read{margin-top:0;flex:0 0 auto;overflow:visible;align-self:stretch;justify-content:center}

/* ---- King stacks --------------------------------------------------------- */
.mh-king{margin:0 0 28px}
.mh-king__head{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.mh-king__title{margin:0;font-family:var(--mh-serif);font-weight:900;font-size:clamp(1.3rem,3vw,1.8rem);line-height:1.1;color:var(--mh-text-primary)}
.mh-king__deck{margin:0;font-size:.9rem;line-height:1.5;color:var(--mh-text-secondary);max-width:62ch}
.mh-king__mode{margin:0;font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--mh-text-muted)}
.mh-king__notice{margin:6px 0 0;padding:9px 13px;border-radius:10px;font-size:.8rem;line-height:1.5;color:#7A4E10;background:rgba(200,164,77,.16);border:1.5px solid rgba(200,164,77,.45)}
.mh-king__grid,.mh-stream__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:clamp(12px,1.8vw,20px);align-items:stretch}

/* ---- Stream -------------------------------------------------------------- */
.mh-stream{display:flex;flex-direction:column;gap:26px}
.mh-stream__blockhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:12px}
.mh-stream__blocktitle{margin:0;font-family:var(--mh-serif);font-weight:900;font-size:clamp(1.1rem,2.4vw,1.4rem);color:var(--mh-text-primary)}
.mh-stream__blockmeta{margin:0;font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--mh-text-muted)}
.mh-stream__foot{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:6px}
.mh-stream__progress{margin:0;font-size:.76rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mh-text-muted)}
.mh-stream__more{min-height:48px;padding:13px 30px;border-radius:var(--mh-radius-pill,999px);cursor:pointer;font:inherit;font-size:.92rem;font-weight:900;color:var(--mh-control-foreground);background:var(--mh-grad-gold,linear-gradient(180deg,#E4C878,#C8A44D));border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 16px rgba(200,164,77,.34)}
.mh-stream__more:hover{filter:brightness(1.05)}
.mh-stream__pager{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.mh-stream__pagebtn{min-width:44px;min-height:44px;padding:10px 15px;border-radius:var(--mh-radius-pill,999px);cursor:pointer;font:inherit;font-size:.84rem;font-weight:900;color:var(--mh-link);background:#FFF;border:2px solid rgba(107,63,160,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.mh-stream__pagebtn[aria-current="page"]{color:var(--mh-control-foreground);background:var(--mh-grad-gold,linear-gradient(180deg,#E4C878,#C8A44D));border-color:transparent}
.mh-stream__pagebtn:disabled{color:var(--mh-disabled-foreground);background:rgba(26,14,36,.04);border-style:dashed;cursor:not-allowed}

/* ---- Media Art Direction control ----------------------------------------- */
.mh-ad{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:18px;background:var(--mh-admin-background);color:var(--mh-admin-text-secondary)}
.mh-ad__title{margin:0;font-family:var(--mh-serif);font-weight:900;font-size:1.2rem;color:var(--mh-admin-text-primary)}
.mh-ad__hint{margin:4px 0 0;font-size:.84rem;line-height:1.5;color:var(--mh-admin-text-muted)}
.mh-ad__row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.mh-ad__label{font-size:.68rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase;color:var(--mh-admin-text-muted)}
.mh-ad__seg{display:flex;flex-wrap:wrap;gap:6px}
.mh-ad__segbtn{min-height:44px;padding:10px 16px;border-radius:var(--mh-radius-pill,999px);cursor:pointer;font:inherit;font-size:.8rem;font-weight:800;color:var(--mh-admin-control-foreground);background:var(--mh-admin-control-background);border:1.5px solid var(--mh-admin-border);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.mh-ad__segbtn[aria-pressed="true"]{color:var(--mh-control-foreground);background:var(--mh-grad-gold,linear-gradient(180deg,#E4C878,#C8A44D));border-color:transparent}
.mh-ad__pad{position:relative;width:100%;border-radius:12px;overflow:hidden;cursor:crosshair;border:1.5px solid var(--mh-admin-border)}
.mh-ad__padimg{display:block;width:100%;height:100%;object-fit:cover}
.mh-ad__safe{position:absolute;border:2px dashed var(--mh-admin-focus-ring);border-radius:6px;background:rgba(233,196,106,.1)}
.mh-ad__safelabel{position:absolute;left:0;top:-1px;transform:translateY(-100%);padding:2px 7px;border-radius:5px;font-size:.6rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#241505;background:var(--mh-admin-focus-ring);white-space:nowrap}
.mh-ad__dot{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:3px solid #FFF;background:rgba(233,196,106,.85);box-shadow:0 0 0 2px rgba(20,10,30,.7),0 4px 12px rgba(0,0,0,.5)}
.mh-ad__readout{margin:0;font-size:.78rem;font-variant-numeric:tabular-nums;color:var(--mh-admin-text-secondary)}
.mh-ad__readout b{color:var(--mh-admin-text-primary)}
.mh-ad__previews{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:12px}
.mh-ad__preview{display:flex;flex-direction:column;gap:6px;min-width:0}
.mh-ad__previewlabel{font-size:.64rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--mh-admin-text-muted)}
.mh-ad__verdict{margin:0;padding:10px 13px;border-radius:10px;font-size:.82rem;line-height:1.5;border:1.5px solid var(--mh-admin-border);background:var(--mh-admin-surface)}
.mh-ad__verdict.is-ok{color:var(--mh-admin-success);border-color:rgba(127,209,160,.5)}
.mh-ad__verdict.is-inset{color:var(--mh-admin-warning);border-color:rgba(242,193,78,.5)}

/* ---- Article landing page ------------------------------------------------ */
.mh-art{display:flex;flex-direction:column;gap:14px;max-width:820px;margin:0 auto;min-width:0}
.mh-art__breadcrumb{margin:0;font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mh-text-muted)}
.mh-art__breadcrumb a{color:var(--mh-link);text-decoration:none}
.mh-art__breadcrumb a:hover{text-decoration:underline}
.mh-art__head{display:flex;flex-direction:column;gap:8px}
.mh-art__kicker{margin:0;font-size:.7rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--mh-text-accent)}
.mh-art__title{margin:0;font-family:var(--mh-serif);font-weight:900;font-size:clamp(1.7rem,4.2vw,2.7rem);line-height:1.06;letter-spacing:-.02em;color:var(--mh-text-primary);text-wrap:balance}
.mh-art__dek{margin:0;font-family:var(--mh-serif);font-style:italic;font-size:clamp(1rem,2.1vw,1.2rem);line-height:1.5;color:var(--mh-text-secondary);text-wrap:pretty}
.mh-art__meta{margin:0;font-size:.74rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mh-text-muted)}
.mh-art__credit{margin:-4px 0 0;font-size:.72rem;font-weight:700;color:var(--mh-text-muted)}
.mh-art__body{display:flex;flex-direction:column;gap:14px}
.mh-art__body p{margin:0;font-size:1.02rem;line-height:1.68;color:var(--mh-text-secondary);text-wrap:pretty}
.mh-art__quote{margin:6px 0;padding:14px 20px;border-left:4px solid var(--mh-link-on-dark,#E4C878);font-family:var(--mh-serif);font-weight:900;font-size:1.2rem;line-height:1.35;color:var(--mh-text-primary);background:rgba(200,164,77,.12);border-radius:0 12px 12px 0}
.mh-art__tags{margin:4px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.mh-art__tag{display:inline-flex;align-items:center;min-height:36px;padding:8px 15px;border-radius:var(--mh-radius-pill,999px);font-size:.76rem;font-weight:900;text-decoration:none;color:var(--mh-link);background:#FFF;border:1.5px solid rgba(107,63,160,.28)}
.mh-art__tag:hover{background:rgba(107,63,160,.1);color:var(--mh-link)}
.mh-art__related{padding:16px 18px;border-radius:14px;background:#FFF;border:1.5px solid var(--mh-line,rgba(26,14,36,.1))}
.mh-art__relatedhead{margin:0 0 8px;font-family:var(--mh-serif);font-weight:900;font-size:1.05rem;color:var(--mh-text-primary)}
.mh-art__related ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:.92rem}
.mh-art__related a{color:var(--mh-link)}
.mh-art__origin{margin:0;font-size:.8rem;line-height:1.5;color:var(--mh-text-muted)}

/* ---- Jumbotron centre ---------------------------------------------------- */
.mh-jt{display:flex;flex-direction:column;gap:14px;max-width:1180px;margin:0 auto;min-width:0}
.mh-jt__frame{position:relative;padding:12px;border-radius:20px;background:linear-gradient(168deg,#2B153D,#140A1E);box-shadow:inset 0 0 0 1.5px rgba(228,200,120,.35),0 18px 40px rgba(20,10,30,.28)}
.mh-jt__label{margin:0 0 8px;font-size:.62rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:rgba(243,236,224,.62)}
.mh-jt__kv,.mh-ps__kv{display:grid;grid-template-columns:minmax(120px,auto) minmax(0,1fr);gap:7px 16px;margin:0;font-size:.86rem}
.mh-jt__kv dt,.mh-ps__kv dt{font-weight:900;letter-spacing:.05em;text-transform:uppercase;font-size:.68rem;color:var(--mh-text-muted);align-self:center}
.mh-jt__kv dd,.mh-ps__kv dd{margin:0;color:var(--mh-text-secondary);line-height:1.45}

/* ---- Photo-system page shell + HGN lane ---------------------------------- */
.mh-ps__page{display:flex;flex-direction:column;gap:8px;min-width:0}
.mh-ps__lane{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:18px;align-items:start;min-width:0}
.mh-ps__lanecol{display:flex;flex-direction:column;gap:16px;min-width:0}
.mh-ps__lanecard{padding:18px;border-radius:18px;background:var(--mh-admin-background);color:var(--mh-admin-text-secondary);display:flex;flex-direction:column;gap:12px}
.mh-ps__lanecard .mh-ps__kv dt{color:var(--mh-admin-text-muted)}
.mh-ps__lanecard .mh-ps__kv dd{color:var(--mh-admin-text-secondary)}
.mh-ps__lanetitle{margin:0;font-family:var(--mh-serif);font-weight:900;font-size:1.15rem;color:var(--mh-admin-text-primary)}
.mh-ps__mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem}
.mh-ps__field{display:flex;flex-direction:column;gap:6px;font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mh-admin-text-muted)}
.mh-ps__textarea{width:100%;box-sizing:border-box;padding:11px 13px;border-radius:10px;font:inherit;font-size:.88rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--mh-admin-control-foreground);background:var(--mh-admin-control-background);border:1.5px solid var(--mh-admin-border);resize:vertical}
.mh-ps__log{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:5px;font-size:.78rem;color:var(--mh-admin-text-muted)}
.mh-ps__log b{color:var(--mh-admin-success)}
.mh-ps__lanepreview{display:flex;flex-direction:column;gap:6px}
.mh-ps__previewlabel{font-size:.64rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--mh-text-muted)}

/* ---- Mobile: single column, never a sideways rail ------------------------- */
@media (max-width:700px){
.mh-king__grid,.mh-stream__grid{grid-template-columns:minmax(0,1fr)}
.mh-flipcard__read{width:100%;justify-content:center}
.mh-ad__preview--narrow{max-width:320px}
}

@media (forced-colors:active){
.mh-mf{border:1px solid CanvasText}
.mh-flipcard__read,.mh-stream__more,.mh-stream__pagebtn[aria-current="page"],.mh-ad__segbtn[aria-pressed="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText;border:1px solid CanvasText}
.mh-ad__dot{background:Highlight;border:2px solid CanvasText}
}
.mh-stream :focus-visible,.mh-king :focus-visible{outline:3px solid var(--mh-focus-ring);outline-offset:3px;border-radius:8px}
.mh-ad :focus-visible{outline:3px solid var(--mh-admin-focus-ring);outline-offset:3px;border-radius:8px}