/* Owner Education: the blog's own layer over the brand kit (Website-Builder/brand/brand.css, copied by sync_brand.py --lite).
   Reading first: a phone between customers, one column, large type, nothing that moves. */
body { background: var(--ground); color: var(--ink); font-family: var(--body); margin: 0; }
.blog { padding: 24px 16px 64px; }
.blog .wrap { max-width: 680px; margin: 0 auto; }
.post h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 6vw, 2.9rem); line-height: 1.08; margin: .4em 0 .3em; letter-spacing: -.01em; }
.post h2 { font-family: var(--display); font-weight: 800; font-size: 1.45rem; line-height: 1.2; margin: 1.8em 0 .5em; }
.post h3 { font-family: var(--display); font-weight: 500; font-size: 1.2rem; margin: 1.4em 0 .4em; }
.post p, .post li { font-size: 1.1rem; line-height: 1.65; }
.post p { margin: 0 0 1em; }
.post ul, .post ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.post li { margin: .35em 0; }
.post a { color: var(--brand); text-underline-offset: 3px; }
.post strong { color: var(--ink); }
.post code { font-size: .95em; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 0 .3em; }
.crumbs { font-size: .9rem; color: var(--soft); }
.crumbs a, .byline a { color: var(--soft); }
.byline { color: var(--soft); font-size: .95rem; margin-bottom: 2em; }
.lede { font-size: 1.15rem; color: var(--soft); }
.draft-flag { display: inline-block; background: var(--card); border: 1px dashed var(--brand); color: var(--brand); border-radius: 14px; padding: 4px 14px; font-size: .85rem; }
.blog-foot { border-top: 1px solid var(--line); padding: 24px 16px 40px; color: var(--soft); font-size: .92rem; }
.blog-foot .wrap { max-width: 680px; margin: 0 auto; }
.blog-foot a { color: var(--soft); }
.top { padding: 12px 16px; }
.top-in { max-width: 680px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.mark-word { font-family: var(--display); font-weight: 800; display: block; }
.mark-sub { font-size: .8rem; color: var(--soft); display: block; }
.nav a { color: var(--soft); text-decoration: none; font-size: .95rem; }

/* Breaks in the text (the founder, 2026-11-09: posts must not be boring to read). Calm, no motion: a reader between customers. */
.callout { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--brand); border-radius: 14px; padding: 16px 20px 6px; margin: 1.6em 0; box-shadow: var(--shadow); }
.callout-title { font-family: var(--display); font-weight: 800; font-size: 1.05rem; margin: 0 0 .4em; color: var(--brand); }
.callout.glance { background: linear-gradient(135deg, var(--glow-a), var(--glow-b)), var(--card); border-left-color: var(--amber); }
.callout.glance .callout-title { color: var(--ink); }
.callout.tip { border-left-color: var(--ok); }
.callout.tip .callout-title { color: var(--ok); }
.callout.warn { border-left-color: var(--warn); }
.callout.warn .callout-title { color: var(--warn); }
.callout p, .callout li { font-size: 1.02rem; }
.pull { margin: 2em 0; padding: 4px 0 4px 26px; border-left: 4px solid var(--amber); }
.pull p { font-family: var(--display); font-weight: 800; font-size: clamp(1.35rem, 4.4vw, 1.75rem); line-height: 1.25; margin: 0 0 .4em; }
.pull cite { font-style: normal; color: var(--soft); font-size: .92rem; }
.fig { margin: 2em 0; }
.fig-art { max-width: 460px; margin: 0 auto; }
.fig-art svg { display: block; width: 100%; height: auto; }
.fig figcaption { color: var(--soft); font-size: .92rem; margin-top: .6em; text-align: center; }
.post ol > li { margin: .7em 0; }
.post ol > li::marker { font-family: var(--display); font-weight: 800; color: var(--brand); }

/* The drawings carry class names, never colours, so one file follows both themes under a strict policy. */
.fig svg text { font-family: var(--body); }
.fig .fig-strong { font-weight: 700; }
.fig .fig-bg { fill: var(--card-2); }
.fig .fig-card { fill: var(--card); }
.fig .fig-card2 { fill: var(--card-2); }
.fig .fig-map { fill: var(--glow-b); }
.fig .fig-ink { fill: var(--ink); }
.fig .fig-soft, .fig .fig-soft-fill { fill: var(--soft); }
.fig .fig-brand-fill { fill: var(--brand); }
.fig .fig-amber-fill { fill: var(--amber); }
.fig .fig-ok-fill { fill: var(--ok); }
.fig .fig-ok-ink { fill: var(--card); }
.fig .fig-btn { fill: var(--btn); }
.fig .fig-btn-ink { fill: var(--btn-ink); }
.fig .fig-line-stroke { stroke: var(--line); }
.fig .fig-soft-stroke { stroke: var(--soft); }
.fig .fig-brand-stroke { stroke: var(--brand); }
.fig .fig-ok-stroke { stroke: var(--ok); }
.fig .fig-warn-fill { fill: var(--warn); }
.fig .fig-warn-stroke { stroke: var(--warn); }
.fig .fig-amber-stroke { stroke: var(--amber); }

