/* ============================================================
   THE SPIKE.  The order spindle, loaded with her paper.

   Campbell, 2026-08-01: "do the ticket spike on menu, then celebrations and
   events."

   WHY THIS OBJECT AND NOT ANOTHER ONE.  Kimmy runs the whole business on
   paper right now: customers text her for customs, she opens a Google Form
   for presales, and she writes it down.  Her own words about OverDrive were
   "this is gonna save me so many sheets of notebook paper."  The order ticket
   is not a decoration borrowed from restaurant iconography, it is literally
   her current system, and a bakery kitchen keeps that paper on a spindle.
   Markets/bakery.md names the well outright: "a foil pan and a handwritten
   order ticket."

   WHAT IT REPLACED.  /menu/ was six identical flip cards in a 4+2 grid with a
   short row hanging left, and both /celebrations/ and /events/ ran the SAME
   flat .ledger list.  One reflex card row and one skeleton used twice, which
   is two separate laws.  The flip also HID half of every item (sold as,
   sizes, lead time lived on the back), and an order ticket carries exactly
   those fields on its face.  So the object shows more than the cards did.

   THE MECHANISM, so nobody re-derives it backwards.  A spindle reads as
   threaded, not stacked, because of two things and only two things:
     1. every ticket is punched at the SAME point in the assembly, and
     2. every ticket rotates about THAT PUNCHED HOLE (transform-origin sits on
        the hole, never on the ticket's own centre).
   Get the origin wrong and the paper slides sideways instead of swinging, and
   the whole thing collapses into a pile of tilted cards.  The steel is drawn
   behind the paper and seen THROUGH each hole, which is what you actually see
   looking at a loaded spike from the front: opaque paper, pin visible only in
   the punches and above the topmost sheet.

   ONE OBJECT, THREE ARRANGEMENTS.  A shared object that becomes a shared
   skeleton is the defect rooms.css exists to avoid, so each room loads the
   spike differently and the difference is EARNED by that page's job:
     /menu/         what she MAKES   -> tall tickets, a stuck-on print, specs.
     /celebrations/ what she BUILDS  -> no print (it does not exist yet, it is
                                       yours), servings, and the top of the
                                       spindle is left EMPTY for your order.
     /events/       what she BRINGS  -> wide load-out sheets, no print, a
                                       packed/checked rule per line.
   ============================================================ */

/* ---------- 1. THE ASSEMBLY ----------

   TAKE 1 PUT THE PUNCH OUTSIDE THE PAPER and the object did not exist: the
   rod ran down the maroon BESIDE a column of cream, so it read as a decorative
   rule next to a long scroll, and six sheets overlapped by 30px fused into one
   continuous page. A spindle only reads if the steel passes through actual
   paper, which means the punch sits INSIDE the sheet with paper all around it,
   and the sheets are separated so each one is its own object with its own
   shadow. The rod position in the assembly and the punch position in a sheet
   are therefore THE SAME NUMBER, --pierce-x, and that is why they line up. */
.spike{
  --pierce-x: 52px;     /* punch, measured from a sheet's OWN left edge, and
                           equally the rod's offset in the assembly */
  --pierce-y: 27px;     /* punch, from a sheet's own top edge */
  --steel: 11px;        /* take 2 ran this at 7px and the tickets read as if
                           they were hanging from a piece of string. A spindle
                           is a heavy pin; it has to out-weigh the paper. */
  position:relative;
  max-width:760px;
  margin-inline:auto;   /* the assembly is a centred block; the rod is left
                           INSIDE it, which is how the host-owns-the-axis law
                           earns a left edge (design-precision.md §2). */
  padding:var(--space-8) 0 var(--space-9);
  list-style:none;
}

/* ---------- 2. THE STEEL.  Drawn once, behind every sheet of paper.
              Built from her espresso rather than a flat grey: a neutral grey
              rod is the off-palette sin this build already had removed once
              (TASTE 2026-07-30, the status dot). ---------- */
