/* The Brokers Desk: press edition, web. Tokens match the v3 newsletter. */
:root{
  color-scheme: light;
  --paper:#F2EFE7; --white:#FFFFFF; --navy:#102A3A; --teal:#186B95; --gold:#C9A22E;
  --yellow:#FFCC4E; --ink:#1F2A30; --muted:#5B6770; --rule:#CFC9BB;
  --fear:#B3261E; --greed:#0F7A4A;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Helvetica, Arial, sans-serif;
  --mono: "Courier New", Courier, monospace;
  --measure: 68ch;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--sans)}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--navy);outline-offset:2px;box-shadow:0 0 0 5px var(--yellow)}
.footer a:focus-visible,.ticker a:focus-visible{outline-color:var(--yellow);box-shadow:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--white);padding:8px 12px;z-index:10}

/* Paper tag: the signature device */
.tag{display:inline-block;background:var(--white);border:1px solid var(--navy);padding:2px 8px;font:12px/1.4 var(--mono);color:var(--navy);white-space:nowrap}
.tag .dot{color:var(--gold)}
.tag--yellow{background:var(--yellow);border-color:var(--yellow);font-weight:bold}

/* Masthead */
.utility{display:flex;justify-content:space-between;gap:12px;font:13px/1.4 var(--mono);color:var(--muted);padding:12px 0 6px}
.utility a{color:var(--muted)}
.plate{border-top:4px solid var(--navy);border-bottom:1px solid var(--navy);box-shadow:0 -6px 0 -5px var(--navy) inset;padding:14px 0 10px;text-align:center}
.plate a{color:var(--navy);text-decoration:none}
.plate__name{margin:0;font:bold clamp(34px,6vw,56px)/1.05 var(--serif);letter-spacing:-1px;color:var(--navy)}
.dateline{border-bottom:1px solid var(--navy);padding:6px 0;text-align:center;font:13px/1.5 var(--mono);color:var(--navy)}
.nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px;padding:10px 0;border-bottom:1px solid var(--rule);font:15px/1.4 var(--sans)}
.nav a{color:var(--navy);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--gold)}
.nav .nav__cta{background:var(--teal);color:var(--white);padding:4px 12px;border:1px solid var(--navy)}

/* Section head: 3px rule, serif head, optional tag */
.head{border-top:3px solid var(--navy);padding-top:8px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.head h2{margin:0;font:bold 26px/1.2 var(--serif);color:var(--navy)}
section{margin:40px 0}
h1{font:bold clamp(30px,4.6vw,46px)/1.12 var(--serif);color:var(--navy);margin:0}
.deck{font-size:19px;max-width:var(--measure);margin:10px 0 0}
p{max-width:var(--measure)}
.muted{color:var(--muted)}
.small{font-size:14px}

/* Boardroom */
.hero{margin:28px 0 0}
.stage__seats{margin-top:32px}
@media (min-width:900px){
  .stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);grid-template-areas:"intro board" "seats board";column-gap:44px;align-items:start}
  .stage .hero__intro{grid-area:intro}
  .stage .board{grid-area:board;position:sticky;top:20px}
  .stage .stage__seats{grid-area:seats;margin-top:8px}
  .stage .seats li{grid-template-columns:auto 1fr;}
  .stage .seats .btn{grid-column:2;justify-self:start}
}
.hero__intro{display:grid;gap:10px;margin-bottom:18px}
.hero__intro .tag{justify-self:start}
.board{position:relative;margin:0;border:1px solid var(--navy);background:var(--white);padding:6px}
.board__img{width:100%}
.board__caption{font:12px/1.4 var(--mono);color:var(--muted);padding:8px 2px 2px}
.spot{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--white);border:2px solid var(--navy);color:var(--navy);
  font:bold 15px/1 var(--serif);text-decoration:none;cursor:pointer;
  box-shadow:0 0 0 3px rgba(255,204,78,.6)}
