/* ===================================================================
   TripMuse — the TripMerge travel magazine
   Design system: neobrutalist flipbook. Two art directions + density.
   =================================================================== */
:root{
  /* brand palette (from TripMerge) */
  --indigo:#6366F1; --indigo-deep:#4F46E5; --indigo-dark:#3F38C9;
  --ink:#172036; --ink-soft:#4b5670;
  --yellow:#FACC15; --yellow-soft:#FFD166;
  --green:#4ADE80; --green-deep:#0E9F6E; --mint:#A7F3D0; --mint-soft:#DDF7EA;
  --purple-soft:#EDE9FE; --cream:#FFFDF7; --paper:#FFFFFF;
  --pink:#F472B6; --blue:#60A5FA; --orange:#FB923C; --violet:#C084FC;
  --logo-green:#34C759; --logo-teal:#27A38A; --logo-blue:#3B6FE0;

  --font-d:'Fredoka',system-ui,sans-serif;     /* display */
  --font-b:'Nunito',system-ui,sans-serif;       /* ui / playful body */
  --font-s:'Spectral',Georgia,serif;            /* editorial reading body */

  --bd:3px solid var(--ink);
  --bd2:2px solid var(--ink);
  --bdw:4px solid var(--ink);
  --sh:6px 6px 0 var(--ink);
  --sh-sm:4px 4px 0 var(--ink);
  --sh-lg:10px 10px 0 var(--ink);

  /* themeable accents (overridden per direction) */
  --accent:var(--indigo);
  --accent-ink:#fff;
  --pg-bg:var(--cream);          /* page paper */
  --book-bg:#2a2342;             /* stage behind book */
  --rule:var(--ink);
  --body-font:var(--font-b);
  --display-spacing:-0.02em;
  --pad:46px;                    /* page padding — density driven */
  --gap:24px;
}

/* ---------- DIRECTION A · "Postcard" (bold, sticker-forward) ---------- */
.dir-a{
  --accent:var(--indigo); --accent-ink:#fff;
  --pg-bg:var(--cream); --book-bg:#221d3a; --body-font:var(--font-b);
}
/* ---------- DIRECTION B · "Field Journal" (airy editorial) ---------- */
.dir-b{
  --accent:var(--green-deep); --accent-ink:#fff;
  --pg-bg:#FBFAF4; --book-bg:#1d3a31; --body-font:var(--font-s);
  --display-spacing:-0.01em;
}

/* ---------- density ---------- */
.den-spacious{ --pad:50px; --gap:26px; }
.den-compact { --pad:30px; --gap:16px; }

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; font-family:var(--font-b); color:var(--ink);
  background:var(--book-bg);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  transition:background .5s ease;
}
h1,h2,h3,h4{font-family:var(--font-d); font-weight:700; line-height:1.0; margin:0; letter-spacing:var(--display-spacing);}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit;}

/* =========================================================
   TOP CHROME  (masthead toolbar over the book)
   ========================================================= */
.chrome{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; gap:16px;
  padding:13px 22px;
  background:rgba(23,32,54,.72); backdrop-filter:blur(10px);
  border-bottom:2px solid rgba(255,255,255,.12);
}
.ch-brand{display:flex; align-items:center; gap:10px; color:#fff;}
.ch-brand img{width:30px; height:30px;}
.ch-brand .nm{font-family:var(--font-d); font-weight:700; font-size:20px; letter-spacing:-.01em;}
.ch-brand .by{font-family:var(--font-b); font-weight:800; font-size:11px; color:#cfd2e8;
  background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.25); border-radius:999px; padding:2px 9px;}