/* ---- Depth and light, 2026-11-10 (the founder: "the visuals are looking basic ... where the sauce"). ---- */
/* Gradient stops take their colour from the brand tokens, so one drawing follows night and day. */
.fig .gs-amber { stop-color: var(--amber); }
.fig .gs-brand { stop-color: var(--brand); }
.fig .gs-mint { stop-color: var(--mint); }
.fig .gs-warn { stop-color: var(--warn); }
.fig .gs-soft { stop-color: var(--soft); }
.fig .gs-card { stop-color: var(--card); }
.fig .gs-card2 { stop-color: var(--card-2); }
.fig .gs-ground { stop-color: var(--ground); }
.fig .gs-white { stop-color: #fff; }
.fig .fig-ground { fill: var(--card); }
.fig .fig-shadow { fill: #000; opacity: .35; }
.fig .fig-edge { stroke: var(--line); }
.fig .fig-line-fill { fill: var(--line); }
.fig-art { border-radius: 24px; box-shadow: var(--shadow); }
.fig.cover { margin: .4em 0 1.2em; }
.fig.cover .fig-art { max-width: none; box-shadow: 0 30px 80px -30px var(--glow-a), var(--shadow); }

/* Pull quotes and boxes with presence. */
.pull { position: relative; padding: 18px 0 8px 30px; border-left-width: 5px; }
.pull::before { content: "\201C"; position: absolute; left: 22px; top: -30px; font-family: var(--display); font-size: 5.5rem; line-height: 1; color: var(--amber); opacity: .35; }
.pull p { background: linear-gradient(90deg, var(--ink), var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.callout { border: 1px solid var(--line); background: linear-gradient(160deg, var(--glow-a), transparent 55%), var(--card); }
.callout.tip { background: linear-gradient(160deg, var(--glow-b), transparent 55%), var(--card); }
.callout.warn { background: linear-gradient(160deg, rgba(242, 131, 111, .14), transparent 55%), var(--card); }

/* Motion: only once blog.js has added .motion (it never does for anyone who asks for less motion).
   Without it every drawing shows its finished state. */
.fig .m-rise, .fig .m-pop { transform-box: fill-box; transform-origin: center; }
.motion .fig .m-rise { transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .9s; }
.motion .fig .m-pop { transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), opacity .4s; }
.motion .fig:not(.is-in) .m-rise { opacity: 0; transform: translateY(26px); }
.motion .fig:not(.is-in) .m-pop { opacity: 0; transform: scale(.6); }
.motion .fig .d1 { transition-delay: .05s; } .motion .fig .d2 { transition-delay: .2s; }
.motion .fig .d3 { transition-delay: .35s; } .motion .fig .d4 { transition-delay: .5s; }
.motion .fig .d5 { transition-delay: .8s; } .motion .fig .d6 { transition-delay: .95s; }
.motion .fig .d7 { transition-delay: 1.1s; } .motion .fig .d8 { transition-delay: 1.25s; }
@keyframes oe-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes oe-sheen { 0% { transform: translateX(0); } 60%, 100% { transform: translateX(420px); } }
@keyframes oe-swing { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes oe-scan { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(250px); opacity: 0; } }
@keyframes oe-static { 0% { transform: translateX(0); } 100% { transform: translateX(200px); } }
@keyframes oe-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.motion .fig.is-in .m-float { animation: oe-float 6s ease-in-out infinite; }
.motion .fig.is-in .m-sheen { animation: oe-sheen 5s ease-in-out 1s infinite; }
.fig .m-swing { transform-box: fill-box; transform-origin: 50% 0; }
.motion .fig.is-in .m-swing { animation: oe-swing 5s ease-in-out infinite; }
.motion .fig.is-in .m-swing.s2 { animation-delay: -1.2s; } .motion .fig.is-in .m-swing.s3 { animation-delay: -2.4s; }
.motion .fig.is-in .m-swing.s4 { animation-delay: -3.6s; }
.fig .m-scan { opacity: 0; }
.motion .fig.is-in .m-scan { animation: oe-scan 2.4s ease-in-out .3s 2 both; }
.motion .fig.is-in .m-static { animation: oe-static 1.6s linear infinite; }
.motion .fig.is-in .m-blink { animation: oe-blink 1s step-end infinite; }
@media (prefers-reduced-motion: reduce) { .fig * { animation: none !important; transition: none !important; } }
.fig .fig-ground-fill { fill: var(--ground); }
.fig .fig-ground-stroke { stroke: var(--ground); }
@keyframes oe-ripple { 0% { transform: scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes oe-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes oe-drift { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-60px, -20px); } 66% { transform: translate(50px, 14px); } }
@keyframes oe-slide { 0% { transform: translateX(-340px); } 100% { transform: translateX(0); } }
.fig .m-ripple, .fig .m-pulse { transform-box: fill-box; transform-origin: center; }
.motion .fig.is-in .m-ripple { animation: oe-ripple 2.8s ease-out infinite; }
.motion .fig.is-in .m-pulse { animation: oe-pulse 1.8s ease-in-out infinite; }
.motion .fig.is-in .m-drift { animation: oe-drift 9s ease-in-out infinite; }
.motion .fig:not(.is-in) .m-slide { transform: translateX(-340px); }
.motion .fig.is-in .m-slide { animation: oe-slide 1.4s cubic-bezier(.2, .8, .2, 1) .9s both; }

/* Pieces a reader plays with (2026-11-10). The control appears only once blog.js wakes the piece. */
.piece .piece-live { touch-action: pan-y; cursor: ew-resize; }
.piece-ctl { padding: 4px 6px 0; }
.piece-range { width: 100%; accent-color: var(--amber); height: 32px; margin: 6px 0 2px; }
.piece-say { font-family: var(--display); font-weight: 800; font-size: 1rem; margin: 2px 0 6px; color: var(--ink); min-height: 1.4em; }
.fig .xr-hit { transition: opacity .3s; }
.piece-on .fig .xr-hit, .piece-on .xr-hit:not(.xr-seen) { opacity: .25; }
.piece-on .xr-hit.xr-seen { opacity: .95; }

/* Buttons and boxes a piece adds (2026-11-10, pieces for posts one to three). */
.piece-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 4px; }
.piece-btn { font: inherit; font-family: var(--display); font-weight: 800; font-size: 1rem; min-height: 46px; padding: 10px 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); box-shadow: var(--shadow); transition: transform .2s var(--ease), border-color .2s, background .2s; }
.piece-btn:hover { transform: translateY(-2px); border-color: var(--amber); }
.piece-btn:active { transform: translateY(1px); }
.piece-btn[hidden] { display: none; }
.piece-go { background: var(--btn); color: var(--btn-ink); border-color: transparent; }
.piece-green { border-color: var(--ok); color: var(--ok); flex: 1; }
.piece-red { border-color: var(--warn); color: var(--warn); flex: 1; }
.piece-checks { display: grid; gap: 8px; margin: 8px 0 4px; }
.piece-checks label { display: flex; gap: 10px; align-items: flex-start; font-size: 1rem; line-height: 1.4; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); cursor: pointer; }
.piece-checks input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--ok); }
.fig svg.piece-tap .os-row, .fig svg.piece-tap .fs-pile { cursor: pointer; }
/* Post one: the still drawing is the broken listing; .ld-fixed (blog.js) swaps in the right hours. */
.fig .ld-when-ok { display: none; }
.fig svg.ld-fixed .ld-when-ok { display: inline; }
.fig svg.ld-fixed .ld-when-broken { display: none; }
.fig .ld-walker { transition: transform .8s var(--ease), opacity .6s var(--ease); }
.fig svg.ld-fixed .ld-walker { transform: translateX(-46px); opacity: 0; }
/* Post two: a ticked layer lights up, and the dial fills. */
.fig .os-check { opacity: 0; transition: opacity .25s; }
.fig .os-on .os-check { opacity: 1; }
.fig .os-on .os-ring { stroke: var(--ok); }
.fig .os-on .os-slab { stroke: var(--ok); }
.fig .os-arc, .fig .os-arc-glow { transition: stroke-dashoffset .7s var(--ease); }
.fig svg.os-full .os-score { fill: var(--ok); }
/* Post three: the card flies to its pile and the next one drops in. */
.fig .fs-card { transform-box: view-box; transform-origin: 180px 150px; transition: transform .32s var(--ease), opacity .32s; touch-action: pan-y; }
.fig .fs-card.fs-out-green { transform: translate(-90px, 170px) rotate(-14deg) scale(.4); opacity: 0; }
.fig .fs-card.fs-out-red { transform: translate(90px, 170px) rotate(14deg) scale(.4); opacity: 0; }
.fig .fs-card.fs-in { transform: translateY(-30px) scale(.94); opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { .fig .ld-walker, .fig .os-arc, .fig .os-arc-glow, .fig .fs-card, .piece-btn { transition: none !important; } }

/* Gold that shifts: titles and ==keywords== (the founder, 2026-11-10: like gold catching the light, not a rainbow). */
.shine, .glow {
  background: linear-gradient(100deg, var(--ink) 0%, var(--ink) 30%, var(--amber) 42%, #fff4c8 50%, var(--brand) 58%, var(--ink) 70%, var(--ink) 100%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.glow { background-image: linear-gradient(100deg, var(--amber) 0%, #fff4c8 25%, var(--brand) 50%, #fff4c8 75%, var(--amber) 100%); font-weight: 700; }
.motion .shine { animation: oe-gold 7s ease-in-out infinite; }
.motion .glow { animation: oe-gold 5s linear infinite; }
.callout.glance .callout-title { background: linear-gradient(100deg, var(--amber), #fff4c8, var(--brand), var(--amber)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.motion .callout.glance .callout-title { animation: oe-gold 6s linear infinite; }
@keyframes oe-gold { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .shine, .glow, .callout-title { animation: none !important; } }
.shine { text-shadow: none; filter: drop-shadow(0 0 22px rgba(232, 176, 72, .22)); }

/* ---- The blog index as cards a reader picks from (the founder, 2026-11-10: the old list "is very boring").
   Modelled on the homepage's posts section: each story its own card, its cover drawing, the gold title, one line.
   Every card is a plain link: no script, no motion and no View Transitions still leave a page that works. ---- */
.oe-index { position: relative; }
.oe-index::before { content: ""; position: absolute; inset: -24px -16px auto; height: 520px; pointer-events: none; z-index: -1;
  background: radial-gradient(60% 55% at 20% 10%, var(--glow-a), transparent 70%), radial-gradient(50% 45% at 90% 30%, var(--glow-b), transparent 70%); }
.oe-hero { padding-top: 10px; padding-inline: 4px; }
.oe-eyebrow { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--mint); margin: 0 0 .4em; }
.oe-hero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.7rem, 12vw, 4.8rem); line-height: .98; letter-spacing: -.02em; margin: 0 0 .25em; }
.oe-hero .lede { font-size: 1.12rem; line-height: 1.55; margin: 0 0 .8em; max-width: 34em; }
.oe-count { font-family: var(--display); font-weight: 500; color: var(--ink); margin: 0 0 1.6em; }
.oe-cards { list-style: none; margin: 0 auto; padding: 0; max-width: 1120px; display: grid; gap: 30px; perspective: 1300px; }
.oe-card { position: relative; }
.oe-open { position: relative; display: block; height: 100%; padding: 12px 12px 22px; border-radius: 30px; text-decoration: none; color: var(--ink);
  border: 1px solid transparent; transform-style: preserve-3d;
  background: linear-gradient(170deg, var(--card), var(--card-2)) padding-box,
              linear-gradient(140deg, var(--amber), var(--line) 38%, var(--line) 62%, var(--mint)) border-box;
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .65), 0 0 0 0 var(--glow-a); transition: box-shadow .5s var(--ease); }
.oe-open:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }
.oe-open:hover { box-shadow: 0 44px 80px -34px rgba(0, 0, 0, .7), 0 0 60px -14px var(--glow-a); }
.oe-cover { position: relative; margin: 0 0 16px; transform-style: preserve-3d; }
.oe-cover .fig-art { max-width: none; border-radius: 22px; overflow: hidden; box-shadow: 0 26px 50px -26px rgba(0, 0, 0, .8);
  transition: transform .6s var(--ease); }
