/* =====================================================================
   Nestry — editorial / curated landing
   Taste: Are.na + MUBI + Cosmos — negative space, hairlines, warm paper,
   Fraunces serif display, sparse clay accent, moodboard swatches over cards.
   ===================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter.woff2") format("woff2-variations"),
       url("/fonts/inter.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/fraunces.woff2") format("woff2-variations"),
       url("/fonts/fraunces.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/fraunces-italic.woff2") format("woff2-variations"),
       url("/fonts/fraunces-italic.woff2") format("woff2");
}

:root {
  --paper:        #f1ece2;
  --paper-2:      #ece6da;
  --ink:          #1a1612;
  --ink-2:        #2b2620;
  --ink-dim:      #6d655b;
  --ink-subtle:   #a29989;
  --rule:         rgba(26,22,18,.14);
  --rule-soft:    rgba(26,22,18,.07);
  --accent:       #b64028;
  --accent-ink:   #ffffff;
  --hover-tint:   rgba(26,22,18,.04);

  --wrap:         1100px;
  --wrap-narrow:  760px;
  --serif:        "Fraunces", "Cambria", "Hoefler Text", Georgia, "Times New Roman", serif;
  --sans:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:         ui-monospace, "SFMono-Regular", Menlo, "Roboto Mono", monospace;
  --ease:         cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.52;
  font-size: 15.5px;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
@supports (font-variation-settings: normal) {
  body { font-family: "Inter var", "Inter", -apple-system, sans-serif; }
}
::selection { background: var(--accent); color: var(--accent-ink); }

a { color: inherit; text-decoration: none; transition: color .15s var(--ease); }
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px;
}

/* ======= Display type ======= */
.display, .display-sm {
  font-family: var(--serif);
  font-weight: 340;
  letter-spacing: -.015em;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
}
h1.display {
  font-size: clamp(44px, 7.2vw, 92px);
  line-height: 1.0;
  letter-spacing: -.035em;
  margin: 0 0 40px;
  max-width: 14ch;
  font-weight: 320;
}
h1.display::first-letter { font-feature-settings: "ss02"; }
.display-sm {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 24px;
  font-weight: 380;
  max-width: 24ch;
}

.caps {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 600;
  color: var(--ink-dim);
}

/* ======= Masthead ======= */
.masthead {
  padding: 24px 0 18px;
}
.masthead .wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 24px;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--serif);
  font-weight: 420;
  font-size: 21px;
  letter-spacing: -.015em;
  color: var(--ink);
  font-variation-settings: "opsz" 48, "SOFT" 30;
}
.mark {
  width: 12px; height: 12px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
}
.masthead-meta {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-dim);
  letter-spacing: .04em;
  justify-self: center;
}
.masthead-meta .issue { color: var(--ink); font-weight: 600; }
.dot-sep { margin: 0 8px; color: var(--ink-subtle); }
.masthead-nav {
  display: flex; gap: 22px; justify-self: end; align-items: center;
}
.masthead-nav a {
  font-size: 13.5px;
  color: var(--ink-dim);
  letter-spacing: .01em;
  position: relative;
  padding-bottom: 2px;
}
.masthead-nav a:hover { color: var(--ink); }
.masthead-nav .cta-link {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: 3px;
}
@media (max-width: 760px) {
  .masthead .wrap { grid-template-columns: 1fr auto; gap: 12px; }
  .masthead-meta { display: none; }
  .masthead-nav { gap: 14px; }
  .masthead-nav a:not(.cta-link) { display: none; }
}

/* ======= Rules ======= */
.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

/* ======= Section numbering ======= */
.section-no {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-subtle);
  letter-spacing: .04em;
  margin-bottom: 36px;
}
.section-no .caps { color: var(--ink-dim); }

/* ======= Hero ======= */
.hero { padding: 72px 0 96px; }
.hero-body {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 64px;
  align-items: start;
  max-width: 1000px;
}
@media (max-width: 880px) {
  .hero-body { grid-template-columns: 1fr; gap: 48px; }
}
.lede {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.45;
  color: var(--ink-2);
  font-weight: 360;
  letter-spacing: -.005em;
  max-width: 34ch;
  margin: 0;
  font-variation-settings: "opsz" 48, "SOFT" 50;
}

