/* ============================================================
   REFRACT — SHARED EFFECTS & MOBILE LAYER
   Loaded by every page, after the page's own <style>.
   Adds: page transitions, scroll reveals, reading progress,
   card hover effects, mobile menu and phone layout fixes.
   To use on a new page, add before </head>:
     <link rel="stylesheet" href="refract-fx.css">
   and before </body>:
     <script src="refract-fx.js"></script>
============================================================ */

/* ---------- PAGE TRANSITIONS (Chrome/Edge/Safari 18+) ---------- */
@view-transition{navigation:auto;}
::view-transition-old(root){animation:rfx-page-out .28s cubic-bezier(.4,0,1,1) both;}
::view-transition-new(root){animation:rfx-page-in .5s cubic-bezier(.16,1,.3,1) both;}
@keyframes rfx-page-out{to{opacity:0;transform:translateY(-8px);filter:blur(4px);}}
@keyframes rfx-page-in{from{opacity:0;transform:translateY(14px);filter:blur(6px);}}

/* Fallback fade for browsers without view transitions */
html.rfx-leaving body{opacity:0;transform:translateY(-6px);transition:opacity .22s ease,transform .22s ease;}

/* ---------- GLOBAL ---------- */
html,body{overflow-x:clip;max-width:100%;}
img,video,iframe,svg{max-width:100%;}
::selection{background:var(--amber);color:var(--black);}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;}

/* Spectrum reading-progress bar */
.rfx-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:3000;pointer-events:none;
  background:var(--spec);transform-origin:0 50%;transform:scaleX(0);
  box-shadow:0 0 12px rgba(232,213,176,.45);}

/* Glassy masthead that tightens when scrolled */
.masthead{background:rgba(10,10,10,.78)!important;backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);transition:box-shadow .35s ease,background-color .3s ease!important;}
[data-theme="light"] .masthead{background:rgba(248,245,240,.82)!important;}
.masthead::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--spec);opacity:0;transition:opacity .4s ease;}
.masthead.rfx-scrolled{box-shadow:0 10px 40px -12px rgba(0,0,0,.6);}
.masthead.rfx-scrolled::after{opacity:.8;}
.masthead-inner{transition:height .35s cubic-bezier(.16,1,.3,1);}
.masthead.rfx-scrolled .masthead-inner{height:60px;}

/* Nav links: sliding spectrum underline */
.nav-link{position:relative;}
.nav-left .nav-link::after,.nav-right .nav-link::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--spec);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.16,1,.3,1);}
.nav-left .nav-link:hover::after,.nav-right .nav-link:hover::after{transform:scaleX(1);transform-origin:left;}

/* Wordmark: prism shimmer on hover */
.wordmark-text{transition:letter-spacing .4s cubic-bezier(.16,1,.3,1);}
.wordmark:hover .wordmark-text{background:linear-gradient(100deg,var(--wordmark-color,var(--white)) 20%,var(--amber) 38%,var(--sage) 50%,var(--slate) 62%,var(--wordmark-color,var(--white)) 80%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:rfx-sheen 1.6s ease forwards;}
.wordmark-rule{transition:transform .5s cubic-bezier(.16,1,.3,1);transform-origin:center;}
.wordmark:hover .wordmark-rule{transform:scaleX(1.15);}
@keyframes rfx-sheen{from{background-position:100% 0}to{background-position:0 0}}

/* ---------- COVER / HERO ---------- */
.cover-title-gradient{background-size:200% 100%!important;animation:rfx-flow 8s ease-in-out infinite 1.2s;}
@keyframes rfx-flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.rfx-beams{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.rfx-beams span{position:absolute;top:-20%;height:140%;width:2px;opacity:0;filter:blur(1px);transform-origin:top center;animation:rfx-beam 9s ease-in-out infinite;}
.rfx-beams span:nth-child(1){left:18%;background:linear-gradient(transparent,var(--amber),transparent);animation-delay:0s;}
.rfx-beams span:nth-child(2){left:38%;background:linear-gradient(transparent,var(--sage),transparent);animation-delay:2.2s;}
.rfx-beams span:nth-child(3){left:62%;background:linear-gradient(transparent,var(--slate),transparent);animation-delay:4.4s;}
.rfx-beams span:nth-child(4){left:82%;background:linear-gradient(transparent,var(--terra),transparent);animation-delay:6.6s;}
@keyframes rfx-beam{0%{opacity:0;transform:rotate(18deg) translateY(-10%);}25%{opacity:.35;}60%{opacity:0;transform:rotate(18deg) translateY(10%);}100%{opacity:0;}}
.cover-beat{transition:background .25s,transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s!important;}
.cover-beat:hover{transform:translateY(-3px);box-shadow:0 8px 24px -10px currentColor;}

/* ---------- SCROLL REVEAL ---------- */
.rfx-reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);transition-delay:var(--rfx-delay,0s);}
.rfx-reveal.rfx-in{opacity:1;transform:none;}
.section-header-line{transform-origin:left;}
.rfx-reveal .section-header-line,.section-header.rfx-reveal .section-header-line{transform:scaleX(0);transition:transform 1.2s cubic-bezier(.16,1,.3,1) .2s;}
.rfx-reveal.rfx-in .section-header-line{transform:scaleX(1);}

