/* /featured: the month's score on paper (a score's first page), the gallery of first pages on navy, and the
   Call for Scores closing the page on paper, torn where it meets the footer. The bar and its tokens are the
   company home's (company.css); values from the brand kit (tokens.json). Layout of the form after
   linear.app/contact; field errors after Vercel's Geist; gallery cards after J.W. Pepper's covers. */
.co .fs{--paper-rule:rgba(23,25,30,.14);--well:#080d19;--r-paper:3px;--r-small:6px;--r-cta:10px;--r-panel:16px;
  --shadow-shot:0 30px 70px -34px rgba(11,17,32,.7)}
.co .fs-wrap{max-width:1240px;margin:0 auto;padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}
@media (max-width:720px){ .co .fs-wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))} }
.co .fs .ar{width:15px;height:15px;flex:none;transition:transform 400ms var(--spring)}
.co .fs a:hover > .ar,.co .fs-card:hover .go .ar{transform:translateX(4px)}
.co .fs :is(.fs-top,.fs-call) :focus-visible{outline-color:var(--paper-accent)}
/* the page's own display rules (flex, grid) would otherwise show what the form hides */
.co .fs [hidden]{display:none}

/* ---------- the month's score ---------- */
.co .fs-top{background:var(--paper);color:var(--paper-ink);padding:92px 0 104px}
.co .fs-split{display:grid;grid-template-columns:1.12fr .88fr;gap:64px;align-items:start}
.co .fs-lead{position:sticky;top:120px;min-width:0}
.co .fs-tempo{margin:0;font-size:15px;color:var(--paper-2)}
.co .fs-tempo i{font-family:var(--display);font-size:21px;font-weight:500;color:var(--paper-ink)}
.co .fs-top h1{margin:34px 0 0;font-family:var(--display);font-weight:700;font-size:clamp(54px,7.4vw,104px);line-height:.92;letter-spacing:-2.5px;overflow-wrap:break-word}
.co .fs-top h1 em{font-weight:600;color:var(--paper-accent)}
/* the accent under the work's title, about a quarter of its size (Richard, 13 Nov) */
.co .fs-sung{margin:18px 0 0;font-family:var(--display);font-style:italic;font-weight:600;font-size:clamp(22px,2.2vw,30px);line-height:1.1;color:var(--paper-accent)}
@media (prefers-reduced-motion:no-preference){
  .co .fs-sung{animation:fs-pen 1100ms linear 300ms both}
  @keyframes fs-pen{from{clip-path:inset(-30% 100% -40% -5%)}to{clip-path:inset(-30% -5% -40% -5%)}}
}
.co .fs-credit{margin:26px 0 0;font-size:17px;color:var(--paper-2)}
.co .fs-credit b{color:var(--paper-ink);font-weight:600}
.co .fs-side{display:grid;gap:28px;min-width:0}
.co .fs-intro{margin:0;font-size:18px;line-height:1.6;color:var(--paper-ink);max-width:34ch}
.co .fs-clip{margin:0;display:grid;gap:10px}
.co .fs-vid{position:relative;display:block;width:100%;aspect-ratio:16/9;max-width:100%;padding:0;border:0;border-radius:var(--r-small);overflow:hidden;background:var(--paper-ink);box-shadow:0 0 0 1px var(--paper-rule);cursor:pointer;color:var(--fg)}
.co .fs-vid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 900ms var(--spring)}
.co .fs-vid:hover img{transform:scale(1.015)}
.co .fs-vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.co .fs-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;display:grid;place-items:center;background:rgba(11,17,32,.78);box-shadow:inset 0 0 0 1.5px rgba(241,245,249,.75);transition:background-color 300ms,color 300ms,box-shadow 300ms}
.co .fs-play::before{content:"";border-left:13px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.co .fs-vid:hover .fs-play{background:var(--fg);color:var(--paper-ink);box-shadow:none}
.co .fs-clip figcaption{display:flex;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;font-size:13.5px;color:var(--paper-2)}
.co .fs-clip figcaption a{color:var(--paper-ink);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(23,25,30,.35)}
.co .fs-note{margin:0;display:grid;grid-template-columns:72px 1fr;gap:18px;padding-top:24px;border-top:1px solid var(--paper-rule)}
.co .fs-note.no-photo{grid-template-columns:1fr}
.co .fs-portrait{width:72px;height:90px;border-radius:var(--r-paper);object-fit:cover;object-position:50% 20%}
.co .fs-note p{margin:0;font-family:var(--display);font-size:21px;line-height:1.5;font-weight:500;color:var(--paper-ink)}
.co .fs-note p + p{margin-top:12px}
.co .fs-note cite{display:block;margin-top:12px;font-style:normal;font-size:13.5px;color:var(--paper-2)}
.co .fs-note details{margin-top:12px}
.co .fs-note summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--paper-ink)}
.co .fs-note summary::-webkit-details-marker{display:none}
.co .fs-note summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;rotate:45deg;translate:0 -2px;transition:rotate 300ms var(--spring)}
.co .fs-note details[open] summary::after{rotate:225deg;translate:0 2px}
.co .fs-note details[open] summary{margin-bottom:12px}
.co .fs-acts{display:flex;gap:12px;flex-wrap:wrap}
.co .fs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 26px;border:0;border-radius:var(--r-cta);font:600 15px/1 var(--ui);cursor:pointer;transition:background-color 200ms,color 200ms,box-shadow 200ms}
.co .fs-btn.ink{background:var(--paper-ink);color:var(--paper)}
.co .fs-btn.ink:hover{background:#2a2d34}
.co .fs-btn.line{background:none;box-shadow:inset 0 0 0 1.5px var(--paper-ink);color:var(--paper-ink)}
.co .fs-btn.line:hover{background:var(--paper-ink);color:var(--paper)}
.co .fs-btn .ar{width:14px;height:14px}
.co .fs-latest{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--paper-ink)}

