/* Journal page (scroll-driven globe animation) */
:root{--globe-merge-scale:.3724}
body{overflow-x:hidden}

/* ====== LOADER ====== */
#loader{
  position:fixed;inset:0;display:grid;place-items:center;background:var(--paper);
  z-index:100;transition:opacity 1.05s cubic-bezier(.22,1,.36,1),background-color .9s ease
}
.loader-wrap{
  position:relative;width:216px;height:216px;display:grid;place-items:center;
  transform:translateZ(0) scale(1);transform-origin:center center;
  transition:transform 1.2s cubic-bezier(.19,1,.22,1),opacity .7s ease,filter .9s ease;
  will-change:transform,opacity,filter
}
#globe-loader{width:216px;height:216px;display:block}
.whirl{position:absolute;inset:-8px;pointer-events:none}
.whirl svg{width:100%;height:100%;display:block}
.whirl .r1{animation:spin 9s linear infinite}
.whirl .r2{animation:spin 14s linear infinite reverse}
.whirl .r3{animation:spin 22s linear infinite}
.whirl .particle{animation:orbit var(--t,6s) linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes orbit{to{transform:rotate(360deg)}}

.load-meta{
  position:fixed;bottom:40px;left:0;right:0;text-align:center;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.3em;
  color:var(--ink-3);z-index:101;transition:opacity .45s ease,transform .75s ease
}
.load-meta .bar{
  display:inline-block;width:80px;height:1px;background:var(--ink-3);
  margin:0 10px;vertical-align:middle;position:relative;overflow:hidden
}
.load-meta .bar::after{
  content:"";position:absolute;inset:0;width:30%;background:var(--ink);
  animation:swipe 1.6s ease-in-out infinite
}
@keyframes swipe{0%{transform:translateX(-100%)}100%{transform:translateX(333%)}}

#loader.is-exiting{opacity:0;background-color:transparent;pointer-events:none}
#loader.is-exiting .loader-wrap{transform:translateZ(0) scale(1.16);opacity:0;filter:blur(6px)}
#loader.is-exiting .load-meta{opacity:0;transform:translateY(12px)}

/* ========== SCENE ENGINE ========== */
#app{opacity:0;transition:opacity 1s ease .08s}
#app.ready{opacity:1}

.studio{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.studio.interact{pointer-events:auto}
#track{position:relative;width:100%}

.layer{position:absolute;transform-origin:center}
.layer.center{top:50%;left:50%;transform:translate(-50%,-50%)}

/* ---- GLOBE ----
   Loader-style: d3 globe + decorative whirl rings, one unified layer.
   Kept as a perfect square so orthographic geometry is never squashed.

   NOTE: journal.js mutates only `transform` and `opacity` on this element —
   NEVER `left` or `top`. Folding the scene-position offset into the
   translate() of the transform keeps every scroll frame off the layout
   path and on the GPU compositor (critical for smooth mobile scroll). */
#globe-layer{
  width:720px;height:720px;top:50%;left:50%;
  transform:translate(-50%,-50%);
  display:grid;place-items:center;
  will-change:transform,opacity;
}
#globe-layer .globe-wrap{
  position:relative;width:580px;height:580px;display:grid;place-items:center;
  transform:scale(var(--globe-merge-scale));transform-origin:center center;
  opacity:.72;filter:blur(2px);
  transition:transform 1.2s cubic-bezier(.19,1,.22,1),opacity 1s ease,filter .9s ease;
  will-change:transform,opacity,filter
}
#app.ready #globe-layer .globe-wrap{transform:scale(1);opacity:1;filter:none}
#globe-layer #globe-main{width:580px;height:580px;display:block}
/* inset sized so the outer whirl ring (r=145 in viewBox 300 → ~90%)
   sits just outside the rendered globe edge, not floating in space. */
#globe-layer .whirl{position:absolute;inset:-22px;pointer-events:none;opacity:.88;transition:opacity 1s ease}
#app.ready #globe-layer .whirl{opacity:1}
#globe-layer .whirl svg{width:100%;height:100%;display:block}

