/* ==========================================================================
   Designing Value — Global Stylesheet v2
   Fonts: Ovo (display serif), Open Sans 300 (body/UI)
   Pages: index.html, invite.html, eoi.html, brief.html,
          login.html, admin.html, guest.html
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  --canvas:        #F9F8F6;
  --ink:           #2D2D2D;
  --accent:        #5E1914;
  --vapor:         #E5E4E2;
  --muted:         #7A7975;

  --font-display:  'Ovo', Georgia, serif;
  --font-body:     'Open Sans', system-ui, sans-serif;
  --font-weight-body: 300;

  --text-hero:     clamp(2.8rem, 6vw, 5rem);
  --text-h2:       clamp(2rem, 4vw, 3.5rem);
  --text-h2-sm:    clamp(1.8rem, 3.5vw, 3rem);
  --text-h3:       1.25rem;
  --text-body:     0.8125rem;
  --text-ui:       0.75rem;
  --text-caption:  0.6875rem;
  --text-label:    0.5625rem;

  --leading-display: 1.08;
  --leading-h2:      1.12;
  --leading-body:    1.7;

  --section-v:     7rem;
  --section-v-sm:  4.5rem;
  --page-h:        2rem;
  --max-w:         900px;
  --max-w-wide:    1100px;
}


/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */

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

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--accent); text-decoration: none; }
a:hover { opacity: 0.75; }

button { font-family: var(--font-body); font-weight: var(--font-weight-body); cursor: pointer; }
input, textarea, select { font-family: var(--font-body); font-weight: var(--font-weight-body); }

::selection { background: var(--accent); color: var(--canvas); }


/* --------------------------------------------------------------------------
   3. PAGE WRAPPERS
   -------------------------------------------------------------------------- */

.page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--page-h) 6rem;
}

.page--wide {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 0 var(--page-h) 5rem;
}


/* --------------------------------------------------------------------------
   4. NAV
   -------------------------------------------------------------------------- */

.nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 2rem 0 1.5rem;
  border-bottom: 1px solid var(--ink);
}

.nav--padded {
  padding-left: var(--page-h);
  padding-right: var(--page-h);
}

.nav__logo {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.nav__tag {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
}

.nav__action {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}

.nav__action:hover { color: var(--accent); }


/* --------------------------------------------------------------------------
   5. SECTIONS
   -------------------------------------------------------------------------- */

.section {
  padding: var(--section-v) 0;
  border-bottom: 1px solid var(--vapor);
}

.section--last { border-bottom: none; }
.section--sm { padding: var(--section-v-sm) 0; border-bottom: 1px solid var(--vapor); }

.section__head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  margin-bottom: 3.5rem;
  align-items: start;
}

.section__label {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  padding-top: 0.2rem;
}


/* --------------------------------------------------------------------------
   6. TYPOGRAPHY
   -------------------------------------------------------------------------- */

.kicker {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  display: block;
  margin-bottom: 1.5rem;
}

.h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: var(--leading-display);
  letter-spacing: -0.02em;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 2.5rem;
  max-width: 720px;
}

.h1 em { font-style: italic; color: var(--accent); }

.h1--sm {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 2rem;
  max-width: 640px;
}

.h1--sm em { font-style: italic; color: var(--accent); }

.h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  color: var(--ink);
  font-weight: 400;
  margin: 0;
}

.h2--sm {
  font-family: var(--font-display);
  font-size: var(--text-h2-sm);
  line-height: 1.2;
  color: var(--ink);
  font-weight: 400;
  margin: 0;
}

.h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 0.75rem;
}

.section-rule {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  display: block;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--accent);
  margin-bottom: 1.5rem;
}

.pullquote {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink);
}

.lede {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  border-left: 3px solid var(--vapor);
  padding-left: 1.5rem;
  max-width: 600px;
}

.body-text { font-size: var(--text-body); line-height: var(--leading-body); }
.body-text p { margin-bottom: 1.1rem; }
.body-text p:last-child { margin-bottom: 0; }


