/* Hallmark · component: article hero · genre: atmospheric editorial · theme: existing Luxor brand
 * responsive: 320 · 375 · 414 · 768 · desktop · contrast: high-contrast image overlay
 * critique: Philosophy 5 · Hierarchy 5 · Execution 5 · Specificity 5 · Restraint 5 · Variety 4
 */
.article-hero{isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);align-items:end;min-height:clamp(29rem,60svh,36rem);padding:0;overflow:clip;background:var(--color-paper);color:var(--color-ink-2)}
.article-hero>.hero-picture{position:absolute;inset:0;z-index:0;width:100%;height:100%;min-width:0;aspect-ratio:auto}
.article-hero>.hero-picture .hero-bg{display:block;width:100%;height:100%;max-height:none;object-fit:cover;object-position:center 48%}
.article-hero::after{position:absolute;inset:0;z-index:1;content:"";background:linear-gradient(90deg,color-mix(in srgb,var(--color-paper) 94%,transparent) 0%,color-mix(in srgb,var(--color-paper) 78%,transparent) 42%,color-mix(in srgb,var(--color-paper) 20%,transparent) 76%,transparent 100%),linear-gradient(0deg,color-mix(in srgb,var(--color-paper) 86%,transparent) 0%,transparent 56%);pointer-events:none}
.article-hero>div{position:relative;z-index:2;display:grid;align-content:end;justify-items:start;gap:var(--space-md);width:min(100%,88rem);max-width:none;min-width:0;margin-inline:auto;padding:clamp(4rem,10svh,6rem) var(--page-gutter) clamp(2rem,5svh,3.5rem)}
.article-hero>div>span{color:var(--color-accent);font-family:var(--font-body);font-size:var(--text-sm);font-weight:700;letter-spacing:.08em;line-height:1.4;text-transform:uppercase}
.article-hero h1{max-width:28ch;min-width:0;margin:0;color:var(--color-ink-2);font-family:var(--font-display);font-size:clamp(3rem,4.4vw,4.5rem);font-style:normal;font-weight:400;letter-spacing:-.035em;line-height:1;overflow-wrap:anywhere;text-wrap:balance;word-break:normal}
.article-hero>div>p{max-width:54rem;margin:var(--space-xs) 0 0;color:var(--color-ink);font-family:var(--font-body);font-size:clamp(1rem,1.2vw,1.125rem);line-height:1.6;text-wrap:pretty}
@media(max-width:48rem){html,body{overflow-x:clip}.article-hero{min-height:clamp(36rem,82svh,43rem)}.article-hero>.hero-picture .hero-bg{object-position:62% center}.article-hero::after{background:linear-gradient(0deg,color-mix(in srgb,var(--color-paper) 96%,transparent) 0%,color-mix(in srgb,var(--color-paper) 70%,transparent) 70%,color-mix(in srgb,var(--color-paper) 35%,transparent) 100%)}.article-hero>div{padding-block:7rem 3rem}.article-hero h1{max-width:18ch;font-size:clamp(2.6rem,12vw,4.25rem);line-height:1}.article-hero>div>p{max-width:38rem}}
:where(.article>article,.lat-blog-content){--ac-text:#c8d2da;--ac-heading:#f5f1e8;--ac-muted:#91a2af;--ac-gold:#d3ad63;--ac-line:rgba(211,173,99,.35);color:var(--ac-text);font-size:clamp(16px,1.1vw,18px);line-height:1.85;overflow-wrap:anywhere}
:where(.article>article,.lat-blog-content) h4{color:#efe5d1;font-family:Manrope,Arial,sans-serif;font-size:clamp(1.05rem,1.6vw,1.2rem);font-weight:750;line-height:1.45;margin:1.8rem 0 .6rem;scroll-margin-top:7rem;text-wrap:balance}
:where(.article>article,.lat-blog-content) .article-meta{align-items:center;color:var(--ac-gold);display:flex;font-size:.78rem;font-weight:700;gap:.65rem;letter-spacing:.09em;margin:0 0 1.5rem;text-transform:uppercase}
:where(.article>article,.lat-blog-content) .article-meta::after{background:var(--ac-line);content:"";height:1px;max-width:8rem;width:22vw}
:where(.article>article,.lat-blog-content) h2{border-left:3px solid var(--ac-gold);color:var(--ac-heading);font-size:clamp(1.75rem,3vw,2.5rem);font-weight:500;letter-spacing:-.02em;line-height:1.18;margin:clamp(2.75rem,6vw,4.5rem) 0 1.15rem;padding-left:1rem;text-wrap:balance}
:where(.article>article,.lat-blog-content) h2:first-of-type{margin-top:.35rem}:where(.article>article,.lat-blog-content) h3{color:var(--ac-heading);font-family:Manrope,Arial,sans-serif;font-size:clamp(1.2rem,2vw,1.55rem);font-weight:700;letter-spacing:-.01em;line-height:1.35;margin:2.4rem 0 .75rem;text-transform:none;text-wrap:balance}
:where(.article>article,.lat-blog-content) p{margin:.8rem 0 1.35rem}:where(.article>article,.lat-blog-content) ul,:where(.article>article,.lat-blog-content) ol{display:grid;gap:.55rem;margin:1rem 0 1.5rem;padding-left:1.4rem}:where(.article>article,.lat-blog-content) li{padding-left:.3rem}:where(.article>article,.lat-blog-content) li::marker{color:var(--ac-gold);font-weight:800}
:where(.article>article,.lat-blog-content) a{color:#e6c985;font-weight:650;text-decoration-color:rgba(230,201,133,.62);text-decoration-thickness:1px;text-underline-offset:4px}:where(.article>article,.lat-blog-content) a:hover{color:#ffe3a0;text-decoration-thickness:2px}:where(.article>article,.lat-blog-content) a:focus-visible{border-radius:3px;outline:3px solid rgba(211,173,99,.45);outline-offset:3px}
:where(.article>article,.lat-blog-content) figure{margin:clamp(2rem,5vw,3.5rem) 0}:where(.article>article,.lat-blog-content) img{border-radius:12px;display:block;height:auto;max-width:100%;width:100%}:where(.article>article,.lat-blog-content) figcaption{color:var(--ac-muted);font-size:.86rem;line-height:1.55;margin-top:.7rem;text-align:center}
:where(.article>article,.lat-blog-content) blockquote{background:rgba(255,255,255,.035);border-left:4px solid var(--ac-gold);border-radius:0 10px 10px 0;color:#dde4e8;font-size:1.08em;margin:2rem 0;padding:1rem 1.25rem}:where(.article>article,.lat-blog-content) hr{border:0;border-top:1px solid var(--ac-line);margin:3rem 0}:where(.article>article,.lat-blog-content) :is(h2,h3){scroll-margin-top:7rem}
:where(.article>article,.lat-blog-content) .internal-links{border-top:1px solid var(--ac-line);margin-top:3.5rem;padding-top:.25rem}:where(.article>article,.lat-blog-content) .internal-links ul{display:flex;flex-wrap:wrap;gap:.65rem;list-style:none;padding:0}:where(.article>article,.lat-blog-content) .internal-links li{padding:0}:where(.article>article,.lat-blog-content) .internal-links a{border:1px solid rgba(211,173,99,.55);border-radius:7px;display:inline-flex;padding:.65rem .9rem;text-decoration:none}:where(.article>article,.lat-blog-content) .internal-links a:hover{background:var(--ac-gold);color:#071522}
@media(max-width:700px){.article{padding-left:clamp(1rem,5vw,1.5rem)!important;padding-right:clamp(1rem,5vw,1.5rem)!important}:where(.article>article,.lat-blog-content) h2{padding-left:.75rem}:where(.article>article,.lat-blog-content) .internal-links ul{display:grid}:where(.article>article,.lat-blog-content) .internal-links a{justify-content:center;width:100%}}