/* Hero */
.hero-copy{top:50%;left:8%;width:46vw;transform:translate(0,-50%);will-change:transform,opacity}
.hero-copy .kicker{
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:28px;
  display:flex;align-items:center;gap:14px
}
.hero-copy .kicker .line{display:inline-block;width:48px;height:1px;background:var(--ink-3)}
.hero-copy h1{
  font-size:clamp(56px,8.2vw,124px);line-height:.92;letter-spacing:-0.03em;
  font-weight:500;color:var(--ink);
  text-shadow:0 0 18px var(--paper),0 0 32px var(--paper),0 0 48px rgba(244,241,234,.9)
}
.hero-copy h1 em{font-style:italic;color:var(--ink);font-weight:400}
.hero-copy .sub{
  margin-top:32px;font-size:22px;line-height:1.55;max-width:520px;
  color:var(--ink);font-weight:400;
  text-shadow:0 0 14px var(--paper),0 0 24px var(--paper)
}
.hero-copy .kicker{text-shadow:0 0 10px var(--paper),0 0 18px var(--paper)}

/* rails */
.rail-left{left:20px;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.3em;color:var(--ink-4);text-transform:uppercase}
.rail-right{right:24px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.3em;color:var(--ink-4);text-transform:uppercase}

/* Quote */
.quote-block{top:50%;left:50%;transform:translate(-50%,-50%);width:min(920px,82vw);text-align:left;will-change:transform,opacity}
.quote-block .q{font-size:clamp(38px,5.4vw,74px);line-height:1.05;letter-spacing:-0.02em}
.quote-block .q em{font-style:italic;color:var(--ink-3)}
.quote-block .cite{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink-3);margin-top:22px;letter-spacing:.08em}

/* Scene chip */
.chip{position:absolute;top:110px;left:40px;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.2em;color:var(--ink-3);text-transform:uppercase}
.chip b{color:var(--ink);font-weight:500}

/* Entry cards */
.entry-card{
  top:50%;left:50%;transform:translate(-50%,-50%);width:min(980px,86vw);
  display:grid;grid-template-columns:1.15fr 1fr;gap:40px;
  background:var(--paper-2);border:1px solid var(--ink);padding:28px;
  position:absolute;cursor:pointer;transition:border-color .2s;
  will-change:transform,opacity;
  /* backface-visibility hidden is a belt-and-braces hint to webkit mobile
     to keep this element on its own compositor layer during scroll. */
  backface-visibility:hidden;
}
/* Dynamic host — entries are injected at runtime based on state.entries. */
.entry-cards{display:contents}
.entry-card:hover{border-color:var(--amber)}
.entry-card .photo{aspect-ratio:4/5;background:var(--paper-3);border:1px solid var(--rule);position:relative;overflow:hidden}
.entry-card .photo .ph{position:absolute;inset:0;display:grid;place-items:center;font-family:"JetBrains Mono",monospace;font-size:11px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.entry-card .photo img{width:100%;height:100%;object-fit:cover;display:block}
.entry-card .body{display:flex;flex-direction:column;justify-content:space-between}
.entry-card .meta{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;display:flex;justify-content:space-between}
.entry-card h3{font-size:54px;font-weight:400;letter-spacing:-0.02em;line-height:1.0;margin-top:14px}
.entry-card .story{font-size:17px;line-height:1.55;color:var(--ink-2);margin-top:18px;max-width:52ch;overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical}
.entry-card .story img,.entry-card .story iframe{display:none}
.entry-card .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.entry-card .tag{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border:1px solid var(--ink-3);color:var(--ink-3)}
.entry-card .bar{position:absolute;top:0;right:0;width:4px;height:80px;background:var(--amber)}
.entry-card .num{position:absolute;top:16px;left:18px;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink-4);letter-spacing:.15em}
.entry-card .view-hint{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--ink-4);letter-spacing:.15em;text-transform:uppercase}

/* ===== Postcard stamp =====
   Decorative postage-stamp corner on each entry card. Serrated edge
   achieved via two `mask` radial-gradients composed with `intersect` —
   punches half-circles out of the top/bottom and left/right edges so it
   reads as perforated paper. Slight rotation + drop-shadow sells the
   "affixed to the card" look. */
.entry-card .stamp{
  position:absolute;top:16px;right:22px;
  width:72px;height:88px;
  padding:8px 6px;
  background:var(--paper);
  /* Fallback for browsers that don't support mask-composite: a dashed
     border still reads as a ticket/stamp. */
  border:1px dashed var(--ink-3);
  transform:rotate(4deg);
  filter:drop-shadow(0 1px 2px rgba(26,26,26,.12));
  z-index:6;
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  place-items:center;
  pointer-events:none;
  /* Let the card's own hover still work — the stamp shouldn't intercept. */
}
/* Progressive enhancement: if the browser supports mask-composite,
   replace the dashed border with a real perforated edge. */
