:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#6e6e6e;
  --soft:#f2f3f5;
  --border:#e5e5e5;
  --accent:#ff6a00;

  --page-max:100%;
  --content-max:760px;
}

/* RESET */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Inter', sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* CONTAINER */
.container{
  width:100%;
  max-width:none;
  margin:0;
  background:#fff;
}

/* ========================= */
/* HEADER */
/* ========================= */

.article-header{
  width:100%;
  max-width:980px;
  margin:0 auto;
  padding:28px 22px 18px;
}

/* 🔥 TITLE (FIXED FOR REAL CONTENT) */
.title{
  font-size:clamp(24px, 6vw, 32px);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-0.3px;
  margin-bottom:14px;

  word-break:break-word;
  overflow-wrap:anywhere;
}

/* AUTHOR */
.author{
  font-size:15px;
  font-weight:600;
  margin-bottom:4px;
}

/* META */
.meta{
  font-size:13px;
  color:var(--muted);
}

/* ========================= */
/* ACTION BAR */
/* ========================= */

.actions{
  display:flex;
  gap:8px;
  margin-top:14px;
  flex-wrap:wrap;
}

.btn{
  display:flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:8px 12px;
  font-size:13px;
  font-weight:500;
}

.btn.primary,
.btn.icon,
.btn.comment{
  border:1px solid var(--border);
  background:#fff;
}

.btn.icon{
  width:40px;
  height:40px;
  justify-content:center;
  flex-shrink:0;
}

.btn svg{
  width:16px;
  height:16px;
  fill:#111;
}

/* ========================= */
/* HERO */
/* ========================= */

.hero{
  position:relative;
  margin-top:8px;
  width:100vw;
  margin-left:calc(50% - 50vw);
}

.hero img{
  width:100%;
  height:240px;
  object-fit:cover;
}

/* ========================= */
/* CAPTION */
/* ========================= */

.caption{
  font-size:12px;
  color:var(--muted);
  line-height:1.4;

  max-width:32ch;
  margin:10px auto 0;
  padding:0 16px;
}

/* ========================= */
/* TAKEAWAYS */
/* ========================= */

.takeaways{
  width:calc(100% - 24px);
  max-width:980px;
  margin:22px auto;
  background:var(--soft);
  border-radius:20px;
  padding:20px;
}

.takeaways-header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}

.takeaways-header span{
  font-weight:600;
  font-size:14px;
}

.takeaways li{
  font-size:14px;
  line-height:1.6;
}



/* BODY WRAP */
.article-body{
  width:100%;
  max-width:980px;
  margin:0 auto;
  padding:8px 22px 80px;
}

/* CORE TEXT */
.article-body p{
  margin:0 0 1.45em;
  padding:0;

  max-width:none;              /* remove boxed narrow feel */
  width:100%;

  font-size:20px;
  line-height:1.82;
  letter-spacing:-0.012em;
  font-weight:400;
  color:#161616;

  text-wrap:pretty;
  overflow-wrap:break-word;
}

/* nicer reading width on larger screens */
@media (min-width:560px){
  .article-body p,
  .article-body h2,
  .article-body h3,
  .article-body ul,
  .article-body ol,
  .article-body .quote,
  .article-body .inline-media,
  .article-body .ad{
    max-width:42em;
    margin-left:auto;
    margin-right:auto;
  }
}

/* LEAD PARAGRAPH */
.article-body p.lead{
  font-size:23px;
  line-height:1.74;
  color:#101010;
  font-weight:450;
  margin-bottom:1.35em;
}

/* DROP CAP */
.article-body p.lead::first-letter{
  float:left;
  font-family:'Playfair Display', serif;
  font-size:4.1em;
  line-height:.78;
  padding:.06em .12em 0 0;
  margin-right:.02em;
  color:#111;
}

/* HEADINGS */
.article-body h2{
  margin:2.2em 0 .65em;
  font-size:34px;
  line-height:1.08;
  letter-spacing:-0.04em;
  font-weight:600;
  color:#0f0f0f;
}

.article-body h3{
  margin:1.8em 0 .55em;
  font-size:25px;
  line-height:1.18;
  letter-spacing:-0.03em;
  font-weight:600;
}

/* LINKS */
.article-body a{
  color:#ff6a00;
  text-decoration:none;
  border-bottom:1px solid rgba(255,106,0,.28);
  transition:.18s ease;
}

.article-body a:hover{
  color:#d95500;
  border-color:#ff6a00;
}

/* LISTS */
.article-body ul,
.article-body ol{
  margin:0 0 1.6em;
  padding-left:1.25em;
}

.article-body li{
  margin-bottom:.65em;
  font-size:19px;
  line-height:1.72;
}

/* BLOCKQUOTE */
.article-body .quote{
  margin:2.2em auto;
  padding:0 0 0 18px;
  border-left:3px solid #ff6a00;
}

.article-body .quote p{
  margin:0;
  font-family:'Playfair Display', serif;
  font-size:30px;
  line-height:1.42;
  letter-spacing:-0.02em;
  color:#111;
}

/* INLINE IMAGE */
.article-body .inline-media{
  margin:2em auto;
}

.article-body .inline-media img{
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:18px;
  display:block;
}

.article-body .inline-media .caption{
  max-width:none;
  margin:.8em 0 0;
  padding:0;

  font-size:12px;
  line-height:1.55;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#777;
}

/* AD BLOCK */
.article-body .ad{
  margin:2.4em auto;
  max-width:34em;
  padding:16px 18px;
  border-radius:18px;
  background:#f5f5f5;
  border:1px solid rgba(0,0,0,.05);

  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#777;
  text-align:center;
}

/* SMALL PHONES */
@media (max-width:420px){

  .article-body{
    padding:8px 18px 64px;
  }

  .article-body p{
    font-size:18px;
    line-height:1.78;
  }

  .article-body p.lead{
    font-size:21px;
  }

  .article-body h2{
    font-size:29px;
  }

  .article-body h3{
    font-size:23px;
  }

  .article-body .quote p{
    font-size:25px;
  }

  .article-body li{
    font-size:18px;
  }
}

/* VERY SMALL DEVICES */
@media (max-width:360px){

  .article-body{
    padding-inline:16px;
  }

  .article-body p{
    font-size:17px;
  }

  .article-body h2{
    font-size:26px;
  }
}

/* ========================= */
/* TALKING */
/* ========================= */

