/* ============================================================
   RESET & TOKENS
============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-behavior:smooth;scroll-padding-top:96px;
  -webkit-tap-highlight-color:transparent;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
}
:root{
  /* Palette: Deep Indigo + Champagne Gold */
  --ink-50:#f5f3ee;--ink-100:#e8e3d6;--ink-200:#c9c2b0;
  --ink-500:#5a5444;--ink-700:#2a2418;--ink-900:#0e0b06;
  --gold-300:#e8c87a;--gold-500:#c9a04a;--gold-700:#8c6a26;
  --indigo-400:#6b7fb5;--indigo-600:#3b4e87;--indigo-800:#1a2547;--indigo-900:#0d1428;
  --rose-500:#b8455a;--teal-500:#3a8a82;
  
  --bg:#fbf9f4;
  --bg-elev:#ffffff;
  --bg-deep:#f0ece1;
  --surface:#ffffff;
  --surface-2:#f5f3ee;
  --text:#1a1812;
  --text-soft:#4a4536;
  --text-mute:#7a7460;
  --border:#dcd5c2;
  --border-strong:#b8af96;
  
  --accent:var(--indigo-800);
  --accent-soft:var(--indigo-600);
  --highlight:var(--gold-500);
  --highlight-soft:var(--gold-300);
  --danger:var(--rose-500);
  
  --link:var(--indigo-600);
  --link-hover:var(--indigo-800);
  
  --radius-sm:6px;
  --radius:12px;
  --radius-lg:20px;
  --radius-pill:999px;
  
  --shadow-xs:0 1px 2px rgba(14,11,6,.06);
  --shadow-sm:0 2px 6px rgba(14,11,6,.08),0 1px 2px rgba(14,11,6,.04);
  --shadow:0 6px 18px rgba(14,11,6,.10),0 2px 4px rgba(14,11,6,.06);
  --shadow-lg:0 18px 48px rgba(14,11,6,.14),0 6px 12px rgba(14,11,6,.08);
  --shadow-gold:0 6px 24px rgba(201,160,74,.32);
  
  --serif:"Source Serif Pro",Charter,"Iowan Old Style","Apple Garamond",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --tap:48px;
  --header-h:64px;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.34,1.32,.64,1);
}
@media(prefers-color-scheme:dark){
  :root{
    --bg:#0d1018;
    --bg-elev:#161b28;
    --bg-deep:#080a12;
    --surface:#1a2030;
    --surface-2:#222a3c;
    --text:#ecebe5;
    --text-soft:#c4c2b8;
    --text-mute:#8a8678;
    --border:#2d3548;
    --border-strong:#3f4860;
    --accent:var(--gold-500);
    --accent-soft:var(--gold-300);
    --highlight:var(--gold-300);
    --link:var(--gold-300);
    --link-hover:var(--gold-500);
    --shadow-xs:0 1px 2px rgba(0,0,0,.4);
    --shadow-sm:0 2px 6px rgba(0,0,0,.5);
    --shadow:0 8px 24px rgba(0,0,0,.5);
    --shadow-lg:0 24px 60px rgba(0,0,0,.6);
  }
}
@media(prefers-contrast:more){
  :root{--border:#000;--border-strong:#000;--text-mute:#3a3a3a}
}

body{
  font-family:var(--sans);
  font-size:16px;line-height:1.65;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-wrap:break-word;
  overflow-x:hidden;
  min-height:100vh;min-height:100dvh;
  background-image:
    radial-gradient(circle at 18% -10%,rgba(201,160,74,.06),transparent 50%),
    radial-gradient(circle at 95% 110%,rgba(59,78,135,.05),transparent 55%);
}

img,picture,svg,video{display:block;max-width:100%;height:auto}
p{margin:0 0 1em}
a{color:var(--link);text-decoration:none;touch-action:manipulation;transition:color .18s var(--ease-out)}
a:hover{color:var(--link-hover)}
a:focus-visible{outline:2.5px solid var(--highlight);outline-offset:3px;border-radius:3px}
button{font:inherit;cursor:pointer;border:0;background:0 0;color:inherit;touch-action:manipulation;-webkit-appearance:none;appearance:none}
input{font-size:16px;font-family:inherit}

h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.2;letter-spacing:-.015em;color:var(--text)}
h1{font-size:clamp(1.625rem,5vw,2.625rem);margin:0 0 .5em}
h2{font-size:clamp(1.375rem,3.6vw,1.875rem);margin:0 0 .5em}
h3{font-size:clamp(1.0625rem,2.6vw,1.25rem);margin:0 0 .5em}
h4{font-size:1.0625rem;margin:0 0 .35em}

