/* Brand kit — swatches in the project's own colours (--sw, set per swatch from the admin's palette: content, not
   site styling), their contrast grades, the share of use as one bar, and type specimens with a tester. */
.wrk-pal__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:clamp(10px,1.2vw,16px)}
.wrk-sw{display:flex;flex-direction:column;min-width:0;border-radius:var(--r-lg);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.wrk-sw__chip{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;min-height:clamp(150px,15vw,210px);padding:18px;background:var(--sw);
  box-shadow:inset 0 -1px 0 var(--line)}
.wrk-sw--dark .wrk-sw__chip{color:var(--on-ink)}
.wrk-sw--light .wrk-sw__chip{color:var(--ink)}
.wrk-sw__nm{font-family:var(--f-h);font-size:clamp(1.05rem,1.4vw,1.25rem);font-weight:500;letter-spacing:-.01em}
.wrk-sw__hex{font-family:var(--f);font-size:var(--t-xs);letter-spacing:.06em;user-select:all}
.wrk-sw__copy{position:absolute;right:12px;top:12px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:inherit;
  box-shadow:inset 0 0 0 1px currentColor;opacity:.75;transition:opacity var(--d1) var(--e-io),transform var(--d1) var(--e-io)}
.wrk-sw__copy:hover,.wrk-sw__copy:focus-visible{opacity:1}
.wrk-sw__copy:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.wrk-sw__ci{position:relative;width:13px;height:15px;border:1.6px solid currentColor;border-radius:3px}
.wrk-sw__ci::before{content:"";position:absolute;left:-6px;top:-5px;width:13px;height:15px;border-left:1.6px solid currentColor;border-top:1.6px solid currentColor;border-radius:3px 0 0 0}
.wrk-sw__copy.is-done .wrk-sw__ci{width:14px;height:8px;border:0;border-left:1.8px solid currentColor;border-bottom:1.8px solid currentColor;border-radius:0;transform:rotate(-45deg) translate(1px,-2px)}
.wrk-sw__copy.is-done .wrk-sw__ci::before{display:none}
.wrk-sw__info{display:flex;flex-direction:column;gap:10px;padding:16px 18px 18px}
.wrk-sw__role{font-size:var(--t-sm);line-height:1.5;color:var(--ink)}
.wrk-sw__ct{margin:0;display:grid;gap:6px}
.wrk-sw__ct>div{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 10px}
.wrk-sw__ct dt{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.06em;color:var(--muted)}
.wrk-sw__ct dd{margin:0 0 0 auto;display:flex;align-items:center;gap:8px;white-space:nowrap}
.wrk-sw__r{font-family:var(--f);font-size:var(--t-xs);color:var(--ink);font-variant-numeric:tabular-nums}
.wrk-grade{display:inline-flex;align-items:center;min-height:20px;padding:1px 7px;border-radius:var(--r-xs);font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.04em;
  background:var(--paper-3);color:var(--muted)}
.wrk-grade--aaa,.wrk-grade--aa{background:var(--blue-wash);color:var(--blue-d)}
.wrk-grade--fails{background:var(--paper-4);color:var(--faint)}

.wrk-share{margin:clamp(24px,2.6vw,36px) 0 0}
.wrk-share__bar{display:flex;height:42px;border-radius:var(--r-sm);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.wrk-share__bar i{position:relative;display:flex;align-items:center;justify-content:flex-start;flex:0 0 calc(var(--p) * 100%);min-width:0;padding:0 10px;background:var(--sw);color:var(--ink)}
.wrk-share__bar i.is-dark{color:var(--on-ink)}
.wrk-share__bar b{font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.04em;white-space:nowrap;overflow:hidden}
.wrk-share__cap{margin-top:12px}
.wrk-share__cap .wrk-kicker{margin:0}

/* type */
.wrk-type{margin-top:clamp(56px,6vw,96px)}
.wrk-pal + .wrk-type{padding-top:clamp(40px,4vw,56px);border-top:1px solid var(--line)}
.wrk-type__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:18px}
.wrk-type__head .wrk-kicker{margin:0}
.wrk-type__tester{display:flex;align-items:center;gap:8px;flex:0 1 460px}
.wrk-type__tester input{flex:1;min-width:0;height:44px;padding:0 18px;border:0;border-radius:var(--r-pill);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-3);
  font-family:var(--f-b);font-size:var(--t-sm);color:var(--ink)}
.wrk-type__tester input::placeholder{color:var(--faint)}
.wrk-type__tester input:focus{outline:2px solid var(--blue);outline-offset:2px}
.wrk-type__reset{height:44px;padding:0 16px;border-radius:var(--r-pill);font-size:var(--t-xs);font-weight:500;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-3);cursor:pointer}
.wrk-type__reset[hidden]{display:none}
.wrk-type__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(10px,1.2vw,16px)}
.wrk-spec{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,2.4vw,32px);align-items:start;padding:clamp(22px,2.4vw,32px);border-radius:var(--r-lg);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.wrk-spec__aa{font-size:clamp(3.6rem,7vw,6.2rem);line-height:.9;letter-spacing:0;color:var(--ink)}
.wrk-face--display .wrk-spec__aa{letter-spacing:-.03em}          /* tight tracking on the display face (Outfit) only — Montserrat and mono stay at 0 */
.wrk-spec__body{display:flex;flex-direction:column;gap:10px;min-width:0}
/* role and weights as items; the separator trails the item before it, so a wrapped line never starts with a dot */
.wrk-spec__meta{display:flex;flex-wrap:wrap;gap:4px 0;font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.wrk-spec__meta span{white-space:nowrap}
.wrk-spec__meta span:not(:last-child)::after{content:"·";margin:0 .8em;color:var(--faint)}
.wrk-spec__fam{font-family:var(--f-h);font-size:var(--t-h3);font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.wrk-spec__sample{font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.wrk-spec__glyphs{font-size:var(--t-sm);line-height:1.5;letter-spacing:.02em;color:var(--faint);overflow-wrap:anywhere}
.wrk-face--display .wrk-spec__aa,.wrk-face--display .wrk-spec__sample,.wrk-face--display .wrk-spec__glyphs{font-family:var(--f-h);font-weight:500}
.wrk-face--text .wrk-spec__aa,.wrk-face--text .wrk-spec__sample,.wrk-face--text .wrk-spec__glyphs{font-family:var(--f-b)}
.wrk-face--mono .wrk-spec__aa,.wrk-face--mono .wrk-spec__sample,.wrk-face--mono .wrk-spec__glyphs{font-family:var(--f)}
.wrk-face--mono .wrk-spec__sample{font-size:clamp(1rem,1.4vw,1.25rem)}
.wrk-type__note{margin-top:14px;font-size:var(--t-xs);line-height:1.6;color:var(--muted)}

@media (max-width:640px){
  .wrk-pal__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wrk-sw__chip{min-height:140px;padding:14px}
  .wrk-sw__info{padding:12px 14px 14px}
  .wrk-sw__ct>div{flex-direction:column;align-items:flex-start;gap:2px}
  .wrk-share__bar b{display:none}
  .wrk-spec{grid-template-columns:minmax(0,1fr)}
  .wrk-type__tester{flex-basis:100%}
}