.ch-issue{color:#aeb2cf; font-weight:800; font-size:12px; letter-spacing:.12em; text-transform:uppercase;}

.ch-right{margin-left:auto; display:flex; align-items:center; gap:10px;}

/* direction segmented control */
.dirseg{display:flex; gap:0; border:2px solid rgba(255,255,255,.3); border-radius:999px; overflow:hidden; background:rgba(0,0,0,.2);}
.dirseg button{
  border:none; background:transparent; color:#cfd2e8; cursor:pointer;
  font-family:var(--font-d); font-weight:600; font-size:13px; padding:7px 15px;
  display:flex; align-items:center; gap:7px; transition:.18s;
}
.dirseg button .sw{width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);}
.dirseg button[aria-pressed="true"]{background:#fff; color:var(--ink);}
.dirseg button[aria-pressed="true"] .sw{border-color:var(--ink);}

.ch-btn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  border:2px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:#fff;
  font-family:var(--font-d); font-weight:600; font-size:13px; border-radius:999px; padding:7px 14px;
  transition:.16s;
}
.ch-btn:hover{background:rgba(255,255,255,.18);}
.ch-btn svg{width:15px;height:15px;}

/* =========================================================
   FLIPBOOK STAGE
   ========================================================= */
.stage{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  padding:88px 96px 70px;
}
.book-scaler{transform-origin:center center;}

/* the book = two-page spread; static left/right pages + one animated flipper */
.book{
  position:relative;
  width:1100px; height:740px;
  perspective:2800px;
  box-shadow:0 30px 80px rgba(0,0,0,.4);
  border-radius:6px;
}
/* central spine shadow */
.book::after{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:70px; transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.18) 46%,rgba(0,0,0,.22) 50%,rgba(0,0,0,.18) 54%,transparent);
  z-index:20; pointer-events:none;
}
.book.closed::after{opacity:0;}
.book.closed{box-shadow:none;}

/* static pages */
.leaf-static{
  position:absolute; top:0; width:50%; height:100%; overflow:hidden;
}
.leaf-static.left{ left:0; border-radius:6px 0 0 6px; }
.leaf-static.right{ right:0; border-radius:0 6px 6px 0; }
.leaf-static.is-empty{ background:transparent; }
.book.closed .leaf-static.left{ display:none; }

/* the flipper (the single turning page) */
.flipper{
  position:absolute; top:0; width:50%; height:100%;
  transform-style:preserve-3d; z-index:30; display:none;
  will-change:transform;
}
.flipper.right{ right:0; transform-origin:left center; }
.flipper.left{  left:0;  transform-origin:right center; }
.flipper .face{
  position:absolute; inset:0; overflow:hidden; background:var(--pg-bg);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.flipper .face.front{ transform:rotateY(0deg); border-radius:0 6px 6px 0; }
.flipper.left .face.front{ border-radius:6px 0 0 6px; }
.flipper .face.back{ transform:rotateY(180deg); border-radius:6px 0 0 6px; }
.flipper.left .face.back{ border-radius:0 6px 6px 0; }
/* moving curl shade over the flipper */
.flip-shade{
  position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0;
  background:linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,0) 55%);
  border-radius:0 6px 6px 0;
}
.flipper.left .flip-shade{ background:linear-gradient(270deg, rgba(0,0,0,.28), rgba(0,0,0,0) 55%); }

/* page paper texture + inner shadow toward spine */
.page{
  position:absolute; inset:0;
  padding:var(--pad);
  display:flex; flex-direction:column;
  background:var(--pg-bg);
  overflow:hidden;
  transition:background .5s ease;
}
.page::before{ /* subtle paper grain */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; z-index:0;
  background-image:radial-gradient(rgba(23,32,54,.035) 1px,transparent 1px);
  background-size:18px 18px;
}
/* spine gradient: right pages shade on their LEFT edge; left pages shade on their RIGHT edge */
.leaf-static.right .page::after, .flipper.right .face.front .page::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:52px; pointer-events:none; z-index:1;
  background:linear-gradient(90deg, rgba(0,0,0,.12), transparent);
}
.leaf-static.left .page::after, .flipper.left .face.front .page::after{
  content:""; position:absolute; top:0; bottom:0; right:0; width:52px; pointer-events:none; z-index:1;
  background:linear-gradient(270deg, rgba(0,0,0,.12), transparent);
}
.page > *{position:relative; z-index:2;}

