/* ============================================================
   INCREDIBLE KARNATAKA — V2  |  section.css
   Worldwide Media Corporation Group, USA
   Shared stylesheet for all 23 section (category) pages.
   Modular block system — each page mixes blocks in a varied order.
   ============================================================ */

:root{
  --ink:#1a1420;
  --gold:#96681c;
  --gold-bright:#ce9744;
  --line:var(--line);
  --muted:#6a6470;
  --ph:#000;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'DM Sans',sans-serif;font-size:18px;line-height:1.65;color:var(--ink);background:var(--surface);overflow-x:hidden;}
a{text-decoration:none;color:inherit;}

/* ===== NAV ===== */
.anav{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--surface);border-bottom:1px solid var(--line);}
.anav-inner{max-width:1180px;margin:0 auto;padding:0 2rem;height:90px;display:flex;align-items:center;justify-content:space-between;}
.anav-back{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--meta);display:flex;align-items:center;gap:6px;}
.anav-back:hover{color:var(--gold);}
/* the logo now carries width/height attributes so the header does not shift
   while it loads - width:auto keeps the aspect ratio from those attributes
   instead of letting the 1366px width attribute set the used width */
.anav-logo img{height:54px;width:auto;display:block;}
.anav-share{display:flex;align-items:center;gap:.4rem;}
.sbtn{width:30px;height:30px;border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#555;font-size:.68rem;font-family:'DM Sans',sans-serif;transition:all .2s;}
.sbtn:hover{border-color:var(--gold);color:var(--gold);}

/* ===== FLOATING SHARE RAIL ===== */
.fshare{position:fixed;left:1rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.35rem;z-index:100;}
.fsb{width:34px;height:34px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#555;font-size:.68rem;transition:all .2s;}
.fsb:hover{background:var(--gold);color:#fff;border-color:var(--gold);}

/* ===== SECTION HEADER ===== */
.sec-hero{max-width:1180px;margin:0 auto;padding:120px 2rem 0;}
.sec-crumb{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--meta);margin-bottom:1rem;}
.sec-crumb a{color:var(--meta);}
.sec-crumb a:hover{color:var(--gold);}
.sec-title{font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.1;margin-bottom:.8rem;}
.sec-sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.2rem;color:var(--muted);max-width:640px;padding-bottom:2rem;border-bottom:1px solid var(--line);}

/* ===== SHELL ===== */
.blocks{max-width:1180px;margin:0 auto;padding:0 2rem 4rem;}
.blk{margin-top:3.5rem;}
.blk-hd{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  border-bottom:1px solid var(--line);padding-bottom:.8rem;margin-bottom:1.8rem;}
.blk-hd h2{font-family:'Playfair Display',Georgia,serif;font-size:1.5rem;font-weight:400;}
.blk-hd .more{font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid var(--gold);padding-bottom:2px;white-space:nowrap;}
.blk-hd .more:hover{color:var(--gold);}

/* shared atoms */
.kick{font-size:.5rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem;}
.ttl{font-family:'Playfair Display',Georgia,serif;font-weight:400;line-height:1.25;transition:color .2s;}
.dek{font-size:.8rem;line-height:1.75;color:var(--muted);margin-top:.6rem;}
.meta{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--meta);margin-top:.9rem;}
.rd{display:inline-block;margin-top:1rem;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid var(--gold);padding-bottom:2px;}
.img{background:var(--ph);display:block;position:relative;overflow:hidden;}

/* ===== BLOCK: LEAD FEATURE ===== */
.b-lead{display:grid;grid-template-columns:1.55fr 1fr;gap:2.6rem;align-items:center;}
.b-lead .img{height:420px;}
.b-lead .ttl{font-size:2rem;}
.b-lead a:hover .ttl{color:var(--gold);}

/* ===== BLOCK: TRIO ===== */
.b-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
.b-trio .img{height:220px;margin-bottom:1rem;}
.b-trio .ttl{font-size:1.2rem;}
.b-trio a:hover .ttl{color:var(--gold);}

/* ===== BLOCK: QUAD ===== */
.b-quad{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;}
.b-quad .img{height:170px;margin-bottom:.9rem;}
.b-quad .ttl{font-size:1.02rem;}
.b-quad a:hover .ttl{color:var(--gold);}

/* ===== BLOCK: LIST + SIDEBAR ===== */
.b-listside{display:grid;grid-template-columns:1fr 300px;gap:3rem;align-items:start;}
.ls-row{display:grid;grid-template-columns:210px 1fr;gap:1.5rem;align-items:center;
  padding:1.5rem 0;border-bottom:1px solid var(--line);}