.talking{
  padding:18px 14px 26px;
}

.talking-inner{
  background:linear-gradient(180deg,#2f5fa8,#2b4f8e);
  border-radius:18px;
  padding:18px 14px;
  color:#fff;
}

/* ========================= */
/* NEWSLETTER */
/* ========================= */

.newsletter{
  padding:18px 14px;
  background:#f6f6f6;
}

.nl-inner{
  padding:16px 12px;
}

.nl-inner h2{
  font-size:20px;
  margin-bottom:8px;
}

.nl-inner p{
  font-size:14px;
  margin-bottom:12px;
}

.nl-inner input{
  width:100%;
  padding:12px;
  font-size:14px;
  border-radius:8px;
  border:2px solid #111;
  margin-bottom:10px;
}

.nl-inner button{
  width:100%;
  padding:12px;
  border-radius:10px;
  background:#000;
  color:#fff;
  font-size:15px;
}

/* ========================= */
/* FOOTER */
/* ========================= */

.final-footer{
  background:#000;
  color:#fff;
  padding:22px 14px 40px;
}

.ff-top{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  margin-bottom:20px;
}

.ff-title{
  font-size:26px;
  margin-bottom:16px;
}

.ff-input input{
  width:100%;
  padding:12px;
  font-size:14px;
}

.ff-input button{
  width:100%;
  padding:12px;
  font-size:16px;
}

.ff-brand{
  font-size:80px;
  line-height:0.8;
  margin-top:20px;
}

/* ========================= */
/* SMALL DEVICE FIX */
/* ========================= */

@media (max-width:340px){

  .title{
    font-size:22px;
  }

  .article-body p{
    font-size:16px;
  }

}

body{
  overflow-x:hidden;
}
/* ========================= */
/* TALKING POINTS */
/* ========================= */

.talking{
  padding:20px 16px 30px;
}

.talking-inner{
  background:linear-gradient(180deg,#2f5fa8,#2b4f8e);
  border-radius:22px;
  padding:22px 18px;
  color:#fff;

  box-shadow:0 20px 40px rgba(0,0,0,0.25);
}

/* HEADER */
.tp-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}

.tp-logo{
  width:22px;
  height:22px;
  border-radius:50%;
  background:#fff;
}

.tp-brand{
  font-weight:700;
  font-size:20px;
}

.tp-brand span{
  font-weight:400;
  opacity:0.8;
}

/* TITLE */
.tp-title{
  font-size:22px;
  line-height:1.35;
  font-weight:600;
  margin-bottom:18px;
}

/* EMBED */
.tp-embed{
  background:#fff;
  border-radius:18px;
  padding:14px;
  color:#111;
}

/* TOP */
.tp-embed-top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}

.tp-embed-top img{
  width:36px;
  height:36px;
  border-radius:50%;
}

.tp-user{
  flex:1;
}

.tp-name{
  font-weight:700;
  font-size:14px;
}

.tp-handle{
  font-size:13px;
  color:#555;
}

.tp-x{
  font-weight:700;
  font-size:16px;
}

/* TEXT */
.tp-text{
  font-size:15px;
  margin-bottom:10px;
}

/* MEDIA */
.tp-media{
  position:relative;
  border-radius:14px;
  overflow:hidden;
}

.tp-media img{
  width:100%;
  height:140px;
  object-fit:cover;
}

.tp-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:10px;

  background:linear-gradient(to top,rgba(255,255,255,0.9),transparent);
  font-weight:600;
  color:#555;
}

/* COMMENT */
.tp-comment{
  margin-top:18px;
  border:1px solid rgba(255,255,255,0.4);
  border-radius:18px;
  padding:14px;
}

.tp-comment-top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}

.tp-comment-top img{
  width:28px;
  height:28px;
  border-radius:50%;
}

.tp-comment-name{
  font-weight:600;
}

.tp-badge{
  margin-left:auto;
  font-size:12px;
  opacity:0.7;
}

.tp-comment p{
  font-size:15px;
  line-height:1.5;
}

/* DOTS */
.tp-dots{
  display:flex;
  justify-content:center;
  gap:6px;
  margin:18px 0;
}

.tp-dots span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,0.4);
}

.tp-dots .active{
  background:#fff;
}

/* FOOT */
.tp-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid rgba(255,255,255,0.2);
  padding-top:14px;
}

/* COMMENTS */
.tp-comments{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
}

.bubble{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
}

/* BUTTON */
.tp-signin{
  background:#fff;
  color:#2b4f8e;
  border:none;
  padding:10px 14px;
  border-radius:10px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
}

.tp-signin .icon{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#2b4f8e;
}


/* ========================= */
/* NEWSLETTER — PREMIUM TIGHT */
/* ========================= */

.newsletter{
  padding:22px 16px 18px;
  background:#f6f6f6;
}

/* INNER */
.nl-inner{
  position:relative;
  padding:20px 14px;
}

/* CORNERS (subtle, not loud) */
.nl-corner{
  position:absolute;
  width:14px;
  height:14px;
  border:2px solid #6c3cf0;
}

.nl-corner.tl{
  top:0;
  left:0;
  border-right:none;
  border-bottom:none;
}

.nl-corner.br{
  bottom:0;
  right:0;
  border-left:none;
  border-top:none;
}

/* TITLE */
.nl-inner h2{
  font-size:24px;
  font-weight:700;
  margin-bottom:10px;
  letter-spacing:-0.3px;
}

/* TEXT */
.nl-inner p{
  font-size:16px;
  line-height:1.55;
  color:#444;
  margin-bottom:16px;
}

/* LABEL */
.nl-inner label{
  display:block;
  font-size:14px;
  font-weight:600;
  margin-bottom:6px;
}

/* INPUT */
.nl-inner input{
  width:100%;
  padding:14px;
  font-size:16px;
  border-radius:10px;
  border:2px solid #111;
  margin-bottom:14px;
  outline:none;
}

/* BUTTON */
.nl-inner button{
  width:100%;
  padding:14px;
  border-radius:12px;
  border:none;
  background:#000;
  color:#fff;
  font-size:18px;
  font-weight:600;
}

/* SOCIAL (de-emphasized) */
.nl-social{
  display:flex;
  justify-content:space-between;
  margin-top:18px;
  font-size:18px;
  opacity:0.7;
}

/* LINKS */
.nl-links{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:16px;
}

