/* ============================================================
   INCREDIBLE KARNATAKA — V2  |  article.css
   Worldwide Media Corporation Group, USA
   The article page. Loads AFTER section.css.
   ============================================================ */

/* ===== READING PROGRESS ===== */
#prog{position:fixed;top:0;left:0;height:2px;background:var(--gold);z-index:9999;width:0;transition:width .1s linear;}

/* ===== TITLE BLOCK ===== */
.art-wrap{max-width:900px;margin:0 auto;padding:0 2rem;}
.art-head{padding:120px 0 0;}
.art-kicker{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:1rem;
  color:var(--gold);margin-bottom:1rem;}
.art-title{font-family:'Playfair Display',Georgia,serif;font-weight:400;
  font-size:clamp(2.2rem,5.2vw,4rem);line-height:1.12;letter-spacing:-.01em;margin-bottom:1rem;}
.art-sub{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:clamp(1.1rem,2.2vw,1.5rem);color:var(--muted);line-height:1.45;margin-bottom:1.6rem;}
.art-byline{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--meta);
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
.art-byline b{color:var(--gold);font-weight:400;}

/* ===== META + SHARE STRIP ===== */
.meta-share{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:2rem 0;}
.meta-row{max-width:900px;margin:0 auto;padding:1rem 2rem;display:flex;flex-wrap:wrap;
  border-bottom:1px solid var(--line);}
.meta-cell{padding-right:2rem;margin-right:2rem;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:3px;}
.meta-cell:last-child{border-right:none;margin-right:0;padding-right:0;}
.meta-lbl{font-size:.5rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);}
.meta-val{font-size:.72rem;font-weight:500;}
.share-row{max-width:900px;margin:0 auto;padding:.8rem 2rem;display:flex;align-items:center;gap:.5rem;}
.share-lbl{font-size:.52rem;letter-spacing:.22em;text-transform:uppercase;color:var(--meta);margin-right:.4rem;}

/* ===== HERO ===== */
.art-hero{max-width:1100px;margin:0 auto;padding:0 2rem;}
.art-hero .img{height:clamp(280px,42vw,540px);}
.art-cap{font-size:.62rem;color:var(--meta);font-style:italic;padding-top:.5rem;}

/* ===== BODY + SIDEBAR ===== */
.art-body{max-width:1100px;margin:0 auto;padding:3rem 2rem;
  display:grid;grid-template-columns:1fr 280px;gap:4.5rem;align-items:start;}
.art-intro{font-size:1.05rem;line-height:1.9;color:var(--body);margin-bottom:1.6rem;
  text-align:justify;text-justify:inter-word;
  padding-bottom:1.6rem;border-bottom:1px solid var(--line);}
.sec-h{font-family:'Playfair Display',Georgia,serif;font-size:1.3rem;font-weight:400;
  margin:2.6rem 0 1rem;padding-top:2rem;border-top:1px solid var(--line);}
/* the intro already ends in a rule — don't draw a second one straight after it */
.art-intro + .sec-h{border-top:none;padding-top:0;margin-top:1.4rem;}
.sub-h{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:1.3rem;
  color:var(--gold);margin:.2rem 0 1.2rem;}
.ap{font-size:.98rem;line-height:1.9;color:var(--body);margin-bottom:1.3rem;
  text-align:justify;text-justify:inter-word;overflow-wrap:break-word;}
/* bullet lists lifted from the Word files */
.alist{margin:0 0 1.4rem 0;padding:0;list-style:none;}
.ali{font-size:.98rem;line-height:1.85;color:var(--body);padding:.25rem 0 .25rem 1.4rem;
  position:relative;}
.ali:before{content:"";position:absolute;left:.25rem;top:1.12em;width:5px;height:5px;
  background:var(--gold);border-radius:50%;}

/* ============================================================
   PICTURE LAYOUTS
   Eight rhythms so no two articles read the same way down the page.
   The builder picks one per figure from the picture's own shape:
   portraits wrap or stand tall, landscapes run wide or pair up.

   Body pictures keep their OWN proportions - they are never cropped
   to a fixed box, because a portrait squeezed into a landscape frame
   loses the subject's head. Only the hero, which is a banner, crops.
   ============================================================ */
.aimg{margin:2.5rem 0;clear:both;}
.aimg .img{height:auto;background:none;}
.aimg .img > img{position:static;width:100%;max-width:100%;height:auto;display:block;
  object-fit:fill;}