/* ---------- CARDS ---------- */
.article-card,.beat-card,.pillar,.related-item{position:relative;isolation:isolate;}
.article-card,.beat-card,.pillar{transition:background .3s ease,transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease!important;}
.article-card::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(232,213,176,.10),transparent 45%);}
.article-card::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--spec);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1);}
.article-card:hover::before{opacity:1;}
.article-card:hover::after{transform:scaleX(1);}
@media(hover:hover){
  .article-card:hover,.beat-card:hover,.pillar:hover{transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(0,0,0,.8);z-index:2;}
}
.card-headline{transition:color .25s ease;}
.article-card:hover .card-headline{color:var(--amber);}
.card-read{display:inline-block;transition:transform .3s cubic-bezier(.16,1,.3,1);}
.article-card:hover .card-read{transform:translateX(5px);}
.beat-icon{display:inline-block;transition:transform .5s cubic-bezier(.34,1.56,.64,1);}
.beat-card:hover .beat-icon{transform:scale(1.2) rotate(-6deg);}

/* Section grids: each card draws its own hairline, so a half-full
   last row ends cleanly instead of showing the grid's grey background */
.article-grid{background:none!important;border:none!important;gap:1px!important;}
.article-grid>.article-card{box-shadow:0 0 0 1px var(--border);}
@media(hover:hover){.article-grid>.article-card:hover{box-shadow:0 0 0 1px var(--border),0 22px 44px -22px rgba(0,0,0,.8);}}

/* Google Translate: keep its toolbar and tooltips out of the layout */
.goog-te-banner-frame,.skiptranslate>iframe,#goog-gt-tt,.goog-te-balloon-frame,.VIpgJd-ZVi9od-ORHb-OEVmcd,.VIpgJd-ZVi9od-aZ2wEe-wOHMyf{display:none!important;}
body{top:0!important;}
font{background:none!important;box-shadow:none!important;}

/* Fact-check verdict badges on cards */
.verdict-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;padding:4px 10px;border:1px solid currentColor;line-height:1.4;}
.verdict-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;}
.verdict-tag.confirmed{color:var(--sage);}
.verdict-tag.false{color:var(--terra);}
.verdict-tag.misleading{color:var(--amber);}

/* Buttons: light sweep */
.subscribe-btn,.newsletter-submit,.sidebar-submit,.popup-full-link{position:relative;overflow:hidden;}
.support-trigger{overflow:hidden;}
.subscribe-btn::after,.newsletter-submit::after,.sidebar-submit::after,.support-trigger::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s ease;pointer-events:none;}
.subscribe-btn:hover::after,.newsletter-submit:hover::after,.sidebar-submit:hover::after,.support-trigger:hover::after{left:130%;}