/* APP */
.app{
  background:#000;
  color:#fff;
  padding:10px 14px;
  border-radius:8px;
  font-size:13px;
}

/* WALRUS */
.walrus{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  opacity:0.8;
}

.walrus-icon{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#7fcac5;
}



/* ========================= */
/* FINAL FOOTER — EDITORIAL */
/* ========================= */

.final-footer{
  background:#000;
  color:#fff;
  padding:26px 16px 50px;
  position:relative;
  overflow:hidden;
}

/* TOP META */
.ff-top{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  margin-bottom:28px;
}

.ff-top span{
  opacity:0.7;
}

.shop{
  margin-left:auto;
}

/* TITLE */
.ff-title{
  font-size:32px;
  font-weight:600;
  margin-bottom:22px;
  letter-spacing:-0.3px;
}

/* INPUT BLOCK */
.ff-input{
  margin-bottom:60px;
}

.ff-input input{
  width:100%;
  padding:16px;
  font-size:16px;
  border:none;
  background:#eaeaea;
  outline:none;
}

.ff-input button{
  width:100%;
  padding:16px;
  background:linear-gradient(#2a2a2a,#111);
  color:#fff;
  border:none;
  font-size:18px;
}

/* =====================================
FINAL FOOTER BRAND WORDMARK
Use X Trends brand font
===================================== */

.ff-brand{
  font-family:'Audiowide', sans-serif !important;
  font-size:clamp(72px, 24vw, 128px);
  line-height:.82;
  font-weight:400;
  letter-spacing:-0.035em;

  color:#f2f2f2;
  text-transform:uppercase;

  margin-top:18px;

  display:block;
  width:100%;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* cleaner punctuation spacing */
.ff-brand .dot{
  letter-spacing:0;
}

/* mobile tightening */
@media (max-width:420px){
  .ff-brand{
    font-size:clamp(62px, 22vw, 102px);
    line-height:.84;
    letter-spacing:-0.04em;
  }
}

/* very small phones */
@media (max-width:360px){
  .ff-brand{
    font-size:56px;
  }
}


/* =========================
YOU MAY ALSO LIKE
BILLBOARD STYLE / ORANGE BRAND
========================= */

.ymal-section{
  background:#f2f2f0;
  padding:22px 0 30px;
  border-top:1px solid rgba(0,0,0,.06);
}

.ymal-wrap{
  max-width:420px;
  margin:0 auto;
  padding:0 16px;
}

/* HEADING */
.ymal-heading{
  font-size:32px;
  line-height:.9;
  font-weight:900;
  letter-spacing:-0.05em;
  text-transform:uppercase;
  color:#ff6a00;
  margin:0 0 16px;
}

/* FEATURE */
.ymal-feature{
  cursor:pointer;
  margin-bottom:10px;
}

.ymal-feature img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
  border-radius:4px;
}

/* FEATURE ROW */
.ymal-feature-row{
  display:grid;
  grid-template-columns:46px 1fr;
  gap:14px;
  align-items:start;
  padding:14px 0 12px;
  border-bottom:1px solid rgba(0,0,0,.18);
}

/* NUMBERS */
.ymal-rank{
  font-size:54px;
  line-height:.8;
  font-weight:900;
  letter-spacing:-0.08em;
  color:#ff6a00;
}

/* TITLES */
.ymal-title{
  font-size:22px;
  line-height:1.08;
  font-weight:800;
  letter-spacing:-0.04em;
  color:#111;
}

/* LIST ITEMS */
.ymal-item{
  display:grid;
  grid-template-columns:46px 1fr;
  gap:14px;
  align-items:start;

  padding:16px 0;
  border-top:1px solid rgba(0,0,0,.18);

  cursor:pointer;
}

.ymal-item .ymal-rank{
  font-size:46px;
}

.ymal-item .ymal-title{
  font-size:18px;
  line-height:1.14;
  font-weight:800;
}

/* INTERACTION */
.ymal-feature:active,
.ymal-item:active{
  opacity:.72;
}

/* MOBILE */
@media (max-width:360px){

  .ymal-heading{
    font-size:28px;
  }

  .ymal-feature img{
    height:200px;
  }

  .ymal-rank{
    font-size:48px;
  }

  .ymal-item .ymal-rank{
    font-size:40px;
  }

  .ymal-title{
    font-size:20px;
  }

  .ymal-item .ymal-title{
    font-size:17px;
  }

}

/* HEADER WRAPPER */
.x-header {
  position: sticky;
  top: 0;
  z-index: 1000;

  padding: 12px 16px;

  background: transparent; /* 🔥 THIS is the fix */
}

/* INNER PILL */
.x-header-inner {
  max-width: 1200px;
  margin: 0 auto;

  background: #ffffff;
  border-radius: 999px;

  padding: 18px 22px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  box-shadow:
    0 8px 24px rgba(0,0,0,0.08),
    0 2px 6px rgba(0,0,0,0.04);

  /* subtle glass streak */
  position: relative;
  overflow: hidden;
}

/* LIGHT STREAK EFFECT */
.x-header-inner::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.6) 30%,
    transparent 60%
  );

  opacity: 0.4;
  pointer-events: none;
}

/* LOGO */
.x-logo {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;

  color: #111;
}

.x-logo span {
  color: #6d28d9; /* premium accent */
}

/* ACTIONS */
.x-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* ICON BUTTON BASE */
.x-icon-btn {
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: none;
  cursor: pointer;

  color: #111;
}

/* HOVER FEEL */
.x-icon-btn:hover {
  opacity: 0.6;
}

/* MENU ICON */
.x-icon-btn svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* SEARCH ICON */
.x-icon-btn svg {
  width: 22px;
  height: 22px;
}

/* MOBILE POLISH */
@media (max-width: 768px) {
  .x-header {
    padding: 12px;
  }

  .x-header-inner {
    padding: 14px 18px;
  }

  .x-logo {
    font-size: 22px;
  }
}

/* =========================
DRAWER SYSTEM
========================= */

.drawer-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(2px);
  z-index:1400;
  opacity:0;
  transition:opacity .22s ease;
}

.drawer{
  position:fixed;
  top:0;
  left:0;
  height:100dvh;
  width:min(86vw, 340px);
  background:#fff;
  z-index:1500;

  display:flex;
  flex-direction:column;

  transform:translateX(-100%);
  transition:transform .26s cubic-bezier(.2,.8,.2,1);

  box-shadow:18px 0 40px rgba(0,0,0,.18);
  will-change:transform;
}