/* A grid or flex child will not shrink below its content's intrinsic width
   unless told to - and a 1200px photograph is very wide content. Without
   this the picture columns push the whole article sideways on a phone. */
.art-body > *,.art-col > *,.aimg > *{min-width:0;}
.aimg{max-width:100%;}
.aimg .art-cap{text-align:left;}

/* 1. WIDE - across the full column */
.aimg.wide .img{max-width:100%;}

/* 2. PANORAMA - a landscape, slightly inset, a breath between sections */
.aimg.pano{padding:0 6%;}

/* 3. TALL - a portrait, centred and held back so it does not dominate */
.aimg.tall .img{max-width:58%;margin:0 auto;}
.aimg.tall .art-cap{max-width:58%;margin:0 auto;}

/* 4/5. WRAP LEFT / RIGHT - the text runs around a portrait */
.aimg.wrap-l,.aimg.wrap-r{width:42%;margin-top:.4rem;clear:none;}
.aimg.wrap-l{float:left;margin-right:2rem;margin-bottom:1.2rem;}
.aimg.wrap-r{float:right;margin-left:2rem;margin-bottom:1.2rem;}

/* 6. PAIR - two verticals side by side. A single portrait stranded in a
      column of text leaves a hole; two of them fill the measure and read
      like a magazine spread. Both are cropped to one shared 3:4 so they
      line up exactly - a ragged pair looks like an accident. The crop is
      taken from the upper third, where faces sit. */
.aimg.pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.aimg.pair .img{aspect-ratio:3/4;}
.aimg.pair .img > img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 28%;}
.aimg.pair .art-cap{grid-column:1 / -1;}

/* 7. DUO - two landscapes shoulder to shoulder, matched to one 4:3 */
.aimg.duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.aimg.duo .img{aspect-ratio:4/3;}
.aimg.duo .img > img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 32%;}
.aimg.duo .art-cap{grid-column:1 / -1;}

/* 8. STRIP - three in a row, matched to one square */
.aimg.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;}
.aimg.strip .img{aspect-ratio:1/1;}
.aimg.strip .img > img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 30%;}
.aimg.strip .art-cap{grid-column:1 / -1;}

/* 8. SIDE - a portrait with its caption set vertically beside it */
.aimg.side{display:grid;grid-template-columns:1fr 2.4rem;gap:1rem;align-items:start;}
.aimg.side .art-cap{writing-mode:vertical-rl;text-orientation:mixed;
  padding:0 0 0 .7rem;margin:0;white-space:nowrap;overflow:hidden;
  border-left:1px solid var(--line);letter-spacing:.06em;align-self:stretch;}

.gal-h{clear:both;font-size:.54rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin:3rem 0 1.2rem;padding-top:1.6rem;border-top:1px solid var(--line);}

/* a heading must never start beside a floated picture */
.sec-h,.apull,.alist,.art-body .rn-wrap{clear:both;}

/* the hero is a banner, so it does crop - favour the upper third, which is
   where faces almost always sit */
.art-hero .img > img{object-position:center 32%;}

@media(max-width:760px){
  .aimg.wrap-l,.aimg.wrap-r{float:none;width:100%;margin:2rem 0;}
  .aimg.tall .img,.aimg.tall .art-cap{max-width:100%;}
  .aimg.pano{padding:0;}
  .aimg.strip{grid-template-columns:1fr 1fr;}
  .aimg.pair{gap:.6rem;}
  .aimg.side{grid-template-columns:1fr;}
  .aimg.side .art-cap{writing-mode:horizontal-tb;border-left:none;padding-left:0;
    padding-top:.5rem;white-space:normal;}
  /* justified text needs a wider measure than a phone gives it */
  .ap,.art-intro{text-align:left;}
}
.apull{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:1.5rem;line-height:1.5;color:var(--ink);margin:2.2rem 0;padding:1.4rem 0 1.4rem 1.6rem;
  border-left:2px solid var(--gold);}

/* sidebar */
.art-side{position:sticky;top:110px;}
.sb-hd{font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
  padding-bottom:.8rem;border-bottom:1px solid var(--line);}
.rel{display:grid;grid-template-columns:76px 1fr;gap:.9rem;align-items:center;
  padding:1rem 0;border-bottom:1px solid var(--line-soft);}