.oe-open:hover .oe-cover .fig-art, .oe-open:focus-visible .oe-cover .fig-art { transform: translateZ(46px) scale(1.015); }
.oe-gleam { position: absolute; inset: 0; border-radius: 22px; pointer-events: none; opacity: 0; transition: opacity .4s; mix-blend-mode: screen;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 226, 170, .35), transparent 45%); }
.oe-open:hover .oe-gleam { opacity: 1; }
.oe-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 0 8px; font-size: .88rem; color: var(--soft); }
.oe-num { font-family: var(--display); font-weight: 800; font-size: 1rem; color: #17130A; background: var(--amber); border-radius: 999px; padding: 1px 10px; }
.oe-new { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--mint); border: 1px solid var(--mint); border-radius: 999px; padding: 1px 9px; }
.oe-title { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.12; letter-spacing: -.01em; margin: .45em 8px .35em; }
.oe-hook { font-size: 1.06rem; line-height: 1.5; color: var(--soft); margin: 0 8px 1em; }
.oe-more { display: inline-flex; align-items: center; gap: 8px; margin: 0 8px; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line);
  font-weight: 700; font-size: .95rem; color: var(--ink); transition: border-color .3s var(--ease), background .3s var(--ease); }
.oe-arrow { display: inline-block; transition: transform .3s var(--ease); }
.oe-open:hover .oe-more, .oe-open:focus-visible .oe-more { border-color: var(--amber); background: var(--glow-a); }
.oe-open:hover .oe-arrow { transform: translateX(5px); }
@media (min-width: 760px) {
  .oe-cards { grid-template-columns: 1fr 1fr; }
  .oe-card:first-child { grid-column: 1 / -1; }
  .oe-card:first-child .oe-open { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; column-gap: 26px; padding: 16px 26px 16px 16px; }
  .oe-card:first-child .oe-cover { grid-row: 1 / span 4; margin: 0; }
  .oe-card:first-child .oe-title { font-size: clamp(2rem, 3.6vw, 2.7rem); }
  .oe-card:first-child .oe-more { justify-self: start; }
}
/* Rising in: only once blog.js has marked the page (never for less motion). The card tips up off the page. */
.motion .oe-card .oe-open { transition: transform .9s var(--ease), opacity .9s var(--ease), box-shadow .5s var(--ease); }
.motion .oe-card:not(.is-in) .oe-open { opacity: 0; transform: translateY(70px) rotateX(20deg) scale(.94); }
.motion .oe-card.is-in .oe-open { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.motion .oe-card.is-tilting .oe-open { transition: transform .12s linear, box-shadow .5s var(--ease); }
@media (prefers-reduced-motion: reduce) { .oe-open, .oe-open *, .oe-cover .fig-art { transition: none !important; transform: none !important; } }
/* The card in flight is flat: a 3D card cannot be captured for the morph (blog-vt.js). */
/* Important, so a card mid-tilt or under the mouse is flat too (a tilted card skipped the morph in Edge). */
.oe-card.oe-flat .oe-open, .oe-card.oe-flat .oe-cover, .oe-card.oe-flat .oe-cover .fig-art { transform-style: flat !important; transform: none !important; transition: none !important; }

/* The card becomes the story: a cross-document View Transition between /blog/ and a post (same origin).
   blog-vt.js names only the tapped card's cover and title, and names nothing for anyone who asks for less motion.
   The opt-in sits at the top level: nested in a media query, Edge skipped every transition (seen 2026-11-10).
   For less motion every part of a transition is stopped, so the new page simply appears. */
@view-transition { navigation: auto; }
::view-transition-group(oe-cover), ::view-transition-group(oe-title) { animation-duration: .6s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* The grow, for browsers without cross-document View Transitions (blog-vt.js adds it on the tap; the founder's
   iPhone, 2026-11-11): the card's frame opens to fill the screen in the page's own ground while a copy of its cover
   rises to where the post's cover sits; then the post settles its cover and fades its words in. Script only, and
   never for less motion, because blog-vt.js does nothing then. */
.oe-grow { position: fixed; inset: 0; z-index: 1000; pointer-events: none; background: var(--ground);
  transition: clip-path .5s cubic-bezier(.65, 0, .35, 1); }
.oe-grow .oe-grow-art { position: fixed; margin: 0; transform-origin: 0 0; transition: transform .5s cubic-bezier(.65, 0, .35, 1); }
.oe-grow .oe-grow-art .fig-art { box-shadow: 0 30px 80px -30px var(--glow-a), var(--shadow); }
.oe-grow .oe-grow-art *, .oe-grow .oe-grow-art .oe-gleam { animation: none !important; }
.oe-grow .oe-grow-art .oe-gleam { display: none; }
.motion .oe-card.oe-going .oe-open { opacity: 0; transition: opacity .2s linear; }
@keyframes oe-arrive-cover { from { opacity: .55; transform: translateY(-6px) scale(1.02); } }
@keyframes oe-arrive-words { from { opacity: 0; transform: translateY(18px); } }
.oe-arrive .post .fig.cover { animation: oe-arrive-cover .55s cubic-bezier(.2, .8, .2, 1) both; }
.oe-arrive .post > :not(.fig.cover) { animation: oe-arrive-words .6s .12s cubic-bezier(.2, .8, .2, 1) both; }
@media (prefers-reduced-motion: reduce) { .oe-grow, .oe-grow-art, .oe-arrive .post * { transition: none !important; animation: none !important; } }