@supports ((mask-composite: intersect) or (-webkit-mask-composite: source-in)){
  .entry-card .stamp{
    border:none;
    --d:3px;   /* tooth radius */
    --s:7px;   /* tooth spacing */
    mask:
      radial-gradient(circle var(--d) at 50% 0,        #0000 98%, #000) top   /var(--s) var(--s) repeat-x,
      radial-gradient(circle var(--d) at 50% 100%,     #0000 98%, #000) bottom/var(--s) var(--s) repeat-x,
      radial-gradient(circle var(--d) at 0 50%,        #0000 98%, #000) left  /var(--s) var(--s) repeat-y,
      radial-gradient(circle var(--d) at 100% 50%,     #0000 98%, #000) right /var(--s) var(--s) repeat-y,
      linear-gradient(#000,#000);
    mask-composite:intersect;
    -webkit-mask-composite:source-in;
    /* mask eats the border; recreate the inner hairline with an inset
       box-shadow that respects the mask. */
    box-shadow:inset 0 0 0 1px var(--ink-3);
  }
}
.entry-card .stamp-inner{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  width:100%;height:100%;justify-content:space-between;padding:2px 0;
}
.entry-card .stamp-post{
  font-family:"JetBrains Mono",monospace;font-size:7px;
  letter-spacing:.18em;color:var(--ink-3)
}
.entry-card .stamp-code{
  font-family:"Instrument Serif",serif;font-size:20px;
  color:var(--ink);letter-spacing:.04em;line-height:1
}
/* Faux postmark: two concentric circles behind a short text — reads as
   a stamped cancel mark without needing an SVG asset. */
.entry-card .stamp-mark{
  position:relative;width:32px;height:32px;
  border:1px solid var(--ink-3);border-radius:50%;
  opacity:.7;
}
.entry-card .stamp-mark::before,
.entry-card .stamp-mark::after{
  content:"";position:absolute;inset:3px;
  border:1px dashed var(--ink-3);border-radius:50%;
}
.entry-card .stamp-mark::after{inset:7px;border-style:dotted;opacity:.6}
.entry-card .stamp-no{
  font-family:"JetBrains Mono",monospace;font-size:8px;
  letter-spacing:.08em;color:var(--ink-3)
}

/* ===== Stats scene =====
   Decorative compass rose + three readouts. Sits between the hero and
   the quote so the mid-page is never empty. Numbers are hydrated at
   runtime from state.entries. */
.stats-scene{
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(820px,86vw);
  display:grid;grid-template-columns:240px 1fr;gap:56px;align-items:center;
  color:var(--ink);will-change:transform,opacity;pointer-events:none
}
.stats-scene .compass{width:240px;height:240px;color:var(--ink);display:block}
.stats-scene .stats-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:22px 0
}
.stats-scene .stat{display:flex;flex-direction:column;gap:6px}
.stats-scene .stat b{
  font-family:"Instrument Serif",serif;font-weight:400;
  font-size:64px;line-height:1;letter-spacing:-0.02em;color:var(--ink)
}
.stats-scene .stat span{
  font-family:"JetBrains Mono",monospace;font-size:10px;
  letter-spacing:.18em;color:var(--ink-3)
}
.stats-scene .stats-caption{
  grid-column:2;font-family:"Instrument Serif",serif;font-style:italic;
  font-size:18px;color:var(--ink-2);margin-top:4px
}
@media (max-width:760px){
  .stats-scene{grid-template-columns:1fr;gap:18px;text-align:center}
  .stats-scene .compass{width:140px;height:140px;margin:0 auto}
  .stats-scene .stat b{font-size:44px}
  .stats-scene .stats-caption{grid-column:1}
}

/* ===== Empty-state card =====
   Shown only when there are zero entries. Keeps the mid-page grounded. */
.empty-state{
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(540px,86vw);text-align:center;
  background:var(--paper-2);border:1px dashed var(--ink-3);
  padding:44px 34px;will-change:transform,opacity
}
.empty-state .es-mark{font-family:"Instrument Serif",serif;font-size:56px;color:var(--amber);line-height:1}
.empty-state h3{font-size:34px;font-weight:400;letter-spacing:-0.02em;margin-top:6px}
.empty-state p{color:var(--ink-3);margin-top:10px;font-size:15px;line-height:1.55}

/* Authoring */
.author-scene{top:50%;left:50%;transform:translate(-50%,-50%);width:min(980px,86vw);pointer-events:auto;will-change:transform,opacity}
.gate{background:var(--paper);border:1px dashed var(--ink-3);padding:60px 40px;text-align:center}
.gate h3{font-size:44px;margin-bottom:10px;font-weight:400;letter-spacing:-0.02em}
.gate p{color:var(--ink-3);margin-bottom:24px;font-size:16px}
.gate .btns{display:flex;gap:12px;justify-content:center}
.composer{background:var(--paper);border:1px solid var(--ink);padding:32px;display:none}
.composer.on{display:block}
.composer h3{font-size:32px;font-weight:400;margin-bottom:18px;letter-spacing:-0.02em}
.composer .row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.composer label{display:block;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:14px 0 6px}
.composer input,.composer textarea{width:100%;padding:10px 0;background:transparent;border:none;border-bottom:1px solid var(--ink-3);font-family:"Instrument Serif";font-size:18px;color:var(--ink);outline:none;resize:none}
.composer textarea{min-height:84px;line-height:1.5}
.composer .rich{
  min-height:120px;line-height:1.55;font-size:18px;color:var(--ink);
  padding:10px 0;border-bottom:1px solid var(--ink-3);outline:none;cursor:text;
  word-wrap:break-word
}
.composer .rich:empty::before{
  content:attr(data-placeholder);color:var(--ink-4);font-style:italic
}
.composer .rich img{max-width:100%;height:auto;margin:12px 0;display:block;border:1px solid var(--rule)}
.composer .rich p{margin:0 0 8px}

/* Composer inline map picker */
.composer .map-picker{margin-top:8px}
.composer .map-picker .picker-hint{
  font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--ink-3);
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px
}
.composer .map-picker .map-box{
  height:260px;border:1px solid var(--ink-3);background:var(--paper-2)
}
.composer .drop{border:1px dashed var(--ink-3);padding:28px;text-align:center;cursor:pointer;margin-top:14px;transition:background .2s}
.composer .drop:hover,.composer .drop.dragover{background:var(--paper-2)}
.composer .drop .drop-label{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink-3);letter-spacing:.08em}
.composer .previews{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.composer .previews img{height:80px;border:1px solid var(--rule);object-fit:cover}
.composer .foot{display:flex;justify-content:space-between;align-items:center;margin-top:24px;padding-top:20px;border-top:1px solid var(--rule)}
.composer .save-status{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--ink-4);letter-spacing:.08em}
.form-actions-inline{display:flex;gap:10px}

/* Timeline */
.timeline-scene{top:50%;left:50%;transform:translate(-50%,-50%);width:min(820px,86vw);will-change:transform,opacity}
.timeline-scene h2{font-size:48px;font-weight:400;letter-spacing:-0.02em;margin-bottom:30px}
.timeline{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--rule)}
.tl-row{display:grid;grid-template-columns:120px 1fr auto;gap:20px;padding:18px 0;border-bottom:1px solid var(--rule);align-items:baseline;cursor:pointer;transition:color .15s;text-decoration:none;color:inherit}
.tl-row:hover .tl-name{color:var(--amber)}
.tl-date{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink-3)}
.tl-name{font-size:22px;transition:color .15s}
.tl-place{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink-3);text-align:right}