/* page number footer */
.folio{
  margin-top:auto; padding-top:14px;
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--font-d); font-weight:600; font-size:12px; color:var(--ink-soft);
  letter-spacing:.04em;
}
.folio .fl-mast{display:flex; align-items:center; gap:6px; text-transform:uppercase; letter-spacing:.14em; font-size:10.5px;}
.folio .fl-mast b{color:var(--accent);}

/* clickable corner hint to turn */
.turn-hint{
  position:absolute; bottom:0; width:64px; height:64px; z-index:30; cursor:pointer;
}
.turn-hint.next{right:0;}
.turn-hint.prev{left:0;}
.turn-hint::after{
  content:""; position:absolute; bottom:0; right:0; width:0; height:0;
  border-style:solid; border-width:0 0 40px 40px; border-color:transparent transparent rgba(23,32,54,.10) transparent;
  transition:.18s;
}
.turn-hint.prev::after{right:auto; left:0; border-width:0 40px 40px 0; border-color:transparent transparent rgba(23,32,54,.10) transparent;}
.turn-hint:hover::after{border-color:transparent transparent var(--accent) transparent;}

/* =========================================================
   NAV ARROWS (outside the scaled book)
   ========================================================= */
.nav-arrow{
  position:fixed; top:50%; transform:translateY(-50%); z-index:55;
  width:54px; height:54px; border-radius:50%;
  border:3px solid #fff; background:var(--accent); color:var(--accent-ink);
  cursor:pointer; display:grid; place-items:center;
  box-shadow:0 6px 22px rgba(0,0,0,.35); transition:.16s;
}
.nav-arrow:hover{transform:translateY(-50%) scale(1.08);}
.nav-arrow:disabled{opacity:.32; cursor:default; transform:translateY(-50%);}
.nav-arrow.prev{left:22px;}
.nav-arrow.next{right:22px;}
.nav-arrow svg{width:24px;height:24px;}

/* progress / page dots */
.pager{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:55;
  display:flex; align-items:center; gap:14px;
  background:rgba(23,32,54,.72); backdrop-filter:blur(10px);
  border:2px solid rgba(255,255,255,.14); border-radius:999px; padding:8px 16px;
}
.pager .pp{display:flex; gap:7px;}
.pager .pd{width:9px;height:9px;border-radius:50%; background:rgba(255,255,255,.32); cursor:pointer; transition:.18s; border:none; padding:0;}
.pager .pd.on{background:#fff; width:26px; border-radius:999px;}
.pager .lbl{color:#cfd2e8; font-family:var(--font-d); font-weight:600; font-size:12px; white-space:nowrap;}

/* =========================================================
   REUSABLE EDITORIAL BITS
   ========================================================= */
.kick{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start; white-space:nowrap;
  font-family:var(--font-d); font-weight:600; font-size:12.5px; letter-spacing:.04em;
  border:var(--bd2); border-radius:999px; padding:5px 13px; background:var(--paper);
  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:var(--accent-ink); border-color:var(--ink);}
.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);}
.hl-mint::after{background:var(--mint);}
.hl-pink::after{background:var(--pink);}
.hl-accent::after{background:var(--accent); opacity:.28;}

.lede{font-family:var(--body-font); color:var(--ink-soft); font-weight:600;}
.dir-b .lede{font-weight:500;}

.divider{height:3px; background:var(--ink); border-radius:3px; margin:0;}
.divider.thin{height:2px; opacity:.18;}