/* Article pages */
.article-hero-img img,.article-hero-img{transition:transform 1.2s cubic-bezier(.16,1,.3,1);}
.pull-quote{border-image:linear-gradient(var(--amber),var(--sage),var(--slate)) 1;}
.factcheck-box{transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;}
@media(hover:hover){.factcheck-box:hover{transform:translateY(-2px);box-shadow:0 18px 40px -24px rgba(0,0,0,.8);}}
.article-body table{display:block;overflow-x:auto;max-width:100%;}

/* Floating buttons: never overlap */
.theme-toggle{bottom:28px!important;right:28px!important;border-radius:50%;}
.theme-toggle:hover{transform:rotate(25deg);}
.support-trigger{right:78px!important;}

/* ---------- MOBILE MENU ---------- */
.rfx-burger{display:none;width:44px;height:44px;background:none;border:1px solid var(--border);cursor:pointer;position:relative;justify-self:end;flex-shrink:0;}
.rfx-burger span{position:absolute;left:12px;right:12px;height:1.5px;background:var(--wordmark-color,var(--white));transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .2s,top .4s cubic-bezier(.16,1,.3,1);}
.rfx-burger span:nth-child(1){top:15px;}
.rfx-burger span:nth-child(2){top:21px;}
.rfx-burger span:nth-child(3){top:27px;}
body.rfx-menu-open .rfx-burger span:nth-child(1){top:21px;transform:rotate(45deg);}
body.rfx-menu-open .rfx-burger span:nth-child(2){opacity:0;}
body.rfx-menu-open .rfx-burger span:nth-child(3){top:21px;transform:rotate(-45deg);}

.rfx-menu{position:fixed;inset:0;z-index:1500;background:var(--black);display:flex;flex-direction:column;padding:116px 24px 32px;overflow-y:auto;
  clip-path:circle(0% at calc(100% - 42px) 40px);visibility:hidden;transition:clip-path .6s cubic-bezier(.77,0,.18,1),visibility 0s linear .6s;}
.rfx-menu::before{content:'';position:absolute;top:-30%;right:-40%;width:120vw;height:120vw;border-radius:50%;background:conic-gradient(from 0deg,#E8D5B022,#7B9E8F1a,#C17B6B14,#6B7FA31e,#E8D5B022);filter:blur(60px);animation:rfx-rotate 24s linear infinite;pointer-events:none;}
@keyframes rfx-rotate{to{transform:rotate(360deg)}}
body.rfx-menu-open .rfx-menu{clip-path:circle(150% at calc(100% - 42px) 40px);visibility:visible;transition:clip-path .7s cubic-bezier(.77,0,.18,1),visibility 0s;}
body.rfx-menu-open{overflow:hidden;}
body.rfx-menu-open .masthead{z-index:1600;}
.rfx-menu-label{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);margin:8px 0 12px;position:relative;}
.rfx-menu-links{display:flex;flex-direction:column;position:relative;margin-bottom:28px;}
.rfx-menu-links a{font-family:'Playfair Display',serif;font-size:32px;font-weight:700;color:var(--white);line-height:1.15;padding:9px 0;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;letter-spacing:-.02em;
  opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1),color .2s;}
.rfx-menu-links a::after{content:'→';font-family:'DM Mono',monospace;font-size:16px;color:var(--muted);transition:transform .3s,color .3s;}
.rfx-menu-links a:active::after,.rfx-menu-links a:hover::after{transform:translateX(4px);color:var(--amber);}
.rfx-menu-links.small a{font-size:20px;font-weight:400;font-style:italic;}
body.rfx-menu-open .rfx-menu-links a{opacity:1;transform:none;transition-delay:calc(.18s + var(--i,0) * .045s);}
.rfx-menu-links a.active{color:var(--amber);}
.rfx-menu-tools{display:flex;gap:10px;position:relative;margin-top:auto;padding-top:12px;opacity:0;transition:opacity .5s ease .5s;}
body.rfx-menu-open .rfx-menu-tools{opacity:1;}
.rfx-menu-tools button,.rfx-menu-tools a{flex:1;min-height:48px;display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;border:1px solid var(--border);background:var(--surface);color:var(--white);cursor:pointer;}
.rfx-menu-tools a.primary{background:var(--wordmark-color,var(--white));color:var(--off-black);border-color:transparent;}
.rfx-menu-rule{height:1px;background:var(--spec);margin:0 0 24px;opacity:.7;position:relative;}

