/* ============================================================
   go.bentremblay.com
   Skin ported from bentremblay.com (« Essais sobres »): cream paper,
   Young Serif / Newsreader / Helvetica, cobalt accent.
   Form widgets follow the writedocs BEM conventions, re-themed to this palette.
   ============================================================ */

:root {
  /* Surfaces */
  --bg: #FBF7EB;          /* cream page background */
  --panel: #FFFEF8;       /* cards, inputs */

  /* Ink */
  --ink: #26221B;
  --logo-ink: #1E1B14;
  --body-ink: #2E2921;
  --ink-soft: #4A4437;
  --muted: #5C5546;
  --faded: #6E6656;

  /* Accent */
  --accent: #2E52CC;      /* cobalt (6.1:1 on the cream) — links and hover states, never a resting fill */
  --danger: #B4462E;

  /* Lines */
  --line-rule: color-mix(in srgb, var(--ink) 42%, var(--bg)); /* masthead (2px), band separators: aged paper, not ink */
  --line-hairline: #D9CFB8; /* soft warm frames: inputs, cards, choices */
  --line-soft: #EFE8D4;   /* row separators */

  /* Cream on the ink surface (the choice cards) */
  --on-ink-desc: color-mix(in srgb, var(--bg) 65%, transparent);
  --on-ink-line: color-mix(in srgb, var(--bg) 55%, transparent);

  /* Motion */
  --duration-fast: 150ms;
  --duration-base: 180ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* Type */
  --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
  --font-display: 'Young Serif', Georgia, serif;

  /* Vertical rhythm — the reading column runs on a 20/40 beat: bound pairs sit
     at 20px, section breaks at 40px. The crumbs eyebrow is the one 24px exception. */
  --gap-bound: 20px;      /* title↔subtitle, note↔form, field↔field */
  --gap-break: 40px;      /* header↔content, group↔group */
  --gap-eyebrow: 24px;    /* crumbs → title */

  /* Form rhythm reads from the same beat */
  --form-gap-field: var(--gap-bound);
  --form-gap-group: var(--gap-break);
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

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

/* ---- Masthead ---- */
.masthead {
  padding: 18px 24px;
  border-bottom: 2px solid var(--line-rule);
  font-family: var(--font-sans);
}
.masthead__inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.masthead__brand { display: block; flex: none; }
.masthead__brand-svg { height: 38px; width: auto; display: block; }
/* fill AND stroke: the wordmark's weight comes from its 2.84px stroke, drop it and it renders thin */
.masthead__brand-mark { fill: var(--logo-ink); stroke: var(--logo-ink); transition: fill var(--duration-fast), stroke var(--duration-fast); }
.masthead__brand-dot { fill: var(--accent); stroke: var(--accent); transition: fill var(--duration-fast), stroke var(--duration-fast); }
.masthead__brand:is(:hover, :focus-visible) .masthead__brand-mark { fill: var(--accent); stroke: var(--accent); }
.masthead__brand:is(:hover, :focus-visible) .masthead__brand-dot { fill: var(--logo-ink); stroke: var(--logo-ink); }
.masthead__back {
  position: relative;
  font: 600 14px/1 var(--font-sans);
  color: var(--muted);
  transition: color var(--duration-fast);
  white-space: nowrap;
}
.masthead__back::after { content: ""; position: absolute; inset: -14px -8px; }
.masthead__back:is(:hover, :focus-visible) { color: var(--accent); }

/* ---- Flash ---- */
.flash {
  max-width: calc(760px + 48px);
  margin: 20px auto -12px;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line-hairline));
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
  border-radius: 10px;
  font: 500 14px/1.4 var(--font-sans);
  color: var(--ink);
}

/* ============================================================
   LETTER — the reading / form column
   ============================================================ */
.letter {
  max-width: calc(680px + 48px);
  margin: 0 auto;
  padding: 80px 24px 96px;
}

/* Forms run a touch wider than the reading column so two-column rows breathe. */
.letter--form { max-width: calc(760px + 48px); }

.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--gap-eyebrow);
  font: 500 13px/1.5 var(--font-sans);
  color: var(--muted);
}
.crumbs a { transition: color var(--duration-fast); }
.crumbs a:is(:hover, :focus-visible) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.crumbs__sep { color: var(--faded); }
.crumbs__current { color: var(--ink); font-weight: 600; }

