/* ============================================================
   The Prom Collection — dress-rehearsal.css
   ------------------------------------------------------------
   Page-only styles for /dress-rehearsal, the open day on
   Sunday 18 October 2026. Everything is prefixed .dr- and the
   page body carries .dr, so nothing here can leak into the rest
   of the site. It is loaded AFTER styles.css and uses that
   file's tokens (--rose, --taupe, --ivory, --serif and so on)
   so the page cannot drift from the brand.

   AFTER 18 OCTOBER 2026 this whole file can be deleted along
   with the page. See PUSH-DRESS-REHEARSAL-2026-09-09.cmd for
   the full teardown list.
   ============================================================ */

.dr{ --dr-ink:#3A222C; --dr-ink-2:#2A1720; --dr-gold:#E4C08D; }

/* ---------------- Hero ---------------- */
.dr-hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1200px 620px at 78% 8%, rgba(184,92,122,.42), transparent 62%),
    linear-gradient(158deg, #4A2B38 0%, var(--dr-ink-2) 52%, #402530 100%);
  color:#F7E9EC;
  padding:clamp(52px,7vw,96px) 0 clamp(60px,8vw,104px);
}
.dr-drift{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.dr-hero .wrap{position:relative;z-index:1}
.dr-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,68px);align-items:center}
.dr-hero h1,.dr-hero h2,.dr-hero h3{color:#fff}
.dr-eyebrow{color:var(--dr-gold)}
.dr-title{font-size:clamp(3rem,8.4vw,5.6rem);line-height:.98;margin:.24em 0 .34em;letter-spacing:-.01em}
.dr-title .script{color:var(--dr-gold)}
.dr-lede{color:rgba(247,233,236,.86);font-size:clamp(1rem,1.5vw,1.1rem);max-width:36em}
.dr-hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:30px}
.dr-hero .btn-light{background:#fff;color:var(--rose-deep);box-shadow:0 16px 34px -16px rgba(0,0,0,.55)}
.dr-hero .btn-light:hover{background:var(--ivory);color:var(--rose-deep);transform:translateY(-2px)}
.dr-link{color:var(--dr-gold);font-size:.86rem;letter-spacing:.06em;border-bottom:1px solid rgba(228,192,141,.4);padding-bottom:3px}
.dr-link:hover{border-bottom-color:var(--dr-gold)}
.dr-hero-note{margin-top:26px;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,233,236,.62)}
.dr-hero-note span{opacity:.5;margin:0 .55em}

/* Hero art: the rails photograph in the house arch, with the ticket over it */
.dr-hero-art{position:relative}
.dr-arch{
  border-radius:var(--arch); overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.7);
  border:1px solid rgba(255,255,255,.14);
}
.dr-arch img{width:100%;height:100%;object-fit:cover;display:block}

/* The ticket. Perforated top edge, dashed tear line, kept deliberately
   plain so it reads as a thing you could hold. */
.dr-ticket{
  position:absolute; right:-8px; bottom:-30px; width:min(252px,64%);
  background:var(--ivory); color:var(--taupe);
  padding:22px 22px 20px; border-radius:12px;
  box-shadow:0 30px 60px -26px rgba(0,0,0,.6);
  text-align:center;
}
.dr-ticket::before{
  content:""; position:absolute; left:0; right:0; top:-6px; height:12px;
  background:radial-gradient(circle at 6px 6px, transparent 5px, var(--ivory) 5.5px) 0 0/12px 12px repeat-x;
}
.dr-ticket-kicker{font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--rose);font-weight:600}
.dr-ticket-day{font-family:var(--serif);font-size:1.32rem;margin-top:8px;line-height:1}
.dr-ticket-date{font-family:var(--serif);line-height:1;margin:2px 0 8px}
.dr-ticket-date .dr-num{font-size:3.5rem;font-weight:500;color:var(--rose);display:block}
.dr-ticket-date .dr-mon{font-size:1.1rem;letter-spacing:.05em}
.dr-ticket-time{font-size:.86rem;color:var(--taupe-70);line-height:1.5}
.dr-ticket-time span{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin-top:2px}
.dr-perf{height:1px;border-top:1px dashed var(--line);margin:14px -22px;position:relative}
.dr-perf::before,.dr-perf::after{
  content:"";position:absolute;top:-8px;width:16px;height:16px;border-radius:50%;
  background:var(--dr-ink-2);
}
.dr-perf::before{left:-8px}
.dr-perf::after{right:-8px}
.dr-ticket-where{font-size:.8rem;color:var(--taupe-70);line-height:1.55}
.dr-ticket-free{margin-top:10px;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--rose);font-weight:600}

