/* Pop-shadow button: rests a touch big on a hard offset shadow; hovering presses it flat into the page.
   Class .popbtn on an <a> or <button>. Knobs below; defaults are the source's measured values. */
.popbtn {
  --pop-accent: #2747d6;                   /* border + shadow (source: the section colour, or white on it) */
  --pop-bg: #fff;
  --pop-ink: var(--pop-accent);
  --pop-shadow: var(--pop-accent);         /* source's plain variant uses #0003 */
  --pop-x: 5px;                            /* shadow offset right */
  --pop-y: 4px;                            /* shadow offset down */
  --pop-rest: 1.03;                        /* resting scale: lifted 3% off the page */
  --pop-dur: .35s;
  --pop-ease: ease;
  --pop-pad: 1rem 3rem;
  --pop-radius: 100px;
  --pop-border: 1px;
  --pop-font: 400 1.4rem/1.2 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;

  display: inline-block; box-sizing: border-box;
  padding: var(--pop-pad);
  border: var(--pop-border) solid var(--pop-accent);
  border-radius: var(--pop-radius);
  background: var(--pop-bg); color: var(--pop-ink);
  font: var(--pop-font); text-transform: uppercase; text-align: center; text-decoration: none;
  letter-spacing: .01em;
  cursor: pointer;
  transform: scale(var(--pop-rest));
  box-shadow: var(--pop-x) var(--pop-y) 0 0 var(--pop-shadow);
  transition: border var(--pop-dur) var(--pop-ease), box-shadow var(--pop-dur) var(--pop-ease), transform var(--pop-dur) var(--pop-ease);
}
/* flat: scale 1 and the shadow gone. "none" interpolates to a transparent zero shadow, so the slab slides in
   under the button AND fades over the same .35s */
.popbtn.is-flat, .popbtn:focus-visible, .popbtn:active { transform: scale(1); box-shadow: none; }
@media (hover: hover) { .popbtn:hover { transform: scale(1); box-shadow: none; } }
.popbtn:focus-visible { outline: 2px solid var(--pop-accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .popbtn { transition-duration: .01s; } }

/* ink preset (.popbtn.popbtn--ink, folded 10-04 from heyjay.studio's pill CTA, css .button-icon): a white pill with a
   1px black edge sitting on a hard 3px / 3px black slab, NO resting lift (scale 1); hover presses it flat as the
   slab slides in under it over .3s ease. Unlike the default, the slab stays opaque all the way (it goes to 0 0 0 0
   in its own colour, not "none"), so it reads as a crisp ink offset closing up, not a fade.
   Optional leading emoji: <span class="popbtn__emoji" aria-hidden="true">...</span> as the first child (32px, 8px gap;
   the pill's padding mirrors to 14px 48px 12px 32px, the source's emoji variant).
   .popbtn--black: the black-fill variant (black pill, white label, same black slab).
   Knob added: --pop-bg-hover (fill while pressed; default = --pop-bg, e.g. a colour for the source's green hover). */
.popbtn--ink {
  --pop-accent: #000;
  --pop-bg: #fff;
  --pop-ink: #000;
  --pop-shadow: #000;
  --pop-x: 3px;
  --pop-y: 3px;
  --pop-rest: 1;
  --pop-dur: .3s;
  --pop-ease: ease;
  --pop-pad: 14px 40px 12px;               /* bare label, centred (every source pill carries an emoji; see below) */
  --pop-font: italic 300 24px/24px "Iowan Old Style", Georgia, "Times New Roman", serif;
  --pop-bg-hover: var(--pop-bg);
  display: inline-flex; align-items: center; justify-content: center;
  text-transform: none; letter-spacing: normal;
  transition: border-color var(--pop-dur) var(--pop-ease), box-shadow var(--pop-dur) var(--pop-ease), transform var(--pop-dur) var(--pop-ease),
    background-color var(--pop-dur) var(--pop-ease), color var(--pop-dur) var(--pop-ease);
}
.popbtn--ink:has(> .popbtn__emoji:first-child) { --pop-pad: 14px 48px 12px 32px; }
.popbtn--black { --pop-bg: #000; --pop-ink: #fff; }
.popbtn__emoji { margin-right: 8px; font: normal 400 32px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.popbtn--ink.is-flat, .popbtn--ink:focus-visible, .popbtn--ink:active { box-shadow: 0 0 0 0 var(--pop-shadow); background-color: var(--pop-bg-hover); }
@media (hover: hover) { .popbtn--ink:hover { box-shadow: 0 0 0 0 var(--pop-shadow); background-color: var(--pop-bg-hover); } }
@media (prefers-reduced-motion: reduce) { .popbtn--ink { transition-duration: .01s; } }