/* ============================================================
   NAMMA KUNDAPURA — Encyclopedia of Coastal Karnataka
   Shared stylesheet (English only)
   ============================================================ */
:root{
  --ocean-900:#062b3a; --ocean-800:#0a3f54; --ocean-700:#0e556f; --ocean-600:#126d8c;
  --ocean-500:#1a90b0; --ocean-400:#3aa7c4; --ocean-300:#6fc4d8; --ocean-100:#d3edf3;
  --sun-600:#d8531c; --sun-500:#ef6c2b; --sun-400:#f78a4c; --sun-200:#fbcfa8;
  --sand-500:#d8c19a; --sand-300:#ece0c8; --sand-200:#f3ead9; --sand-100:#f9f3e9; --shell:#fffaf2;
  --palm-600:#3f7a4f; --palm-500:#58966a;
  --ink-900:#14242c; --ink-700:#2f4750; --ink-500:#5a6f77; --ink-300:#8fa1a8;
  --link:#0e556f; --link-hover:#d8531c; --line:#e6dcc8;
  --maxw:1240px;
  --r-sm:10px; --r-md:16px; --r-lg:26px;
  --shadow-sm:0 2px 10px rgba(8,49,64,.06);
  --shadow-md:0 12px 34px rgba(8,49,64,.10);
  --shadow-lg:0 30px 70px rgba(8,49,64,.18);
  --font-display:"Bricolage Grotesque","Hanken Grotesk",sans-serif;
  --font-body:"Hanken Grotesk",system-ui,sans-serif;
  --font-serif:"Spectral",Georgia,serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);background:var(--shell);color:var(--ink-900);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{display:block;max-width:100%;}
a{color:var(--link);text-decoration:none;}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:700;line-height:1.1;letter-spacing:-.015em;color:var(--ocean-900);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

/* ---------- HEADER ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,250,242,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
.hbar{display:flex;align-items:center;gap:22px;padding:12px 32px;max-width:1400px;margin:0 auto;}
.logo{display:flex;align-items:baseline;gap:9px;flex:none;}
.logo .mark{font-family:var(--font-display);font-weight:800;font-size:21px;letter-spacing:-.03em;color:var(--ocean-800);}
.logo .mark em{color:var(--sun-500);font-style:normal;}
.logo .sub{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-300);}
.hsearch{flex:1;max-width:520px;position:relative;}
.hsearch input{width:100%;border:1px solid var(--line);background:#fff;border-radius:999px;padding:11px 18px 11px 42px;font-family:var(--font-body);font-size:14px;outline:none;transition:border .25s,box-shadow .25s;}
.hsearch input:focus{border-color:var(--ocean-300);box-shadow:0 0 0 4px var(--ocean-100);}
.hsearch svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--ink-300);}
.hsearch .results{position:absolute;top:46px;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-md);overflow:hidden;display:none;z-index:50;}
.hsearch .results.show{display:block;}
.hsearch .results a{display:block;padding:11px 18px;font-size:14px;color:var(--ink-900);border-bottom:1px solid var(--sand-200);}
.hsearch .results a:last-child{border-bottom:none;}
.hsearch .results a:hover{background:var(--sand-100);color:var(--sun-600);}
.hsearch .results .cat{font-size:11px;color:var(--ink-300);text-transform:uppercase;letter-spacing:.08em;}
.hsearch .results .none{padding:14px 18px;color:var(--ink-300);font-size:14px;}
.hbtn{flex:none;display:inline-flex;align-items:center;gap:8px;background:var(--sun-500);color:#fff;font-weight:700;font-size:14px;padding:10px 18px;border-radius:999px;border:none;cursor:pointer;transition:background .25s,transform .25s;}
.hbtn:hover{background:var(--sun-600);transform:translateY(-1px);}
/* category nav strip */
.catnav{border-top:1px solid var(--line);background:rgba(255,255,255,.5);}
.catnav .row{display:flex;gap:4px;max-width:1400px;margin:0 auto;padding:0 32px;overflow-x:auto;}
.catnav a{white-space:nowrap;font-size:13.5px;font-weight:600;color:var(--ink-700);padding:11px 14px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;}
.catnav a:hover,.catnav a.active{color:var(--sun-600);border-bottom-color:var(--sun-500);}

