/* ============================================================
   Friends of Lucile — Hotel Lucile
   Brand system: Golden cream #fef9ed · Noir #211F1F
   Griffo Classico (serif body/headings) · SJU Record (ornamental
   field labels) · Basis Grotesque (eyebrows, nav, buttons)
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face{font-family:'Griffo Classico';src:url('fonts/GriffoClassico-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Griffo Classico';src:url('fonts/GriffoClassico-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Basis Grotesque';src:url('fonts/BasisGrotesque-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'SJU Record';src:url('fonts/SJURecord-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box;}
html,body{margin:0;background:#fef9ed;min-height:100vh;}
body{color:#211F1F;}
[hidden]{display:none !important;}
a{transition:opacity .25s ease;}
a:hover{opacity:.6;}
::selection{background:#211F1F;color:#fef9ed;}
input::placeholder{color:#a9a196;font-family:'Basis Grotesque',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:11px;}

/* ---------- Header / nav ---------- */
.nav{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:9px 44px;border-bottom:1px solid #211F1F;
}
.nav__side{
  justify-self:start;
  font:10px 'Basis Grotesque',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#211F1F;
}
.nav__side--right{justify-self:end;}
.nav__logo{
  justify-self:center;height:64px;width:auto;display:block;
  image-rendering:-webkit-optimize-contrast;
}

/* ---------- Hero ---------- */
.hero{
  height:78vh;min-height:540px;
  background:url('assets/hero.jpg') center 42% / cover no-repeat;
}

/* ---------- Intro ---------- */
.intro{max-width:680px;margin:0 auto;padding:48px 40px 40px;text-align:center;}
.intro__title{
  margin:0;font-family:'Griffo Classico',Georgia,serif;font-weight:400;
  font-size:34px;line-height:1.12;color:#211F1F;
}
.intro__body{
  margin:28px 0 0;font-family:'Griffo Classico',Georgia,serif;
  font-size:17px;line-height:1.78;color:#211F1F;
}
.intro__links{margin-top:30px;display:flex;gap:40px;justify-content:center;}

.link-underline{
  font:10px 'Basis Grotesque',sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:#211F1F;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;
}

