/* ==========================================================================
   Resume Insite - design system
   --------------------------------------------------------------------------
   Direction: ink on paper. Warm off-white ground, warm near-black text, one
   accent used sparingly so it still means something when it appears.

   The reasoning: this site sells personal websites, so its own typography is
   the proof of craft. A serif display face signals that a person made this,
   which is the whole pitch against template builders. Deliberately not the
   purple-gradient SaaS look that every resume builder already uses.

   Committed to a single light theme. No dark mode: one look, done properly,
   beats two looks done at eighty percent.
   ========================================================================== */

/* ------------------------------------------------------------- tokens --- */
:root {
  /* Surfaces, lightest to darkest */
  --paper:       #FBF9F5;
  --paper-sunk:  #F4F0E7;
  --paper-card:  #FFFFFF;

  /* Ink */
  --ink:         #1A1714;
  --ink-soft:    #4C443B;
  --ink-faint:   #7C7367;

  /* Lines */
  --rule:        #E5DFD3;
  --rule-strong: #CEC5B4;

  /* One accent: burnt amber. Passes AA on paper at 6:1. */
  --accent:      #B4501B;
  --accent-deep: #8C3C11;
  --accent-tint: #F7EADC;
  /* The tint is deliberately quiet on step numbers and the best-value row.
     Behind display text it is too close to the paper to read, so the
     highlighter gets its own stronger wash. */
  --accent-wash: rgba(180, 80, 27, 0.18);

  --focus:       #1D5FD0;

  /* Type */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid type scale. clamp() so nothing needs a breakpoint to stay readable. */
  --t-display: clamp(2.9rem, 7vw, 5.25rem);
  --t-h1:      clamp(2.3rem, 5vw, 3.6rem);
  --t-h2:      clamp(1.8rem, 3.4vw, 2.6rem);
  --t-h3:      clamp(1.15rem, 1.6vw, 1.35rem);
  --t-lede:    clamp(1.075rem, 1.5vw, 1.3rem);
  --t-body:    1.0625rem;
  --t-small:   0.9375rem;
  --t-micro:   0.8125rem;

  /* Spacing, 4px base */
  --s1:  0.25rem;
  --s2:  0.5rem;
  --s3:  0.75rem;
  --s4:  1rem;
  --s5:  1.5rem;
  --s6:  2rem;
  --s7:  3rem;
  --s8:  4rem;
  --s9:  6rem;
  --s10: 8rem;

  /* Layout */
  --container: 1140px;
  --narrow:    720px;
  --measure:   68ch;

  --radius:    10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(26, 23, 20, 0.05),
               0 2px 8px rgba(26, 23, 20, 0.04);
  --shadow-md: 0 2px 4px rgba(26, 23, 20, 0.05),
               0 12px 32px rgba(26, 23, 20, 0.08);
  --shadow-lg: 0 4px 8px rgba(26, 23, 20, 0.06),
               0 24px 64px rgba(26, 23, 20, 0.12);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { margin: 0; line-height: 1.1; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

/* One focus style everywhere, including keyboard use inside dark bands. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------- layout --- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s5);
}

.container--narrow { max-width: var(--narrow); }

.section { padding-block: clamp(var(--s8), 9vw, var(--s10)); }
.section--tight { padding-block: clamp(var(--s7), 6vw, var(--s8)); }
.section--sunk { background: var(--paper-sunk); }

.section--ink {
  background: var(--ink);
  color: var(--paper);
}
.section--ink .lede,
.section--ink .eyebrow { color: rgba(251, 249, 245, 0.72); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s3) var(--s4);
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------- typography --- */
.display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

.h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.06;
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.1;
}

.h3 {
  font-family: var(--font-body);
  font-size: var(--t-h3);
  font-weight: 650;
  letter-spacing: -0.008em;
  line-height: 1.3;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--s4);
}

.lede {
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 58ch;
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s4); }
.prose a { color: var(--accent); text-underline-offset: 3px; }
.prose a:hover { color: var(--accent-deep); }