/* ======= Form ======= */
.waitlist {
  display: flex; flex-direction: column; gap: 18px;
  max-width: 440px;
}
.field {
  display: flex; flex-direction: column; gap: 6px;
}
.field .label { margin-bottom: 2px; }
.field input,
.field select {
  width: 100%;
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 8px 0 10px;
  font-family: var(--sans);
  font-size: 15.5px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s var(--ease);
  border-radius: 0;
}
.field input::placeholder { color: var(--ink-subtle); }
.field input:focus,
.field select:focus { border-bottom-color: var(--ink); }
.field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%236d655b' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 20px;
  cursor: pointer;
}
.field select:invalid { color: var(--ink-subtle); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.submit-row {
  display: flex; align-items: center; gap: 20px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.micro {
  font-size: 12.5px;
  color: var(--ink-subtle);
  margin: 0;
  max-width: 26ch;
  line-height: 1.45;
}
.msg {
  min-height: 20px; margin: 0;
  font-size: 13.5px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-dim);
}
.msg.ok    { color: var(--accent); }
.msg.err   { color: var(--accent); }

/* ======= Buttons ======= */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  border-radius: 0;
  transition: background .15s var(--ease), transform .1s var(--ease);
}
.btn-primary:hover { background: var(--accent); color: var(--accent-ink); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .5; cursor: wait; }
.btn-lg { padding: 18px 28px; font-size: 15px; }

/* ======= Roster moodboard ======= */
.roster-section { padding: 72px 0 96px; }
.roster-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  margin-bottom: 40px;
}
.roster-meta {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-end;
  font-family: var(--mono);
}
.big-num {
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1;
  letter-spacing: -.03em;
  font-weight: 300;
  font-variant-numeric: lining-nums;
}
@media (max-width: 720px) {
  .roster-head { grid-template-columns: 1fr; }
  .roster-meta { align-items: flex-start; }
}

.roster-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .roster-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .roster-grid { grid-template-columns: repeat(2, 1fr); } }

.swatch {
  margin: 0;
  display: flex; flex-direction: column;
  cursor: default;
  transition: transform .25s var(--ease);
}
.swatch:hover { transform: translateY(-3px); }
.swatch .sw {
  aspect-ratio: 4 / 5;
  background: var(--c);
  position: relative;
  overflow: hidden;
}
.swatch .sw::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 55%, rgba(0,0,0,.08) 100%);
}
.swatch figcaption {
  display: flex; flex-direction: column;
  padding: 10px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-dim);
  line-height: 1.5;
  letter-spacing: .01em;
}
.swatch .u {
  color: var(--ink);
  font-weight: 500;
}
.caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink-dim);
  margin: 28px 0 0;
  max-width: 48ch;
  line-height: 1.5;
}

/* ======= Hanging lists (proofs, FAQ) ======= */
.proofs { padding: 72px 0 96px; }
.hanging-list {
  list-style: none; padding: 0; margin: 0;
  max-width: var(--wrap-narrow);
}
.hanging-list li {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--rule-soft);
  align-items: baseline;
}
.hanging-list li:first-child { border-top: 0; padding-top: 4px; }
.hanging-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--accent);
  font-weight: 400;
  padding-top: 4px;
}
.hanging-list h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -.01em;
  margin: 0 0 6px;
  font-variation-settings: "opsz" 48, "SOFT" 50;
}
.hanging-list p { margin: 0; color: var(--ink-dim); font-size: 15px; max-width: 60ch; }

/* ======= How ======= */
.how { padding: 72px 0 96px; }
.flow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
@media (max-width: 820px) { .flow-grid { grid-template-columns: 1fr; gap: 32px; } }
.flow {
  padding-top: 24px;
  border-top: 2px solid var(--ink);
}
.flow-step { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.flow-n {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-subtle);
  letter-spacing: .04em;
  padding-top: 4px;
}
.flow h4 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -.01em;
  margin: 0;
  max-width: 20ch;
  line-height: 1.25;
}
.flow p { margin: 0; color: var(--ink-dim); font-size: 14.5px; max-width: 32ch; }