/* ---------- Form section ---------- */
.form-section{border-top:1px solid #211F1F;background:#FFFFFF;}
.form-section__stem{width:1px;height:42px;background:#211F1F;margin:0 auto;}
.form-section__inner{max-width:720px;margin:0 auto;padding:44px 40px 64px;}

.form__title{
  margin:0 0 4px;font-family:'Griffo Classico',Georgia,serif;
  font-size:34px;line-height:1.12;color:#211F1F;
}
.form__note{
  margin:0 0 26px;font-family:'Griffo Classico',Georgia,serif;font-style:italic;
  font-size:16px;color:#8a847e;
}

/* Submitter (name / email) */
.submitter{
  display:grid;grid-template-columns:1fr 1fr;gap:16px 22px;margin-bottom:30px;
}

/* Fields */
.field{display:flex;flex-direction:column;gap:8px;}
.field--full{grid-column:1 / -1;}
.field__label{font-family:'SJU Record',Georgia,serif;font-size:15px;color:#33302b;}
.field__optional{
  text-transform:none;letter-spacing:0;font-style:italic;
  font-family:'Griffo Classico',serif;color:#b0a99f;
}
.field__optional--sm{font-size:13px;}
.field__input{
  border:none;border-bottom:1px solid rgba(33,31,31,.32);background:transparent;
  font-family:'Griffo Classico',Georgia,serif;font-size:18px;color:#211F1F;
  padding:8px 0;outline:none;transition:border-color .2s ease;
}
.field__input:focus{border-bottom-color:#211F1F;}
.field__input--sm{font-size:17px;padding:7px 0;border-bottom-color:rgba(33,31,31,.3);}

/* Tabs */
.tabs{
  display:flex;gap:34px;border-bottom:1px solid rgba(33,31,31,.16);margin-bottom:34px;
}
.tab{
  padding:0 0 13px;margin-bottom:-1px;border:none;background:none;
  color:#a39c94;border-bottom:2px solid transparent;
  font:11px 'Basis Grotesque',sans-serif;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;transition:all .2s;
}
.tab.is-active{color:#211F1F;border-bottom-color:#211F1F;}

/* Guest rows */
.guest{border-top:1px solid rgba(33,31,31,.14);padding:24px 0 4px;}
.guest__head{
  display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;
}
.guest__num{
  font:10px 'Basis Grotesque',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#6b6560;
}
.guest__remove{
  border:none;background:none;
  font:10px 'Basis Grotesque',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:#a39c94;cursor:pointer;transition:color .2s ease;
}
.guest__remove:hover{color:#211F1F;}
.guest__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;}
.guest .field{gap:7px;}

.add-guest{
  margin-top:18px;border:none;background:none;
  font:10px 'Basis Grotesque',sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:#211F1F;cursor:pointer;padding:0;transition:opacity .2s ease;
}
.add-guest:hover{opacity:.55;}

/* Upload / dropzone */
.dropzone{
  border:1px dashed rgba(33,31,31,.4);background:transparent;
  padding:46px 30px;text-align:center;transition:all .2s;
}
.dropzone.is-dragging{border-style:solid;border-color:#211F1F;background:rgba(33,31,31,.04);}
.dropzone__title{margin:0 0 8px;font-family:'Griffo Classico',Georgia,serif;font-size:20px;color:#211F1F;}
.dropzone__hint{
  margin:0 0 22px;font:10px 'Basis Grotesque',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#8a847e;
}
.dropzone__count{
  margin:0 0 20px;font:10px 'Basis Grotesque',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#6b6560;
}
.template-line{
  margin:18px 0 0;text-align:center;
  font:11px 'Basis Grotesque',sans-serif;letter-spacing:.04em;color:#8a847e;
}
.template-line a{color:#211F1F;}

/* Buttons */
.btn-solid{
  display:inline-block;
  font:11px 'Basis Grotesque',sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:#fef9ed;background:#211F1F;padding:12px 24px;border:none;border-radius:2px;cursor:pointer;
  transition:opacity .2s ease;
}
.btn-solid:hover{opacity:.85;}
.btn-solid--send{font-size:10px;padding:14px 32px;}

.btn-outline{
  border:1px solid #211F1F;background:none;
  font:12px 'Basis Grotesque',sans-serif;letter-spacing:.18em;text-transform:uppercase;
  color:#211F1F;padding:14px 30px;border-radius:2px;cursor:pointer;transition:all .2s ease;
}
.btn-outline:hover{background:#211F1F;color:#fef9ed;}
.btn-outline--sm{
  padding:10px 20px;font-size:10px;letter-spacing:.16em;
}

.submit-row{margin-top:26px;display:flex;justify-content:center;}

/* Error */
.form__error{
  margin:26px 0 0;font-family:'Griffo Classico',Georgia,serif;font-size:16px;font-style:italic;color:#9b3d2e;
}

/* Done state */
.done{text-align:center;padding:40px 0 24px;}
.done__eyebrow{
  margin:0 0 14px;font:11px 'Basis Grotesque',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#8a847e;
}
.done__title{margin:0;font-family:'Griffo Classico',Georgia,serif;font-weight:400;font-size:34px;color:#211F1F;}
.done__body{
  margin:24px auto 0;max-width:440px;font-family:'Griffo Classico',Georgia,serif;
  font-size:17px;line-height:1.72;color:#211F1F;
}
.done .btn-outline{margin-top:38px;}

/* Footer */
.footer{
  border-top:1px solid #211F1F;padding:14px 44px;
  display:flex;justify-content:space-between;align-items:center;
}
.footer__mark{
  font:10px 'Basis Grotesque',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#211F1F;
}
.footer__mark--muted{color:#8a847e;}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .nav{grid-template-columns:1fr;justify-items:center;padding:9px 20px;}
  .nav__side{display:none;}
  .nav__logo{height:52px;}
  .intro{padding:40px 24px 32px;}
  .form-section__inner{padding:36px 24px 52px;}
  .submitter,.guest__grid{grid-template-columns:1fr;}
  .footer{padding:14px 22px;}
}