/* ============================================================
   TWO DOORS — shared design system

   One world, two rooms. The gates and the admin tooling live in a
   dim, warm, brass-lit room; the invitation itself opens onto
   paper and daylight. Every colour is painted explicitly, so
   nothing borrows a background from whatever is behind it.
   ============================================================ */

:root{
  /* dim room */
  --ink:        #12100E;
  --ink-2:      #1A1715;
  --ink-3:      #241F1B;
  --hairline:   #332C26;
  --brass:      #C9A227;
  --brass-soft: #E3C767;
  --brass-dim:  #6E5A1C;
  --moss:       #4C6B57;
  --moss-deep:  #2F4437;
  --ash:        #9A9086;
  --ash-dim:    #6B635B;
  --gate-text:  #EDE6DA;

  /* daylight */
  --paper:      #E9E7DE;
  --paper-2:    #F2F0E9;
  --paper-line: #CFCCBF;
  --paper-ink:  #1B201C;
  --paper-mute: #5E655D;

  --ok:    #6FA57C;
  --warn:  #C2603F;
  --alert: #D4A24C;

  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --body: "Karla", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --disp: "Fraunces", "Iowan Old Style", Georgia, serif;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--gate-text);
  font-family:var(--body);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body.paper{ background:var(--paper); color:var(--paper-ink); }

a{ color:inherit; }
img{ max-width:100%; }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:2px; }

/* Honeypot field — off-screen rather than display:none, so a bot filling
   every input in the DOM still catches it, while a real screen-reader
   user (aria-hidden + tabindex="-1" on the input itself) never lands on it. */
.hp{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- the lit room ---------- */
.room{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 8%, #2A231C 0%, #16130F 45%, #0C0A08 100%);
}
.room::after{
  content:""; position:absolute; inset:0;
  background-image:var(--grain); opacity:.055; mix-blend-mode:overlay;
}
.lamp{
  position:absolute; left:50%; top:-18%;
  width:min(900px,150vw); aspect-ratio:1; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(201,162,39,.16) 0%, rgba(201,162,39,.04) 38%, transparent 66%);
  animation:breathe 11s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ opacity:.75; transform:translateX(-50%) scale(1) }
  50%    { opacity:1;   transform:translateX(-50%) scale(1.07) }
}

/* ---------- centred panel layout ---------- */
.stage{
  position:relative; z-index:1;
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; padding-block:48px; padding-left:20px; padding-right:20px;
}
.crest{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.crest-word{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--brass-dim); margin:0;
}
.panel{
  width:100%; max-width:430px;
  background:linear-gradient(180deg,var(--ink-2) 0%,#151210 100%);
  border:1px solid var(--hairline); border-radius:var(--r-md);
  padding:30px 26px 26px;
  box-shadow:0 24px 60px -28px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.035);
}
.panel-head{ display:flex; flex-direction:column; gap:7px; margin-bottom:22px; }
.eyebrow{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--brass); margin:0;
  display:flex; align-items:center; gap:9px;
}
.eyebrow::after{ content:""; flex:1; height:1px; background:var(--hairline); }
.panel-title{
  font-family:var(--disp); font-optical-sizing:auto;
  font-size:1.6rem; font-weight:600; line-height:1.15; margin:0;
  text-wrap:balance; color:var(--gate-text);
}
.panel-sub{ margin:0; color:var(--ash); font-size:.9rem; line-height:1.55; }

