/* =========================================================
   Arthlens — Page-specific editorial layouts
   Homepage, Guided Check (quiz), Results hub, Articles
   ========================================================= */

/* =======================================================
   HOMEPAGE — front-page layout
   ======================================================= */
.front{
  padding:clamp(32px,3vw,56px) 0 40px;
  background:
    linear-gradient(180deg,var(--paper) 0%,var(--paper) 60%,var(--paper-deep) 100%);
}
.front .grid-fp{
  display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:48px;
}
@media (max-width:980px){.front .grid-fp{grid-template-columns:1fr;gap:28px}}

.lead-story{
  display:grid;gap:20px;
}
.lead-story .kicker{
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-2xs);
  letter-spacing:.18em;text-transform:uppercase;color:var(--red);
}
.lead-story .kicker::before{
  content:"";display:inline-block;width:28px;height:3px;
  background:var(--red);margin-right:10px;vertical-align:middle;
}
.lead-story h1.display{font-size:clamp(2.5rem,2rem + 3.5vw,5rem)}
.lead-story .deck{max-width:62ch}
.lead-story .hero-visual{
  margin:10px 0 6px;
  aspect-ratio:16/8;position:relative;overflow:hidden;
  border:1px solid var(--rule);background:var(--ink);
}
.lead-story .hero-visual::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(600px 320px at 18% 30%,rgba(255,255,255,.09),transparent 55%),
    radial-gradient(700px 420px at 85% 75%,var(--red),transparent 55%),
    linear-gradient(135deg,var(--ink) 0%,#1A1F2A 100%);
}
.lead-story .hero-visual .caption{
  position:absolute;bottom:14px;left:16px;right:16px;color:rgba(255,255,255,.82);
  font-family:var(--font-ui);font-size:var(--fs-xs);z-index:2;letter-spacing:.04em;
  display:flex;gap:8px;align-items:center;
}
.lead-story .hero-visual .caption .sep{color:rgba(255,255,255,.3)}
.lead-story .hero-visual .tag-overlay{
  position:absolute;top:14px;left:14px;z-index:2;
}
.lead-story .summary{
  font-family:var(--font-serif);font-size:1.1875rem;line-height:1.65;color:var(--ink-2);
  max-width:66ch;
}
.lead-story .summary strong{color:var(--ink);font-weight:700}
.lead-story .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}

.lead-story .hero-visual .stack-card{
  position:absolute;right:18px;top:18px;
  background:rgba(255,255,255,.95);backdrop-filter:blur(6px);
  padding:12px 14px;min-width:200px;z-index:2;
  border:1px solid var(--rule);
}
.lead-story .hero-visual .stack-card h5{
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-2xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:6px;
}
.lead-story .hero-visual .stack-card .row{
  display:flex;justify-content:space-between;font-size:var(--fs-xs);
  padding:4px 0;font-family:var(--font-ui);color:var(--ink-soft);
}
.lead-story .hero-visual .stack-card .row strong{color:var(--ink);font-weight:700}

/* Right rail */
.rail{display:grid;gap:20px;align-content:start}
.rail .block{padding:0;background:transparent;border:0}
.rail .block h3{
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-2xs);
  letter-spacing:.18em;text-transform:uppercase;color:var(--red);
  border-bottom:3px solid var(--ink);padding-bottom:8px;margin-bottom:4px;
}
.rail .block.editors-pick h3{color:var(--ink)}

