/* ===========================================================================
   SURVEY — a document on a desk
   ---------------------------------------------------------------------------
   Museum presentation: the parchment sheet lies on a rich wooden surface under
   pooled warm light, held at the corners by brass mounts. Everything on the
   sheet is centred on a single axis — numeral, title, question, answers — so
   the page reads as one symmetrical column.

   Legibility is the priority over refinement wherever the two disagree. This
   gets filled in on a phone, in a dim lounge, by someone holding a cigar. The
   type is deliberately larger than a website would normally set it, copper is
   never used for anything you have to read, and the 1–10 numerals are big
   enough to hit without looking.
   =========================================================================== */

.survey {
  /* Outside the sheet is the dark desk, so anything there (the skip link)
     reads light. The sheet sets its own ink below. */
  color: var(--on-dark);
  /* Everything on the sheet steps up from here. A survey is not a blog post;
     16px is too small for the job. */
  font-size: clamp(1.06rem, 1rem + 0.34vw, 1.22rem);
}

.sheet-wrap {
  padding: clamp(var(--sp-5), 4vw, var(--sp-9)) clamp(var(--sp-3), 3vw, var(--sp-6));
}

.sheet {
  position: relative;
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(var(--sp-7), 6vw, var(--sp-9)) clamp(var(--sp-5), 5vw, var(--sp-8));
  background-color: var(--ivory);
  color: var(--ink);
  /* Lifted off the desk. The long soft shadow is what sells it as a physical
     sheet rather than a coloured div. */
  box-shadow:
    inset 0 0 0 1px var(--ivory-shade),
    0 0 0 3px var(--ivory),
    0 0 0 4px var(--copper),
    0 0 0 7px var(--ivory),
    0 0 0 8px var(--brass-deep),
    0 18px 50px rgba(0, 0, 0, 0.55),
    0 2px 10px rgba(0, 0, 0, 0.4);
}

/* The sheet needs its own parchment texture now that the page behind it is
   wood rather than ivory. */
.sheet::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='5' seed='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.3'/%3E%3C/svg%3E"),
    radial-gradient(115% 95% at 50% 45%, transparent 55%, rgba(57, 35, 23, 0.14) 100%);
  background-size: 320px 320px, cover;
}

/* --- Corner scrollwork ---------------------------------------------------
   One symbol, mirrored into each corner, set inside the brass mounts. */
.sheet__corner {
  position: absolute;
  width: clamp(2.4rem, 6vw, 3.75rem);
  height: clamp(2.4rem, 6vw, 3.75rem);
  color: var(--copper-burnished);
  opacity: 0.45;
  pointer-events: none;
}

.sheet__corner--tl { top: var(--sp-4); left: var(--sp-4); }
.sheet__corner--tr { top: var(--sp-4); right: var(--sp-4); transform: scaleX(-1); }
.sheet__corner--bl { bottom: var(--sp-4); left: var(--sp-4); transform: scaleY(-1); }
.sheet__corner--br { bottom: var(--sp-4); right: var(--sp-4); transform: scale(-1); }

@media (max-width: 34rem) {
  /* At phone width the lower corners collide with the copy. */
  .sheet__corner--bl,
  .sheet__corner--br { display: none; }
}

/* --- Crest ---------------------------------------------------------------- */
.crest {
  text-align: center;
}

/* The crest, 202x317. Height-driven so the artwork keeps its own proportions
   whatever its pixel dimensions; only the height is ever specified. */
.crest__mark {
  height: clamp(4.5rem, 16vw, 7rem);
  width: auto;
  margin: 0 auto var(--sp-4);
  /* Sits on the sheet rather than floating over it. */
  filter: drop-shadow(0 2px 6px rgba(57, 35, 23, 0.3));
}

.crest__mark--drawn {
  /* 300 x 400 viewBox */
  width: calc(clamp(4.5rem, 16vw, 7rem) * 0.75);
  color: var(--copper-burnished);
  filter: none;
}