.muted { color: var(--ink-faint); }
.small { font-size: var(--t-small); }
.micro { font-size: var(--t-micro); }

/* An accent underline that sits behind the word, not on it. */
.mark {
  background-image: linear-gradient(var(--accent-wash), var(--accent-wash));
  background-repeat: no-repeat;
  background-position: 0 76%;
  background-size: 100% 0.32em;
}

/* ------------------------------------------------------------ buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  color: #FFFFFF;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--accent-deep); box-shadow: var(--shadow-md); }

.btn--ink {
  background: var(--ink);
  color: var(--paper);
}
.btn--ink:hover { background: #2E2823; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn--ghost:hover { border-color: var(--ink); background: rgba(26, 23, 20, 0.03); }

.section--ink .btn--ghost {
  color: var(--paper);
  border-color: rgba(251, 249, 245, 0.32);
}
.section--ink .btn--ghost:hover {
  border-color: var(--paper);
  background: rgba(251, 249, 245, 0.08);
}

.btn--lg { padding: 1.05rem 1.9rem; font-size: var(--t-body); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
}

/* A text link that reads as an action without being a button. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 600;
  font-size: var(--t-small);
  color: var(--accent);
  text-decoration: none;
}
.link-arrow::after {
  content: "\2192";
  transition: transform 0.18s ease;
}
.link-arrow:hover { color: var(--accent-deep); }
.link-arrow:hover::after { transform: translateX(3px); }

/* ------------------------------------------------------------- header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 249, 245, 0.86);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: 68px;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: -0.015em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.wordmark b { font-weight: 400; }
.wordmark i {
  font-style: normal;
  color: var(--accent);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--s2);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  font-size: var(--t-small);
  font-weight: 600;
  cursor: pointer;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s5);
}

.nav ul {
  display: flex;
  align-items: center;
  gap: var(--s5);
  list-style: none;
}

.nav a:not(.btn) {
  text-decoration: none;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink-soft);
  padding-block: var(--s2);
  transition: color 0.15s ease;
}
.nav a:not(.btn):hover { color: var(--ink); }

.nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s4) var(--s5) var(--s6);
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-md);
  }

  .nav[data-open="true"] { display: flex; }

  .nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav li + li { border-top: 1px solid var(--rule); }

  .nav a:not(.btn) {
    display: block;
    padding: var(--s4) 0;
    font-size: var(--t-body);
  }

  .nav a[aria-current="page"] { box-shadow: none; color: var(--accent); }

  .nav .btn { margin-top: var(--s4); }
}

/* --------------------------------------------------------------- hero --- */
.hero { padding-block: clamp(var(--s8), 10vw, var(--s10)) clamp(var(--s7), 7vw, var(--s9)); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(var(--s6), 5vw, var(--s9));
  align-items: center;
}

.hero p.lede { margin-top: var(--s5); }
.hero .btn-row { margin-top: var(--s6); }

.hero__note {
  margin-top: var(--s5);
  font-size: var(--t-small);
  color: var(--ink-faint);
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------- browser mockup --- */
/* Frames a screenshot so an example reads as a live site rather than an image. */
.frame {
  background: var(--paper-card);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.frame__bar {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  background: var(--paper-sunk);
  border-bottom: 1px solid var(--rule);
}

.frame__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rule-strong);
  flex: none;
}

.frame__url {
  flex: 1;
  margin-left: var(--s2);
  padding: 0.25rem 0.6rem;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--ink-faint);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frame__body { padding: 0; }

