/* ---------- Tokens ---------- */
:root {
  /* Paper, ink */
  --paper: #f3ede1;
  /* warm ivory */
  --paper-edge: #ebe3d2;
  /* slightly deeper, for subtle inner shadow */
  --ink: #1f1a14;
  /* near-black, warm */
  --ink-muted: #6b6151;
  /* faded pencil */
  --ink-faint: #a59a85;
  /* deckle */
  --rule: #d8cfb9;
  /* hairline */
  --mark: #b08540;
  /* ochre — pulled from the logo's flourish */
  --field-bg: rgba(31, 26, 20, 0.03);
  --field-bg-focus: rgba(31, 26, 20, 0.06);

  /* Type */
  --serif: "Newsreader", "Source Serif Pro", "Source Serif 4", Georgia, serif;
  --deva: "Noto Serif Devanagari", "Newsreader", serif;
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;

  /* Horizontal nudge applied to text content so it lines up with the email
     input pill inside the Substack iframe. Substack's embed insets the form
     ~60px from the iframe's left edge (measured by pixel-scan), and we can't
     reach in to change that, so we push the page text right by the same amount. */
  --content-shift: 60px;
}

[data-theme="lamp"] {
  /* "Reading by lamplight" — warm umber, candle cream, not a dev tool */
  --paper: #1a1612;
  --paper-edge: #221d17;
  --ink: #ebe1cf;
  --ink-muted: #9c907a;
  --ink-faint: #5b5240;
  --rule: #3a3328;
  --mark: #d9a45c;
  --field-bg: rgba(235, 225, 207, 0.04);
  --field-bg-focus: rgba(235, 225, 207, 0.07);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color 600ms ease, color 600ms ease;
}

::selection {
  background: var(--mark);
  color: var(--paper);
}

/* ---------- Page frame ---------- */
.page {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(28px, 5vw, 56px) clamp(24px, 6vw, 88px);
  position: relative;
  /* a whisper of inner edge, like paper against a desk */
  box-shadow: inset 0 0 0 1px var(--paper-edge);
}

/* ---------- Top meta row ---------- */
.meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.meta .deva {
  font-family: var(--deva);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-muted);
  /* tiny breath of space */
  padding-bottom: 1px;
}

.lamp-toggle {
  background: none;
  border: 0;
  padding: 6px 0;
  margin: 0;
  font: inherit;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  cursor: pointer;
  position: relative;
  transition: color 200ms ease;
}

.lamp-toggle:hover {
  color: var(--ink);
}

.lamp-toggle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  opacity: 0.25;
  transition: opacity 200ms ease;
}

.lamp-toggle:hover::after {
  opacity: 0.6;
}

.lamp-toggle:focus-visible {
  outline: 1px dashed var(--ink-muted);
  outline-offset: 6px;
}

/* ---------- Main block ---------- */
main {
  display: grid;
  align-content: center;
  justify-content: start;
  max-width: 56ch;
  padding: clamp(40px, 10vh, 96px) 0;
  position: relative;
}

/* Quill mark — a small, deliberate annotation above the wordmark.
   It's an inline SVG: ink follows currentColor; the flourish keeps its ochre. */
.mark {
  display: block;
  width: clamp(86px, 10vw, 124px);
  height: auto;
  margin: 0 0 clamp(14px, 2.4vh, 26px) calc(var(--content-shift) - 10px);
  color: var(--ink);
  opacity: 0.92;
  user-select: none;
  transition: color 600ms ease, opacity 600ms ease;
  overflow: visible;
}

.mark .tipani-flourish {
  stroke: var(--mark);
  transition: stroke 600ms ease;
}

[data-theme="lamp"] .mark {
  opacity: 0.88;
}

.wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(64px, 12vw, 140px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
  /* the optical-size axis at large sizes — tighter, more display-like */
  font-variation-settings: "opsz" 60;
}

.tagline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: clamp(28px, 4vh, 48px) 0 0;
  max-width: 28ch;
}

/* hand-drawn-ish underline beneath "work" */
.underlined {
  position: relative;
  white-space: nowrap;
}

.underlined svg {
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.32em;
  width: 104%;
  height: 0.4em;
  overflow: visible;
  color: var(--mark);
  opacity: 0.85;
}

