/* HGN PHOTO SYSTEM — RapHaven layer.
   Extends the approved RapHaven language (ink cards, red edge, Haven pill depth).
   No new palette: every colour resolves from rh.css tokens with the sampled fallbacks. */
.hgn{container-type:inline-size;container-name:hgn;--hgn-red:var(--hh-red,#E32219);--hgn-red2:#EE3A2E;--hgn-ink:var(--hh-ink,#0E1216);
 --hgn-mut:var(--hh-mut,#59636D);--hgn-line:var(--hh-line,#E3E7EB);--hgn-paper:#fff}
.hgn *{box-sizing:border-box}

/* ---------- media object: reserved box, brand backdrop perimeter, art-directed focal ---------- */
.hgn-media{position:relative;display:block;margin:0;overflow:hidden;border-radius:12px;
 background:
  radial-gradient(120% 120% at 12% 0%,rgba(238,58,46,.22),transparent 60%),
  repeating-linear-gradient(115deg,rgba(255,255,255,.03) 0 2px,transparent 2px 7px),
  linear-gradient(168deg,#1B1416 0%,#120E10 62%,#0B0809 100%);
 box-shadow:inset 0 0 0 1px rgba(217,42,32,.34),inset 0 1px 0 rgba(255,255,255,.09),0 10px 26px rgba(58,10,8,.16)}
.hgn-media::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
 box-shadow:inset 0 -46px 60px rgba(11,8,9,.5)}
.hgn-media__frame{position:relative;display:block;width:100%;aspect-ratio:var(--hgn-ar,16/9);
 padding:var(--hgn-perimeter,10px)}
.hgn-media img{display:block;width:100%;height:100%;border-radius:8px;
 object-fit:var(--hgn-fit,cover);object-position:var(--hgn-fx,50%) var(--hgn-fy,50%)}
.hgn-media[data-fit="contain"] img{object-fit:contain;filter:drop-shadow(0 12px 24px rgba(0,0,0,.45))}
@container hgn (max-width:699px){.hgn-media img{object-position:var(--hgn-fx-m,var(--hgn-fx,50%)) var(--hgn-fy-m,var(--hgn-fy,50%))}}
.hgn-media__fallback{position:absolute;inset:var(--hgn-perimeter,10px);display:none;
 flex-direction:column;justify-content:flex-end;gap:4px;padding:14px;border-radius:8px;
 background:linear-gradient(180deg,#241A1B,#140E0F);color:#F7E9E7;font-size:13px;line-height:1.35}
.hgn-media.is-failed .hgn-media__fallback{display:flex}
.hgn-media.is-failed img{visibility:hidden}
.hgn-media__fallback b{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#F7A69F}
.hgn-credit{margin:6px 0 0;font-size:11.5px;color:var(--hgn-mut);line-height:1.4}
.hgn-credit b{color:var(--hgn-ink);font-weight:800}

/* ---------- shared card chrome ---------- */
.hgn-card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--hgn-paper);
 border:1.5px solid rgba(217,42,32,.3);border-radius:14px;padding:12px 12px 14.5px;
 box-shadow:0 14px 30px rgba(58,10,8,.09),0 3px 0 rgba(154,28,19,.18)}
.hgn-cats{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 6px}
.hgn-cats a{font-size:10.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
 color:var(--hgn-red);text-decoration:none}
.hgn-cats a:hover{text-decoration:underline}
.hgn-h{margin:0;font-size:20px;line-height:1.18;font-weight:900;letter-spacing:-.01em;text-wrap:pretty}
.hgn-h a{color:var(--hgn-ink);text-decoration:none}
.hgn-h a:hover{color:var(--hgn-red)}
.hgn-x{margin:12px 0 0;font-size:14.5px;line-height:1.5;color:#2A333B;text-wrap:pretty}
.hgn-meta{margin:12px 0 0;font-size:12px;font-weight:700;color:var(--hgn-mut)}
.hgn-qaflag{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;
 background:#FFE9B8;color:#5C4400;font-size:9.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
/* SPACING LEDGER: no flexible space between copy and action — see rh.css for the cause note. */
.hgn-card__foot{margin-top:16px;padding-top:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hgn-open{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;border-radius:999px;
 border:0;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 42%),var(--hgn-red);
 color:#fff;font-size:13px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
 box-shadow:0 3px 0 #9A1C13,0 10px 20px rgba(217,42,32,.26),inset 0 1px 0 rgba(255,255,255,.35);
 transition:transform .15s ease,filter .15s ease}
.hgn-open:hover{transform:translateY(-2px);filter:brightness(1.05);color:#fff;text-decoration:none}
.hgn-open:active{transform:translateY(1px)}

/* ---------- flip card (approved physics: explicit control, no hover flip) ---------- */
.hgn-flip{perspective:1600px;min-width:0}
.hgn-flip__inner{position:relative;display:grid;transform-style:preserve-3d;
 transition:transform 560ms cubic-bezier(.22,.75,.24,1)}
.hgn-flip.is-flipped .hgn-flip__inner{transform:rotateY(180deg)}
.hgn-flip__face{grid-area:1/1;min-width:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* the front drives the card's height; the back matches that exact box and scrolls its own copy */
.hgn-flip__back{position:absolute;inset:0;overflow:auto}
.hgn-flip__back{transform:rotateY(180deg);background:linear-gradient(170deg,#17171B,#0E0E11 62%);
 border-color:rgba(238,58,46,.5);color:#FBF2F0}
.hgn-flip__back .hgn-h{color:#fff}
.hgn-flip__back .hgn-x{color:rgba(245,228,225,.82)}
.hgn-flip__back .hgn-meta{color:rgba(240,216,211,.6)}
.hgn-flip__back .hgn-cats a{color:#F7A69F}
.hgn-flip.is-settled .hgn-flip__front{display:none}
.hgn-flip.is-settled .hgn-flip__inner{transform:none}
.hgn-flip.is-settled .hgn-flip__back{transform:none}
.hgn-flipbtn{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:10px;
 width:100%;min-height:58px;padding:8px 14px;cursor:pointer;
 border:2.5px solid var(--hgn-red);background:#fff;
 color:#000;font-family:inherit;font-size:29px;font-weight:900;line-height:1.1;letter-spacing:.01em;
 transition:transform .15s ease}
.hgn-flipbtn:hover{transform:translateY(-2px)}
.hgn-flipbtn:active{transform:translateY(1px)}
.hgn-flip__back .hgn-flipbtn{background:transparent;color:#fff;border-color:#fff}
.hgn-flipbtn__u{color:#F65045;font-size:1.9em;line-height:1;font-weight:900;display:inline-flex;align-items:center}
.hgn u:focus-visible,.hgn :focus-visible{outline:3px solid var(--hgn-red2);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.hgn-flip__inner{transition:none!important}}
.hgn.is-rm .hgn-flip__inner{transition:none!important}

/* ---------- King stacks (stacks in the site language — never a rotating hero) ---------- */
.hgn-king{margin:0 0 30px}
.hgn-king__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin:0 0 12px}
.hgn-king__head h2{margin:0;font-size:clamp(19px,2.2vw,25px);font-weight:900;letter-spacing:.01em;text-transform:uppercase}
.hgn-king__note{margin:0;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hgn-mut)}
.hgn-king__grid{display:grid;gap:14px;grid-template-columns:1fr}
@container hgn (min-width:700px){.hgn-king__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* NO ROW STRETCH: grid items default to stretch, which pulled short cards to the tallest in the row */
.hgn-king__grid,.hgn-grid{align-items:start}
@container hgn (min-width:1000px){
 .hgn-king__grid[data-n="3"]{grid-template-columns:1.5fr 1fr 1fr}
 .hgn-king__grid[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
 .hgn-king__grid[data-n="5"],.hgn-king__grid[data-n="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
 .hgn-king__grid[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.hgn-king__grid[data-n="3"] > :first-child .hgn-h{font-size:clamp(22px,2.4vw,30px)}
.hgn-rank{position:absolute;top:-9px;left:14px;z-index:2;min-width:26px;height:26px;padding:0 8px;
 display:grid;place-items:center;border-radius:8px;background:var(--hgn-ink);color:#fff;
 font-size:12px;font-weight:900;box-shadow:0 3px 0 rgba(154,28,19,.5)}

/* ---------- stream ---------- */
.hgn-block{margin:0 0 30px}
.hgn-block__bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px;
 padding-bottom:8px;border-bottom:2px solid var(--hgn-ink)}
.hgn-block__bar h2{margin:0;font-size:15px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.hgn-block__bar span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hgn-mut)}
.hgn-grid{display:grid;gap:14px;grid-template-columns:1fr}
@container hgn (min-width:700px){.hgn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container hgn (min-width:1080px){.hgn-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hgn-more{display:flex;flex-direction:column;align-items:center;gap:8px;margin:22px 0 6px}
.hgn-more__btn{min-height:52px;padding:0 34px;border-radius:999px;border:0;cursor:pointer;font-family:inherit;
 background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 42%),var(--hgn-ink);
 color:#fff;font-size:15px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
 box-shadow:0 4px 0 #9A1C13,0 12px 26px rgba(14,18,22,.28),inset 0 1px 0 rgba(255,255,255,.28)}
.hgn-more__btn:hover{filter:brightness(1.08)}
.hgn-more__btn:active{transform:translateY(2px);box-shadow:0 2px 0 #9A1C13}
.hgn-more__count{margin:0;font-size:12px;font-weight:700;color:var(--hgn-mut)}
.hgn-pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:24px 0 8px}
.hgn-pager a,.hgn-pager span{min-width:44px;min-height:44px;padding:0 12px;display:inline-flex;
 align-items:center;justify-content:center;border-radius:10px;border:1.5px solid var(--hgn-line);
 font-size:14px;font-weight:900;text-decoration:none;color:var(--hgn-ink);background:#fff}
.hgn-pager a:hover{border-color:var(--hgn-red);color:var(--hgn-red)}
.hgn-pager .is-cur{background:var(--hgn-ink);border-color:var(--hgn-ink);color:#fff}
.hgn-pager .is-off{opacity:.4;pointer-events:none}

/* ---------- jumbotron image centre (same media object) ---------- */
.hgn-jumbo{position:relative;margin:0 0 30px;border-radius:16px;overflow:hidden;
 background:linear-gradient(180deg,#141114,#0B090B);border:1.5px solid rgba(217,42,32,.4);
 box-shadow:0 22px 50px rgba(10,4,4,.3),inset 0 1px 0 rgba(255,255,255,.1)}
.hgn-jumbo__rail{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:10px 16px;
 border-bottom:1px solid rgba(247,166,159,.18);color:#F7A69F;font-size:10.5px;font-weight:900;
 letter-spacing:.16em;text-transform:uppercase}
.hgn-jumbo__rail .hgn-qaflag{letter-spacing:.1em}
.hgn-jumbo__stage{display:grid;grid-template-columns:1fr;gap:0;align-items:center}
@container hgn (min-width:900px){.hgn-jumbo__stage{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
.hgn-jumbo__centre{padding:14px}
.hgn-jumbo__centre .hgn-media{--hgn-perimeter:14px;border-radius:14px}
.hgn-jumbo__copy{padding:6px 20px 20px;color:#FBF2F0}
@container hgn (min-width:900px){.hgn-jumbo__copy{padding:20px 24px 20px 4px}}
.hgn-jumbo__copy h2{margin:0 0 8px;font-size:clamp(20px,2.3vw,27px);font-weight:900;line-height:1.14;color:#fff}
.hgn-jumbo__copy p{margin:0;font-size:14px;line-height:1.5;color:rgba(245,228,225,.78)}
.hgn-jumbo__copy .hgn-open{margin-top:14px}

/* ---------- article landing page ---------- */
.hgn-article{max-width:860px;margin:0 auto}
.hgn-article .hgn-media{--hgn-perimeter:12px}
.hgn-article h1{margin:12px 0 8px;font-size:clamp(28px,4vw,42px);line-height:1.06;font-weight:900;letter-spacing:-.015em;text-wrap:pretty}
.hgn-article .hgn-dek{margin:0 0 10px;font-size:18px;line-height:1.5;color:#2A333B;font-weight:600}
.hgn-article .hgn-body p{margin:0 0 16px;font-size:17px;line-height:1.68;color:#1F262C}
.hgn-back{display:inline-flex;align-items:center;min-height:44px;gap:7px;font-size:12.5px;font-weight:900;
 letter-spacing:.08em;text-transform:uppercase;color:var(--hgn-red);text-decoration:none}
.hgn-rel{margin:28px 0 0;padding-top:18px;border-top:2px solid var(--hgn-ink)}
.hgn-rel h2{margin:0 0 12px;font-size:13px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.hgn-rel ul{margin:0;padding-left:18px}
.hgn-rel li{margin:5px 0;font-size:15px}

/* ---------- QA ledger (never public) ---------- */
.hgn-ledger{margin:26px 0 0;border:1.5px dashed #C9A44D;border-radius:12px;background:#FFFDF4;padding:12px 14px}
.hgn-ledger h2{margin:0 0 6px;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#8A6100}
.hgn-ledger table{width:100%;border-collapse:collapse;font:11.5px/1.45 ui-monospace,Menlo,Consolas,monospace}
.hgn-ledger th{text-align:left;padding:4px 6px;border-bottom:2px solid #E8DCC0;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#8A6100}
.hgn-ledger td{padding:4px 6px;border-bottom:1px solid #F0E7D2;vertical-align:top}
.hgn-ledger .dup{color:#9A1C13;font-weight:700}

/* ---------- container-driven mobile rhythm (proof viewport 390px) ---------- */
@container hgn (max-width:520px){
 .hgn-card{padding:10px 10px 14.5px;border-radius:12px}   /* tail stays 16px with the 1.5px border */
 .hgn-h{font-size:18px}
 .hgn-king__grid[data-n] > :first-child .hgn-h{font-size:21px}
 .hgn-x{font-size:13.5px}
 .hgn-jumbo__copy h2{font-size:20px}
 .hgn-jumbo__centre{padding:10px}
 .hgn-more__btn{width:100%;padding:0 18px;font-size:14px}
 .hgn-article h1{font-size:27px}
 .hgn-article .hgn-dek{font-size:16px}
 .hgn-block__bar h2{font-size:13px}
}

/* ribbon rhythm inside narrow containers — the approved ribbon, sized for the phone */
@container hgn (max-width:520px){
 .hgn-king .hh-ribbonbar{padding-left:10px;padding-right:10px}
 .hgn-king .hh-ribbonbar__title{font-size:19px;letter-spacing:.01em;line-height:1.1}
 .hgn-king__head{margin-bottom:10px}
 .hgn-king__note{font-size:10.5px;letter-spacing:.06em}
}
@container hgn (max-width:380px){.hgn-king .hh-ribbonbar__title{font-size:17px}}

/* long-headline / long-token stress: nothing may push the card wider than its column */
.hgn-h,.hgn-x,.hgn-article h1,.hgn-article .hgn-dek,.hgn-jumbo__copy h2{overflow-wrap:anywhere}
.hgn-card,.hgn-flip__face{max-width:100%}

/* only one face is ever painted — no renderer may show a mirrored face through the card */
.hgn-flip:not(.is-flipped) .hgn-flip__back{visibility:hidden;transition:visibility 0s 280ms}
.hgn-flip.is-flipped .hgn-flip__back{visibility:visible}
.hgn-flip.is-flipped .hgn-flip__front{visibility:hidden;transition:visibility 0s 280ms}
.hgn-flip.is-settled .hgn-flip__back{visibility:visible}

/* ---------- King section header: compact, metallic, structurally joined to its grid ---------- */
.hgn-king{position:relative;margin:0 0 34px}
.hgn-kingbar{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;
 margin:0;padding:11px 16px 11px 18px;border-radius:12px 12px 0 0;
 background:
  linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 46%),
  linear-gradient(100deg,#9A1C13 0%,#E32219 34%,#EE3A2E 52%,#C82318 74%,#7A150E 100%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.4),0 8px 20px rgba(122,21,14,.22)}
.hgn-kingbar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;border-radius:12px 0 0 0;
 background:linear-gradient(180deg,#FFF,#F7A69F 40%,#9A1C13)}
.hgn-kingbar h2{margin:0;color:#fff;font-size:clamp(15px,1.5vw,19px);font-weight:900;
 letter-spacing:.16em;text-transform:uppercase;line-height:1.1;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.hgn-kingbar p{margin:0;color:rgba(255,235,232,.78);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.hgn-kingbar .hgn-kingcount{margin-left:auto;color:#fff;font-size:10.5px;font-weight:900;letter-spacing:.12em;
 text-transform:uppercase;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.hgn-king__grid{padding:16px;border-radius:0 0 14px 14px;
 background:linear-gradient(180deg,rgba(217,42,32,.07),rgba(217,42,32,0) 70%),#fff;
 border:1.5px solid rgba(217,42,32,.28);border-top:0;
 box-shadow:0 16px 34px rgba(58,10,8,.08)}
@container hgn (max-width:520px){
 .hgn-kingbar{padding:10px 12px 10px 14px;gap:4px 10px}
 .hgn-kingbar h2{font-size:14px;letter-spacing:.1em}
 .hgn-kingbar p{font-size:10px;letter-spacing:.06em;flex-basis:100%}
 .hgn-kingbar .hgn-kingcount{margin-left:0}
 .hgn-king__grid{padding:12px}
}

/* ---------- designed text-led card (deliberate, native, never a broken image well) ---------- */
.hgn-poster{position:relative;display:grid;align-content:space-between;gap:10px;overflow:hidden;
 aspect-ratio:var(--hgn-ar,16/9);padding:14px 16px;border-radius:12px;
 background:
  radial-gradient(120% 130% at 8% 0%,rgba(238,58,46,.5),transparent 62%),
  repeating-linear-gradient(118deg,rgba(255,255,255,.045) 0 2px,transparent 2px 8px),
  linear-gradient(165deg,#1A1114 0%,#120C0E 60%,#0A0708 100%);
 box-shadow:inset 0 0 0 1px rgba(217,42,32,.45),inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px rgba(58,10,8,.2)}
.hgn-poster__kicker{margin:0;color:#F7A69F;font-size:10px;font-weight:900;letter-spacing:.2em;text-transform:uppercase}
.hgn-poster__big{margin:0;color:#fff;font-weight:900;line-height:1.02;letter-spacing:-.01em;
 font-size:clamp(19px,3.1cqw,30px);text-transform:uppercase;overflow-wrap:anywhere}
.hgn-poster__rule{height:4px;width:64px;border-radius:99px;background:linear-gradient(90deg,#EE3A2E,#9A1C13)}
.hgn-poster__mark{position:absolute;right:12px;bottom:10px;color:rgba(247,166,159,.5);font-size:9.5px;
 font-weight:900;letter-spacing:.18em;text-transform:uppercase}

/* ---------- jumbotron as a finished public module ---------- */
.hgn-jumbo{margin:0 0 34px;border-radius:18px}
.hgn-jumbo__kicker{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 18px 0;
 color:#F7A69F;font-size:10.5px;font-weight:900;letter-spacing:.2em;text-transform:uppercase}
.hgn-jumbo__kicker i{font-style:normal;width:6px;height:6px;border-radius:50%;background:#EE3A2E;box-shadow:0 0 0 3px rgba(238,58,46,.25)}
.hgn-jumbo__copy .hgn-cats a{color:#F7A69F}
.hgn-jumbo__copy .hgn-jmeta{margin:10px 0 0;font-size:12px;font-weight:700;color:rgba(240,216,211,.6)}
.hgn-jumbo__copy h2{font-size:clamp(23px,2.7vw,34px);letter-spacing:-.015em;line-height:1.06}
@container hgn (max-width:520px){.hgn-jumbo__kicker{padding:10px 12px 0;font-size:9.5px;letter-spacing:.14em}}

/* ---------- article inside the real shell ---------- */
.hgn-article{max-width:800px;margin:0 auto;padding:0 0 10px}
.hgn-article h1{margin:14px 0 10px;font-size:clamp(30px,3.9vw,50px);line-height:1.03;letter-spacing:-.02em}
.hgn-article .hgn-dek{font-size:19px;line-height:1.48;color:#2A333B}
.hgn-article .hgn-media{--hgn-perimeter:12px;margin:16px 0 0}
.hgn-article .rh-editorial-hero .hgn-media{margin:0}
.hgn-article .hgn-credit{margin:8px 0 22px;padding-left:12px;border-left:3px solid var(--hgn-red);font-size:12.5px;line-height:1.5}
.hgn-article .hgn-body{margin-top:4px}
.hgn-article .hgn-body p:first-child{font-size:18.5px;line-height:1.6}
.hgn-artrule{height:3px;margin:0;background:linear-gradient(90deg,var(--hgn-red),rgba(217,42,32,0))}
@container hgn (max-width:520px){
 .hgn-article h1{font-size:29px;line-height:1.06;margin:10px 0 8px}
 .hgn-article .hgn-dek{font-size:16.5px}
 .hgn-article .hgn-body p{font-size:16.5px;line-height:1.62}
 .hgn-article .hgn-body p:first-child{font-size:17px}
 .hgn-article .hgn-media{margin-top:12px}
 .hgn-article .rh-editorial-hero .hgn-media{margin-top:0}
}