.ls-row:first-child{padding-top:0;}
.ls-row:last-child{border-bottom:none;}
.ls-row .img{height:140px;}
.ls-row .ttl{font-size:1.25rem;}
.ls-row:hover .ttl{color:var(--gold);}
.ls-side{border:1px solid var(--line);padding:1.4rem 1.3rem;}
.ls-side .sh{font-size:.52rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
  padding-bottom:.8rem;border-bottom:1px solid var(--line);margin-bottom:.4rem;}
.ls-item{display:grid;grid-template-columns:58px 1fr;gap:.9rem;align-items:center;
  padding:.85rem 0;border-bottom:1px solid var(--line-soft);}
.ls-item:last-of-type{border-bottom:none;}
.ls-item .img{height:52px;}
.ls-item .ttl{font-size:.9rem;}
.ls-item:hover .ttl{color:var(--gold);}
.ls-all{display:block;text-align:center;background:var(--ink);color:#fff;margin-top:1rem;
  padding:.7rem;font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;}
.ls-all:hover{background:var(--gold);color:var(--ink);}

/* ===== BLOCK: DUO — one tall, two stacked ===== */
.b-duo{display:grid;grid-template-columns:1fr 1fr;gap:2rem;}
.b-duo .tall .img{height:480px;}
.b-duo .tall .img::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.18) 55%,transparent 100%);}
.b-duo .tall .cap{position:absolute;left:1.6rem;right:1.6rem;bottom:1.4rem;z-index:2;}
.b-duo .tall .cap .kick,.b-duo .tall .cap .ttl{display:block;}
.b-duo .tall .cap .ttl{font-size:1.7rem;color:#fff;}
.b-duo .stack{display:grid;grid-template-rows:1fr 1fr;gap:2rem;}
.b-duo .stack .img{height:170px;margin-bottom:.9rem;}
.b-duo .stack .ttl{font-size:1.15rem;}
.b-duo a:hover .ttl{color:var(--gold);}

/* ===== BLOCK: PROMO BAND ===== */
.b-promo{background:var(--ink);padding:3.2rem 2.5rem;text-align:center;}
.b-promo .kick{letter-spacing:.4em;}
.b-promo h3{font-family:'Playfair Display',Georgia,serif;font-size:2rem;font-weight:400;color:#fff;margin-bottom:.6rem;}
.b-promo h3 em{color:var(--gold);}
.b-promo p{font-size:.78rem;color:rgba(255,255,255,.55);max-width:520px;margin:0 auto 1.8rem;line-height:1.8;}
.b-promo .btn{display:inline-block;border:1px solid var(--gold);color:var(--gold);
  padding:.85rem 2.4rem;font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;}
.b-promo .btn:hover{background:var(--gold);color:var(--ink);}

/* ===== BLOCK: QUOTE BAND ===== */
.b-quote{border-top:2px solid var(--ink);border-bottom:1px solid var(--line);padding:3rem 0;text-align:center;}
.b-quote blockquote{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.5;max-width:760px;margin:0 auto 1rem;}
.b-quote .by{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);}

/* ===== FOOTER ===== */
.ftr{background:var(--ink);color:#cfc7d6;padding:3.5rem 2rem 1.8rem;margin-top:4rem;}
.ftr-top{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.3fr 2.1fr 1fr 1fr 1.3fr;gap:2rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.12);}
.ftr-brand{font-family:'Playfair Display',Georgia,serif;font-size:1.6rem;color:#fff;margin-bottom:.9rem;}
.ftr-brand span{color:var(--gold);}
.ftr-tag{font-size:.72rem;line-height:1.8;color:#b8aec4;margin-bottom:1.2rem;}
.ftr-social{display:flex;gap:.5rem;}
.ftr-social a{width:32px;height:32px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.68rem;color:#cfc7d6;transition:all .25s;}
.ftr-social a:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);}
.ftr-h{font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;}
.ftr-top ul{list-style:none;}
.ftr-top li{margin-bottom:.6rem;}
.ftr-top li a{font-size:.76rem;color:#cfc7d6;transition:color .2s;}
.ftr-top li a:hover{color:#fff;}
.ftr-news-t{font-size:.72rem;line-height:1.7;color:#b8aec4;margin-bottom:.9rem;}
.ftr-news form{display:flex;border:1px solid rgba(255,255,255,.2);}
.ftr-news input{flex:1;background:none;border:none;padding:.6rem .7rem;color:#fff;font-family:inherit;font-size:.72rem;outline:none;}
.ftr-news button{background:var(--gold);color:var(--ink);border:none;padding:0 .9rem;font-size:.68rem;cursor:pointer;font-family:inherit;}
.ftr-bottom{max-width:1180px;margin:0 auto;padding-top:1.6rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.8rem;}
.ftr-copy{font-size:.66rem;color:#b8aec4;}
.ftr-copy span{color:#7d7488;}
.ftr-legal a{font-size:.64rem;color:#b8aec4;margin-left:1.3rem;}
.ftr-legal a:hover{color:var(--gold);}

/* ===== TOAST ===== */
.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:.6rem 1.4rem;font-size:.62rem;letter-spacing:.1em;opacity:0;pointer-events:none;transition:opacity .3s;z-index:9999;}
.toast.show{opacity:1;}

/* ===== RESPONSIVE ===== */
@media(max-width:1000px){
  .b-lead{grid-template-columns:1fr;gap:1.6rem;}
  .b-lead .img{height:300px;}
  .b-lead .ttl{font-size:1.6rem;}
  .b-listside{grid-template-columns:1fr;gap:2.4rem;}
  .b-quad{grid-template-columns:1fr 1fr;}
  .fshare{display:none;}
}
/* The footer's five columns do not fit a tablet - the newsletter column was
   pushed off the right edge between 760px and the desktop layout. */
@media(max-width:1000px){
  .ftr-top{grid-template-columns:1fr 1fr 1fr;gap:1.6rem;}
  .ftr-top>*{min-width:0;}
  .ftr-top ul{column-count:1 !important;}
  .ftr-news form{flex-wrap:wrap;}
  .ftr-news input{min-width:0;}
}
@media(max-width:760px){
  .anav-inner{padding:0 1.25rem;height:76px;gap:.75rem;}
  .anav-logo img{height:42px;width:auto;}
  /* the row must be allowed to give way, or it pushes the page sideways */
  .anav-back{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;}
  .anav-share{flex:0 0 auto;gap:.3rem;}
  .sec-hero{padding:100px 1.25rem 0;}
  .blocks{padding:0 1.25rem 3rem;}
  .blk{margin-top:2.6rem;}
  .b-trio{grid-template-columns:1fr;gap:2rem;}
  .b-duo{grid-template-columns:1fr;}
  .b-duo .tall .img{height:300px;}
  .b-duo .stack{gap:1.6rem;}
  .ls-row{grid-template-columns:120px 1fr;gap:1rem;}
  .ls-row .img{height:90px;}
  .ls-row .ttl{font-size:1.05rem;}
  .ftr-top{grid-template-columns:1fr 1fr;gap:1.5rem;}
  /* a grid item will not shrink below its min-content width unless told to,
     and the Sections list carries an inline column-count:2 - together they
     pushed the footer past the right edge of the screen */
  .ftr-top>*{min-width:0;}
  .ftr-top ul{column-count:1 !important;}
  .ftr-bottom{flex-direction:column;text-align:center;}
  .ftr-legal a{margin:0 .6rem;}
}
@media(max-width:560px){
  /* The header row (back link + logo + theme toggle + four share buttons) was
     wider than a phone screen, so every article and section page scrolled
     sideways and the copy-link button was cut off the right edge.
     The three social buttons are duplicated in the page's own share row, so
     the header keeps only the toggle and the copy link. */
  .anav-back{font-size:.5rem;letter-spacing:.1em;gap:4px;}
  .anav-share .sbtn:not(:last-child){display:none;}
  .anav-logo img{height:36px;width:auto;}
}
@media(max-width:480px){
  .b-quad{grid-template-columns:1fr;}
  .ls-row{grid-template-columns:1fr;}
  .ls-row .img{height:180px;}
}

a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* ===== V2 CONTRAST TOKENS =====
   --gold is AA-compliant on light backgrounds (4.89:1 on white).
   Dark containers re-scope it to the brighter original (6.98:1 on ink). */
.ftr,
.b-promo,
.b-duo .tall{--gold:#ce9744;}

/* ===== SKIP LINK (WCAG 2.4.1) ===== */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100000;background:var(--band);color:#fff;
  padding:.8rem 1.4rem;font-family:'DM Sans',sans-serif;font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;text-decoration:none;}
.skip-link:focus{left:0;}
main{display:block;}

/* ===== 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;}

/* White section page background */
body{background:#fff !important;}


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