/* ---------- BREADCRUMB ---------- */
.breadcrumb{font-size:13px;color:var(--ink-500);padding:18px 0 0;}
.breadcrumb a{color:var(--link);} .breadcrumb a:hover{color:var(--link-hover);}
.breadcrumb span{color:var(--ink-300);margin:0 7px;}

/* ---------- ARTICLE LAYOUT ---------- */
.article{display:grid;grid-template-columns:230px minmax(0,1fr) 340px;gap:40px;padding:24px 0 80px;align-items:start;}
.toc{position:sticky;top:120px;font-size:14px;max-height:calc(100vh - 150px);overflow-y:auto;}
.toc h4{font-family:var(--font-body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-300);margin-bottom:12px;}
.toc ul{list-style:none;border-left:2px solid var(--line);}
.toc li a{display:block;padding:7px 0 7px 14px;margin-left:-2px;color:var(--ink-500);border-left:2px solid transparent;transition:color .2s,border-color .2s;}
.toc li a:hover{color:var(--ocean-700);}
.toc li a.active{color:var(--sun-600);border-left-color:var(--sun-500);font-weight:600;}
.toc li.sub a{padding-left:28px;font-size:13px;}

.content{min-width:0;}
.article-title{font-size:clamp(34px,5vw,52px);line-height:1.04;}
.article-kicker{font-size:14px;color:var(--ink-500);font-style:italic;font-family:var(--font-serif);margin:10px 0 0;padding-bottom:18px;border-bottom:1px solid var(--line);}
.content h2{font-size:27px;margin:42px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line);scroll-margin-top:120px;}
.content h3{font-size:20px;margin:28px 0 10px;color:var(--ocean-800);scroll-margin-top:120px;}
.content p{margin-bottom:16px;font-size:16.5px;color:var(--ink-900);}
.content p.lead{font-size:19px;line-height:1.6;}
.content a{color:var(--link);border-bottom:1px solid rgba(14,85,111,.25);transition:color .2s,border-color .2s;}
.content a:hover{color:var(--link-hover);border-bottom-color:var(--link-hover);}
.content ul,.content ol{margin:0 0 18px 22px;} .content li{margin-bottom:8px;font-size:16.5px;}
.content figure{margin:24px 0;}
.content figure img{border-radius:var(--r-md);box-shadow:var(--shadow-sm);width:100%;}
.content figcaption{font-size:13px;color:var(--ink-500);margin-top:8px;font-style:italic;}
.content blockquote{border-left:4px solid var(--sun-400);background:var(--sand-100);padding:16px 22px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:22px 0;font-family:var(--font-serif);font-size:18px;font-style:italic;color:var(--ink-700);}
.hatnote{font-size:14px;color:var(--ink-500);font-style:italic;background:var(--sand-100);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 16px;margin:6px 0 20px;}
.hatnote a{font-style:normal;}

/* media placeholder fallback */
.media{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--ocean-500),var(--ocean-800));}
.media.warm{background:linear-gradient(135deg,var(--sun-400),var(--sun-600));}
.media.sand{background:linear-gradient(135deg,var(--sand-300),var(--sand-500));}
.media.palm{background:linear-gradient(135deg,var(--palm-500),var(--ocean-700));}
.media img{width:100%;height:100%;object-fit:cover;}
.media .ph-label{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.55);font-size:12px;letter-spacing:.12em;text-transform:uppercase;z-index:0;}