/* ======= Pricing table ======= */
.pricing { padding: 72px 0 96px; }
.pricing-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: baseline;
  margin-bottom: 40px;
}
.pricing-head .caption { margin: 0; max-width: 30ch; text-align: right; }
@media (max-width: 760px) {
  .pricing-head { grid-template-columns: 1fr; }
  .pricing-head .caption { text-align: left; }
}

.price-table { border-top: 1px solid var(--ink); }
.price-row {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr .8fr .8fr 2fr;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  align-items: flex-start;
  gap: 24px;
  transition: background .15s var(--ease);
}
.price-row:hover:not(.price-head) { background: var(--hover-tint); }
.price-row.is-featured {
  background: var(--paper-2);
  padding-left: 16px; padding-right: 16px;
  margin: 0 -16px;
}
.price-row.price-head {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.price-head.is-featured { background: transparent; }
@media (max-width: 880px) {
  .price-row { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
  .price-row.price-head { display: none; }
  .price-row.is-featured { padding: 24px 16px; margin: 0 -16px; }
}

.plan-name {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -.01em;
  margin-bottom: 4px;
  font-variation-settings: "opsz" 48, "SOFT" 50;
}
.plan-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-subtle);
}
.plan-tag-hot { color: var(--accent); }

.price-cell { align-self: center; }
.price-display {
  font-family: var(--serif);
  display: inline-flex; align-items: baseline;
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 320;
  letter-spacing: -.02em;
}
.px-dollar { font-size: 20px; color: var(--ink-dim); margin-right: 1px; }
.px-amt { font-size: 52px; color: var(--ink); line-height: 1; }
.px-per { font-size: 14px; color: var(--ink-dim); margin-left: 6px; font-family: var(--sans); }

.price-row .num {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--ink);
  padding-top: 14px;
  font-variant-numeric: tabular-nums;
}
.price-row [role="cell"] > p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.5;
  max-width: 36ch;
}
.price-row [role="cell"] > p + p { margin-top: 8px; color: var(--ink-subtle); font-size: 13px; }

.pricing-foot {
  margin-top: 40px;
  text-align: center;
}

/* ======= FAQ ======= */
.faq { padding: 72px 0 96px; }
.faq-list {
  margin: 0; padding: 0;
  max-width: var(--wrap-narrow);
  border-top: 1px solid var(--rule);
}
.faq-item {
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.faq-item dt {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -.005em;
  color: var(--ink);
  display: flex; gap: 14px; align-items: baseline;
  font-variation-settings: "opsz" 48, "SOFT" 50;
}
.faq-n {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-subtle);
  letter-spacing: .04em;
  flex: 0 0 auto;
  padding-top: 4px;
}
.faq-item dd {
  margin: 0 0 0 36px;
  color: var(--ink-dim);
  font-size: 14.5px;
  max-width: 64ch;
}

/* ======= Colophon ======= */
.colophon { padding: 96px 0 96px; }
.colophon-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 880px) {
  .colophon-grid { grid-template-columns: 1fr; gap: 48px; }
}
.colophon-quote .display-sm {
  font-size: clamp(32px, 4.4vw, 48px);
  line-height: 1.15;
  max-width: 20ch;
  margin-bottom: 32px;
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 1;
}

.meta-list {
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 24px;
  font-size: 14px;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
}
.meta-list dt { color: var(--ink-subtle); }
.meta-list dd { margin: 0; color: var(--ink); }
.meta-list dd a { border-bottom: 1px solid var(--rule); }
.meta-list dd a:hover { color: var(--accent); border-color: var(--accent); }

