/* ============================================================
   SIGNAL v2 — signal-kenpriore Ghost theme
   Poster direction (Ken, 2026-08-28). Cool/white only; no cream.
   Hues: chrome speaks the primaries; sections speak the
   narrative palette (slate/rose/mustard/orange/sage) as wayfinding.
   One red element per screen: the live dot.
   ============================================================ */

:root{
  --paper:#FFFFFF; --ink:#0A0A0A; --ink-soft:#333333; --muted:#6B6B6B;
  --line:#D9D9D9; --line-firm:var(--ink); --fill-soft:#F4F4F4;
  --c-red:#FF0000; --c-blue:#0057B8; --c-yellow:#FFCC00;
  --ill-slate:#4A6FA5; --ill-rose:#C76B7E; --ill-mustard:#D4A24C;
  --ill-orange:#FF7F50; --ill-sage:#7CA982;
  --container:1180px; --measure:760px; --inset:clamp(20px,5vw,72px);
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;border-radius:0 !important}
html{background:var(--paper)}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);
     font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--inset)}
.narrow{max-width:var(--measure);margin-left:auto;margin-right:auto}
.num,time{font-variant-numeric:tabular-nums}
img{max-width:100%;height:auto}
a{color:inherit}

.kicker{font-weight:700;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted)}
.kicker b{color:var(--ink)}
.kicker a{text-decoration:none;color:inherit}

/* section hue map */
.hue-signals{--hue:var(--ill-slate)}
.hue-reflections{--hue:var(--ill-rose)}
.hue-foundations{--hue:var(--ill-mustard)}
.hue-default{--hue:var(--ill-slate)}

.ic{width:1em;height:1em;display:inline-block;vertical-align:-0.12em;
    --signal:var(--c-blue)}
.ic.ext{width:12px;height:12px;margin-left:6px;color:var(--muted);--signal:var(--muted)}

/* ---------- masthead ---------- */
.site-head{border-bottom:4px solid var(--line-firm);background:var(--paper)}
.mast{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.mark{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.wordmark{font-weight:800;font-size:20px;letter-spacing:-0.02em;text-transform:uppercase}
.wordmark small{display:block;font-weight:700;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin-top:2px}
.site-nav .nav{list-style:none;display:flex;gap:28px}
.site-nav .nav a{font-weight:700;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  padding:4px 0;border-bottom:2px solid transparent}
.site-nav .nav a:hover{border-bottom-color:var(--ink)}
.site-nav .nav-current a{border-bottom-color:var(--c-blue)}

/* ---------- poster hero ---------- */
.hero-kicker{padding:56px 0 18px;white-space:nowrap;overflow:hidden}
.hero-kicker a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--c-blue)}
.hero-kicker a:hover{color:var(--c-blue)}
.hero{display:grid;grid-template-columns:7fr 5fr;gap:24px;align-items:center;
      padding:56px 0 40px}
.hero h1{font-weight:800;font-size:clamp(38px,5.8vw,80px);line-height:.98;
         letter-spacing:-0.02em}
.hero h1 a{text-decoration:none;color:var(--ink)}
.hero h1 a:hover{color:var(--c-blue)}
.hero .kicker{margin-bottom:20px}
.hero .dek{font-size:18px;line-height:1.55;color:var(--ink-soft);
           max-width:52ch;margin-top:18px}
.live{display:inline-block;width:10px;height:10px;background:var(--c-red);
      margin-right:8px;animation:beat 1.92s linear infinite}
@keyframes beat{0%,89.9%{transform:scale(1)}90%,95.9%{transform:scale(1.45)}96%,100%{transform:scale(1)}}
/* Hero art. Plates are stacked and exactly one is visible; the swap is a HARD
   CUT (visibility, no transition) per the motion doctrine. The first plate stays
   in normal flow so it defines the box even while hidden. */
.hero-art{position:relative;overflow:hidden}
.hero-art img{width:100%;display:block;visibility:hidden}
.hero-art img:not(:first-child){position:absolute;top:0;left:0}
.hero-art img.is-on{visibility:visible}
.hero-art::after{content:"";position:absolute;inset:0;background:var(--paper);
  animation:wipe .96s cubic-bezier(0.2,0.7,0.2,1) .35s forwards}