::selection{background:var(--highlight-soft);color:var(--ink-900)}

[data-motion="reduce"] *,
[data-motion="reduce"] *::before,
[data-motion="reduce"] *::after{
  animation-duration:.01ms!important;
  transition-duration:.01ms!important;
  scroll-behavior:auto!important;
}

/* ============================================================
   UTILITIES & SHELL
============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{
  position:fixed;top:.5rem;left:.5rem;z-index:9999;
  background:var(--accent);color:var(--bg);
  padding:.75rem 1.25rem;font-weight:700;
  border-radius:var(--radius-sm);
  transform:translateY(-200%);
  transition:transform .2s var(--ease-out);
}
.skip-link:focus{transform:translateY(0);color:var(--bg)}

.container{
  width:100%;max-width:1280px;margin:0 auto;
  padding:0 clamp(1rem,3.5vw,1.5rem);
  padding-left:max(clamp(1rem,3.5vw,1.5rem),var(--safe-left));
  padding-right:max(clamp(1rem,3.5vw,1.5rem),var(--safe-right));
}

.progress-bar{
  position:fixed;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--highlight),var(--rose-500),var(--accent-soft));
  transform:scaleX(0);transform-origin:left;
  z-index:300;pointer-events:none;
  will-change:transform;
  border-bottom-right-radius:3px;
}

/* ============================================================
   TOP — Announcement + Glass Floating Header
============================================================ */
.announcement{
  background:linear-gradient(95deg,var(--indigo-900) 0%,var(--indigo-800) 60%,var(--gold-700) 130%);
  color:var(--ink-50);
  padding:.55rem 0 .55rem;
  padding-top:max(.55rem,calc(var(--safe-top) + .35rem));
  font-size:.8125rem;
  letter-spacing:.01em;
  border-bottom:1px solid rgba(232,200,122,.18);
  position:relative;overflow:hidden;
}
.announcement::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 8% 50%,rgba(232,200,122,.15),transparent 30%),
    radial-gradient(circle at 92% 50%,rgba(232,200,122,.12),transparent 30%);
  pointer-events:none;
}
.announcement .container{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  gap:.65rem;flex-wrap:wrap;line-height:1.45;
}
.announcement a{
  color:var(--highlight-soft);font-weight:700;
  text-decoration:none;white-space:nowrap;
  padding:.18rem .55rem;border-radius:var(--radius-pill);
  border:1px solid rgba(232,200,122,.4);
  transition:background .2s var(--ease-out),color .2s;
}
.announcement a:hover{background:var(--highlight);color:var(--ink-900)}

.header{
  position:sticky;top:0;z-index:100;
  background:rgba(251,249,244,.78);
  border-bottom:1px solid var(--border);
  transition:transform .35s var(--ease-out),background .25s,box-shadow .25s,padding .25s;
  will-change:transform;
}
@supports(backdrop-filter:blur(20px)){
  .header{
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    background:rgba(251,249,244,.72);
  }
  @media(prefers-color-scheme:dark){
    .header{background:rgba(13,16,24,.78)}
  }
}
.header.is-compact{
  box-shadow:var(--shadow-sm);
  background:rgba(251,249,244,.92);
}
@media(prefers-color-scheme:dark){
  .header.is-compact{background:rgba(13,16,24,.92)}
}
.header.is-hidden{transform:translateY(-100%)}

.header::after{
  content:"";display:block;height:1px;
  background:linear-gradient(90deg,transparent,var(--highlight) 30%,var(--accent-soft) 70%,transparent);
  opacity:.4;
}

.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:.65rem clamp(1rem,3.5vw,1.5rem);gap:.65rem;
  max-width:1280px;margin:0 auto;
  padding-left:max(clamp(1rem,3.5vw,1.5rem),var(--safe-left));
  padding-right:max(clamp(1rem,3.5vw,1.5rem),var(--safe-right));
  transition:padding .25s var(--ease-out);
}
.header.is-compact .nav{padding-top:.4rem;padding-bottom:.4rem}

