/* ============================================================
   v2.css — alt site: a single-column plain-text document with
   markdown-style hierarchy. No images, no indent. Uses the shared
   design tokens (--ink/--mid/--accent/--border) so the nyan intro
   themes it for free.
   ============================================================ */

.doc {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Hero ── */
.doc-head {
  margin-bottom: 44px;
}

.doc h1 {
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--ink);
}

.doc-tagline {
  font-size: clamp(16px, 2vw, 20px);
  color: var(--mid);
  margin-top: 8px;
}

/* ── Sections ── */
.doc-section {
  margin-bottom: 44px;
}
.doc-section:last-of-type {
  margin-bottom: 0;
}

/* section label — uppercase eyebrow */
.doc h2 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 24px;
}

.doc h3 {
  font-size: clamp(17px, 1.9vw, 19px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 3px;
}

.doc p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
}
.doc-section > p + p {
  margin-top: 16px;
}

/* Hero lead — more prominent than the work below */
.doc-lead {
  margin-bottom: 52px;
}
.doc-lead p {
  font-size: clamp(17px, 1.9vw, 19px);
  line-height: 1.62;
}
.doc-lead > p + p {
  margin-top: 18px;
}

.doc a {
  color: var(--accent);
  text-decoration: underline;
}
.doc a:hover {
  opacity: 0.7;
}

/* ── Selected work items ── */
.doc-item {
  margin-bottom: 30px;
}
.doc-item:last-child {
  margin-bottom: 0;
}

.doc-url {
  margin-bottom: 6px;
}
.doc-url a {
  font-size: 16px;
  font-weight: 500;
}

/* placeholder where a link isn't live yet */
.doc-nolink {
  color: var(--mid);
}

/* ── Contact ── */
.doc-contact {
  color: var(--mid);
  margin-bottom: 52px;
}
.doc-contact a {
  color: var(--accent);
  text-decoration: underline;
}
.doc-contact a:hover {
  opacity: 0.7;
}

/* ── Get in touch popup — centered modal, matched to the doc styling ── */
.popup-overlay {
  background: rgba(0, 0, 0, 0.14);
}

.popup-card {
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 40px));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 30px 30px 26px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14);
}

.popup-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.popup-sub {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 22px;
}
.popup-sub a {
  color: var(--accent);
  text-decoration: underline;
}
.popup-sub a:hover {
  opacity: 0.7;
}

.popup-form input,
.popup-form textarea {
  font-size: 15px;
  padding: 10px 0;
}

.popup-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
}
.btn-submit {
  font-size: 15px;
}
.btn-close {
  position: static;
  font-size: 13px;
}