/* --------------------------------------------------------------------------
   7. LAYOUT GRIDS
   -------------------------------------------------------------------------- */

.col-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4rem;
  align-items: start;
}

.col-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--vapor);
}

.col-admin {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2.5rem;
  align-items: start;
}

.col-brief {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 4rem;
  align-items: start;
  padding-top: 3.5rem;
}


/* --------------------------------------------------------------------------
   8. ASIDE
   -------------------------------------------------------------------------- */

.aside {
  border-top: 1px solid var(--accent);
  padding-top: 1.5rem;
}

.aside__label {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 1rem;
  display: block;
}


/* --------------------------------------------------------------------------
   9. HERO
   -------------------------------------------------------------------------- */

.hero {
  padding: 7rem 0 5rem;
  border-bottom: 1px solid var(--vapor);
}

.hero__body {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  max-width: 480px;
  margin-bottom: 3rem;
}

.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }


/* --------------------------------------------------------------------------
   10. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-ui);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--canvas);
  background: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.9rem 2.25rem;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover { background: var(--ink); border-color: var(--ink); opacity: 1; }

.btn--ghost {
  background: transparent;
  color: var(--accent);
  margin-left: 1rem;
}

.btn--ghost:hover { background: var(--accent); color: var(--canvas); }

.btn--full { width: 100%; text-align: center; }

.btn--sm {
  font-size: var(--text-label);
  padding: 0.3rem 0.65rem;
}

.btn--ink {
  color: var(--ink);
  background: transparent;
  border-color: var(--ink);
}

.btn--ink:hover { background: var(--ink); color: var(--canvas); }

.btn--muted {
  color: var(--muted);
  background: transparent;
  border-color: var(--vapor);
}

.btn--muted:hover { color: var(--accent); border-color: var(--accent); background: transparent; }

.btn--generate {
  color: var(--accent);
  background: transparent;
  border-color: var(--accent);
  white-space: nowrap;
}

.btn--generate:hover { background: var(--accent); color: var(--canvas); }

.btn--text {
  background: none;
  border: none;
  color: var(--muted);
  padding: 0;
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color 0.15s;
}

.btn--text:hover { color: var(--accent); }


/* --------------------------------------------------------------------------
   11. FORMS
   -------------------------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.75rem;
}

.field:last-child { margin-bottom: 0; }

.field--divided {
  border-bottom: 1px solid var(--vapor);
  padding-bottom: 1.75rem;
}

.field__label {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.field__input {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--text-body);
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink);
  padding: 0.5rem 0;
  outline: none;
  width: 100%;
  border-radius: 0;
  transition: border-color 0.15s;
  -webkit-appearance: none;
}

.field__input:focus { border-bottom-color: var(--accent); }
.field__input::placeholder { color: var(--vapor); }
.field__input--upper { text-transform: uppercase; }

.field__textarea {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--text-body);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--vapor);
  padding: 0.75rem;
  outline: none;
  width: 100%;
  border-radius: 0;
  resize: none;
  line-height: 1.6;
  transition: border-color 0.15s;
  min-height: 80px;
}

.field__textarea:focus { border-color: var(--accent); }
.field__textarea::placeholder { color: var(--vapor); }

.field__textarea--underline {
  border: none;
  border-bottom: 1px solid var(--ink);
  padding: 0.5rem 0;
  min-height: 80px;
}

.field__textarea--underline:focus { border-bottom-color: var(--accent); }

.field__textarea--dark {
  border-color: var(--accent);
  color: var(--vapor);
  min-height: 90px;
}

.field__textarea--dark::placeholder { color: var(--muted); }

.field__hint {
  font-size: var(--text-caption);
  color: var(--muted);
  margin-top: 0.5rem;
  line-height: 1.5;
}

.field__error {
  font-size: var(--text-ui);
  color: var(--accent);
  margin-top: 0.75rem;
  display: none;
}

.field__error.is-visible { display: block; }

.field__code-row { display: flex; gap: 0.5rem; align-items: center; }
.field__code-row .field__input { flex: 1; }

.form-success {
  font-family: var(--font-display);
  font-size: var(--text-ui);
  font-style: italic;
  color: var(--accent);
  margin-top: 0.75rem;
  display: none;
}

.form-success.is-visible { display: block; }


/* --------------------------------------------------------------------------
   12. CARDS & CONTENT BLOCKS
   -------------------------------------------------------------------------- */

