/* Split-flap kickers, 3 Nov 2026. [data-flap] on a .v2-kick eyebrow turns its words into a small departures board
   whose tiles clack into place the first time the kicker is in view (flap.js). The kicker, its classes and its
   ::before rule are untouched: the script only swaps the text for a visually hidden copy plus the board, so the
   accessible name and aria-labelledby still read the words. With no JavaScript the plain text stays.
   One tile is four layers. ::before is the static top half (the letter arriving), ::after the static bottom half
   (the letter leaving), and above them two flaps: .flap-h--t falls forward, then .flap-h--b rises into place. The
   hairline across the middle is one pixel row of ::before that no flap covers (--flap-cut is the row above it).
   Sizes: 17x23 tiles with 13px letters; 14x19 with 11px letters at 420px and under. The board's negative margin
   keeps the kicker the height of its one-line text (13px) so headings below it do not move. */
.flap-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.flap-board{display:flex;flex-wrap:wrap;gap:2px 9px;margin:-5px 0;letter-spacing:0;text-transform:uppercase}
.flap-w{display:flex;flex:none;gap:2px}
.flap-t{--flap-cut:11px;--flap-bg:var(--ink,#2A1F0A);--flap-seam:rgba(242,233,214,.25);--flap-edge:transparent;
  position:relative;flex:none;width:17px;height:23px;perspective:120px;font:600 13px/23px var(--f-body,'Work Sans','Work Sans Fallback',system-ui,sans-serif);
  color:var(--paper,#F2E9D6);text-align:center;white-space:pre;-webkit-user-select:none;user-select:none}
.flap-t::before,.flap-t::after,.flap-h{position:absolute;left:0;width:100%;background:var(--flap-bg)}
.flap-t::before{content:attr(data-n);top:0;height:100%;border-radius:3px 3px 0 0;clip-path:inset(0 0 calc(100% - var(--flap-cut) - 1px) 0);
  background:linear-gradient(transparent var(--flap-cut),var(--flap-seam) var(--flap-cut),var(--flap-seam) calc(var(--flap-cut) + 1px),transparent calc(var(--flap-cut) + 1px)),var(--flap-bg);
  box-shadow:inset 1px 1px 0 var(--flap-edge),inset -1px 0 0 var(--flap-edge)}
.flap-t::after{content:attr(data-c);top:0;height:100%;border-radius:0 0 3px 3px;clip-path:inset(calc(var(--flap-cut) + 1px) 0 0 0);
  box-shadow:inset 1px -1px 0 var(--flap-edge),inset -1px 0 0 var(--flap-edge)}
.flap-h{overflow:hidden;z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden}
/* the flaps' letters are generated content (data-ch), not text nodes, so the kicker's textContent stays the plain words */
.flap-h>span{display:block}
.flap-h>span::before{content:attr(data-ch)}
.flap-h--t{top:0;height:var(--flap-cut);border-radius:3px 3px 0 0;transform-origin:50% 100%;box-shadow:inset 1px 1px 0 var(--flap-edge),inset -1px 0 0 var(--flap-edge)}
.flap-h--b{top:calc(var(--flap-cut) + 1px);height:calc(100% - var(--flap-cut) - 1px);border-radius:0 0 3px 3px;transform-origin:50% 0;box-shadow:inset 1px -1px 0 var(--flap-edge),inset -1px 0 0 var(--flap-edge)}
.flap-h--b>span{margin-top:calc(-1px - var(--flap-cut))}
/* One clack: the top flap falls (55 ms, ease-in), then the bottom flap lands (55 ms, ease-out). The script alternates
   .go and .go2 so a tile that is already mid-flip restarts without a forced reflow. */
.flap-t.go .flap-h--t{animation:flapTop .055s ease-in forwards}
.flap-t.go .flap-h--b{animation:flapBot .055s ease-out .055s both}
.flap-t.go2 .flap-h--t{animation:flapTop2 .055s ease-in forwards}
.flap-t.go2 .flap-h--b{animation:flapBot2 .055s ease-out .055s both}
@keyframes flapTop{to{transform:rotateX(-90deg)}}
@keyframes flapBot{from{transform:rotateX(90deg)}to{transform:rotateX(0)}}
@keyframes flapTop2{to{transform:rotateX(-90deg)}}
@keyframes flapBot2{from{transform:rotateX(90deg)}to{transform:rotateX(0)}}
/* Paper tiles for a kicker on a dark or busy area */
[data-flap="paper"] .flap-t{--flap-bg:var(--card,#FFFDF8);--flap-seam:var(--line,rgba(42,31,10,.18));--flap-edge:var(--line,rgba(42,31,10,.18));color:var(--ink,#2A1F0A)}
@media (max-width:420px){
  .flap-board{margin:-3px 0}
  .flap-t{--flap-cut:9px;width:14px;height:19px;font-size:11px;line-height:19px}
}
@media (prefers-reduced-motion:reduce){
  .flap-t.go .flap-h,.flap-t.go2 .flap-h{animation:none}
}
/* A board written into the page at build time (tools/flap_prerender.cjs) starts blank like one flap.js builds, until
   flap.js adopts it and sets .flap-on. No JavaScript (no .js class) shows the letters at once; if flap.js never runs,
   the letters appear after 4 s (the animation holds the colour transparent, then ends on the tile's own colour).
   tools/critical_css.cjs keeps this rule in the inline block although it never matches once the page has loaded. */
.js .flap-board:not(.flap-on) .flap-t{animation:flapWait 4s steps(1,end) both}
@keyframes flapWait{0%{color:transparent}}