.crest__blend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--sp-2), 3vw, var(--sp-5));
  margin-top: var(--sp-3);
  max-width: 100%;
  /* The house name has to hold one line: the flanking crosses are centred on
     the row, so a wrap strands them out at the margins with nothing beside
     them. The name measures 13.65em in this face, and the ceiling here is the
     largest that still clears the crosses inside the sheet. */
  font-size: clamp(0.8rem, 4.4vw, 2.3rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crest__blend > span {
  white-space: nowrap;
}

.crest__blend .display {
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6));
}

.crest__flank {
  flex: none;
  width: 0.5em;
  height: 0.75em;
  color: var(--copper-burnished);
}

.crest__motto {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-indent: var(--track-wide);
}

.crest__divider {
  margin: var(--sp-7) auto var(--sp-6);
  max-width: 24rem;
}

.crest__title {
  font-size: var(--step-2);
  color: var(--copper-text);
  text-indent: var(--track-secondary);
}

.crest__intro {
  max-width: var(--measure);
  margin: var(--sp-5) auto 0;
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.75;
  color: var(--ink);
}

/* --- Form skeleton -------------------------------------------------------- */
.form {
  margin-top: var(--sp-9);
}

.form__divider {
  margin: var(--sp-9) auto;
  max-width: 28rem;
}

.q {
  max-width: var(--measure);
  margin: 0 auto;
  /* Perfect symmetry: one centre line runs the whole length of the sheet. */
  text-align: center;
}

/* --- Question heading ----------------------------------------------------
   Numeral above the title rather than beside it, so nothing sits off-axis. */
.q__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.q__numeral {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--copper-text);
}

/* A short rule under the numeral, centred. */
.q__numeral::after {
  content: '';
  display: block;
  width: 2.6rem;
  height: 1px;
  margin: var(--sp-3) auto 0;
  background-image: var(--foil-rule);
}

.q__title {
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
  color: var(--ink);
}

/* The question itself. Full-strength ink, not muted — this is the thing the
   taster has to read. */
.q__label {
  display: block;
  margin-bottom: var(--sp-5);
  font-family: var(--font-body);
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.6;
  color: var(--ink);
}

.field + .field {
  margin-top: var(--sp-7);
}

/* --- 1–10 rating ---------------------------------------------------------
   Ten struck numerals rather than a slider: a slider is imprecise on a phone
   and reads cheap. */
.scale {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.scale__row {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: clamp(3px, 0.9vw, 7px);
}

/* On a phone, ten across leaves roughly a 33px target — too small for someone
   holding a cigar in the other hand. Below this width the scale breaks into
   two rows of five, which roughly doubles each target. It still reads as one
   continuous 1–10 run. */
@media (max-width: 27rem) {
  .scale__row {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }
}

.scale__opt {
  display: block;
  cursor: pointer;
  /* A grid item's automatic minimum is its min-content width, and the square
     cell inside derives that from its min-height — a 46.4px floor per column.
     Ten of those need 508px, so on any sheet narrower than that the cells kept
     their size and simply ran off the edge instead of shrinking with the
     column. Releasing the floor lets them narrow; min-height still holds the
     tap target's height, so they go from square to slightly tall rather than
     becoming unusable. */
  min-width: 0;
}

.scale__num {
  display: grid;
  place-items: center;
  /* aspect-ratio only sizes the dimension that is not otherwise specified, so
     without this the min-height below drove the WIDTH too and each cell sat
     46.4px wide inside a 39px column. Stating the width keeps the cell square
     wherever the column allows it and lets it go tall-and-narrow where it
     doesn't, instead of overhanging its neighbour. */
  width: 100%;
  aspect-ratio: 1;
  min-height: 2.9rem;
  border: 1px solid var(--edge);
  border-radius: 2px;
  background-color: rgba(255, 253, 249, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  font-family: var(--font-display);
  /* Was 11px. At that size the scale is unreadable at arm's length, which is
     exactly how a phone is held. */
  font-size: clamp(1rem, 3.1vw, 1.28rem);
  font-weight: 600;
  color: var(--ink);
  transition:
    background-color var(--fade),
    color var(--fade),
    border-color var(--fade),
    box-shadow var(--fade),
    transform var(--fade);
}

.scale__opt:hover .scale__num {
  border-color: var(--copper-text);
  background-color: rgba(255, 255, 252, 0.95);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 6px rgba(57, 35, 23, 0.18);
}

.scale__opt input:checked + .scale__num {
  border-color: var(--black);
  background-image: var(--copper-face);
  color: var(--ivory);
  box-shadow:
    inset 0 1px 0 rgba(255, 234, 205, 0.65),
    inset 0 -2px 0 rgba(67, 32, 10, 0.35),
    0 2px 7px rgba(57, 35, 23, 0.3);
}

.scale__opt input:focus-visible + .scale__num {
  outline: 2px solid var(--copper-text);
  outline-offset: 2px;
}

.scale__anchors {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-3);
  font-family: var(--font-secondary);
  font-size: var(--step--1);
  letter-spacing: var(--track-secondary);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- Single choice -------------------------------------------------------- */
.choice {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.choice__row {
  display: grid;
  gap: var(--sp-3);
}

.choice__row--3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 30rem) {
  .choice__row--3 { grid-template-columns: 1fr; }
}

/* Centred content keeps every option on the sheet's single axis. */
.choice__opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--edge);
  border-radius: 2px;
  background-color: rgba(255, 253, 249, 0.6);
  cursor: pointer;
  transition:
    border-color var(--fade),
    background-color var(--fade),
    transform var(--fade),
    box-shadow var(--fade);
}