.card {
  border: 1px solid var(--vapor);
  padding: 1.75rem 2rem;
}

.card--ink { border-color: var(--ink); }

/* Deliverables */
.deliverable {
  border: 1px solid var(--vapor);
  padding: 2rem;
  margin-bottom: 1.5rem;
}

.deliverable__num {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.deliverable__rule {
  width: 2rem;
  height: 1px;
  background: var(--accent);
  margin-bottom: 0.75rem;
}

.deliverable__body {
  font-size: var(--text-ui);
  line-height: 1.65;
}

/* Dark block — team reflection */
.dark-block {
  background: var(--ink);
  padding: 2.5rem;
}

.dark-block__label {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--vapor);
  display: block;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--vapor);
  margin-bottom: 1.5rem;
}

.dark-block__sublabel {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--vapor);
  display: block;
  margin-bottom: 0.75rem;
  margin-top: 1rem;
}

.dark-block__body {
  font-size: var(--text-body);
  line-height: 1.8;
  color: var(--vapor);
  margin-bottom: 1rem;
}

.dark-block__sig {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--vapor);
  font-size: 0.95rem;
  margin-top: 1.5rem;
  display: block;
}

/* Notice block */
.notice {
  border: 1px solid var(--vapor);
  padding: 1.75rem 2rem;
}

.notice__label {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 0.75rem;
  display: block;
}

.notice__body {
  font-size: var(--text-ui);
  line-height: 1.65;
}

.notice__body p + p { margin-top: 0.75rem; }

/* Info / booking table */
.info-block {
  border: 1px solid var(--ink);
  padding: 2.5rem;
}

.info-block__label {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 1.5rem;
  display: block;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--vapor);
  gap: 2rem;
}

.info-row:last-child { border-bottom: none; }

.info-row__key {
  font-size: var(--text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  flex-shrink: 0;
}

.info-row__val {
  font-size: var(--text-body);
  text-align: right;
}


/* --------------------------------------------------------------------------
   13. SETUP TIPS
   -------------------------------------------------------------------------- */

.tip {
  border-left: 1px solid var(--accent);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.tip__label {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 0.5rem;
  display: block;
}

.tip__title {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 0.4rem;
}

.tip__body { font-size: var(--text-ui); line-height: 1.6; }


/* --------------------------------------------------------------------------
   14. PROCESS GRID
   -------------------------------------------------------------------------- */

.process-item {
  padding: 2rem;
  border-right: 1px solid var(--vapor);
}

.process-item:last-child { border-right: none; }

.process-item__num {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 1rem;
  display: block;
}

.process-item__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 0.75rem;
}

.process-item__body { font-size: 0.8rem; line-height: 1.6; }


/* --------------------------------------------------------------------------
   15. BRIEF — SHARED COMPONENTS
   -------------------------------------------------------------------------- */

/* Quote block */
.quote-block {
  border: 1px solid var(--vapor);
  padding: 2rem 2.5rem;
}

.quote-block__mark {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--vapor);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.quote-block__text {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.65;
  margin-bottom: 1rem;
}

.quote-block__attr {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
}

/* Angles */
.angle {
  border: 1px solid var(--vapor);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1rem;
}

.angle__num {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 0.5rem;
  display: block;
}

.angle__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.angle__desc {
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.65;
  margin-bottom: 1rem;
}

/* Tags */
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.tag {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 0.3rem 0.7rem;
}

/* Moments */
.moment {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--vapor);
}

.moment:first-of-type { border-top: 1px solid var(--vapor); }

.moment__timestamp {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.6rem;
  display: block;
}