@keyframes wipe{to{transform:translateX(101%)}}

/* ---------- icon section bands ---------- */
.bands{display:grid;margin-top:56px;border-top:4px solid var(--line-firm)}
.band{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,46ch);
  gap:28px;align-items:center;
  padding:30px 0 30px 26px;border-bottom:2px solid var(--line-firm);
  border-left:12px solid var(--hue,var(--ink));
  text-decoration:none;color:var(--ink)}
.band .bic{width:52px;height:52px;--signal:var(--hue,var(--c-blue))}
.band h2{font-weight:800;font-size:clamp(28px,3.6vw,44px);letter-spacing:-0.02em;
  min-width:0}
.band h2 .chip{display:inline-block;width:14px;height:14px;background:var(--hue);
  margin-left:14px;vertical-align:8px;
  transition:transform .24s cubic-bezier(0.2,0.7,0.2,1)}
.band:hover h2 .chip{transform:rotate(45deg)}
/* Tag descriptions come from Ghost and can be any length: wrap inside a
   bounded column so a long one can never break the grid. */
.band .desc{color:var(--muted);font-size:14px;line-height:1.45;
  justify-self:end;text-align:right;min-width:0;white-space:normal;
  overflow-wrap:anywhere}
.band:hover{background:var(--hue,var(--ink));color:var(--paper)}
.band:hover .desc{color:var(--paper)}
.band:hover .bic{--signal:var(--paper);color:var(--paper)}
.band:hover h2 .chip{background:var(--paper)}

/* ---------- motif band (house marks; still) ---------- */
.motifband{display:grid;grid-template-columns:repeat(6,1fr);
           border-top:4px solid var(--line-firm);
           border-bottom:2px solid var(--line-firm);padding:22px 0}
.motifband .m{display:flex;align-items:center;justify-content:center;
              border-left:1px solid var(--line)}
.motifband .m:first-child{border-left:none}
.motifband svg{width:54px;height:54px;color:var(--ink);
               --signal:var(--c-blue);--emphasis:var(--c-blue)}

/* ---------- index ---------- */
.sect{display:flex;justify-content:space-between;align-items:baseline;
      padding:44px 0 12px;border-bottom:2px solid var(--line-firm)}
.sect.first{padding-top:56px}
.sect h3{font-weight:800;font-size:22px;letter-spacing:-0.02em}
.cols{column-count:2;column-gap:56px;column-rule:1px solid var(--line);padding-top:6px}
.plist{padding-top:6px}
.row{display:grid;grid-template-columns:26px 1fr auto;gap:14px;align-items:baseline;
     padding:13px 0;border-bottom:1px solid var(--line);break-inside:avoid;
     text-decoration:none;color:var(--ink)}
.row .ric{width:17px;height:17px;color:var(--ink);--signal:var(--hue,var(--c-blue))}
.row .t{font-weight:700;font-size:15.5px;letter-spacing:-0.01em}
.row .d{font-weight:700;font-size:12px;color:var(--hue,var(--muted))}
.row:hover .t{color:var(--hue,var(--c-blue))}

/* pagination */
.pagination{display:flex;justify-content:space-between;align-items:baseline;
  padding:26px 0;font-weight:700;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase}
.pagination a{color:var(--ink);text-decoration:none;border:2px solid var(--line-firm);
  padding:10px 20px}
.pagination a:hover{background:var(--ink);color:var(--paper)}
.pagination .page-number{color:var(--muted)}

/* ---------- section landing ---------- */
.shead{padding:60px 0 30px;border-bottom:4px solid var(--hue,var(--line-firm))}
.shead .kicker{margin-bottom:16px}
.shead h1{font-weight:800;font-size:clamp(44px,6.5vw,84px);line-height:.95;
          letter-spacing:-0.02em}
.shead .desc{color:var(--ink-soft);font-size:17px;line-height:1.55;
             max-width:none;margin-top:18px}

/* year headings — inserted by script, only for years that have posts */
.yearhead{padding:30px 0 8px;color:var(--ink);font-size:12px;
          border-bottom:2px solid var(--hue,var(--line-firm))}
.yearhead:first-child{padding-top:20px}

/* section ledger rows (tag page) */
.plist .row{grid-template-columns:1fr auto}
.plist .row .t{font-size:17px}

/* ---------- article ---------- */
/* the head shares the body column's left edge — 620px, same as .gh-content
   text — so the title, the dek and the prose all sit on one spine */
.art-head{padding:56px 0 0;max-width:var(--measure);margin-left:auto;margin-right:auto}
.art-head .kicker{margin-bottom:18px}
.art-head h1{font-weight:800;font-size:clamp(32px,4.2vw,52px);line-height:1.05;
             letter-spacing:-0.02em;margin-bottom:18px}
.art-head .dek{font-size:22px;line-height:1.5;color:var(--ink-soft);
               max-width:none;margin-bottom:0}

/* "Updated" mark — the post page's single red element */
.upd{color:var(--ink)}
.upd .live{margin-left:6px}

.cover{margin:30px auto 0;max-width:var(--measure)}
.cover img{width:100%;display:block}

/* reading content — covers Koenig cards + 419 posts of legacy HTML
   ONE SPINE: every block resolves to one of two centred widths.
   Never use `ch` here — it resolves per font-size and gives every
   block type a different edge. */
/* ONE column: text sits at the same width as the photos and videos, with
   type scaled up so the longer line stays comfortable to read. */
/* The column lives on the CONTAINER, not on each child — that way a floated
   figure floats to the column's edge and the prose wraps beside it. */
.gh-content{--col:var(--measure);--colwide:var(--measure);padding:48px 0 0;
  max-width:var(--measure);margin-left:auto;margin-right:auto}
.gh-content>*{max-width:100%}
.gh-content>figure,.gh-content>.kg-card,.gh-content>hr{max-width:100%}
.gh-content p{margin-bottom:26px;font-size:20px;line-height:1.7;color:var(--ink-soft)}
.gh-content>p:first-of-type{color:var(--ink)}
.gh-content h2{font-weight:800;font-size:30px;letter-spacing:-0.02em;
  color:var(--ink);margin:56px auto 16px}
.gh-content h3{font-weight:800;font-size:23px;letter-spacing:-0.01em;
  color:var(--ink);margin:40px auto 12px}
.gh-content a{color:var(--c-blue);text-decoration:none;border-bottom:1px solid var(--c-blue)}
.gh-content a:hover{border-bottom-width:2px}
.gh-content ul,.gh-content ol{padding-left:24px;margin-bottom:26px;
  font-size:20px;line-height:1.65;color:var(--ink-soft)}
.gh-content li{margin-bottom:9px}
/* blockquote does double duty as a section title in older content:
   give it heading weight so it never reads smaller than body copy */
.gh-content blockquote{border-left:4px solid var(--line-firm);padding:2px 0 2px 22px;
  margin:38px auto 18px;font-weight:700;font-size:23px;line-height:1.35;
  letter-spacing:-0.01em;color:var(--ink)}
.gh-content blockquote p{font-size:inherit;line-height:inherit;color:inherit;
  font-weight:inherit;margin-bottom:0}
.gh-content blockquote strong{font-weight:inherit}
/* section separator: full measure, weighted above so a title binds to
   the section it opens rather than floating between two */
.gh-content hr{border:none;border-top:2px solid var(--line-firm);
  margin:64px auto 26px;width:100%}
.gh-content hr + *{margin-top:0}
.gh-content figure{margin:34px auto}
.gh-content figcaption{font-weight:600;font-size:12.5px;letter-spacing:.01em;
  text-transform:none;color:var(--muted);margin-top:8px;line-height:1.5}
.gh-content img{display:block;margin:0 auto}
.gh-content pre{background:var(--fill-soft);border:1px solid var(--line);
  padding:18px;overflow-x:auto;font-size:14px;line-height:1.5;margin-bottom:22px}