/* ---------- the gallery: each feature as its first page ---------- */
.co .fs-gallery{padding:112px 0}
.co .fs-two{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(30px,3.3vw,46px);line-height:1.08;letter-spacing:-.018em;max-width:30ch}
.co .fs-two .t2{color:var(--muted)}
.co .fs-cards{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:44px 24px}
.co .fs-cards li{display:flex;min-width:0}
.co .fs-card{flex:1;display:grid;gap:18px;align-content:start;min-width:0;color:var(--fg)}
.co .fs-card .pg{display:block;aspect-ratio:520/676;max-width:100%;border-radius:var(--r-paper);overflow:hidden;background:var(--paper);transition:transform 584ms var(--spring),box-shadow 584ms var(--spring),border-color 300ms}
.co .fs-card .pg img{width:100%;height:100%;object-fit:cover;display:block}
.co .fs-card:hover .pg{transform:translateY(-4px);box-shadow:var(--shadow-shot)}
.co .fs-card .tp{height:100%;display:grid;align-content:center;gap:12px;padding:24px 22px;color:var(--paper-ink)}
.co .fs-card .tp-t{font-family:var(--display);font-size:30px;line-height:1.05;font-weight:600;text-align:center;text-wrap:balance}
.co .fs-card .tp-c{font-family:var(--display);font-style:italic;font-size:20px;line-height:1.2;text-align:right}
.co .fs-card .meta{display:grid;gap:3px}
.co .fs-card .m{font-size:13.5px;color:var(--muted)}
.co .fs-card .t{margin-top:4px;font-family:var(--display);font-size:26px;line-height:1.1;font-weight:600}
.co .fs-card .c{font-size:15px;line-height:1.5;color:var(--fg-2)}
.co .fs-card .go{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;font-weight:600}
.co .fs-card.call .pg{background:transparent;border:1.5px dashed color-mix(in srgb,var(--muted) 55%,transparent)}
.co .fs-card.call:hover .pg{box-shadow:none;border-color:var(--fg-3)}
.co .fs-card.call .m{font-weight:600;color:var(--fg-2)}
.co .fs-card .blank{height:100%;display:grid;place-content:center;justify-items:center;gap:14px;padding:24px}
.co .fs-card .ring{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:1.5px solid color-mix(in srgb,var(--muted) 55%,transparent);color:var(--fg-2);transition:border-color 300ms,color 300ms}
.co .fs-card .ring svg{width:22px;height:22px}
.co .fs-card .bt{font-family:var(--display);font-style:italic;font-size:22px;line-height:1.2;color:var(--fg-3)}
.co .fs-card.call:hover .ring{border-color:var(--fg-3);color:var(--fg)}

