/* THE BOARDROOM on PERKS (APPROVALS items 53 to 56, 3 Nov 2026; comps BR1-F1a-perks-join and BR1-F1b-perks-member):
   the rank plate with the gold BOARDROOM badge and the panel, drawn by office-boardroom.js for 10 million $QUIT or more.
   The office's riveted plates and keys, a fine gold frame inside the panel, the site's gold medallions (runtime/go/art,
   placed, never drawn; the ones on black sit on the plate with lighten, so their black square takes the plate's colour)
   and the badge's gold from the office's own key art, tinted as the holder rank plate is (office-setup.css). */
@font-face{font-family:"House Serif";src:url(/runtime/go/art/playfair-display-latin-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}
.qo-holder-perks-page>.qo-br-plate,.qo-holder-perks-page>.qo-br{grid-column:1/-1;min-height:0}
.qo .qo-br-plate{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding:18px 20px}
/* the rank on one line when it fits beside the badge; the badge goes under it when it does not */
.qo-br-rank{flex:1 1 auto;min-width:0}
.qo .qo-br-title{display:block;color:var(--o-green);font:700 clamp(26px,3vw,48px)/1.1 var(--o-display);overflow-wrap:normal;word-break:normal}
.qo .qo-br-figure{margin:8px 0 0;color:var(--o-ink);font:400 clamp(18px,1.6vw,26px)/1.3 var(--o-body);white-space:nowrap}
.qo-br-badge{flex:none;display:inline-flex;align-items:center;gap:4px;margin-left:auto}
.qo-br-badge-key{width:60px;height:60px;mix-blend-mode:lighten}
.qo-br-badge-plate{position:relative;isolation:isolate;display:inline-flex;align-items:center;min-height:58px;padding:6px 20px 9px;color:#171004;font:700 clamp(18px,1.7vw,26px)/1 "House Serif",Georgia,serif;letter-spacing:.02em;white-space:nowrap}
.qo-br-badge-plate::before{content:"";position:absolute;inset:0;z-index:-1;border:solid transparent;border-width:8px 9px 11px;border-image:url(/runtime/quit/deck-art/key-orange.webp) 22 24 34 fill/8px 9px 11px stretch;filter:hue-rotate(24deg) saturate(1.05) brightness(1.18)}

/* The panel: a gold frame inside the plate. */
.qo .qo-br{padding:14px}
.qo-br-frame{padding:22px 22px 24px;border:2px solid #d9a93c;box-shadow:inset 0 0 0 4px #001008,inset 0 0 0 5px #7a5a1c}
.qo .qo-br-head{margin:0;color:#ffcd36;font:700 clamp(34px,3.4vw,58px)/1.05 var(--o-display);letter-spacing:.01em;overflow-wrap:normal;word-break:normal}
.qo .qo-br-lede{margin:12px 0 0;color:var(--o-ink);font:400 19px/1.5 var(--o-body)}
.qo-br-lede>span{display:block}
.qo-br-medal{flex:none;width:72px;height:72px;object-fit:contain;mix-blend-mode:lighten}
.qo-br-perks{margin:20px 0 0;padding:0;list-style:none;border-top:1px solid #345f42}
.qo-br-perks>li{display:flex;align-items:center;gap:18px;min-height:88px;padding:8px 4px;border-bottom:1px solid #345f42}
.qo-br-perks>li>span{color:var(--o-ink);font:700 18px/1.45 var(--o-display);letter-spacing:.04em}
.qo .qo-br-join{display:flex;width:100%;margin-top:24px;min-height:68px;font-size:clamp(20px,2vw,30px);letter-spacing:.02em}
.qo .qo-br-keep{margin:12px 0 0;color:var(--o-ink);font:400 16px/1.5 var(--o-body);text-align:center}

/* SHOW MY NAME ON THE TOP OWNERS WALL: the switch, the name the wall shows, and the line under them. */
.qo-br-wall{margin-top:24px;padding:14px 16px 16px;border:2px solid #d9a93c}
.qo-br-wall-row{display:flex;align-items:center;gap:14px}
.qo .qo-br-wall-title{flex:1;min-width:0;margin:0;color:var(--o-ink);font:700 18px/1.4 var(--o-display);letter-spacing:.04em}
.qo-br-switch{flex:none;display:inline-grid;grid-template-columns:1fr 1fr;min-width:156px;min-height:56px;padding:5px;border:2px solid #527658;border-radius:4px;background:#00150b;box-shadow:inset 0 2px 0 #000;cursor:pointer}
.qo-br-switch>span{display:grid;place-items:center;padding:0 12px;font:700 20px/1 var(--o-display);color:#6d7f72}
.qo-br-switch[aria-checked="true"] .qo-br-on{background:var(--o-green);color:#03180e}
.qo-br-switch[aria-checked="false"] .qo-br-off{background:#d9ded3;color:#0b130d}
.qo-br-switch:focus-visible,.qo .qo-br-name:focus-visible{outline:3px solid #ffcd36;outline-offset:3px}
.qo-br-switch:disabled{opacity:.6;cursor:progress}
.qo .qo-br-name{display:block;box-sizing:border-box;width:100%;margin:14px 0 0;min-height:52px;padding:10px 12px;border:2px solid #7a5a1c;border-radius:0;background:#000a05;color:var(--o-ink);font:600 19px/1.3 var(--o-body)}
.qo .qo-br-name[aria-invalid="true"]{border-color:var(--o-red)}
.qo .qo-br-only{margin:14px 0 0;padding-top:12px;border-top:1px solid #345f42;color:var(--o-ink);font:400 16px/1.5 var(--o-body)}

/* A computer: the lines, the key and the switch on the left, the perks on the right. */
@media(min-width:1000px){
 .qo-br-frame{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"head perks" "lede perks" "join perks" "keep perks" "wall perks";grid-template-rows:auto auto auto auto 1fr;column-gap:36px}
 .qo-br-head{grid-area:head}.qo-br-lede{grid-area:lede}.qo-br-join{grid-area:join}.qo-br-keep{grid-area:keep}.qo-br-wall{grid-area:wall;align-self:start}
 .qo-br-perks{grid-area:perks;margin-top:0}
}
@media(max-width:760px){
 .qo .qo-br-plate{gap:10px;padding:12px 10px}
 .qo .qo-br-title{font-size:clamp(20px,7vw,30px)}
 .qo .qo-br-figure{font-size:clamp(14px,4.6vw,19px)}
 .qo-br-badge-key{width:44px;height:44px}
 .qo-br-badge-plate{min-height:46px;padding:5px 14px 8px;font-size:clamp(15px,4.6vw,19px)}
 .qo .qo-br{padding:8px 6px}
 .qo-br-frame{padding:16px 12px 18px}
 .qo .qo-br-head{font-size:clamp(22px,8.4vw,42px)}
 .qo .qo-br-lede{font-size:15px}
 .qo-br-medal{width:56px;height:56px}
 .qo-br-perks>li{gap:12px;min-height:72px;padding:6px 2px}
 .qo-br-perks>li>span{font-size:14px}
 .qo .qo-br-join{min-height:60px;font-size:clamp(17px,5.6vw,24px)}
 .qo .qo-br-keep{font-size:13px}
 .qo-br-wall{padding:12px 10px 14px}
 .qo-br-wall-row{gap:10px}
 .qo-br-wall-row>.qo-br-medal{width:48px;height:48px}
 .qo .qo-br-wall-title{font-size:13px}
 .qo-br-switch{min-width:112px;min-height:48px}
 .qo-br-switch>span{padding:0 8px;font-size:16px}
 .qo .qo-br-name{font-size:16px}
 .qo .qo-br-only{font-size:14px}
}
/* A phone: the switch under the words, so the words keep their width. */
@media(max-width:560px){
 .qo-br-wall-row{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px 12px}
 .qo-br-wall-row>.qo-br-switch{grid-column:2;justify-self:start}
}