/* ---------------------------------------------------------------- grid --- */
.grid { display: grid; gap: var(--s5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Three items never sit in a two-column grid. The third is orphaned on its own
   row, which looks like a bug and, for the numbered steps, stops the sequence
   reading as a sequence. Three across, then straight to stacked. */
@media (max-width: 760px) {
  .grid--3 { grid-template-columns: 1fr; gap: var(--s6); }
}

@media (max-width: 620px) {
  .grid--2, .grid--4 { grid-template-columns: 1fr; }
}

.section-head { margin-bottom: clamp(var(--s6), 4vw, var(--s7)); }
.section-head .lede { margin-top: var(--s4); }

/* --------------------------------------------------------------- card --- */
.card {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--s6);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.card p { margin-top: var(--s3); color: var(--ink-soft); }

a.card { text-decoration: none; display: block; }
a.card:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------- steps --- */
.steps { counter-reset: step; list-style: none; }

.step { counter-increment: step; }

.step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-deep);
  font-family: var(--font-mono);
  font-size: var(--t-small);
  font-weight: 600;
  margin-bottom: var(--s4);
}
.step__n::before { content: counter(step, decimal-leading-zero); }

.step h3 { margin-bottom: var(--s3); }
.step p { color: var(--ink-soft); }

/* ------------------------------------------------------------ compare --- */
/* The "why not just use a template" answer, side by side. */
.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
}

@media (max-width: 720px) {
  .compare { grid-template-columns: 1fr; }
}

.compare__col {
  padding: var(--s6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule);
}

.compare__col--them { background: transparent; }

.compare__col--us {
  background: var(--paper-card);
  border-color: var(--ink);
  box-shadow: var(--shadow-md);
}

.compare h3 { margin-bottom: var(--s5); }

.checklist { list-style: none; }
.checklist li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--s3);
  align-items: start;
  padding-block: var(--s3);
  font-size: var(--t-small);
  line-height: 1.5;
}
.checklist li + li { border-top: 1px solid var(--rule); }

.checklist li::before {
  content: "\2013";
  color: var(--ink-faint);
  font-weight: 700;
  line-height: 1.5;
}

.checklist--yes li::before {
  content: "\2713";
  color: var(--accent);
}

/* --------------------------------------------------------------- price --- */
.price-card {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(var(--s6), 4vw, var(--s7));
  box-shadow: var(--shadow-sm);
}

.price {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin-block: var(--s4) var(--s2);
}

.price__amount {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.price__unit { color: var(--ink-faint); font-size: var(--t-small); }

.term-list { list-style: none; display: grid; gap: var(--s3); }

.term {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: var(--t-small);
}

.term--best {
  border-color: var(--accent);
  background: var(--accent-tint);
}

.term__price { font-weight: 650; white-space: nowrap; }

.tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 100px;
  background: var(--accent);
  color: #FFFFFF;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------- rules --- */
.rule { border: 0; border-top: 1px solid var(--rule); margin-block: var(--s7); }

.fineprint {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-faint);
  max-width: var(--measure);
}
.fineprint strong { color: var(--ink-soft); }

/* ------------------------------------------------------------- footer --- */
.site-footer {
  background: var(--ink);
  color: rgba(251, 249, 245, 0.78);
  padding-block: var(--s8) var(--s6);
  font-size: var(--t-small);
}

.site-footer a { color: rgba(251, 249, 245, 0.78); text-decoration: none; }
.site-footer a:hover { color: #FFFFFF; text-decoration: underline; }

.site-footer .wordmark { color: var(--paper); font-size: 1.3rem; }

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--s6);
}

@media (max-width: 720px) {
  .footer__grid { grid-template-columns: 1fr; }
}

.footer__col h4 {
  font-size: var(--t-micro);
  font-family: var(--font-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(251, 249, 245, 0.5);
  margin-bottom: var(--s4);
  font-weight: 500;
}

.footer__col ul { list-style: none; display: grid; gap: var(--s3); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid rgba(251, 249, 245, 0.14);
  font-size: var(--t-micro);
  color: rgba(251, 249, 245, 0.55);
}

/* ------------------------------------------------------------- reveal --- */
/* main.js adds .is-visible when the element scrolls into view. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------- mini site preview --- */
/* A real (small) rendering of a client site rather than a fake screenshot.
   Honest, sharp at every density, and it costs nothing to load. */
.mini { padding: clamp(var(--s5), 4vw, var(--s6)); background: var(--paper-card); }

.mini__name {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.mini__role {
  margin-top: var(--s1);
  font-size: var(--t-micro);
  color: var(--ink-faint);
}

.mini__nav {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-micro);
  font-weight: 500;
  color: var(--ink-faint);
}
.mini__nav li:first-child { color: var(--accent); }

.mini__bio {
  margin-top: var(--s4);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-soft);
}

