#font-pairings{padding-block:70px 85px;scroll-margin-top:90px}
#font-pairings .section-heading{margin-bottom:28px}
.fp-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding-top:20px;flex-wrap:wrap}
.fp-tabs{display:flex;gap:6px;flex-wrap:wrap}
.fp-tabs button{padding:10px 15px;background:transparent;border:1px solid transparent;border-radius:3px;font-size:12px;font-weight:600;color:#697167}
.fp-tabs small{margin-left:7px;font-size:9px;font-weight:400;opacity:.7}
.fp-tabs button[aria-pressed=true]{border-color:#1d2226;background:#1d2226;color:#fff}
.fp-copy-controls{display:flex;gap:12px;align-items:center}
.fp-copy-controls select{max-width:235px;font-size:11px;border:1px solid var(--line);background:transparent;border-radius:3px;padding:10px 24px 10px 11px;color:var(--ink)}
.fp-status{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:19px 15px;color:#70796c;font-size:10px;min-height:48px}
.fp-status a{color:#596653;text-decoration:underline;text-underline-offset:3px;margin-left:8px}
.fp-browser{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(320px,1fr);gap:24px;height:620px;min-width:0}
.fp-feature-column{display:grid;grid-template-rows:minmax(0,1fr) 44px;gap:12px;min-height:0;min-width:0}
.fp-feature-card{min-width:0;min-height:0;background:#eeeee8;border:1px solid #dfe1d8;border-radius:8px;overflow:hidden;display:grid;grid-template-rows:minmax(0,1fr) auto;container-type:inline-size;touch-action:pan-y;color:#252b26}
.fp-feature-card[data-category=serif]{background:#f0e9e1;border-color:#e8dfd4}
.fp-feature-card[data-category=hand]{background:#e9eee3;border-color:#dde4d5}
.fp-feature-card[data-category=display]{background:#e9ebf2;border-color:#dbdfec}
.fp-feature-card:focus-visible{outline-offset:-4px}
.fp-feature-paper{min-width:0;min-height:0;padding:32px 42px 25px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:24px}
.fp-card-top{display:flex;justify-content:space-between;gap:12px;font-size:9px;letter-spacing:.1em;color:#6e786b;line-height:1.4}
.fp-card-top>span:last-child{letter-spacing:0;font-size:11px}
.fp-specimen h3{font-size:27px;line-height:1.4;letter-spacing:-.025em;margin:0 0 22px;word-break:keep-all;overflow-wrap:anywhere}
.fp-specimen p{font-size:14px;line-height:1.9;letter-spacing:-.02em;white-space:pre-line;word-break:keep-all;overflow-wrap:anywhere;margin:0}
.fp-specimen>small{display:block;font-size:10px;letter-spacing:.04em;color:#7b8175;margin-top:24px;line-height:1.5}
.fp-feature-paper>.fp-specimen{align-self:center;min-height:0;animation:fp-specimen-in .2s ease-out}
.fp-feature-card .fp-specimen h3{font-size:clamp(30px,4.9cqw,48px);line-height:1.35}
.fp-feature-card .fp-specimen p{font-size:clamp(17px,2.4cqw,21px);line-height:1.85}
.fp-feature-card[data-poem="2"] .fp-specimen p{font-size:17px;line-height:1.6}
.fp-feature-card[data-poem="2"] .fp-specimen h3{margin-bottom:14px}
.fp-feature-card[data-poem="2"] .fp-specimen>small{margin-top:14px}
.fp-font-info{border-top:1px solid #29302514;margin:0 26px;padding-top:16px;display:grid;gap:8px}
.fp-font-info>div{display:flex;align-items:baseline;gap:9px;min-width:0}
.fp-font-info span{font-size:9px;color:#7b8373;min-width:20px}
.fp-font-info strong{font-size:11px;font-weight:600;overflow-wrap:anywhere}
.fp-font-info small{font-size:8px;color:#7b8373;margin-left:auto;white-space:nowrap}
.fp-feature-card>.fp-font-info{margin-inline:42px;padding-top:19px;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.fp-feature-card>.fp-font-info>div{flex-wrap:wrap;gap:5px 9px}
.fp-feature-card>.fp-font-info strong{font-size:13px}
.fp-feature-card>.fp-font-info small{font-size:9px}
.fp-feature-nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.fp-swipe-hint{font-size:10px;color:#7b8373;letter-spacing:.02em}
.fp-swipe-hint>span{display:none}
.fp-stepper{display:flex;align-items:center;gap:14px}
.fp-stepper>span{font-size:12px;min-width:62px;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.fp-stepper button,.fp-list-pagination button{width:36px;height:36px;border:1px solid #cdd3c6;border-radius:50%;background:transparent;font-size:17px;display:grid;place-items:center}
.fp-stepper button:hover:not(:disabled),.fp-list-pagination button:hover:not(:disabled){border-color:#2456f5;color:#2456f5;background:#e9eeff}
.fp-stepper button:disabled,.fp-list-pagination button:disabled{opacity:.3}
.fp-list-panel{height:100%;min-height:0;min-width:0;display:grid;grid-template-rows:44px minmax(0,1fr) 56px;border-block:1px solid var(--line)}
.fp-list-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-inline:12px}
.fp-list-heading strong{font-size:12px;font-weight:650}
.fp-list-heading>span{font-size:9px;color:#87907e}
.fp-list{display:grid;grid-template-rows:repeat(6,minmax(0,1fr));min-width:0;min-height:0}
.fp-list-item{display:grid;grid-template-columns:28px minmax(0,1fr) 15px;gap:12px;align-items:center;text-align:left;min-width:0;width:100%;padding:11px 12px;border-top:1px solid #dfe2d7;border-left:3px solid transparent;background:transparent;border-radius:0;transition:background .15s}
.fp-list-item:hover{background:#edf0e7}
.fp-list-item[aria-pressed=true]{background:#e8edfc;border-left-color:#2456f5}
.fp-list-number{font-size:10px;color:#8a9381;align-self:start;padding-top:2px;font-variant-numeric:tabular-nums}
.fp-list-item[aria-pressed=true] .fp-list-number,.fp-list-item[aria-pressed=true] .fp-list-indicator{color:#2456f5}
.fp-list-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
.fp-list-fonts{font-size:10px;font-weight:550;color:#6f7867;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.3}
.fp-list-fonts i{font-style:normal;opacity:.5;margin-inline:3px}
.fp-list-title{font-size:18px;line-height:1.25;color:#252b26;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;letter-spacing:-.025em}
.fp-list-body{font-size:10px;line-height:1.3;color:#7b8373;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fp-list-indicator{font-size:15px;color:#a1a898}
.fp-list-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:8px 12px}
.fp-list-pagination>span{font-size:10px;color:#7b8373;font-variant-numeric:tabular-nums}
.fp-list-pagination>div{display:flex;align-items:center;gap:10px}
.fp-list-pagination>div>span{font-size:10px;min-width:32px;text-align:center;font-variant-numeric:tabular-nums}
.fp-list-pagination button{width:28px;height:28px;font-size:14px}
@keyframes fp-specimen-in{from{opacity:.35;transform:translateX(7px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:900px){.fp-browser{grid-template-columns:minmax(0,1fr)}.fp-list-panel{display:none}.fp-feature-card>.fp-font-info{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.fp-feature-card .fp-specimen h3{font-size:clamp(30px,5.2cqw,42px)}.fp-feature-card .fp-specimen p{font-size:19px}.fp-swipe-hint{font-size:0}.fp-swipe-hint>span{display:block;font-size:10px}}
@media(max-width:620px){
  #font-pairings{padding-block:50px 60px}
  .fp-toolbar{gap:16px}
  .fp-tabs{width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
  .fp-tabs button{font-size:11px;padding:9px 3px}
  .fp-tabs small{display:none}
  .fp-copy-controls{width:100%;justify-content:space-between;gap:10px}
  .fp-copy-controls select{flex:1;max-width:230px}
  .fp-status{font-size:9px;align-items:flex-start;padding-block:16px 12px}
  .fp-status>span:last-child{text-align:right;line-height:1.6;max-width:71%}
  .fp-status a{margin-left:4px}
  .fp-browser{height:580px}
  .fp-feature-column{grid-template-rows:minmax(0,1fr) 44px;gap:10px}
  .fp-feature-paper{padding:24px 24px 18px;gap:18px}
  .fp-card-top{font-size:8px}
  .fp-card-top>span:last-child{font-size:9px}
  .fp-feature-card .fp-specimen h3{font-size:clamp(25px,7.5cqw,32px);margin-bottom:18px}
  .fp-feature-card .fp-specimen p,.fp-feature-card[data-poem="2"] .fp-specimen p{font-size:15px;line-height:1.7}
  .fp-feature-card .fp-specimen>small{font-size:9px;margin-top:18px}
  .fp-feature-card>.fp-font-info{margin-inline:24px;padding-top:16px;grid-template-columns:1fr;gap:7px}
  .fp-feature-card>.fp-font-info>div{flex-wrap:nowrap}
  .fp-feature-card>.fp-font-info strong{font-size:11px}
  .fp-feature-card>.fp-font-info small{font-size:8px}
  .fp-stepper{gap:7px}
  .fp-stepper button{width:40px;height:40px}
  .fp-stepper>span{font-size:11px}
  .fp-swipe-hint>span{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.fp-feature-paper>.fp-specimen{animation:none}.fp-list-item{transition:none}}

/* Soft edge arrows make the swipe direction visible without covering the poem. */
.fp-feature-card{position:relative}
.fp-swipe-arrow{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:48px;padding:0;border:0;border-radius:8px;display:grid;place-items:center;background:transparent;color:#58634e;opacity:.28;z-index:1;transition:opacity .15s,background .15s}
.fp-swipe-arrow-prev{left:4px}
.fp-swipe-arrow-next{right:4px}
.fp-swipe-arrow svg{width:23px;height:23px}
.fp-swipe-arrow:hover:not(:disabled),.fp-swipe-arrow:focus-visible{opacity:.7;background:#ffffff55}
.fp-swipe-arrow:disabled{opacity:.08}
@media(max-width:620px){.fp-swipe-arrow{width:24px;height:44px}.fp-swipe-arrow-prev{left:0}.fp-swipe-arrow-next{right:0}.fp-swipe-arrow svg{width:21px;height:21px}}
@media(prefers-reduced-motion:reduce){.fp-swipe-arrow{transition:none}}

/* Keep the poem card balanced after removing its action row. */
.fp-feature-card>.fp-font-info{padding-bottom:26px}
.fp-copy-controls select{max-width:280px}
@media(max-width:620px){.fp-copy-controls select{max-width:none;width:100%}.fp-feature-card>.fp-font-info{padding-bottom:24px}}

/* One quiet gesture teaches swiping until the first hover, focus or touch. */
.fp-swipe-guide{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;pointer-events:none;color:#394334;display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 20px 12px;border:1px solid #ffffff65;border-radius:16px;background:#f8f9f4bb;backdrop-filter:blur(3px);box-shadow:0 6px 24px #26302208;opacity:.72}
.fp-guide-gesture{position:relative;width:138px;height:66px;display:grid;place-items:center}
.fp-guide-track{position:absolute;left:5px;right:5px;top:23px;height:1px;background:linear-gradient(90deg,transparent,#68765b70,transparent)}
.fp-guide-track:after{content:'';position:absolute;right:7px;top:-3px;width:6px;height:6px;border-top:1px solid #68765b80;border-right:1px solid #68765b80;transform:rotate(45deg)}
.fp-guide-hand{width:61px;height:61px;animation:fp-swipe-teach 2.8s ease-in-out infinite}
.fp-swipe-guide>span{font-size:11px;letter-spacing:-.01em;color:#526148}
@keyframes fp-swipe-teach{0%,12%{transform:translateX(-32px) rotate(-9deg);opacity:0}22%{opacity:.8}65%{transform:translateX(32px) rotate(6deg);opacity:.8}85%,100%{transform:translateX(32px) rotate(6deg);opacity:0}}
.fp-copy-controls{gap:8px;min-width:0}
.fp-copy-controls select{min-width:0;flex:1}
.fp-poem-pin{display:flex;align-items:center;justify-content:center;gap:5px;flex-shrink:0;min-height:36px;padding:8px 11px;border:1px solid #d6dbce;border-radius:4px;background:transparent;font-size:11px;line-height:1.4;color:#68745f;white-space:nowrap}
.fp-poem-pin svg{width:15px;height:15px}
.fp-poem-pin[aria-pressed=true]{background:#e9edff;border-color:#b8c8f7;color:#2456f5}
.fp-swipe-hint{display:flex;flex-direction:column;gap:3px;font-size:10px;line-height:1.4}
.fp-swipe-hint>.fp-auto-status{display:flex;align-items:center;gap:5px;font-size:10px}
.fp-auto-status:before{content:'';width:4px;height:4px;border-radius:50%;background:#9ca593}
.fp-poem-playing .fp-auto-status:before{background:#2456f5}
.fp-swipe-hint>.fp-direction-hint{display:block;font-size:9px;color:#939b8b}
@media(max-width:620px){.fp-poem-pin{min-height:36px;padding:8px 9px;font-size:10px}.fp-copy-controls select{width:auto}.fp-swipe-guide{padding:7px 14px 9px}.fp-guide-gesture{width:118px;height:60px}.fp-guide-hand{width:55px;height:55px}.fp-swipe-guide>span{font-size:10px}.fp-swipe-hint>.fp-auto-status{font-size:9px}.fp-swipe-hint>.fp-direction-hint{font-size:8px}}
@media(prefers-reduced-motion:reduce){.fp-guide-hand{animation:none;opacity:.75;transform:none}.fp-swipe-guide{backdrop-filter:none}}