/* ============ Tokens ============ */
  :root{
    --bg:#FFFFFF;
    --surface:#F8F8FB;
    --surface-2:#F0F1F5;
    --line:#ECEDF1;
    --line-strong:#DEE0E6;
    --text:#181920;
    --muted:#63666F;
    --faint:#9A9EA8;

    --brand:#FFC700;
    --brand-deep:#E6B400;
    --on-brand:#181920;

    --pink:#EE2A5C;
    --pink-tint:#FDE8EF;
    --blue:#3B82F6;
    --blue-tint:#EAF1FE;
    --teal:#0DB39E;
    --teal-tint:#E4F8F5;
    --orange:#F9770E;
    --orange-tint:#FEF0E3;
    --violet:#8B5CF6;
    --violet-tint:#F2ECFE;

    --live:#0DB39E;
    --live-tint:#E4F8F5;
    --focus:#2563EB;

    --shadow: 0 1px 2px rgba(24,25,32,0.04), 0 10px 24px -12px rgba(24,25,32,0.12);
    --shadow-lg: 0 6px 14px rgba(24,25,32,0.08), 0 26px 48px -18px rgba(24,25,32,0.20);

    --display: 'Baloo 2', 'Arial Rounded MT Bold', sans-serif;
    --body: 'Nunito Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

    --radius: 10px;
  }

  /* NewzTube is a fixed white, playful brand — it does not
     switch palette with the visitor's OS/browser dark-mode setting. */

  /* ============ Reset ============ */
  *{margin:0;padding:0;box-sizing:border-box;}
  html{color-scheme:light;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--body);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  ul{list-style:none;}
  button{font:inherit;}
  h1,h2,h3{text-wrap:balance;}
  :focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}
  }

  .wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

  /* ============ Skip link ============ */
  .skip-link{
    position:absolute;left:-999px;top:0;
    background:var(--brand);color:var(--on-brand);
    padding:10px 16px;z-index:200;font-weight:700;
  }
  .skip-link:focus{left:12px;top:0;}

  /* ============ Masthead / single nav row ============ */
  header.masthead{
    background:var(--bg);
    border-bottom:1px solid var(--line-strong);
    position:sticky;
    top:0;
    z-index:100;
  }
  header.masthead .bar{
    display:flex;
    align-items:center;
    gap:28px;
    padding:14px 24px;
    max-width:1180px;
    margin:0 auto;
  }
  .brand{
    font-family:var(--display);
    font-weight:800;
    font-size:27px;
    color:var(--pink);
    letter-spacing:-0.01em;
    flex:0 0 auto;
  }
  nav.primary-nav{flex:1 1 auto;overflow-x:auto;scrollbar-width:none;}
  nav.primary-nav::-webkit-scrollbar{display:none;}
  nav.primary-nav ul{display:flex;gap:22px;white-space:nowrap;}
  nav.primary-nav a{
    font-size:15px;
    font-weight:600;
    color:var(--text);
    transition:color .15s ease;
  }
  nav.primary-nav a.nav-featured{font-weight:800;}
  nav.primary-nav a:hover{color:var(--pink);}
  .masthead-actions{
    display:flex;align-items:center;gap:18px;
    flex:0 0 auto;
    margin-left:auto;
  }
  .signin-link{font-size:14px;font-weight:700;color:var(--text);}
  .signin-link:hover{color:var(--pink);}
  .search-btn{
    background:none;border:none;cursor:pointer;
    color:var(--text);display:flex;align-items:center;
  }
  .reaction-cluster{display:flex;align-items:center;}
  .reaction-cluster .bub{
    width:34px;height:34px;
    border-radius:50%;
    background:var(--brand);
    color:var(--on-brand);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--display);
    font-weight:700;
    font-size:9.5px;
    text-transform:uppercase;
    border:2px solid var(--bg);
    margin-left:-10px;
    transition:transform .15s ease;
  }
  .reaction-cluster .bub:hover{transform:translateY(-3px);}
  .reaction-cluster .bub:first-child{margin-left:0;}
  .reaction-cluster .bub.trend{background:var(--pink);color:#fff;font-size:14px;}

  /* ============ Layout: feed + sidebar ============ */
  .content-layout{
    display:grid;
    grid-template-columns:1fr 320px;
    gap:40px;
    padding:28px 0 40px;
  }

  /* ---------- Lead item ---------- */
  .lead-item{padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:6px;}

  /* Loading skeleton — shown briefly while the homepage fetches real
     articles, so there's never a blank/broken-looking gap mid-page. */
  @keyframes skeleton-shimmer{0%{background-position:100% 50%;}100%{background-position:0 50%;}}
  .skeleton{
    background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 37%, var(--surface-2) 63%);
    background-size:400% 100%;
    animation:skeleton-shimmer 1.4s ease infinite;
  }
  .skeleton-text{border-radius:6px;}
  #feedSkeleton .mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
  @media (max-width:640px){ #feedSkeleton .mini-grid{grid-template-columns:1fr;} }
  .lead-collage{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3px;
    margin-bottom:18px;
    border-radius:var(--radius);
    overflow:hidden;
  }
  .lead-collage .media{aspect-ratio:1/1;border-radius:0;}
  .lead-collage.single{grid-template-columns:1fr;}
  .lead-collage.single .media{aspect-ratio:21/9;}
  .lead-item h1{
    font-family:var(--display);
    font-weight:800;
    font-size:clamp(26px, 3.2vw, 38px);
    line-height:1.1;
    letter-spacing:-0.01em;
    margin-bottom:10px;
    color:var(--text);
  }
  .lead-item h1 a:hover{text-decoration:underline;}
  .lead-item .dek{font-size:16px;color:var(--muted);margin-bottom:12px;}
  .byline{
    font-size:13px;
    font-weight:700;
    color:var(--muted);
    display:flex;
    align-items:center;
    gap:8px;
  }
  .byline .avatar{
    width:24px;height:24px;border-radius:50%;
    background:linear-gradient(135deg, var(--pink), var(--violet));
    color:#fff;font-size:10px;font-weight:800;
    display:inline-flex;align-items:center;justify-content:center;
    flex:0 0 auto;
  }
  .byline-author-link{
    display:inline-flex;align-items:center;gap:8px;
    color:inherit;text-decoration:none;
  }
  .byline-author-link:hover{text-decoration:underline;}

  .reactions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;}
  .reactions .r{
    display:flex;flex-direction:column;align-items:center;gap:2px;
    background:var(--surface);
    border:1px solid var(--line-strong);
    border-radius:12px;
    padding:8px 13px 6px;
    min-width:56px;
    text-align:center;
    cursor:pointer;
    transition:transform .12s ease, border-color .12s ease, background .12s ease;
  }
  .reactions .r:hover{transform:translateY(-2px);border-color:var(--text);background:var(--bg);}
  .reactions .r .emoji{font-size:18px;line-height:1;}
  .reactions .r .r-label{font-size:9.5px;font-weight:800;letter-spacing:0.03em;text-transform:uppercase;color:var(--text);}
  .reactions .r .r-count{font-size:10px;font-weight:700;color:var(--faint);}

  /* ---------- Media placeholder ---------- */
  .media{
    position:relative;
    background:
      radial-gradient(circle at 20% 20%, rgba(255,255,255,0.55), transparent 45%),
      linear-gradient(150deg, var(--m1, #F0F1F5) 0%, var(--m2, #E4E5EB) 100%);
    overflow:hidden;
    border-radius:var(--radius);
  }
  .media::after{
    content:"";
    position:absolute;inset:0;
    background-image:repeating-linear-gradient(115deg, rgba(0,0,0,0.03) 0 2px, transparent 2px 30px);
  }
  /* Real <img class="media"> tags (used for actual article photos, so the
     browser can lazy-load and decode them properly) still pick up every
     aspect-ratio / sizing rule written against .media elsewhere — this
     just makes the element itself render like a normal cropped photo. */
  img.media{width:100%;height:100%;object-fit:cover;display:block;background:var(--surface);}
  .sticker{
    position:absolute;
    bottom:10px;left:10px;
    z-index:1;
    background:var(--brand);
    color:var(--on-brand);
    font-family:var(--display);
    font-weight:800;
    font-size:11px;
    width:38px;height:38px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    transform:rotate(-8deg);
    box-shadow:var(--shadow);
  }
  .sticker.s-pink{background:var(--pink);color:#fff;}
  .sticker.s-teal{background:var(--teal);color:#fff;}

  .pal-1{--m1:#DCE9FF;--m2:#BBD3FF;}
  .pal-2{--m1:#D6F5F0;--m2:#B7EBE1;}
  .pal-3{--m1:#FDE6CE;--m2:#FBD3A8;}
  .pal-4{--m1:#FCDCEC;--m2:#FAC0DF;}
  .pal-5{--m1:#E7DCFD;--m2:#D5C2FB;}
  .pal-6{--m1:#FFE9A8;--m2:#FFDD7A;}

  /* ---------- Feed rows ---------- */
  .feed-list{display:flex;flex-direction:column;}
  .feed-item{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:22px;
    padding:20px 0;
    border-bottom:1px solid var(--line);
    align-items:start;
  }
  .feed-item .media{aspect-ratio:4/3;}
  .feed-item .fi-body{min-width:0;}
  .trend-tag{
    display:flex;align-items:center;gap:5px;
    font-size:12.5px;
    font-weight:800;
    color:var(--pink);
    margin-bottom:6px;
  }
  .feed-item h2{
    font-family:var(--body);
    font-weight:800;
    font-size:21px;
    line-height:1.28;
    color:var(--text);
    margin-bottom:6px;
  }
  .feed-item h2 a:hover{text-decoration:underline;}
  .feed-item p.dek{font-size:13.5px;color:var(--muted);margin-bottom:10px;}
  .feed-item .byline{font-size:12.5px;}
  .feed-item .byline .avatar{width:20px;height:20px;font-size:9px;}

  /* ---------- Two-photo collage rows ---------- */
  .feed-item.collage .media-pair{display:grid;grid-template-columns:1fr 1fr;gap:3px;border-radius:var(--radius);overflow:hidden;}
  .feed-item.collage .media-pair .media{aspect-ratio:1/1;border-radius:0;}

  /* ---------- Section break bars ---------- */
  .section-break{
    display:flex;align-items:center;gap:10px;
    margin:8px 0 18px;
    padding:12px 18px;
    border-radius:999px;
    color:#fff;
  }
  .section-break.sb-pink{background:var(--pink);}
  .section-break.sb-teal{background:var(--teal);}
  .section-break h2{
    font-family:var(--display);
    font-weight:800;
    font-size:17px;
  }
  .section-break .more{
    margin-left:auto;
    font-size:12.5px;
    font-weight:800;
    color:#fff;
    opacity:0.9;
  }
  .section-break .more:hover{text-decoration:underline;}

  .mini-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:18px;
    margin-bottom:8px;
  }
  .mini-card h3{
    font-family:var(--body);
    font-weight:800;
    font-size:16px;
    line-height:1.28;
    margin:10px 0 4px;
    color:var(--text);
  }
  .mini-card h3 a:hover{text-decoration:underline;}
  .mini-card p{font-size:12px;font-weight:700;color:var(--muted);}
  .mini-card .media{aspect-ratio:16/10;position:relative;}
  .quiz-badge{
    position:absolute;top:10px;left:10px;z-index:1;
    background:var(--brand);color:var(--on-brand);
    font-family:var(--display);font-weight:800;font-size:10.5px;
    padding:4px 10px 3px;border-radius:999px;
  }

  /* ---------- Sidebar ---------- */
  .sidebar{display:flex;flex-direction:column;gap:24px;}
  .ad-slot{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:40px 16px;
    text-align:center;
    font-size:11px;
    font-weight:800;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--faint);
  }
  .side-panel{border-top:3px solid var(--pink);padding-top:14px;}
  .side-panel h2{
    font-family:var(--display);
    font-weight:800;
    font-size:18px;
    margin-bottom:14px;
    color:var(--text);
  }
  .side-list li{
    display:grid;
    grid-template-columns:64px 1fr;
    gap:12px;
    padding:11px 0;
    border-bottom:1px solid var(--line);
    align-items:center;
  }
  .side-list li:last-child{border-bottom:none;}
  .side-list .media{aspect-ratio:1/1;flex:0 0 auto;}
  .side-list h3{
    font-size:13.5px;
    font-weight:700;
    line-height:1.32;
    color:var(--text);
  }
  .side-list h3 a:hover{text-decoration:underline;}

  .live-panel{border-top:3px solid var(--teal);padding-top:14px;margin-top:4px;}
  .live-panel .panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
  .live-panel h2{font-family:var(--display);font-weight:800;font-size:18px;color:var(--text);}
  .live-pill{
    display:flex;align-items:center;gap:6px;
    font-size:10.5px;font-weight:800;color:var(--live);
    background:var(--live-tint);padding:4px 9px 3px;border-radius:999px;
    text-transform:uppercase;
  }
  .live-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--live);animation:pulse 1.6s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}
  .live-panel li{padding:10px 0;border-bottom:1px solid var(--line);display:flex;gap:10px;}
  .live-panel li:last-child{border-bottom:none;}
  .live-panel .stamp{font-size:11px;font-weight:800;color:var(--faint);flex:0 0 auto;width:42px;}
  .live-panel p{font-size:13px;font-weight:600;color:var(--text);}

  /* ============ Newsletter ============ */
  .signup{
    border-top:1px solid var(--line-strong);
    border-bottom:1px solid var(--line-strong);
    background:linear-gradient(135deg, var(--pink-tint), var(--blue-tint));
    padding:44px 0;
  }
  .signup .wrap{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;}
  .signup h2{font-family:var(--display);font-weight:800;font-size:27px;max-width:18ch;color:var(--text);letter-spacing:-0.01em;}
  .signup p{font-size:13.5px;font-weight:600;color:var(--muted);margin-top:8px;}
  .signup form{display:flex;gap:10px;flex-wrap:wrap;flex:0 0 auto;}
  .signup input[type="email"]{
    border:1px solid var(--line-strong);background:var(--bg);color:var(--text);
    padding:13px 18px;font-family:var(--body);font-weight:600;font-size:14px;
    min-width:260px;border-radius:999px;
  }
  .signup input[type="email"]::placeholder{color:var(--faint);}
  .signup button{
    background:var(--brand);color:var(--on-brand);border:none;
    padding:13px 26px;font-size:13.5px;font-weight:800;cursor:pointer;
    border-radius:999px;transition:background .15s ease, transform .15s ease;
  }
  .signup button:hover{background:var(--brand-deep);transform:translateY(-1px);}

  /* ============ Footer ============ */
  footer{background:var(--bg);color:var(--muted);padding:40px 0 24px;border-top:1px solid var(--line);}
  .footer-grid{display:grid;grid-template-columns:1.4fr repeat(3, 1fr);gap:32px;padding-bottom:28px;border-bottom:1px solid var(--line);}
  .footer-grid .brand-mini{font-family:var(--display);font-weight:800;font-size:20px;color:var(--pink);margin-bottom:10px;}
  .footer-grid > div:first-child p{font-size:13px;font-weight:600;color:var(--muted);max-width:34ch;margin-bottom:16px;}
  .social-row{display:flex;gap:10px;}
  .social-row a{
    width:32px;height:32px;border:1px solid var(--line-strong);
    display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:800;color:var(--muted);border-radius:50%;
    transition:border-color .15s ease,color .15s ease,background .15s ease;
  }
  .social-row a:hover{border-color:var(--brand);background:var(--brand);color:var(--on-brand);}
  .footer-grid h4{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:14px;color:var(--text);}
  .footer-grid li{margin-bottom:9px;}
  .footer-grid a{font-size:13.5px;font-weight:600;color:var(--muted);transition:color .15s ease;}
  .footer-grid a:hover{color:var(--text);text-decoration:underline;}
  .footer-bottom{padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:11.5px;font-weight:700;color:var(--faint);}

  /* ============ Responsive ============ */
  @media (max-width: 980px){
    .content-layout{grid-template-columns:1fr;}
    .sidebar{order:2;flex-direction:row;flex-wrap:wrap;}
    .side-panel,.live-panel,.ad-slot{flex:1 1 260px;}
    .footer-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width: 640px){
    header.masthead .bar{flex-wrap:wrap;gap:14px;}
    nav.primary-nav{order:3;flex-basis:100%;}
    .feed-item{grid-template-columns:110px 1fr;gap:14px;}
    .feed-item h2{font-size:17px;}
    .lead-collage{grid-template-columns:1fr;}
    .mini-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;}
    .signup .wrap{flex-direction:column;align-items:flex-start;}
    .reaction-cluster{display:none;}
  }

/* ============================================================
   Shared components: article page, author page, auth, account
   ============================================================ */

/* ---------- Auth-aware header slot ---------- */
#auth-slot{display:flex;align-items:center;}
.account-menu{position:relative;}
.account-trigger{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;}
.mini-avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg, var(--pink), var(--violet));
  color:#fff;font-family:var(--display);font-weight:700;font-size:12px;
  display:flex;align-items:center;justify-content:center;
}
.account-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;
  background:var(--bg);border:1px solid var(--line-strong);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);
  min-width:170px;padding:8px;display:none;flex-direction:column;gap:2px;
  z-index:50;
}
.account-menu:hover .account-dropdown,
.account-menu:focus-within .account-dropdown{display:flex;}
.account-dropdown a,.account-dropdown button{
  display:block;width:100%;text-align:left;
  padding:9px 10px;border-radius:8px;border:none;background:none;
  font-size:13.5px;font-weight:700;color:var(--text);cursor:pointer;font-family:var(--body);
}
.account-dropdown a:hover,.account-dropdown button:hover{background:var(--surface);}
.account-dropdown button{color:var(--pink);}

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  padding:16px 0 0;
  font-size:12.5px;font-weight:700;color:var(--faint);
  display:flex;gap:6px;flex-wrap:wrap;
}
.breadcrumb a:hover{color:var(--pink);}
.breadcrumb .sep{color:var(--line-strong);}

