/* How Many Air Forces? Big pictures, short words. Tokens from DESIGN.md: radii 24/10/999, Tiffany fills with dark text. */
.hm { max-width: 720px; margin: 0 auto; padding: 0 16px 48px; color: #1c2426; font-family: 'Source Sans 3', system-ui, sans-serif; }
.hm h1, .hm h2 { font-family: var(--serif, 'Fraunces', Georgia, serif); font-weight: 500; letter-spacing: -.02em; color: #1c2426; }
.hm-top { text-align: center; padding: 24px 0 8px; }
.hm-crumb { font-size: 14px; color: #5f6b71; text-align: left; margin-bottom: 20px; }
.hm-crumb a { color: #077a76; }
.hm h1 { font-size: clamp(2.5rem, 9vw, 4.4rem); line-height: 1.04; margin: 0 0 12px; }
.hm-dek { font-size: 1.6rem; color: #4a565b; margin: 0 0 16px; }
.hm-read { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 2px solid #077a76; border-radius: 999px; background: #fff;
  color: #077a76; font: 600 1.1rem 'Source Sans 3', system-ui, sans-serif; cursor: pointer; }
.hm-read[hidden] { display: none; }
.hm-read.on { background: #81d8d0; border-color: #81d8d0; color: #0c2422; }
.af-unit, .af-card, .af-score, .af-hund, .af-turn { text-align: center; padding: 40px 0; border-top: 1px solid #dfe7e7; scroll-margin-top: 72px; }
.af-unit { border-top: 0; padding-top: 8px; }
.af-photo { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto 8px; aspect-ratio: 800 / 572; object-fit: contain; }
.af-step { font-size: 1rem; color: #5f6b71; margin: 0 0 4px; font-weight: 600; }
.af-card h2, .af-score h2, .af-hund h2, .af-turn h2 { font-size: clamp(1.9rem, 6.5vw, 2.9rem); line-height: 1.1; margin: 0 0 8px; }
.af-line { font-size: 1.5rem; line-height: 1.3; color: #1c2426; margin: 0 0 12px; }
.af-ask { font-size: 1.25rem; font-weight: 600; color: #4a565b; margin: 16px 0 12px; }
.af-eq { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 12px; font-family: var(--serif, 'Fraunces', Georgia, serif); margin: 8px 0 12px; }
.af-eq-1 { font-size: clamp(1.8rem, 7vw, 2.6rem); }
.af-eq-s { font-size: 2.4rem; color: #5f6b71; }
.af-eq-p { font-size: clamp(3rem, 13vw, 4.6rem); color: #077a76; font-weight: 600; }
.af-down { font-size: 1.1rem; color: #5f6b71; margin: 20px 0 0; }
.af-down::after { content: ""; display: block; width: 14px; height: 14px; margin: 10px auto 0; border-right: 3px solid #077a76; border-bottom: 3px solid #077a76; transform: rotate(45deg); }
.af-opts { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.af-opt { min-width: 92px; min-height: 64px; padding: 0 18px; border: 2px solid #1c2426; border-radius: 10px; background: #fff; color: #1c2426;
  font: 500 1.7rem var(--serif, 'Fraunces', Georgia, serif); cursor: pointer; }
.af-opt:hover:not(:disabled) { background: #eef8f7; }
.af-opt:disabled { cursor: default; opacity: .45; border-color: #7d898d; }
.af-opt.is-right { background: #81d8d0; border-color: #81d8d0; color: #0c2422; opacity: 1; }
.af-opt.is-picked:not(.is-right) { opacity: 1; border-color: #5f6b71; text-decoration: line-through; }
.js-hm .af-card:not(.done) .af-a { display: none; }
.af-a { margin-top: 20px; padding: 20px 14px; border-radius: 24px; background: #dff3f1; }
.af-result { font: 600 1.4rem 'Source Sans 3', system-ui, sans-serif; color: #0c2422; margin: 0; min-height: 0; }
.af-result:empty { display: none; }
.af-big { margin: 0 0 12px; font-family: var(--serif, 'Fraunces', Georgia, serif); line-height: 1; }
.af-big b { display: block; font-size: clamp(4rem, 19vw, 7rem); font-weight: 600; color: #077a76; letter-spacing: -.03em; }
.af-big span { font-size: 1.5rem; color: #1c2426; }
.af-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin: 0 auto 12px; }
/* multiply drops the white photo background, so a white shoe reads on the mint panel */
.af { display: block; width: 62px; height: 44px; overflow: hidden; }
.af img { display: block; width: 62px; height: 44px; object-fit: contain; mix-blend-mode: multiply; }
.af.part { width: calc(62px * var(--f)); }
.done .af { animation: af-pop .3s both; }
.done .af:nth-child(n+2) { animation-delay: .05s; } .done .af:nth-child(n+6) { animation-delay: .15s; } .done .af:nth-child(n+14) { animation-delay: .28s; } .done .af:nth-child(n+26) { animation-delay: .42s; }
@keyframes af-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.af-ans { font-size: 1.4rem; line-height: 1.3; margin: 0; }
.af-final { font: 500 clamp(2rem, 8vw, 3rem)/1.1 var(--serif, 'Fraunces', Georgia, serif); color: #077a76; margin: 0 0 12px; }
.af-share { min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: #81d8d0; color: #0c2422; font: 600 1.15rem 'Source Sans 3', system-ui, sans-serif; cursor: pointer; margin-bottom: 20px; }
.af-share[hidden], .af-final[hidden] { display: none; }
.ladder { text-align: left; }
.lad { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid #dfe7e7; }
.lad > img { width: 84px; height: 60px; object-fit: contain; flex: none; }
.lad-t { min-width: 0; flex: 1; }
.lad-t b { font-size: 1.1rem; font-weight: 600; }
.lad-t span { font-size: 1.1rem; color: #077a76; font-weight: 600; }
.af-row.small { justify-content: flex-start; margin: 6px 0 0; gap: 1px; }
.af-row.small { padding: 4px; border-radius: 10px; background: #dff3f1; }
.af-row.small .af, .af-row.small .af img { width: 26px; height: 19px; }
.af-row.small .af.part { width: calc(26px * var(--f)); }
.h-head { font-size: 1.1rem; color: #4a565b; margin: 8px 0; }
.hund { text-align: left; margin: 0 0 16px; }
.h-row { display: grid; grid-template-columns: 6.2rem 1fr 2rem; gap: 8px; align-items: center; padding: 7px 0; }
.h-l { font-size: 1.05rem; font-weight: 600; }
.h-n { font: 600 1.3rem var(--serif, 'Fraunces', Georgia, serif); text-align: right; }
.h-d { display: flex; flex-wrap: wrap; gap: 3px; }
.h-d i { display: block; width: 12px; height: 12px; border-radius: 999px; outline: 1px solid rgba(12, 36, 34, .18); }
.af-small { font-size: 1rem; color: #5f6b71; margin: 0; }
.picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pick { padding: 4px; border: 1px solid #dfe7e7; border-radius: 10px; background: #fff; cursor: pointer; min-height: 72px; }
.pick:hover, .pick.on { border-color: #077a76; box-shadow: 0 0 0 1px #077a76; }
.pick img { display: block; width: 100%; height: auto; aspect-ratio: 240 / 172; object-fit: contain; }
.turn-out { margin-bottom: 16px; padding: 18px 12px; border-radius: 24px; background: #dff3f1; scroll-margin-top: 90px; }
.turn-out[hidden] { display: none; }
.turn-out h3 { font: 500 1.35rem/1.2 var(--serif, 'Fraunces', Georgia, serif); margin: 0 0 6px; }
.hm-after { border-top: 1px solid #dfe7e7; padding-top: 32px; font-size: 1.1rem; line-height: 1.5; }
.hm-after h2 { font-size: 1.7rem; margin: 28px 0 8px; }
.hm-keep { display: grid; gap: 8px; margin-bottom: 24px; }
.hm-keep a { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 14px 16px; border: 1px solid #dfe7e7; border-radius: 10px; color: #1c2426; text-decoration: none; }
.hm-keep a:hover { border-color: #81d8d0; }
.hm-keep b { color: #077a76; font-size: 1.15rem; font-weight: 600; }
.hm-keep span { font-size: 1rem; color: #4a565b; }
.af-faq { border-bottom: 1px solid #dfe7e7; padding: 10px 0; }
.af-faq summary { font-weight: 600; cursor: pointer; min-height: 32px; }
.af-faq p { margin: 8px 0 0; }
.af-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
.af-table th, .af-table td { padding: 6px; border-bottom: 1px solid #dfe7e7; text-align: right; }
.af-table th:first-child, .af-table td:first-child { text-align: left; }
.af-method { font-size: 14px; line-height: 1.45; color: #4a565b; margin: 16px 0 0; }
.af-method a { color: #077a76; }
@media (min-width: 700px) { .picks { grid-template-columns: repeat(4, 1fr); } .af, .af img { width: 74px; height: 53px; } .af.part { width: calc(74px * var(--f)); } }
@media (prefers-reduced-motion: reduce) { .done .af { animation: none; } }
.af-deep h3 { font: 500 1.3rem/1.2 var(--serif, 'Fraunces', Georgia, serif); margin: 18px 0 6px; }
.af-deep ul, .af-deep ol { margin: 8px 0; padding-left: 1.2rem; }
.af-deep li { margin: 6px 0; }
.af-scroll { overflow-x: auto; }
.af-scroll td:first-child { min-width: 8rem; }
.af-scroll td { white-space: nowrap; }
.af-scroll td:first-child { white-space: normal; }