/* ═══════════════════════════════════════════════════════════════
   Denver Entrepreneur's Supper Club
   Loading → Edition → Application. Nothing else on the page.

   Palette   forest #345549 (brand) · cream #FBF6E4 · brass #B9974F
   Type      Pinyon Script (roundhand) · Bodoni Moda (didone)
             Instrument Sans (utility)
   ═══════════════════════════════════════════════════════════════ */

:root{
  --green:        #345549;
  --green-deep:   #1B2E27;
  --green-dark:   #12201B;
  --cream:        #FBF6E4;
  --cream-dim:    #D9D3C0;
  --sage:         #93A79B;   /* neutral, biased toward the brand hue */
  --brass:        #B9974F;
  --line:         rgba(251,246,228,.16);
  --line-soft:    rgba(251,246,228,.08);

  --script: "Pinyon Script", cursive;
  --didone: "Bodoni Moda", Georgia, serif;
  --util:   "Instrument Sans", -apple-system, system-ui, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

/* display:flex on .form/.done/.gate would otherwise beat the hidden attribute */
[hidden]{ display:none !important; }

body{
  margin:0; min-height:100vh;
  background:var(--green-dark);
  color:var(--cream);
  font-family:var(--util);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* Ambient light from the top of the room */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(61,98,85,.55), transparent 62%),
    radial-gradient(80% 50% at 50% 108%, rgba(185,151,79,.10), transparent 70%);
}

.mark__script{ font-family:var(--script); font-size:118px; fill:currentColor; }

@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes riseIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ── 1. Loading ──────────────────────────────────────────────── */
.loader{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  background:var(--green); color:var(--cream);
  transition:opacity .8s var(--ease), visibility .8s;
}
.loader.is-out{ opacity:0; visibility:hidden; }

.mark{ width:min(58vw,90vh,340px); height:auto; display:block; overflow:visible; }
.mark__ring{
  fill:none; stroke:var(--cream); stroke-width:2.4;
  stroke-dasharray:940; stroke-dashoffset:940;
  animation:draw 1.7s var(--ease) forwards;
}
.loader .mark__script{ opacity:0; animation:riseIn .9s var(--ease) .85s forwards; }

/* ── 2. The edition ──────────────────────────────────────────── */
.gate{
  position:relative; z-index:1;
  min-height:100vh; min-height:100dvh;
  display:grid; place-items:center;
  padding:clamp(1.5rem,6vw,3rem);
  transition:opacity .5s var(--ease);
}
.gate.is-leaving{ opacity:0; }

.gate__inner{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(1.25rem,5vmin,2.5rem);
  text-align:center;
}

.lockup{
  margin:0; display:flex; flex-direction:column; align-items:center;
  line-height:.95;
  animation:riseIn .9s var(--ease) both;
}
/* vmin, not vw: on a short landscape phone the lockup must scale to the
   height it has, or it pushes the button off-screen */
.lockup__script{
  font-family:var(--script); font-weight:400;
  font-size:clamp(3.5rem,15vmin,8.5rem); line-height:.85;
}
.lockup__didone{
  font-family:var(--didone); font-weight:400;
  font-size:clamp(1.4rem,6vmin,3.4rem);
  text-transform:uppercase; margin-top:-.1em;
}
.lockup__rule{
  display:block; height:1px; width:100%;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
  margin:.75rem 0 .6rem;
}
.lockup__spaced{
  font-family:var(--util); font-size:clamp(.62rem,2vmin,.9rem);
  letter-spacing:.5em; text-transform:uppercase; color:var(--sage);
  text-indent:.5em;   /* balance the trailing letter-space */
}

.gate__edition{
  margin:0; font-family:var(--didone); font-style:italic;
  font-size:clamp(1rem,2.8vmin,1.35rem); color:var(--brass);
  animation:riseIn .8s var(--ease) .25s both;
}

.gate .btn{ animation:riseIn .8s var(--ease) .45s both; }

/* ── 3. The application ──────────────────────────────────────── */
.apply{
  position:relative; z-index:1;
  min-height:100vh; min-height:100dvh;
  display:grid; place-items:center;
  padding:clamp(1.25rem,5vw,3rem);
  animation:riseIn .6s var(--ease) both;
}
.apply__frame{
  width:min(52rem,100%);
  background:linear-gradient(170deg,var(--green) 0%,var(--green-deep) 100%);
  border:1px solid var(--line);
  padding:clamp(1.5rem,4.5vw,3rem);
  min-height:min(34rem,88vh);
  display:flex; flex-direction:column;
}

.apply__head{ display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.apply__edition{
  margin:0; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--sage);
}
.progress{ flex:1 1 6rem; height:1px; background:var(--line-soft); position:relative; min-width:5rem; }
.progress__fill{
  position:absolute; inset:0 auto 0 0; width:10%;
  background:var(--brass); transition:width .5s var(--ease);
}
.apply__count{
  margin:0; font-size:.72rem; letter-spacing:.18em; color:var(--sage);
  font-variant-numeric:tabular-nums;
}
.apply__count i{ font-style:normal; margin:0 .35em; opacity:.5; }