/* ---------- forms ---------- */
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field-label{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ash-dim);
}
.input, .select{
  width:100%; background:#100E0C; border:1px solid var(--hairline);
  border-radius:var(--r-sm); color:var(--gate-text);
  font-family:var(--body); font-size:1rem; padding:12px 13px;
  transition:border-color .18s ease, background .18s ease;
}
.input::placeholder{ color:#5A5149; }
.input:hover,.select:hover{ border-color:#453B32; }
.input:focus,.select:focus{ border-color:var(--brass-dim); background:#131010; outline:none; }
.input.tel{ font-family:var(--mono); font-size:1.06rem; letter-spacing:.04em; }
.input[aria-invalid="true"]{ border-color:var(--warn); }

.err{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.05em;
  color:var(--warn); margin:0; min-height:0;
}

.carried{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#100E0C; border:1px dashed var(--brass-dim);
  border-radius:var(--r-sm); padding:11px 13px;
}
.carried-val{ font-family:var(--mono); font-size:1rem; letter-spacing:.04em; color:var(--brass-soft); }
.carried-edit{
  background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--mono); font-size:.63rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ash-dim);
  text-decoration:underline; text-underline-offset:3px;
}
.carried-edit:hover{ color:var(--brass); }

/* headcount: two small number fields sitting as one object */
.counts{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.count{ display:flex; flex-direction:column; gap:5px; }
.count > span{
  font-family:var(--body); font-size:.82rem; color:var(--ash);
}
.input.num{
  font-family:var(--mono); font-size:1.06rem;
  font-variant-numeric:tabular-nums; text-align:center; padding:11px 8px;
}

/* allergy checkbox */
.toggle{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  margin-bottom:14px; font-size:.88rem; color:var(--ash); line-height:1.45;
}
.toggle input{
  appearance:none; -webkit-appearance:none;
  flex:none; width:19px; height:19px; margin:1px 0 0;
  border:1.5px solid #4A3F33; border-radius:3px; background:#0B0908;
  cursor:pointer; display:grid; place-items:center;
  transition:border-color .15s ease, background .15s ease;
}
.toggle input:hover{ border-color:var(--brass-dim); }
.toggle input:checked{ border-color:var(--brass); background:rgba(201,162,39,.16); }
.toggle input:checked::after{
  content:""; width:9px; height:5px; margin-top:-2px;
  border-left:2px solid var(--brass); border-bottom:2px solid var(--brass);
  transform:rotate(-45deg);
}
.toggle input:checked + span{ color:var(--gate-text); }

textarea.input.area{
  resize:vertical; min-height:76px; line-height:1.55; font-size:.95rem;
}

.chips{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{
  font-family:var(--body); font-size:.84rem;
  background:#100E0C; color:var(--ash);
  border:1px solid var(--hairline); border-radius:999px;
  padding:7px 13px; cursor:pointer;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.chip:hover{ border-color:#4A3F33; color:var(--gate-text); }
.chip[aria-pressed="true"]{
  background:rgba(201,162,39,.1); border-color:var(--brass); color:var(--brass-soft);
}

.go{
  width:100%; margin-top:4px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  background:var(--brass); color:#181308;
  border:1px solid var(--brass); border-radius:var(--r-sm);
  padding:14px 16px; cursor:pointer;
  transition:background .18s ease, transform .12s ease;
}
.go:hover:not(:disabled){ background:var(--brass-soft); }
.go:active:not(:disabled){ transform:translateY(1px); }
.go:disabled{ background:transparent; color:var(--ash-dim); border-color:var(--hairline); cursor:not-allowed; }
.go.ghost{ background:transparent; color:var(--ash); border-color:var(--hairline); }
.go.ghost:hover{ background:var(--ink-3); color:var(--gate-text); }

.fineprint{
  margin:14px 0 0; text-align:center;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.11em;
  line-height:1.9; color:#544C44; text-transform:uppercase;
}


.rail{ display:flex; gap:6px; width:100%; max-width:430px; }
.rail-seg{ flex:1; height:2px; background:var(--hairline); overflow:hidden; }
.rail-seg span{ display:block; height:100%; width:0; background:var(--brass); transition:width .45s cubic-bezier(.2,.7,.3,1); }
.rail-seg.on span{ width:100%; }

.swap-out{ animation:swapOut .32s ease forwards; }
.swap-in { animation:swapIn  .42s cubic-bezier(.2,.7,.3,1) both; }
@keyframes swapOut{ to{ opacity:0; transform:translateY(-6px) } }
@keyframes swapIn { from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

/* ---------- the popup ---------- */
.scrim{
  position:fixed; inset:0; z-index:40;
  background:rgba(8,7,6,.74);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:grid; place-items:center; padding:20px;
  animation:fadeIn .22s ease both;
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.popup{
  width:100%; max-width:380px; text-align:center;
  background:linear-gradient(180deg,var(--ink-3) 0%,#171310 100%);
  border:1px solid var(--brass-dim); border-radius:var(--r-md);
  padding:30px 26px 26px; box-shadow:0 30px 70px -30px #000;
  animation:popIn .34s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes popIn{ from{ opacity:0; transform:scale(.94) translateY(8px) } to{ opacity:1; transform:none } }
.popup h2{ font-family:var(--disp); font-weight:600; font-size:1.22rem; margin:0 0 8px; color:var(--gate-text); text-wrap:balance; }
.popup p{ margin:0; color:var(--ash); font-size:.9rem; }
.popup-meta{
  margin-top:18px; padding-top:14px; border-top:1px solid var(--hairline);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass-dim);
}

/* ============================================================
   DAYLIGHT — the invitation
   ============================================================ */
.wrap{ max-width:74ch; margin:0 auto; padding-left:22px; padding-right:22px; }

.hero{ padding-block:clamp(56px,11vw,104px) clamp(34px,6vw,54px); }
.hero-eyebrow{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--moss); margin:0 0 18px;
}
.hero-name{
  font-family:var(--disp); font-optical-sizing:auto; font-weight:700;
  font-size:clamp(2.9rem,12.5vw,6.6rem); line-height:.92; letter-spacing:-.025em;
  margin:0; color:var(--paper-ink); text-wrap:balance;
}
.hero-name em{ font-style:italic; font-weight:400; color:var(--moss-deep); display:block; }
.hero-rule{ height:1px; background:var(--paper-line); margin-block:clamp(26px,5vw,40px); }
.greeting{ font-size:1.22rem; line-height:1.5; margin:0; color:var(--paper-ink); max-width:56ch; }
.greeting b{ font-weight:700; }
.greeting .rel{ display:block; margin-top:12px; font-size:1rem; color:var(--paper-mute); }

.sec{ padding-block:clamp(40px,7vw,62px); border-top:1px solid var(--paper-line); }
.sec-label{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--moss); margin:0 0 26px;
}

.chapters{ display:flex; flex-direction:column; gap:34px; }
.chapter{ display:grid; grid-template-columns:5.5rem 1fr; gap:20px; align-items:start; }
.chapter-year{
  font-family:var(--mono); font-size:.8rem; font-variant-numeric:tabular-nums;
  color:var(--moss); padding-top:.45rem; border-top:2px solid var(--moss);
}
.chapter-h{
  font-family:var(--disp); font-weight:600; font-size:1.22rem; line-height:1.25;
  margin:0 0 8px; color:var(--paper-ink); text-wrap:balance;
}
.chapter-p{ margin:0; color:var(--paper-mute); line-height:1.7; }

.card{
  background:var(--paper-2); border:1px solid var(--moss);
  border-radius:var(--r-md); padding:clamp(24px,5vw,38px);
  box-shadow:0 18px 44px -32px rgba(30,45,34,.7);
}
.card-top{
  font-family:var(--disp); font-style:italic; font-weight:400;
  font-size:1.6rem; line-height:1.2; margin:0 0 4px;
  color:var(--moss-deep); text-wrap:balance;
}
.card-sub{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--paper-mute); margin:0 0 26px;
}
.rows{ display:flex; flex-direction:column; }
.row{
  display:grid; grid-template-columns:6.5rem 1fr; gap:16px;
  padding-block:14px; border-top:1px solid var(--paper-line); align-items:baseline;
}
.row:first-child{ border-top:none; padding-top:0; }
.row-k{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--paper-mute);
}
.row-v{ margin:0; color:var(--paper-ink); line-height:1.55; }
.row-v .big{ font-size:1.22rem; font-weight:600; }
.row-v a{ color:var(--moss-deep); text-underline-offset:3px; }
.row-v small{ display:block; color:var(--paper-mute); font-size:.84rem; margin-top:3px; }

/* the guest's own QR, shown back on the page */
.pass{
  display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center;
  background:var(--ink); border-radius:var(--r-md); padding:clamp(20px,4vw,30px);
}
.pass img{ width:150px; height:150px; display:block; background:#fff; padding:8px; border-radius:4px; }
.pass-copy h3{ font-family:var(--disp); font-weight:600; font-size:1.22rem; margin:0 0 8px; color:var(--gate-text); }
.pass-copy p{ margin:0 0 10px; color:var(--ash); font-size:.92rem; line-height:1.6; }
.pass-code{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brass);
}
@media (max-width:520px){
  .pass{ grid-template-columns:1fr; justify-items:center; text-align:center; }
}

.sign{ font-family:var(--disp); font-style:italic; font-size:1.22rem; color:var(--moss-deep); margin:0 0 6px; }
.colophon{
  padding-block:34px 54px; border-top:1px solid var(--paper-line);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--paper-mute); line-height:2;
  display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between;
}

@media (max-width:430px){
  .chapter{ grid-template-columns:1fr; gap:8px; }
  .chapter-year{ border-top:none; padding-top:0; }
  .row{ grid-template-columns:1fr; gap:4px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}