/* NoDawn — the shared shell for every page that is NOT the landing page.
 *
 * The landing page is a generated artboard: a 1440 desktop design whose styling is inline style
 * attributes, which is why it needs a whole override layer (mobile.css) to survive a phone. These
 * pages are authored here instead, so they are built the other way round — fluid from the first
 * line, no fixed widths, no inline styling to fight. There is deliberately no mobile.css
 * equivalent for them, because there is nothing to correct.
 *
 * The identity is the landing page's, token for token, so a visitor crossing from the footer does
 * not feel handed off to a different product: Cinzel for display, EB Garamond for reading, Outfit
 * for the small uppercase labels, amber on near-black leather with blood-red reserved for warnings.
 */

:root {
  --amber: #d8a24a;
  --amber-soft: rgba(216, 162, 74, 0.7);
  --blood: #e0506a;
  --blood-deep: #8a1d1d;
  --ink: #f6ecd2;
  --dim: #c9bda1;
  --faint: #8a8069;
  --line: rgba(216, 162, 74, 0.16);
  --line-2: rgba(216, 162, 74, 0.4);
  --ground: #0c0a0d;
  --raised: rgba(216, 162, 74, 0.035);

  /* One reading measure, used by every prose block. ~68 characters at the body size, which is the
     span the eye tracks without losing the line — legal text is long and needs it most. */
  --measure: 68ch;
  --page: 960px;
  --gutter: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--dim);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* The same faint sigil wash the landing page carries, so the pages feel cut from one cloth rather
   than bolted on. Fixed and non-interactive; it must never eat a click or a scroll. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background:
    radial-gradient(70% 45% at 20% 0%, rgba(216, 162, 74, 0.07), transparent 70%),
    radial-gradient(50% 35% at 85% 15%, rgba(224, 80, 106, 0.05), transparent 70%);
}

a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--ink); }
a:focus-visible,
summary:focus-visible { outline: 2px solid var(--amber-soft); outline-offset: 3px; border-radius: 3px; }

/* ── chrome ──────────────────────────────────────────────────────────────────────────────────── */

.nd-head {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 12px var(--gutter);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(12, 10, 13, 0.95), rgba(12, 10, 13, 0.72));
  backdrop-filter: blur(12px);
}
.nd-brand { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.nd-brand img { width: 30px; height: 30px; object-fit: contain; mix-blend-mode: screen; opacity: 0.95; }
.nd-brand span {
  font-family: 'Cambridge', Cambria, Georgia, serif;
  font-size: clamp(24px, 5vw, 30px);
  color: var(--ink);
  line-height: 1;
}
.nd-head nav { display: flex; align-items: center; gap: clamp(14px, 3vw, 26px); flex-wrap: wrap; }
.nd-head nav a {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(201, 189, 161, 0.7);
  /* 44px on every touch target, everywhere, rather than a correction bolted on later. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.nd-head nav a:hover { color: var(--ink); }
.nd-cta {
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid var(--amber-soft);
  background: linear-gradient(180deg, rgba(216, 162, 74, 0.28), rgba(216, 162, 74, 0.14));
  color: var(--ink) !important;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.nd-cta:hover { background: rgba(216, 162, 74, 0.34); }

/* ── page frame ──────────────────────────────────────────────────────────────────────────────── */

main { position: relative; z-index: 10; padding: clamp(44px, 8vw, 88px) var(--gutter) clamp(60px, 10vw, 110px); }
.nd-wrap { max-width: var(--page); margin: 0 auto; }
.nd-prose { max-width: var(--measure); }

.nd-eyebrow {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-soft);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.nd-eyebrow::before {
  content: "";
  width: clamp(24px, 6vw, 44px);
  height: 1px;
  background: var(--line-2);
  flex: none;
}

h1 {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: clamp(30px, 6vw, 52px);
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 18px;
  text-wrap: balance;
}
.nd-lead {
  font-size: clamp(17px, 2.2vw, 20px);
  color: rgba(201, 189, 161, 0.82);
  max-width: var(--measure);
  margin: 0 0 8px;
}

h2 {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: clamp(21px, 3.2vw, 29px);
  line-height: 1.2;
  color: var(--ink);
  margin: 52px 0 14px;
  text-wrap: balance;
}
h3 {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: clamp(16px, 2.2vw, 19px);
  color: var(--ink);
  margin: 34px 0 10px;
}
p, ul, ol { max-width: var(--measure); }
p { margin: 0 0 17px; }
ul, ol { margin: 0 0 17px; padding-left: 22px; }
li { margin: 0 0 8px; }
strong { color: var(--ink); font-weight: 600; }
em { color: rgba(201, 189, 161, 0.9); }
hr { border: 0; border-top: 1px solid var(--line); margin: 46px 0; max-width: var(--measure); }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
  color: var(--amber);
  background: rgba(216, 162, 74, 0.08);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ── tables ──────────────────────────────────────────────────────────────────────────────────── */
/* The legal documents are mostly tables — what is collected and why, which right applies where.
   They must scroll INSIDE their own container: a table that widens the page body is how a document
   ends up unreadable on a phone with no way to reach the right-hand column. */

/* Tables take the full column, NOT the reading measure. A three-column table squeezed into a
   prose width is unreadable while 400px of the container sits empty beside it — the narrow measure
   is right for sentences and wrong for anything with columns. */
.nd-table { overflow-x: auto; margin: 0 0 26px; }
.nd-table table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 15.5px; }
.nd-table th, .nd-table td {
  text-align: left;
  vertical-align: top;
  padding: 11px 16px 11px 0;
  border-bottom: 1px solid var(--line);
}
.nd-table th {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--amber-soft);
  font-weight: 400;
  white-space: nowrap;
}
.nd-table td:first-child { color: var(--ink); }