.gh-content code{font-size:.92em;background:var(--fill-soft);padding:1px 5px}
.gh-content pre code{background:none;padding:0}
.gh-content table{border-collapse:collapse;width:100%;margin-bottom:22px;
  font-variant-numeric:tabular-nums}
.gh-content th,.gh-content td{border:1px solid var(--line);padding:8px 12px;
  text-align:left;font-size:15px}
.gh-content th{font-weight:800;border-bottom:2px solid var(--line-firm)}
/* ---- Koenig cards (what the Ghost editor actually emits) ---- */
.gh-content .kg-card{margin:34px auto}
.gh-content .kg-width-wide{max-width:var(--colwide)}
.gh-content .kg-width-full{max-width:var(--colwide)}

/* H4 is repurposed as a KICKER — type an H4 in the editor to get the
   uppercase eyebrow label above an entry (e.g. "MIT FutureTech · 2026"). */
.gh-content h4{font-weight:700;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin:44px auto 10px}

/* image cards — 2px ink plate, ruled caption bar.
   Height is capped so a portrait phone snap can't eat two-thirds of a
   screen next to a landscape still; the plate shrinks to the image. */
/* The plate is always the wide column: shrink-to-fit looks tidy until a
   long caption drives the width and every photo lands on a different
   edge. Image centres inside, capped in height. */
.gh-content .kg-image-card{border:2px solid var(--line-firm);
  width:100%;max-width:100%;margin-left:auto;margin-right:auto}

/* PAGES (About): the opening portrait sits small and right, prose wrapping
   beside it. Only the first image on a page behaves this way. */
.page-template .gh-content > figure.kg-image-card:first-of-type{
  float:right;width:300px;margin:4px 0 22px 34px;shape-outside:border-box}
.page-template .gh-content > figure.kg-image-card:first-of-type img{
  max-height:none}
.gh-content h2,.gh-content hr{clear:both}
.gh-content .kg-image-card img,
.gh-content .kg-image{display:block;max-width:100%;width:auto;
  max-height:560px;margin:0 auto}
/* captions carry names and venues — sentence case, readable, not a
   tracked-out caps wall */
.gh-content .kg-image-card figcaption,
.gh-content .kg-embed-card figcaption,
.gh-content .kg-video-card figcaption,
.gh-content .kg-gallery-card figcaption{
  border-top:2px solid var(--line-firm);padding:10px 12px;
  font-weight:600;font-size:12.5px;letter-spacing:.01em;text-transform:none;
  color:var(--muted);line-height:1.5;text-align:left}
.gh-content figcaption a{color:var(--c-blue);border-bottom:1px solid var(--c-blue)}

/* embeds — YouTube/Vimeo/Wistia get a 16:9 frame; everything else keeps its own height */
.gh-content .kg-embed-card{border:2px solid var(--line-firm);display:block}
.gh-content .kg-embed-card iframe{max-width:100%;border:0;display:block}
.gh-content .kg-embed-card iframe[src*="youtube"],
.gh-content .kg-embed-card iframe[src*="youtu.be"],
.gh-content .kg-embed-card iframe[src*="vimeo"],
.gh-content .kg-embed-card iframe[src*="wistia"],
.gh-content .kg-embed-card iframe[src*="loom"]{width:100%;height:auto;aspect-ratio:16/9}
.gh-content .kg-embed-card iframe[src*="twitter"],
.gh-content .kg-embed-card iframe[src*="spotify"],
.gh-content .kg-embed-card iframe[src*="apple"],
.gh-content .kg-embed-card iframe[src*="simplecast"],
.gh-content .kg-embed-card iframe[src*="megaphone"],
.gh-content .kg-embed-card iframe[src*="captivate"]{width:100%;aspect-ratio:auto}

/* native video + audio cards */
.gh-content .kg-video-card,
.gh-content .kg-audio-card{border:2px solid var(--line-firm)}
.gh-content .kg-video-container video{width:100%;display:block}
.gh-content .kg-video-overlay,
.gh-content .kg-video-play-icon{border-radius:0 !important;background:var(--ink) !important}
.gh-content .kg-audio-player-container{padding:12px}
.gh-content .kg-audio-title{font-weight:800;letter-spacing:-0.01em}

