/* Layout: the page is a floor plan. Hero = Fig. 1, SC-7(10) as a live isometric figure (fig1.css, fig1.js, both
   generated by figures/sc-7-10/build.mjs). Below, one building: every section is a room
   behind a hatched concrete wall, doorways alternating sides like a vestibule. Single dark theme by choice (SL5 navy). */
:root {
  --ground: #0A1122;   /* outside the building */
  --floor: #0F1A30;    /* inside */
  --wall: #C7D1DE;     /* walls, drawn pale like a plan */
  --ink: #EDF1F6;
  --muted: #97A3B8;
  --rule: #2A3A5A;
  --core: #19C3F0;     /* SL5 cyan */
  --red: #E5484D;      /* Red Zone */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Public Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --wt: 14px;          /* wall thickness */
  --door: 46px;        /* doorway offset from the room edge */
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--ground); color: var(--ink); font: 400 17px/1.6 var(--body); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--core); outline-offset: 3px; }

.site {
  max-width: 1180px; margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  padding-block: 0 56px;
}

h1, h2, h3 { font-family: var(--display); font-stretch: 125%; margin: 0; text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(56px, 7vw, 100px); line-height: .9; letter-spacing: -.035em; }
h2 { font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -.02em; }
h3 { font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -.01em; }
p { margin: 0; }

.btn {
  display: inline-block; text-decoration: none; font: 600 16px/1 var(--body);
  padding: 16px 24px; background: var(--core); color: var(--ground);
}
.btn:hover { background: var(--ink); }
.btn.quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--wall); }
.btn.quiet:hover { background: var(--floor); }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; padding-block: 22px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; }
.brand svg { width: 24px; height: auto; color: var(--ink); }
.top nav { display: flex; gap: 8px 26px; flex-wrap: wrap; align-items: center; }
.top nav a { text-decoration: none; color: var(--muted); font-size: 15px; }
.top nav a:hover { color: var(--ink); }
.top nav a.btn { color: var(--ground); padding: 11px 18px; font-size: 15px; }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; padding-block: 48px 80px; }
.hero .intro { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.hero .lede { font-size: clamp(19px, 2vw, 23px); line-height: 1.45; max-width: 26ch; }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); margin: 0; border-top: 2px solid var(--wall); }
.facts dt, .facts dd { padding-block: 11px; border-bottom: 1px solid var(--rule); margin: 0; }
.facts dt { color: var(--muted); padding-right: 28px; }
.facts dd { font-weight: 500; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

figure.fig1 { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
figcaption { font-size: 13px; color: var(--muted); }
figcaption a { color: inherit; }

/* The building: hatched concrete walls, one room per section */
.building {
  position: relative; padding: var(--wt);
  background: repeating-linear-gradient(-45deg, var(--wall) 0 1.5px, var(--ground) 1.5px 7px);
  box-shadow: 0 0 0 1.5px var(--wall);
}
.building::before { /* entrance */
  content: ""; position: absolute; z-index: 1; top: -3px; left: calc(var(--wt) + var(--door));
  width: 60px; height: calc(var(--wt) + 5px); background: var(--floor);
}
.rooms { background: var(--floor); box-shadow: 0 0 0 1.5px var(--wall); }
.room { position: relative; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px 56px; padding: 100px 48px 72px; }
.room + .room { margin-top: var(--wt); }
.room + .room::before { /* the wall above this room, with its doorway */
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--wt) * -1); height: var(--wt);
  background:
    linear-gradient(var(--floor), var(--floor)) var(--door) 0 / 60px 100% no-repeat,
    linear-gradient(var(--wall), var(--wall)) 0 0 / 100% 1.5px no-repeat,
    linear-gradient(var(--wall), var(--wall)) 0 100% / 100% 1.5px no-repeat,
    repeating-linear-gradient(-45deg, var(--wall) 0 1.5px, var(--floor) 1.5px 7px);
}
.room:nth-child(even)::before { background-position: calc(100% - var(--door)) 0, 0 0, 0 100%, 0 0; }
.room::after { /* door swing: leaf on the hinge side, dashed arc to the jamb */
  content: ""; position: absolute; top: 0; left: calc(var(--door) + 2px); width: 56px; height: 56px; pointer-events: none;
  border-left: 2px solid var(--wall); border-right: 1px dashed #4A5B7E; border-bottom: 1px dashed #4A5B7E;
  border-bottom-right-radius: 100%;
}
.room:nth-child(even)::after {
  left: auto; right: calc(var(--door) + 2px); border-left: 1px dashed #4A5B7E; border-right: 2px solid var(--wall);
  border-bottom-right-radius: 0; border-bottom-left-radius: 100%;
}
.room h2 { max-width: 12ch; }
.body { display: flex; flex-direction: column; gap: 22px; max-width: 64ch; min-width: 0; }
.body .big { font-size: 20px; line-height: 1.55; }
.muted { color: var(--muted); }

