/* Brand OS: the casting room. Precision on bone paper. Creators are ranked by belonging, shown as faces and overlap, not as cards. */
.brandos { min-height: 100svh; }
.b-main { max-width: 1640px; margin: 0 auto; padding: 0 var(--gut) 180px; animation: view-in .8s var(--ease) both; }
.refreshing .b-main { animation: none; }
.brandos .display { letter-spacing: -.03em; }
.b-head { padding: clamp(32px, 3.5vw, 56px) 0 0; }
.b-id { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(30px, 4vw, 60px); }
.b-mark { width: 46px; height: 46px; display: grid; place-items: center; background: var(--fg); color: var(--bg); font: 500 13px var(--f-mono); letter-spacing: .06em; }
.b-id b { display: block; font-weight: 500; line-height: 1.2; } .b-id small { font: 400 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.b-head h1 { font-size: clamp(60px, 7.1vw, 118px); line-height: .94; max-width: 1150px; }
.b-head .lead { margin-top: 28px; }
.brief-band { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; margin-top: clamp(40px, 5vw, 70px); padding: 24px 30px; background: var(--fg); color: var(--bg); }
.brief-band dl { display: flex; gap: clamp(24px, 4vw, 64px); flex-wrap: wrap; }
.brief-band dt { font: 400 10px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; opacity: .6; margin-bottom: 6px; }
.brief-band dd { font: 400 22px/1.1 var(--f-display); }
.b-section { margin-top: clamp(60px, 6vw, 92px); }
.b-sec-head { margin-bottom: 36px; }
.b-sec-head .label { color: var(--muted); margin-bottom: 18px; }
.b-sec-head h2 { font-size: clamp(40px, 5.6vw, 96px); line-height: .92; }
.b-sec-head h2 em { color: color-mix(in srgb, var(--fg) 55%, transparent); }

/* The reordering: followers on the left, belonging on the right */
.reorder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(70px, 28%) minmax(0, 1fr); row-gap: 14px; margin-top: 44px; }
.ro-h2 { grid-column: 3; text-align: left; }
.ro-h1, .ro-h2 { color: var(--muted); }
.ro-h1 { text-align: right; grid-column: 1; }
.ro-col li { height: var(--r); display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--line); transition: opacity .3s; cursor: default; }
.ro-col li:last-child { border-bottom: 1px solid var(--line); }
.ro-left li { justify-content: flex-end; text-align: right; }
.ro-col b { font: 400 clamp(20px, 2.6vw, 38px)/1 var(--f-display); letter-spacing: -.02em; }
.ro-col small { font: 400 10.5px var(--f-mono); letter-spacing: .06em; color: var(--muted); }
.ro-col em { margin-left: auto; padding: 3px 7px; font: 500 10px var(--f-mono); font-style: normal; letter-spacing: .06em; }
.ro-col em.up { background: var(--lime); color: #111; }
.ro-col em.down { color: var(--muted); border: 1px solid var(--line); }
.ro-svg { width: 100%; height: calc(var(--n) * var(--r)); display: block; overflow: visible; }
.ro-line { stroke: var(--fg); stroke-width: 2; transition: opacity .3s, stroke-width .3s; }
.ro-line.down { stroke: var(--muted); stroke-dasharray: 4 5; stroke-width: 1.4; }
.ro-line.flat { stroke-width: 1.4; }
.reorder .dim { opacity: .14; }
.ro-note { margin-top: 22px; max-width: 70ch; }

/* Casting list */
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding: 14px 0; margin: 0; border-top: 1px solid var(--fg); border-bottom: 1px solid var(--line); }
.search { flex: 1 1 260px; display: flex; align-items: center; gap: 12px; margin: 0; }
.search svg { width: 18px; height: 18px; flex: none; }
.search input { border: 0; padding: 12px 0; font-size: 15px; box-shadow: none; }
.search input:focus { box-shadow: none; }
.seg { display: flex; align-items: center; gap: 2px; }
.seg button { padding: 11px 16px; font-size: 14px; transition: background-color .3s, color .3s; }
.seg button:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.seg button.on { background: var(--fg); color: var(--bg); }
.seg.sort > span { font: 500 10px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: 10px; }
.count { margin-left: auto; font: 400 11px var(--f-mono); letter-spacing: .08em; color: var(--muted); }
.venn-key { display: flex; align-items: center; gap: 12px; margin: 18px 0 8px; font-size: 13px; color: var(--muted); }
.venn-key svg { width: 54px; height: 16px; flex: none; }
.vb { fill: var(--fg); fill-opacity: .1; stroke: var(--fg); stroke-width: 1; stroke-dasharray: 3 3; }
.vc { fill: var(--lime); fill-opacity: .6; stroke: var(--fg); stroke-width: 1; }
.venn { width: 104px; height: 56px; overflow: visible; }

