/* ===================================================================
   TripMuse — page-style documents (article + category listing)
   Reuses :root tokens from tripmuse.css. Load tripmuse.css FIRST.
   =================================================================== */
body.doc{
  overflow:auto; background:var(--cream); color:var(--ink);
  font-family:var(--font-b); font-size:18px; line-height:1.6;
}
.doc-wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

/* ---------- top nav ---------- */
.dnav{position:sticky; top:0; z-index:50; background:var(--cream); border-bottom:var(--bd);}
.dnav-in{max-width:1180px; margin:0 auto; padding:0 28px; height:72px; display:flex; align-items:center; gap:22px;}
.dbrand{display:flex; align-items:center; gap:10px; font-family:var(--font-d); font-weight:700; font-size:22px;}
.dbrand img{width:34px; height:34px;}
.dbrand .by{font-family:var(--font-b); font-weight:800; font-size:11px; color:var(--ink-soft); background:#fff; border:2px solid var(--ink); border-radius:999px; padding:2px 9px;}
.dnav-links{display:flex; gap:24px; margin-left:14px;}
.dnav-links a{font-family:var(--font-d); font-weight:500; font-size:16px; color:var(--ink-soft);}
.dnav-links a:hover{color:var(--ink);}
.dnav-cta{margin-left:auto; display:flex; align-items:center; gap:12px;}
.dbtn{display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:var(--font-d); font-weight:600; font-size:15px; border:var(--bd); border-radius:999px; padding:10px 18px; background:#fff; box-shadow:var(--sh-sm); transition:transform .12s, box-shadow .12s;}
.dbtn:hover{transform:translate(-2px,-2px); box-shadow:var(--sh);}
.dbtn.accent{background:var(--accent); color:#fff;}
.dbtn.y{background:var(--yellow);}
.dbtn svg{width:17px; height:17px;}

/* shared bits reused */
.kick{display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font-family:var(--font-d); font-weight:600; font-size:13px; letter-spacing:.03em; border:2px solid var(--ink); border-radius:999px; padding:6px 14px; background:#fff; box-shadow:var(--sh-sm);}
.kick .dot{width:9px; height:9px; border-radius:50%; background:var(--accent); border:2px solid var(--ink);}
.kick.k-accent{background:var(--accent); color:#fff;}
.kick.k-yellow{background:var(--yellow);}
.kick.k-mint{background:var(--mint-soft);}
.kick.k-pink{background:var(--pink); color:#fff;}
.hl{position:relative; white-space:nowrap;}
.hl::after{content:""; position:absolute; left:-2%; right:-2%; bottom:.06em; height:.32em; background:var(--yellow); z-index:-1; border-radius:4px; transform:rotate(-1deg);}

/* =========================================================
   ARTICLE
   ========================================================= */
.art-hero{border-bottom:var(--bdw); background:var(--mint-soft); position:relative; overflow:hidden;}
.art-hero::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(23,32,54,.05) 1.6px,transparent 1.6px); background-size:22px 22px;}
.art-hero-in{position:relative; max-width:880px; margin:0 auto; padding:52px 28px 56px; text-align:center;}
.art-hero h1{font-size:clamp(36px,5.2vw,60px); line-height:1.0; margin:18px auto 0; max-width:18ch; letter-spacing:-.02em;}
.art-dek{font-family:var(--font-s); font-size:21px; line-height:1.5; color:var(--ink-soft); margin:18px auto 0; max-width:46ch; font-weight:500;}
.art-meta{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:26px; flex-wrap:wrap;}
.art-meta .av{width:46px; height:46px; border-radius:50%; border:var(--bd); display:grid; place-items:center; color:#fff; font-family:var(--font-d); font-weight:700; font-size:18px;}
.art-meta .who{text-align:left;}
.art-meta .who b{font-family:var(--font-d); font-weight:600; font-size:16px; display:block;}
.art-meta .who span{font-weight:700; font-size:13px; color:var(--ink-soft);}
.art-meta .sep{width:2px; height:34px; background:rgba(23,32,54,.18);}
.art-share{display:flex; gap:8px;}
.art-share button{width:40px; height:40px; border-radius:50%; border:var(--bd); background:#fff; cursor:pointer; box-shadow:var(--sh-sm); display:grid; place-items:center; font-size:15px;}
.art-share button:hover{background:var(--yellow); transform:translate(-2px,-2px); box-shadow:var(--sh);}

/* lead figure */
.art-figure{max-width:920px; margin:-28px auto 0; padding:0 28px; position:relative; z-index:3;}
.art-figure .frame{border:var(--bdw); border-radius:24px; box-shadow:var(--sh-lg); background:#fff; overflow:hidden;}
.art-figure .frame .scene{height:300px; display:grid; place-items:center; background:linear-gradient(135deg,var(--mint-soft),#DBEAFE);}
.art-figure .frame .scene img{width:200px; height:200px; object-fit:contain;}
.art-figure figcaption{font-family:var(--font-b); font-weight:700; font-size:13px; color:var(--ink-soft); padding:12px 18px; border-top:2px solid rgba(23,32,54,.12);}

/* body column */
.art-body{max-width:680px; margin:0 auto; padding:48px 28px 20px; font-family:var(--font-s); font-size:19.5px; line-height:1.74; color:#26303f;}
.art-body p{margin:0 0 22px;}
.art-body p.drop::first-letter{font-family:var(--font-d); font-weight:700; font-size:74px; float:left; line-height:.66; padding:8px 12px 0 0; color:var(--accent);}
.art-body h2{font-family:var(--font-d); font-weight:600; font-size:30px; line-height:1.08; margin:40px 0 16px; letter-spacing:-.01em; color:var(--ink);}
.art-body a.inl{color:var(--accent); font-weight:600; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:2px;}
.art-pull{font-family:var(--font-d); font-weight:600; font-size:30px; line-height:1.18; color:var(--accent); margin:34px 0; padding:6px 0 6px 22px; border-left:6px solid var(--accent); letter-spacing:-.01em;}
.art-fig-inline{margin:34px 0; border:var(--bd); border-radius:18px; overflow:hidden; box-shadow:var(--sh);}
.art-fig-inline .scene{height:220px; display:grid; place-items:center;}
.art-fig-inline .scene img{width:130px; height:130px; object-fit:contain;}
.art-fig-inline figcaption{font-family:var(--font-b); font-weight:700; font-size:13px; color:var(--ink-soft); padding:11px 16px; border-top:2px solid rgba(23,32,54,.1); background:#fff;}

/* callout / if you go */
.callout{background:#fff; border:var(--bd); border-radius:20px; box-shadow:var(--sh); padding:24px 26px; margin:36px 0;}
.callout h3{font-family:var(--font-d); font-size:21px; display:flex; align-items:center; gap:10px; margin:0 0 14px;}
.callout ol{margin:0; padding-left:0; list-style:none; counter-reset:c; display:flex; flex-direction:column; gap:13px;}
.callout li{font-family:var(--font-b); font-weight:700; font-size:16px; line-height:1.45; display:flex; gap:12px; align-items:flex-start;}
.callout li::before{counter-increment:c; content:counter(c); width:26px; height:26px; flex-shrink:0; border-radius:50%; background:var(--accent); color:#fff; font-family:var(--font-d); font-weight:700; font-size:13px; display:grid; place-items:center;}
.callout li b{font-family:var(--font-d); font-weight:600;}

.art-tags{max-width:680px; margin:8px auto 0; padding:0 28px; display:flex; gap:9px; flex-wrap:wrap;}
.art-tag{font-family:var(--font-d); font-weight:600; font-size:13px; border:2px solid var(--ink); border-radius:999px; padding:6px 14px; background:#fff;}

/* author bio */
.art-bio{max-width:680px; margin:36px auto 0; padding:0 28px;}
.art-bio .card{background:var(--purple-soft); border:var(--bd); border-radius:20px; box-shadow:var(--sh); padding:22px 24px; display:flex; gap:16px; align-items:center;}
.art-bio .av{width:60px; height:60px; border-radius:50%; border:var(--bd); display:grid; place-items:center; color:#fff; font-family:var(--font-d); font-weight:700; font-size:24px; flex-shrink:0;}
.art-bio h4{font-family:var(--font-d); font-size:18px;}
.art-bio p{font-weight:600; font-size:15px; color:var(--ink-soft); margin-top:4px;}

/* TripMerge CTA band */
.merge-cta{margin-top:56px; background:var(--accent); border-top:var(--bdw); border-bottom:var(--bdw); position:relative; overflow:hidden;}
.merge-cta::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.15) 2px,transparent 2px); background-size:26px 26px;}
.merge-in{position:relative; max-width:1000px; margin:0 auto; padding:54px 28px; display:grid; grid-template-columns:1.3fr .7fr; gap:36px; align-items:center;}
.merge-in .txt h2{color:#fff; font-size:clamp(28px,3.6vw,42px); line-height:1.0; max-width:16ch;}
.merge-in .txt p{color:#fff; opacity:.94; font-weight:700; font-size:17px; margin-top:14px; max-width:44ch;}
.merge-in .acts{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap;}
.merge-in .art{display:grid; place-items:center;}
.merge-in .art img{width:80%; max-width:240px; filter:drop-shadow(6px 8px 0 rgba(23,32,54,.25));}

/* related */
.related{max-width:1180px; margin:0 auto; padding:64px 28px 20px;}
.related h2{font-size:30px; margin-bottom:24px;}
.rel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.rel{border:var(--bd); border-radius:20px; box-shadow:var(--sh-sm); overflow:hidden; background:#fff; transition:transform .14s, box-shadow .14s; cursor:pointer; display:flex; flex-direction:column;}
.rel:hover{transform:translate(-3px,-3px); box-shadow:var(--sh);}
.rel .ph{height:130px; display:grid; place-items:center; border-bottom:var(--bd);}
.rel .ph img{width:84px; height:84px; object-fit:contain;}
.rel .bd{padding:16px 18px; display:flex; flex-direction:column; gap:6px; flex:1;}
.rel .ct{font-family:var(--font-b); font-weight:800; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent);}
.rel h3{font-size:19px; line-height:1.1;}
.rel .mt{margin-top:auto; font-family:var(--font-b); font-weight:700; font-size:12px; color:var(--ink-soft);}

/* =========================================================
   CATEGORY LISTING
   ========================================================= */
.cat-hero{border-bottom:var(--bdw); background:var(--accent); position:relative; overflow:hidden;}
.cat-hero::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.14) 2px,transparent 2px); background-size:26px 26px;}
.cat-hero-in{position:relative; max-width:1180px; margin:0 auto; padding:46px 28px 40px;}
.cat-hero h1{color:#fff; font-size:clamp(38px,5.4vw,64px); margin-top:14px; letter-spacing:-.02em;}
.cat-hero p{color:#fff; opacity:.94; font-family:var(--font-s); font-size:20px; font-weight:500; margin-top:12px; max-width:50ch;}

/* category chips bar */
.chipbar{position:sticky; top:72px; z-index:40; background:var(--cream); border-bottom:var(--bd); }
.chipbar-in{max-width:1180px; margin:0 auto; padding:16px 28px; display:flex; gap:10px; flex-wrap:wrap;}
.chip{font-family:var(--font-d); font-weight:600; font-size:14.5px; white-space:nowrap; border:2px solid var(--ink); border-radius:999px; padding:8px 16px; background:#fff; cursor:pointer; box-shadow:var(--sh-sm); transition:transform .12s, box-shadow .12s;}
.chip:hover{transform:translate(-2px,-2px); box-shadow:var(--sh);}
.chip.on{background:var(--accent); color:#fff;}

/* feature row */
.cat-feature{max-width:1180px; margin:0 auto; padding:40px 28px 0;}
.cat-feature .lead{display:grid; grid-template-columns:1.1fr .9fr; gap:0; border:var(--bdw); border-radius:26px; box-shadow:var(--sh-lg); overflow:hidden; background:#fff;}
.cat-feature .lead .ph{display:grid; place-items:center; background:linear-gradient(135deg,var(--mint-soft),#DBEAFE); min-height:300px;}
.cat-feature .lead .ph img{width:200px; height:200px; object-fit:contain;}
.cat-feature .lead .bd{padding:34px 36px; display:flex; flex-direction:column; justify-content:center;}
.cat-feature .lead .bd h2{font-size:34px; line-height:1.02; margin:14px 0 0; letter-spacing:-.01em;}
.cat-feature .lead .bd p{font-family:var(--font-s); font-size:18px; line-height:1.5; color:var(--ink-soft); margin-top:14px; font-weight:500;}
.cat-feature .lead .bd .meta{display:flex; align-items:center; gap:10px; margin-top:20px; font-family:var(--font-b); font-weight:800; font-size:13px;}
.cat-feature .lead .bd .meta .av{width:32px; height:32px; border-radius:50%; border:2px solid var(--ink); display:grid; place-items:center; color:#fff; font-family:var(--font-d); font-size:13px;}
.cat-feature .lead .bd .meta span{color:var(--ink-soft); font-weight:700;}

/* posts grid */
.cat-grid-wrap{max-width:1180px; margin:0 auto; padding:36px 28px 20px;}
.cat-grid-wrap .gh{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px;}
.cat-grid-wrap .gh h2{font-size:26px;}
.cat-grid-wrap .gh span{font-family:var(--font-b); font-weight:800; font-size:14px; color:var(--ink-soft);}
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.pcard{border:var(--bd); border-radius:20px; box-shadow:var(--sh-sm); overflow:hidden; background:#fff; display:flex; flex-direction:column; cursor:pointer; transition:transform .14s, box-shadow .14s;}
.pcard:hover{transform:translate(-3px,-3px); box-shadow:var(--sh);}
.pcard .ph{height:150px; display:grid; place-items:center; border-bottom:var(--bd); position:relative;}
.pcard .ph img{width:88px; height:88px; object-fit:contain;}
.pcard .ph .badge{position:absolute; top:10px; left:10px; font-family:var(--font-d); font-weight:600; font-size:11px; background:var(--ink); color:#fff; border-radius:999px; padding:3px 11px;}
.pcard .bd{padding:18px 20px; display:flex; flex-direction:column; gap:7px; flex:1;}
.pcard .ct{font-family:var(--font-b); font-weight:800; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent);}
.pcard h3{font-size:20px; line-height:1.08;}
.pcard p{font-family:var(--font-s); font-size:15px; color:var(--ink-soft); font-weight:500; line-height:1.4;}
.pcard .mt{margin-top:auto; font-family:var(--font-b); font-weight:700; font-size:12px; color:var(--ink-soft); display:flex; align-items:center; gap:8px;}

.loadmore{display:flex; justify-content:center; padding:44px 0 10px;}

/* newsletter + footer (shared) */
.doc-news{margin-top:56px; background:var(--yellow); border-top:var(--bdw); border-bottom:var(--bdw); position:relative; overflow:hidden;}
.doc-news::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(23,41,55,.1) 2px,transparent 2px); background-size:24px 24px;}
.doc-news-in{position:relative; max-width:900px; margin:0 auto; padding:54px 28px; text-align:center;}
.doc-news h2{font-size:clamp(28px,3.6vw,40px);}
.doc-news p{font-weight:700; font-size:17px; color:var(--ink); margin-top:12px; opacity:.85;}
.doc-news form{display:flex; gap:10px; max-width:480px; margin:24px auto 0;}
.doc-news input{flex:1; min-width:0; font-family:var(--font-b); font-weight:700; font-size:16px; border:var(--bd); border-radius:999px; padding:14px 20px; background:#fff;}
.doc-news input:focus{outline:none; box-shadow:inset 0 0 0 2px var(--accent);}
.doc-news button{border:var(--bd); background:var(--ink); color:#fff; font-family:var(--font-d); font-weight:600; font-size:16px; border-radius:999px; padding:14px 26px; cursor:pointer; box-shadow:var(--sh-sm); white-space:nowrap;}

.dfoot{background:var(--ink); color:#cbd5e1; padding:48px 0 30px;}
.dfoot-in{max-width:1180px; margin:0 auto; padding:0 28px;}
.dfoot-top{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.14);}
.dfoot .dbrand{color:#fff;}
.dfoot .dbrand .by{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25); color:#cbd5e1;}
.dfoot-links{display:flex; gap:22px; font-family:var(--font-d); font-weight:500; font-size:15px;}
.dfoot-links a:hover{color:#fff;}
.dfoot-bot{margin-top:22px; font-family:var(--font-b); font-weight:700; font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

@media(max-width:900px){
  .merge-in{grid-template-columns:1fr;} .merge-in .art{display:none;}
  .cat-feature .lead{grid-template-columns:1fr;}
  .rel-grid,.post-grid{grid-template-columns:1fr 1fr;}
  .dnav-links{display:none;}
}
@media(max-width:620px){
  .rel-grid,.post-grid{grid-template-columns:1fr;}
  .art-body{font-size:18px;}
}