.letter__mark {
  flex: none;
  display: flex;
  align-items: center;
  height: 1lh;
  color: var(--accent);
}
.letter__mark svg { width: 1.1em; height: 1.1em; }

.letter__title {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font: 400 clamp(39px, 4vw + 16px, 64px)/1.12 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: pretty;
  margin: 0 0 var(--gap-bound);
}

.letter__subtitle {
  font-size: clamp(21px, 0.9vw + 17px, 28px);
  line-height: 1.42;
  color: var(--ink);
  text-wrap: pretty;
  margin: 0 0 var(--gap-break);
}

.letter__body {
  font-family: var(--font-serif);
  font-size: clamp(18px, 0.85vw + 14px, 23px);
  line-height: 1.76;
  color: var(--body-ink);
}
.letter__body p { margin: 0 0 24px; }

.letter__back {
  margin-top: var(--gap-break);
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--font-sans);
}
.letter__back a {
  font: 600 14px/1 var(--font-sans);
  color: var(--accent);
}
.letter__back a:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   HOME — the three choices
   ============================================================ */
.home {
  max-width: 960px;
  margin: 0 auto;
  padding: 88px 24px 96px;
}
.home__intro { max-width: 760px; margin-bottom: var(--gap-break); }
.home__title {
  font: 400 clamp(42px, 4.6vw + 16px, 72px)/1.08 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: pretty;
  margin: 0 0 var(--gap-bound);
}
.home__lead {
  font-family: var(--font-serif);
  font-size: clamp(21px, 0.9vw + 17px, 28px);
  line-height: 1.42;
  color: var(--ink);
  text-wrap: pretty;
  margin: 0;
}

.choices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  font-family: var(--font-sans);
}
.choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 28px 28px 30px;
  border-radius: 16px;
  color: var(--bg);
  background: var(--logo-ink);
  transition: background-color 220ms var(--ease-out);
}
.choice:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--bg) 8%, var(--logo-ink));
}
.choice__icon { color: var(--bg); }
.choice__icon svg { width: 26px; height: 26px; }
.choice__name { font-size: 16px; font-weight: 600; line-height: 1.3; }
.choice__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--on-ink-desc);
  flex: 1;
}
.choice__more {
  margin-top: 12px;
  font: 700 14px/1 var(--font-sans);
  color: var(--bg);
  border: 1.5px solid var(--on-ink-line);
  border-radius: 999px;
  padding: 14px 20px;
  transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.choice:is(:hover, :focus-visible) .choice__more {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--bg);
}

/* ============================================================
   FORMS
   ============================================================ */
.form { font-family: var(--font-sans); }

.form__field { margin-bottom: var(--form-gap-field); }

.form__label {
  display: block;
  font: 600 14px/1.4 var(--font-sans);
  color: var(--ink);
  margin-bottom: 6px;
}

.form__optional {
  font: 400 13px/1 var(--font-sans);
  text-transform: none;
  letter-spacing: 0;
  color: var(--faded);
  margin-left: 6px;
}

/* The reply note sits beside the submit button — reassurance at the point of
   action — so it reads as part of the action row, not a floating intro line. */
.form__reply {
  margin: 0;
  max-width: 34ch;
  font: 400 14px/1.5 var(--font-sans);
  color: var(--muted);
  text-wrap: pretty;
}

.form__alert {
  margin: 0 0 var(--form-gap-field);
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line-hairline));
  background: color-mix(in srgb, var(--danger) 7%, var(--bg));
  border-radius: 10px;
  font: 500 14px/1.4 var(--font-sans);
  color: var(--danger);
}

.form__group { margin-bottom: var(--form-gap-group); }
.form__group:last-of-type { margin-bottom: 0; }
.form__group-label {
  font: 600 11.5px/1.5 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--form-gap-field);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}

/* Two-column rows — short single-line fields side by side (textareas and radio
   groups always stay full width). */
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--form-gap-field);
  margin-bottom: var(--form-gap-field);
}
/* Keep the inputs on one line even when one field carries a hint and the other
   doesn't — the label sits at the top of the cell, the input at the bottom. */