.brand{
  display:flex;align-items:center;gap:.65rem;
  font-weight:700;color:var(--text);text-decoration:none;
  min-height:var(--tap);flex-shrink:0;
  font-family:var(--serif);
}
.brand img{
  width:40px;height:40px;border-radius:10px;
  box-shadow:var(--shadow-xs);
  transition:transform .3s var(--ease-spring);
}
.brand:hover img{transform:rotate(-6deg) scale(1.05)}
.brand-text{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.brand-text>span:first-child{
  font-size:1.05rem;letter-spacing:-.01em;
  background:linear-gradient(135deg,var(--accent),var(--highlight));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.brand-sub{
  font-size:.68rem;color:var(--text-mute);
  font-weight:500;margin-top:1px;
  font-family:var(--mono);letter-spacing:.02em;
}

.nav-menu{display:none}
.nav-menu a{
  position:relative;
  color:var(--text-soft);font-weight:600;font-size:.88rem;
  text-decoration:none;padding:.5rem .85rem;
  border-radius:var(--radius-sm);
  min-height:var(--tap);display:inline-flex;align-items:center;
  transition:color .18s,background .18s;
}
.nav-menu a::before{
  content:"";position:absolute;left:50%;bottom:.25rem;
  width:0;height:2px;background:var(--highlight);
  transform:translateX(-50%);
  transition:width .3s var(--ease-out);
  border-radius:2px;
}
.nav-menu a:hover{color:var(--text)}
.nav-menu a:hover::before{width:60%}
.nav-menu a.active{color:var(--accent);background:var(--surface-2)}
.nav-menu a.active::before{width:60%;background:var(--accent)}

.nav-actions{display:flex;gap:.4rem;align-items:center;flex-shrink:0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.6rem 1.05rem;border-radius:var(--radius-pill);
  font-weight:600;font-size:.86rem;text-decoration:none;
  min-height:var(--tap);white-space:nowrap;
  transition:transform .15s,box-shadow .2s,background .2s,color .2s;
  letter-spacing:.005em;
}
.btn:active{transform:scale(.96)}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--indigo-600));
  color:#fff!important;
  box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-primary:hover{box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.2);transform:translateY(-1px)}
.btn-ghost{
  background:transparent;
  color:var(--text)!important;
  border:1.5px solid var(--border-strong);
}
.btn-ghost:hover{border-color:var(--accent);background:var(--surface-2)}

.menu-toggle{
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;color:var(--text);
  min-width:var(--tap);min-height:var(--tap);
  border-radius:var(--radius-sm);
  transition:background .2s;
}
.menu-toggle:hover,.menu-toggle:focus-visible{background:var(--surface-2)}

@media(max-width:380px){.nav-actions .btn-login,.brand-sub{display:none}}
@media(min-width:980px){
  .nav-menu{display:flex;gap:.15rem;list-style:none;margin:0;padding:0}
  .menu-toggle{display:none}
  .brand img{width:44px;height:44px}
}

.nav-collapse{
  display:none;width:100%;
  padding:.5rem 1rem 1rem;
  border-top:1px solid var(--border);
  max-height:calc(100vh - var(--header-h));
  max-height:calc(100dvh - var(--header-h));
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-bottom:max(1rem,var(--safe-bottom));
  background:var(--bg-elev);
}
.nav-collapse:not([hidden]){display:block;animation:slideDown .25s var(--ease-out)}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.nav-collapse ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.125rem}
.nav-collapse a{
  display:flex;align-items:center;gap:.5rem;
  padding:.9rem 1rem;border-radius:var(--radius-sm);
  color:var(--text);text-decoration:none;font-weight:500;
  min-height:var(--tap);font-size:.95rem;
  border-left:3px solid transparent;
}
.nav-collapse a:hover,.nav-collapse a:focus-visible{
  background:var(--surface-2);
  border-left-color:var(--highlight);
}

/* ============================================================
   SECTIONS
============================================================ */
.section{
  padding:clamp(2rem,5vw,3.5rem) 0;
  position:relative;
  content-visibility:auto;
  contain-intrinsic-size:1px 800px;
}
.section-soft{background:var(--bg-deep)}
.section+.section{border-top:1px solid var(--border)}

.section-title{
  margin-bottom:1.75rem;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:.75rem;flex-wrap:wrap;
  padding-bottom:1rem;
  border-bottom:1px solid var(--border);
}
.section-label{
  display:inline-flex;align-items:center;gap:.5rem;
  color:var(--accent);font-weight:700;
  font-size:.72rem;text-transform:uppercase;
  letter-spacing:.14em;margin-bottom:.4rem;
  font-family:var(--mono);
}
.section-label::before{
  content:"";width:24px;height:2px;background:var(--highlight);
}
.view-all{
  font-size:.85rem;font-weight:600;
  color:var(--accent);text-decoration:none;
  min-height:var(--tap);display:inline-flex;align-items:center;gap:.35rem;
  padding:.45rem .9rem;border-radius:var(--radius-pill);
  border:1px solid var(--border-strong);
  transition:all .2s var(--ease-out);
}
.view-all:hover{
  background:var(--accent);color:var(--bg);
  border-color:var(--accent);
  transform:translateX(2px);
}