/* OPEN STATE */
.drawer.active{
  transform:translateX(0);
}

.drawer-overlay.active{
  opacity:1;
}

/* HEADER */
.drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 16px;
  border-bottom:1px solid #ececec;
}

.drawer-brand{
  font-size:24px;
  font-weight:800;
  letter-spacing:-0.5px;
  color:#111;
}

.drawer-brand span{
  color:#6d28d9;
}

.drawer-close{
  width:40px;
  height:40px;
  border:none;
  border-radius:999px;
  background:#f3f4f6;
  font-size:18px;
  cursor:pointer;
}

/* NAV */
.drawer-nav{
  padding:10px 12px 0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  flex:1;
}

.drawer-link{
  display:flex;
  align-items:center;
  min-height:52px;
  padding:0 12px;
  border-radius:14px;

  color:#111;
  text-decoration:none;
  font-size:16px;
  font-weight:600;
}

.drawer-link:active,
.drawer-link:hover{
  background:#f5f5f5;
}

/* FOOT */
.drawer-foot{
  padding:14px;
  border-top:1px solid #ececec;
}

.drawer-cta{
  display:flex;
  align-items:center;
  justify-content:center;

  height:48px;
  border-radius:14px;

  text-decoration:none;
  background:#111;
  color:#fff;
  font-weight:700;
  font-size:15px;
}

/* BODY LOCK */
body.drawer-open{
  overflow:hidden;
  touch-action:none;
}

/* BETTER TAP FEEL */
.drawer-close,
.drawer-link,
.drawer-cta,
#menuToggle{
  -webkit-tap-highlight-color:transparent;
}

/* SMALL DEVICES */
@media (max-width:340px){

  .drawer{
    width:92vw;
  }

  .drawer-brand{
    font-size:22px;
  }

}


/* =========================
QUICK SUMMARY - PREMIUM ACCORDION
========================= */

.quick-summary{
  width:calc(100% - 24px);
  max-width:980px;
  margin:24px auto;
  padding:18px;

  background:linear-gradient(180deg,#fff8ef 0%, #fff2dc 100%);
  border:1px solid rgba(255,145,0,.16);
  border-radius:22px;


  box-shadow:
    0 14px 30px rgba(0,0,0,.05);

  position:relative;
  overflow:hidden;
}

/* subtle accent rail */
.quick-summary::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg,#ff8a00,#ff5e00);
}

/* top row */
.qs-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

.qs-badge{
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#111;
}

.qs-seo{
  font-size:11px;
  font-weight:700;
  color:#b45309;
  background:rgba(245,158,11,.12);
  padding:7px 10px;
  border-radius:999px;
}

/* body wrapper */
.qs-content{
  position:relative;
}

/* collapsed by default */
.quick-summary.collapsed .qs-content{
  max-height:108px;
  overflow:hidden;
}

/* fade when collapsed */
.quick-summary.collapsed .qs-content::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:54px;

  background:linear-gradient(
    to bottom,
    rgba(255,248,239,0),
    rgba(255,242,220,1)
  );
}

/* text */
.quick-summary p{
  font-size:16px;
  line-height:1.78;
  color:#1f1f1f;
  font-style:italic;
}

/* button row */
.qs-actions{
  margin-top:14px;
  display:flex;
  justify-content:flex-start;
}

.qs-toggle{
  appearance:none;
  border:none;
  cursor:pointer;

  height:40px;
  padding:0 14px;

  border-radius:999px;

  background:#111;
  color:#fff;

  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
}

/* divider */
.article-divider{
  width:calc(100% - 32px);
  height:1px;
  margin:0 auto 24px;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(0,0,0,.14),
    transparent
  );
}


/* =========================
INLINE ARTICLE QUOTE
========================= */

.inline-smart-quote{
  position:relative;
  overflow:hidden;

  margin:30px auto;
  max-width:34ch;

  background:#170038;
  border-radius:26px;

  padding:22px 14px;
}

/* background shapes */
.isq-bg-left,
.isq-bg-right{
  position:absolute;
  border-radius:50%;
  background:rgba(84,99,255,.16);
  pointer-events:none;
}

.isq-bg-left{
  width:150px;
  height:150px;
  left:-80px;
  top:-30px;
}

.isq-bg-right{
  width:180px;
  height:180px;
  right:-95px;
  bottom:-60px;
}

/* card */
.isq-card{
  position:relative;
  z-index:2;

  background:#f5d438;
  color:#111;

  border-radius:26px;
  padding:34px 18px 44px;

  text-align:center;
}

/* tail */
.isq-card::after{
  content:"";
  position:absolute;
  right:34px;
  bottom:-24px;

  width:0;
  height:0;

  border-left:22px solid transparent;
  border-top:28px solid #f5d438;
}

/* marks */
.isq-mark{
  position:absolute;
  font-size:64px;
  line-height:.7;
  font-weight:900;
  color:#34b7eb;
  font-family:Georgia, serif;
}

.isq-open{
  left:10px;
  top:-4px;
}

.isq-close{
  right:10px;
  bottom:-6px;
}

/* text */
.isq-text{
  font-size:18px;
  line-height:1.45;
  font-weight:700;
  letter-spacing:-.02em;
}

/* author */
.isq-author{
  margin-top:14px;
  font-size:15px;
  font-weight:800;
}

/* mobile */
@media (max-width:340px){

  .isq-text{
    font-size:16px;
  }

}

/* =========================
HERO CAPTION / IMAGE CREDIT
EDITORIAL MONO STYLE
Replace ONLY this section
========================= */

.hero-caption{
  max-width:420px;
  margin:0 auto;
  padding:16px 18px 0;

  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:14px;
  line-height:1.72;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#4b4b4b;

  position:relative;
  text-wrap:pretty;
}

/* subtle orange rule */
.hero-caption::before{
  content:"";
  display:block;
  width:44px;
  height:2px;
  border-radius:999px;
  margin-bottom:12px;

  background:linear-gradient(
    90deg,
    #ff6a00,
    #ffb36e
  );
}

/* make final credit line stronger */
.hero-caption strong,
.hero-caption b{
  font-weight:700;
  color:#111;
}

