/* JetFools components. Exact values from the redesign boards (v5). Requires tokens.css. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--jf-font-body);color:var(--jf-ink);background:var(--jf-board-teal)}

/* Page background: teal board + tinted airport-doodle pattern */
.jf-board{position:relative;min-height:100vh;background:var(--jf-board-teal)}
.jf-board::before{content:"";position:absolute;inset:0;background:var(--jf-pattern-ink);
  -webkit-mask:url(/assets/patterns/pattern-airport-doodles.png) 0 0/520px 520px repeat;
          mask:url(/assets/patterns/pattern-airport-doodles.png) 0 0/520px 520px repeat;pointer-events:none}
@media (max-width:767px){.jf-board::before{-webkit-mask-size:380px 380px;mask-size:380px 380px}}
.jf-board>*{position:relative}
.jf-wrap{max-width:var(--jf-content-max);margin:var(--jf-section) auto 0}
@media (max-width:1275px){.jf-wrap{margin-left:var(--jf-gutter);margin-right:var(--jf-gutter)}}

/* Type */
.jf-h1{font-family:var(--jf-font-display);font-weight:400;text-transform:uppercase;line-height:.86;letter-spacing:-.01em;color:var(--jf-cream);margin:0}
.jf-h2{font-family:var(--jf-font-voice);font-weight:400;font-size:46px;line-height:1.05;margin:0;color:var(--jf-cream)}
.jf-card .jf-h2,.jf-h2--ink{color:var(--jf-ink)}
@media (max-width:767px){.jf-h2{font-size:30px}}
.jf-eyebrow{font-weight:900;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--jf-jester-yellow)}
.jf-lede{font-size:20px;line-height:1.55;color:var(--jf-cream);max-width:760px;margin:18px 0 0}
.jf-crumbs{font-size:14px;font-weight:700;color:var(--jf-cream);opacity:.9}
.jf-link{font-weight:900;font-size:15px;color:var(--jf-fool-red);text-decoration:none}
.jf-link::after{content:" →"}

/* Nav (desktop 18px 48px; logo = jet 44px tall + Lilita wordmark 34px) */
.jf-nav{display:flex;align-items:center;justify-content:space-between;padding:18px 48px;background:var(--jf-board-deep)}
.jf-nav__logo{display:flex;align-items:center;gap:14px;font-family:var(--jf-font-voice);font-size:34px;color:var(--jf-cream);text-decoration:none}
.jf-logo{display:inline-block;width:62px;height:44px;background:currentColor;-webkit-mask:url(/assets/logo/jetfools-logo-jet.svg) center/contain no-repeat;mask:url(/assets/logo/jetfools-logo-jet.svg) center/contain no-repeat}
/* The logo SVGs use fill=currentColor: as a mask (above) or inline <svg> they take the text color. As a plain <img> they render black. */
.jf-nav__links{display:flex;gap:26px;align-items:center}
.jf-nav__links a{font-weight:900;font-size:15px;color:var(--jf-cream);text-decoration:none}
.jf-nav__links a[aria-current="page"]{color:var(--jf-jester-yellow);border-bottom:3px solid var(--jf-jester-yellow);padding-bottom:2px}
@media (max-width:767px){.jf-nav{padding:14px 18px}.jf-nav__links{display:none}.jf-nav__logo{font-size:26px}.jf-logo{width:46px;height:33px}}

/* Buttons: Lilita label, 3px ink border, 5px offset shadow, pill */
.jf-btn{display:inline-block;font-family:var(--jf-font-voice);font-size:18px;line-height:1.2;background:var(--jf-jester-yellow);color:var(--jf-ink);
  border:3px solid var(--jf-ink);border-radius:999px;padding:14px 26px;box-shadow:var(--jf-btn-shadow);text-decoration:none;cursor:pointer}
.jf-btn--cream{background:var(--jf-cream)}
.jf-btn--ink{background:var(--jf-ink);color:var(--jf-jester-yellow)}
.jf-btn--sm{font-size:14px;padding:9px 14px}

/* Card shell (one shell everywhere) */
.jf-card{background:var(--jf-cream);border:var(--jf-card-border);border-radius:var(--jf-card-radius);box-shadow:var(--jf-card-shadow);overflow:hidden}
.jf-card__body{padding:24px}
.jf-card--red{background:var(--jf-fool-red);color:var(--jf-cream)}
.jf-card--yellow{background:var(--jf-jester-yellow)}
.jf-card--ink{background:var(--jf-ink);color:var(--jf-cream)}