/* ============================================================
   HERO — Editorial Magazine
============================================================ */
.hero{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--ink-900);
  aspect-ratio:16/10;
  box-shadow:var(--shadow-lg);
  contain:layout style paint;
  isolation:isolate;
}
@media(min-width:768px){.hero{aspect-ratio:1200/545}}
.hero>picture{display:block;width:100%;height:100%}
.hero>picture>img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease-out);
}
.hero:hover>picture>img{transform:scale(1.03)}
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(0deg,rgba(13,20,40,.95) 0%,rgba(13,20,40,.55) 38%,rgba(13,20,40,.05) 75%),
    linear-gradient(135deg,rgba(201,160,74,.12),transparent 50%);
  padding:clamp(1.25rem,4vw,2.5rem);
  display:flex;flex-direction:column;justify-content:flex-end;
  color:#fff;
}
.hero h1{
  color:#fff;margin-bottom:.5rem;
  font-size:clamp(1.25rem,4.5vw,2.5rem);
  line-height:1.15;letter-spacing:-.02em;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
  max-width:42ch;
}
.hero h1 a{color:#fff;text-decoration:none;background-image:linear-gradient(transparent 96%,var(--highlight) 0);background-size:0 100%;background-repeat:no-repeat;transition:background-size .5s var(--ease-out)}
.hero h1 a:hover{background-size:100% 100%}
.hero p{
  color:rgba(255,255,255,.88);margin:0 0 1rem;
  font-size:clamp(.875rem,2.4vw,1rem);
  max-width:60ch;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hero-tag{
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(232,200,122,.18);
  color:var(--highlight-soft);
  padding:.32rem .85rem;border-radius:var(--radius-pill);
  font-size:.7rem;font-weight:700;
  margin-bottom:.75rem;width:fit-content;
  letter-spacing:.08em;text-transform:uppercase;
  border:1px solid rgba(232,200,122,.35);
  backdrop-filter:blur(8px);
}
.hero .btn{width:fit-content;font-size:.88rem;padding:.7rem 1.25rem}

/* Hero Thumbs Carousel */
.hero-thumbs{
  margin-top:1.5rem;display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem;list-style:none;padding:0;
}
@media(min-width:960px){.hero-thumbs{grid-template-columns:repeat(4,1fr)}}
@media(max-width:380px){
  .hero-thumbs{
    grid-template-columns:repeat(4,80%);
    overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;padding-bottom:.5rem;
    margin:0 calc(-1*clamp(1rem,3.5vw,1.5rem));
    padding-left:clamp(1rem,3.5vw,1.5rem);
    padding-right:clamp(1rem,3.5vw,1.5rem);
  }
  .hero-thumbs::-webkit-scrollbar{display:none}
  .hero-thumb-card{scroll-snap-align:start}
}
.hero-thumb-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-xs);
  transition:transform .3s var(--ease-out),box-shadow .3s,border-color .2s;
  contain:layout;
}
@media(hover:hover){
  .hero-thumb-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow);
    border-color:var(--highlight);
  }
  .hero-thumb-card:hover .thumb-img img{transform:scale(1.06)}
}
.hero-thumb-card .thumb-img{
  position:relative;aspect-ratio:16/10;
  display:block;overflow:hidden;background:var(--surface-2);
}
.hero-thumb-card .thumb-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease-out);
}
.hero-thumb-card .thumb-cat{
  position:absolute;top:.55rem;left:.55rem;
  background:rgba(13,20,40,.85);color:var(--highlight-soft);
  padding:.22rem .6rem;border-radius:var(--radius-pill);
  font-size:.62rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  backdrop-filter:blur(6px);
}
.hero-thumb-card .thumb-body{
  padding:.85rem .95rem 1rem;
  flex:1;display:flex;flex-direction:column;gap:.4rem;
}
.hero-thumb-card h3{
  font-size:.92rem;margin:0;line-height:1.35;
  font-family:var(--serif);
  display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
}
.hero-thumb-card h3 a{color:var(--text);text-decoration:none;font-weight:600}
.hero-thumb-card h3 a:hover{color:var(--accent)}
.hero-thumb-card .thumb-meta{
  font-size:.68rem;color:var(--text-mute);
  font-weight:500;margin-top:auto;
  font-family:var(--mono);
}