.spot:hover,.spot[aria-expanded="true"]{background:var(--yellow)}
.spot--board{width:auto;height:auto;border-radius:0;padding:4px 8px;font:bold 12px/1.3 var(--mono);box-shadow:none;background:var(--yellow)}
.spot--board .s{display:none}
@media (max-width:700px){
  .board{padding:3px;margin:0 -8px}
  .spot{width:30px;height:30px;font-size:14px;box-shadow:0 0 0 3px rgba(255,204,78,.55)}
  .spot--board{width:auto;height:auto;border-radius:0;box-shadow:none;padding:2px 6px;font-size:11px}
  .spot--board .l{display:none}
  .spot--board .s{display:inline}
}
@media (max-width:420px){
  .spot{width:26px;height:26px;font-size:13px;box-shadow:0 0 0 2px rgba(255,204,78,.55)}
  .spot--board{top:40%!important;width:auto;height:auto}
}
@media (prefers-reduced-motion:no-preference){
  .spot{transition:background .15s ease}
}
.panel{position:absolute;z-index:5;width:min(300px,86vw);background:var(--white);border:1px solid var(--navy);border-left:5px solid var(--gold);padding:12px 14px 14px;box-shadow:0 6px 0 -2px rgba(16,42,58,.18)}
.panel[hidden]{display:none}
.panel__k{font:12px/1.4 var(--mono);color:var(--muted);margin:0}
.panel__t{font:bold 19px/1.25 var(--serif);color:var(--navy);margin:4px 0 6px}
.panel__p{font-size:15px;line-height:1.5;margin:0 0 10px}
.panel__close{position:absolute;top:2px;right:2px;width:44px;height:44px;border:0;background:none;font:24px/1 var(--sans);color:var(--navy);cursor:pointer;padding:0}
.panel__k,.panel__t{padding-right:40px}
.btn{display:inline-block;background:var(--teal);color:var(--white);border:1px solid var(--navy);padding:10px 18px;font:bold 16px/1.2 var(--sans);text-decoration:none}
.btn:hover{background:#125878}
.btn--ghost{background:var(--white);color:var(--navy)}
.btn[aria-disabled="true"]{background:var(--white);color:var(--navy);border:1px dashed var(--navy);cursor:not-allowed}

/* Seat list: the accessible equivalent of the hotspots */
.seats{list-style:none;margin:18px 0 0;padding:0;border:1px solid var(--navy);background:var(--white)}
.seats li{display:grid;grid-template-columns:auto 1fr auto;gap:6px 16px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--rule)}
.seats li:last-child{border-bottom:0}
.seats li:target{background:#FFF7DD}
.seats .n{font:13px/1 var(--mono);color:var(--muted)}
.seats h3{margin:0;font:bold 19px/1.25 var(--serif);color:var(--navy)}
.seats p{margin:2px 0 0;font-size:15px}
@media (max-width:640px){.seats li{grid-template-columns:1fr}.seats .n{order:-1}}

/* Ticker */
.ticker{background:var(--navy);padding:12px 12px 6px;display:flex;flex-wrap:wrap;gap:0 6px}
.ticker .tag{margin:0 0 6px;border-color:var(--white)}

/* Rates table */
.rates{width:100%;border-collapse:collapse;margin-top:10px;font-size:16px}
.rates th,.rates td{padding:11px 0 11px 8px;border-bottom:1px solid var(--rule);text-align:right}
.rates thead th{font:bold 13px/1.3 var(--mono);color:var(--muted);border-bottom:2px solid var(--navy)}
.rates th[scope="row"],.rates thead th:first-child{text-align:left;font-weight:normal;padding-left:0}
.rates thead th:first-child{font-weight:bold}
.rates .num{font:17px/1.2 var(--serif);color:var(--navy);white-space:nowrap}
.rates .chg{white-space:nowrap}
.rates .flat{color:var(--muted)}
.note{background:var(--white);border:1px solid var(--navy);border-left:5px solid var(--gold);padding:12px 16px;margin:20px 0;max-width:var(--measure)}
.note .fig{font:bold 28px/1.2 var(--serif);color:var(--navy);margin:2px 0}

/* Index */
.index-grid{display:grid;grid-template-columns:minmax(0,520px) 1fr;gap:32px;align-items:start}
@media (max-width:760px){.index-grid{grid-template-columns:1fr}}
.score{font:bold 56px/1 var(--serif);color:var(--teal);margin:0 0 16px}
.score em{font:italic 24px/1 var(--serif);color:var(--navy);padding-left:8px}

/* Forms */
.form{background:var(--white);border:1px solid var(--navy);padding:22px;max-width:620px}
.field{margin:0 0 16px}
.field label{display:block;font-weight:bold;margin-bottom:4px}
.field input[type=email],.field input[type=text],.field input[type=tel],.field select{width:100%;min-height:46px;font:17px/1.4 var(--sans);padding:10px;border:1px solid var(--muted);background:var(--white);color:var(--ink)}
.consent{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;border:1px solid var(--rule);padding:12px;background:var(--paper)}
.consent input{width:22px;height:22px;margin-top:3px}
.consent label{font-weight:normal;font-size:15px;line-height:1.55}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.alert{border:1px solid var(--fear);border-left:5px solid var(--fear);background:var(--white);padding:10px 14px;margin:0 0 16px}
.pending{background:#FFF1C2;color:#102A3A;padding:0 3px}

/* Footer */
.footer{background:var(--navy);color:#B9C6CF;margin-top:56px;padding:28px 0;font-size:14px;line-height:1.6}
.footer a{color:var(--white)}
.footer .name{font:bold 20px/1.2 var(--serif);color:var(--white);margin:0 0 8px}
.footer p{margin:4px 0;max-width:none}