/* Header strip: colored band at the top of rank and tool cards */
.jf-strip{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:4px solid var(--jf-ink);font-family:var(--jf-font-voice);font-size:22px}
.jf-strip__art{margin-left:auto;display:flex}
.jf-rank{width:34px;height:34px;border-radius:50%;background:var(--jf-cream);color:var(--jf-ink);border:3px solid var(--jf-ink);
  display:flex;align-items:center;justify-content:center;font-family:var(--jf-font-voice);font-size:18px;flex-shrink:0}
/* Heat (rank) strips: .jf-heat-1 ... .jf-heat-8 */
.jf-heat-1{background:var(--jf-heat-1);color:var(--jf-heat-1-ink)}.jf-heat-2{background:var(--jf-heat-2);color:var(--jf-heat-2-ink)}
.jf-heat-3{background:var(--jf-heat-3);color:var(--jf-heat-3-ink)}.jf-heat-4{background:var(--jf-heat-4);color:var(--jf-heat-4-ink)}
.jf-heat-5{background:var(--jf-heat-5);color:var(--jf-heat-5-ink)}.jf-heat-6{background:var(--jf-heat-6);color:var(--jf-heat-6-ink)}
.jf-heat-7{background:var(--jf-heat-7);color:var(--jf-heat-7-ink)}.jf-heat-8{background:var(--jf-heat-8);color:var(--jf-heat-8-ink)}
/* Topic strips (duotone pairs): tools and rights */
.jf-pair-gate{background:var(--jf-gate-bg);color:var(--jf-gate-ink)}.jf-pair-fee{background:var(--jf-fee-bg);color:var(--jf-fee-ink)}
.jf-pair-jester{background:var(--jf-jester-bg);color:var(--jf-jester-ink)}.jf-pair-boarding{background:var(--jf-boarding-bg);color:var(--jf-boarding-ink)}
.jf-pair-red-eye{background:var(--jf-red-eye-bg);color:var(--jf-red-eye-ink)}

/* Score bars on rank cards */
.jf-bar{display:flex;flex-direction:column;gap:3px}
.jf-bar__label{display:flex;justify-content:space-between;font-size:12px;font-weight:900}
.jf-bar__track{height:9px;background:var(--jf-rule);border:2px solid var(--jf-ink);border-radius:5px;overflow:hidden}
.jf-bar__fill{height:100%}

/* Problem chips */
.jf-chip{display:inline-flex;align-items:center;gap:8px;background:var(--jf-cream);border:3px solid var(--jf-ink);border-radius:999px;padding:9px 14px;box-shadow:var(--jf-chip-shadow);font-weight:900;font-size:15px;color:var(--jf-ink)}
.jf-chip__dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--jf-ink)}

/* Labels */
.jf-tag{display:inline-block;font-weight:900;font-size:12px;letter-spacing:.12em;padding:5px 10px;border-radius:6px}
.jf-tag--comedy{background:var(--jf-fool-red);color:var(--jf-cream)}
.jf-tag--receipts{background:var(--jf-ink);color:var(--jf-jester-yellow)}

/* Tables inside cards */
.jf-table__head{display:grid;gap:12px;padding:10px 0;font-weight:900;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--jf-taupe);border-bottom:3px solid var(--jf-ink)}
.jf-table__row{display:grid;gap:12px;padding:12px 0;border-top:2px solid var(--jf-rule);font-size:16px;align-items:center}

/* Illustrations: two masks per drawing (ink + fill) so any pair can recolor them */
.jf-art{position:relative;display:inline-block}
.jf-art>span{position:absolute;inset:0;-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
.jf-art__fill{background:var(--fill,transparent)}.jf-art__ink{background:var(--ink,var(--jf-ink))}

/* Trip perch: head behind the card, hands in front (see components.html) */
.jf-perch{position:relative}
.jf-perch__back,.jf-perch__front{position:absolute;width:var(--w);height:var(--h);top:calc(var(--h) * -0.8367 + 2px);pointer-events:none}
.jf-perch__back{z-index:0}.jf-perch__front{z-index:2}
.jf-perch>.jf-card{position:relative;z-index:1}
.jf-perch__back span,.jf-perch__front span{position:absolute;inset:0;-webkit-mask:var(--src) center/100% 100% no-repeat;mask:var(--src) center/100% 100% no-repeat}

/* Footer */
.jf-footer{margin-top:72px;background:var(--jf-board-deep);padding:46px 0 34px;color:var(--jf-cream)}
.jf-footer__cols b{font-weight:900;font-size:13px;letter-spacing:.14em;color:var(--jf-jester-yellow)}