/* ---------- INFOBOX ---------- */
.infobox{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);font-size:14px;position:sticky;top:120px;}
.infobox .ib-title{background:var(--ocean-800);color:#fff;text-align:center;padding:14px 16px;font-family:var(--font-display);font-weight:700;font-size:18px;}
.infobox .ib-sub{text-align:center;font-size:12px;color:var(--ink-500);padding:8px 16px;background:var(--sand-100);font-style:italic;border-bottom:1px solid var(--line);}
.infobox .ib-media{height:190px;} .infobox .ib-media .ph-label{font-size:11px;}
.infobox .ib-cap{text-align:center;font-size:12px;color:var(--ink-500);padding:8px 14px;border-bottom:1px solid var(--line);font-style:italic;}
.infobox dl{display:grid;}
.infobox .ib-head{background:var(--sand-200);color:var(--ocean-800);font-weight:700;text-align:center;padding:8px 14px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;}
.infobox .ib-row{display:grid;grid-template-columns:42% 58%;border-bottom:1px solid var(--sand-200);}
.infobox .ib-row:last-child{border-bottom:none;}
.infobox dt{padding:9px 14px;font-weight:700;color:var(--ink-700);background:var(--sand-100);}
.infobox dd{padding:9px 14px;color:var(--ink-900);}

/* ---------- "See also" / references / categories ---------- */
.seealso{background:var(--sand-100);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 24px;margin:30px 0;}
.seealso h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--sun-600);font-family:var(--font-body);margin-bottom:12px;}
.seealso ul{columns:2;margin-left:18px;} .seealso li{margin-bottom:6px;}
.refs{font-size:13.5px;color:var(--ink-500);counter-reset:r;}
.refs li{margin-bottom:7px;}
.cats{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-500);display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.cats .lbl{font-weight:700;color:var(--ink-700);}
.cats a{background:var(--ocean-100);color:var(--ocean-700);padding:4px 12px;border-radius:999px;border:none;font-weight:600;}
.cats a:hover{background:var(--ocean-300);color:#fff;}

/* article nav prev/next */
.artnav{display:flex;justify-content:space-between;gap:16px;margin-top:34px;flex-wrap:wrap;}
.artnav a{flex:1;min-width:220px;border:1px solid var(--line);border-radius:var(--r-md);padding:16px 20px;background:#fff;transition:border .2s,transform .2s,box-shadow .2s;}
.artnav a:hover{border-color:var(--ocean-300);transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.artnav .dir{font-size:12px;color:var(--ink-300);text-transform:uppercase;letter-spacing:.08em;}
.artnav .ttl{font-family:var(--font-display);font-weight:700;color:var(--ocean-800);font-size:17px;margin-top:3px;}
.artnav a.next{text-align:right;}

/* ---------- PRESENTED BY ---------- */
.presented-by{background:var(--sand-200);border-top:1px solid var(--line);}
.pb-inner{display:flex;flex-direction:column;align-items:center;gap:12px;padding:34px 32px;text-align:center;}
.pb-label{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-500);}
.pb-logo{display:inline-block;transition:transform .3s var(--ease),opacity .3s;}
.pb-logo:hover{transform:translateY(-2px);}
.pb-logo img{height:74px;width:auto;display:block;}
@media (max-width:560px){.pb-logo img{height:58px;}}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--ocean-900);color:rgba(255,255,255,.7);padding:64px 0 28px;margin-top:0;}
.foot-top{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:36px;}
.foot-brand .mark{font-family:var(--font-display);font-weight:800;font-size:26px;color:#fff;}
.foot-brand .mark em{color:var(--sun-400);font-style:normal;}
.foot-brand p{margin-top:14px;max-width:300px;font-size:14px;}
.site-footer h5{color:#fff;font-family:var(--font-body);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;}
.site-footer ul{list-style:none;display:grid;gap:9px;}
.site-footer ul a{color:rgba(255,255,255,.7);font-size:14px;transition:color .2s,padding .2s;border:none;}
.site-footer ul a:hover{color:var(--sun-400);padding-left:4px;}
.foot-bottom{margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.07s;} .reveal.d2{transition-delay:.14s;} .reveal.d3{transition-delay:.21s;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .article{grid-template-columns:minmax(0,1fr) 320px;}
  .toc{display:none;}
  .foot-top{grid-template-columns:1fr 1fr 1fr;}
}
@media (max-width:820px){
  .wrap{padding:0 20px;} .hbar{padding:10px 20px;flex-wrap:wrap;}
  .hsearch{order:3;max-width:none;flex-basis:100%;}
  .article{grid-template-columns:1fr;}
  .infobox{position:static;max-width:420px;margin:0 auto 10px;}
  .seealso ul{columns:1;}
  .foot-top{grid-template-columns:1fr 1fr;}
}