/* ============================================================
   ARTICLE — Editorial
============================================================ */
.article{
  max-width:780px;margin:0 auto;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:clamp(1.25rem,4vw,2.5rem);
  box-shadow:var(--shadow-sm);
  position:relative;
}
.article::before{
  content:"";position:absolute;top:0;left:50%;
  width:80px;height:3px;background:var(--highlight);
  transform:translateX(-50%);
  border-radius:0 0 3px 3px;
}
.article-meta{
  display:flex;flex-wrap:wrap;gap:.5rem .85rem;
  font-size:.8125rem;color:var(--text-mute);
  margin-bottom:1rem;align-items:center;
  font-family:var(--mono);
}
.article-category{
  background:var(--accent);color:var(--bg);
  padding:.25rem .8rem;border-radius:var(--radius-pill);
  font-weight:700;font-size:.68rem;
  text-transform:uppercase;letter-spacing:.1em;
  font-family:var(--mono);
}
.article-lead{
  font-family:var(--serif);
  font-size:clamp(1.0625rem,2.6vw,1.25rem);
  color:var(--text);font-weight:400;font-style:italic;
  padding:1.25rem 0 1.25rem 1.5rem;
  border-left:3px solid var(--highlight);
  line-height:1.55;margin:1.25rem 0;
  letter-spacing:-.005em;
}
.article-body{
  font-family:var(--serif);
  font-size:clamp(1.0625rem,2.5vw,1.125rem);
  line-height:1.78;
  contain:layout style;
  overflow-wrap:break-word;
  color:var(--text-soft);
}
.article-body h2,.article-body h3{
  margin-top:2em;scroll-margin-top:96px;
  color:var(--text);
}
.article-body h2{
  padding-bottom:.4em;
  border-bottom:1px solid var(--border);
}
.article-body p{margin:0 0 1.25em}
.article-body a{
  color:var(--accent);
  background-image:linear-gradient(transparent 88%,var(--highlight-soft) 0);
  background-size:100% 100%;
  padding:0 2px;
  transition:background-size .3s;
}
.article-body a:hover{background-image:linear-gradient(transparent 0%,var(--highlight-soft) 0)}
.article-body img{
  margin:1.5em 0;border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow-xs);
}
.article-body strong{color:var(--text);font-weight:700}

/* Author Card */
.author-card{
  display:flex;align-items:flex-start;gap:1.1rem;
  padding:1.25rem;background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin:1.75rem 0;
}
.author-card img{
  width:60px;height:60px;border-radius:50%;
  flex-shrink:0;
  border:3px solid var(--surface);
  box-shadow:0 0 0 1px var(--border-strong),var(--shadow-xs);
}
@media(min-width:480px){
  .author-card{padding:1.5rem}
  .author-card img{width:72px;height:72px}
}
.author-info{min-width:0;flex:1}
.author-info h4{margin:0 0 .2rem;font-size:1.05rem;font-family:var(--serif)}
.author-role{
  font-size:.78rem;color:var(--accent);
  font-weight:700;margin-bottom:.55rem;
  text-transform:uppercase;letter-spacing:.05em;
  font-family:var(--mono);
}
.author-bio{
  font-family:var(--sans);
  font-size:.875rem;color:var(--text-soft);
  margin:0 0 .55rem;line-height:1.6;
}
.author-credentials{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.credential{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.25rem .65rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  font-size:.7rem;font-weight:600;color:var(--text-soft);
  font-family:var(--sans);
}

/* Update Badge */
.update-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.42rem .9rem;
  background:linear-gradient(135deg,rgba(58,138,130,.12),rgba(58,138,130,.05));
  color:var(--teal-500);
  border:1px solid rgba(58,138,130,.3);
  border-radius:var(--radius-pill);
  font-size:.78rem;font-weight:600;
  margin:.6rem 0;
  font-family:var(--mono);
}
.update-badge::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--teal-500);
  box-shadow:0 0 0 0 rgba(58,138,130,.6);
  animation:livePulse 2.2s infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(58,138,130,.6)}
  70%{box-shadow:0 0 0 10px rgba(58,138,130,0)}
  100%{box-shadow:0 0 0 0 rgba(58,138,130,0)}
}

/* FAQ */
.faq-section{
  margin-top:2.5rem;padding:1.75rem;
  background:var(--surface-2);
  border-radius:var(--radius);
  border:1px solid var(--border);
  border-left:4px solid var(--accent);
}
.faq-section h3{
  color:var(--accent);margin-bottom:1.25rem;
  font-family:var(--serif);
}
.faq-section dt{
  font-weight:700;margin-top:1rem;color:var(--text);
  font-family:var(--sans);font-size:.95rem;
  padding-left:1.5rem;position:relative;
}
.faq-section dt::before{
  content:"Q";position:absolute;left:0;top:.05rem;
  color:var(--highlight);font-weight:900;
  font-family:var(--serif);font-size:1.1rem;
}
.faq-section dd{
  margin:.4rem 0 1rem 1.5rem;
  color:var(--text-soft);line-height:1.7;
  font-size:.92rem;
}

