/* ============ 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;
  }
  .hamburger{
    display:flex;flex-direction:column;gap:4px;
    background:none;border:none;cursor:pointer;padding:4px;
    flex:0 0 auto;
  }
  .hamburger span{width:20px;height:2.5px;background:var(--text);display:block;border-radius:2px;}
  .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:700;
    color:var(--text);
    transition:color .15s ease;
  }
  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;}
  .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-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;
  }

  .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);
  }
  .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;}

.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) ---------- */
.auth-page{max-width:420px;margin:0 auto;padding:50px 0 60px;}
.auth-page h1{font-family:var(--display);font-weight:800;font-size:28px;margin-bottom:6px;text-align:center;}
.auth-page .sub{font-size:13.5px;color:var(--muted);text-align:center;margin-bottom:26px;}
.auth-tabs{display:flex;background:var(--surface);border-radius:999px;padding:4px;margin-bottom:22px;}
.auth-tabs button{
  flex:1;border:none;background:none;padding:9px 0;border-radius:999px;
  font-size:13.5px;font-weight:800;color:var(--muted);cursor:pointer;font-family:var(--body);
}
.auth-tabs button.active{background:var(--bg);color:var(--text);box-shadow:var(--shadow);}
.auth-form{display:flex;flex-direction:column;gap:12px;}
.auth-form label{font-size:12.5px;font-weight:800;color:var(--text);margin-bottom:-6px;}
.auth-form input{
  border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:12px 14px;font-family:var(--body);font-size:14px;color:var(--text);
}
.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:13px 0;font-size:14px;font-weight:800;cursor:pointer;margin-top:6px;
  transition:background .15s ease;
}
.auth-submit:hover{background:var(--brand-deep);}
.auth-msg{font-size:13px;font-weight:700;border-radius:10px;padding:10px 14px;display:none;}
.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;
}

/* ---------- 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;}
.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;}
}