/* ---------- Article page ---------- */
.article-page{max-width:760px;margin:0 auto;padding:18px 0 50px;}
.article-page .art-kicker{
  display:inline-block;font-size:12.5px;font-weight:800;color:#fff;
  background:var(--pink);padding:4px 12px 3px;border-radius:999px;margin-bottom:14px;
}
.article-page h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(28px, 4vw, 42px);line-height:1.08;letter-spacing:-0.01em;
  margin-bottom:14px;color:var(--text);
}
.article-page .dek{font-size:17px;color:var(--muted);margin-bottom:16px;}
.article-byline{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:24px;flex-wrap:wrap;gap:12px;
}
.article-byline .who{display:flex;align-items:center;gap:10px;}
.article-byline .avatar-lg{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg, var(--pink), var(--violet));
  color:#fff;font-family:var(--display);font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.article-byline .who a{font-weight:800;color:var(--text);}
.article-byline .who a:hover{text-decoration:underline;}
.article-byline .posted{font-size:12px;color:var(--faint);font-weight:700;}
.share-bar{display:flex;gap:8px;}
.share-bar button{
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line-strong);background:var(--bg);
  cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;
  transition:border-color .15s ease, background .15s ease;
}
.share-bar button:hover{border-color:var(--pink);background:var(--pink-tint);}
.article-hero{aspect-ratio:16/9;margin-bottom:8px;}
.article-hero-caption{font-size:12px;color:var(--faint);font-weight:600;margin-bottom:28px;}
.article-body p{font-size:17px;line-height:1.7;color:var(--text);margin-bottom:22px;}
.article-body h1,.article-body h2,.article-body h3{font-family:var(--display);font-weight:800;color:var(--text);margin:28px 0 14px;}
.article-body h3{font-size:19px;}
.article-body img{border-radius:var(--radius);margin:18px 0 26px;}