.spike::before{
  content:"";
  position:absolute;
  left:calc(var(--pierce-x) - var(--steel) / 2);
  top:var(--space-5);
  /* the foot stops INSIDE the base, which draws over it: a rod that stops
     short of the disc reads as a hanging thread, not a pin standing in a
     weight */
  bottom:calc(var(--space-6) + 14px);
  width:var(--steel);
  /* a turned pin, not a flat bar: a hard specular line just left of centre and
     the shoulders falling to near black is what makes it read as round metal */
  background:
    linear-gradient(90deg,
      #170807 0%, #3d211d 14%, #8a6259 32%, #efe0d8 45%, #fffaf7 50%,
      #c9a99e 58%, #6b423b 74%, #331815 90%, #120504 100%);
  z-index:0;
}
/* the sharpened tip, standing above the topmost sheet */
.spike::after{
  content:"";
  position:absolute;
  left:calc(var(--pierce-x) - var(--steel) / 2);
  top:0;
  width:var(--steel); height:calc(var(--space-6) + 4px);
  background:linear-gradient(90deg,
    #170807 0%, #8a6259 30%, #fffaf7 50%, #6b423b 74%, #120504 100%);
  clip-path:polygon(50% 0, 100% 30%, 100% 100%, 0 100%, 0 30%);
  z-index:20;               /* in front: nothing is threaded above the tip */
  pointer-events:none;
}

/* THE WEIGHTED BASE.  A spindle is a heavy disc or the paper tips it over,
   and it is what makes the object read as standing on a counter rather than
   floating on a page. Drawn as her cake board, so the object belongs to this
   bakery and not to a diner. */
.spike-base{
  position:absolute;
  left:var(--pierce-x);
  bottom:var(--space-6);
  width:200px; height:34px;
  transform:translateX(-50%);
  border-radius:50%;
  background:linear-gradient(#fdf6ee 0%, #f0e0d0 52%, #c7aa9a 100%);
  border:2px dashed rgba(166,100,114,.6);
  box-shadow:0 7px 0 rgba(66,36,34,.5), 0 26px 38px -16px rgba(20,8,8,.9);
  z-index:1;                /* the base stands in FRONT of the rod's foot */
}

/* ---------- 3. THE PAPER ---------- */
.spk-t{
  position:relative;
  width:var(--w, 100%);
  padding:var(--space-6) var(--space-6) var(--space-6) var(--space-8);
  /* every sheet swings about its own punch, never about its own centre.
     This one line is the difference between threaded and stacked. */
  transform-origin:var(--pierce-x) var(--pierce-y);
  transform:rotate(var(--swing, 0deg));
  transition:transform .5s var(--kc-ease-settle),
             filter .5s var(--kc-ease-settle);
  z-index:2;
}
/* Sheets are SEPARATED, not overlapped. Take 1 overlapped them by 30px and six
   tickets fused into one long scroll; the fan is only legible when each sheet
   has air, its own torn edge, and its own shadow. */
.spk-t + .spk-t{ margin-top:var(--space-5); }
/* THE PAPER SIZE IS THE ORDER'S WEIGHT, and this is the line that stops the
   spike being a list. Take 2 made six sheets the same size and it read as a
   uniform run no matter how well the object was drawn. In a real kitchen a
   whole cheesecake baked to order is a FULL FORM and half a dozen cookies off
   the sheet is a little torn slip, so the sheets are not the same size here
   either. It is her own production reality setting the composition rather
   than a decorative rhythm.
   nth-of-TYPE, not nth-child: .spike-base is the assembly's first child, so
   every nth-child index here would be off by one. */
.spk-t{ --w:78%; }                 /* the everyday slip */
.spk-t.spk-form{ --w:100%; }       /* made to order: a full form */

/* THE WEIGHT NEEDS A VERTICAL DIMENSION TOO (2026-08-01 polish pass). Measured
   after the first build: sheet widths spread 190px but sheet HEIGHTS spread
   only 24 to 33px across a whole spindle, so scrolling past still read as a
   uniform run of six equal beats. A bigger order is a bigger piece of paper in
   both directions, not a wider one. */
.spk-t.spk-form{
  padding-top:calc(var(--space-7) + 4px);
  padding-bottom:var(--space-7);
}
/* and a torn rag on top, so no two sheets share an edge */
.spk-t:nth-of-type(3n+2){ width:calc(var(--w) - 3%); }
.spk-t:nth-of-type(3n+3){ width:calc(var(--w) - 1.5%); }
/* the sheets nearer the top of the stack sit in front */
.spk-t:nth-of-type(1){ z-index:9; }
.spk-t:nth-of-type(2){ z-index:8; }
.spk-t:nth-of-type(3){ z-index:7; }
.spk-t:nth-of-type(4){ z-index:6; }
.spk-t:nth-of-type(5){ z-index:5; }
.spk-t:nth-of-type(6){ z-index:4; }
.spk-t:nth-of-type(7){ z-index:3; }

/* THE SHEET ITSELF, on its own layer so the torn bottom edge can be clipped
   without taking the content or the punch with it.  clip-path kills
   box-shadow, so the paper casts with drop-shadow instead, which follows the
   clip and gives the torn edge a real shadow. */
.spk-t::before{
  content:"";
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(176deg, #fdf7f0 0%, #f9eee3 62%, #f4e5d6 100%);
  clip-path:polygon(
    0 0, 100% 0, 100% calc(100% - 13px),
    92% 100%, 78% calc(100% - 9px), 64% 100%, 50% calc(100% - 11px),
    36% 100%, 22% calc(100% - 8px), 8% 100%, 0 calc(100% - 12px));
  filter:drop-shadow(0 20px 26px rgba(22,9,9,.55));
}
/* PAPER ON A PALE GROUND SEPARATES BY SHADOW, NOT BY TONE (2026-08-01 polish
   pass). Measured paper-against-ground: /menu/ 17.82:1 in the dark room, but
   /celebrations/ only 1.53:1 and /events/ 1.97:1, so on those two the sheets
   read as faintly lighter rectangles instead of as paper standing on cloth.
   Darkening those grounds to match the room was the wrong fix: three dark
   rooms would make the three spikes cousins, which is the defect the whole
   one-object-three-arrangements rule exists to avoid. Real paper on a pink
   cloth separates the way it does in life, with a TIGHT CONTACT shadow where
   it touches and a soft one further out. */
.spike-quote .spk-t::before,
.spike-load .spk-t::before{
  filter:
    drop-shadow(0 1px 0 rgba(92,48,54,.34))
    drop-shadow(0 3px 3px rgba(92,48,54,.26))
    drop-shadow(0 18px 22px rgba(70,32,38,.42));
}
.spike-quote .spk-t:hover::before,
.spike-quote .spk-t:focus-within::before,
.spike-load .spk-t:hover::before,
.spike-load .spk-t:focus-within::before{
  filter:
    drop-shadow(0 1px 0 rgba(92,48,54,.34))
    drop-shadow(0 6px 6px rgba(92,48,54,.24))
    drop-shadow(0 30px 34px rgba(70,32,38,.5));
}

/* the order pad's dashed rule, printed on the paper */
.spk-t::after{
  content:"";
  position:absolute; inset:11px 11px 20px; z-index:-1;
  border:1px dashed rgba(166,100,114,.42);
  pointer-events:none;
}

/* ---------- 4. THE PUNCH.  The hole the steel passes through. It is the
              one detail that proves the sheet is on the spindle: a torn ring
              of paper, a dark bite, and the steel visible inside it. ---------- */
.spk-hole{
  position:absolute;
  left:var(--pierce-x);
  top:var(--pierce-y);
  width:21px; height:21px;
  transform:translate(-50%, -50%);
  border-radius:50%;
  /* A HOLE, NOT A BEAD. The first version put a wide pale ring around a dark
     centre and at 2x it read as a rivet sitting ON the paper. A punch is dark
     all the way to its cut edge, and the only light on it is the 1px lip where
     the sheet's own thickness catches the lamp. */
  background:
    radial-gradient(circle at 50% 42%,
      #120504 0 62%, #3a1e1a 82%, #63403a 100%);
  box-shadow:
    0 0 0 1px rgba(255,247,240,.75),          /* the cut lip of the paper */
    0 1px 2px rgba(20,8,8,.55);
  z-index:2;
  pointer-events:none;
}
/* the steel, seen THROUGH the punch: narrower than the hole, so the dark of
   the aperture still shows either side of the pin */
.spk-hole::after{
  content:"";
  position:absolute; left:50%; top:-1px; bottom:-1px;
  width:calc(var(--steel) - 2px);
  transform:translateX(-50%);
  background:linear-gradient(90deg,
    #170807 0%, #8a6259 30%, #fffaf7 50%, #6b423b 74%, #120504 100%);
}

/* ---------- 5. THE FAN.  Real thumbed-apart paper never repeats an angle.
              Seven values on a seven step so no two neighbours match and the
              run does not visibly loop against a 5 or 6 item set. ---------- */
.spk-t:nth-of-type(7n+1){ --swing:-2.4deg; }
.spk-t:nth-of-type(7n+2){ --swing: 1.6deg; }
.spk-t:nth-of-type(7n+3){ --swing:-1.2deg; }
.spk-t:nth-of-type(7n+4){ --swing: 2.7deg; }
.spk-t:nth-of-type(7n+5){ --swing:-1.9deg; }
.spk-t:nth-of-type(7n+6){ --swing: 1.0deg; }
.spk-t:nth-of-type(7n+7){ --swing:-3.0deg; }

/* PULLED FORWARD TO READ.  You square a ticket up to read it: the sheet
   swings level on its punch and lifts off the ones under it. The verb is the
   object's own, not a card's hover-lift. */
.spk-t:hover,
.spk-t:focus-within{
  --swing:0deg;
  z-index:12;
}
.spk-t:hover::before,
.spk-t:focus-within::before{
  filter:drop-shadow(0 30px 36px rgba(22,9,9,.7));
}

/* ---------- 6. WHAT IS WRITTEN ON THE TICKET.

              An order slip is WIDE and SHORT: the item written across the
              head, the detail underneath. Take 1 stacked print-over-words in a
              narrow column, which made six tall pages and read as a brochure.
              The head clears the punch on the left; the body runs beneath it. */
.spk-head{
  display:flex; align-items:baseline; justify-content:center;
  gap:var(--space-3); flex-wrap:wrap;
  text-align:center;
  padding-bottom:var(--space-4);
  margin-bottom:var(--space-5);
  border-bottom:1px dashed rgba(166,100,114,.42);
}
/* .spk-head h3, not .spk-t h3, and the reason is specificity. rooms.css resets
   the WHOLE SUBTREE of any paper surface standing in a room, at (0,2,0), so a
   plain `.spk-t h3` at (0,1,1) lost and the item names on /menu/ came out
   espresso while the same names on /celebrations/ and /events/ were rose.
   MEASURED, not eyeballed: the contrast pass reported fg(51,32,30) on menu
   against fg(166,100,114) on events. Two classes plus the element wins. */
.spk-t .spk-head h3{
  font-family:var(--kc-script);
  font-size:var(--kc-d2);
  color:var(--kc-rose);
  margin:0;
}
/* print and words are ONE centred group on the ticket, not two columns of a
   grid. As a grid the words centred inside whatever space the print left over,
   which opened a loose hole between them and pushed the reading off the
   ticket's own axis. Flex sizes the pair to its content and centres it, so the
   host owns the axis (design-precision.md §2). */
.spk-body{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-7);
  /* NOWRAP ON PURPOSE. With wrap on, flex measures each item's MAX-CONTENT
     first, so the narrow slips threw their print above the words while the
     wide forms kept it beside them, and the same component composed three
     different ways down one page by accident. The words shrink instead. */
  flex-wrap:nowrap;
}
.spk-words{ flex:0 1 auto; min-width:0; }
.spk-print{ flex:0 0 auto; }
.spk-line{
  margin:0 auto;
  max-width:34ch;
  text-align:center;
  color:var(--kc-ink-soft);
  font-size:var(--kc-small);
}

/* the written-out order fields.  A real pad is label then value on a ruled
   line, so this is a ruled two-column list, not a spec table. */
.spk-spec{
  margin:var(--space-5) auto 0;
  max-width:34ch;
  display:grid;
  /* minmax, not 1fr: as a plain 1fr the rule column collapsed to zero whenever
     the label and the value were both long, and MEASURED 9 of 18 rules simply
     not drawing on /menu/. The dotted rule is what makes this read as a pad
     rather than a spec table, so it is guaranteed a width and the value wraps
     instead. */
  grid-template-columns:auto minmax(20px, 1fr) auto;
  align-items:baseline;
  gap:var(--space-2) var(--space-3);
}
.spk-spec dt{
  font-size:var(--kc-tiny);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--kc-ink-faint);
  grid-column:1;
  white-space:nowrap;   /* "LEAD TIME" broke over two lines on a narrow slip
                           at 390px, which put the label out of line with its
                           own value */
}
.spk-spec .rule{
  grid-column:2;
  border-bottom:1px dotted rgba(67,37,36,.28);
  transform:translateY(-4px);
}
.spk-spec dd{
  grid-column:3;
  margin:0;
  font-size:var(--kc-small);
  color:var(--kc-ink);
  text-align:right;
}
/* a full form has room to let the rule run, which is what a written order pad
   actually looks like; a slip keeps it tight */
.spk-form .spk-spec{ max-width:42ch; }

/* ---------- 7. THE PRINT.  /menu/ only: her photograph stuck on the ticket,
              torn out and set down at an angle, never a card's cover image.
              Four apertures so a run of six never repeats a silhouette. ---------- */
.spk-print{
  display:block;
  width:198px;
  margin:0;
  transform:rotate(var(--pt, -1.6deg));
}
.spk-print img{
  display:block; width:100%; height:198px;
  object-fit:cover;
  box-shadow:0 14px 22px -12px rgba(22,9,9,.85);
}
/* a slip is a smaller piece of paper, so its print is a smaller print. This
   also buys the spec column back the ~30px it needed to stop breaking values
   like "Six, twelve, or a tower" across two lines. */
.spk-t:not(.spk-form) .spk-print{ width:142px; }
.spk-t:not(.spk-form) .spk-print img{ height:142px; }
.spk-t:nth-of-type(4n+1) .spk-print{ --pt:-2.4deg; }
.spk-t:nth-of-type(4n+2) .spk-print{ --pt: 1.9deg; }
.spk-t:nth-of-type(4n+3) .spk-print{ --pt:-1.2deg; }
.spk-t:nth-of-type(4n+4) .spk-print{ --pt: 2.6deg; }

/* ---------- 8. THE BLANK.  /celebrations/ only: the top of the spindle is
              empty, because the next ticket on it is the reader's.  This is
              the page's job (close the order) built into the object rather
              than asserted under it. ---------- */
/* An unfilled page off the pad is RULED, not hatched: the first draft used a
   diagonal hatch and it read as a barber pole rather than as paper waiting to
   be written on. Ruled lines in her own pink, and the sheet sits a shade
   whiter than the written ones because nothing has been put on it yet. */
.spk-t.spk-blank::before{
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,0) 0 25px,
      rgba(166,100,114,.16) 25px 26px),
    linear-gradient(176deg, #fffdfa 0%, #fdf6f1 100%);
}
.spk-blank .spk-line{ max-width:32ch; }
.spk-blank .btn{ margin-top:var(--space-5); }
/* the empty sheet is the one you are meant to reach for, so it stands squarer
   and higher on the pin than the written ones */
.spk-blank{ --swing:-.6deg; }

/* ---------- 9. THE LOAD-OUT.  /events/ only: what she packs and brings.
              A checked line on a load sheet, drawn as her own crimped board
              rather than a checkbox glyph. ---------- */
.spike-load .spk-t{ padding-bottom:var(--space-5); }
.spk-pack{
  margin:var(--space-4) auto 0;
  max-width:40ch;
  display:grid;
  gap:var(--space-2);
  padding:0; list-style:none;
}
.spk-pack li{
  position:relative;
  padding-left:26px;
  font-size:var(--kc-small);
  color:var(--kc-ink-soft);
  text-align:left;
}
.spk-pack li::before{
  content:"";
  position:absolute; left:0; top:.42em;
  width:13px; height:13px;
  border-radius:50%;
  border:2px dashed rgba(166,100,114,.65);
  background:radial-gradient(circle at 50% 40%, #fdf6ee, #e8d2c2);
}

/* ---------- 10. THE PHONE.  Not the desktop composition shrunk: the rod
               comes in tight to the edge, the fan flattens (a big swing at
               375px throws a corner off screen), and the print sits smaller.
               Same object, composed for the thumb. ---------- */
@media (max-width:720px){
  .spike{
    --pierce-x: 30px;
    --pierce-y: 24px;
    --steel: 6px;
    padding-top:var(--space-7);
  }
  .spk-t{
    padding:var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  }
  .spk-t + .spk-t{ margin-top:var(--space-4); }
  /* the swing halves. The fan is a detail at 1440px and a defect at 390px: at
     full strength the outer corner of every sheet leaves the viewport, which
     is horizontal overflow, not character. */
  .spk-t:nth-of-type(7n+1){ --swing:-1.1deg; }
  .spk-t:nth-of-type(7n+2){ --swing: .7deg; }
  .spk-t:nth-of-type(7n+3){ --swing:-.6deg; }
  .spk-t:nth-of-type(7n+4){ --swing: 1.2deg; }
  .spk-t:nth-of-type(7n+5){ --swing:-.9deg; }
  .spk-t:nth-of-type(7n+6){ --swing: .5deg; }
  .spk-t:nth-of-type(7n+7){ --swing:-1.3deg; }
  /* the rag closes up: at this width a 5% short sheet is just a ragged edge */
  .spk-t:nth-of-type(3n+2){ --w:99%; }
  .spk-t:nth-of-type(3n+3){ --w:100%; }
  /* the print goes back OVER the words. Side by side at 390px leaves the
     spec list about 14 characters wide, which is not a readable measure. */
  .spk-body{ flex-direction:column; gap:var(--space-5); }
  .spk-words{ width:100%; }
  .spike-base{ width:140px; height:26px; }
  .spk-print{ width:144px; }
  .spk-print img{ height:144px; }
  .spk-spec{ max-width:100%; }
}

/* ---------- 11. THE SLIP TORN OFF THE PIN.

   The closing band on /menu/ was a centred heading, one line and a button on a
   flat pink ground, which is the stock hero the kill-list forbids wearing a
   different colour, and it was the page's CONVERSION moment. It is now the
   last thing you actually do with an order pad: the slip comes off the
   spindle. The rip is the detail, and it is what ties this to the object above
   without rerunning the spindle: the punch is TORN THROUGH, so what is left at
   the top edge is half a hole. ---------- */
.torn-off{
  position:relative;
  /* ISOLATION, or the paper vanishes. A z-index:-2 pseudo with no stacking
     context on its parent paints BEHIND the section's own background, so the
     first build of this drew the rip mark floating on bare pink with no sheet
     under it at all. .ticket already carries this line for the same reason. */
  isolation:isolate;
  max-width:430px;
  margin-inline:auto;
  padding:var(--space-8) var(--space-6) var(--space-7);
  text-align:center;
}
/* THE PAPER LEANS ON ITS OWN LAYER AND THE READING STAYS LEVEL. The first pass
   tilted the container and counter-rotated every child, which is exactly the
   craft this build already replaced once on the arrival ticket: it inflates
   every child's bounding box and puts controls on a rotated axis. */
.torn-off::before{                            /* the paper, ripped along the top */
  content:"";
  position:absolute; inset:0; z-index:-2;
  background:linear-gradient(176deg, #fdf7f0 0%, #f9eee3 60%, #f4e5d6 100%);
  clip-path:polygon(
    0 15px, 9% 4px, 19% 13px, 31% 3px, 43% 12px, 55% 4px,
    67% 13px, 79% 3px, 90% 12px, 100% 5px, 100% 100%, 0 100%);
  filter:drop-shadow(0 20px 26px rgba(22,9,9,.32));
  transform:rotate(-1.4deg);
}
.torn-off::after{                             /* what the pin left behind */
  content:"";
  position:absolute; left:56px; top:3px; z-index:-1;
  width:21px; height:11px;
  border-radius:0 0 60% 60%;
  background:radial-gradient(circle at 50% 0,
    #120504 0 52%, #3a1e1a 76%, #63403a 100%);
  box-shadow:0 1px 0 rgba(255,247,240,.8);
  transform:rotate(-1.4deg);
}
.torn-off h2{ color:var(--kc-ink); }
.torn-off p{ color:var(--kc-ink-soft); margin:var(--space-3) auto 0; max-width:30ch; }
.torn-off .btn{ margin-top:var(--space-6); }
@media (max-width:620px){
  .torn-off{ max-width:100%; }
  .torn-off::after{ left:38px; }
}

/* a real spindle still stands when the motion is off; nothing here depends on
   script, so the reduced-motion shadow is the object minus the swing easing */
@media (prefers-reduced-motion: reduce){
  .spk-t{ transition:none; }
}