/* ── VERSO CORE — shared across all pages ── */
/* Edit this file to update nav, modal, and footer on every page simultaneously */

:root {
  --paper:      #F8F6F1;
  --ink:        #1C1C1A;
  --dust:       #8A8880;
  --dust-text:  #6B6966;
  --vellum:     #E6E3DC;
  --vermillion: #C8441A;
  --serif: 'P052','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
  --mono:  'Nimbus Mono PS','Courier New',Courier,monospace;
  --sans:  'Nimbus Sans',Arial,sans-serif;
  --slide-ratio: 1 / 1;
  --slide-fit: contain;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px; height:64px;
  background:var(--paper);
  border-bottom:1px solid var(--vellum);
}
.nav-logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.nav-logo img { width:32px; height:32px; }
.nav-wordmark { font-family:var(--serif); font-size:18px; color:var(--ink); }
.nav-right { display:flex; align-items:center; gap:24px; }
.nav-link {
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--dust-text); text-decoration:none;
  transition:color 0.2s;
}
.nav-link:hover { color:var(--vermillion); }
.nav-link.active { color:var(--ink); }
.nav-join {
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--paper);
  background:var(--ink); border:none; padding:10px 20px;
  cursor:pointer; transition:background 0.2s;
}
.nav-join:hover { background:var(--vermillion); }
.nav-beta {
  font-family:var(--mono); font-size:9px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--paper);
  background:var(--vermillion); padding:3px 7px;
  pointer-events:none; user-select:none;
}
.nav-user {
  display:flex; align-items:center; gap:8px;
  text-decoration:none; cursor:pointer;
}
.nav-user span {
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink); transition:color 0.2s;
}
.nav-user span:hover { color:var(--vermillion); }
.nav-user-avatar {
  width:28px; height:28px; border-radius:50%;
  background:var(--ink); display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:11px; font-weight:bold; color:var(--paper);
  overflow:hidden; flex-shrink:0;
}
.nav-user-avatar img { width:100%; height:100%; object-fit:cover; }

/* ── MODAL ── */
.modal-overlay {
  position:fixed; inset:0; z-index:200;
  background:rgba(28,28,26,0.7);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 0.25s;
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal {
  background:var(--paper); padding:40px;
  width:100%; max-width:440px; position:relative;
  max-height:90vh; overflow-y:auto;
}
.modal-close {
  position:absolute; top:16px; right:20px;
  background:none; border:none; font-size:22px;
  color:var(--dust-text); cursor:pointer; line-height:1;
}
.modal-tabs {
  display:flex; gap:0; margin-bottom:24px;
  border-bottom:1px solid var(--vellum);
}
.modal-tab {
  font-family:var(--mono); font-size:11px; letter-spacing:0.10em;
  text-transform:uppercase; color:var(--dust-text);
  background:none; border:none; padding:10px 20px 10px 0;
  cursor:pointer; border-bottom:2px solid transparent;
  margin-bottom:-1px; transition:color 0.2s, border-color 0.2s;
}
.modal-tab.active { color:var(--ink); border-bottom-color:var(--vermillion); }
.modal-tab:hover { color:var(--ink); }
.modal-headline {
  font-family:var(--serif); font-size:28px;
  color:var(--ink); margin-bottom:8px;
}
.modal-eyebrow {
  font-family:var(--mono); font-size:11px; letter-spacing:0.10em;
  text-transform:uppercase; color:var(--dust-text); margin-bottom:8px;
}
.modal-sub { font-size:14px; color:var(--dust-text); margin-bottom:24px; line-height:1.5; }
.form-group { margin-bottom:16px; }
.form-group label {
  display:block; font-family:var(--mono); font-size:10px;
  letter-spacing:0.10em; text-transform:uppercase;
  color:var(--dust-text); margin-bottom:6px;
}
.form-group input, .form-group textarea {
  width:100%; padding:12px; border:1px solid var(--vellum);
  background:var(--paper); font-family:var(--serif); font-size:15px;
  color:var(--ink); outline:none; transition:border-color 0.2s;
}
.form-group input:focus { border-color:var(--ink); }
.form-submit {
  width:100%; padding:14px; background:var(--ink); color:var(--paper);
  font-family:var(--mono); font-size:11px; letter-spacing:0.10em;
  text-transform:uppercase; border:none; cursor:pointer;
  transition:background 0.2s; margin-top:4px;
}
.form-submit:hover { background:var(--vermillion); }
.form-submit:disabled { opacity:0.5; cursor:not-allowed; }
.form-message { font-size:13px; color:var(--vermillion); margin-top:12px; min-height:18px; }
.form-legal {
  font-family:var(--mono); font-size:10px; letter-spacing:0.06em;
  color:var(--dust-text); margin-top:16px; text-align:center;
}

/* ── FOOTER ── */
footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 48px; border-top:1px solid var(--vellum);
}
.footer-left { display:flex; align-items:center; gap:8px; }
.footer-logo { width:20px; height:20px; }
.footer-wordmark { font-family:var(--serif); font-size:14px; color:var(--ink); }
.footer-tagline { font-family:var(--mono); font-size:11px; color:var(--dust-text); }
.footer-right { font-family:var(--mono); font-size:11px; color:var(--dust-text); letter-spacing:0.04em; }

/* ── PHONE TOGGLE ── */
.form-phone-toggle {
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--dust-text); text-decoration:none;
  margin-bottom:16px; transition:color 0.2s;
}
.form-phone-toggle:hover { color:var(--ink); }

/* ── NAV SEARCH ── */
.nav-search {
  position:relative; display:flex; align-items:center;
}
.nav-search-input {
  font-family:var(--mono); font-size:11px; letter-spacing:0.04em;
  color:var(--ink); background:var(--paper);
  border:1px solid var(--vellum); padding:7px 12px;
  width:160px; outline:none;
  transition:border-color 0.2s, width 0.2s;
}
.nav-search-input:focus { border-color:var(--ink); width:200px; }
.nav-search-input::placeholder { color:var(--dust-text); }
.nav-search-results {
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:var(--paper); border:1px solid var(--vellum);
  z-index:300; max-height:280px; overflow-y:auto;
}
.nav-search-result-item {
  padding:12px 14px; cursor:pointer;
  border-bottom:1px solid var(--vellum); transition:background 0.15s;
}
.nav-search-result-item:last-child { border-bottom:none; }
.nav-search-result-item:hover { background:var(--vellum); }
.nav-search-result-title {
  font-family:var(--serif); font-size:14px; color:var(--ink);
}
.nav-search-result-author {
  font-family:var(--mono); font-size:10px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--dust-text); margin-top:2px;
}
.nav-search-no-result {
  padding:12px 14px; font-family:var(--mono); font-size:11px;
  color:var(--dust-text); letter-spacing:0.04em;
}

/* ── TABLET NAV ── */
@media (max-width: 1024px) {
  .nav-right { gap:16px; }
  .nav-right .nav-link { font-size:10px; letter-spacing:0.06em; }
  .nav-search-input { width:130px; }
  .nav-search-input:focus { width:170px; }
}

/* ── MOBILE NAV ── */
@media (max-width: 768px) {
  nav { padding:0 24px; }
  .nav-right { gap:12px; }
  .nav-right .nav-link { display:none; }
  .nav-search-input { width:110px; }
  .nav-search-input:focus { width:140px; }
  .nav-search-results { position:fixed; left:0; right:0; top:64px; }
  footer { padding:24px; flex-direction:column; gap:8px; align-items:flex-start; }
}