/* ---------- TABLET / PHONE LAYOUT ----------
   Burger menu below 1180px: the full desktop header needs ~1180px
   (homepage has the most links) and would otherwise run off-screen. */
@media(max-width:1180px){
  .masthead-inner{grid-template-columns:auto 1fr auto!important;padding:0 16px!important;gap:12px!important;height:64px!important;}
  .masthead.rfx-scrolled .masthead-inner{height:56px!important;}
  .nav-left{display:none!important;}
  .wordmark{grid-column:1;grid-row:1;text-align:left;justify-self:start;}
  .wordmark-text{font-size:26px!important;}
  .nav-right{grid-column:3;grid-row:1;gap:8px!important;}
  .nav-right>*:not(#refract-translate-btn):not(.rfx-burger){display:none!important;}
  #refract-translate-btn{min-height:44px;padding:0 12px!important;}
  .rfx-burger{display:block;}
}
@media(max-width:600px){
  body{font-size:16px;}
  .ticker-item{font-size:10px!important;padding:0 20px!important;}

  /* Home */
  .cover{padding:64px 16px 56px!important;}
  .cover-eyebrow{font-size:9px!important;margin-bottom:24px!important;}
  .cover-title{font-size:clamp(40px,12vw,56px)!important;}
  .cover-tagline{font-size:18px!important;}
  .cover-beats{justify-content:center;}
  .cover-beat{padding:10px 14px!important;}
  .container,.mission-section,.beats-section,.manifesto-section,.newsletter,.related-section,.article-wrap,.breadcrumb{padding-left:16px!important;padding-right:16px!important;}
  .mission-section,.beats-section,.manifesto-section{padding-top:56px!important;padding-bottom:56px!important;}
  .manifesto-box{padding:32px 20px!important;}
  .manifesto-box::before{font-size:120px!important;left:16px!important;}
  .article-card{padding:22px!important;}
  .newsletter-inner{gap:24px!important;}
  .newsletter form>div{flex-direction:column;gap:8px;}
  .newsletter-input{border-right:1px solid var(--border)!important;min-height:48px;font-size:16px!important;}
  .newsletter-submit{min-height:48px;}
  footer{padding:40px 16px 96px!important;}
  .footer-top{grid-template-columns:1fr 1fr!important;gap:32px!important;}
  .footer-top>div:first-child{grid-column:1/-1;}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px;}
  .footer-link{padding:4px 0;}

  /* Articles */
  .breadcrumb-inner{flex-wrap:wrap;row-gap:4px;}
  .article-wrap{padding-top:28px!important;gap:32px!important;}
  .article-headline{font-size:clamp(30px,8.6vw,40px)!important;}
  .article-meta-row{gap:10px 16px!important;}
  .share-btns{margin-left:0!important;width:100%;}
  .share-btn{flex:1;text-align:center;padding:10px 12px!important;}
  .article-hero-img{height:240px!important;}
  .article-body{font-size:17px;}
  .pull-quote{padding-left:18px!important;margin:32px 0!important;}
  .factcheck-box{padding:20px!important;}
  .fc-verdict-row{flex-wrap:wrap;}

  /* Floating buttons */
  .theme-toggle{bottom:16px!important;right:16px!important;width:44px!important;height:44px!important;}
  .support-trigger{bottom:16px!important;right:70px!important;padding:12px 14px!important;font-size:9px!important;}
  .popup-trigger{bottom:16px!important;left:16px!important;}
  .popup-footer{flex-wrap:wrap;}
  .fmodal{padding:28px 20px!important;}
}

/* ---------- REDUCED MOTION ---------- */
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  .rfx-reveal{opacity:1;transform:none;}
  .rfx-beams{display:none;}
}