.cast { position: relative; display: grid; grid-template-columns: 48px 210px minmax(0, 1fr) 112px 150px 132px 164px; gap: 24px; align-items: center; padding: 30px 0; border-top: 1px solid var(--line); transition: background-color .5s var(--ease); }
.cast-list .cast:first-child { border-top: 0; }
.cast::before { content: ''; position: absolute; inset: 0 calc(var(--gut) * -1); background: color-mix(in srgb, var(--fg) 3.5%, transparent); opacity: 0; transition: opacity .5s var(--ease); z-index: -1; }
.cast:hover::before { opacity: 1; }
.rank { font: 400 44px/1 var(--f-display); color: var(--muted); }
.cast-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--panel); }
.cast-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.cast:hover .cast-img img { transform: scale(1.07); }
.cast-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .5), transparent 45%); }
.cast-img span { position: absolute; z-index: 1; left: 12px; bottom: 10px; font: 400 9.5px var(--f-mono); letter-spacing: .12em; color: #fff; }
.cast-id h3 { font-size: clamp(34px, 3.6vw, 58px); line-height: .94; }
.cast-id h3 em { color: color-mix(in srgb, var(--fg) 55%, transparent); }
.handle { display: block; margin-top: 8px; font: 400 11px var(--f-mono); letter-spacing: .06em; color: var(--muted); }
.evidence { margin: 12px 0; max-width: 46ch; font-size: 14.5px; line-height: 1.5; }
.swatches { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.swatches i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); }
.swatches small { margin-left: 6px; font: 400 10px var(--f-mono); letter-spacing: .06em; color: var(--muted); }
.cast-venn { text-align: center; }
.cast-venn small { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); } .cast-venn b { color: var(--fg); font-weight: 600; }
.cast-stats { display: grid; gap: 8px; }
.cast-stats div { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.cast-stats dt { font: 400 10px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cast-stats dd { font: 500 15px var(--f-mono); }
.cast-fee strong { display: block; font: 400 38px/1 var(--f-display); letter-spacing: -.02em; }
.cast-fee small { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.cast-actions { display: flex; align-items: center; gap: 10px; }
.pick { width: 44px; height: 44px; flex: none; border: 1px solid var(--fg); font-size: 22px; line-height: 1; display: grid; place-items: center; transition: background-color .3s, transform .4s var(--ease); }
.pick:hover { background: var(--lime); }
.pick.on { background: var(--lime); }
.empty { padding: 60px 0; border-top: 1px solid var(--line); color: var(--muted); }
.brandos .btn.line:hover { background: var(--fg); color: var(--bg); }
.brandos .btn.sun { background: var(--lime); }
.briefs .brief-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); font-size: 15px; }
.briefs .brief-row b { font: 400 28px/1.1 var(--f-display); }
.briefs .brief-row span { color: var(--muted); align-self: center; }

.tray { position: fixed; left: 50%; bottom: 22px; z-index: 48; transform: translate(-50%, 160%); display: flex; align-items: center; gap: 30px; max-width: calc(100% - 24px); padding: 12px 14px 12px 22px; background: var(--fg); color: var(--bg); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); transition: transform .6s var(--ease); }
.tray.on { transform: translate(-50%, 0); }
.tray-who { display: flex; align-items: center; }
.tray-av { width: 38px; height: 38px; border-radius: 50%; background-size: cover; background-position: center; border: 2px solid var(--fg); margin-left: -10px; }
.tray-av:first-child { margin-left: 0; }
.tray-who p { margin-left: 14px; font-size: 14px; white-space: nowrap; }
.tray-actions { display: flex; align-items: center; gap: 22px; }
.tray .btn.sun:disabled { background: transparent; color: color-mix(in srgb, var(--bg) 65%, transparent); border-color: color-mix(in srgb, var(--bg) 25%, transparent); opacity: 1; }