.rates-mini{
  background:var(--ink);color:#fff;padding:18px 20px;
}
.rates-mini h4{
  color:#fff;font-family:var(--font-ui);font-weight:700;font-size:var(--fs-2xs);
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;
  display:flex;justify-content:space-between;align-items:center;
}
.rates-mini h4 .live{color:var(--red);font-size:.6875rem;display:inline-flex;gap:6px;align-items:center}
.rates-mini h4 .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);animation:blink 1.4s infinite}
.rates-mini .r{
  display:flex;justify-content:space-between;padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.08);font-family:var(--font-ui);font-size:var(--fs-sm);
}
.rates-mini .r:last-child{border-bottom:0}
.rates-mini .r .lbl{color:rgba(255,255,255,.72)}
.rates-mini .r .v{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.rates-mini .r .up{color:#4ADE80}
.rates-mini .r .dn{color:#F87171}

/* Credibility / at-a-glance strip */
.glance{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  border:1px solid var(--rule);background:var(--surface);
}
.glance .cell{
  padding:20px 22px;border-left:1px solid var(--rule);
}
.glance .cell:first-child{border-left:0}
.glance .k{
  font-family:var(--font-ui);font-size:var(--fs-2xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:6px;
}
.glance .v{
  font-family:var(--font-display);font-weight:800;  font-size:1.625rem;color:var(--ink);letter-spacing:-0.02em;line-height:1;
}
.glance .s{font-family:var(--font-serif);font-size:var(--fs-xs);color:var(--ink-soft);margin-top:6px;line-height:1.4}
@media (max-width:700px){.glance .cell{border-left:0;border-top:1px solid var(--rule)}.glance .cell:first-child{border-top:0}}

/* Newsroom grid — 4x layout */
.newsroom{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px 24px;margin-top:10px}
@media (max-width:900px){.newsroom{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.newsroom{grid-template-columns:1fr}}
.newsroom .big{grid-row:span 2}
.newsroom .big .thumb{aspect-ratio:4/3}

/* About-the-guide band */
.guide-band{
  background:var(--paper-deep);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:clamp(32px,4vw,56px) 0;
}
.guide-band .grid{grid-template-columns:1fr 1.3fr;gap:40px;align-items:center}
@media (max-width:820px){.guide-band .grid{grid-template-columns:1fr}}
.guide-band .intro h2{font-size:clamp(1.75rem,1.4rem + 1.5vw,2.5rem)}
.guide-band .intro p{font-family:var(--font-serif);font-size:1.125rem;color:var(--ink-2);line-height:1.6;margin-top:14px}
.guide-band .pillars{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule)}
.guide-band .pillars .p{background:var(--surface);padding:22px}
.guide-band .pillars h4{font-family:var(--font-display);font-size:1rem;margin-bottom:6px}
.guide-band .pillars p{font-family:var(--font-serif);font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.55}
.guide-band .pillars .num{
  font-family:var(--font-display);font-weight:900;  font-size:1.75rem;color:var(--red);letter-spacing:-0.03em;line-height:1;margin-bottom:6px;
}

/* CTA strip */
.cta-strip{
  background:var(--ink);color:#fff;padding:clamp(32px,4vw,56px) 0;
  position:relative;overflow:hidden;
}
.cta-strip::before{
  content:"";position:absolute;top:0;right:-120px;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(194,30,56,.35),transparent 60%);pointer-events:none;
}
.cta-strip .row{display:grid;grid-template-columns:1.5fr 1fr;gap:32px;align-items:center;position:relative}
@media (max-width:820px){.cta-strip .row{grid-template-columns:1fr}}
.cta-strip h2{color:#fff;font-size:clamp(1.75rem,1.4rem + 1.5vw,2.5rem)}
.cta-strip p{font-family:var(--font-serif);color:rgba(255,255,255,.82);margin-top:12px;max-width:54ch;font-size:1.0625rem;line-height:1.55}
.cta-strip .actions{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap}
.cta-strip .mini{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);padding:22px;
}
.cta-strip .mini h5{
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-2xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);margin-bottom:10px;
}
.cta-strip .mini .r{
  display:flex;justify-content:space-between;padding:8px 0;
  border-bottom:1px dashed rgba(255,255,255,.12);
  color:rgba(255,255,255,.75);font-family:var(--font-ui);font-size:var(--fs-sm);
}
.cta-strip .mini .r:last-child{border-bottom:0}
.cta-strip .mini .r strong{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}

/* =======================================================
   GUIDED CHECK (quiz) — editorial analysis feel
   ======================================================= */
.quiz-shell{min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto;background:var(--paper)}

.quiz-top{
  background:var(--surface);border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:30;
}
.quiz-top .inner{display:flex;align-items:center;gap:18px;padding:14px 0}
.quiz-top .inner .brand{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:900;font-size:1.25rem;color:var(--ink);
}
.quiz-top .inner .brand .mark{
  width:32px;height:32px;background:var(--red);color:#fff;
  display:grid;place-items:center;font-size:1.125rem;
}
.quiz-top .inner .brand .section-label{
  margin-left:8px;padding:3px 10px;background:var(--ink);color:#fff;
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-2xs);
  letter-spacing:.14em;text-transform:uppercase;
}
.quiz-progress{flex:1;max-width:420px;margin:0 auto}
.quiz-top .step-label{
  margin-left:auto;font-family:var(--font-ui);font-weight:700;font-size:var(--fs-2xs);
  color:var(--muted);letter-spacing:.14em;text-transform:uppercase;
}
.quiz-top .exit{
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-xs);color:var(--ink);
  text-transform:uppercase;letter-spacing:.1em;
}
.quiz-top .exit:hover{color:var(--red)}

