/* ============================================================
   NATIONAL GEOGRAPHIC · 每日精選
   Editorial dark theme — 純 CSS，無框架
   ============================================================ */

:root{
  /* 色板 */
  --ng-yellow:  #ffcc00;
  --ink-900:    #0e0e0d;   /* 頁面底色 */
  --ink-800:    #161514;   /* 卡片 / 頭部 */
  --ink-700:    #201f1d;   /* 邊界 */
  --ink-600:    #2f2e2c;   /* 分隔線 */
  --paper:      #f2efe9;   /* 主要文字 */
  --paper-dim:  #a8a29a;   /* 次要文字 */
  --sand:       #b7a78b;   /* 圖說（沿用 App 配色） */

  /* 排版 */
  --serif: Georgia, "Times New Roman", "Songti SC", "Noto Serif CJK SC", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
           "Hiragino Sans GB", "Microsoft YaHei", Roboto, sans-serif;

  /* 版面 */
  --gutter: clamp(16px, 4vw, 80px);
  --maxw: 1680px;
  --card-min: 300px;
  --radius: 2px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* 密度切換：緊湊模式 */
:root[data-density="compact"]{ --card-min: 210px; }

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink-900);
  color:var(--paper);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}

body.is-locked{ overflow:hidden; }

img{ display:block; max-width:100%; }
h1,h2,h3,p{ margin:0; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--ng-yellow); color:#000; }

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--ng-yellow);
  outline-offset:3px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ng-yellow); color:#000; padding:10px 16px;
  font-weight:600; text-decoration:none;
}
.skip:focus{ left:8px; top:8px; }

/* ── 頂部 ───────────────────────────────────────── */

.topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(22,21,20,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
@supports not (backdrop-filter:blur(1px)){
  .topbar{ background:#161514; }
}

.topbar__inner{
  max-width:var(--maxw); margin-inline:auto;
  padding:14px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}

.topbar__rule{ height:1px; background:var(--ink-600); }

/* 標誌：黃色矩形 + 襯線字，沿用 App 的 LogoWidget */
.logo{
  display:flex; align-items:center; gap:9px;
  text-decoration:none; color:inherit;
}
.logo__frame{
  width:24px; height:34px; flex:none;
  border:3px solid var(--ng-yellow);
}
.logo__text{
  font-family:var(--serif); font-style:italic;
  font-size:13px; line-height:1.25; letter-spacing:.04em;
  white-space:nowrap;
}

.nav{ display:flex; align-items:center; gap:12px; }

.nav__link{
  font-size:13px; letter-spacing:.06em; color:var(--paper-dim);
  text-decoration:none; padding:6px 2px;
  border-bottom:1px solid transparent;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.nav__link:hover{ color:var(--paper); border-bottom-color:var(--ng-yellow); }

.iconbtn{
  width:38px; height:38px; display:grid; place-items:center;
  background:none; border:1px solid var(--ink-600); border-radius:var(--radius);
  cursor:pointer; transition:border-color .18s var(--ease), color .18s var(--ease);
}
.iconbtn:hover{ border-color:var(--ng-yellow); color:var(--ng-yellow); }
.iconbtn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; }

/* ── 頭圖 ───────────────────────────────────────── */

.hero{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(20px,3vw,44px) var(--gutter) 0;
  display:grid; gap:clamp(18px,2.4vw,36px);
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  align-items:end;
}
.hero[hidden]{ display:none; }

.hero__media{
  position:relative; overflow:hidden;
  background:var(--ink-800);
  aspect-ratio:3/2;
}
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .6s var(--ease);
}
.hero__media img.is-ready{ opacity:1; }

.hero__body{ padding-bottom:6px; }

.kicker{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ng-yellow); margin-bottom:12px;
}

.hero__title{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(26px,3.2vw,44px); line-height:1.15;
  letter-spacing:-.01em; margin-bottom:14px;
}

.hero__caption{
  font-family:var(--serif); font-style:italic;
  color:var(--sand); font-size:15px; line-height:1.75;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
  overflow:hidden; margin-bottom:20px;
}

.btn{
  display:inline-block; cursor:pointer;
  background:none; border:1px solid var(--ng-yellow); color:var(--ng-yellow);
  border-radius:var(--radius);
  padding:11px 22px; font-size:13px; letter-spacing:.06em;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.btn:hover{ background:var(--ng-yellow); color:#000; }

/* ── 區段標題 ─────────────────────────────────── */

.section-head{
  scroll-margin-top:76px;
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(34px,5vw,64px) var(--gutter) 18px;
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  border-bottom:1px solid var(--ink-700);
  margin-bottom:clamp(18px,2.4vw,30px);
}
.section-head__title{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(18px,2vw,24px); letter-spacing:.03em;
}
.section-head__meta{ font-size:12px; color:var(--paper-dim); letter-spacing:.04em; }

/* ── 網格 ───────────────────────────────────────── */

.grid{
  max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(var(--card-min), 1fr));
  gap:clamp(10px,1.4vw,22px);
}

.card{
  position:relative; display:block;
  aspect-ratio:3/2; overflow:hidden;
  background:var(--ink-800);
  text-decoration:none; color:inherit;
  contain:layout paint;
}

/* 骨架微光 */
.card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.045) 50%,transparent 80%);
  background-size:220% 100%;
  animation:shimmer 1.5s linear infinite;
  pointer-events:none;
}
.card.is-ready::after{ animation:none; opacity:0; }
@keyframes shimmer{ from{background-position:140% 0} to{background-position:-140% 0} }