.moment__quote {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 0.6rem;
}

.moment__note { font-size: 0.8rem; line-height: 1.6; color: var(--muted); }

/* Sidebar stats */
.stat { display: flex; flex-direction: column; margin-bottom: 1.75rem; }

.stat__num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--accent);
  line-height: 1;
}

.stat__label {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-top: 0.2rem;
}

/* Theme tags */
.theme-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.theme-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.8rem;
  border: 1px solid var(--vapor);
  padding: 0.4rem 0.8rem;
}

/* Assets panel */
.assets { border: 1px solid var(--vapor); padding: 1.5rem; }

.assets__label {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 1rem;
  display: block;
}

.asset {
  display: flex;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--vapor);
  align-items: baseline;
  font-size: 0.8rem;
  line-height: 1.5;
}

.asset:last-child { border-bottom: none; }

.asset__num {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Brief header superlabel line */
.superlabel {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.superlabel::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--accent);
  max-width: 3rem;
}

.brief-name {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin-bottom: 0.4rem;
}

.brief-name em { font-style: italic; color: var(--accent); }

.brief-role {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 2rem;
}

.sidebar-block { margin-bottom: 3rem; }


/* --------------------------------------------------------------------------
   16. LOGIN PAGES
   -------------------------------------------------------------------------- */

.login-page {
  min-height: 100vh;
  background: var(--canvas);
}

.login-wrap {
  max-width: 420px;
  margin: 0 auto;
  padding: 5rem var(--page-h);
}

.login-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1.1;
  font-weight: 400;
  margin-bottom: 2.5rem;
}

.login-title em { font-style: italic; color: var(--accent); }

.login-switch {
  margin-top: 1.5rem;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}

.login-switch a { color: var(--accent); cursor: pointer; }


/* --------------------------------------------------------------------------
   17. ADMIN PANEL
   -------------------------------------------------------------------------- */

.admin-page { background: var(--canvas); min-height: 100vh; }

.admin-wrap { padding: 2rem var(--page-h); }

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--vapor);
}

.admin-header__kicker {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 0.4rem;
  display: block;
}

.admin-header__title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
}

.admin-stats { display: flex; gap: 2rem; }

.admin-stat { text-align: right; }

.admin-stat__num {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--accent);
  line-height: 1;
  display: block;
}

.admin-stat__label {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-top: 0.2rem;
  display: block;
}

/* Guest table */
.guest-table { width: 100%; font-size: 0.8rem; }

.guest-table__head {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr auto;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ink);
}

.guest-table__head span {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.guest-table__row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--vapor);
}

.guest-table__row:last-child { border-bottom: none; }

.guest-table__name { font-weight: 600; }
.guest-table__email { color: var(--muted); }

.guest-table__code {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent);
  font-size: 0.85rem;
}

.guest-table__actions { display: flex; gap: 0.4rem; justify-content: flex-end; }

.empty-state {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-size: 0.95rem;
  padding: 2rem 0;
}

/* Add guest panel */
.add-panel {
  border: 1px solid var(--vapor);
  padding: 1.75rem;
}

/* Brief editor */
.brief-editor__header {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--vapor);
}

.brief-editor__name {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 0.25rem;
}

.brief-editor__name em { font-style: italic; color: var(--accent); }
.brief-editor__meta { font-size: 0.8rem; color: var(--muted); }

.brief-editor__section { margin-bottom: 2.5rem; }

.brief-editor__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.brief-editor__grid .field--full { grid-column: 1 / -1; }

.angle-editor {
  border: 1px solid var(--vapor);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}

.angle-editor__num {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 0.75rem;
  display: block;
}

.angle-editor__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.moment-editor { padding: 1.25rem 0; border-bottom: 1px solid var(--vapor); }

.moment-editor__num {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 0.75rem;
  display: block;
}

.moment-editor__grid {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: 0.75rem;
  align-items: start;
}

.save-confirm {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent);
  font-size: var(--text-ui);
  margin-left: 1rem;
  display: none;
}