/* ── notices ─────────────────────────────────────────────────────────────────────────────────── */

.nd-notice {
  max-width: var(--measure);
  margin: 0 0 40px;
  padding: 20px 24px;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--blood);
  border-radius: 10px;
  background: rgba(224, 80, 106, 0.06);
  font-size: 15.5px;
}
.nd-notice p { margin: 0 0 10px; max-width: none; }
.nd-notice p:last-child { margin: 0; }
.nd-notice .nd-notice-title {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blood);
  margin-bottom: 8px;
}

/* A commitment nobody has made yet, shown rather than guessed. Deliberately conspicuous: on a
   document banded as a draft, a visible gap is honest and a fabricated answer is not. */
.nd-pending {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 0.8em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blood);
  background: rgba(224, 80, 106, 0.1);
  border: 1px dashed rgba(224, 80, 106, 0.45);
  border-radius: 5px;
  padding: 1px 7px;
  white-space: nowrap;
}

/* ── cards ───────────────────────────────────────────────────────────────────────────────────── */

.nd-grid { display: grid; gap: 18px; margin: 26px 0 34px; }
.nd-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.nd-grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.nd-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--raised), rgba(216, 162, 74, 0.012));
  min-width: 0;
}
.nd-card h3 { margin: 0 0 8px; }
.nd-card p { margin: 0; font-size: 15.5px; max-width: none; }
.nd-card .nd-price {
  font-family: 'Cinzel', serif;
  font-size: 25px;
  color: var(--ink);
  line-height: 1;
  margin: 4px 0 12px;
}
.nd-card .nd-unit {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ── footer ──────────────────────────────────────────────────────────────────────────────────── */

.nd-foot {
  position: relative;
  z-index: 10;
  border-top: 1px solid var(--line);
  padding: 46px var(--gutter) 56px;
}
.nd-foot-in {
  max-width: var(--page);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
}
.nd-foot-brand { max-width: 300px; min-width: 0; }
.nd-foot-brand .nd-brand { margin-bottom: 12px; }
.nd-foot-brand p { font-size: 15px; color: rgba(201, 189, 161, 0.6); margin: 0; }
.nd-cols { display: flex; flex-wrap: wrap; gap: clamp(30px, 7vw, 64px); }
.nd-col h4 {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 6px;
  font-weight: 400;
}
.nd-col a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  color: rgba(201, 189, 161, 0.75);
}
.nd-col a:hover { color: var(--ink); }
.nd-legal-line {
  max-width: var(--page);
  margin: 40px auto 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
/* These are the last three links on every page and the easiest to miss on a phone: inline text in
   a small font resolves to a 15px-tall target. Padded to 44px like every other link on the site
   rather than left as the one exception. */
.nd-legal-line a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }