/* Rangooo polish layer: progressive enhancement only (every rule is ignored by browsers that do not support it) */
@view-transition{navigation:auto}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}@view-transition{navigation:none}}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
::selection{background:#FFD9A8;color:#16202C}
img,video{max-width:100%}
a,button,summary,[role=button]{-webkit-tap-highlight-color:transparent}
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:3px solid #E8590C;outline-offset:2px}
:where(a,button,summary,input,select,textarea,[tabindex]):focus:not(:focus-visible){outline:none}

/* ---- motion and app feel (static pages; scroll-driven, no JS, ignored where unsupported) ---- */
@keyframes rg-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rg-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    html.rg-static::after{content:"";position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none;background:linear-gradient(90deg,#FF8A3D,#F4A340,#145C63);transform-origin:0 50%;transform:scaleX(0);animation:rg-grow linear both;animation-timeline:scroll(root)}
    html.rg-static :where(.fe-card,.fp-sec,.fe-note,.sf-col){animation:rg-rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  }
}
@media (prefers-reduced-motion:no-preference){
  @keyframes rg-enter{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
  .fe-hero{animation:rg-enter .55s cubic-bezier(.2,.7,.2,1) both}
}
.fe-count,.fe-date b{font-variant-numeric:tabular-nums}
/* night mode: the Series screen hard-codes dark text, so give it light text on the dark theme */
html[data-night="1"] .svh{--ink:#F2F5F8;--muted:#B9C4CF}
html[data-night="1"] .svh h1,html[data-night="1"] .svb-row h2,html[data-night="1"] .svb-card{color:#F2F5F8}
html[data-night="1"] .svh-sub,html[data-night="1"] .svb-d{color:#B9C4CF}
html[data-night="1"] .svh-note{color:#BFE3C4}

/* ---- night mode: the wordmark is dark ink, so use the light-ink logo on dark surfaces and keep the site header dark ---- */
html[data-night="1"] .sh{background:rgba(15,23,32,.94);border-bottom-color:rgba(255,255,255,.12)}
html[data-night="1"] img[src$="/logo.svg"]{content:url(/logo-light.svg)}
@media (hover:hover) and (pointer:fine){
  .fe-card,.fp-nav a,.fe-acts a{transition:transform .18s ease,box-shadow .18s ease}
  .fe-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(22,32,44,.10)}
  .fp-nav a:hover,.fe-acts a:hover{transform:translateY(-1px)}
}
@media (hover:none){
  .crumb a{display:inline-block;padding:14px 6px;margin:-14px -6px}
  summary{min-height:44px!important;align-content:center}
  .mu-opt,.mu-snd,.rg-chip,.cm-chip,.bx-dot{min-height:44px!important}
  .rg-sw{position:relative}
  .rg-sw::after{content:"";position:absolute;inset:-6px}
  a,button,summary,[role=button]{touch-action:manipulation}
  .fe-acts a,.fe-acts button,.fp-nav a,.fe-months a,.sf-cta{transition:transform .12s ease}
  .fe-acts a:active,.fe-acts button:active,.fp-nav a:active,.fe-months a:active,.sf-cta:active{transform:scale(.96)}
  html{overscroll-behavior-x:none}
  button,summary,.fe-months a{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
}