/* The font library: plain catalogue pages, ready for the final Design art direction. */
.fo{max-width:1180px;margin:auto;padding:clamp(22px,4vw,48px) clamp(16px,3vw,32px) 96px;color:var(--text-primary)}
.fo-hero{max-width:820px;margin:0 0 32px}.fo-eyebrow{margin:0 0 12px;color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.fo-hero h1{margin:0;font-size:clamp(36px,6vw,72px);line-height:1.08;letter-spacing:-.035em;overflow-wrap:anywhere}.fo-hero p:last-child{color:var(--text-secondary);font-size:clamp(16px,2vw,20px);line-height:1.5}
.fo-filters{display:grid;grid-template-columns:minmax(180px,2fr) repeat(3,minmax(120px,1fr)) auto;align-items:end;gap:12px;padding:18px;border:1px solid var(--border);border-radius:18px;background:var(--bg-secondary)}
.fo-filters label,.fo-try{display:grid;gap:7px;color:var(--text-secondary);font-size:13px;font-weight:700}.fo-filters input,.fo-filters select,.fo-try input{width:100%;min-width:0;min-height:44px;padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-primary);color:var(--text-primary);font:inherit;font-size:15px}
.fo-filters button{min-height:44px;padding:9px 18px;border:0;border-radius:10px;background:var(--accent);color:var(--bg-primary);font-weight:800;cursor:pointer}.fo-try{margin:22px 0}.fo-try input{font-weight:400}.fo-count{color:var(--text-secondary);font-size:14px}
.fo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:16px}.fo-card{min-width:0;padding:22px;border:1px solid var(--border);border-radius:18px;background:var(--bg-secondary)}
.fo-card-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;color:var(--text-secondary);font-size:12px;text-transform:capitalize}.fo-card h2{margin:22px 0 12px;font-size:22px}.fo-card h2 a,.fo-pairings a{color:inherit;text-decoration:none}.fo-card h2 a:hover,.fo-pairings a:hover{text-decoration:underline}.fo-sample{min-height:95px;margin:0;font-size:clamp(22px,2.4vw,28px);line-height:1.25;overflow-wrap:anywhere}.fo-meta{margin:18px 0 0;color:var(--text-secondary);font-size:13px}
.fo-back{display:inline-block;margin-bottom:26px;color:var(--accent)}.fo-detail section{margin-top:44px}.fo-detail h2{font-size:clamp(22px,3vw,30px)}.fo-styles{display:grid;gap:12px}.fo-style{min-width:0;padding:16px 20px;border:1px solid var(--border);border-radius:14px;background:var(--bg-secondary)}.fo-style>div{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:14px}.fo-style p{margin:15px 0 2px;font-size:clamp(22px,4vw,42px);line-height:1.3;overflow-wrap:anywhere}
.fo-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.fo-details>div{min-width:0}.fo-details pre{max-width:100%;overflow-x:auto;padding:18px;border:1px solid var(--border);border-radius:12px;background:var(--bg-secondary);font-size:13px}.fo-details p{overflow-wrap:anywhere}.fo-integrity{display:block;margin-top:12px;color:var(--text-secondary);font-size:12px;overflow-wrap:anywhere}.fo-pairings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.fo-pairings article{min-width:0;padding:18px;border:1px solid var(--border);border-radius:14px;background:var(--bg-secondary)}.fo-pairings h3{margin:0 0 10px}.fo-pairings p{margin:0;color:var(--text-secondary);line-height:1.5}
@media(max-width:850px){.fo-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.fo-filters button{grid-column:1/-1}.fo-details{grid-template-columns:1fr}}@media(max-width:550px){.fo-filters{grid-template-columns:1fr}.fo-pairings{grid-template-columns:1fr}}

/* Design pass (Opus, 11-08): the catalogue as a specimen sheet. Each family's name is drawn in itself, two to a row on
   a phone; categories are chips; a family's styles go two to a row with a counted fold; a pairing is drawn as a pair. */
