@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600;700&display=swap");
/* Exhibit hall floor plan: Glen's design (assets/Chevelle/i4pl-2026-booth-map.html), scoped to .fp.
   Only the data changed: live booth states, no invented prices or holds. Nothing below 14px. */

  /* Single light theme by deliberate choice: this is a wayfinding tool read in
     bright rooms and printed, and hatched fills need a white ground to stay legible. */
  .fp{
    color-scheme: light;
    --paper:#FFFFFF;
    --hall:#FFFFFF;
    --surface:#FFFFFF;
    --tint:#F2F6F5;
    --ink:#0B1A17;
    --ink-2:#26403B;
    --ink-3:#4A625D;
    --rule:#9FB3AE;
    --rule-soft:#D7E2DF;
    --wall:#0B1A17;
    --teal:#07665E;
    --teal-wash:#DDF0ED;
    --t1:#9B0F36;
    --t1-wash:#FAE6EB;
    --t2:#8F4206;
    --t2-wash:#FBEDE1;
    --t3:#143C6E;
    --t3-wash:#E4ECF7;
    --amenity:#1F6A62;
    --amenity-wash:#DDF0ED;
    --shadow:0 1px 2px rgba(11,26,23,.07),0 10px 26px rgba(11,26,23,.08);
  }
  .fp *{box-sizing:border-box}
  .fp .fp-wrap{padding-inline:20px;padding-block:26px 48px;max-width:1440px;margin:0 auto}

  /* ---- masthead ---- */
  .mast{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;
    padding-bottom:20px;border-bottom:3px solid var(--ink)}
  .eyebrow{display:flex;align-items:center;gap:11px;margin-bottom:12px}
  .eyebrow i{width:28px;height:3px;background:var(--teal);display:block}
  .eyebrow span{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:14px;font-weight:600;
    letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
  .fp h1{margin:0;font-family:"Archivo",system-ui,sans-serif;font-size:clamp(30px,4.4vw,44px);
    line-height:1;font-weight:900;letter-spacing:-.035em;text-wrap:balance;color:var(--ink)}
  .venue{margin:12px 0 0;font-size:17px;line-height:1.55;color:var(--ink-2);max-width:48ch}
  .tally{display:flex;gap:10px;flex-wrap:wrap}
  .tally div{padding:13px 18px;border:2px solid var(--rule);border-radius:10px;background:var(--surface);min-width:104px}
  .tally b{display:block;font-family:"Archivo",sans-serif;font-size:30px;font-weight:800;
    letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
  .tally small{display:block;margin-top:6px;font-size:14px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-3)}
  .tally .ok{border-color:var(--teal)}
  .tally .ok b{color:var(--teal)}

  /* ---- controls ---- */
  .bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:22px 0 18px}
  .bar .lbl{font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-3);margin-right:4px}
  .chip{appearance:none;font:inherit;font-size:15px;font-weight:600;cursor:pointer;
    min-height:44px;padding:0 18px;border-radius:999px;border:2px solid var(--rule);background:var(--surface);
    color:var(--ink-2);transition:background .12s,border-color .12s,color .12s}
  .chip:hover{border-color:var(--ink-2);color:var(--ink)}
  .chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
  .chip:focus-visible,.booth:focus-visible,.cta:focus-visible,.ghost:focus-visible,.rowbtn:focus-visible{
    outline:4px solid var(--teal);outline-offset:3px}
  .sep{width:2px;height:26px;background:var(--rule-soft)}

  /* ---- layout ---- */
  .stage{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
  @media (max-width:980px){ .stage{grid-template-columns:minmax(0,1fr)} }

  /* ---- plan ---- */
  .planwrap{background:var(--surface);border:2px solid var(--rule);border-radius:14px;
    padding:18px;box-shadow:var(--shadow)}
  .planscroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .plan{position:relative;width:100%;min-width:560px;aspect-ratio:620/1080}
  .plan svg{position:absolute;inset:0;width:100%;height:100%;display:block}
  .hint{margin:0 0 10px;font-size:14px;color:var(--ink-3);display:none}
  @media (max-width:640px){ .hint{display:block} }

  .booth{
    position:absolute;transform:translate(-50%,-50%);
    appearance:none;padding:0;cursor:pointer;
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:700;
    display:flex;align-items:center;justify-content:center;
    border-radius:5px;transition:transform .13s ease,box-shadow .13s ease;
    width:11.5%;height:5.6%;font-size:17px;
  }
  .booth.tall{height:6.6%}
  .booth.diamond{width:13%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%) rotate(45deg)}
  .booth.diamond span{transform:rotate(-45deg);display:block}
  .booth:hover{transform:translate(-50%,-50%) scale(1.09);box-shadow:0 8px 20px rgba(11,26,23,.25);z-index:4}
  .booth.diamond:hover{transform:translate(-50%,-50%) rotate(45deg) scale(1.09)}
  .booth[aria-pressed="true"]{box-shadow:0 0 0 4px #FFFFFF,0 0 0 8px var(--teal);z-index:5}

  .booth.t1{--c:var(--t1);--w:var(--t1-wash)}
  .booth.t2{--c:var(--t2);--w:var(--t2-wash)}
  .booth.t3{--c:var(--t3);--w:var(--t3-wash)}
  .booth.free{background:#FFFFFF;border:3px solid var(--c);color:var(--c)}
  /* Pending: plain grey, same for every tier (Glen: greyed as a potential assignment).
     #0B1A17 on #E3E7E6 is about 15:1; the #4A625D border is about 5.6:1 on white (WCAG AA). */
  .booth.held{background:#E3E7E6;border:3px dashed #4A625D;color:#0B1A17}
  .booth.sold{background:var(--c);border:3px solid var(--c);color:#FFFFFF}
  /* filtered-out booths stay legible: never faded below readable contrast */
  .booth.dim{background:#FFFFFF;border:2px solid var(--rule);color:var(--ink-3);
    pointer-events:none;box-shadow:none}

  /* ---- legend ---- */
  .legend{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px;padding-top:18px;border-top:2px solid var(--rule-soft)}
  .lg{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink-2)}
  .sw{width:30px;height:21px;border-radius:4px;flex:none}
  .sw.free{background:#FFFFFF;border:3px solid var(--ink-2)}
  .sw.held{background:#E3E7E6;border:3px dashed #4A625D}
  .sw.sold{background:var(--ink-2);border:3px solid var(--ink-2)}

  /* ---- rail ---- */
  .rail{display:flex;flex-direction:column;gap:16px;position:sticky;top:104px;max-height:calc(100vh - 120px);overflow-y:auto}  /* clears the fixed site header; never taller than the screen */
  @media (max-width:980px){ .rail{position:static;max-height:none;overflow:visible} }
  .card{background:var(--surface);border:2px solid var(--rule);border-radius:14px;box-shadow:var(--shadow)}
  .card .pad{padding:22px 24px}
  .tierbar{height:7px;border-radius:12px 12px 0 0}
  .kicker{font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-3)}
  .fp h2{margin:0;font-family:"Archivo",sans-serif;font-size:30px;font-weight:800;letter-spacing:-.025em;line-height:1.05}
  .state{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:8px;
    font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border:2px solid}
  .state.free{background:var(--teal-wash);color:var(--teal);border-color:var(--teal)}
  .state.held{background:#E3E7E6;color:#0B1A17;border-color:#4A625D}
  .state.sold{background:var(--tint);color:var(--ink-2);border-color:var(--ink-3)}
  .specs{list-style:none;margin:18px 0 0;padding:18px 0 0;border-top:2px solid var(--rule-soft);
    display:flex;flex-direction:column;gap:11px}
  .specs li{display:flex;justify-content:space-between;gap:16px;font-size:16px;color:var(--ink-2)}
  .specs li b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
  .price{margin-top:18px;padding-top:18px;border-top:2px solid var(--rule-soft);display:flex;align-items:baseline;gap:10px}
  .price b{font-family:"Archivo",sans-serif;font-size:38px;font-weight:900;letter-spacing:-.03em}
  .price span{font-size:15px;color:var(--ink-3)}
  .why{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
  .why li{display:flex;gap:11px;font-size:16px;line-height:1.5;color:var(--ink-2)}
  .why svg{flex:none;margin-top:4px}
  .cta{display:block;text-align:center;margin-top:20px;min-height:52px;padding:15px 18px;border-radius:10px;
    background:var(--teal);color:#FFFFFF;font-size:17px;font-weight:700;text-decoration:none;
    border:2px solid var(--teal);font-family:inherit;width:100%;cursor:pointer}
  .ghost{display:block;text-align:center;margin-top:11px;min-height:50px;padding:14px 18px;border-radius:10px;
    background:#FFFFFF;border:2px solid var(--ink-3);color:var(--ink-2);font-size:16px;font-weight:700;
    text-decoration:none;font-family:inherit;width:100%;cursor:pointer}
  .note{font-size:15px;line-height:1.55;color:var(--ink-3)}
  .sample{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:10px;
    background:var(--t2-wash);border:2px solid var(--t2);font-size:15px;line-height:1.5;color:var(--ink-2)}
  .sample svg{flex:none;margin-top:3px;color:var(--t2)}

  /* ---- booth list: the non-spatial equivalent ---- */
  .listwrap{margin-top:30px}
  .listwrap h2{font-size:24px;margin-bottom:6px}
  .listwrap p{margin:0 0 16px;font-size:16px;color:var(--ink-2);max-width:60ch}
  .tscroll{overflow-x:auto;border:2px solid var(--rule);border-radius:14px;background:var(--surface)}
  .fp table{border-collapse:collapse;width:100%;min-width:660px;font-size:16px}
  .fp caption{text-align:left;padding:16px 20px 0;font-size:15px;color:var(--ink-3)}
  .fp th,.fp td{padding:14px 20px;text-align:left;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
  .fp th{font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
    border-bottom:2px solid var(--rule)}
  td.num{font-family:"IBM Plex Mono",monospace;font-weight:700;font-variant-numeric:tabular-nums}
  .fp tr:last-child td{border-bottom:none}
  .pill{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:7px;
    font-size:14px;font-weight:700;border:2px solid}
  .rowbtn{appearance:none;font:inherit;font-size:15px;font-weight:700;cursor:pointer;min-height:44px;
    padding:0 16px;border-radius:9px;border:2px solid var(--teal);background:#FFFFFF;color:var(--teal)}
  .rowbtn:hover{background:var(--teal-wash)}
  .rowbtn[disabled]{border-color:var(--rule);color:var(--ink-3);cursor:default;background:var(--tint)}

  .srl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  @media (prefers-reduced-motion: reduce){ *{transition:none!important} }

.fp{background:var(--paper);color:var(--ink);font-family:"Public Sans",system-ui,sans-serif;font-size:16px}
.fp h2.rail-h{font-size:30px}
.fp .range b{font-size:30px}
.fp a.cta,.fp a.ghost{box-sizing:border-box}
.fp .srl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fp .fp-change{margin:14px 0 0;font-size:15px;color:var(--ink-2,var(--ink))}
.fp .tiernote{margin:0 0 14px;padding:12px 16px;border-left:4px solid var(--teal);background:var(--teal-wash);font-size:16px;font-weight:600;color:var(--ink)}
.fp #detail{scroll-margin-top:104px}
.fp .backlink{margin:14px 0 0;text-align:center;font-size:16px}.fp .backlink a{color:var(--teal);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ============================================================================
   PHONE LAYOUT (max-width 640px): the whole hall fits the screen.
   Isolated: nothing here applies above 640px, so desktop is untouched.
   The drawn SVG labels would shrink below 14px, so on phones they are hidden
   and replaced by larger phone-only labels, HTML strips and legend entries.
   ============================================================================ */
.fp .plan svg text.m,.fp .plan svg .icom,.fp .mstrip,.fp .mlg{display:none}
@media (max-width:640px){
  .fp .fp-wrap{padding-inline:16px}
  .fp .planwrap{padding:8px}
  .fp .plan{min-width:0}
  .fp .hint{display:none}
  .fp .plan svg text{display:none}
  .fp .plan svg text.m{display:inline}
  .fp .plan svg .ico{display:none}
  .fp .plan svg .icom{display:inline}
  .fp .mstrip{display:block;position:relative;height:26px;font-size:15px;font-weight:700;color:var(--ink-2)}
  .fp .mstrip span{position:absolute;top:3px;transform:translateX(-50%);white-space:nowrap}
  .fp .mlg{display:flex}
  .fp .booth{font-size:16px}
}