/* divider after caption */
.hero-divider{
  width:calc(100% - 36px);
  max-width:420px;
  height:1px;
  margin:18px auto 10px;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(0,0,0,.12),
    transparent
  );
}

/* mobile */
@media (max-width:360px){

  .hero-caption{
    padding:14px 16px 0;
    font-size:13px;
    line-height:1.68;
    letter-spacing:.07em;
  }

  .hero-divider{
    width:calc(100% - 32px);
    margin-top:16px;
  }

}

/* =========================
NEWSLETTER
========================= */

.newsletter{
  padding:28px 18px 34px;
}

.nl-inner{
  position:relative;
  background:linear-gradient(180deg,#ffffff 0%,#faf8f4 100%);
  border:1px solid rgba(0,0,0,.06);
  border-radius:26px;
  padding:26px 22px 22px;
  overflow:hidden;

  box-shadow:
    0 18px 40px rgba(0,0,0,.05),
    0 4px 12px rgba(0,0,0,.03);
}

.nl-corner{
  position:absolute;
  width:44px;
  height:44px;
  border:3px solid #ff6a00;
  opacity:.9;
}

.nl-corner.tl{
  top:-1px;
  left:-1px;
  border-right:none;
  border-bottom:none;
  border-top-left-radius:22px;
}

.nl-corner.br{
  right:-1px;
  bottom:-1px;
  border-left:none;
  border-top:none;
  border-bottom-right-radius:22px;
}

.nl-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;

  font-size:11px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#ff6a00;

  margin-bottom:14px;
}

.nl-kicker::before{
  content:"";
  width:18px;
  height:2px;
  border-radius:999px;
  background:#ff6a00;
}

.nl-inner h2{
  margin:0 0 12px;
  font-size:34px;
  line-height:.95;
  letter-spacing:-.05em;
  font-weight:900;
  color:#111;
}

.nl-inner p{
  margin:0 0 18px;
  font-size:15px;
  line-height:1.62;
  color:#666;
  max-width:34ch;
}

.nl-form{
  display:grid;
  gap:12px;
}

.nl-label{
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#777;
}

.nl-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
}

.nl-input{
  width:100%;
  height:54px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.09);
  background:#fff;
  padding:0 16px;

  font-size:15px;
  font-weight:600;
  color:#111;
  outline:none;
}

.nl-input:focus{
  border-color:#ff6a00;
  box-shadow:0 0 0 4px rgba(255,106,0,.08);
}

.nl-btn{
  height:54px;
  padding:0 20px;
  border:none;
  border-radius:16px;
  background:#111;
  color:#fff;
  font-size:14px;
  font-weight:900;
  letter-spacing:.02em;
  cursor:pointer;
}

.nl-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

.nl-foot{
  margin-top:12px;
  font-size:13px;
  color:#666;
  line-height:1.45;
}

.nl-msg{
  margin-top:14px;
  min-height:20px;
  font-size:14px;
  font-weight:700;
}

.nl-msg.success{
  color:#0b8a39;
}

.nl-msg.error{
  color:#c62828;
}