/* Quill (the Write page editor) saves every numbered/bulleted line as its
   own separate <ol><li> whenever there's a blank line between items — a
   quirk of the editor, not something writers are doing "wrong". Rather
   than depend on everyone always leaving zero blank lines between list
   items, these rules make the display correct regardless: the numbering
   here is driven by a CSS counter that continues across sibling <ol>
   tags, not by each individual <ol>, so items always count up correctly
   (1, 2, 3...) and bullets always render as real bullets no matter how
   Quill happened to split the HTML up.
*/
.article-body{counter-reset:article-ordered;}
.article-body ol{list-style:none;padding:0;margin:0 0 8px;}
.article-body ol li{
  position:relative;padding-left:1.6em;
  font-size:17px;line-height:1.7;color:var(--text);margin-bottom:14px;
}
.article-body ol li[data-list="bullet"]::before{
  content:"•";position:absolute;left:0.3em;color:var(--pink);font-weight:800;
}
.article-body ol li[data-list="ordered"]{counter-increment:article-ordered;}
.article-body ol li[data-list="ordered"]::before{
  content:counter(article-ordered)".";position:absolute;left:0;
  font-weight:800;color:var(--pink);
}
/* Plain <ul>/<li> (not from Quill, but safe to support) */
.article-body ul{margin:0 0 22px;padding-left:1.4em;}
.article-body ul li{font-size:17px;line-height:1.7;color:var(--text);margin-bottom:10px;}