.rel .img{height:70px;}
.rel-cat{font-size:.48rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:3px;}
.rel-t{font-family:'Playfair Display',Georgia,serif;font-size:.88rem;line-height:1.3;transition:color .2s;}
.rel:hover .rel-t{color:var(--gold);}
.sb-sub{margin-top:2rem;border:1px solid var(--line);padding:1.4rem;text-align:center;}
.sb-sub .s1{display:block;font-size:.5rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.6rem;}
.sb-sub .s2{display:block;font-family:'Playfair Display',Georgia,serif;font-size:1rem;
  line-height:1.4;margin-bottom:1rem;}
.sb-sub a{display:block;background:var(--ink);color:#fff;padding:.65rem;
  font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;}
.sb-sub a:hover{background:var(--gold);color:var(--ink);}

/* ===== BOTTOM BAR + NEXT ===== */
.btm-bar{max-width:1100px;margin:0 auto;padding:1.5rem 2rem;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.next-wrap{max-width:1100px;margin:1.5rem auto 0;padding:0 2rem;}
.next-inner{border:1px solid var(--line);padding:1.5rem 2rem;display:flex;align-items:center;
  justify-content:space-between;gap:2rem;}
.next-inner:hover .next-t{color:var(--gold);}
.next-lbl{font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;color:var(--meta);margin-bottom:.3rem;}
.next-t{font-family:'Playfair Display',Georgia,serif;font-size:1.1rem;transition:color .2s;}
.next-arr{font-size:1.4rem;color:var(--gold);flex-shrink:0;}

/* ===== READ NEXT GRID ===== */
.rn-wrap{max-width:1100px;margin:3.5rem auto 0;padding:0 2rem;}
.rn-h{font-family:'Playfair Display',Georgia,serif;font-size:1.5rem;
  padding-bottom:1rem;border-bottom:2px solid var(--ink);margin-bottom:1.6rem;}
.rn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
.rn-card{border:1px solid var(--line);transition:box-shadow .25s,transform .25s;display:block;}
.rn-card:hover{box-shadow:0 16px 40px rgba(0,0,0,.10);transform:translateY(-3px);}
.rn-card .img{height:150px;}
.rn-body{padding:1rem 1.1rem 1.3rem;}
.rn-cat{font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.45rem;}
.rn-t{font-family:'Playfair Display',Georgia,serif;font-size:1rem;line-height:1.3;}
.rn-more{display:inline-block;margin-top:.8rem;font-size:.56rem;letter-spacing:.18em;
  text-transform:uppercase;border-bottom:1px solid var(--gold);padding-bottom:2px;}

/* ===== RESPONSIVE ===== */
@media(max-width:1000px){
  .art-body{grid-template-columns:1fr;gap:2.5rem;}
  .art-side{position:static;}
  .rn-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:760px){
  .art-wrap,.art-hero,.art-body,.btm-bar,.next-wrap,.rn-wrap,.meta-row,.share-row{
    padding-left:1.25rem;padding-right:1.25rem;}
  .art-head{padding-top:100px;}
  .art-hero .img{height:240px;}
  /* A leftover fixed height here fought the new layouts: combined with the
     matched aspect-ratio on a pair it computed a 293px-wide picture inside a
     167px column and pushed every article sideways on a phone. Body pictures
     size themselves. */
  .aimg .img{height:auto;}
  .meta-cell{padding-right:1.1rem;margin-right:1.1rem;}
  .rn-grid{grid-template-columns:1fr;}
  .next-inner{padding:1.2rem 1.2rem;}
}

/* ===== DROP-IN IMAGE RULE =====
   Every black placeholder reserves its exact box. Put a real <img> inside the
   placeholder element and it fills that box with no layout shift:
       <span class="img"><img src="..." alt="..." width="700" height="440"></span>
   Always set width= and height= on the tag. IMAGE-SPECS.txt lists the size
   required for every slot. */
.img > img,
.ph > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;z-index:0;}
.img,.ph{position:relative;}