/* HUD */
.coords{position:fixed;bottom:20px;left:40px;font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--ink-3);z-index:10;letter-spacing:.1em;display:flex;gap:20px;pointer-events:none}
.coords .pdot{width:6px;height:6px;border-radius:50%;background:var(--amber);display:inline-block;margin-right:6px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.scene-nav{position:fixed;right:40px;bottom:30px;z-index:15;display:flex;flex-direction:column;gap:10px;pointer-events:auto}
.scene-nav button{width:10px;height:10px;border-radius:50%;background:transparent;border:1px solid var(--ink-3);cursor:pointer;padding:0;transition:all .2s}
.scene-nav button.on{background:var(--ink);border-color:var(--ink);transform:scale(1.2)}

.progress{position:fixed;top:0;left:0;height:2px;background:var(--ink);width:0%;z-index:30;transition:width .08s linear}

.scroll-hint{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--ink-3);letter-spacing:.2em;z-index:12;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:6px;animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(4px)}}

/* ============================================
   Reduced motion — kill the loader whirls,
   amber pulse, and scroll-hint bob.
   ============================================ */
@media (prefers-reduced-motion: reduce){
  .whirl .r1,.whirl .r2,.whirl .r3,.whirl .particle{animation:none !important}
  .load-meta .bar::after{animation:none !important;width:100% !important}
  .coords .pdot{animation:none !important}
  .scroll-hint{animation:none !important}
  #app{transition:none !important}
  #loader{transition:none !important}
  /* will-change keeps a layer on the GPU, which costs memory. If the user
     doesn't want motion, don't burn that memory on them. */
  #globe-layer,.hero-copy,.quote-block,.entry-card,
  .author-scene,.timeline-scene{will-change:auto !important}
}