/* byline */
.byline{display:flex; align-items:center; gap:10px; font-family:var(--font-b); font-weight:800; font-size:13px;}
.byline .av{width:32px;height:32px;border-radius:50%; border:var(--bd2); display:grid; place-items:center; color:#fff; font-family:var(--font-d); font-size:13px; flex-shrink:0;}
.byline span{color:var(--ink-soft); font-weight:700;}

/* =========================================================
   COVER PAGE
   ========================================================= */
.cover{ background:var(--accent); color:#fff; }
.dir-b .cover{ background:var(--pg-bg); color:var(--ink); }
.cover.page::before{opacity:.5; background-image:radial-gradient(rgba(255,255,255,.16) 2px,transparent 2px); background-size:26px 26px;}
.dir-b .cover.page::before{background-image:radial-gradient(rgba(23,32,54,.05) 1.5px,transparent 1.5px); background-size:22px 22px;}

.cv-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.cv-mast{font-family:var(--font-d); font-weight:700; font-size:62px; line-height:.82; letter-spacing:-.04em; color:#fff;}
.dir-b .cv-mast{color:var(--ink);}
.cv-mast .mz{display:block; font-family:var(--font-b); font-weight:800; font-size:13px; letter-spacing:.34em; text-transform:uppercase; margin-top:10px; opacity:.9;}
.cv-tag{text-align:right; font-family:var(--font-b); font-weight:800; font-size:12px; line-height:1.4;}
.cv-tag .by{display:flex; align-items:center; gap:6px; justify-content:flex-end; margin-top:6px;}
.cv-tag .by img{width:20px;height:20px;}
.cv-tag .iss{display:block; opacity:.85; margin-top:3px; font-weight:700;}

.cv-art{flex:1; display:grid; place-items:center; position:relative; margin:6px 0;}
.cv-art img{width:84%; max-height:330px; object-fit:contain; filter:drop-shadow(8px 10px 0 rgba(23,32,54,.25));}
.cv-art .seal{
  position:absolute; bottom:2px; right:0; width:108px; height:108px; border-radius:50%;
  background:var(--yellow); border:var(--bd); box-shadow:var(--sh-sm);
  display:grid; place-items:center; text-align:center; transform:rotate(-9deg);
  font-family:var(--font-d); font-weight:700; color:var(--ink); line-height:1; padding:10px;
}
.cv-seal-big{font-size:26px;}
.cv-seal-sm{font-size:10px; font-weight:800; margin-top:4px; font-family:var(--font-b); letter-spacing:.06em;}

.cv-headline{font-size:40px; line-height:.96; color:#fff; max-width:14ch;}
.dir-b .cv-headline{color:var(--ink); font-size:38px;}
.cv-sub{font-family:var(--body-font); font-weight:700; font-size:16px; margin-top:12px; max-width:34ch; opacity:.95;}
.dir-b .cv-sub{font-weight:500; color:var(--ink-soft);}

.cv-lines{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.cv-line{
  font-family:var(--font-d); font-weight:600; font-size:12.5px; color:var(--ink);
  background:#fff; border:var(--bd2); border-radius:999px; padding:5px 12px; box-shadow:var(--sh-sm);
}

/* cover layout variants (tweak: Hero / cover layout) */
.cover.cv-art .cv-art{margin:14px 0 4px;}
.cover.cv-art .cv-art img{width:96%; max-height:380px;}
.cover.cv-art .cv-headline{font-size:32px;}
.cover.cv-art .cv-sub{display:none;}
.cover.cv-minimal .cv-art{display:none;}
.cover.cv-minimal{justify-content:flex-start;}
.cover.cv-minimal .cv-headline{font-size:62px; line-height:.92; margin-top:32px; max-width:11ch;}
.cover.cv-minimal .cv-sub{font-size:18px; margin-top:18px;}
.cover.cv-minimal .cv-lines{margin-top:auto;}

/* =========================================================
   CONTENTS PAGE
   ========================================================= */
.toc{display:flex; flex-direction:column;}
.toc h2{font-size:34px; margin-bottom:4px;}
.toc-list{list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:0;}
.toc-row{display:flex; align-items:baseline; gap:10px; padding:9px 0; border-bottom:2px dotted rgba(23,32,54,.2); cursor:pointer;}
.toc-row:hover .toc-t{color:var(--accent);}
.toc-num{font-family:var(--font-d); font-weight:700; font-size:18px; color:var(--accent); width:34px; flex-shrink:0;}
.toc-t{font-family:var(--font-d); font-weight:600; font-size:18px; transition:color .15s;}
.toc-tag{font-family:var(--font-b); font-weight:800; font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em;}
.toc-dots{flex:1; border-bottom:2px dotted rgba(23,32,54,.25); transform:translateY(-4px);}
.toc-pg{font-family:var(--font-d); font-weight:700; font-size:16px;}

.ednote{margin-top:16px; background:var(--mint-soft); border:var(--bd); border-radius:18px; box-shadow:var(--sh-sm); padding:15px 17px;}
.ednote h4{font-size:15px; display:flex; align-items:center; gap:8px; margin-bottom:7px;}
.ednote p{font-family:var(--body-font); font-weight:600; font-size:13px; color:var(--ink); line-height:1.45;}
.dir-b .ednote p{font-weight:500;}
.ednote .sig{font-family:var(--font-d); font-weight:600; font-size:14px; margin-top:10px;}

/* =========================================================
   FEATURE STORY
   ========================================================= */
.feat-open .ftitle{font-size:46px; line-height:.95; margin:14px 0 0; max-width:13ch;}
.feat-open .flede{font-family:var(--body-font); font-size:18px; line-height:1.45; margin-top:16px; color:var(--ink-soft); font-weight:600;}
.dir-b .feat-open .flede{font-weight:500; font-size:19px;}
.feat-hero{flex:1; margin:18px 0; border:var(--bd); border-radius:20px; box-shadow:var(--sh); background:var(--mint-soft); display:grid; place-items:center; overflow:hidden; position:relative;}
.feat-hero img{width:74%; max-height:230px; object-fit:contain;}
.feat-hero .cap{position:absolute; bottom:10px; left:10px; right:10px; font-family:var(--font-b); font-weight:800; font-size:11px; color:var(--ink); background:rgba(255,255,255,.85); border:var(--bd2); border-radius:10px; padding:5px 9px;}

/* right page of feature: body copy + pullquote + sidebar */
.feat-body{font-family:var(--font-s); font-size:15.5px; line-height:1.62; color:var(--ink); columns:1;}
.feat-body .drop::first-letter{font-family:var(--font-d); font-weight:700; font-size:62px; float:left; line-height:.7; padding:6px 10px 2px 0; color:var(--accent);}
.feat-body p{margin-bottom:11px;}
.pullquote{font-family:var(--font-d); font-weight:600; font-size:23px; line-height:1.15; color:var(--accent); border-left:5px solid var(--accent); padding:4px 0 4px 16px; margin:16px 0;}
.sidebar{margin-top:auto; background:var(--paper); border:var(--bd); border-radius:16px; box-shadow:var(--sh-sm); padding:16px;}
.sidebar h4{font-size:15px; display:flex; align-items:center; gap:8px; margin-bottom:10px;}
.sidebar ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
.sidebar li{display:flex; align-items:center; gap:9px; font-family:var(--font-b); font-weight:700; font-size:13px;}
.sidebar li .n{width:22px;height:22px;border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid;place-items:center; font-family:var(--font-d); font-size:11px; flex-shrink:0;}

/* =========================================================
   GENERIC SPREAD HEADER
   ========================================================= */
.sec-h{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:16px;}
.sec-h h2{font-size:32px; line-height:.98;}
.sec-h .sh-sub{font-family:var(--body-font); font-weight:600; font-size:13px; color:var(--ink-soft); margin-top:5px; max-width:30ch;}
.dir-b .sec-h .sh-sub{font-weight:500;}

/* =========================================================
   BROWSE BY VIBE  (mood tiles)
   ========================================================= */
.vibe-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); flex:1;}
.vibe{
  border:var(--bd); border-radius:18px; box-shadow:var(--sh-sm); padding:16px;
  display:flex; flex-direction:column; justify-content:space-between; cursor:pointer;
  transition:transform .14s, box-shadow .14s; min-height:0;
}
.vibe:hover{transform:translate(-3px,-3px); box-shadow:var(--sh);}
.vibe .em{font-size:30px; line-height:1;}
.vibe h3{font-size:19px; margin-top:10px;}
.vibe p{font-family:var(--body-font); font-weight:700; font-size:12px; margin-top:4px; opacity:.8;}
.dir-b .vibe p{font-weight:500;}
.vibe .ct{font-family:var(--font-d); font-weight:600; font-size:11px; margin-top:10px; display:inline-flex; align-items:center; gap:5px;}
.v-slow{background:var(--mint-soft);} .v-food{background:#FFE9C7;}
.v-crowd{background:var(--purple-soft);} .v-nomad{background:#DBEAFE;}
.v-eco{background:#D9F7E5;} .v-luxe{background:#FCE7F3;}

/* =========================================================
   DESTINATIONS  (ranked postcards)
   ========================================================= */
.dest-list{display:flex; flex-direction:column; gap:var(--gap); flex:1; justify-content:center;}
.dest{
  display:flex; align-items:center; gap:14px; background:var(--paper);
  border:var(--bd); border-radius:16px; box-shadow:var(--sh-sm); padding:12px 14px;
  transition:transform .14s, box-shadow .14s; cursor:pointer;
}
.dest:hover{transform:translate(-3px,-3px); box-shadow:var(--sh);}
.dest .rk{font-family:var(--font-d); font-weight:700; font-size:30px; color:var(--accent); width:42px; flex-shrink:0; text-align:center;}
.dest .flag{width:50px;height:50px;border-radius:13px; border:var(--bd2); display:grid; place-items:center; font-size:28px; flex-shrink:0; background:var(--mint-soft);}
.dest .meta{flex:1; min-width:0;}
.dest .meta h3{font-size:19px;}
.dest .meta p{font-family:var(--body-font); font-weight:700; font-size:12px; color:var(--ink-soft); margin-top:2px;}
.dir-b .dest .meta p{font-weight:500;}
.dest .trend{text-align:right; flex-shrink:0;}
.dest .trend b{font-family:var(--font-d); font-weight:700; font-size:15px; color:var(--green-deep); display:flex; align-items:center; gap:4px;}
.dest .trend span{font-family:var(--font-b); font-weight:800; font-size:10px; color:var(--ink-soft);}

/* =========================================================
   EDITOR'S PICKS  (curated cards)
   ========================================================= */
.picks{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); flex:1;}
.pick{
  border:var(--bd); border-radius:18px; box-shadow:var(--sh-sm); overflow:hidden;
  display:flex; flex-direction:column; cursor:pointer; background:var(--paper);
  transition:transform .14s, box-shadow .14s;
}
.pick:hover{transform:translate(-3px,-3px); box-shadow:var(--sh);}
.pick .ph{height:96px; display:grid; place-items:center; border-bottom:var(--bd); position:relative;}
.pick .ph img{width:64px;height:64px; object-fit:contain;}
.pick .ph .badge{position:absolute; top:8px; left:8px; font-family:var(--font-d); font-weight:600; font-size:10px; background:var(--ink); color:#fff; border-radius:999px; padding:3px 9px;}
.pick .bd{padding:12px 13px; display:flex; flex-direction:column; gap:5px; flex:1;}
.pick .bd .ct{font-family:var(--font-b); font-weight:800; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent);}
.pick .bd h3{font-size:16px; line-height:1.05;}
.pick .bd .rd{margin-top:auto; font-family:var(--font-b); font-weight:800; font-size:11px; color:var(--ink-soft);}

/* =========================================================
   CATEGORIES
   ========================================================= */
.cat-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); flex:1; align-content:center;}
.cat{
  display:flex; align-items:center; gap:12px; border:var(--bd); border-radius:15px;
  box-shadow:var(--sh-sm); padding:13px 14px; cursor:pointer; background:var(--paper);
  transition:transform .14s, box-shadow .14s;
}
.cat:hover{transform:translate(-3px,-3px); box-shadow:var(--sh);}
.cat .ic{width:44px;height:44px;border-radius:12px; border:var(--bd2); display:grid; place-items:center; font-size:22px; flex-shrink:0;}
.cat .tx h3{font-size:16px;}
.cat .tx p{font-family:var(--font-b); font-weight:800; font-size:11px; color:var(--ink-soft); margin-top:1px;}

/* =========================================================
   LATEST POSTS
   ========================================================= */
.latest{display:flex; flex-direction:column; gap:12px; flex:1; justify-content:center;}
.lpost{display:flex; gap:13px; align-items:center; border-bottom:2px solid rgba(23,32,54,.1); padding-bottom:12px; cursor:pointer;}
.lpost:last-child{border-bottom:none;}
.lpost .th{width:62px;height:62px;border-radius:13px; border:var(--bd2); display:grid;place-items:center; flex-shrink:0; font-size:30px;}
.lpost .tx{flex:1; min-width:0;}
.lpost .tx .ct{font-family:var(--font-b); font-weight:800; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--accent);}
.lpost .tx h3{font-size:17px; line-height:1.05; margin-top:3px;}
.lpost:hover .tx h3{color:var(--accent);}
.lpost .tx .mt{font-family:var(--font-b); font-weight:700; font-size:11px; color:var(--ink-soft); margin-top:4px;}
.lpost .arr{flex-shrink:0; color:var(--ink-soft);}

/* =========================================================
   APP CROSS-PROMO
   ========================================================= */
.promo{ background:var(--accent); color:#fff; }
.promo.page::before{opacity:.45; background-image:radial-gradient(rgba(255,255,255,.16) 2px,transparent 2px); background-size:26px 26px;}
.promo .kick{color:var(--ink);}
.promo h2{color:#fff; font-size:38px; line-height:.98; max-width:14ch; margin-top:12px;}
.promo .psub{font-family:var(--body-font); font-weight:700; font-size:16px; margin-top:14px; max-width:32ch; opacity:.96;}
.promo-art{flex:1; display:grid; place-items:center;}
.promo-art img{width:78%; max-height:280px; object-fit:contain; filter:drop-shadow(6px 8px 0 rgba(23,32,54,.25));}
.promo-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}
.pbtn{
  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:12px 22px; box-shadow:var(--sh-sm); transition:transform .12s, box-shadow .12s;
}
.pbtn:hover{transform:translate(-2px,-2px); box-shadow:var(--sh);}
.pbtn.y{background:var(--yellow); color:var(--ink);}
.pbtn.w{background:#fff; color:var(--ink);}
.store-row{display:flex; gap:10px; margin-top:14px;}
.storeb{display:flex; align-items:center; gap:8px; background:var(--ink); color:#fff; border:2px solid #000; border-radius:12px; padding:8px 14px; font-family:var(--font-d);}
.storeb small{display:block; font-size:9px; opacity:.8; font-family:var(--font-b); font-weight:700;}
.storeb b{font-size:13px;}

/* =========================================================
   BACK COVER  (subscribe)
   ========================================================= */
.back{background:var(--ink); color:#fff;}
.back.page::before{opacity:.4; background-image:radial-gradient(rgba(255,255,255,.12) 2px,transparent 2px); background-size:26px 26px;}
.back .bc-mast{font-family:var(--font-d); font-weight:700; font-size:40px; color:#fff;}
.back .bc-mast .mz{display:block; font-family:var(--font-b); font-weight:800; font-size:11px; letter-spacing:.3em; opacity:.7; margin-top:8px;}
.sub-card{background:var(--paper); color:var(--ink); border:var(--bd); border-radius:20px; box-shadow:var(--sh); padding:22px; margin-top:auto;}
.sub-card h3{font-size:22px; display:flex; align-items:center; gap:9px;}
.sub-card p{font-family:var(--body-font); font-weight:600; font-size:13.5px; color:var(--ink-soft); margin-top:8px;}
.dir-b .sub-card p{font-weight:500;}
.sub-form{display:flex; gap:8px; margin-top:14px;}
.sub-form input{flex:1; min-width:0; font-family:var(--font-b); font-weight:700; font-size:14px; border:var(--bd2); border-radius:999px; padding:11px 16px; background:var(--cream);}
.sub-form input:focus{outline:none; box-shadow:inset 0 0 0 2px var(--accent);}
.sub-form button{border:var(--bd2); background:var(--accent); color:var(--accent-ink); font-family:var(--font-d); font-weight:600; font-size:14px; border-radius:999px; padding:11px 18px; cursor:pointer; box-shadow:var(--sh-sm); white-space:nowrap;}
.bc-social{display:flex; gap:18px; margin-top:20px; font-family:var(--font-d); font-weight:600; font-size:13px;}
.bc-social a{display:flex; align-items:center; gap:7px; opacity:.85;}
.bc-foot{margin-top:18px; font-family:var(--font-b); font-weight:700; font-size:11px; opacity:.6;}

/* =========================================================
   COVER-CLOSED HINT  + intro
   ========================================================= */
.flip-tip{
  position:fixed; bottom:64px; left:50%; transform:translateX(-50%); z-index:54;
  color:#fff; font-family:var(--font-d); font-weight:600; font-size:13px;
  display:flex; align-items:center; gap:8px; opacity:.0; transition:opacity .5s;
  pointer-events:none;
}
.flip-tip.show{opacity:.85; animation:bob 1.8s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateX(-50%)} 50%{transform:translateX(-50%) translateY(-4px)}}

/* =========================================================
   TWEAKS PANEL host hooks
   ========================================================= */
#tweaks-root{position:fixed; inset:0; z-index:80; pointer-events:none;}
#tweaks-root > *{pointer-events:auto;}

/* =========================================================
   VANILLA TWEAKS PANEL
   ========================================================= */
#tweaks-root{display:none;}
.tw-panel{
  position:fixed; right:18px; bottom:64px; width:248px; z-index:90;
  background:rgba(255,255,255,.92); backdrop-filter:blur(18px) saturate(150%);
  border:var(--bd); border-radius:18px; box-shadow:var(--sh);
  font-family:var(--font-b); color:var(--ink); overflow:hidden;
}
.tw-hd{display:flex; align-items:center; justify-content:space-between; padding:12px 10px 10px 16px; border-bottom:2px solid rgba(23,32,54,.12);}
.tw-hd b{font-family:var(--font-d); font-weight:700; font-size:16px;}
.tw-x{appearance:none; border:2px solid var(--ink); background:#fff; width:26px; height:26px; border-radius:50%; cursor:pointer; font-size:12px; line-height:1; box-shadow:2px 2px 0 var(--ink);}
.tw-x:hover{background:var(--yellow);}
.tw-body{padding:12px 16px 16px; display:flex; flex-direction:column; gap:7px; max-height:70vh; overflow:auto;}
.tw-sec{font-family:var(--font-d); font-weight:600; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-top:6px;}
.tw-sec:first-child{margin-top:0;}
.tw-seg{display:flex; gap:0; border:2px solid var(--ink); border-radius:999px; overflow:hidden; background:#fff;}
.tw-seg button{flex:1; border:none; border-right:2px solid var(--ink); background:#fff; cursor:pointer; font-family:var(--font-d); font-weight:600; font-size:11.5px; padding:7px 4px; color:var(--ink-soft); transition:.14s;}
.tw-seg button:last-child{border-right:none;}
.tw-seg button.on{background:var(--accent); color:var(--accent-ink);}
.tw-seg button:not(.on):hover{background:var(--mint-soft); color:var(--ink);}
.tw-swatches{flex-direction:row; display:flex; gap:9px; flex-wrap:wrap;}
.tw-sw{width:30px; height:30px; border-radius:50%; border:2px solid var(--ink); cursor:pointer; box-shadow:2px 2px 0 var(--ink); display:grid; place-items:center; font-size:13px; color:var(--ink-soft); background:#fff; transition:transform .12s;}
.tw-sw:hover{transform:translateY(-2px);}
.tw-sw.on{outline:3px solid var(--ink); outline-offset:2px;}

/* responsive: scaling handled by JS; small screens just shrink */
@media (max-width:560px){
  .chrome{flex-wrap:wrap; gap:8px; padding:9px 12px;}
  .ch-issue{display:none;}
}