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

:root {
  /* Surfaces */
  --bg: #FBF7EB;          /* cream page background */
  --panel: #FFFEF8;       /* cards, inputs */
  --surface-hover: color-mix(in srgb, #26221B 4%, #FBF7EB);

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

  /* Accent */
  --accent: #3E6AD1;      /* royal blue */
  --highlight: #D5E1F9;   /* marker under key passages */
  --danger: #B4462E;

  /* Lines */
  --line-nav: #D9CFB8;
  --line-band: #E2D9C4;
  --line-soft: #EFE8D4;

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

  /* Form rhythm — on the reference's 4px grid (20 within a group, 40 between) */
  --form-gap-field: 20px;
  --form-gap-group: 40px;
}

/* ---- 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: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

mark {
  background: linear-gradient(transparent 14%, var(--highlight) 14%, var(--highlight) 92%, transparent 92%);
  color: inherit;
  padding: 0 3px;
  margin: 0 -3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---- Masthead ---- */
.masthead {
  padding: 18px 24px;
  border-bottom: 1px solid var(--line-nav);
  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; position: relative; flex: none; }
.masthead__brand-img {
  height: 34px;
  width: auto;
  display: block;
  transition: opacity .15s;
}
.masthead__brand-img--black { position: absolute; top: 0; left: 0; opacity: 0; }
.masthead__brand:hover .masthead__brand-img--black { opacity: 1; }
.masthead__brand:hover .masthead__brand-img:not(.masthead__brand-img--black) { opacity: 0; }
.masthead__back {
  position: relative;
  font: 600 14px/1 var(--font-sans);
  color: var(--muted);
  transition: color .15s;
  white-space: nowrap;
}
.masthead__back::after { content: ""; position: absolute; inset: -14px -8px; }
.masthead__back:hover { 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-nav));
  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: 64px 24px 96px;
}

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

.kicker {
  font: 600 11.5px/1.5 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px;
}

.letter__mark { color: var(--accent); margin: 0 0 20px; }
.letter__mark svg { width: 40px; height: 40px; }

.letter__title {
  font: 400 clamp(30px, 2vw + 18px, 42px)/1.15 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: pretty;
  margin: 0 0 18px;
}

.letter__subtitle {
  font-size: clamp(19px, 0.8vw + 15px, 24px);
  line-height: 1.4;
  color: var(--ink);
  text-wrap: pretty;
  margin: 0 0 40px;
}

.letter__body {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.7;
  color: var(--body-ink);
}
.letter__body p { margin: 0 0 20px; }

.letter--thanks .letter__title { margin-bottom: 24px; }

.letter__back {
  margin-top: 36px;
  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:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   HOME — the three choices
   ============================================================ */
.home {
  max-width: 960px;
  margin: 0 auto;
  padding: 72px 24px 96px;
}
.home__intro { max-width: 620px; margin-bottom: 40px; }
.home__title {
  font: 400 clamp(32px, 2.4vw + 20px, 46px)/1.12 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: pretty;
  margin: 0 0 18px;
}
.home__lead {
  font-family: var(--font-serif);
  font-size: clamp(19px, 0.8vw + 15px, 23px);
  line-height: 1.6;
  color: var(--body-ink);
  text-wrap: pretty;
}

.choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 26px 24px 28px;
  border: 1px solid var(--line-nav);
  border-radius: 16px;
  background: var(--panel);
  color: inherit;
  transition: border-color .15s;
}
.choice:hover {
  border-color: var(--accent);
}
.choice__icon { color: var(--accent); margin-bottom: 4px; }
.choice__icon svg { width: 28px; height: 28px; }
.choice__name { font: 700 18px/1.2 var(--font-sans); color: var(--ink); }
.choice__desc {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  flex: 1;
}
.choice__more { margin-top: 10px; font: 700 14px/1 var(--font-sans); color: var(--accent); }

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

.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;
}

/* Tighten the subtitle→reassurance gap here rather than with a negative margin. */
.letter--form .letter__subtitle { margin-bottom: 20px; }
.form__reply {
  margin: 0 0 32px;
  font: 400 14px/1.5 var(--font-sans);
  color: var(--muted);
}

/* Field groups — the site's kicker-on-hairline device (cf. .steps__label) so a
   long form reads as a few named passes instead of one flat list. */
.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 20px;
  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-nav);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.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;
  margin: 0 0 22px;
  min-inline-size: 0;
}
.form__choices > .form__label,
legend.form__label { margin-bottom: 10px; }

.form__choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line-nav);
  border-radius: 10px;
  background: var(--panel);
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.form__choice + .form__choice { margin-top: 8px; }
.form__choice:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line-nav)); }
.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); }

/* Rythme options: a name line + a quiet price line. */
.form__choice-text { display: block; }
.form__choice-name { display: block; }
.form__choice-price {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: lining-nums tabular-nums;
}

/* 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%; margin-bottom: 10px; }
.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: 28px; }

.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 .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================
   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-nav);
}
.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:hover { 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; }
  .home { padding-top: 56px; }
  .letter { padding-top: 48px; }
}

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