/* Campaign intelligence and the shared brand Deal Room. */
.affinity-proof { margin: 30px 0; padding: 24px; border: 1px solid var(--line); background: var(--panel); }
.proof-numbers { display: flex; gap: 46px; margin: 20px 0; }
.proof-numbers b { display: block; font: 400 40px/1 var(--f-display); }
.proof-numbers small { display: block; margin-top: 8px; color: var(--muted); }
.affinity-proof h4 { font: 400 27px/1.1 var(--f-display); margin: 24px 0 12px; }
.affinity-proof>small { color: var(--muted); font-size: 12px; }
.comparison-verdict { border-left: 3px solid var(--lime); padding: 24px; margin-bottom: 28px; background: #e7e9df; }
.comparison-verdict h3 { margin: 12px 0; }
.comparison-verdict p { max-width: 65ch; margin-bottom: 18px; }
.cmp .why p { margin-top: 10px; }
.selected-partner { display: flex; align-items: center; gap: 16px; padding: 18px 0; margin: 22px 0; border-block: 1px solid var(--line); }
.selected-partner img { width: 58px; height: 72px; object-fit: cover; object-position: center 25%; }
.selected-partner small { display: block; color: var(--muted); margin-top: 7px; }
.campaign-list-row { display: grid; grid-template-columns: 72px 1fr auto auto; gap: 24px; align-items: center; width: 100%; border-top: 1px solid var(--line); padding: 24px 0; }
.campaign-list-row>img { width: 72px; height: 90px; object-fit: cover; object-position: center 25%; }
.campaign-list-row b { font: 400 31px/1.1 var(--f-display); display: block; margin-top: 8px; }
.campaign-list-row small { color: var(--muted); }
.campaign-list-row>span:last-child { grid-column: 2 / -1; font-size: 14px; margin-top: -12px; }
.campaign-status { display: inline-block; font: 500 12px/1.3 var(--f-mono); background: var(--lime); color: #12171a; padding: 9px 12px; }
dialog.campaign-modal { width: min(760px,100%); }
.campaign-cover { position: relative; width: 100%; min-height: 280px; background: #141b21; color: #fff; padding: 48px 40px 34px; display: flex; align-items: end; isolation: isolate; }
.campaign-cover>img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; z-index: -2; }
.campaign-cover:after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#0b1923d9,#0b19234d); z-index: -1; }
.campaign-cover h2 { font-size: clamp(42px,5vw,65px); margin: 16px 0 22px; max-width: 600px; }
.deal-progress { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin: 0 0 32px; }
.deal-progress li { font: 400 11px/1.7 var(--f-mono); border-top: 2px solid var(--line); padding-top: 10px; color: var(--muted); }
.deal-progress li.done { border-color: #6c823c; color: var(--fg); }
.room-amount { padding: 26px 0; border-block: 1px solid var(--line); }
.room-amount>span,.room-amount small { display: block; color: var(--muted); font-size: 14px; }
.room-amount strong { display: block; font: 400 66px/1.15 var(--f-display); margin: 12px 0; }
.room-terms { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.room-terms small { color: var(--muted); display: block; margin-bottom: 8px; }
.room-terms b { font-size: 14px; font-weight: 500; }
.room-deliverables li { display: flex; gap: 14px; align-items: center; border-bottom: 1px solid var(--line); padding: 18px 0; font-size: 14px; }
.room-deliverables small { margin-left: auto; color: var(--muted); font-size: 12px; }
.room-thread { padding-top: 32px; }
.room-thread>div { background: var(--panel); padding: 24px; margin-top: 20px; }
.room-thread .creator-response { border-left: 2px solid #7c8d54; }
.room-thread b { font-size: 14px; }.room-thread small { color: var(--muted); font-size: 12px; }
.response-pending,.proposal-check { padding: 26px 0; }
.agreement-confirmation { background: #e4e9d7; padding: 25px; margin-top: 28px; }
.agreement-confirmation b { font: 400 30px var(--f-display); }
.agreement-confirmation small { display: block; color: #536040; }
.match-choice { display: flex; gap: 18px; align-items: center; border-top: 1px solid var(--line); padding: 22px 0; }
.match-choice img { width: 58px; height: 72px; object-fit: cover; }.match-choice>div { flex: 1; }
.match-choice small { display: block; margin-top: 6px; color: var(--muted); }
@media(max-width:760px) {
 .campaign-list-row { grid-template-columns: 54px 1fr; gap: 16px; }
 .campaign-list-row>img { width: 54px; height: 72px; }.campaign-list-row b { font-size: 26px; }
 .campaign-list-row>strong { grid-column: 2; }.campaign-list-row>.campaign-status { grid-column: 2; justify-self: start; }
 .campaign-list-row>span:last-child { margin-top: 0; }.campaign-cover { padding: 60px 22px 30px; }
 .deal-progress { grid-template-columns: 1fr 1fr; }.room-terms { gap: 20px; }
 .room-deliverables { overflow-wrap: anywhere; }.room-deliverables small { flex-shrink: 0; }
 .brief-row button { justify-self: start; }.comparison-verdict { padding: 20px; }
}

@media (max-width: 1180px) {
  .cast { grid-template-columns: 44px 190px minmax(0, 1fr) minmax(0, 1fr); gap: 20px 24px; }
  .cast-id { grid-column: 3 / -1; grid-row: 1; }
  .cast-img { grid-column: 2; grid-row: 1; }
  .rank { grid-column: 1; grid-row: 1; }
  .cast-venn { grid-column: 2; grid-row: 2; text-align: left; }
  .cast-stats { grid-column: 3; grid-row: 2; }
  .cast-fee { grid-column: 4; grid-row: 2; }
  .cast-actions { grid-column: 3 / -1; grid-row: 3; justify-content: flex-start; }
}
@media (max-width: 760px) {
  .b-head { padding-top: 34px; }
  .b-head h1 { font-size: clamp(54px, 17vw, 84px); }
  .brief-band { padding: 22px 20px; }
  .brief-band dl { gap: 20px 30px; }
  .brief-band .btn { width: 100%; }
  .reorder { grid-template-columns: minmax(0, 1fr) 24% minmax(0, 1fr); --r: 64px; }
  .ro-col li { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
  .ro-left li { align-items: flex-end; }
  .ro-col b { font-size: 19px; }
  .ro-col small { font-size: 9px; }
  .ro-col em { margin: 2px 0 0; padding: 1px 5px; font-size: 9px; position: static; }
  .controls { gap: 8px 14px; }
  .search { flex-basis: 100%; }
  .seg { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .seg button { padding: 10px 12px; font-size: 13px; }
  .seg.sort > span { display: none; }
  .count { margin-left: 0; }
  .cast { grid-template-columns: 1fr 1fr; gap: 18px 16px; padding: 28px 0; }
  .rank { position: absolute; z-index: 2; left: 12px; top: 40px; color: #fff; font-size: 38px; mix-blend-mode: normal; text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
  .cast-img { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 11; }
  .cast-id { grid-column: 1 / -1; grid-row: 2; }
  .cast-venn { grid-column: 1; grid-row: 3; }
  .cast-stats { grid-column: 2; grid-row: 3; }
  .cast-fee { grid-column: 1; grid-row: 4; }
  .cast-actions { grid-column: 2; grid-row: 4; justify-content: flex-end; }
  .cast-actions .btn { flex: 1; }
  .cast::before { display: none; }
  .briefs .brief-row { grid-template-columns: 1fr; gap: 4px; }
  .tray { bottom: 12px; gap: 14px; padding: 10px 10px 10px 14px; width: calc(100% - 24px); justify-content: space-between; }
  .tray-who p { display: none; }
  .tray-actions { gap: 12px; flex: 1; justify-content: flex-end; }
  .tray-actions .link { display: none; }
  .tray-actions .btn { flex: 1; }
}