/* ============================================================
   NEWS GRID
============================================================ */
.news-grid{
  display:grid;grid-template-columns:1fr;gap:1.5rem;
}
@media(min-width:480px){
  .news-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
}
.news-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-xs);
  transition:transform .3s var(--ease-out),box-shadow .3s,border-color .2s;
  contain:layout;
}
@media(hover:hover){
  .news-card:hover{
    border-color:var(--highlight);
    transform:translateY(-5px);
    box-shadow:var(--shadow);
  }
  .news-card:hover .news-thumb img{transform:scale(1.04)}
}
.news-thumb{
  position:relative;display:block;aspect-ratio:16/9;
  text-decoration:none;overflow:hidden;
  background:var(--surface-2);
}
.news-thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease-out);
}
.news-cat{
  position:absolute;top:.7rem;left:.7rem;
  background:rgba(13,20,40,.85);color:var(--highlight-soft);
  padding:.28rem .75rem;border-radius:var(--radius-pill);
  font-size:.65rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  backdrop-filter:blur(6px);
  font-family:var(--mono);
}
.news-body{
  padding:1.15rem 1.2rem 1.25rem;
  display:flex;flex-direction:column;gap:.55rem;flex:1;
}
.news-body .meta{
  font-size:.72rem;color:var(--text-mute);
  font-weight:500;display:flex;gap:.55rem;
  align-items:center;flex-wrap:wrap;
  font-family:var(--mono);
}
.news-body h3{
  font-size:1.0625rem;margin:0;line-height:1.35;
  font-family:var(--serif);letter-spacing:-.01em;
}
.news-body h3 a{color:var(--text);text-decoration:none;font-weight:700}
.news-body h3 a:hover{color:var(--accent)}
.news-body p{
  color:var(--text-soft);font-size:.875rem;margin:0;flex:1;
  line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden;
}
.news-readmore{
  color:var(--accent);font-weight:700;font-size:.82rem;
  margin-top:.5rem;text-decoration:none;
  display:inline-flex;align-items:center;gap:.3rem;
  min-height:var(--tap);
  letter-spacing:.01em;
  font-family:var(--mono);text-transform:uppercase;
}
.news-readmore::after{
  content:"→";transition:transform .25s var(--ease-out);
}
.news-readmore:hover{color:var(--link-hover)}
.news-readmore:hover::after{transform:translateX(4px)}

/* ============================================================
   NEWSLETTER
============================================================ */
.newsletter{
  background:
    radial-gradient(circle at 12% 20%,rgba(232,200,122,.18),transparent 45%),
    radial-gradient(circle at 88% 90%,rgba(184,69,90,.12),transparent 45%),
    linear-gradient(135deg,var(--indigo-900),var(--indigo-800));
  color:#fff;
  padding:clamp(2rem,5vw,3rem) clamp(1.25rem,4vw,2rem);
  border-radius:var(--radius-lg);
  text-align:center;
  box-shadow:var(--shadow-lg);
  position:relative;overflow:hidden;
  border:1px solid rgba(232,200,122,.2);
}
.newsletter::before{
  content:"";position:absolute;top:-2px;left:50%;
  transform:translateX(-50%);
  width:120px;height:3px;
  background:linear-gradient(90deg,transparent,var(--highlight),transparent);
}
.newsletter h2{
  color:#fff;margin-bottom:.5rem;
  background:linear-gradient(135deg,#fff,var(--highlight-soft));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.newsletter p{color:rgba(255,255,255,.78);margin-bottom:1.5rem;font-size:.95rem;max-width:42ch;margin-left:auto;margin-right:auto}
.newsletter-form{
  display:flex;flex-wrap:wrap;gap:.6rem;
  max-width:540px;margin:0 auto;justify-content:center;
}
.newsletter input{
  flex:1;min-width:200px;
  padding:.85rem 1.1rem;border:0;
  border-radius:var(--radius-pill);
  font-size:16px;color:var(--ink-900);
  min-height:var(--tap);background:#fff;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.1);
}
.newsletter input:focus{outline:3px solid var(--highlight);outline-offset:2px}
.newsletter button{
  background:linear-gradient(135deg,var(--highlight),var(--gold-700));
  color:#fff;
  padding:.85rem 1.75rem;border-radius:var(--radius-pill);
  font-weight:700;min-height:var(--tap);font-size:.92rem;
  box-shadow:var(--shadow-gold);
  letter-spacing:.02em;
}
.newsletter button:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(201,160,74,.4)}
.newsletter-privacy{font-size:.78rem;margin-top:1rem;color:rgba(255,255,255,.62)}
.newsletter-privacy a{color:var(--highlight-soft);font-weight:600;text-decoration:underline}

/* ============================================================
   FOOTER — Deep Space Layered
============================================================ */
.footer{
  background:var(--ink-900);
  background-image:
    radial-gradient(ellipse 80% 50% at 15% 0%,rgba(59,78,135,.22),transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 100%,rgba(201,160,74,.14),transparent 60%),
    linear-gradient(180deg,#0d1428 0%,#080a12 100%);
  color:#c4c2b8;
  padding:3.5rem 0 1.5rem;
  padding-bottom:max(1.5rem,var(--safe-bottom));
  font-size:.92rem;
  position:relative;
  isolation:isolate;
  border-top:1px solid var(--border);
}
.footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent 20%,var(--highlight) 50%,transparent 80%);
  opacity:.6;
}

