/* A class that sets `display` beats the `hidden` attribute's UA style, and
   almost everything on this page is a grid — so say it once, loudly. Without
   this the room blocks all show at once and the form never hides on success. */
[hidden]{display:none !important}

/* ═══════════════════════════════════════════════════════════════
   The Grand Tour registration page.
   Everything here sits on top of style.css — the form controls, the
   buttons and the type are all inherited, this only handles the shape
   of a long form so it does not read as a wall.
   ═══════════════════════════════════════════════════════════════ */

.reg-hero{min-height:clamp(34vh,40vh,46vh)}
.reg-hero h1{max-width:16ch}

.reg{background:linear-gradient(180deg,var(--ink) 0%,var(--navy) 14%,var(--navy) 86%,var(--ink) 100%)}

.reg-note{border:1px solid var(--line-soft);border-left:3px solid var(--gold);
  background:rgba(28,43,78,.45);padding:1.15rem 1.35rem;border-radius:4px;
  font-size:.94rem;line-height:1.65;color:rgba(246,237,217,.84);margin-bottom:clamp(2rem,4vw,3rem)}
.reg-note b{color:#fff}

/* ── a numbered step ───────────────────────────────────────────── */
.reg-form{gap:clamp(1.6rem,3vw,2.4rem)}
.reg-step{border:0;border-top:1px solid var(--line-soft);padding:1.9rem 0 0;margin:0;display:grid;gap:1rem}
.reg-step:first-of-type{border-top:0;padding-top:0}
.reg-step > legend{font-family:var(--display,var(--mono));font-size:1.18rem;font-weight:700;color:#fff;
  text-transform:uppercase;letter-spacing:.04em;padding:0 0 .35rem;display:flex;align-items:center;gap:.7rem;float:left;width:100%}
.reg-step > legend .n{display:grid;place-items:center;width:1.7rem;height:1.7rem;flex:none;
  background:var(--gold);color:var(--navy);border-radius:50%;
  font-family:var(--mono);font-size:.8rem;font-weight:700}

.reg-hint{font-size:.82rem;line-height:1.6;color:var(--cream-dim);margin:0}

/* ── the three room cards ──────────────────────────────────────── */
.reg-rooms{display:grid;gap:.8rem}
.rm{position:relative;display:block;cursor:pointer}
.rm input{position:absolute;opacity:0;width:0;height:0}
.rm-b{display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;align-items:baseline;
  border:1px solid var(--line-soft);border-radius:4px;padding:1rem 1.15rem;
  background:rgba(28,43,78,.45);transition:border-color .18s,background .18s}
.rm:hover .rm-b{border-color:rgba(208,155,44,.5)}
.rm input:focus-visible + .rm-b{outline:2px solid var(--gold);outline-offset:2px}
.rm input:checked + .rm-b{border-color:var(--gold);background:rgba(208,155,44,.1)}
/* these live inside a <label>, which style.css sets in uppercase mono */
.rm-b,.rm-b span{font-family:var(--body);text-transform:none;letter-spacing:0}
.rm-t{font-weight:600;color:#fff;font-size:1rem}
.rm-p{font-family:var(--mono);font-size:.9rem;color:var(--gold);white-space:nowrap;text-align:right}
.rm-b .rm-p,.rm-b .rm-p em{font-family:var(--mono)}
.rm-p em{display:block;font-style:normal;font-size:.7rem;color:var(--cream-dim);margin-top:.15rem}
.rm-s{grid-column:1/-1;font-size:.84rem;color:var(--cream-dim);line-height:1.55}

/* what a room choice reveals */
.reg-when{display:grid;gap:1rem;border-left:2px solid rgba(208,155,44,.45);padding-left:1.1rem;margin-top:.3rem}

/* ── tick boxes ────────────────────────────────────────────────── */
.reg-chks{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.55rem .9rem}
.chk{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;
  font-family:var(--body);font-size:.9rem;letter-spacing:0;text-transform:none;color:rgba(246,237,217,.86)}
.chk input{width:1.05rem;height:1.05rem;flex:none;margin-top:.15rem;accent-color:var(--gold)}
.chk.big{border:1px solid var(--line-soft);border-radius:4px;padding:.85rem 1rem;background:rgba(28,43,78,.45);line-height:1.55}
.chk.big:has(input:checked){border-color:rgba(208,155,44,.55);background:rgba(208,155,44,.08)}

/* ── sending ───────────────────────────────────────────────────── */
.reg-send{display:grid;gap:.8rem;margin-top:.6rem}
.reg-err{border:1px solid rgba(224,69,47,.55);background:rgba(224,69,47,.1);color:#ffd9d2;
  border-radius:4px;padding:.8rem 1rem;font-size:.88rem;line-height:1.55;margin:0}

.reg-done{text-align:center;display:grid;gap:1rem;justify-items:center;padding:clamp(2rem,6vw,4rem) 0}
.reg-done h2{font-size:clamp(1.8rem,4vw,2.6rem);text-transform:uppercase;color:#fff}
.reg-done p{max-width:52ch;color:rgba(246,237,217,.82);line-height:1.7;margin:0}
.reg-done a.btn{margin-top:.8rem}

@media(max-width:820px){
  .reg-step > legend{font-size:1.05rem}
  .rm-b{grid-template-columns:1fr}
  .rm-p{text-align:left}
  .reg-chks{grid-template-columns:1fr 1fr}
}