.fo-chips{display:flex;gap:6px;margin:0 0 12px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px}
.fo-chips::-webkit-scrollbar{display:none}
.fo-chips a{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border:1px solid var(--border);border-radius:999px;color:var(--text-secondary);text-decoration:none;font-size:14px;font-weight:650;text-transform:capitalize}
.fo-chips a span{color:var(--text-muted,var(--text-secondary));font-weight:500;font-size:12px}
.fo-chips a[aria-current]{border-color:var(--accent);color:var(--text-primary);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.fo-filters{grid-template-columns:minmax(200px,2fr) repeat(2,minmax(120px,1fr)) auto;padding:12px;gap:10px}
.fo-try{margin:14px 0 6px}
.fo-grid{grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:12px}
.fo-card{padding:0;border-radius:16px;transition:border-color .15s,transform .15s}
.fo-card:hover{border-color:var(--accent)}
.fo-card:active{transform:scale(.99)}
.fo-card-link{display:grid;gap:8px;padding:16px 16px 14px;color:inherit;text-decoration:none;height:100%;box-sizing:border-box}
.fo-card h2{margin:0;font-size:28px;line-height:1.1;font-weight:400;overflow-wrap:anywhere}
.fo-card .fo-sample{min-height:0;font-size:17px;line-height:1.35;color:var(--text-secondary)}
.fo-meta{margin:auto 0 0;font-size:12px;color:var(--text-muted,var(--text-secondary))}
.fo-meta span{text-transform:capitalize}
.fo-n{margin-left:6px;font-size:.6em;font-weight:600;color:var(--text-muted,var(--text-secondary))}
.fo-styles{grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr))}
.fo-style{padding:12px 16px}
.fo-style p{margin:6px 0 0;font-size:22px;line-height:1.25;overflow-wrap:anywhere}
.fo-style>div{font-size:13px;color:var(--text-secondary)}
.fo-style a{color:var(--accent);font-weight:650;text-decoration:none}
.fo-more{margin-top:12px}
.fo-more>summary{cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border:1px solid var(--border);border-radius:999px;font-weight:650;list-style:none}
.fo-more>summary::-webkit-details-marker{display:none}
.fo-more>summary span{color:var(--text-secondary);font-weight:500}
.fo-more[open]>summary{margin-bottom:12px}
.fo-note{color:var(--text-secondary);max-width:70ch}
.fo-pairings{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:12px}
.fo-pairings article{padding:18px;border:1px solid var(--border);border-radius:16px;background:var(--bg-secondary)}
.fo-pair-h{margin:0;font-size:26px;line-height:1.15}
.fo-pair-b{margin:8px 0 12px;font-size:16px;line-height:1.5;color:var(--text-secondary)}
.fo-pair-why{margin:0;font-size:12.5px;color:var(--text-muted,var(--text-secondary))}
@media(max-width:550px){
  .fo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .fo-card-link{padding:12px}
  .fo-card h2{font-size:22px}
  .fo-card .fo-sample{font-size:14px}
  .fo-filters{grid-template-columns:1fr 1fr}
  .fo-filters .fo-q,.fo-filters button{grid-column:1/-1}
  .fo-style p{font-size:19px}
}
/* The selects look like the search field, not like buttons (a theme's button colours reached them on a phone) */
.fo .fo-filters select{appearance:none;-webkit-appearance:none;background:var(--bg-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2396a7c2' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--text-primary);border:1px solid var(--border);padding-right:32px;box-shadow:none}
.fo .fo-filters button{background:transparent;color:var(--text-primary);border:1px solid var(--accent)}
.fo .fo-filters button:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}

/* The self-hosted families (2026-11-12): the same card, one flat set above the catalogue's chips and filters. */
.fo-self{margin:24px 0 42px;padding-bottom:34px;border-bottom:1px solid var(--border)}
.fo-self-head{max-width:78ch;margin:0 0 16px}.fo-self-head h2{margin:0 0 6px;font-size:clamp(22px,3vw,30px)}
.fo-self-head p{margin:0;color:var(--text-secondary);line-height:1.5}
.fo-self-head code{font-size:.92em;overflow-wrap:anywhere}
.fo-self .fo-card-link{cursor:default}
.fo-self .fo-meta a{color:var(--accent);font-weight:650;text-decoration:none}