.choice__opt:hover {
  border-color: var(--copper-text);
  background-color: rgba(255, 255, 252, 0.95);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(57, 35, 23, 0.16);
}

.choice__box {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 1px rgba(57, 35, 23, 0.12);
  transition: border-color var(--fade), box-shadow var(--fade), background-image var(--fade);
}

.choice__text {
  font-size: var(--step-1);
  color: var(--ink);
}

.choice__opt:has(input:checked) {
  border-color: var(--copper-burnished);
  border-width: 2px;
  padding: calc(var(--sp-4) - 1px) calc(var(--sp-5) - 1px);
  background-color: var(--copper-a12);
}

.choice__opt:has(input:checked) .choice__box {
  border-color: var(--copper-burnished);
  background-image: radial-gradient(circle at 38% 32%, var(--copper-highlight) 0%, var(--copper) 45%, var(--copper-burnished) 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 253, 249, 0.9);
}

.choice__opt:has(input:focus-visible) {
  outline: 2px solid var(--copper-text);
  outline-offset: 2px;
}

/* :has() is well supported, but a browser without it must still show the
   selection. Fall back to a plain visible radio. */
@supports not selector(:has(*)) {
  .choice__opt input {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
    margin: 0;
    accent-color: var(--copper);
  }
  .choice__box { display: none; }
}

/* --- Free text ------------------------------------------------------------
   Ruled like a ledger page: repeating lines sized to the line-height so the
   writing sits on them. */
.text,
.line {
  width: 100%;
  padding: var(--sp-4);
  border: 1px solid var(--edge);
  border-radius: 2px;
  background-color: rgba(255, 253, 249, 0.7);
  box-shadow: inset 0 1px 3px rgba(57, 35, 23, 0.1);
  font-family: var(--font-body);
  font-size: var(--step-1);
  color: var(--ink);
  /* Handwriting is centred on the sheet's axis like everything else, but
     paragraphs of it read better ranged left. */
  text-align: left;
  transition: border-color var(--fade), background-color var(--fade), box-shadow var(--fade);
}

.text {
  line-height: 2.25rem;
  resize: vertical;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(2.25rem - 1px),
    var(--rule-faint) calc(2.25rem - 1px),
    var(--rule-faint) 2.25rem
  );
  background-position: 0 calc(var(--sp-4) + 0.45rem);
  background-clip: content-box;
}

.text:focus,
.line:focus {
  border-color: var(--copper-burnished);
  background-color: rgba(255, 255, 252, 0.98);
  box-shadow: inset 0 1px 3px rgba(57, 35, 23, 0.08);
}

.text::placeholder,
.line::placeholder {
  color: var(--ink-soft);
}