/* ============================================
   Mobile breakpoints — journal page is driven
   by a fixed-viewport scene engine; on narrow
   screens we scale hero type, tighten cards,
   and hide the busier decorative layers.
   ============================================ */
@media (max-width: 900px){
  /* Globe is too big for small screens (tablets) */
  #globe-layer{width:92vw;height:92vw;max-width:560px;max-height:560px}
  #globe-layer .globe-wrap{width:82vw;height:82vw;max-width:500px;max-height:500px}
  #globe-layer #globe-main{width:100%;height:100%}

  /* Stamp scales down on narrow cards */
  .entry-card .stamp{width:60px;height:72px;top:12px;right:14px}
  .entry-card .stamp-code{font-size:16px}
  .entry-card .stamp-mark{width:24px;height:24px}

  /* Hero text */
  .hero-copy{left:5%;width:90vw}
  .hero-copy h1{font-size:clamp(44px,11vw,72px)}
  .hero-copy .sub{font-size:17px;margin-top:20px}
  .hero-copy .kicker{margin-bottom:16px;font-size:10px}

  /* Quote */
  .quote-block{width:90vw}
  .quote-block .q{font-size:clamp(28px,6.6vw,48px)}

  /* Entry cards collapse to a single column */
  .entry-card{
    width:92vw;grid-template-columns:1fr;gap:20px;padding:20px;
  }
  .entry-card h3{font-size:36px}
  .entry-card .story{font-size:15px;-webkit-line-clamp:4}

  /* Composer */
  .composer{padding:20px}
  .composer .row{grid-template-columns:1fr;gap:10px}
  .composer h3{font-size:24px}

  /* Timeline */
  .timeline-scene{width:92vw}
  .timeline-scene h2{font-size:32px;margin-bottom:20px}
  .tl-row{grid-template-columns:90px 1fr;gap:10px}
  .tl-place{display:none}
  .tl-name{font-size:18px}

  /* Rails are decorative — save the room */
  .rail-left,.rail-right{display:none}

  /* Chip lower so it doesn't clash with the header */
  .chip{top:88px;left:20px;font-size:10px}

  /* Coords HUD — tighter */
  .coords{left:20px;bottom:14px;gap:12px;font-size:9px}
  .scene-nav{right:16px;bottom:14px}

}

@media (max-width: 560px){
  .scroll-hint{display:none}
}

/* ============================================
   Mobile perf pass (narrow viewports only).
   The journal page renders ~9 compositor layers
   plus a continuously-rotating D3 SVG globe and
   a fullscreen `mix-blend-mode:multiply` grain
   overlay. On flagship phones this still hits
   ~20fps during parallax scrolls.
   Below 760px we aggressively strip cost:
     - hide the main globe entirely (biggest win —
       eliminates 580×580 SVG path regeneration
       and the compositor layer behind every scene)
     - drop the grain overlay (fullscreen blend-
       mode layer forces per-frame repaints)
     - hide the live coords HUD + rail text (fixed
       overlays that re-composite on every scroll)
     - touch-action: pan-y tells mobile browsers
       we only care about vertical scroll, letting
       them skip generic gesture detection
   The matching JS path (isMobile branch) also
   short-circuits the D3 tick + the per-frame
   transform writes targeting #globe-layer.
   ============================================ */
@media (max-width: 760px){
  body{touch-action:pan-y}
  #globe-layer{display:none !important}
  .grain{display:none !important}
  .coords{display:none}
  /* Rails are already hidden <900px via the earlier block, but keep
     an explicit hide here so future refactors of that block don't
     accidentally re-show them on mobile. */
  .rail-left,.rail-right{display:none}
  /* Hero: the globe was the anchor — without it, centre the hero
     instead of left-aligning it behind an invisible circle. */
  .hero-copy{left:4vw;width:92vw}
  .hero-copy h1{text-shadow:none}
  .hero-copy .sub{text-shadow:none}
  /* Reduce GPU layer count: the `will-change` hints we added for
     desktop cost memory on phones. Drop them; the transform-based
     animations still composite fine without the hint. */
  .hero-copy,.quote-block,.entry-card,.author-scene,.timeline-scene{
    will-change:auto
  }
}