.form{ display:flex; flex-direction:column; flex:1; }
.stage{ flex:1; display:flex; align-items:center; padding:clamp(1.75rem,5vw,3rem) 0; }

.q{ width:100%; }
.q.is-in{ animation:qIn .5s var(--ease) both; }
@keyframes qIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.q__num{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass); margin:0 0 .8rem;
}
.q__label{
  margin:0 0 .5rem; font-family:var(--didone); font-weight:400;
  font-size:clamp(1.35rem,3.6vw,2.05rem); line-height:1.2; text-wrap:balance;
}
.q__help{ margin:0 0 1.6rem; color:var(--sage); font-size:.9rem; max-width:44ch; }

.q input[type=text], .q input[type=email], .q input[type=url], .q textarea{
  width:100%; background:transparent; color:var(--cream);
  border:0; border-bottom:1px solid var(--line);
  font-family:var(--didone); font-size:clamp(1.1rem,2.6vw,1.5rem);
  padding:.6rem 0; transition:border-color .25s;
}
.q input::placeholder, .q textarea::placeholder{ color:rgba(147,167,155,.5); }
.q input:focus, .q textarea:focus{ outline:none; border-bottom-color:var(--brass); }
.q textarea{ resize:vertical; min-height:6rem; line-height:1.5; }

.opts{ display:flex; flex-direction:column; gap:.55rem; }
.opt{
  display:flex; align-items:center; gap:.9rem; cursor:pointer;
  padding:.8rem 1.1rem; border:1px solid var(--line); border-radius:2px;
  transition:border-color .2s, background .2s;
}
.opt:hover{ border-color:var(--cream-dim); }
.opt input{ position:absolute; opacity:0; pointer-events:none; }
.opt__key{
  flex:0 0 auto; width:1.7rem; height:1.7rem; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:2px;
  font-size:.7rem; color:var(--sage);
  transition:border-color .2s, background .2s, color .2s;
}
.opt__text{ font-size:.98rem; }
.opt:has(input:checked){ border-color:var(--brass); background:rgba(185,151,79,.1); }
.opt:has(input:checked) .opt__key{ background:var(--brass); border-color:var(--brass); color:var(--green-dark); }

.q__error{ margin:1rem 0 0; font-size:.82rem; color:#E9B4A0; min-height:1.2em; }

.form__foot{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  padding-top:1.5rem; border-top:1px solid var(--line-soft);
}
.form__hint{ margin:0 0 0 auto; font-size:.72rem; color:var(--sage); }
.form__hint kbd{
  font-family:var(--util); font-size:.7rem; padding:.15rem .4rem;
  border:1px solid var(--line); border-radius:2px;
}

/* Confirmation */
.done{
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; gap:1rem; padding:2rem 0;
  animation:qIn .6s var(--ease) both;
}
.done__seal{ width:140px; color:var(--brass); overflow:visible; }
.done__seal ellipse{ fill:none; stroke:currentColor; stroke-width:3; }
.done h2{ margin:.5rem 0 0; font-family:var(--didone); font-weight:400; font-size:clamp(1.5rem,4vw,2.1rem); }
.done p{ margin:0; color:var(--cream-dim); max-width:36ch; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn{
  font-family:var(--util); font-size:.8rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.9rem 1.7rem; border-radius:2px; border:1px solid transparent;
  cursor:pointer;
  transition:background .25s, color .25s, border-color .25s, transform .15s;
}
.btn:active{ transform:translateY(1px); }
.btn--solid{ background:var(--cream); color:var(--green-dark); }
.btn--solid:hover{ background:#fff; }
.btn--ghost{ background:transparent; color:var(--cream-dim); border-color:var(--line); }
.btn--ghost:hover{ color:var(--cream); border-color:var(--cream-dim); }
.btn[disabled]{ opacity:.35; cursor:not-allowed; }

:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

@media (max-width:34rem){
  .form__hint{ display:none; }
  .form__foot .btn{ flex:1; }
  /* edition + count on one row, progress rule spanning below them */
  .apply__head{ gap:.7rem 1rem; }
  .progress{ order:3; flex:1 0 100%; }
}

/* Short screens (small phones, landscape): tighten so the longest question
   still fits without the controls falling below the fold */
@media (max-height:740px), (max-width:26rem){
  .apply__frame{ min-height:0; padding:clamp(1.1rem,3.5vw,2rem); }
  .stage{ padding:clamp(1.1rem,3vh,2rem) 0; }
  .opts{ gap:.4rem; }
  .opt{ padding:.65rem 1rem; }
  .q__help{ margin-bottom:1.1rem; }
  .q__error{ margin-top:.6rem; }
}

/* Landscape phone: short and wide, so spend the width instead of the height */
@media (max-height:500px) and (min-width:600px){
  .opts{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem .6rem; }
  .q__help{ margin-bottom:.9rem; }
}

/* Touch devices have no keyboard: don't advertise shortcuts that can't be used */
@media (hover:none){
  .opt__key{ display:none; }
  .form__hint{ display:none; }
  .opt{ padding:1rem 1.15rem; }   /* reclaim the space as tap target */
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .mark__ring{ stroke-dashoffset:0; }
  .loader .mark__script{ opacity:1; }
}