.footer-grid{
  display:grid;grid-template-columns:1fr;
  gap:2.5rem;margin-bottom:2rem;
}
@media(min-width:600px){.footer-grid{grid-template-columns:1fr 1fr;gap:2rem}}
@media(min-width:960px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.4fr}}

.footer-col h3{
  font-family:var(--mono);
  font-size:.78rem;
  margin:0 0 1.25rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--highlight);
  padding-bottom:.75rem;
  border-bottom:1px solid rgba(232,200,122,.18);
  display:flex;align-items:center;gap:.5rem;
}
.footer-col h3::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,rgba(232,200,122,.3),transparent);
}

.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col ul li{
  margin-bottom:.6rem;
  position:relative;
  line-height:1.5;
  padding-left:1.1rem;
}
.footer-col ul li::before{
  content:"";
  position:absolute;left:0;top:.65rem;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--highlight);
  opacity:.5;
  transition:opacity .2s,transform .2s;
}
.footer-col ul li:hover::before{opacity:1;transform:scale(1.4)}
.footer-col ul a{
  color:#c4c2b8;text-decoration:none;
  font-weight:400;
  display:inline-block;
  min-height:32px;line-height:1.6;
  transition:color .18s,transform .18s;
}
.footer-col ul a:hover,
.footer-col ul a:focus-visible{
  color:var(--highlight-soft);
  transform:translateX(2px);
}

.footer-brand-img{display:block;max-width:180px;margin-bottom:1.25rem}
.footer-brand-img img{
  width:100%;height:auto;
  border-radius:var(--radius);
  background:rgba(255,255,255,.04);
  padding:.6rem;
  border:1px solid rgba(232,200,122,.15);
}
.footer-about{
  font-size:.9rem;line-height:1.7;
  color:#a8a48f;margin:0;
}
.footer-about strong{
  color:var(--highlight-soft);font-weight:700;
  font-family:var(--serif);
}

/* Contact */
.contact-list li{
  padding-left:0!important;
  display:grid;
  grid-template-columns:78px 1fr;
  gap:.6rem;align-items:start;
  margin-bottom:.75rem;
}
.contact-list li::before{display:none}
.contact-label{
  color:var(--highlight);font-weight:600;
  font-size:.7rem;text-transform:uppercase;
  letter-spacing:.1em;padding-top:3px;
  font-family:var(--mono);
}
.contact-list a,
.contact-list strong,
.contact-list span:not(.contact-label){
  color:#e8e6dd;font-weight:500;word-break:break-word;
}
.contact-list a:hover{color:var(--highlight-soft);text-decoration:underline}

@media(max-width:480px){
  .contact-list li{grid-template-columns:68px 1fr;gap:.45rem;font-size:.86rem}
  .contact-label{font-size:.65rem}
}

.footer-hashtags{
  font-size:.78rem;line-height:1.7;
  color:#7a7460;word-break:break-word;
  margin-top:1.25rem;padding-top:.85rem;
  border-top:1px dashed rgba(232,200,122,.15);
  font-family:var(--mono);
}

/* Trust / Legal */
.footer-legal{
  font-size:.85rem;color:#c4c2b8;
  margin-top:1.75rem;padding:1.35rem 1.5rem;
  background:linear-gradient(135deg,rgba(184,69,90,.12),rgba(184,69,90,.04));
  border:1px solid rgba(184,69,90,.3);
  border-radius:var(--radius);
  line-height:1.7;
  position:relative;
}
.footer-legal::before{
  content:"⚠";position:absolute;left:-12px;top:50%;
  transform:translateY(-50%);
  width:28px;height:28px;border-radius:50%;
  background:var(--rose-500);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;
  box-shadow:0 4px 12px rgba(184,69,90,.4);
}
.footer-legal p{margin:0;padding-left:.5rem}
.footer-legal strong{color:#f5b3bf}
.footer-legal a{color:var(--highlight-soft);text-decoration:underline;font-weight:600}

.footer-bottom{
  margin-top:1.75rem;padding-top:1.5rem;
  border-top:1px solid rgba(232,200,122,.12);
  display:flex;flex-wrap:wrap;
  gap:.85rem 1rem;
  justify-content:space-between;align-items:center;
  color:#8a8678;font-size:.82rem;
  font-family:var(--mono);
}
.footer-bottom a{
  color:#c4c2b8;text-decoration:none;
  font-weight:500;padding:.4rem .75rem;
  border-radius:var(--radius-sm);
  display:inline-block;
  transition:background .2s,color .2s;
}
.footer-bottom a:hover{color:var(--ink-900);background:var(--highlight)}
.footer-bottom-links{display:flex;flex-wrap:wrap;gap:.3rem}
.age-badge{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--rose-500);color:#fff;
  padding:.18rem .55rem;
  border-radius:var(--radius-sm);
  font-size:.72rem;margin-left:.5rem;
  vertical-align:middle;font-weight:700;
  letter-spacing:.05em;
}