/* Locale badge in quiz top bar */
.locale-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;
  border:1px solid var(--rule);background:var(--surface);
  font-family:var(--font-ui);font-size:var(--fs-2xs);font-weight:700;
  color:var(--ink);letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;transition:border-color var(--d1) linear;user-select:none;
}
.locale-badge:hover{border-color:var(--ink)}
.locale-badge .flag{font-size:14px}
.locale-badge .cc{color:var(--red)}
.locale-badge .cur{color:var(--muted);font-weight:500}
@media (max-width:720px){ .locale-badge .cur{display:none} }

/* Locale picker modal */
.locale-modal{
  position:fixed;inset:0;z-index:90;
  background:rgba(14,17,22,.55);
  display:grid;place-items:center;padding:16px;
}
.locale-modal[hidden]{display:none}
.locale-modal-card{
  background:var(--surface);border:1px solid var(--rule);
  max-width:380px;width:100%;padding:24px;
  box-shadow:0 20px 48px rgba(14,17,22,.25);
}
.locale-modal-card h3{
  font-family:var(--font-display);font-weight:800;font-size:1.25rem;
  margin-bottom:6px;
}
.locale-modal-card p{
  font-family:var(--font-body);font-size:var(--fs-sm);color:var(--ink-soft);margin-bottom:14px;
}
.locale-modal-card select{
  width:100%;padding:12px 14px;
  border:1.5px solid var(--rule-soft);background:var(--paper);
  font-family:var(--font-ui);font-size:1rem;color:var(--ink);
  margin-bottom:16px;
}
.locale-modal-card select:focus{outline:none;border-color:var(--ink)}
.locale-modal-actions{display:flex;gap:10px;justify-content:flex-end}

.quiz-main{display:grid;place-items:start center;padding:clamp(28px,4vw,56px) 20px}

/* Quiz card now looks like an editorial analysis panel */
.quiz-card{
  width:100%;max-width:740px;
  background:var(--surface);border:1px solid var(--rule);
  padding:clamp(28px,4vw,48px);
  position:relative;
  animation:fadeUp .35s var(--ease);
}
.quiz-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--red);
}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.quiz-card .step-counter{
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-2xs);
  letter-spacing:.18em;text-transform:uppercase;color:var(--red);
  display:inline-block;padding-bottom:6px;border-bottom:2px solid var(--ink);
}
.quiz-card h1{
  font-family:var(--font-display);font-weight:800;  font-size:clamp(1.625rem,1.3rem + 1.2vw,2.125rem);
  letter-spacing:-0.025em;line-height:1.1;margin:14px 0 10px;
}
.quiz-card p.lead{
  font-family:var(--font-serif);font-size:1.0625rem;line-height:1.55;color:var(--ink-2);
  margin-bottom:26px;max-width:54ch;
}