.mini__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s3);
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  font-weight: 600;
}
.mini__row:first-of-type { margin-top: var(--s5); }

.mini__meta {
  font-size: var(--t-micro);
  font-weight: 400;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* ------------------------------------------------------------ callout --- */
/* For the one idea on a page that has to be read, not skimmed. */
.callout {
  border-left: 3px solid var(--accent);
  background: var(--accent-tint);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--s5) var(--s6);
  max-width: var(--measure);
}
.callout h3 { margin-bottom: var(--s3); }
.callout p { color: var(--ink-soft); }
.callout p + p { margin-top: var(--s3); }

.section--ink .callout {
  background: rgba(251, 249, 245, 0.06);
  border-left-color: var(--accent);
}
.section--ink .callout p { color: rgba(251, 249, 245, 0.78); }

/* --------------------------------------------------------- term cards --- */
.term-card {
  display: flex;
  flex-direction: column;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--s6);
}

.term-card--best {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.term-card__term {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.term-card__price {
  font-family: var(--font-display);
  font-size: 2.9rem;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-block: var(--s3) var(--s2);
}

.term-card__rate { font-size: var(--t-small); color: var(--ink-faint); }

.term-card__note {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- faq --- */
.faq-list { border-top: 1px solid var(--rule); }

.faq-item {
  padding-block: var(--s6);
  border-bottom: 1px solid var(--rule);
}
.faq-item h3 { margin-bottom: var(--s3); }
.faq-item p {
  color: var(--ink-soft);
  max-width: var(--measure);
}
.faq-item p + p { margin-top: var(--s3); }

/* -------------------------------------------------------- page header --- */
.pagehead { padding-block: clamp(var(--s7), 7vw, var(--s9)) var(--s6); }
.pagehead .lede { margin-top: var(--s5); }

/* A short, centred page: the thank-you and the 404. */
.stub {
  min-height: 52vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.stub .lede { margin-inline: auto; }
.stub .btn-row { justify-content: center; margin-top: var(--s6); }

/* ------------------------------------------------- live demo previews --- */
/* The examples page frames the real demo pages in scaled iframes rather than
   screenshots. A screenshot goes out of date the moment a demo is edited and
   nobody notices; a live frame cannot.

   The scale factor is set by main.js. It cannot be done in CSS: scale() needs a
   unitless number and CSS has no way to divide a length by a length to produce
   one, so calc(100cqw / 1280) is invalid and silently drops the transform. */
.preview {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
  background: var(--paper-card);
}

.preview iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 800px;
  border: 0;
  transform-origin: 0 0;
  pointer-events: none;
}

.example {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(var(--s6), 5vw, var(--s8));
  align-items: center;
}

.example + .example { margin-top: clamp(var(--s8), 8vw, var(--s10)); }

/* Alternate sides so the page does not read as three identical rows. */
.example:nth-child(even) { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.example:nth-child(even) .example__shot { order: 2; }

.example__shot { text-decoration: none; display: block; }
.example__shot .frame { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.example__shot:hover .frame {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(26, 23, 20, 0.08), 0 32px 72px rgba(26, 23, 20, 0.16);
}

.example__text h2 { margin-bottom: var(--s4); }
.example__text .lede { margin-bottom: var(--s5); }

@media (max-width: 860px) {
  .example { grid-template-columns: 1fr; }
  .example:nth-child(even) .example__shot { order: 0; }
}

/* --------------------------------------------------------------- forms --- */
.form { max-width: 680px; }

.fieldset { border: 0; padding: 0; margin: 0; }
.fieldset + .fieldset { margin-top: var(--s7); }

.fieldset > legend {
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s5);
}

.field { margin-bottom: var(--s5); }

.field > label,
.field > .label {
  display: block;
  font-size: var(--t-small);
  font-weight: 600;
  margin-bottom: var(--s2);
}

.field .hint {
  display: block;
  font-size: var(--t-small);
  color: var(--ink-faint);
  margin-bottom: var(--s3);
  font-weight: 400;
}

.field .opt { color: var(--ink-faint); font-weight: 400; }

.input,
.textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  background: var(--paper-card);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  font-size: var(--t-body);
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.textarea { min-height: 150px; resize: vertical; line-height: 1.6; }

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* Term choice as selectable cards. A radio in a list of prices is easy to skim
   past; a card is a decision the eye lands on. */
.choices { display: grid; gap: var(--s3); }

.choice {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s4);
  align-items: center;
  padding: var(--s5);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper-card);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.choice:hover { border-color: var(--ink-faint); }

.choice input { position: absolute; opacity: 0; pointer-events: none; }

.choice__mark {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--rule-strong);
  flex: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.choice:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.choice:has(input:checked) .choice__mark {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 4px var(--accent);
}
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

.choice__title { font-weight: 650; }
.choice__note { display: block; font-size: var(--t-small); color: var(--ink-faint); font-weight: 400; }
.choice__price { font-weight: 650; white-space: nowrap; }

/* File input. The native control is unusable-looking, so it is hidden behind a
   styled label; the input itself still does all the work. */
.drop {
  display: block;
  padding: var(--s6);
  border: 2px dashed var(--rule-strong);
  border-radius: var(--radius-lg);
  background: var(--paper-card);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.drop:hover, .drop.is-over { border-color: var(--accent); background: var(--accent-tint); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop__title { font-weight: 650; display: block; }
.drop__note { font-size: var(--t-small); color: var(--ink-faint); }

.filelist { list-style: none; margin-top: var(--s4); display: grid; gap: var(--s2); }
.filelist li {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  align-items: center;
  padding: var(--s3) var(--s4);
  background: var(--paper-sunk);
  border-radius: var(--radius);
  font-size: var(--t-small);
}
.filelist .size { color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--t-micro); white-space: nowrap; }
.filelist li[data-bad="true"] { background: #FBEAE5; color: #93300F; }

.form-status {
  padding: var(--s4) var(--s5);
  border-radius: var(--radius);
  margin-bottom: var(--s5);
  font-size: var(--t-small);
}
.form-status:empty { display: none; }
.form-status[data-state="ok"]  { background: #E7F3EC; color: #1C5334; }
.form-status[data-state="err"] { background: #FBEAE5; color: #93300F; }

.form-foot { margin-top: var(--s6); }
.form-foot .micro { color: var(--ink-faint); margin-top: var(--s4); max-width: 56ch; }

/* --------------------------------------------------------- order page --- */
.order-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(var(--s6), 5vw, var(--s8));
  align-items: start;
}

.order-aside { position: sticky; top: 92px; }

@media (max-width: 940px) {
  .order-grid { grid-template-columns: 1fr; }
  .order-aside { position: static; order: -1; }
}

.summary {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--s6);
  box-shadow: var(--shadow-sm);
}

.summary h2 {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s5);
}

.summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  align-items: baseline;
  padding-block: var(--s3);
  font-size: var(--t-small);
}
.summary__row + .summary__row { border-top: 1px solid var(--rule); }
.summary__row b { font-weight: 650; white-space: nowrap; }
.summary__row span.muted { font-size: var(--t-micro); display: block; }

.summary__total {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  align-items: baseline;
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 2px solid var(--ink);
  font-weight: 650;
}
.summary__total b { font-family: var(--font-display); font-size: 1.9rem; font-weight: 400; letter-spacing: -0.02em; }

.summary__note {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
  font-size: var(--t-micro);
  color: var(--ink-faint);
  line-height: 1.55;
}