.listicle-item{margin-bottom:34px;}
.listicle-item .li-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;}
.listicle-item .li-num{
  font-family:var(--display);font-weight:800;font-size:26px;color:var(--brand-deep);
  flex:0 0 auto;
}
.listicle-item h2{font-family:var(--body);font-weight:800;font-size:22px;line-height:1.28;color:var(--text);}
.listicle-item .media{aspect-ratio:16/9;margin-bottom:12px;}
.listicle-item p{font-size:16px;line-height:1.65;color:var(--text);}

.article-reactions{margin:36px 0;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.article-reactions p{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;color:var(--faint);margin-bottom:12px;}

.related-block{margin-top:8px;}
.related-block h2{font-family:var(--display);font-weight:800;font-size:22px;margin-bottom:18px;}
.related-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;}
.related-grid .media{aspect-ratio:4/3;margin-bottom:10px;}
.related-grid h3{font-family:var(--body);font-weight:800;font-size:15px;line-height:1.3;color:var(--text);}
.related-grid h3 a:hover{text-decoration:underline;}

.comments-section{margin-top:44px;}
.comments-section h2{font-family:var(--display);font-weight:800;font-size:22px;margin-bottom:18px;}
.comment-form textarea{
  width:100%;border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:12px 14px;font-family:var(--body);font-size:14px;resize:vertical;min-height:70px;margin-bottom:10px;
}
.comment-form button{
  background:var(--brand);color:var(--on-brand);border:none;padding:10px 20px;
  font-size:13px;font-weight:800;border-radius:999px;cursor:pointer;
}
.comment-form button:hover{background:var(--brand-deep);}
.comment-list{margin-top:24px;display:flex;flex-direction:column;gap:18px;}
.comment{display:flex;gap:12px;}
.comment .avatar-sm{
  width:32px;height:32px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(135deg, var(--teal), var(--blue));
  color:#fff;font-family:var(--display);font-weight:700;font-size:11px;
  display:flex;align-items:center;justify-content:center;
}
.comment .c-name{font-size:13.5px;font-weight:800;color:var(--text);}
.comment .c-time{font-size:11.5px;font-weight:600;color:var(--faint);margin-left:8px;}
.comment p{font-size:14px;color:var(--text);margin-top:3px;}
.signin-note{font-size:12.5px;color:var(--faint);font-weight:600;}
.signin-note a{color:var(--pink);font-weight:800;}