/* Option list — newsroom checklist */
.option-group{display:grid;gap:10px}
.option{
  display:flex;align-items:center;gap:16px;
  padding:18px 20px;background:var(--surface);
  border:1.5px solid var(--rule);cursor:pointer;
  transition:border-color var(--d1) linear, background var(--d1) linear;
  position:relative;
}
.option:hover{border-color:var(--ink)}
.option input{position:absolute;opacity:0;pointer-events:none}
.option .radio{
  width:22px;height:22px;border-radius:50%;
  border:2px solid var(--rule);
  display:grid;place-items:center;flex-shrink:0;
  transition:border-color var(--d1) linear;
}
.option .radio::after{
  content:"";width:10px;height:10px;border-radius:50%;
  background:var(--red);transform:scale(0);transition:transform var(--d1) var(--ease);
}
.option .text{
  font-family:var(--font-serif);font-size:1.0625rem;color:var(--ink);line-height:1.35;
}
.option input:checked + .radio{border-color:var(--red)}
.option input:checked + .radio::after{transform:scale(1)}
.option:has(input:checked){
  border-color:var(--red);background:var(--red-soft);
}

.quiz-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px}
.quiz-actions .back{
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);gap:6px;
}
.quiz-actions .back:hover{color:var(--red)}
.quiz-actions .next{
  background:var(--ink);color:#fff;padding:14px 20px;font-weight:700;font-size:var(--fs-sm);
  display:inline-flex;align-items:center;gap:10px;letter-spacing:.02em;
  transition:background var(--d1) linear;
}
.quiz-actions .next:hover:not(:disabled){background:var(--red)}
.quiz-actions .next:disabled{background:var(--rule);color:var(--muted-light);cursor:not-allowed}

/* Loading state */
.quiz-loading{display:grid;place-items:center;gap:18px;padding:48px 0}
.spinner{
  width:44px;height:44px;border-radius:50%;
  border:3px solid var(--rule);border-top-color:var(--red);
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.quiz-loading p{font-family:var(--font-serif);color:var(--ink-2);font-size:var(--fs-sm);text-align:center;max-width:38ch}

/* Insight card — now editor's note style */
.insight{
  display:grid;grid-template-columns:auto 1fr;gap:14px;
  margin-top:22px;padding:18px 20px;
  background:var(--paper-deep);border-left:3px solid var(--red);
  animation:fadeUp .3s var(--ease);
}
.insight .ico{
  width:40px;height:40px;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:900;font-size:1rem;
  flex-shrink:0;
}
.insight h4{
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-2xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:2px;
}
.insight p{font-family:var(--font-serif);font-size:var(--fs-sm);color:var(--ink-2);line-height:1.55}

/* Contact step */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.contact-grid{grid-template-columns:1fr}}
.secure-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);
  font-family:var(--font-ui);font-size:var(--fs-xs);color:var(--muted);
}
.secure-strip span{display:inline-flex;align-items:center;gap:8px}
.secure-strip svg{color:var(--red);flex-shrink:0}

/* =======================================================
   RESULTS — profile review article hub
   ======================================================= */
.result-masthead{
  background:var(--paper);border-bottom:1px solid var(--rule);
  padding:clamp(28px,3.5vw,56px) 0 clamp(24px,3vw,40px);
}
.result-masthead .kicker{
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-2xs);
  letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:12px;
}
.result-masthead h1{
  font-family:var(--font-display);font-weight:900;  font-size:clamp(2.25rem,1.7rem + 2.8vw,4rem);
  letter-spacing:-0.03em;line-height:.98;max-width:22ch;
}
.result-masthead .deck{margin-top:16px;max-width:64ch}
.result-masthead .byline-row{margin-top:28px;margin-bottom:0}

.result-progress-card{
  background:var(--ink);color:#fff;padding:22px 24px;margin-top:28px;
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
}
.result-progress-card h4{
  color:#fff;font-family:var(--font-ui);font-weight:700;font-size:var(--fs-2xs);
  letter-spacing:.14em;text-transform:uppercase;
}
.result-progress-card .progress{background:rgba(255,255,255,.15);margin-top:10px;max-width:460px}
.result-progress-card p{margin-top:10px;font-family:var(--font-serif);font-size:var(--fs-sm);color:rgba(255,255,255,.72);line-height:1.45}
.result-progress-card .pct{
  font-family:var(--font-display);font-weight:900;  font-size:3rem;color:#fff;letter-spacing:-0.03em;line-height:1;
}
.result-progress-card .pct .sym{color:var(--red)}