/* ---------- Call for Scores: the last page ---------- */
.co .fs-call{background:var(--paper);color:var(--paper-ink);padding:112px 0 120px}
.co .fs-split2{display:grid;grid-template-columns:1.08fr .92fr;align-items:stretch}
.co .fs-split2 > :first-child{padding-right:64px}
.co .fs-split2 > :last-child{padding-left:56px;border-left:1px solid var(--paper-rule)}
.co .fs-call h2{margin:0;font-family:var(--display);font-size:clamp(40px,4.6vw,52px);line-height:1.02;font-weight:500;letter-spacing:-.02em}
.co .fs-call .lede{margin:20px 0 0;font-size:18px;line-height:1.6;color:var(--paper-2);max-width:40ch}
.co .fs-points{list-style:none;margin:36px 0 0;padding:0;max-width:46ch}
.co .fs-points li{padding:16px 0;border-top:1px solid var(--paper-rule);font-size:16px;color:var(--paper-2)}
.co .fs-points li:last-child{border-bottom:1px solid var(--paper-rule)}
.co .fs-points b{color:var(--paper-ink);font-weight:600}
.co .fs-form{display:grid;gap:24px;max-width:520px}
.co .fs-field{display:grid;gap:8px;min-width:0}
.co .fs-field label{font-size:14px;font-weight:600}
.co .fs-field .hint{margin:-2px 0 0;font-size:13.5px;color:var(--paper-2)}
.co .fs-field input{height:44px;width:100%;padding:0 12px;border-radius:var(--r-small);background:transparent;border:1px solid color-mix(in srgb,var(--paper-ink) 34%,transparent);font:400 16px var(--ui);color:var(--paper-ink);transition:border-color 200ms,box-shadow 200ms}
.co .fs-field input::placeholder{color:color-mix(in srgb,var(--paper-2) 75%,transparent)}
.co .fs-field input:hover{border-color:color-mix(in srgb,var(--paper-ink) 55%,transparent)}
.co .fs-field input:focus{outline:none;border-color:var(--paper-ink);box-shadow:0 0 0 1px var(--paper-ink)}
.co .fs-field input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger),0 0 0 4px color-mix(in srgb,var(--danger) 16%,transparent)}
.co .fs-ferr,.co .fs-err{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:14px;line-height:1.45;color:var(--paper-ink)}
.co .fs-err{font-size:15px;font-weight:500}
.co .fs-ferr svg,.co .fs-err svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--danger)}
.co .fs-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.co .fs-agree{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;padding-top:4px;font-size:15px;line-height:1.5}
.co .fs-agree input{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:1px 0 0;border-radius:5px;border:1.5px solid var(--paper-ink);display:grid;place-items:center;cursor:pointer;background:transparent}
.co .fs-agree input:checked{background:var(--paper-ink)}
.co .fs-agree input:checked::after{content:"";width:5px;height:10px;border-right:2px solid var(--paper);border-bottom:2px solid var(--paper);rotate:45deg;translate:0 -1px}
.co .fs-agree input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
.co .fs-agree button{all:unset;cursor:pointer;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.co .fs-agree button:focus-visible{outline:2px solid var(--paper-accent);outline-offset:2px;border-radius:2px}
.co .fs-send{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding-top:6px}
.co .fs-send .fs-btn[disabled]{opacity:.6;cursor:default}
.co .fs-call .fine{margin:0;font-size:13.5px;line-height:1.55;color:var(--paper-2);max-width:44ch}
.co .fs-call .fine a{color:var(--paper-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.co .fs-gate{display:grid;gap:22px;max-width:520px;padding-top:4px}
.co .fs-gate .lead{margin:0;font-size:18px;line-height:1.6;color:var(--paper-2)}
.co .fs-gate .lead b{color:var(--paper-ink);font-weight:600}
.co .fs-call .fine b{color:var(--paper-ink);font-weight:600;overflow-wrap:anywhere}
.co .fs-done{max-width:520px;padding-top:4px}
.co .fs-done:focus{outline:none}
.co .fs-done h3{margin:0;font-family:var(--display);font-size:44px;line-height:1;font-weight:500;letter-spacing:-.02em}
.co .fs-done p{margin:14px 0 0;font-size:18px;line-height:1.6;color:var(--paper-2)}
.co .fs-done a{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:15px;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media (prefers-reduced-motion:no-preference){ .co .fs-done:not([hidden]){animation:fs-rise 584ms var(--spring) both} @keyframes fs-rise{from{opacity:0;translate:0 10px}} }
/* the paper torn where it meets the footer (the brand kit's deckle tile) */
.co .fs-deckle{height:18px;background:var(--paper);-webkit-mask:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="160" height="14" viewBox="0 0 160 14" preserveAspectRatio="none"%3E%3Cpath d="M0 0H160V7.0 L156 5.0 L153 8.2 L148 9.0 L143 7.7 L138 4.7 L134 9.4 L130 6.6 L124 7.3 L119 7.0 L112 5.6 L105 7.9 L102 4.8 L97 8.4 L90 4.9 L86 6.2 L79 7.8 L75 6.1 L71 7.9 L68 10.6 L65 8.1 L58 10.5 L51 8.4 L47 5.0 L40 4.6 L34 4.8 L30 7.0 L24 4.4 L20 10.2 L17 6.6 L14 9.6 L11 8.5 L5 10.5 L0 7.0Z" fill="%23000"/%3E%3C/svg%3E') repeat-x 0 0/200px 18px;mask:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="160" height="14" viewBox="0 0 160 14" preserveAspectRatio="none"%3E%3Cpath d="M0 0H160V7.0 L156 5.0 L153 8.2 L148 9.0 L143 7.7 L138 4.7 L134 9.4 L130 6.6 L124 7.3 L119 7.0 L112 5.6 L105 7.9 L102 4.8 L97 8.4 L90 4.9 L86 6.2 L79 7.8 L75 6.1 L71 7.9 L68 10.6 L65 8.1 L58 10.5 L51 8.4 L47 5.0 L40 4.6 L34 4.8 L30 7.0 L24 4.4 L20 10.2 L17 6.6 L14 9.6 L11 8.5 L5 10.5 L0 7.0Z" fill="%23000"/%3E%3C/svg%3E') repeat-x 0 0/200px 18px}

.co .fs-terms{width:min(560px,calc(100vw - 32px));padding:32px;border:0;border-radius:var(--r-panel);background:var(--paper);color:var(--paper-ink);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.co .fs-terms::backdrop{background:rgba(8,13,25,.6)}
.co .fs-terms h3{margin:0;font-family:var(--display);font-size:34px;line-height:1.05;font-weight:500;letter-spacing:-.01em}
.co .fs-terms p{margin:16px 0 0;font-size:16px;line-height:1.6}
.co .fs-terms .fs-btn{margin-top:24px;height:44px}

@media (max-width:900px){
  .co .fs-split{grid-template-columns:1fr;gap:40px}
  .co .fs-lead{position:static}
  .co .fs-split2{grid-template-columns:1fr}
  .co .fs-split2 > :first-child{padding-right:0}
  .co .fs-split2 > :last-child{padding:40px 0 0;margin-top:40px;border-left:0;border-top:1px solid var(--paper-rule)}
}
@media (max-width:720px){
  .co .fs-top{padding:56px 0 72px}
  .co .fs-top h1{letter-spacing:-1.5px;margin-top:24px}
  .co .fs-gallery{padding:72px 0}
  .co .fs-call{padding:72px 0 80px}
  .co .fs-note p{font-size:20px}
  .co .fs-acts .fs-btn{flex:1 1 auto}
  .co .fs-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px}
  .co .fs-card .t{font-size:21px}
  .co .fs-card .c{font-size:14px}
  .co .fs-card .tp-t{font-size:22px}
}