.nl-meta{
  margin-top:14px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.nl-pill{
  height:28px;
  padding:0 12px;
  border-radius:999px;
  background:#f2f2f2;
  display:flex;
  align-items:center;
  font-size:11px;
  font-weight:800;
  color:#666;
}

@media (max-width:360px){

  .nl-inner h2{
    font-size:29px;
  }

  .nl-row{
    grid-template-columns:1fr;
  }

  .nl-btn{
    width:100%;
  }
}


/* ==========================================
PREMIUM SOCIAL + LINKS STRIP
FULLY REBUILT
Mobile-first / no bleed / no layout shift
Because apparently CSS must now parent itself.
Paste over old section completely.
========================================== */

/* ===============================
ROOT SAFE WRAP
=============================== */

.newsletter + .nl-social,
.newsletter + .nl-social + .nl-links{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  position:relative;
}

.newsletter + .nl-social *,
.newsletter + .nl-social + .nl-links *{
  box-sizing:border-box;
  min-width:0;
}

/* ===============================
SOCIAL PANEL
=============================== */

.newsletter + .nl-social{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;

  width:calc(100% - 24px);
  margin:18px auto 0;
  padding:14px;

  border-radius:24px;
  overflow:hidden;

  background:
    radial-gradient(circle at top right, rgba(255,106,0,.10), transparent 34%),
    radial-gradient(circle at bottom left, rgba(109,40,217,.08), transparent 30%),
    linear-gradient(180deg,#ffffff,#f4f4f4);

  border:1px solid rgba(0,0,0,.05);

  box-shadow:
    0 10px 22px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.92);
}

/* heading */
.newsletter + .nl-social::before{
  content:"SHARE X TRENDS";
  grid-column:1 / -1;

  display:block;
  margin-bottom:2px;

  font-size:10px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.18em;
  color:#8c8c8c;
}

/* ===============================
SOCIAL BUTTONS
=============================== */

.newsletter + .nl-social .nl-social-btn{
  width:100%;
  min-width:0;
  height:52px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:16px;
  overflow:hidden;

  text-decoration:none;
  color:#222;

  background:linear-gradient(180deg,#ffffff,#f8f8f8);
  border:1px solid rgba(0,0,0,.05);

  box-shadow:
    0 6px 14px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.95);

  transition:
    transform .16s ease,
    color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.newsletter + .nl-social .nl-social-btn svg{
  width:20px;
  height:20px;
  flex:0 0 auto;
  display:block;
}

/* safer mobile interaction */
@media (hover:hover){

  .newsletter + .nl-social .nl-social-btn:hover{
    transform:translateY(-2px);
    color:#ff6a00;
    border-color:rgba(255,106,0,.18);

    box-shadow:
      0 12px 20px rgba(0,0,0,.06);
  }

}

.newsletter + .nl-social .nl-social-btn:active{
  transform:scale(.97);
}

/* ===============================
CTA STACK
=============================== */

.newsletter + .nl-social + .nl-links{
  display:grid;
  gap:12px;

  width:calc(100% - 24px);
  margin:14px auto 0;
  padding:0 0 10px;
}

/* ===============================
COMMON CTA
=============================== */

.newsletter + .nl-social + .nl-links .app-store,
.newsletter + .nl-social + .nl-links .walrus{
  width:100%;
  min-width:0;

  display:flex;
  align-items:center;
  gap:12px;

  padding:0 16px;
  text-decoration:none;

  border-radius:20px;
  overflow:hidden;

  transition:
    transform .16s ease,
    box-shadow .16s ease;
}

/* ===============================
APP STORE
=============================== */

.newsletter + .nl-social + .nl-links .app-store{
  min-height:64px;
  color:#fff;

  background:
    radial-gradient(circle at top right, rgba(255,255,255,.08), transparent 32%),
    linear-gradient(135deg,#111,#000 58%,#191919);

  box-shadow:
    0 14px 26px rgba(0,0,0,.16);
}

.newsletter + .nl-social + .nl-links .app-store svg{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:block;
}

.newsletter + .nl-social + .nl-links .app-store span{
  display:block;
  min-width:0;
}

.newsletter + .nl-social + .nl-links .app-store small{
  display:block;
  font-size:10px;
  line-height:1.1;
  opacity:.72;
  font-weight:700;
  letter-spacing:.04em;
}

.newsletter + .nl-social + .nl-links .app-store strong{
  display:block;
  margin-top:2px;

  font-size:17px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:-.02em;

  white-space:nowrap;
}

/* ===============================
WALRUS
=============================== */

.newsletter + .nl-social + .nl-links .walrus{
  min-height:60px;
  color:#111;

  background:
    radial-gradient(circle at top right, rgba(14,165,164,.10), transparent 28%),
    linear-gradient(180deg,#ffffff,#f8f8f8);

  border:1px solid rgba(0,0,0,.05);

  box-shadow:
    0 10px 20px rgba(0,0,0,.05);
}

.newsletter + .nl-social + .nl-links .walrus-icon{
  width:36px;
  height:36px;
  flex:0 0 36px;

  border-radius:50%;

  display:grid;
  place-items:center;

  color:#0ea5a4;
  background:rgba(14,165,164,.12);
}

.newsletter + .nl-social + .nl-links .walrus-icon svg{
  width:22px;
  height:22px;
  display:block;
}

.newsletter + .nl-social + .nl-links .walrus span:last-child{
  display:block;

  font-size:15px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.01em;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===============================
HOVER DESKTOP ONLY
=============================== */

@media (hover:hover){

  .newsletter + .nl-social + .nl-links .app-store:hover,
  .newsletter + .nl-social + .nl-links .walrus:hover{
    transform:translateY(-2px);
  }

}

/* ===============================
SMALL PHONES
=============================== */

@media (max-width:360px){

  .newsletter + .nl-social,
  .newsletter + .nl-social + .nl-links{
    width:calc(100% - 20px);
  }

  .newsletter + .nl-social{
    gap:8px;
    padding:12px;
    border-radius:20px;
  }

  .newsletter + .nl-social .nl-social-btn{
    height:48px;
    border-radius:14px;
  }

  .newsletter + .nl-social .nl-social-btn svg{
    width:18px;
    height:18px;
  }

  .newsletter + .nl-social + .nl-links .app-store{
    min-height:60px;
    border-radius:18px;
  }

  .newsletter + .nl-social + .nl-links .app-store strong{
    font-size:15px;
  }

  .newsletter + .nl-social + .nl-links .walrus{
    min-height:58px;
    border-radius:18px;
  }

  .newsletter + .nl-social + .nl-links .walrus span:last-child{
    font-size:14px;
  }

}

/* ===============================
LARGER MOBILE / TABLET
=============================== */

@media (min-width:600px){

  .newsletter + .nl-social,
  .newsletter + .nl-social + .nl-links{
    max-width:560px;
  }

}


/* ===============================
LIVE FOOTER CLOCKS
Mobile first / stable / no shift
=============================== */

.ff-top{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  align-items:start;
}

.ff-clock{
  min-width:0;
}

.ff-clock strong{
  display:block;
  font-size:12px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:.04em;
  color:#fff;
  white-space:nowrap;
}

.ff-clock span{
  display:block;
  margin-top:6px;

  font-size:13px;
  line-height:1;
  font-variant-numeric:tabular-nums;
  letter-spacing:.03em;
  color:rgba(255,255,255,.72);

  min-height:13px; /* prevents layout shift */
}

.shop{
  grid-column:1 / -1;
  margin-top:6px;

  font-size:13px;
  font-weight:700;
  color:#fff;
}

@media (min-width:520px){

  .ff-top{
    grid-template-columns:repeat(4,minmax(0,1fr));
    align-items:end;
  }

  .shop{
    grid-column:auto;
    justify-self:end;
    margin-top:0;
  }

}


/* ===============================
PREMIUM FLAG CLOCKS
Because text labels were giving airport terminal.
=============================== */

.ff-top{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:start;
}

.ff-clock{
  min-width:0;
}

.ff-flag-label{
  display:block;
}

.ff-flag{
  display:block;
  width:42px;
  height:26px;
}

.ff-flag svg{
  width:100%;
  height:100%;
  display:block;
  border-radius:6px;
  box-shadow:
    0 8px 18px rgba(0,0,0,.28),
    0 1px 0 rgba(255,255,255,.08) inset;
}

.ff-clock span[id]{
  display:block;
  margin-top:8px;

  font-size:13px;
  line-height:1;
  font-weight:700;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;

  color:rgba(255,255,255,.74);

  min-height:13px; /* no layout shift */
}

.shop{
  grid-column:1 / -1;
  min-height:1px;
}

@media (max-width:360px){

  .ff-top{
    gap:10px;
  }

  .ff-flag{
    width:38px;
    height:24px;
  }

  .ff-clock span[id]{
    font-size:12px;
  }

}

/* ===================================
FINAL FOOTER COMMUNITY CTA
Because dead inputs pretending to collect emails are exhausting.
=================================== */

.ff-community-cta{
  width:100%;
  min-height:64px;
  padding:0 18px;
  margin:0 0 54px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  text-decoration:none;
  color:#fff;

  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);

  background:
    radial-gradient(circle at top right, rgba(255,106,0,.18), transparent 34%),
    linear-gradient(135deg,#1b1b1b,#090909 60%,#141414);

  box-shadow:
    0 18px 34px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.05);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;

  box-sizing:border-box;
}

.ff-community-cta:hover,
.ff-community-cta:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(255,106,0,.34);

  box-shadow:
    0 22px 38px rgba(0,0,0,.34);
}

.ff-community-cta:active{
  transform:scale(.985);
}

.ff-community-text{
  font-size:17px;
  font-weight:800;
  letter-spacing:-.02em;
}

.ff-community-icon{
  width:38px;
  height:38px;
  border-radius:50%;

  display:grid;
  place-items:center;

  background:rgba(255,255,255,.08);
  flex-shrink:0;
}

.ff-community-icon svg{
  width:18px;
  height:18px;
  display:block;
}

@media (max-width:360px){

  .ff-community-cta{
    min-height:58px;
    padding:0 16px;
    margin-bottom:44px;
  }

  .ff-community-text{
    font-size:15px;
  }

  .ff-community-icon{
    width:34px;
    height:34px;
  }

}



/* =====================================
GLOBAL BRAND FONT SYSTEM
Because consistency should not be optional.
===================================== */

:root{
  --brand-font:'Audiowide', sans-serif;
}

/* Any known brand text areas */
.x-logo,
.drawer-brand,
.brand,
.author,
.premium h3,
.footer-top span:first-child{
  font-family:var(--brand-font) !important;
  letter-spacing:-0.02em;
}

/* Generic helper class */
.brand-font{
  font-family:var(--brand-font) !important;
  letter-spacing:-0.02em;
}

/* =====================================
HERO HEADLINE FIX
The circled text was shouting.
Now it speaks with money.
===================================== */

.content{
  padding:26px 22px 34px;
}

.content .title{
  max-width:340px;
  font-family:'Audiowide', sans-serif;
  font-size:clamp(23px, 6.2vw, 34px);
  line-height:1.28;
  letter-spacing:-0.015em;
  font-weight:400;
  color:#0f0f0f;
  text-align:center;
  margin:0 auto;
}

.content .author{
  margin-top:20px;
  font-size:13px;
  font-weight:500;
  color:#7a7a7a;
  text-transform:uppercase;
}

.category{
  margin-bottom:18px;
}

/* cleaner mobile fit */
@media (max-width:420px){
  .content .title{
    max-width:315px;
    font-size:clamp(21px, 6vw, 30px);
    line-height:1.26;
  }
}


/* ==========================================
GLOBAL PREMIUM ORANGE OVERRIDE
Drop this LAST in your CSS.
Because random purple values breeding across files is a classic human hobby.
========================================== */

:root{
  --brand-orange:#ff6a00;
  --brand-orange-deep:#e25500;
  --brand-orange-soft:#ff8a33;
}

/* MAIN TEXT / LOGOS */
.x-logo span,
.drawer-brand span,
.brand,
a span{
  color:var(--brand-orange) !important;
  -webkit-text-fill-color:initial !important;
  background:none !important;
}

/* ANY OLD PURPLE CLASSES */
.tag.purple,
.purple{
  color:var(--brand-orange) !important;
}

/* JUST-IN ICON / PULSE */
.pulse,
.nav-item .pulse{
  filter:drop-shadow(0 0 8px rgba(255,106,0,.35)) !important;
}

.pulse circle{
  fill:var(--brand-orange) !important;
}

/* SVG PURPLE FILLS / STROKES */
svg [fill="#6c3cf0"],
svg [fill="#6d28d9"],
svg [fill="#8e44ad"],
svg [fill="#7c3aed"],
svg [fill="#9333ea"]{
  fill:var(--brand-orange) !important;
}

svg [stroke="#6c3cf0"],
svg [stroke="#6d28d9"],
svg [stroke="#8e44ad"],
svg [stroke="#7c3aed"],
svg [stroke="#9333ea"]{
  stroke:var(--brand-orange) !important;
}

/* INLINE STYLES CONTAINING PURPLE */
[style*="#6c3cf0"],
[style*="#6d28d9"],
[style*="#8e44ad"],
[style*="#7c3aed"],
[style*="#9333ea"]{
  color:var(--brand-orange) !important;
}

/* BUTTON / PILLS / ACTIVE UI */
.section-divider .pill,
.mt-rank,
.mt-line{
  background:linear-gradient(
    180deg,
    var(--brand-orange-soft),
    var(--brand-orange-deep)
  ) !important;
  border-color:var(--brand-orange-deep) !important;
}

.mt-rank{
  color:#fff !important;
}

/* HOVER ACCENTS */
.nav-item.active,
.nav-item:hover{
  color:var(--brand-orange-deep) !important;
}

/* CLEAN ORANGE GLOW */
.x-logo span,
.drawer-brand span{
  text-shadow:0 0 18px rgba(255,106,0,.12);
}


/* ===============================
PREMIUM EDITORIAL MOBILE OVERRIDE
FULLY REBUILT / CLEANED
Paste LAST
Because duplicate selectors breeding in the dark is not design.
=============================== */

:root{
  --content-max:680px;
  --page-max:760px;

  --bg:#fbfbfa;
  --surface:#ffffff;

  --text:#111111;
  --muted:#7d7d7d;
  --line:rgba(0,0,0,.06);

  --brand:#ff6a00;
  --brand-deep:#e85c00;
}

/* ===============================
GLOBAL
=============================== */

body{
  background:var(--bg);
  color:var(--text);
}

.container{
  background:var(--surface);
  max-width:var(--page-max);
  margin:0 auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.03);
}

/* ===============================
HEADER
=============================== */

.x-header{
  padding:10px 12px;
}

.x-header-inner{
  padding:12px 18px;
  border-radius:18px;

  box-shadow:
    0 6px 18px rgba(0,0,0,.06);
}

.x-logo{
  font-size:20px;
  letter-spacing:-0.03em;
}

/* ===============================
ARTICLE HEADER
=============================== */

.article-header{
  max-width:760px;
  margin:0 auto;
  padding:18px 22px 10px;
}

/* AUTHOR / CATEGORY */

.author{
  margin:0 0 8px;

  font-family:'Inter',sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}

/* TITLE */

.title{
  margin:0 0 12px;
  max-width:12ch;

  font-family:'Playfair Display',serif !important;
  font-size:clamp(34px,8vw,52px);
  line-height:.94;
  letter-spacing:-0.055em;
  font-weight:600;
  color:#0f0f0f;

  text-wrap:balance;
  overflow-wrap:break-word;
}

/* META */

.meta{
  font-size:12px;
  font-weight:500;
  letter-spacing:.01em;
  color:#8c8c8c;
}

/* ACTIONS */

.actions{
  margin-top:14px;
  gap:10px;
}

.btn{
  padding:7px 11px;
  font-size:12px;
  border-radius:999px;
}

.btn.icon{
  width:36px;
  height:36px;
}

/* ===============================
HERO
=============================== */

.hero{
  margin-top:10px;
}

.hero img{
  height:210px;
  object-fit:cover;
}

.hero-caption{
  font-size:11px;
  letter-spacing:.12em;
  color:#666;
}

/* ===============================
QUICK SUMMARY
Sharper, smaller, balanced.
Humanity loves oversized cards for no reason.
=============================== */

.quick-summary{
  width:calc(100% - 24px);
  max-width:720px;

  margin:18px auto;
  padding:14px;

  border-radius:16px;
  border:1px solid rgba(255,106,0,.12);

  background:
    linear-gradient(180deg,#fffaf4 0%,#fff5ea 100%);

  box-shadow:
    0 10px 24px rgba(0,0,0,.035);

  position:relative;
  overflow:hidden;
}

.quick-summary::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;

  background:linear-gradient(
    180deg,
    var(--brand),
    var(--brand-deep)
  );
}

.qs-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  margin-bottom:10px;
}

.qs-badge{
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#111;
}

.qs-seo{
  height:28px;
  padding:0 10px;

  display:inline-flex;
  align-items:center;

  border-radius:999px;

  font-size:11px;
  font-weight:800;
  color:#c15a00;

  background:rgba(255,106,0,.08);
}

.quick-summary p{
  margin:0;

  font-size:15px;
  line-height:1.62;
  color:#222;
  font-style:italic;
}

.qs-actions{
  margin-top:10px;
}

.qs-toggle{
  height:34px;
  padding:0 14px;

  border:none;
  border-radius:999px;

  background:#111;
  color:#fff;

  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.article-divider{
  width:calc(100% - 34px);
  max-width:720px;
  margin:0 auto 20px;
}

/* ===============================
BODY WRAP
=============================== */

.article-body{
  max-width:760px;
  padding:8px 22px 70px;
}

/* BODY TEXT */

.article-body p{
  max-width:34em;
  margin-left:auto;
  margin-right:auto;

  font-size:17px;
  line-height:1.78;
  letter-spacing:-0.01em;
  color:#1a1a1a;
}

/* LEAD */

.article-body p.lead{
  font-size:19px;
  line-height:1.75;
  color:#111;
}

.article-body p.lead::first-letter{
  font-size:3.2em;
}

/* HEADINGS */

.article-body h2{
  max-width:34em;
  margin:2.2em auto .7em;

  font-size:30px;
  line-height:1.02;
  letter-spacing:-0.05em;
}

.article-body h3{
  max-width:34em;
  margin:1.8em auto .6em;

  font-size:22px;
}

/* QUOTE */

.article-body .quote{
  max-width:30em;
}

.article-body .quote p{
  font-size:24px;
  line-height:1.38;
}

/* INLINE QUOTE CARD */

.inline-smart-quote{
  max-width:420px;
  margin:26px auto;
  border-radius:18px;
}

.isq-card{
  border-radius:18px;
  padding:28px 18px 36px;
}

.isq-text{
  font-size:17px;
  line-height:1.42;
}

/* ADS */

.article-body .ad{
  max-width:30em;
  border-radius:12px;
  font-size:11px;
}

/* ===============================
RELATED
=============================== */

.ymal-wrap{
  max-width:760px;
}

.ymal-heading{
  font-size:26px;
}

/* ===============================
FOOTER
=============================== */

.final-footer{
  padding:24px 18px 44px;
}

.ff-title{
  font-size:28px;
}

.ff-brand{
  font-size:72px;
  opacity:.95;
}

/* ===============================
MOBILE
=============================== */

@media (max-width:420px){

  .article-header{
    padding:16px 18px 10px;
  }

  .title{
    max-width:11ch;
    font-size:30px;
  }

  .article-body{
    padding:8px 18px 64px;
  }

  .article-body p{
    font-size:16px;
    line-height:1.74;
  }

  .hero img{
    height:190px;
  }

  .quick-summary{
    width:calc(100% - 20px);
    padding:13px;
  }

  .quick-summary p{
    font-size:14px;
    line-height:1.58;
  }

}

@media (max-width:360px){

  .title{
    font-size:28px;
  }

  .btn{
    font-size:11px;
    padding:7px 10px;
  }

  .hero img{
    height:176px;
  }

}


/* =====================================================
EDITORIAL ARTICLE TITLE UPGRADE
Paste LAST and let the old title styles retire quietly.
Your current headline is fighting itself.
===================================================== */

/* HEADER WRAP */
.article-header{
  max-width:760px;
  margin:0 auto;
  padding:22px 20px 14px;
}

/* TITLE */
.title,
#articleTitle{
  margin:0;

  font-family:'Cormorant Garamond', serif !important;
  font-weight:600;
  color:#0f0f0f;

  font-size:clamp(42px,10vw,68px);
  line-height:.92;
  letter-spacing:-0.045em;

  max-width:100%;
  width:100%;

  text-wrap:balance;
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;

  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* BEAUTIFUL SPACE UNDER TITLE */
.title + .author,
#articleTitle + .author{
  margin-top:14px;
}

/* AUTHOR */
.author{
  font-family:'Inter',sans-serif !important;
  font-size:11px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#777;
  margin-bottom:8px;
}

/* META */
.meta{
  font-size:13px;
  line-height:1.4;
  color:#8a8a8a;
}

/* ACTION ROW */
.actions{
  margin-top:16px;
  gap:10px;
  flex-wrap:wrap;
}

/* LONG TITLE SMART TUNING */
.title[data-long="true"],
#articleTitle[data-long="true"]{
  font-size:clamp(34px,8.2vw,56px);
  line-height:.95;
}

/* MOBILE */
@media (max-width:420px){

  .article-header{
    padding:18px 18px 12px;
  }

  .title,
  #articleTitle{
    font-size:clamp(34px,9.6vw,52px);
    line-height:.94;
    letter-spacing:-0.05em;
  }

  .meta{
    font-size:12px;
  }

}

/* VERY SMALL DEVICES */
@media (max-width:360px){

  .title,
  #articleTitle{
    font-size:31px;
    line-height:.96;
  }

}

/* WIDE DEVICES */
@media (min-width:768px){

  .title,
  #articleTitle{
    max-width:12ch;
  }

}