/* ---------- Author page ---------- */
.author-page{max-width:900px;margin:0 auto;padding:36px 0 50px;}
.author-header{
  display:flex;align-items:center;gap:22px;padding-bottom:28px;
  border-bottom:1px solid var(--line-strong);margin-bottom:30px;flex-wrap:wrap;
}
.author-avatar-xl{
  width:88px;height:88px;border-radius:50%;
  background:linear-gradient(135deg, var(--pink), var(--violet));
  color:#fff;font-family:var(--display);font-weight:800;font-size:28px;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.author-header h1{font-family:var(--display);font-weight:800;font-size:30px;margin-bottom:6px;}
.author-header .role{font-size:13.5px;font-weight:700;color:var(--pink);margin-bottom:8px;}
.author-header .bio{font-size:14.5px;color:var(--muted);max-width:56ch;margin-bottom:10px;}
.author-stats{display:flex;gap:20px;font-size:12.5px;font-weight:800;color:var(--faint);}
.author-stats b{color:var(--text);font-size:14px;}

/* ---------- Auth pages (sign in / sign up) ---------- */
body:has(.auth-page){background:var(--bg);min-height:100vh;}
.auth-topbar{padding:26px 24px 0;text-align:center;}
.auth-topbar .brand{font-family:var(--display);font-weight:800;font-size:22px;color:var(--pink);}
.auth-page{
  max-width:380px;margin:0 auto;padding:64px 24px 60px;
  display:flex;flex-direction:column;align-items:stretch;
}
.auth-page h1{
  font-family:Georgia,'Times New Roman',serif;font-weight:400;font-style:normal;
  font-size:30px;margin-bottom:10px;text-align:center;color:var(--text);letter-spacing:-0.01em;
}
.auth-page .sub{font-size:13.5px;color:var(--muted);text-align:center;margin-bottom:28px;line-height:1.5;}
.auth-form{display:flex;flex-direction:column;gap:14px;}
.auth-form input{
  border:1.5px solid var(--line-strong);border-radius:999px;
  padding:15px 22px;font-family:var(--body);font-size:14.5px;color:var(--text);
  background:var(--bg);
}
.auth-form input::placeholder{color:var(--faint);}
.auth-form input:focus-visible{outline:2px solid var(--focus);outline-offset:1px;}
.auth-submit{
  background:var(--brand);color:var(--on-brand);border:none;border-radius:999px;
  padding:15px 0;font-size:14.5px;font-weight:800;cursor:pointer;margin-top:2px;
  transition:background .15s ease;
}
.auth-submit:hover{background:var(--brand-deep);}
.auth-divider{
  display:flex;align-items:center;gap:12px;
  margin:22px 0;color:var(--faint);font-size:12px;font-weight:700;
}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line-strong);}
.auth-oauth{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;border:1.5px solid var(--line-strong);border-radius:999px;
  background:var(--bg);padding:13px 0;font-family:var(--body);
  font-size:14px;font-weight:700;color:var(--text);cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.auth-oauth:hover{background:var(--surface);border-color:var(--muted);}
.auth-switch{
  background:none;border:none;cursor:pointer;
  font-family:var(--body);font-size:13.5px;color:var(--muted);
  margin-top:22px;text-align:center;
}
.auth-switch span{color:var(--pink);font-weight:800;}
.auth-switch:hover span{text-decoration:underline;}
.auth-msg{font-size:13px;font-weight:700;border-radius:10px;padding:10px 14px;display:none;margin-bottom:16px;}
.auth-msg.show{display:block;}
.auth-msg.error{background:var(--pink-tint);color:var(--pink);}
.auth-msg.success{background:var(--teal-tint);color:var(--teal);}
.auth-config-warning{
  background:var(--orange-tint);color:#8a4a0c;border-radius:var(--radius);
  padding:12px 14px;font-size:12.5px;font-weight:600;margin-bottom:20px;line-height:1.5;
}
.auth-footer{
  text-align:center;font-size:11.5px;font-weight:700;color:var(--faint);
  padding:20px 0 30px;
}

/* ---------- Account / dashboard page ---------- */
.account-page{padding:36px 0 50px;}
.account-hero{
  display:flex;align-items:center;gap:20px;padding-bottom:26px;
  border-bottom:1px solid var(--line-strong);margin-bottom:30px;flex-wrap:wrap;
}
.account-hero h1{font-family:var(--display);font-weight:800;font-size:26px;margin-bottom:4px;}

.avatar-picker{display:flex;flex-wrap:wrap;gap:12px;}
.avatar-option{
  width:56px;height:56px;border-radius:50%;
  border:3px solid transparent;cursor:pointer;padding:0;
  background-size:cover;background-position:center;background-color:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:var(--muted);
  transition:border-color .15s ease, transform .1s ease;
}
.avatar-option:hover{transform:scale(1.06);}
.avatar-option.selected{border-color:var(--pink);}
.avatar-picker-msg{font-size:12.5px;color:var(--muted);margin-top:10px;min-height:16px;}
.account-hero .email{font-size:13px;color:var(--muted);font-weight:600;}
.account-section{margin-bottom:40px;}
.account-section h2{font-family:var(--display);font-weight:800;font-size:21px;margin-bottom:16px;}
.history-list{display:flex;flex-direction:column;}
.history-list .feed-item{grid-template-columns:120px 1fr;}
.empty-state{
  background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--radius);
  padding:28px;text-align:center;font-size:13.5px;color:var(--muted);font-weight:600;
}
.empty-state a{color:var(--pink);font-weight:800;}