.profile-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  background:var(--surface);border:1px solid var(--rule);margin-top:24px;
}
.profile-strip .item{padding:18px 22px;border-left:1px solid var(--rule)}
.profile-strip .item:first-child{border-left:0}
.profile-strip label{
  display:block;font-family:var(--font-ui);font-size:var(--fs-2xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-weight:700;
}
.profile-strip strong{
  font-family:var(--font-display);font-weight:800;font-size:1.125rem;color:var(--ink);
  letter-spacing:-0.005em;
}
@media (max-width:700px){.profile-strip .item{border-left:0;border-top:1px solid var(--rule)}.profile-strip .item:first-child{border-top:0}}

.result-body{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;
  padding-block:clamp(32px,4vw,56px);
}
@media (max-width:980px){.result-body{grid-template-columns:1fr}}

.result-section{
  scroll-margin-top:130px;padding-block:28px;
}
.result-section + .result-section{border-top:1px solid var(--rule)}
.result-section .chap{
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-2xs);
  letter-spacing:.18em;text-transform:uppercase;color:var(--red);
  margin-bottom:8px;display:inline-block;
}
.result-section h2{
  font-family:var(--font-display);font-weight:900;  font-size:clamp(1.5rem,1.2rem + 1.1vw,2.125rem);
  letter-spacing:-0.02em;line-height:1.05;margin-bottom:12px;
}
.result-section>p.lede{max-width:62ch;margin-bottom:18px}

/* Next step panel */
.next-step-panel{
  background:var(--red);color:#fff;padding:clamp(28px,4vw,44px);
  margin-block:36px;position:relative;overflow:hidden;
}
.next-step-panel::before{
  content:"";position:absolute;top:0;right:0;width:300px;height:300px;
  background:radial-gradient(circle,rgba(255,255,255,.1),transparent 60%);pointer-events:none;
}
.next-step-panel .chap{color:rgba(255,255,255,.85)}
.next-step-panel h3{color:#fff;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);font-family:var(--font-display);font-weight:900;position:relative;max-width:24ch;line-height:1.08}
.next-step-panel p{font-family:var(--font-serif);color:rgba(255,255,255,.88);margin-top:12px;max-width:54ch;font-size:1.0625rem;line-height:1.55;position:relative}
.next-step-panel .actions{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap;position:relative}

/* Retake band */
.retake{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;
  background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--ink);
  padding:22px 24px;margin-top:32px;
}
.retake strong{font-family:var(--font-display);font-weight:800;color:var(--ink);font-size:1.0625rem}
.retake p{font-family:var(--font-serif);color:var(--muted);font-size:var(--fs-sm);margin-top:2px}

/* =======================================================
   ARTICLE pages (content)
   ======================================================= */
.article-head{
  background:var(--paper);border-bottom:1px solid var(--rule);
  padding:clamp(32px,3.5vw,56px) 0 clamp(24px,3vw,40px);
}
.article-head .crumbs{
  font-family:var(--font-ui);font-size:var(--fs-2xs);
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  display:flex;gap:8px;align-items:center;margin-bottom:14px;
}
.article-head .crumbs a{color:var(--muted);font-weight:600}
.article-head .crumbs a:hover{color:var(--red)}
.article-head .crumbs .sep{color:var(--rule)}
.article-head h1{
  font-family:var(--font-display);font-weight:900;  font-size:clamp(2rem,1.5rem + 2.5vw,3.5rem);
  letter-spacing:-0.03em;line-height:1;max-width:22ch;
}
.article-head .deck{margin-top:18px;max-width:62ch}

.article-shell{padding-block:clamp(28px,3.5vw,48px)}
.article-shell .article-body{margin-top:16px}

/* Related strip */
.related-strip{
  background:var(--paper-deep);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:clamp(32px,4vw,56px) 0;
}

/* Contact page layout */
.contact-grid-lg{display:grid;grid-template-columns:1.3fr 1fr;gap:48px}
@media (max-width:900px){.contact-grid-lg{grid-template-columns:1fr}}