/* ============================================================
   FLOATING UI
============================================================ */
.back-top{
  position:fixed;
  right:calc(1rem + var(--safe-right));
  bottom:calc(1rem + var(--safe-bottom));
  width:52px;height:52px;
  border-radius:50%;
  background:var(--accent);color:#fff;
  font-size:1.4rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(13,20,40,.4),0 2px 6px rgba(13,20,40,.2);
  opacity:0;pointer-events:none;
  transform:translateY(16px) scale(.9);
  transition:opacity .25s,transform .3s var(--ease-spring),background .2s;
  z-index:50;
  border:2px solid rgba(255,255,255,.15);
}
.back-top.show{
  opacity:1;pointer-events:auto;
  transform:translateY(0) scale(1);
}
.back-top:hover{background:var(--accent-soft)}
.back-top:active{transform:scale(.94)}

/* Cookie */
.cookies{
  position:fixed;
  left:calc(1rem + var(--safe-left));
  right:calc(1rem + var(--safe-right));
  bottom:calc(1rem + var(--safe-bottom));
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  padding:1.1rem 1.35rem;
  box-shadow:var(--shadow-lg);
  z-index:200;
  display:flex;flex-direction:column;
  gap:.85rem;
  max-width:960px;margin:0 auto;
  font-size:.875rem;color:var(--text);
  animation:cookieIn .4s var(--ease-spring);
}
@keyframes cookieIn{from{transform:translateY(120%);opacity:0}to{transform:translateY(0);opacity:1}}
.cookies.is-leaving{animation:cookieOut .25s var(--ease-out) forwards}
@keyframes cookieOut{to{transform:translateY(120%);opacity:0}}
.cookies[hidden]{display:none!important}
.cookies p{margin:0}
.cookies a{color:var(--accent);text-decoration:underline;font-weight:600}
.cookies-actions{display:flex;gap:.5rem}
.cookies-actions .btn{flex:1}
@media(min-width:600px){
  .cookies{flex-direction:row;align-items:center;justify-content:space-between;gap:1.25rem}
  .cookies-actions{flex:0 0 auto}
  .cookies-actions .btn{flex:0 1 auto;min-width:110px}
}

/* ============================================================
   DATA SAVER MODE
============================================================ */
[data-save-data="1"] .hero>picture>img,
[data-save-data="1"] .news-thumb img,
[data-save-data="1"] .hero-thumb-card .thumb-img img{
  transition:none!important;
}
[data-save-data="1"] .header{backdrop-filter:none}
[data-save-data="1"] body{background-image:none}

/* ============================================================
   PRINT
============================================================ */
@media print{
  .header,.announcement,.footer,.back-top,.cookies,
  .newsletter,.hero-thumbs,.progress-bar,.nav-collapse{
    display:none!important;
  }
  body{color:#000;background:#fff;font-family:Georgia,serif}
  a{color:#000;text-decoration:underline}
  a[href^="http"]::after{content:" ("attr(href)")";font-size:.85em;color:#555}
  .article{border:0;box-shadow:none;padding:0;max-width:none}
  .article-body{font-size:11pt;line-height:1.55}
  .hero{aspect-ratio:auto;height:auto;background:none;box-shadow:none}
  .hero-overlay{position:static;color:#000;background:none;padding:0}
  .hero h1,.hero p,.hero h1 a{color:#000;text-shadow:none}
  .section{break-inside:avoid;content-visibility:visible}
}

/* ============================================================
   FORCED COLORS (Windows High Contrast)
============================================================ */
@media(forced-colors:active){
  .btn,.news-card,.hero-thumb-card,.article{
    border:1px solid CanvasText;
  }
  .progress-bar{background:Highlight}
  a:focus-visible{outline:3px solid Highlight}
}