.card__media{ position:absolute; inset:0; }
.card__media img{
  width:100%; height:100%; object-fit:cover;
  opacity:0;
  transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.card.is-ready .card__media img{ opacity:1; }

/* 覆蓋層：預設壓暗，hover 時亮起 —— 對應 App 的 imgForegroundColor 動畫 */
.card__veil{
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(10,10,9,.88) 0%, rgba(10,10,9,.35) 42%, rgba(47,46,44,.42) 100%);
  transition:opacity .3s var(--ease);
}

.card__body{
  position:absolute; inset:auto 0 0 0;
  padding:16px 18px;
  transform:translateY(6px);
  transition:transform .3s var(--ease);
}

.card__date{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ng-yellow); margin-bottom:5px;
}

.card__title{
  font-family:var(--serif); font-weight:400;
  font-size:16px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

@media (hover:hover){
  .card:hover .card__media img{ transform:scale(1.045); }
  .card:hover .card__veil{ opacity:.55; }
  .card:hover .card__body{ transform:translateY(0); }
}

/* ── 載入狀態 ─────────────────────────────────── */

.grid + .section-head{ padding-top:clamp(44px,6vw,80px); }

.sentinel{ height:1px; }

.loadstate{
  padding:44px var(--gutter) 8px;
  text-align:center; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--paper-dim); min-height:22px;
}

.loadstate--error{ color:#e0715f; text-transform:none; letter-spacing:0; font-size:13px; }

/* ── 頁尾 ───────────────────────────────────────── */

.footer{
  max-width:var(--maxw); margin-inline:auto;
  padding:56px var(--gutter) 72px;
  border-top:1px solid var(--ink-700); margin-top:40px;
  font-size:12px; color:var(--paper-dim); line-height:2;
}
.footer__dim{ color:#5f5c57; }

.footer__beian{ margin-top:10px; color:#5f5c57; }
.footer__beian a{
  color:var(--paper-dim); text-decoration:none;
  border-bottom:1px solid var(--ink-600);
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.footer__beian a:hover{ color:var(--ng-yellow); border-bottom-color:var(--ng-yellow); }

/* ── 燈箱 ───────────────────────────────────────── */

.lightbox{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  padding:clamp(10px,2.4vw,40px);
}
.lightbox[hidden]{ display:none; }

.lightbox__backdrop{
  position:absolute; inset:0;
  background:rgba(6,6,5,.94);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:fade .22s var(--ease);
}
@keyframes fade{ from{opacity:0} to{opacity:1} }

.lightbox__figure{
  position:relative; margin:0;
  display:flex; flex-direction:column;
  width:min(1200px,100%); max-height:100%;
  border:3px solid #24231f; background:#111110;
  animation:rise .26s var(--ease);
}
@keyframes rise{ from{opacity:0; transform:translateY(14px) scale(.985)} to{opacity:1; transform:none} }

.lightbox__stage{
  position:relative; flex:1; min-height:0;
  display:grid; place-items:center;
  background:#0b0b0a;
}
.lightbox__stage img{
  max-width:100%; max-height:calc(100vh - 250px);
  width:auto; height:auto; object-fit:contain;
  opacity:0; transition:opacity .3s var(--ease);
}
.lightbox__stage img.is-ready{ opacity:1; }

.spinner{
  position:absolute; width:26px; height:26px; border-radius:50%;
  border:2px solid var(--ink-600); border-top-color:var(--ng-yellow);
  animation:spin .7s linear infinite;
}
.spinner[hidden]{ display:none; }
@keyframes spin{ to{ transform:rotate(360deg) } }

.lightbox__caption{
  flex:none; padding:16px 22px 20px;
  border-top:1px solid #24231f; background:#171717;
  max-height:34vh; overflow-y:auto;
}

.lightbox__counter{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ng-yellow); margin-bottom:7px;
}
.lightbox__title{
  font-family:var(--serif); font-weight:400; font-size:19px;
  line-height:1.35; margin-bottom:8px;
}
.lightbox__text{
  font-family:var(--serif); font-style:italic;
  font-size:13.5px; line-height:1.85; color:var(--sand);
}

.lightbox__close,
.lightbox__nav{
  position:absolute; z-index:2;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(20,19,18,.72); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);
  transition:background .18s var(--ease), color .18s var(--ease), opacity .18s var(--ease);
}
.lightbox__close svg,
.lightbox__nav svg{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.lightbox__close{ top:12px; right:12px; width:42px; height:42px; }
.lightbox__close svg{ width:19px; height:19px; }

.lightbox__nav{ top:50%; margin-top:-30px; width:46px; height:60px; }
.lightbox__nav svg{ width:22px; height:22px; }
.lightbox__nav--prev{ left:12px; }
.lightbox__nav--next{ right:12px; }

.lightbox__close:hover,
.lightbox__nav:hover:not(:disabled){ background:var(--ng-yellow); color:#000; border-color:var(--ng-yellow); }

.lightbox__nav:disabled{ opacity:.22; cursor:default; }

/* ── 響應式 ─────────────────────────────────────── */

@media (max-width:900px){
  .hero{ grid-template-columns:1fr; align-items:start; }
  .hero__caption{ -webkit-line-clamp:3; }
  .lightbox__stage img{ max-height:calc(100vh - 300px); }
}

@media (max-width:560px){
  :root{ --card-min:150px; }
  .nav__link{ display:none; }
  .logo__text{ font-size:11px; }
  .logo__frame{ width:19px; height:27px; border-width:2.5px; }
  .card__body{ padding:11px 12px; }
  .card__title{ font-size:13px; -webkit-line-clamp:2; }
  .lightbox{ padding:0; }
  .lightbox__figure{ width:100%; height:100%; border:none; }
  .lightbox__nav{ width:38px; height:52px; }
  .lightbox__caption{ max-height:38vh; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}