/* --- Optional attribution ------------------------------------------------- */
.identity__note {
  margin-bottom: var(--sp-5);
  font-size: var(--step-0);
  font-style: italic;
  color: var(--ink-soft);
}

/* Name and email are required, so they get the same full-strength label as
   every other question rather than the muted treatment optional fields had. */
.identity__row .q__label {
  color: var(--ink);
}

.identity__row {
  display: grid;
  gap: var(--sp-4) var(--sp-5);
  grid-template-columns: repeat(12, 1fr);
  text-align: left;
}

.identity__row .field {
  grid-column: span var(--field-span, 12);
}

/* Below this the columns are narrower than the words in them. One field per
   row is the only honest layout on a phone. */
@media (max-width: 34rem) {
  .identity__row {
    grid-template-columns: 1fr;
  }

  .identity__row .field {
    grid-column: 1 / -1;
  }
}

.identity__row .field + .field {
  margin-top: 0;
}

.identity__row .q__label {
  margin-bottom: var(--sp-2);
  font-style: normal;
  font-family: var(--font-secondary);
  font-size: var(--step--1);
  letter-spacing: var(--track-secondary);
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (max-width: 34rem) {
  .identity__row { grid-template-columns: 1fr; }
}

/* --- Errors --------------------------------------------------------------- */
.alert {
  max-width: var(--measure);
  margin: var(--sp-7) auto 0;
  padding: var(--sp-5);
  border: 1px solid var(--copper-burnished);
  border-left-width: 4px;
  background-color: rgba(217, 106, 24, 0.09);
  text-align: left;
}

.alert__title {
  font-size: var(--step-1);
  color: var(--copper-text);
}

.alert__list {
  margin: var(--sp-3) 0 0;
  padding-left: var(--sp-5);
  font-size: var(--step-0);
}

.field--error .scale__num,
.field--error .choice__opt,
.field--error .text,
.field--error .line {
  border-color: var(--copper-burnished);
}

.field__error {
  margin-top: var(--sp-3);
  font-size: var(--step-0);
  font-style: italic;
  color: var(--copper-text);
}

/* --- Submit --------------------------------------------------------------- */
.form__submit {
  margin-top: var(--sp-9);
  text-align: center;
}

/* On a phone the label plus the button's fixed side padding exceeded the
   sheet's width, so the button ran out past the parchment and over the desk.
   Constrain it to the measure and let the padding shrink; below 30rem it goes
   full width, which is the right shape for a thumb anyway. */
.form__submit .btn {
  max-width: 100%;
  font-size: var(--step-1);
  padding: var(--sp-4) clamp(var(--sp-4), 6vw, var(--sp-8));
  /* Long labels wrap rather than force the box wider. */
  white-space: normal;
  text-align: center;
}

@media (max-width: 30rem) {
  .form__submit .btn {
    display: flex;
    width: 100%;
    padding-inline: var(--sp-3);
    font-size: var(--step-0);
    /* The wide tracking is what pushes it over on the narrowest screens. */
    letter-spacing: 0.12em;
    text-indent: 0.12em;
  }
}

.form__submit-note {
  margin-top: var(--sp-5);
  font-size: var(--step-0);
  font-style: italic;
  color: var(--ink-soft);
}

/* --- Sheet footer --------------------------------------------------------- */
.sheet__foot {
  max-width: var(--measure);
  margin: var(--sp-9) auto 0;
  text-align: center;
}

.orn-sm { width: 1.9rem; height: 1.9rem; }
.orn-xs { width: 1.25rem; height: 1.25rem; }

.sheet__foot-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* The tracking is applied per line, so each one stays optically centred; a
   trailing letter-space on a centred line pushes it visibly left. */
.sheet__foot-line span {
  color: var(--copper-text);
  text-indent: var(--track-secondary);
}

.sheet__foot-part {
  white-space: nowrap;
}

.sheet__foot-mark {
  line-height: 1;
}

/* Sets expectations before the taster starts, so hitting a required-field
   error at the bottom of a long form is never a surprise. */
.crest__note {
  margin-top: var(--sp-5);
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-indent: var(--track-secondary);
}