.save-confirm.is-visible { display: inline; }

/* Screen system for SPA-style pages */
.screen { display: none; }
.screen.active { display: block; }


/* --------------------------------------------------------------------------
   18. EOI FORM SPECIFICS
   -------------------------------------------------------------------------- */

.eoi-section {
  padding: 5rem var(--page-h) 6rem;
  border-top: 1px solid var(--ink);
  max-width: var(--max-w);
  margin: 0 auto;
}

.eoi-intro {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  max-width: 540px;
  margin-bottom: 3.5rem;
}

.eoi-success {
  display: none;
  border: 1px solid var(--accent);
  padding: 2.5rem;
}

.eoi-success h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--accent);
  font-weight: 400;
  margin-bottom: 0.75rem;
}

.eoi-success p {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.criteria {
  list-style: none;
  padding: 0;
  margin: 0;
}

.criteria li {
  font-size: var(--text-ui);
  line-height: 1.6;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--vapor);
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.criteria li:last-child { border-bottom: none; }

.criteria li::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 0.35rem;
}


/* --------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */

.footer {
  padding: 2.5rem 0 0;
  border-top: 1px solid var(--ink);
  margin-top: 5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 2rem;
}

.footer__brand {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--ink);
}

.footer__links {
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: baseline;
}

.footer__link {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  transition: color 0.15s;
}

.footer__link:hover {
  color: var(--accent);
  opacity: 1;
}

.footer__note {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-align: right;
}


/* --------------------------------------------------------------------------
   20. UTILITIES
   -------------------------------------------------------------------------- */

.mt-1  { margin-top: 1rem; }
.mt-2  { margin-top: 2rem; }
.mt-3  { margin-top: 3rem; }
.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: 1rem; }
.mb-2  { margin-bottom: 2rem; }
.mb-3  { margin-bottom: 3rem; }

.text-accent { color: var(--accent); }
.text-muted  { color: var(--muted); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


/* --------------------------------------------------------------------------
   21. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  :root { --section-v: 4rem; --section-v-sm: 3rem; }

  .section__head,
  .col-2-1 { grid-template-columns: 1fr; gap: 2rem; }

  .col-3 { grid-template-columns: 1fr; }
  .process-item { border-right: none; border-bottom: 1px solid var(--vapor); }
  .process-item:last-child { border-bottom: none; }

  .col-admin,
  .col-brief { grid-template-columns: 1fr; gap: 2.5rem; }

  .brief-editor__grid,
  .angle-editor__grid { grid-template-columns: 1fr; }

  .moment-editor__grid { grid-template-columns: 60px 1fr; }

  .admin-header { flex-direction: column; gap: 1.5rem; }
  .admin-stat { text-align: left; }

  .guest-table__head,
  .guest-table__row { grid-template-columns: 1fr auto; }
  .guest-table__head span:nth-child(2),
  .guest-table__head span:nth-child(3),
  .guest-table__row .guest-table__email,
  .guest-table__row .guest-table__code { display: none; }

  .info-row { flex-direction: column; gap: 0.25rem; }
  .info-row__val { text-align: left; }

  .hero__actions { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .btn--ghost { margin-left: 0; }

  .footer { grid-template-columns: 1fr; gap: 1.25rem; }
  .footer__links { justify-content: flex-start; }
  .footer__note { text-align: left; }
}

@media (max-width: 480px) {
  :root { --page-h: 1.25rem; }
  .login-wrap { padding: 3rem var(--page-h); }
  .dark-block { padding: 1.75rem; }
  .info-block { padding: 1.5rem; }
}


/* --------------------------------------------------------------------------
   22. PRINT
   -------------------------------------------------------------------------- */

@media print {
  .nav, .footer, .btn, .btn--text, .back-btn { display: none; }
  body { background: white; color: black; font-size: 11pt; }
  .page, .page--wide { max-width: 100%; padding: 0; }
  .dark-block { background: #f0ede8; }
  .dark-block__body { color: #2D2D2D; }
}