@media (max-width: 720px){
  .related-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 520px){
  .related-grid{grid-template-columns:1fr;}
  .article-byline{flex-direction:column;align-items:flex-start;}
}

/* ---------- Simple info / legal pages (About, Contact, Privacy, etc.) ---------- */
.prose-page{padding:36px 0 60px;max-width:760px;}
.prose-page h1{font-family:var(--display);font-weight:800;font-size:32px;margin-bottom:10px;}
.prose-page .lead{font-size:16px;color:var(--muted);font-weight:600;margin-bottom:30px;line-height:1.6;}
.prose-page h2{font-family:var(--display);font-weight:800;font-size:20px;margin:30px 0 12px;}
.prose-page p{font-size:14.5px;line-height:1.7;margin-bottom:14px;color:var(--text);}
.prose-page ul{list-style:disc;padding-left:22px;margin-bottom:14px;}
.prose-page ul li{font-size:14.5px;line-height:1.7;margin-bottom:6px;}
.prose-page a{color:var(--pink);font-weight:700;}
.prose-page a:hover{text-decoration:underline;}
.prose-page .updated{font-size:12.5px;color:var(--faint);font-weight:700;margin-bottom:24px;}

.info-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0;}
.info-cards .card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;
}
.info-cards .card h3{font-family:var(--display);font-weight:800;font-size:16px;margin-bottom:6px;}
.info-cards .card p{font-size:13.5px;color:var(--muted);margin:0;}
@media (max-width:600px){.info-cards{grid-template-columns:1fr;}}

.contact-form{display:flex;flex-direction:column;gap:14px;max-width:480px;margin-top:10px;}
.contact-form input,.contact-form textarea{
  font-family:var(--body);font-size:14px;padding:13px 16px;border-radius:999px;
  border:1.5px solid var(--line-strong);background:var(--bg);color:var(--text);
}
.contact-form textarea{border-radius:16px;min-height:120px;resize:vertical;font-family:var(--body);}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--pink);}
.contact-form button{
  font-family:var(--body);font-weight:800;font-size:14.5px;padding:13px 16px;border-radius:999px;
  border:none;background:var(--pink);color:#fff;cursor:pointer;transition:opacity .15s ease;
}
.contact-form button:hover{opacity:.9;}
.contact-form button:disabled{opacity:.6;cursor:default;}