/* ======= Footer ======= */
.foot {
  padding: 48px 0 64px;
  border-top: 1px solid var(--rule);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: start;
}
.foot-grid nav {
  display: flex; gap: 28px;
  justify-self: end;
}
.foot-grid nav a {
  font-size: 13.5px;
  color: var(--ink-dim);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.foot-grid nav a:hover { color: var(--ink); border-color: var(--rule); }
.foot-grid .caption { margin: 6px 0 0; }
.fine-print {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 11.5px;
  color: var(--ink-subtle);
  max-width: 60ch;
  line-height: 1.5;
  padding-top: 20px;
  border-top: 1px solid var(--rule-soft);
}
@media (max-width: 720px) {
  .foot-grid { grid-template-columns: 1fr; }
  .foot-grid nav { justify-self: start; flex-wrap: wrap; }
}

/* ======= /app/* pages (signup / login / dashboard) ======= */
.app-page main { padding: 32px 0 40px; }
.app-main { padding: 48px 0 72px; }
.app-wrap { max-width: 560px; margin: 0 auto; padding: 0 32px; }
.app-wrap-wide { max-width: 980px; margin: 0 auto; padding: 0 32px; }
.app-title { margin: 0 0 16px; max-width: 22ch; }
.app-lede { margin: 0 0 36px; max-width: 42ch; }
.app-form { max-width: 420px; gap: 22px; }
.app-form .label-hint { text-transform: none; letter-spacing: 0; color: var(--ink-subtle); font-weight: 500; }
.app-foot { margin-top: 40px; border-top: 1px solid var(--rule-soft); padding-top: 24px; }
.app-link { color: var(--accent); border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.app-link:hover { border-color: var(--accent); }
.app-note { margin: 0 0 20px; color: var(--ink-dim); font-size: 14.5px; max-width: 56ch; }
.app-loading { font-family: var(--serif); font-style: italic; color: var(--ink-dim); padding: 20px 0; }
.app-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin: 24px 0 56px;
  border-top: 1px solid var(--rule);
}
@media (max-width: 860px) { .app-cards { grid-template-columns: 1fr; } }
.app-card {
  padding: 24px 4px 20px;
  border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 8px;
}
.app-card .caps { margin-bottom: 4px; }
.app-card-big {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 380;
  letter-spacing: -.015em;
  color: var(--ink);
  line-height: 1.1;
  font-variation-settings: "opsz" 48, "SOFT" 50;
}
.app-card-mid {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink);
  word-break: break-all;
}
.app-card .caption { margin: 0; font-style: normal; font-family: var(--sans); font-size: 13px; color: var(--ink-dim); }
.app-block { padding: 40px 0 12px; border-top: 1px solid var(--rule); }
.app-block:first-of-type { border-top: 0; padding-top: 16px; }
.app-pre {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 16px 18px;
  font-family: var(--mono);
  font-size: 13px;
  overflow-x: auto;
  margin: 0 0 12px;
  max-width: 560px;
  color: var(--ink);
}
.app-pre code { font-family: inherit; color: inherit; background: none; padding: 0; }
.tier-quick-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.btn-ghost:hover { background: var(--hover-tint); color: var(--ink); }
.btn-ghost:disabled { color: var(--ink-subtle); cursor: not-allowed; background: transparent; border-color: var(--rule-soft); }

/* ======= Key panel (signup key reveal) ======= */
.key-panel {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.key-row {
  display: flex; gap: 12px; align-items: stretch;
  margin: 16px 0 20px;
  flex-wrap: wrap;
}
.key-code {
  flex: 1 1 260px; min-width: 0;
  font-family: var(--mono);
  font-size: 14px;
  padding: 14px 16px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  color: var(--ink);
  word-break: break-all;
  user-select: all;
}

/* ======= Inner pages (terms / privacy) ======= */
.page-inner { max-width: 720px; padding: 64px 32px; margin: 0 auto; }
.page-inner h1 { font-family: var(--serif); font-size: 40px; letter-spacing: -.02em; margin: 0 0 16px; font-weight: 380; }
.page-inner h2 { font-family: var(--serif); font-size: 22px; margin: 32px 0 8px; font-weight: 400; }
.page-inner p { color: var(--ink-dim); font-size: 15.5px; }
.page-inner a { color: var(--accent); border-bottom: 1px solid var(--rule); }