.v16-calls{
  /* The four values the mockup uses that the V16 sheet has no token for.
     Declared once, here, so no rule below carries a raw hex. */
  --wc-card:#ffffff;          /* the pilot card, a true white against the cream */
  --wc-card-line:#ddd6c4;     /* its border */
  --wc-pilot-tag:#a8621a;     /* the "You, the pilot" tag, the dim glow */
  --wc-pilot-ink:#000d1a;     /* the spoken line, one step darker than --ink */
  --wc-on-night:rgba(253,247,234,.86);
  --wc-on-night-soft:rgba(253,247,234,.62);
  --wc-on-night-faint:rgba(253,247,234,.5);
  border-radius:inherit;overflow:hidden;
  font-family:"Inter",system-ui,sans-serif;font-weight:400;font-size:14px;line-height:1.5;color:var(--ink)}
.v16-calls h1,.v16-calls h2,.v16-calls h3{margin:0;font-weight:500;letter-spacing:-.03em;line-height:1.08;
  text-wrap:balance;font-family:"Inter",system-ui,sans-serif}
.v16-calls p{margin:0}

.v16-calls .wc-wrap{max-width:820px;margin:0 auto;padding:0 30px}
.v16-calls .wc-kick{font-family:"Inter",sans-serif;font-weight:500;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--glow)}
.v16-calls .wc-kick a{color:inherit;text-decoration:none}
.v16-calls .wc-focal{font-size:40px;font-weight:600;letter-spacing:-.035em;margin-top:14px}
.v16-calls .wc-herosub{font-size:14px;color:var(--wc-on-night-soft);margin-top:16px;max-width:52ch;line-height:1.6}

/* the navy band: the call header, and the same band on the two index pages */
.v16-calls .wc-hero{background:var(--night);color:var(--cream);padding:44px 30px 40px}
.v16-calls .wc-hero .wc-focal{color:var(--cream);max-width:20ch}

.v16-calls .wc-blk{margin:44px 0 0}
.v16-calls .wc-blkhd,.v16-calls .wc-panelhd{display:flex;align-items:baseline;gap:14px;padding-bottom:14px;
  border-bottom:2px solid var(--ink)}
.v16-calls .wc-blkhd h2,.v16-calls .wc-panelhd h2{font-size:18px;letter-spacing:-.01em}
.v16-calls .wc-blkhd .wc-c,.v16-calls .wc-panelhd .wc-c{margin-left:auto;font-family:"Inter",sans-serif;font-weight:500;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}

/* the exchange */
.v16-calls .wc-turns{margin-top:22px}
.v16-calls .wc-turn{display:flex;gap:14px;margin-bottom:18px}
.v16-calls .wc-turn .wc-tno{flex:0 0 26px;font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink-faint);
  padding-top:16px;letter-spacing:.06em}
.v16-calls .wc-turn .wc-bub{flex:1;border-radius:14px;padding:14px 18px 16px}
.v16-calls .wc-turn .wc-tag{display:block;font-family:"Inter",sans-serif;font-weight:500;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:7px}
.v16-calls .wc-turn.wc-p .wc-bub{background:var(--wc-card);border:1px solid var(--wc-card-line);
  box-shadow:0 2px 3px rgba(13,27,42,.07),0 10px 22px rgba(13,27,42,.07)}
.v16-calls .wc-turn.wc-p .wc-tag{color:var(--wc-pilot-tag)}
.v16-calls .wc-turn.wc-p .wc-say{font-size:18px;line-height:1.5;color:var(--wc-pilot-ink);font-weight:500}
.v16-calls .wc-turn.wc-a{margin-left:64px}
.v16-calls .wc-turn.wc-a .wc-bub{background:var(--night)}
.v16-calls .wc-turn.wc-a .wc-tag{color:var(--wc-on-night-faint)}
.v16-calls .wc-turn.wc-a .wc-say{font-size:14px;line-height:1.55;color:var(--wc-on-night)}

/* "More in this section", and the same list on the section and library pages */
.v16-calls .wc-panel{background:var(--tint);border-radius:20px;padding:24px 26px 12px}
.v16-calls .wc-panel .wc-panelhd{border-bottom-color:rgba(13,27,42,.55)}
.v16-calls .wc-clist{list-style:none;margin:0;padding:0}
.v16-calls .wc-clist li{padding:0;border-bottom:1px solid rgba(13,27,42,.09)}
.v16-calls .wc-clist li:last-child{border-bottom:0}
.v16-calls .wc-clist a{display:flex;gap:16px;align-items:baseline;padding:15px 0;text-decoration:none;color:inherit}
.v16-calls .wc-clist .wc-n{flex:1;font-size:14px}
.v16-calls .wc-clist .wc-t{font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink-faint);
  white-space:nowrap;letter-spacing:.08em}

/* previous and next */
.v16-calls .wc-pager{display:flex;gap:14px;margin:34px 0 44px}
.v16-calls .wc-pg{flex:1;text-align:center;padding:16px;border-radius:999px;background:var(--card);
  border:1px solid var(--line);font-size:14px;color:var(--ink-soft);text-decoration:none;display:block}
.v16-calls .wc-pg.wc-pgn{background:var(--ink);color:var(--cream);border-color:var(--ink);font-weight:600}

/* the library home and the section page: the intro measure, then the rows */
.v16-calls .wc-intro{font-size:18px;line-height:1.6;color:var(--ink-soft);margin-top:26px;max-width:60ch}
.v16-calls .wc-sections{margin:34px 0 44px;display:flex;flex-direction:column;gap:14px}
.v16-calls .wc-srow{display:block;background:var(--night);color:var(--cream);border-radius:20px;
  padding:24px 26px;text-decoration:none}
.v16-calls .wc-srowhd{display:flex;align-items:baseline;gap:16px}
.v16-calls .wc-srowhd h2{font-size:22px;color:var(--cream);flex:1}
.v16-calls .wc-cnt{font-family:"Inter",sans-serif;font-weight:500;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--glow)}
.v16-calls .wc-srow p{margin-top:12px;font-size:14px;line-height:1.6;color:var(--wc-on-night-soft);max-width:58ch}

@media(max-width:640px){
  .v16-calls .wc-wrap{padding:0 18px}
  .v16-calls .wc-hero{padding:30px 20px 28px}
  .v16-calls .wc-focal{font-size:31px}
  .v16-calls .wc-turn.wc-a{margin-left:26px}
  .v16-calls .wc-turn .wc-tno{flex:0 0 22px}
  .v16-calls .wc-srow{padding:22px 20px}
  .v16-calls .wc-srowhd h2{font-size:20px}
}