/* Compartments: cells separated by thick walls */
.cells { display: grid; border: 4px solid var(--wall); }
.cells > * { padding: 22px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cells.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cells.six > :not(:nth-child(3n+1)) { border-left: 4px solid var(--wall); }
.cells.six > :nth-child(n+4) { border-top: 4px solid var(--wall); }
.cells p { color: var(--muted); font-size: 15px; line-height: 1.5; }
.room.wide { grid-template-columns: minmax(0, 1fr); }
.room.wide .head { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 64ch); gap: 24px 56px; }

.who { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.who li { padding-block: 16px; border-top: 2px solid var(--rule); display: flex; flex-direction: column; gap: 4px; }
.who li span { color: var(--muted); font-size: 15px; }

.rules { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); border-top: 2px solid var(--wall); }
.rules dt, .rules dd { margin: 0; padding-block: 12px; border-bottom: 1px solid var(--rule); }
.rules dt { color: var(--muted); padding-right: 28px; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: flex; flex-direction: column; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding-block: 16px; border-top: 1px solid var(--rule); }
.steps li::before { content: counter(s); font: 800 26px/1 var(--display); font-stretch: 125%; color: var(--core); }
.steps li > span { display: flex; flex-direction: column; gap: 2px; }
.steps li strong { font-weight: 600; font-size: 17px; }
.steps li span span { color: var(--muted); font-size: 15px; }

details { border-top: 1px solid var(--rule); }
details:last-of-type { border-bottom: 1px solid var(--rule); }
summary { cursor: pointer; list-style: none; padding-block: 16px; display: flex; justify-content: space-between; gap: 16px; font-weight: 600; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--core); font-size: 22px; line-height: 1; }
details[open] summary::after { content: "\2212"; }
details p { padding-bottom: 18px; color: var(--muted); }

.foot { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-top: 32px; color: var(--muted); font-size: 15px; }

@media (max-width: 960px) {
  :root { --door: 18px; --wt: 12px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 24px 56px; }
  .room, .room.wide .head { grid-template-columns: minmax(0, 1fr); }
  .room { padding: 88px 28px 48px; }
  .room h2 { max-width: 20ch; }
  .cells.six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cells.six > * { border-left: 0; border-top: 4px solid var(--wall); }
  .cells.six > :nth-child(-n+2) { border-top: 0; }
  .cells.six > :nth-child(even) { border-left: 4px solid var(--wall); }
}
@media (max-width: 700px) {
  .plan { min-width: 620px; }
}
@media (max-width: 600px) {
  :root { --wt: 10px; }
  .room { padding: 80px 18px 40px; }
  .cells.six, .who { grid-template-columns: minmax(0, 1fr); }
  .cells.six > * { border-left: 0 !important; border-top: 4px solid var(--wall); }
  .cells.six > :first-child { border-top: 0; }
  .top nav a:not(.btn) { display: none; }
}

/* Forms (attend and speak) */
.form { display: flex; flex-direction: column; gap: 18px; border-top: 2px solid var(--wall); padding-top: 24px; }
.form .row { display: flex; flex-direction: column; gap: 6px; }
.form label { font-weight: 600; font-size: 15px; }
.form .opt, .form .hint { color: var(--muted); font-weight: 400; font-size: 14px; }
.form input, .form select, .form textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--ground);
  border: 1.5px solid var(--rule); border-radius: 0; padding: 11px 12px; width: 100%;
}
.form textarea { resize: vertical; line-height: 1.5; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--core); outline: none; }
.form button { border: 0; cursor: pointer; }
.form button:disabled { opacity: .6; cursor: progress; }
.form .small { font-size: 14px; }
.form .trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.status:empty { display: none; }
.status { margin: 0; padding: 12px 14px; border-left: 4px solid var(--core); background: var(--ground); }
.status.ok { border-color: var(--core); }
.status.err { border-color: var(--red); }

/* Partner lockup: the Apart x SL5 mark is drawn for a light background, so it sits on a white card. */
.partner { display: inline-block; align-self: flex-start; background: #fff; padding: 14px 18px; max-width: 100%; }
.partner img { display: block; width: 100%; max-width: 360px; height: auto; }
.partner:hover { outline: 2px solid var(--core); outline-offset: 2px; }

/* Checkbox group on the attend form */
.form .checks { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.form .checks legend { font-weight: 600; font-size: 15px; padding: 0; margin-bottom: 10px; }
.form .checks label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 15px; line-height: 1.4; cursor: pointer; }
.form .checks input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--core); padding: 0; }
.form .hint a { color: var(--ink); }
@media (max-width: 640px) { .form .checks { grid-template-columns: minmax(0, 1fr); } }