/* gallery — contain, never crop: a landscape shot squeezed into a
   portrait cell by object-fit:cover looks like a mistake */
.gh-content .kg-gallery-card{border:2px solid var(--line-firm)}
.gh-content .kg-gallery-row{display:flex;gap:2px;align-items:center}
.gh-content .kg-gallery-image img{width:100%;height:auto;max-height:420px;
  object-fit:contain;display:block}

/* bookmark card */
.gh-content .kg-bookmark-card{border:2px solid var(--line-firm)}
.gh-content .kg-bookmark-container{border:0;text-decoration:none;box-shadow:none;
  display:flex;color:var(--ink)}
.gh-content .kg-bookmark-container:hover{background:var(--fill-soft)}
.gh-content .kg-bookmark-title{font-weight:800;letter-spacing:-0.01em;color:var(--ink)}
.gh-content .kg-bookmark-description{color:var(--ink-soft)}
.gh-content .kg-bookmark-metadata{color:var(--muted);font-weight:700;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.gh-content .kg-bookmark-thumbnail img{border-radius:0 !important}

/* callout + toggle + button */
.gh-content .kg-callout-card{border:2px solid var(--line-firm);
  background:var(--paper) !important;padding:18px 20px;
  border-left:12px solid var(--hue,var(--c-blue))}
.gh-content .kg-callout-emoji{display:none}   /* no emoji, house rule */
.gh-content .kg-callout-text{color:var(--ink);font-weight:500}
.gh-content .kg-toggle-card{border:2px solid var(--line-firm);padding:16px 18px}
.gh-content .kg-toggle-heading-text{font-weight:800;letter-spacing:-0.01em}
.gh-content .kg-btn{border:2px solid var(--line-firm);background:var(--ink);
  color:var(--paper);font-weight:800;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;padding:12px 24px}
.gh-content .kg-btn:hover{background:var(--paper);color:var(--ink)}

/* header/product/signup cards keep the flat grammar.
   ⚠ Ghost writes an inline color on header-card text (often #FFFFFF for
   its accent style). Forcing the background to paper without overriding
   that inline colour renders the card as an empty white-on-white box —
   hence the !important on every descendant. */
.gh-content .kg-header-card,
.gh-content .kg-product-card,
.gh-content .kg-signup-card{border:2px solid var(--line-firm);
  background:var(--paper) !important;background-image:none !important;
  box-shadow:none;padding:26px 28px}
.gh-content .kg-header-card .kg-header-card-content{min-height:0;padding:0}
.gh-content .kg-header-card *,
.gh-content .kg-product-card *,
.gh-content .kg-signup-card *{color:var(--ink) !important}
.gh-content .kg-header-card-heading{font-weight:800;font-size:26px;
  letter-spacing:-0.02em;line-height:1.15}
.gh-content .kg-header-card-subheading{font-weight:400;font-size:16px;
  color:var(--ink-soft) !important;margin-top:10px}

.gh-content iframe{max-width:100%}

.tags{max-width:var(--measure);margin:44px auto 0;padding-top:22px;
      border-top:2px solid var(--line-firm);display:flex;gap:10px;flex-wrap:wrap}
.tag{border:2px solid var(--line-firm);padding:5px 12px;font-weight:700;
     font-size:11px;letter-spacing:.18em;text-transform:uppercase;
     color:var(--ink);text-decoration:none}
.tag:hover{background:var(--ink);color:var(--paper)}

.pn{display:grid;grid-template-columns:1fr 1fr;margin-top:48px;
    border-top:2px solid var(--line-firm)}
.pn a{padding:22px 0;text-decoration:none;color:var(--ink)}
.pn a+a{border-left:1px solid var(--line);padding-left:28px}
.pn a:first-child{padding-right:28px}
.pn .kicker{margin-bottom:8px;display:block}
.pn .t{font-weight:700;font-size:16px;letter-spacing:-0.01em}
.pn a:hover .t{color:var(--c-blue)}

/* ---------- footer ---------- */
.bfoot{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:64px;
       border-top:4px solid var(--line-firm)}
.fc{padding:26px 26px 30px;border-left:1px solid var(--line)}
.fc:first-child{border-left:none;padding-left:0}
.fc .fh{display:flex;align-items:center;gap:9px;padding-bottom:9px;margin-bottom:12px;
        border-bottom:3px solid var(--hue,var(--line-firm))}
.fc .fh .ic{width:17px;height:17px;color:var(--ink);--signal:var(--hue,var(--c-blue))}
.fc .fh span{font-weight:800;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.fc ul{list-style:none}
.fc li{padding:6px 0}
.fc a{color:var(--ink);text-decoration:none;font-weight:700;font-size:14.5px;
      letter-spacing:-0.01em}
.fc a:hover{color:var(--hue,var(--c-blue))}
.fc .note{color:var(--muted);font-size:12.5px;margin-top:2px}

.sub-form{display:flex;gap:0;margin-bottom:12px}
.sub-form input{flex:1;min-width:0;border:2px solid var(--line-firm);
  border-right:none;padding:10px 12px;font-family:var(--sans);font-size:14px}
.sub-form input:focus{outline:2px solid var(--c-blue);outline-offset:-2px}
.sub-form button{border:2px solid var(--line-firm);background:var(--ink);
  color:var(--paper);font-family:var(--sans);font-weight:800;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;padding:10px 14px;cursor:pointer}
.sub-form button:hover{background:var(--hue,var(--c-blue));border-color:var(--hue,var(--c-blue))}
.sub-msg{display:none;font-size:12.5px;margin-top:8px}
.success .sub-msg.success{display:block;color:var(--ink)}
.error .sub-msg.error{display:block;color:var(--c-red)}

.site-foot{border-top:0;margin-top:0}
.colo{display:flex;justify-content:center;align-items:baseline;gap:14px;
      flex-wrap:wrap;text-align:center;
      padding:18px 0 56px;border-top:2px solid var(--line-firm);margin-top:26px}

/* ---------- responsive ---------- */
@media (max-width:880px){
  body{overflow-x:clip}
  .mast{flex-wrap:wrap;gap:14px 24px;padding:14px 0}
  .site-nav{width:100%;border-top:1px solid var(--line);padding-top:12px}
  .site-nav .nav{flex-wrap:wrap;gap:10px 18px}
  .hero{grid-template-columns:1fr}
  .hero-kicker{white-space:normal;padding-top:34px}
  .band{grid-template-columns:48px 1fr;gap:16px}
  .band .desc{display:none}
  .cols{column-count:1}
  .motifband{grid-template-columns:repeat(3,1fr);row-gap:20px}
  .motifband .m:nth-child(4){border-left:none}
  .shead{grid-template-columns:1fr;gap:22px}
  .pn{grid-template-columns:1fr}
  .pn a+a{border-left:none;border-top:1px solid var(--line);padding-left:0}
  .pn a:first-child{padding-right:0}
  .bfoot{grid-template-columns:1fr}
  .fc{border-left:none;border-top:1px solid var(--line);padding-left:0}
  .fc:first-child{border-top:none}
  /* long-form: step the body down a size so the measure stays comfortable
     on a phone, and keep media inside the inset */
  .gh-content p,.gh-content ul,.gh-content ol{font-size:18px;line-height:1.65}
  .gh-content h2{font-size:26px;margin-top:44px}
  .gh-content h3{font-size:21px}
  .gh-content blockquote{font-size:21px;padding-left:16px}
  .art-head .dek{font-size:19px}
  .gh-content .kg-image-card img,.gh-content .kg-image{max-height:420px}
  .gh-content .kg-gallery-row{flex-direction:column;gap:2px}
  /* no float on a phone — the portrait goes back to full width */
  .page-template .gh-content > figure.kg-image-card:first-of-type{
    float:none;width:100%;margin:0 auto 26px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}