/* Editorial redesign: six rotating magazine opening treatments. */
.article-page{background:#fbfaf7;color:#17141b}
.article-page .anav{background:rgba(251,250,247,.96);backdrop-filter:blur(12px)}
.article-page .art-head{max-width:1220px;padding:9rem 3.5rem 1.5rem;position:relative}
.article-page .art-head:after{content:"";display:block;width:4.5rem;height:2px;background:var(--gold);margin-top:2.4rem}
.article-page .art-kicker{font-family:'roc-grotesk',sans-serif;font-style:normal;font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;margin-bottom:1.25rem;color:#9a6d34}
.article-page .art-title{font-size:clamp(3rem,7vw,7rem);line-height:.98;letter-spacing:-.055em;max-width:1050px;margin:0 0 1.35rem}
.article-page .art-sub{max-width:760px;font-size:clamp(1.25rem,2.2vw,1.8rem);line-height:1.35;margin:0;color:#645d69}
.article-page .art-byline{margin-top:1.5rem;font-size:.58rem;letter-spacing:.2em}
.article-page .meta-share{display:none}
.article-page .share-row{justify-content:flex-start;padding:1.1rem 3.5rem;border-bottom:1px solid #ded8cf}
.article-page .share-row .sbtn{border-color:#cfc6ba;background:transparent}
.article-page .art-hero{max-width:1220px;padding:1rem 3.5rem 0}
.article-page .art-hero .img{height:auto;aspect-ratio:16/9;box-shadow:0 24px 60px rgba(30,22,18,.12);background:#e8e1d8}
.article-page .art-hero .img>img{object-fit:cover;object-position:center 32%}
.article-page .art-body{max-width:1220px;padding:5rem 3.5rem;grid-template-columns:minmax(0,760px) 250px;gap:6rem}
.article-page .art-col{font-family:'roc-grotesk',sans-serif}
.article-page .art-intro{font-family:'roc-grotesk',sans-serif;font-size:14px;line-height:1.8;text-align:justify;text-justify:inter-word;color:#3f3942;border:0;padding:0 0 2.5rem;margin:0 0 2.5rem}
.article-page .ap{font-size:14px;line-height:1.8;text-align:justify;text-justify:inter-word;color:#3f3942;margin-bottom:1.6rem}
.article-page .sec-h{font-size:2.35rem;line-height:1.08;letter-spacing:-.025em;margin:4.8rem 0 1.4rem;padding-top:2.1rem;border-top:1px solid #d9d0c6}
.article-page .sec-h:before{content:"";display:block;font-family:'roc-grotesk',sans-serif;font-size:.55rem;letter-spacing:.25em;color:#a4773c;margin-bottom:.8rem}
.article-page .aimg{margin:3.5rem 0}.article-page .aimg .img{background:#eee8df}.article-page .aimg .img>img{object-fit:cover;object-position:center 35%;transition:transform .7s ease}.article-page .aimg:hover .img>img{transform:scale(1.025)}
.article-page .aimg.pair,.article-page .aimg.duo{gap:1.3rem}.article-page .aimg.wide{margin-left:-8%;margin-right:-8%}.article-page .aimg.wrap-l,.article-page .aimg.wrap-r{width:44%}
.article-page .apull{font-size:2rem;line-height:1.25;margin:3rem 0;padding:1.7rem 0 1.7rem 2rem;border-left:3px solid var(--gold)}
.article-page .art-side{border-left:1px solid #ddd4ca;padding-left:1.5rem}.article-page .btm-bar{max-width:1220px;padding:1.5rem 3.5rem}.article-page .next-inner{border:0;border-top:1px solid #d9d0c6;border-bottom:1px solid #d9d0c6;padding:2rem 0}
.article-variant-1 .art-head{text-align:center;margin:auto}.article-variant-1 .art-head:after{margin-left:auto;margin-right:auto}.article-variant-1 .art-sub{margin-left:auto;margin-right:auto}.article-variant-1 .art-byline{justify-content:center}.article-variant-1 .art-hero .img{aspect-ratio:2/1}
.article-variant-2 .art-head{padding-top:7.5rem}.article-variant-2 .art-title{max-width:820px;font-size:clamp(3.4rem,8vw,8rem)}.article-variant-2 .art-hero .img{aspect-ratio:1.7/1}
.article-variant-3 .art-head{max-width:920px;margin-left:8%}.article-variant-3 .art-hero{max-width:920px;margin-left:8%;margin-right:0}.article-variant-3 .art-hero .img{aspect-ratio:4/5}
.article-variant-3 main{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px, .82fr);column-gap:clamp(2rem,6vw,6rem);align-items:center}
.article-variant-3 .art-head{grid-column:1;grid-row:1;max-width:none;margin:0;padding-left:clamp(2rem,7vw,7rem);padding-right:0}
.article-variant-3 .meta-share{grid-column:1;grid-row:2;width:100%}
.article-variant-3 .art-hero{grid-column:2;grid-row:1 / span 2;width:100%;max-width:none;margin:0;padding:0 3rem 0 0}
.article-variant-3 .art-body,.article-variant-3 .btm-bar,.article-variant-3 .next-wrap,.article-variant-3 .rn-wrap{grid-column:1 / -1}
.article-variant-4 .art-head{background:#17141b;color:#fff;max-width:none;padding-left:calc((100% - 1150px)/2);padding-right:calc((100% - 1150px)/2)}.article-variant-4 .art-head:after{background:#d9a34f}.article-variant-4 .art-kicker,.article-variant-4 .art-sub{color:#d8c7ae}.article-variant-4 .art-byline{color:#c6b9aa}.article-variant-4 .art-hero{max-width:none;padding:0}.article-variant-4 .art-hero .img{aspect-ratio:2.2/1;box-shadow:none}
.article-variant-5 .art-head{max-width:1050px;margin-left:auto;margin-right:12%}.article-variant-5 .art-title{max-width:760px}.article-variant-5 .art-hero{max-width:1000px;margin-right:8%;margin-left:auto}.article-variant-5 .art-hero .img{aspect-ratio:1.55/1}
.article-variant-6 .art-head{border-left:10px solid var(--gold);max-width:1040px;margin-left:8%;padding-left:3rem}.article-variant-6 .art-hero{max-width:1040px;margin-left:8%;margin-right:0}.article-variant-6 .art-hero .img{aspect-ratio:1.45/1}
@media(max-width:760px){.article-page .art-head{padding:7rem 1.25rem 2.5rem;margin:0}.article-page .art-title{font-size:clamp(2.65rem,13vw,4.5rem)}.article-page .art-sub{font-size:1.25rem}.article-page .share-row{padding-left:1.25rem;padding-right:1.25rem}.article-page .art-hero{padding:1.5rem 1.25rem 0;margin:0}.article-page .art-hero .img,.article-variant-1 .art-hero .img,.article-variant-4 .art-hero .img,.article-variant-5 .art-hero .img,.article-variant-6 .art-hero .img{aspect-ratio:4/3}.article-page .art-body{padding:3rem 1.25rem;display:block}.article-page .art-intro{font-size:1.35rem}.article-page .sec-h{font-size:1.9rem;margin-top:3.5rem}.article-page .aimg.wide{margin-left:0;margin-right:0}.article-page .art-side{border-left:0;border-top:1px solid #ddd4ca;padding:2rem 0 0;margin-top:3rem}.article-variant-4 .art-head{padding-left:1.25rem;padding-right:1.25rem}.article-variant-6 .art-head{border-left:5px solid var(--gold);padding-left:1rem}}
@media(max-width:760px){.article-variant-3 main{display:block}.article-variant-3 .art-head{padding-left:1.25rem;padding-right:1.25rem}.article-variant-3 .art-hero{padding:1.5rem 1.25rem 0}}

/* Section numbering is intentionally hidden for a clean magazine treatment. */
.article-page .sec-h:before{content:none !important;display:none !important}

/* Keep words intact across every page. */
html,body,*{-webkit-hyphens:none !important;hyphens:none !important}

/* Center the editorial content and image compositions inside the reading column. */
.article-page .art-col{margin-left:auto;margin-right:auto;text-align:center}
.article-page .art-intro,.article-page .ap{text-align:justify;text-justify:inter-word}
.article-page .sec-h,.article-page .sub-h,.article-page .apull{text-align:center}
.article-page .aimg{margin-left:auto;margin-right:auto}
.article-page .aimg.wide{margin-left:auto;margin-right:auto;width:min(100%,900px)}
.article-page .aimg.wrap-l,.article-page .aimg.wrap-r{float:none;width:min(78%,560px);margin:3.5rem auto}
.article-page .aimg .img>img{margin-left:auto;margin-right:auto}
.article-page .art-intro{font-family:'roc-grotesk',sans-serif;font-size:14px;line-height:1.8}
.article-page .art-intro:first-letter{float:left;font-family:'Playfair Display',Georgia,serif;font-size:4.8rem;line-height:.78;font-weight:500;color:var(--ink);padding:.18rem .45rem 0 0}
.article-page .art-title{font-family:'Playfair Display',Georgia,serif;font-size:clamp(2.8rem,5.6vw,5.8rem);line-height:1.02;letter-spacing:-.045em}
.article-page .art-sub{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(1rem,1.7vw,1.35rem);line-height:1.45;max-width:620px;color:#5d5561}

/* Keep every article opening compact: title beside hero, article content below. */
@media(min-width:761px){
  .article-page main{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);column-gap:clamp(2rem,6vw,6rem);align-items:center}
  .article-page main>.art-head{grid-column:1;grid-row:1;max-width:none;margin:0;padding:7rem 0 1.5rem clamp(2rem,6vw,6rem)}
  .article-page main>.art-hero{grid-column:2;grid-row:1;width:100%;max-width:none;margin:0;padding:7rem clamp(1.5rem,5vw,5rem) 1.5rem 0}
  .article-page main>.art-body,.article-page main>.btm-bar,.article-page main>.next-wrap,.article-page main>.rn-wrap{grid-column:1 / -1}
  .article-page .art-hero .img{aspect-ratio:4/5}
}
@media(max-width:760px){.article-page main{display:block}.article-page main>.art-head,.article-page main>.art-hero{margin:0}}

/* Undo the site-wide side-by-side opening treatment. */
@media(min-width:761px){
  .article-page main{display:block}
  .article-page main>.art-head{max-width:1220px;margin:0 auto;padding:9rem 3.5rem 1.5rem}
  .article-page main>.art-hero{max-width:1220px;margin:0 auto;padding:1rem 3.5rem 0}
}
.article-page .art-title{font-size:clamp(3rem,7vw,7rem);line-height:.98;letter-spacing:-.055em}
.article-page .art-sub{max-width:760px;font-size:clamp(1.25rem,2.2vw,1.8rem);line-height:1.35}
.article-variant-4 .art-head{background:#fbfaf7;color:var(--ink)}
.article-variant-4 .art-kicker,.article-variant-4 .art-sub{color:#9a6d34}
.article-variant-4 .art-byline{color:var(--meta)}
@media(min-width:761px){.article-page:not(.article-hero-wide) .art-hero .img{aspect-ratio:var(--hero-ratio,16/9);background:#f2eee8}.article-page:not(.article-hero-wide) .art-hero .img>img{object-fit:contain;object-position:center}}
@media(max-width:760px){.article-page:not(.article-hero-wide) .art-hero .img{aspect-ratio:var(--hero-ratio,4/3);background:#f2eee8}.article-page:not(.article-hero-wide) .art-hero .img>img{object-fit:contain;object-position:center}}
.article-hero-reduced .art-hero{max-width:700px;margin-left:auto;margin-right:auto}
@media(min-width:761px){.article-hero-reduced .art-hero{width:55%}}
.article-page .img,.article-page .ph{background:#f2eee8 !important}
.article-page .aimg .img{height:auto !important;aspect-ratio:auto !important;background:#f2eee8 !important}
.article-page .aimg .img>img{position:static !important;width:100%;height:auto;object-fit:contain !important;object-position:center !important}
.article-page .art-title .title-subject{display:block;font-family:'Playfair Display',Georgia,serif;font-weight:500}
.article-page .art-title .title-sub{display:block;margin-top:.35rem;font-family:'roc-grotesk',sans-serif;font-size:clamp(1.15rem,2.1vw,2rem);font-weight:400;line-height:1.3;letter-spacing:.01em;color:#625a66}
@media(max-width:760px){.article-page .art-title .title-sub{font-size:1.15rem}}
@media(min-width:761px){.article-hero-wide .art-hero{max-width:none;width:100%;padding:1rem 0 0}.article-hero-wide .art-hero .img{width:100%;aspect-ratio:2.1/1}.article-hero-wide .art-hero .img>img{object-fit:cover;object-position:center 45%}}

/* Secondary section headings stay clearly below the main article title. */
.article-page .sec-h{font-size:1.5rem;line-height:1.2}
@media(max-width:760px){.article-page .sec-h{font-size:1.3rem}}


/* Article section headings and subheadings align with the reading column. */
.article-page .sec-h,.article-page .sub-h{text-align:left}


/* Compact the transition between paragraphs and section headings. */
.article-page .art-intro{padding-bottom:1rem;margin-bottom:1rem}
.article-page .sec-h{margin-top:2rem;padding-top:1rem}


/* Keep article image frames flush with the actual image pixels. */
.article-page .aimg .img{display:block;height:auto !important;min-height:0 !important;aspect-ratio:auto !important;padding:0 !important;line-height:0;overflow:hidden}
.article-page .aimg .img>img{display:block;height:auto !important;max-height:none !important}


/* Keep image blocks close to the surrounding copy. */
.article-page .aimg{margin-top:2rem;margin-bottom:1rem}


.article-page .aimg.compact-image{width:min(100%,560px)}


/* Keep the opening paragraph and following body copy tightly connected. */
.article-page .art-intro{padding-bottom:.25rem;margin-bottom:.25rem}
.article-page .ap{margin-bottom:.8rem}


.article-page .aimg.two-up{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:1rem !important;align-items:start}
.article-page .aimg.two-up .img{width:100% !important;max-width:none !important}


/* Single vertical article images sit to one side so nearby paragraphs wrap around them. */
@media (min-width: 761px){
  .article-page .aimg.tall.wrap-l,
  .article-page .aimg.tall.wrap-r{
    display:block !important;
    width:min(42%, 420px) !important;
    margin-top:.35rem !important;
    margin-bottom:1.25rem !important;
  }
  .article-page .aimg.tall.wrap-l{float:left !important;margin-left:0 !important;margin-right:2rem !important;}
  .article-page .aimg.tall.wrap-r{float:right !important;margin-left:2rem !important;margin-right:0 !important;}
  .article-page .art-col .sec-h{clear:both;}
}
@media (max-width: 760px){
  .article-page .aimg.tall.wrap-l,
  .article-page .aimg.tall.wrap-r{float:none !important;width:100% !important;margin:2rem 0 1rem !important;}
}

/* Keep wrapped image and copy close together on desktop. */
@media (min-width: 761px){
  .article-page .aimg.tall.wrap-l,
  .article-page .aimg.tall.wrap-r{width:min(34%, 320px) !important;}
  .article-page .aimg.tall.wrap-l{margin-right:1rem !important;}
  .article-page .aimg.tall.wrap-r{margin-left:1rem !important;}
}

/* Tighten the wrap gap without changing the image dimensions. */
@media (min-width: 761px){
  .article-page .aimg.tall.wrap-l{margin-right:0 !important;}
  .article-page .aimg.tall.wrap-r{margin-left:0 !important;}
}

/* Reference layout: left-aligned section heading with a compact left image and right-hand copy. */
@media (min-width: 761px){
  .article-page .art-col .sec-h,
  .article-page .art-col .sub-h{ text-align:left !important; }
  .article-page .aimg.tall.wrap-l,
  .article-page .aimg.tall.wrap-r{
    width:min(34%, 340px) !important;
    margin-top:.35rem !important;
    margin-bottom:1rem !important;
  }
  .article-page .aimg.tall.wrap-l{margin-right:1rem !important;}
  .article-page .aimg.tall.wrap-r{margin-left:1rem !important;}
  .article-page .aimg.tall.wrap-l ~ .ap,
  .article-page .aimg.tall.wrap-r ~ .ap{ text-align:left !important; }
}

/* Give the reference wrapped composition a stable image column. */
@media (min-width: 761px){
  .article-page .aimg.tall.wrap-l,
  .article-page .aimg.tall.wrap-r{width:300px !important;max-width:300px !important;}
  .article-page .aimg.tall.wrap-l{margin-right:1rem !important;}
  .article-page .aimg.tall.wrap-r{margin-left:1rem !important;}
}

/* Use the side-by-side composition on tablets and narrow desktop widths too. */
@media (min-width: 601px){
  .article-page .aimg.tall.wrap-l,
  .article-page .aimg.tall.wrap-r{
    float:left !important;
    display:block !important;
    width:300px !important;
    max-width:300px !important;
    margin:.35rem 1rem 1rem 0 !important;
  }
  .article-page .aimg.tall.wrap-r{float:right !important;margin:.35rem 0 1rem 1rem !important;}
  .article-page .art-col .sec-h{clear:both;}
}
@media (max-width:600px){
  .article-page .aimg.tall.wrap-l,
  .article-page .aimg.tall.wrap-r{float:none !important;width:100% !important;max-width:none !important;margin:2rem 0 1rem !important;}
}

/* Keep article paragraphs fully justified beside wrapped images. */
.article-page .ap,
.article-page .art-intro{text-align:justify !important;text-justify:inter-word;}

/* Keep the full first paragraph beside a wrapped vertical image. */
@media (min-width: 601px){
  .article-page .aimg.tall.wrap-l .img,
  .article-page .aimg.tall.wrap-r .img{height:360px !important;overflow:hidden;}
  .article-page .aimg.tall.wrap-l .img>img,
  .article-page .aimg.tall.wrap-r .img>img{width:100% !important;height:100% !important;object-fit:cover !important;}
}

/* Requested title pairing: Ivy Presto Display italic with Roc Grotesk-style sans text. */
.article-page .art-title .title-subject,
.article-page .art-title{font-family:'ivypresto-display','Playfair Display',Georgia,serif !important;font-style:italic !important;font-weight:300 !important;}
.article-page .art-title{letter-spacing:0 !important;}
.article-page .art-title .title-sub{font-family:'roc-grotesk',Arial,sans-serif !important;font-style:normal !important;font-weight:400 !important;letter-spacing:.01em;margin-top:.8rem !important;}


/* Adobe Roc Grotesk text pairing */
.article-page .ap,.article-page .article-body,.article-page .art-intro,.article-page .art-col{font-family:'roc-grotesk',sans-serif;}






/* White article page background */
.article-page,.article-page .art-head,.article-page .art-body{background:#fff !important;}


/* Use black text for article reading content */
.article-page .art-title .title-sub,.article-page .ap,.article-page .art-intro,.article-page .sec-h,.article-page .art-col{color:#000 !important;}


/* Adobe Fave Script Pro quotations */
.article-page blockquote,.article-page q{font-family:'fave-script-pro',sans-serif !important;font-weight:400;font-style:normal;}


/* Public Sans for article body copy only */
.article-page .ap,.article-page .art-intro,.article-page .art-col>p:not(.ed-close){font-family:'Public Sans',sans-serif !important;font-style:normal;}


/* Allow the selected Prashanti image to wrap text without clearing */
.article-page .aimg.tall.wrap-l{clear:none !important;float:left !important;margin:0 1rem 1rem 0 !important;}

/* ===== IMAGE LAYOUT FIX (all articles) =====
   1) Gallery rows (strip / pair / duo + .fx): images sit side by side at EQUAL HEIGHT,
      full picture visible (no crop, no empty beige gaps). Each image's share of the row
      is set inline (flex:<width/height>).
   2) Wrapped images (wrap-l / wrap-r): show the whole picture at a comfortable width
      instead of a narrow 360px-high cropped box. */
.article-page .aimg.fx{display:flex !important;grid-template-columns:none !important;gap:1rem !important;align-items:flex-start !important;}
.article-page .aimg.fx .img{display:block !important;min-width:0;overflow:hidden !important;height:auto !important;aspect-ratio:auto !important;}
.article-page .aimg.fx .img>img{position:static !important;display:block;width:100% !important;height:auto !important;max-height:none !important;object-fit:cover !important;}
@media(max-width:600px){
  .article-page .aimg.fx{flex-direction:column !important;gap:.8rem !important;}
  .article-page .aimg.fx .img{flex:none !important;width:100% !important;}
}
@media(min-width:601px){
  html body.article-page .art-col .aimg.wrap-l,
  html body.article-page .art-col .aimg.wrap-r{width:min(44%,440px) !important;max-width:440px !important;display:block !important;}
  html body.article-page .art-col .aimg.wrap-l .img,
  html body.article-page .art-col .aimg.wrap-r .img{height:auto !important;min-height:0 !important;aspect-ratio:auto !important;overflow:hidden !important;}
  html body.article-page .art-col .aimg.wrap-l .img>img,
  html body.article-page .art-col .aimg.wrap-r .img>img{position:static !important;width:100% !important;height:auto !important;max-height:680px !important;object-fit:cover !important;object-position:center 25% !important;display:block;}
}

/* ===== JUSTIFY BODY TEXT (all articles) ===== */
html body.article-page .art-col .ap,
html body.article-page .art-col .art-intro,
html body.article-page .art-col .aimg ~ .ap,
html body.article-page .art-col .aimg.tall.wrap-l ~ .ap,
html body.article-page .art-col .aimg.tall.wrap-r ~ .ap,
html body.article-page .art-col > p,
html body.article-page .art-col li{text-align:justify !important;text-justify:inter-word;text-align-last:left !important;hyphens:none;}