/* ---------------- The one rule: no try-ons ----------------
   Deliberately the loudest thing on the page after the hero. Brit's
   worry is people arriving expecting a fitting, so this sits directly
   under the fold, carries the only left rule on the page and is the
   only block on the blush ground. Leave it where it is. */
/* Bottom padding matters: the section below is champagne-soft, which is
   almost the same pink as the notice. Without a band of ivory between
   them the card loses its edge and stops reading as a notice. */
.dr-notice-sec{padding:clamp(34px,4.5vw,52px) 0 clamp(30px,4vw,46px)}
.dr-notice{
  display:flex;gap:clamp(16px,2.4vw,26px);align-items:flex-start;
  background:var(--blush);border:1px solid rgba(184,92,122,.26);
  border-left:5px solid var(--rose);border-radius:14px;
  padding:clamp(22px,3vw,32px) clamp(22px,3.2vw,36px);
  max-width:940px;margin:0 auto;box-shadow:var(--shadow-soft);
}
.dr-notice-mark{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  background:var(--rose);color:#fff;display:grid;place-items:center;
}
.dr-notice-mark svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dr-notice h2{font-size:clamp(1.32rem,2.5vw,1.8rem);font-weight:600;margin-bottom:10px;line-height:1.15}
.dr-notice p{color:var(--taupe-70);font-size:.97rem;max-width:66ch}
.dr-notice p + p{margin-top:.65rem}

/* ---------------- Shared section furniture ---------------- */
.dr-sec{padding:clamp(56px,7.5vw,104px) 0}
.dr-paper{background:var(--champagne-soft)}
.dr-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,30px)}
.dr-card{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:clamp(24px,2.6vw,32px);box-shadow:var(--shadow-soft);
}
.dr-card h3{font-size:1.3rem;font-weight:600;margin:12px 0 8px}
.dr-card p{color:var(--taupe-70);font-size:.94rem}
.dr-card a{color:var(--rose);border-bottom:1px solid var(--line)}
.dr-card a:hover{border-bottom-color:var(--rose)}
.dr-num-tag{font-family:var(--serif);font-size:1.5rem;color:var(--rose);line-height:1;display:block}

/* On the day, on the dark band */
.dr-day{background:var(--dr-ink);color:#F7E9EC}
.dr-day h2,.dr-day h3{color:#fff}
.dr-day .sec-head p{color:rgba(247,233,236,.78)}
.dr-day-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,30px);list-style:none}
.dr-day-card{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  border-radius:14px;padding:clamp(22px,2.4vw,30px);
}
.dr-day-card h3{font-size:1.24rem;font-weight:600;margin:10px 0 8px}
.dr-day-card p{color:rgba(247,233,236,.78);font-size:.93rem}
.dr-day-card a{color:var(--dr-gold);border-bottom:1px solid rgba(228,192,141,.4)}
.dr-day-card .dr-num-tag{color:var(--dr-gold)}
.dr-more{
  text-align:center;margin-top:clamp(28px,3.5vw,42px);
  color:rgba(247,233,236,.66);font-size:.9rem;max-width:46em;margin-left:auto;margin-right:auto;
}

/* Steps */
.dr-steps{counter-reset:dr;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,40px);list-style:none}
.dr-steps li{position:relative;padding-top:52px}
.dr-steps li::before{
  counter-increment:dr;content:"0" counter(dr);
  position:absolute;top:0;left:0;font-family:var(--serif);font-size:2.4rem;color:var(--rose);line-height:1;
}
.dr-steps h3{font-size:1.28rem;font-weight:600;margin-bottom:8px}
.dr-steps p{color:var(--taupe-70);font-size:.95rem}

