/* ================= Blog v5: magazine ================= */
.art-hero{position:relative;min-height:min(78vh,720px);display:flex;align-items:flex-end;padding:140px 0 70px;overflow:hidden;background:var(--navy-950)}
.art-hero-img{position:absolute;top:0;bottom:0;right:0;width:58%}
.art-hero-img img{width:100%;height:100%;object-fit:cover;opacity:.9}
.art-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--navy-950) 42%,rgba(3,11,24,.55) 62%,rgba(3,11,24,.15) 100%),linear-gradient(0deg,var(--navy-950) 0%,transparent 30%)}
@media (max-width:1000px){.art-hero-img{width:100%;opacity:.35}}
.art-hero .wrap{position:relative;z-index:2;max-width:1100px;width:100%}
.art-back{display:inline-flex;gap:8px;align-items:center;font:600 13px/1 var(--sans);color:var(--gold-300);margin-bottom:28px}
.art-back svg{width:16px;height:16px}
.art-hero .eyebrow{display:flex}
.art-hero h1{font-size:clamp(44px,6vw,92px);margin:18px 0 18px;max-width:16ch}
.art-deck{font:500 clamp(20px,2vw,28px)/1.35 var(--serif);font-style:italic;color:#e9dcc2;max-width:760px}
.art-meta{display:flex;flex-wrap:wrap;gap:22px;margin-top:26px;font:600 12.5px/1 var(--sans);letter-spacing:.06em;color:var(--muted)}
.art-meta span{display:inline-flex;gap:8px;align-items:center}
.art-meta svg{width:15px;height:15px;color:var(--gold-500)}
.art-wrap{background:var(--paper);padding:clamp(60px,8vw,110px) 0;position:relative}
.art-grid{display:grid;grid-template-columns:300px minmax(0,760px);gap:clamp(40px,6vw,96px);justify-content:center;align-items:start}
.art-side{position:sticky;top:110px}
.art-side h5{font:700 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-600);margin-bottom:14px}
.art-toc{list-style:none;border-top:1px solid var(--rule);margin-bottom:30px}
.art-toc a{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule);font:600 13.5px/1.35 var(--sans);color:var(--ink-soft);transition:color .2s,padding .25s}
.art-toc a span{color:var(--gold-600);font-size:11px;padding-top:2px}
.art-toc a:hover,.art-toc a.on{color:var(--navy-900);padding-left:8px}
.art-help{background:var(--navy-900);border-radius:20px;padding:24px;color:var(--text);box-shadow:0 30px 60px -30px rgba(6,19,40,.6)}
.art-help h4{font:600 22px/1.2 var(--serif);color:#fff;margin-bottom:6px}
.art-help p{font-size:14px;color:var(--muted);margin-bottom:12px}
.art-help ul{list-style:none;margin-bottom:18px}
.art-help li a{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid rgba(201,151,63,.18);font:600 13.5px/1.3 var(--sans);color:#dfe6f1}
.art-help li a:hover{color:var(--gold-300)}
.art-help li svg{width:14px;height:14px;color:var(--gold-400)}
.art-help .btn{width:100%;justify-content:center}
.art-help .side-phone{color:var(--gold-300);justify-content:center}
.art-body{max-width:none!important;margin:0!important}
p.art-sub{font:600 clamp(24px,2.4vw,32px)/1.3 var(--serif);color:var(--navy-900);margin-bottom:26px}
.article.art-body > p:first-child::first-letter{float:none;font:inherit;padding:0;color:inherit}
.art-sub + p::first-letter{float:left;font:600 78px/.8 var(--serif);color:var(--gold-600);padding:8px 12px 0 0}
.chap{display:grid;grid-template-columns:84px 1fr;gap:10px;padding:44px 0 10px;margin-top:34px;border-top:1px solid var(--rule);scroll-margin-top:110px}
.chap-n{font:600 64px/1 var(--serif);background:linear-gradient(135deg,#d9a84f,#8d6220);-webkit-background-clip:text;background-clip:text;color:transparent}
.art-body .chap h2{font-size:clamp(28px,2.6vw,38px);margin:6px 0 16px;line-height:1.15}
.art-body ul{list-style:none;margin:18px 0 26px;padding:18px 24px;background:#fff;border:1px solid var(--rule);border-radius:16px}
.art-body ul li{position:relative;padding:9px 0 9px 34px;border-bottom:1px dashed var(--rule);margin:0}
.art-body ul li:last-child{border-bottom:0}
.art-body ul li::before{content:"";position:absolute;left:0;top:12px;width:20px;height:20px;border-radius:50%;background:var(--gold-grad);transform:none}
.art-body ul li::after{content:"";position:absolute;left:6px;top:18px;width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.art-end{margin-top:50px;padding:34px;border-radius:20px;background:var(--paper-2);text-align:center}
.art-end .serif{display:block;font-size:30px;color:var(--gold-600);margin-bottom:8px;font-style:italic}
.art-end p{margin:0}
.art-end a{color:var(--navy-900);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold-500)}
.art-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:200;pointer-events:none}
.art-progress i{display:block;height:100%;background:var(--gold-grad);transform-origin:left;transform:scaleX(var(--p,0))}
.rel-2{grid-template-columns:repeat(2,1fr)}
/* blog index */
.blog-hero{padding:clamp(90px,11vw,160px) 0 40px;background:radial-gradient(900px 400px at 20% 0%,rgba(201,151,63,.14),transparent 60%),var(--navy-950)}
.blog-hero .eyebrow{display:flex}
.blog-hero h1{font-size:clamp(48px,6.6vw,104px);margin:18px 0 20px;max-width:14ch}
.blog-list{padding-top:30px}
.feat-post{display:grid;grid-template-columns:1.25fr 1fr;border-radius:28px;overflow:hidden;background:var(--navy-900);border:1px solid rgba(201,151,63,.2);margin-bottom:30px;transition:border-color .3s,transform .4s}
.feat-post:hover{border-color:var(--gold-500);transform:translateY(-4px)}
.fp-img{min-height:460px;overflow:hidden}.fp-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.feat-post:hover .fp-img img{transform:scale(1.05)}
.fp-body{padding:clamp(30px,4vw,56px);display:flex;flex-direction:column;gap:16px;justify-content:center;position:relative}
.fp-body h2{font-size:clamp(32px,3.2vw,50px)}
.fp-body p{color:var(--muted);font-size:17px}
.fp-body .btn{align-self:flex-start;margin-top:8px}
.fp-new{position:absolute;top:24px;right:24px;font:700 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;padding:8px 12px;border-radius:999px;background:var(--gold-grad);color:#1a1205}
.post2-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.post2{display:grid;grid-template-columns:200px 1fr;border-radius:22px;overflow:hidden;background:var(--navy-900);border:1px solid rgba(201,151,63,.16);transition:border-color .3s,transform .4s}
.post2:hover{border-color:var(--gold-500);transform:translateY(-4px)}
.p2-img{overflow:hidden}.p2-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.post2:hover .p2-img img{transform:scale(1.06)}
.p2-body{padding:26px;display:flex;flex-direction:column;gap:10px}
.p2-body h3{font:600 26px/1.15 var(--serif);color:#fff}
.p2-body p{font-size:14.5px;color:var(--muted)}
.p2-body .art-meta{margin-top:auto}
@media (max-width:1000px){.art-grid{grid-template-columns:1fr}.art-side{position:static;order:2}.feat-post,.post2-grid,.post2{grid-template-columns:1fr}.fp-img{min-height:260px}.p2-img{height:200px}.rel-2{grid-template-columns:1fr}}
@media (max-width:600px){.chap{grid-template-columns:1fr}.chap-n{font-size:48px}.art-body ul{padding:14px 16px}}

/* cover shown as a framed picture, never behind the headline (covers have words baked in) */
.art-hero{min-height:auto;padding:110px 0 80px;align-items:center}
.art-hero::after{background:radial-gradient(900px 500px at 15% 10%,rgba(201,151,63,.12),transparent 60%)}
.art-hero .wrap{max-width:var(--wrap);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,70px);align-items:center}
.art-hero-img{display:none}
.art-cover{position:relative;border-radius:26px;overflow:hidden;border:1px solid rgba(201,151,63,.3);box-shadow:0 50px 100px -40px #000;aspect-ratio:4/3;transform:rotate(1.2deg)}
.art-cover img{width:100%;height:100%;object-fit:cover}
.art-cover::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 8px rgba(3,11,24,.35);border-radius:26px}
.art-hero h1{max-width:14ch}
@media (max-width:1000px){.art-hero .wrap{grid-template-columns:1fr}.art-cover{transform:none;margin-top:10px}}

/* live forms */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-err{display:none;margin-top:14px;padding:12px 16px;border-radius:12px;background:rgba(220,80,60,.12);border:1px solid rgba(220,80,60,.4);color:#ffcfc6;font-size:14.5px}
.form.sent .fields,.form.sent button[type=submit]{opacity:.45;pointer-events:none}
.art-fig{margin:30px 0;border-radius:16px;overflow:hidden;border:1px solid rgba(201,151,63,.25);box-shadow:0 24px 50px -24px rgba(0,0,0,.6)}
.art-fig img{display:block;width:100%;height:auto}
/* three older articles: a row of three image-on-top cards (two columns left one card alone) */
@media (min-width:1001px){.post2-grid.n3,.post2-grid.n6{grid-template-columns:repeat(3,1fr)}.post2-grid.n3 .post2,.post2-grid.n6 .post2{grid-template-columns:1fr}.post2-grid.n3 .p2-img,.post2-grid.n6 .p2-img{height:210px}}
/* blog photos are 3:2 with their headline text on the left: show the whole cover, and keep the left side when a card crops */
.art-cover{aspect-ratio:3/2}
.fp-img img,.p2-img img,.rel-img img{object-position:left center}
/* article pictures are designed graphics with words on them, in many shapes (2:1, 4:1, 3:2...).
   Show the whole picture, and fill the leftover space with a soft blurred copy of it. */
.fit{position:relative;overflow:hidden;background:#061328}
.fit::before{content:"";position:absolute;inset:-30px;background:var(--bg) center/cover no-repeat;filter:blur(22px) brightness(.5) saturate(1.1)}
.fit>img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain!important;object-position:center!important}
.feat-post:hover .fit>img,.post2:hover .fit>img,.rel:hover .fit>img{transform:none}
.art-cover.fit{aspect-ratio:3/2}
/* cards: wide picture on top, so wide graphics are not shrunk into a narrow side box */
.post2-grid .post2{grid-template-columns:1fr}
.post2-grid .p2-img{height:auto!important;aspect-ratio:2/1}