/* PREVIEW ONLY: Susan's review (2026-11-04). Loaded by index-preview.html, not the live homepage. */

/* hero: tagline and "Founding members 2026" centred, one under the other (items 5, 6) */
.hero .row{flex-direction:column;align-items:center;text-align:center;gap:14px}
.hero .row p{max-width:52ch}
.hero .asks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.hero .asks .ask{margin:0;max-width:340px}

/* Be part of the BEST: one intro, then Who + specialisms beside the checklist (items 7-10) */
.big .lede2{max-width:62ch;margin-top:22px;font-size:17px;line-height:1.7;color:#3b4a57}
.seek.clear{grid-template-columns:1fr 1.4fr;padding-top:clamp(28px,4vh,44px);border-top:1px solid var(--rule)}
.seek.clear .who .label{display:block;color:var(--slate);margin-bottom:12px}
.seek.clear .who p{font-size:16px;line-height:1.65;color:#3b4a57;max-width:34ch;margin-bottom:34px}
.seek.clear .spec{columns:2;column-gap:28px}
.seek.clear .spec li{padding:9px 0 9px 22px;font-size:14.5px;border-top:1px solid var(--hair)}
.seek.clear .spec li::before{top:20px;width:10px}
.seek.clear h3{margin-bottom:18px}
.seek.clear>div:last-child ul{columns:1}
@media (max-width:900px){.seek.clear{grid-template-columns:1fr;gap:44px}}

/* client experience reuses the gatherings layout on deep navy */
.guests .lead{margin-top:26px;max-width:34ch;font:400 clamp(19px,1.5vw,23px)/1.55 var(--serif)}
.guests .rows a{color:var(--tan)}

/* 36 seats: give the ring more height so labels don't stack */
@media (min-width:1061px){
  :root{--R:min(36vw,calc(50vw - 220px),440px)}
}
@media (min-width:1061px) and (max-width:1320px){
  .ring .seat small{display:none}
  .seat em{top:-10px}
}

/* "needs Susan" notes */
.ask{display:block;margin:16px 0;padding:10px 14px;background:#FFF1BF;color:#4d3a00;border-left:3px solid #D99A00;font:400 13.5px/1.5 "Outfit",sans-serif;letter-spacing:0;text-transform:none;text-align:left;font-style:normal;white-space:normal}
.ask strong{font-weight:700;color:#4d3a00}
.needs{outline:2px dashed #D99A00;outline-offset:10px}
.seat.asked i{background:#F2B600;box-shadow:0 0 0 4px rgba(242,182,0,.3)}
.seat.asked em{color:#FFD45C}
.pcard .ask{margin:0 0 16px}
.btn-ask{display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:360px}
.btn-ask .ask{margin:8px 0 0}
body.clean .ask,body.clean .also{display:none}
body.clean .needs{outline:0}
body.clean .seat.asked i{background:var(--tan);box-shadow:none}
body.clean .seat.asked em{color:rgba(255,255,255,.88)}

.also{padding:clamp(48px,8vh,90px) var(--pad);background:#FFF8DD;color:#3a2d00;border-top:3px solid #D99A00}
.also h2{font:400 clamp(26px,2.4vw,36px)/1.1 var(--serif);margin-bottom:22px}
.also ol{list-style:none;display:grid;gap:12px;max-width:80ch;font-size:16px;line-height:1.6}

/* preview bar */
.rv{position:fixed;left:50%;bottom:16px;z-index:60;transform:translate3d(-50%,0,0);display:flex;align-items:center;gap:18px;padding:10px 12px 10px 18px;background:#1F3447;color:#F5F3EF;font:400 13px/1.3 "Outfit",sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.25);white-space:nowrap}
.rv b{font-weight:700;color:#F2B600}
.rv-key{display:flex;align-items:center;gap:8px;opacity:.85}
.rv-key i{width:12px;height:12px;background:#FFF1BF;border-left:3px solid #D99A00}
.rv button{font:inherit;background:#F2B600;color:#1F3447;border:0;padding:8px 12px;cursor:pointer}
body.clean .rv-key{display:none}
@media (max-width:760px){.rv{left:10px;right:10px;transform:none;flex-wrap:wrap;white-space:normal;gap:8px 14px}.rv-key{display:none}}
.hero>.asks{position:absolute;z-index:3;left:var(--pad);right:var(--pad);top:clamp(96px,14vh,130px);margin:0}
.guests{padding-bottom:clamp(70px,12vh,140px)}
.guests+.faq{margin-top:0}
.hero>.asks{right:auto;width:min(320px,26vw);flex-direction:column;align-items:stretch}
@media (max-width:1060px){.hero>.asks{right:var(--pad);width:auto;top:84px}.hero>.asks .ask{max-width:none;padding:7px 10px;font-size:12px}}
@media (min-width:761px){.rv{left:auto;right:16px;transform:none}}
@media (max-width:600px){#circle h2{font-size:11vw}}

/* "changed" notes: what has already been edited from Susan's review (green), next to the amber "needs Susan" notes */
.chg{display:block;margin:16px 0;padding:10px 14px;background:#E2F1E4;color:#173D26;border-left:3px solid #2E7D4F;font:400 13.5px/1.5 "Outfit",sans-serif;letter-spacing:0;text-transform:none;text-align:left;font-style:normal;white-space:normal}
.chg strong{font-weight:700;color:#173D26}
.hero .asks .chg{margin:0;max-width:340px}
.btn-ask .chg{margin:8px 0 0}
.pcard .chg{margin:0 0 16px}
@media (max-width:1060px){.hero>.asks .chg{max-width:none;padding:7px 10px;font-size:12px}}
.seat.added i{background:#4FB27A;box-shadow:0 0 0 4px rgba(79,178,122,.3)}
.seat.added em{color:#9BE0B4}
.rv-key.c i{background:#E2F1E4;border-left-color:#2E7D4F}
body.clean .chg{display:none}
body.clean .seat.added i{background:var(--tan);box-shadow:none}
body.clean .seat.added em{color:rgba(255,255,255,.88)}
.rv-done{padding:clamp(48px,8vh,90px) var(--pad);background:#EEF7EF;color:#173D26;border-top:3px solid #2E7D4F}
.rv-done h2{font:400 clamp(26px,2.4vw,36px)/1.1 var(--serif);margin-bottom:22px}
.rv-done ol{list-style:none;display:grid;gap:10px;max-width:80ch;font-size:16px;line-height:1.6}
.rv-done ol b{font-weight:700}
body.clean .rv-done{display:none}

/* edit mode (preview-editor.js) */
.rv .rv-edit{background:transparent;color:#F5F3EF;border:1px solid rgba(245,243,239,.5)}
.rv .rv-edit:hover{border-color:#F5F3EF}
body.editing [contenteditable=true]{outline:1px dashed rgba(46,125,79,.55);outline-offset:3px;cursor:text}
body.editing [contenteditable=true]:hover{outline-color:#2E7D4F}
body.editing [contenteditable=true]:focus{outline:2px solid #2E7D4F;background:rgba(226,241,228,.25)}
.ed{position:fixed;right:16px;bottom:80px;z-index:61;width:330px;max-height:calc(100vh - 110px);overflow:auto;background:#fff;color:#16222D;box-shadow:0 14px 40px rgba(0,0,0,.28);font:400 13.5px/1.4 "Outfit",sans-serif;padding:16px 16px 12px}
.ed[hidden]{display:none}
.ed-h{display:grid;gap:2px;margin-bottom:10px}
.ed-h b{font-size:15px;font-weight:700}
.ed-h span{color:#5b6670}
.ed details{border-top:1px solid #e3e0da;padding:8px 0}
.ed summary{cursor:pointer;font-weight:700;padding:4px 0;list-style-position:inside}
.ed-c,.ed-t{display:grid;gap:6px;margin-top:8px}
.ed-c label{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;cursor:pointer}
.ed-c input{width:34px;height:26px;padding:0;border:1px solid #cfcac2;background:none;cursor:pointer}
.ed-c code{font:12px/1 ui-monospace,monospace;color:#5b6670}
.ed-t label{display:grid;grid-template-columns:1fr 140px;align-items:center;gap:10px}
.ed-t select{font:inherit;padding:4px 6px;border:1px solid #cfcac2;background:#fff}
.ed-a{display:flex;gap:8px;border-top:1px solid #e3e0da;padding-top:12px}
.ed-a button{font:inherit;padding:8px 10px;border:1px solid #1F3447;background:#fff;color:#1F3447;cursor:pointer}
.ed-a button[data-a=copy]{background:#2E7D4F;border-color:#2E7D4F;color:#fff;flex:1}
.ed-n{margin-top:10px;font-size:12px;color:#5b6670}
@media (max-width:760px){.ed{left:10px;right:10px;width:auto;bottom:auto;top:10px;max-height:55vh}}

/* "restructured" notes (blue): text tidied or moved for clarity */
.mv{display:block;margin:16px 0;padding:10px 14px;background:#E3ECF8;color:#14305A;border-left:3px solid #3D6FB6;font:400 13.5px/1.5 "Outfit",sans-serif;letter-spacing:0;text-transform:none;text-align:left;font-style:normal;white-space:normal;max-width:62ch}
.mv strong{font-weight:700;color:#14305A}
.rv-key.m i{background:#E3ECF8;border-left-color:#3D6FB6}
.rv-mv{background:#EEF3FA;color:#14305A;border-top-color:#3D6FB6}
.rv-mv>p{margin-top:18px;max-width:80ch;font-size:15px}
body.clean .mv{display:none}

/* drag and move (edit mode) */
.mvbar{display:none}
body.editing .sortable{position:relative}
body.editing .sortable .mvbar{display:flex;flex-direction:column;position:absolute;top:clamp(20px,3.2vh,34px);right:calc(100% + 12px);z-index:4;gap:3px;font:400 12px/1 "Outfit",sans-serif}
@media (max-width:900px){body.editing .sortable .mvbar{flex-direction:row;right:0;top:4px}}
.mvbar button,.mvbar span{font:inherit;padding:6px 8px;background:#3D6FB6;color:#fff;border:0;cursor:pointer}
.mvbar span{cursor:grab;user-select:none}
.mvbar button:disabled{opacity:.35;cursor:default}
body.editing .sortable.dragging{opacity:.45;outline:2px dashed #3D6FB6;outline-offset:4px}
body.editing .qs summary{position:relative}
body.editing .qs summary .mvbar{top:50%;transform:translateY(-50%)}
@media (max-width:900px){body.editing .qs summary .mvbar{top:2px;transform:none}}
.ed-o{list-style:none;display:grid;gap:4px;margin-top:8px}
.ed-o li{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:8px;padding:6px 8px;background:#F3F1EC;cursor:grab;user-select:none}
.ed-o li.dragging{opacity:.4}
.ed-o li b{font-weight:400;color:#8a8f94;font-size:12px}
.ed-o button{font:inherit;font-size:12px;padding:3px 7px;border:1px solid #cfcac2;background:#fff;cursor:pointer}
.ed-o button:disabled{opacity:.35;cursor:default}
body.editing .qs summary .mvbar{gap:2px}
body.editing .qs summary .mvbar :is(button,span){padding:3px 7px;font-size:10.5px}

/* edit mode: small move tabs for paragraphs and bullet points, shown on hover */
body.editing .sortable.smi>.mvbar,body.editing .sortable.smi .mvbar{display:none}
body.editing .sortable.smi:hover>.mvbar{display:flex;flex-direction:row;top:0;right:100%;padding-right:6px;gap:2px}
body.editing .sortable.smi>.mvbar :is(button,span){padding:3px 6px;font-size:10.5px}
body.editing .spec-line .sortable.smi:hover>.mvbar{right:auto;left:50%;top:auto;bottom:100%;transform:translateX(-50%);padding:0 0 4px}