/* ---------------- Register ---------------- */
.dr-form-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:clamp(26px,4vw,54px);max-width:840px;margin:0 auto;box-shadow:var(--shadow);
}
.dr-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 1.3rem}
.dr-field{margin-bottom:1.15rem}
.dr-field label{
  display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--taupe-70);margin-bottom:.42rem;font-weight:600;
}
.dr-req{color:var(--rose)}
.dr-opt{text-transform:none;letter-spacing:.02em;font-weight:400;opacity:.7;font-size:.72rem}
.dr-field input,.dr-field select{
  width:100%;padding:.78rem .85rem;font-family:var(--sans);font-size:.98rem;font-weight:300;
  border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--taupe);
  transition:border-color .25s, box-shadow .25s;
}
.dr-field input:focus,.dr-field select:focus{
  outline:none;border-color:var(--rose);box-shadow:0 0 0 3px rgba(184,92,122,.14);
}
.dr-field input::placeholder{color:var(--taupe-45)}
.dr-field input.dr-bad{border-color:#9a2f3f;box-shadow:0 0 0 3px rgba(154,47,63,.12)}
.dr-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.dr-msg{min-height:1.4rem;font-size:.9rem;margin:.2rem 0 .6rem}
.dr-msg .err{color:#9a2f3f}
.dr-msg .info{color:var(--taupe-70)}
.dr-submit-row{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;margin-top:.6rem}
.dr-privacy{font-size:.8rem;color:var(--taupe-70);flex:1 1 260px;line-height:1.6}
.dr-privacy a{color:var(--rose);border-bottom:1px solid var(--line)}
.dr-guardian{
  background:var(--champagne-soft);border:1px solid var(--line);border-radius:10px;
  padding:.85rem 1.05rem;font-size:.86rem;color:var(--taupe-70);margin:.2rem 0 1.2rem;line-height:1.6;
}

/* Success state */
.dr-done{text-align:center}
.dr-done-mark{width:76px;height:76px;margin:0 auto 1.2rem}
.dr-done-mark svg{width:100%;height:100%;fill:none;stroke:var(--rose);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.dr-done-ring{stroke-dasharray:183;stroke-dashoffset:183;animation:dr-ring .7s cubic-bezier(.2,.7,.3,1) forwards}
.dr-done-tick{stroke-dasharray:40;stroke-dashoffset:40;animation:dr-tick .4s cubic-bezier(.2,.7,.3,1) .55s forwards}
@keyframes dr-ring{to{stroke-dashoffset:0}}
@keyframes dr-tick{to{stroke-dashoffset:0}}
.dr-done-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:1.4rem}
.dr-done-share{font-size:.88rem;color:var(--taupe-70);max-width:38em;margin:0 auto}

/* FAQ */
.dr-faq-list{max-width:780px;margin:0 auto}
.dr-q{border-bottom:1px solid var(--line)}
.dr-q summary{
  cursor:pointer;list-style:none;padding:1.15rem 2rem 1.15rem 0;position:relative;
  font-family:var(--serif);font-size:1.22rem;font-weight:500;color:var(--taupe);
}
.dr-q summary::-webkit-details-marker{display:none}
.dr-q summary::after{
  content:"";position:absolute;right:4px;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--rose);border-bottom:1.5px solid var(--rose);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s;
}
.dr-q[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.dr-q p{padding:0 0 1.3rem;color:var(--taupe-70);font-size:.96rem;max-width:64ch}

/* Final strip */
.dr-final{background:var(--rose);color:var(--blush);text-align:center;padding:clamp(56px,7.5vw,100px) 0}
.dr-final h2{color:#fff;font-size:clamp(2.1rem,5vw,3.4rem);margin:.24em 0 .3em}
.dr-final .dr-eyebrow{color:rgba(255,255,255,.8)}
.dr-final p{color:rgba(255,246,246,.88);max-width:44em;margin:0 auto}
.dr-final-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:32px 0 20px}
.dr-final .btn-light{background:#fff;color:var(--rose);box-shadow:0 16px 34px -16px rgba(0,0,0,.4)}
.dr-final .btn-light:hover{background:var(--ivory);color:var(--rose-deep)}
.dr-final .btn-outline-light{border:1px solid rgba(255,255,255,.55);color:#fff}
.dr-final .btn-outline-light:hover{background:#fff;color:var(--rose)}
.dr-final-note{font-size:.88rem;color:rgba(255,246,246,.8)}
.dr-final-note a{color:#fff;border-bottom:1px solid rgba(255,255,255,.5)}

/* Confetti sits above everything, catches nothing */
.dr-confetti{
  position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:120;
  opacity:0;transition:opacity .3s;
}
.dr-confetti.firing{opacity:1}

/* ---------------- Responsive ---------------- */
@media (max-width:980px){
  .dr-hero-grid{grid-template-columns:1fr}
  .dr-hero-art{max-width:520px;margin:14px auto 40px;width:100%}
  .dr-ticket{right:0;bottom:-26px}
  .dr-cards,.dr-day-grid,.dr-steps{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .dr-cards,.dr-day-grid,.dr-steps,.dr-grid2{grid-template-columns:1fr}
  .dr-notice{flex-direction:column;gap:15px}
  /* The ticket drops below the photo rather than sitting over it. It must
     stay POSITIONED, not static: its scalloped top edge is an absolutely
     positioned ::before, and with the ticket static that pseudo-element
     escapes up to .dr-hero-art and lands across the top of the photo. */
  .dr-ticket{position:relative;right:auto;bottom:auto;width:100%;margin-top:26px}
  .dr-hero-art{margin-bottom:0}
  .dr-hero-note{letter-spacing:.13em;line-height:2}
  .dr-submit-row .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .dr-done-ring,.dr-done-tick{animation:none;stroke-dashoffset:0}
}