.underlined svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: ink 1400ms cubic-bezier(.55, .05, .2, 1) 600ms forwards;
}

@keyframes ink {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .underlined svg path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* ---------- Form ---------- */
.signup {
  margin-top: clamp(25px, 9vh, 1px);
  max-width: 32rem;
  margin-left: var(--content-shift);
}

.signup-label {
  display: block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  margin: 0 0 14px;
}

/* Substack's embed insets its email input ~14px from the iframe's left edge,
   and we can't reach inside the iframe to remove that. So instead of pulling
   the iframe left, push all the page text right by the same amount — that way
   the wordmark, label, tagline, and footer all align with the visible input.
   The iframe itself gets no rule and stays at the page-column edge. */
.wordmark,
.tagline,
/* .signup-label, */
.meta> :first-child,
footer .colophon {
  margin-left: var(--content-shift);
}

/* Mirror the same inset on the right-anchored items so the page reads symmetrically. */
.meta> :last-child,
footer .by {
  margin-right: var(--content-shift);
}

/* Wrapper around the Substack iframe — we can't restyle its insides, so this
   just positions it and gives it a soft lift. No padding or border, so the
   iframe's own outer edge aligns flush with the label above it. */
.substack-frame {
  display: block;
  max-width: 100%;
  width: fit-content;
  border-radius: 3px;
  overflow: hidden;
  box-shadow:
    0 1px 0 var(--paper-edge),
    0 12px 28px -20px rgba(31, 26, 20, 0.20),
    0 3px 10px -8px rgba(31, 26, 20, 0.10);
  transition: box-shadow 600ms ease;
}

.substack-frame iframe {
  display: block;
  border: 0;
  max-width: 100%;
}

[data-theme="lamp"] .substack-frame {
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 16px 34px -20px rgba(0, 0, 0, 0.55),
    0 4px 12px -8px rgba(0, 0, 0, 0.4);
}

.field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  transition: border-color 240ms ease;
}

.field:focus-within {
  border-bottom-color: var(--ink);
}

.field input[type="email"] {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 12px 0;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  width: 100%;
  letter-spacing: 0;
}

.field input::placeholder {
  color: var(--ink-faint);
  font-style: italic;
  font-family: var(--serif);
}

.field button {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 12px 0 12px 20px;
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 200ms ease, transform 240ms cubic-bezier(.2, .7, .2, 1);
  white-space: nowrap;
}

.field button:hover {
  color: var(--ink);
}

.field button:focus-visible {
  outline: 1px dashed var(--ink-muted);
  outline-offset: 6px;
}

.field button:disabled {
  color: var(--ink-faint);
  cursor: default;
}

.arrow {
  display: inline-block;
  margin-left: 8px;
  transition: transform 220ms cubic-bezier(.2, .7, .2, 1);
}

.field button:hover .arrow {
  transform: translateX(3px);
}

.helper {
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.01em;
  min-height: 1.2em;
  transition: color 200ms ease;
}

.helper.error {
  color: var(--mark);
}

/* Acknowledged state — the form folds into a quiet line */
.acknowledged {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 32ch;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.acknowledged.show {
  opacity: 1;
  transform: translateY(0);
}

.acknowledged .small {
  display: block;
  margin-top: 8px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.signup[data-state="done"] form {
  display: none;
}

.signup[data-state="open"] .acknowledged {
  display: none;
}

/* ---------- Footer ---------- */
footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 16px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

footer .colophon {
  font-style: normal;
  justify-self: start;
}

footer .quiet {
  color: var(--ink-faint);
  justify-self: center;
}

footer .by {
  justify-self: end;
}

footer .by a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 200ms ease, border-color 200ms ease;
}

footer .by a:hover {
  color: var(--ink-muted);
  border-bottom-color: var(--ink-muted);
}

/* ---------- Mobile ---------- */
@media (max-width: 560px) {
  .page {
    padding: 24px 22px;
  }

  .meta {
    font-size: 11px;
  }

  .meta .deva {
    font-size: 14px;
  }

  .tagline {
    font-size: 19px;
  }

  .signup {
    margin-top: 56px;
  }

  .substack-frame {
    width: 100%;
  }

  .substack-frame iframe {
    width: 100%;
  }

  footer {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 6px;
  }

  footer .colophon,
  footer .quiet,
  footer .by {
    justify-self: start;
  }
}