.form__row .form__field {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
.form__row .form__field .form__input { margin-top: auto; }

.form__hint {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  margin-bottom: 8px;
}

.form__input {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line-hairline);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.form__input::placeholder { color: var(--faded); }
.form__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
textarea.form__input {
  min-height: 96px;
  line-height: 1.55;
  resize: vertical;
}

/* Radio groups */
.form__choices {
  border: 0;
  padding: 0;
  min-inline-size: 0;
}
legend.form__label { margin-bottom: 10px; }

.form__choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line-hairline);
  border-radius: 10px;
  background: var(--panel);
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
.form__choice + .form__choice { margin-top: 8px; }
.form__choice:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line-hairline)); }
.form__choice input { margin-top: 2px; accent-color: var(--accent); }
.form__choice:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
}
/* Keyboard focus lights the whole pill, not just the native circle. */
.form__choice:has(input:focus-visible) { border-color: var(--accent); }

/* Inline radio groups — short single-line options wrap instead of stacking. */
.form__choices--inline { display: flex; flex-wrap: wrap; gap: 8px; }
.form__choices--inline legend.form__label { flex-basis: 100%; }
.form__choices--inline .form__choice { flex: 0 1 auto; }
.form__choices--inline .form__choice + .form__choice { margin-top: 0; }
.form__choices--inline .form__error { flex-basis: 100%; }

.form__reveal { margin-top: 4px; }

.form__error {
  font-size: 13px;
  color: var(--danger);
  margin-top: 6px;
}

/* Honeypot — off-screen, never shown to humans */
.form__gotcha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__actions {
  margin-top: var(--form-gap-group);
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 15px/1 var(--font-sans);
  color: var(--bg);
  background: var(--logo-ink);
  border: 1.5px solid var(--logo-ink);
  border-radius: 999px;
  padding: 15px 30px;
  cursor: pointer;
  transition: background-color var(--duration-base), border-color var(--duration-base), color var(--duration-base), transform var(--duration-base) var(--ease-out);
}
.btn:is(:hover, :focus-visible) { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn:active { transform: translateY(1px); }

/* ============================================================
   ADMIN
   ============================================================ */
.admin {
  max-width: 900px;
  margin: 0 auto;
  padding: 56px 24px 96px;
  font-family: var(--font-sans);
}
.admin__title {
  font: 400 32px/1.1 var(--font-display);
  color: var(--ink);
  margin-bottom: 32px;
}

.admin-section { margin-bottom: 44px; }
.admin-section__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 16px/1.3 var(--font-sans);
  color: var(--ink);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-hairline);
}
.admin-section__count {
  font: 600 12px/1 var(--font-sans);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  border-radius: 999px;
  padding: 4px 9px;
}

.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th {
  text-align: left;
  font: 600 11.5px/1.3 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
.admin-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
  vertical-align: top;
}
.admin-table__meta { color: var(--faded); white-space: nowrap; }

.admin-link { color: var(--accent); font-weight: 600; }
.admin-link:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 2px; }
.admin-empty { color: var(--muted); font-size: 14px; }

.admin-detail {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 24px 96px;
  font-family: var(--font-sans);
}
.admin-detail__back { display: inline-block; margin-bottom: 20px; font-size: 14px; }
.admin-detail__name { font: 400 30px/1.1 var(--font-display); color: var(--ink); margin-bottom: 6px; }
.admin-detail__meta { font-size: 14px; color: var(--muted); margin-bottom: 28px; }
.admin-detail__list dt {
  font: 600 11.5px/1.4 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
  margin-top: 20px;
}
.admin-detail__list dd {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  .choices { grid-template-columns: 1fr; }
  .choice { padding: 24px 22px 28px; }
  .home { padding-top: 64px; }
  .letter { padding-top: 56px; }
  .letter__title { gap: 12px; }
  .letter__body { line-height: 1.7; }
}

@media (max-width: 360px) {
  .letter__title { font-size: 36px; }
  .home__title { font-size: 39px; }
}

@media (max-width: 560px) {
  .masthead { padding: 16px 18px; }
  .masthead__back { font-size: 13px; }
  .form__row { grid-template-columns: 1fr; gap: var(--form-gap-field); }
}