/* ===========================================================================
   LANDING — one mark on a black field, and nothing else.
   ---------------------------------------------------------------------------
   The whole page is a single optical centre. Everything is measured from the
   wordmark outward; the establishment line and the rule exist only to give it
   a base to stand on.
   =========================================================================== */

.landing {
  display: grid;
  grid-template-rows: 1fr;
  min-height: 100svh;
  /* The page used to be a single unscrollable view — one mark on a black
     field and nothing to do but look. It now carries a form, and a form that
     cannot be scrolled to is a form nobody fills in. A phone in landscape
     has barely 350px of height; pinning this to 100svh with overflow hidden
     would put the button somewhere unreachable. */
}

.landing__stage {
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(var(--sp-5), 5vh, var(--sp-8));
  /* Padding in vh so it shrinks with the viewport instead of squeezing the
     lockup out of the bottom of a short window. */
  padding: clamp(var(--sp-4), 4vh, var(--sp-8)) var(--sp-5);
  min-height: 0;
  /* The wordmark measures itself against THIS box, not the viewport.

     vw units include the scrollbar; the width available to lay out in does
     not. This page never scrolled before, so there was never a scrollbar and
     the two were the same number. The moment it grew a form, every vw-sized
     thing on it was being measured against 17px that were not there, and the
     mark pushed the page four of them sideways.

     Inline-size containment also stops this box being widened by its own
     contents, which is what was inflating the grid column above it. */
  container-type: inline-size;
}

.lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Sit the mark a little above true centre. Optical centre is higher than
     geometric centre, and a mark pinned to the exact middle reads as low. */
  /* No optical lift any more: the mark is the top of a composition that
     continues into the invitation below it, not a thing floating alone. */
}

/* --- The crest -------------------------------------------------------------
   Sits above the wordmark and sets the top of the composition. Sized by
   height rather than width, because a crest is a vertical object and its
   height is what has to relate to the type beneath it.

   No filter, no grade, no foil overlay: whatever artwork is dropped in is
   shown exactly as drawn. The only treatment is a soft shadow so it sits on
   the leather rather than floating over it. */
.lockup__crest {
  margin-bottom: clamp(var(--sp-3), 2.5vh, var(--sp-6));
  line-height: 0;
}

.lockup__crest img {
  height: clamp(5rem, 28vh, 13rem);
  width: auto;
  margin: 0 auto;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.7));
}

/* The authored crest, until real artwork is supplied. Sized the same as a
   supplied crest would be — it is a full reproduction, not a token. */
.lockup__crest-fallback {
  height: clamp(5rem, 28vh, 13rem);
  /* 300 x 400 viewBox */
  width: calc(clamp(5rem, 28vh, 13rem) * 0.75);
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.7));
  margin: 0 auto;
  color: var(--copper-burnished);
}

/* --- The mark --------------------------------------------------------------
   Inscriptional capitals, not script. Bolder, and readable at a glance —
   which is the job the mark has to do on a page that is otherwise empty.

   "The" is set small above the house name rather than inline with it, so the
   eye lands on HOUSE OF KNOX. Both lines are tracked wide, the way lettering
   cut into stone or struck into metal is spaced. */
.lockup__mark {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.1rem, 0.6vh, 0.4rem);
  line-height: 1.02;
}

.lockup__the {
  font-size: min(clamp(0.8rem, 3.2vw, 1.5rem), 3.4vh);
  font-weight: 600;
  letter-spacing: 0.42em;
  /* Wide tracking pushes the last letter's space onto the right; pull it back
     so the word sits truly centred over the line below. */
  text-indent: 0.42em;
}

.lockup__house {
  /* The mark measures 9.7em and never wraps, so its width is entirely a
     question of this one number.

     9.5cqw holds it at about 92% of the stage at every size. The floor came
     down from 1.7rem for the same reason the unit changed: on a 320px phone
     with a scrollbar there are 255px to lay out in, and 1.7rem set the mark
     at 264. */
  font-size: min(clamp(1.55rem, 9.5cqw, 5.4rem), 12vh);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-indent: 0.06em;
  white-space: nowrap;
}

.lockup__mark .display {
  display: block;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.75)) drop-shadow(0 6px 22px rgba(217, 106, 24, 0.16));
}

/* --- Cigars ---------------------------------------------------------------- */
.lockup__cigars {
  margin-top: clamp(var(--sp-2), 1.4vh, var(--sp-4));
  font-size: min(clamp(0.72rem, 3vw, 1.35rem), 3.2vh);
  font-weight: 600;
  letter-spacing: 0.52em;
  text-indent: 0.52em;
  color: var(--ivory-a70);
}

/* --- Base rule ----------------------------------------------------------- */
/* A hairline broken by a small diamond, the way the reference lockup divides
   the house name from the category. */
.lockup__rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--sp-2), 1.4vw, var(--sp-4));
  width: min(20rem, 62vw);
  margin-top: clamp(var(--sp-2), 1.6vh, var(--sp-4));
}

.lockup__rule::before,
.lockup__rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background-image: var(--foil-rule);
  opacity: 0.8;
}

.lockup__rule-mark {
  flex: none;
  font-size: 0.5rem;
  line-height: 1;
  color: var(--copper);
}

/* --- Establishment line -------------------------------------------------- */
.lockup__est {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--sp-3), 2.4vw, var(--sp-5));
  margin-top: clamp(var(--sp-3), 2vh, var(--sp-5));
  font-family: var(--font-secondary);
  font-size: clamp(0.66rem, 1.9vw, 0.84rem);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ivory-a70);
  /* The final letter's tracking pushes the line off-centre; pull it back. */
  text-indent: var(--track-wide);
}

.lockup__sep {
  color: var(--copper);
  font-size: 0.8em;
  letter-spacing: 0;
  text-indent: 0;
}

/* --- The beta button ------------------------------------------------------
   The one thing on the page to act on, so it is built to be seen: the brand's
   copper face on a black field, flanked by the same small Latin crosses that
   bookend the heading on the survey, and sitting in a warm halo as though the
   ember below were catching it.

   It lives inside the lockup rather than at the foot of the viewport. Pinned
   to the bottom it read as a footnote; here it is the third line of the mark
   and impossible to miss without shouting over the wordmark. */

.lockup__action {
  margin-top: clamp(var(--sp-4), 4.5vh, var(--sp-7));
}

/* A quiet way through to the mission. Deliberately not a second button: the
   page has one call to action and this is not it. Sized and tracked like the
   est. line above so it settles into the lockup instead of hanging off it. */
.lockup__aside {
  margin-top: clamp(var(--sp-3), 2vh, var(--sp-5));
  font-family: var(--font-secondary);
  font-size: var(--step--1);
  letter-spacing: var(--track-secondary);
  text-transform: uppercase;
  text-indent: var(--track-secondary);
}

.lockup__aside a {
  color: var(--ivory-a70);
  text-decoration-color: var(--copper-a55);
  text-underline-offset: 0.4em;
  transition: color var(--fade), text-decoration-color var(--fade);
}

.lockup__aside a:hover {
  color: var(--copper);
  text-decoration-color: var(--copper);
}

.btn--beta {
  gap: clamp(var(--sp-3), 1.6vw, var(--sp-5));
  padding: var(--sp-4) clamp(var(--sp-5), 3.6vw, var(--sp-7));
  font-size: var(--step-1);
  letter-spacing: var(--track-secondary);
  text-indent: var(--track-secondary);
  /* The brief's black border is invisible against a black page, so a copper
     keyline sits just outside it. That single line is what turns a flat orange
     bar into something struck and mounted — it gives the plaque an edge to
     catch the light on, and separates it from the ground without a glow doing
     the work. The halo behind is kept low: enough to feel lit by the ember
     below, not enough to look like it is switched on. */
  box-shadow:
    inset 0 1px 0 rgba(255, 234, 205, 0.62),
    inset 0 -2px 0 rgba(67, 32, 10, 0.45),
    0 0 0 1px rgba(217, 106, 24, 0.5),
    0 4px 14px rgba(0, 0, 0, 0.62),
    0 0 26px rgba(217, 106, 24, 0.16);
}

.btn--beta:hover,
.btn--beta:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 234, 205, 0.8),
    inset 0 -2px 0 rgba(67, 32, 10, 0.45),
    0 0 0 1px rgba(240, 167, 99, 0.8),
    0 6px 18px rgba(0, 0, 0, 0.66),
    0 0 40px rgba(217, 106, 24, 0.3);
}

/* The flanking crosses. Sized from the label so they scale with it, and held
   back a little so they frame the words instead of competing with them. */
.btn__orn {
  flex: none;
  width: 0.55em;
  height: 0.83em;
  opacity: 0.78;
  /* Cancel the button's letter-spacing indent, which would otherwise shove
     the leading ornament off the button's centre line. */
  text-indent: 0;
}

@media (max-width: 26rem) {
  /* At phone width the crosses eat the room the label needs. */
  .btn__orn { display: none; }

  .btn--beta {
    width: 100%;
    padding-inline: var(--sp-4);
  }
}


/* --- Quiet footer link ----------------------------------------------------
   No longer used on the landing page — the beta button replaced it — but the
   thank-you and error pages still use it to return to the house. */
.landing__foot {
  display: grid;
  place-items: center;
  padding: var(--sp-5) var(--sp-4) var(--sp-6);
}

.beta-link {
  font-family: var(--font-secondary);
  font-size: var(--step--2);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  text-indent: var(--track-wide);
  text-decoration: none;
  color: var(--on-dark-quiet);
  transition: color var(--fade);
}

.beta-link:hover,
.beta-link:focus-visible {
  color: var(--copper);
}

@media (max-width: 30rem) {
  /* The optical-centre nudge costs too much room on a short screen. */
  .lockup {
    transform: none;
  }
}

/* --- Short viewports -------------------------------------------------------
   A phone held sideways is about 375px tall. At that height the lockup
   overflowed by 19px and clipped the button — the one thing on the page to
   act on. Everything tightens here: smaller crest, tighter leading, less air
   between the blocks.

   Tested at 812x375. Without this rule the page scrolls; with it, it fits. */
@media (max-height: 480px) {
  .lockup__crest {
    margin-bottom: var(--sp-2);
  }

  .lockup__crest-fallback {
    height: clamp(3rem, 26vh, 6rem);
    width: calc(clamp(3rem, 26vh, 6rem) * 0.75);
  }

  .lockup__crest img {
    height: clamp(3rem, 26vh, 6rem);
  }

  .lockup__mark {
    /* Only the em-based padding below reads this; the two lines inside set
       their own sizes. cqw for the same scrollbar reason as the mark. */
    font-size: min(clamp(1.55rem, 7.5cqw, 3.4rem), 16vh);
    padding: 0.1em 0.1em 0.16em;
  }

  .lockup__rule {
    margin-top: 0;
  }

  .lockup__est {
    margin-top: var(--sp-2);
  }

  .lockup__action {
    margin-top: var(--sp-3);
  }

  .lockup__aside {
    margin-top: var(--sp-2);
    font-size: var(--step--2);
  }

  .btn--beta {
    padding-block: var(--sp-2);
    font-size: var(--step--1);
  }
}

/* ===========================================================================
   THE FOUNDING LIST
   ---------------------------------------------------------------------------
   The invitation and the form, under the mark. The page asks for one thing,
   so the form is the second half of the composition rather than a panel
   bolted below it — same centre line, same measure, same metal.

   The input styling is carried over from the survey sheet this replaces: a
   warm ivory field with an inset shadow, so a box reads as something to write
   on rather than a browser default dropped on leather.
   =========================================================================== */

.join {
  width: min(100%, 34rem);
  text-align: center;
}

.join__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
}

.join__lead {
  margin: var(--sp-4) 0 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--on-dark);
}

.join__note {
  margin: var(--sp-4) auto 0;
  max-width: 30rem;
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--on-dark-quiet, rgba(242, 230, 213, 0.78));
}

.join__note--quiet {
  font-style: italic;
  color: var(--on-dark-quiet, rgba(242, 230, 213, 0.62));
}

.join__form {
  margin-top: clamp(var(--sp-5), 4vh, var(--sp-7));
}

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

.field {
  /* Each field declares its own width in the schema, in twelfths. */
  grid-column: span var(--field-span, 12);
  min-width: 0;
}

/* First and last name sit side by side on a comfortable screen and stack on a
   phone, where two 50% boxes leave neither of them usable. */
@media (max-width: 30rem) {
  .field {
    grid-column: span 12;
  }
}

.field__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-secondary);
  font-size: var(--step--1);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--on-dark-quiet, rgba(242, 230, 213, 0.78));
}

.field__optional {
  margin-left: 0.4em;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.75;
}

.line {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--edge, rgba(185, 164, 137, 0.5));
  border-radius: 2px;
  background-color: rgba(255, 253, 249, 0.92);
  box-shadow: inset 0 1px 3px rgba(57, 35, 23, 0.14);
  font-family: var(--font-body);
  font-size: var(--step-1);
  color: var(--ink);
  transition: border-color var(--fade), background-color var(--fade), box-shadow var(--fade);
}

.line:focus {
  outline: none;
  border-color: var(--copper);
  background-color: #fffffc;
  box-shadow: inset 0 1px 3px rgba(57, 35, 23, 0.08), 0 0 0 2px rgba(201, 110, 42, 0.45);
}

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

.field--error .line {
  border-color: var(--copper);
  border-left-width: 3px;
}

.field__error {
  margin: var(--sp-2) 0 0;
  font-size: var(--step--1);
  color: var(--copper-highlight, #e3a166);
}

.alert {
  margin: var(--sp-5) 0 0;
  padding: var(--sp-4);
  border: 1px solid var(--copper-burnished);
  border-left-width: 4px;
  background-color: rgba(201, 110, 42, 0.14);
  text-align: left;
}

.alert p {
  margin: 0;
  font-size: var(--step-0);
}

.join__action {
  margin: clamp(var(--sp-5), 4vh, var(--sp-6)) 0 0;
}

.join__action .btn--beta {
  width: 100%;
}

/* The age confirmation. Quiet, but never hidden — it is the one line on this
   page that has to be true of everyone who presses the button. */
.join__age {
  margin: var(--sp-4) auto 0;
  max-width: 28rem;
  font-size: var(--step--2);
  line-height: 1.6;
  color: var(--on-dark-quiet, rgba(242, 230, 213, 0.62));
}

/* The charge. Three lines, each its own, and the loudest thing under the
   button — it is what the house is for, and it was previously set smaller
   than the age disclaimer beside it. */
.charge {
  margin: clamp(var(--sp-6), 5vh, var(--sp-8)) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(0.2rem, 1vh, 0.5rem);
}

.charge__line {
  font-size: clamp(0.95rem, 3.4cqw, 1.35rem);
  letter-spacing: var(--track-wide);
  /* Wide tracking pushes the last letter's space onto the right; pull it
     back so each line sits truly centred under the one above. */
  text-indent: var(--track-wide);
  line-height: 1.5;
  color: var(--copper);
}

/* The middle line carries the weight of the three. */
.charge__line:nth-child(2) {
  color: var(--copper-highlight);
}

/* The way through to the mission, under the mark and before anything is
   asked of anyone. A button now, rather than the line of small caps it was:
   as type it read as a caption to the plaque at the foot of the form, and it
   is the other half of what this page offers, not a footnote to it. */
.join__mission {
  margin: 0 0 clamp(var(--sp-5), 4vh, var(--sp-7));
}

/* Just under .btn--beta, deliberately: --step-0 against its --step-1, sp-3
   blocks against its sp-4, and an outline rather than a second copper face.
   Two identical bars stacked down one page leave it with no answer to which
   it wants, and it wants the list.

   Held to 20rem rather than the plaque's full measure. On the narrowest
   phone that is still the whole width and a thumb-sized target; the cap only
   bites once the column itself passes 320px, so from about 370px up the
   difference in width is the second thing, after weight, that says which of
   the two is the page's first choice. */
.btn--mission {
  width: min(100%, 20rem);
  padding: var(--sp-3) clamp(var(--sp-4), 3vw, var(--sp-6));
  font-size: var(--step-0);
  /* The label is two short words; let it centre rather than push the box
     wider should it ever grow. */
  white-space: normal;
  text-align: center;
  /* .btn--quiet has no copper face behind it, so the keyline is the whole
     edge. Warmed from its --copper-burnished, which is a colour for the
     ivory sheet and goes to mud against leather. */
  border-color: var(--copper-a55);
}

.btn--mission:hover,
.btn--mission:focus-visible {
  border-color: var(--copper);
}

@media (max-height: 40rem) {
  .join__note {
    margin-top: var(--sp-3);
  }

  .join__form {
    margin-top: var(--sp-4);
  }
}

/* ===========================================================================
   THE MESSAGE PAGES
   ---------------------------------------------------------------------------
   The 404 and the 500. They shared the landing lockup and carried their own
   additions in thanks.css, which closing the survey deleted along with the
   thank-you page it was named for — leaving both error pages with a bare
   lockup and no stage. Folded in here, since landing.css is already the only
   other stylesheet they load.
   =========================================================================== */

.thanks {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100svh;
}

.thanks__stage {
  display: grid;
  place-items: center;
  padding: var(--sp-8) var(--sp-5) var(--sp-6);
}

.thanks__cross {
  width: clamp(3.6rem, 12vw, 5.2rem);
  height: clamp(4.6rem, 15.3vw, 6.6rem);
  margin-bottom: var(--sp-4);
  color: var(--copper-burnished);
  opacity: 0.9;
}

.thanks__mark {
  font-size: clamp(2.6rem, 10vw, 5.6rem);
}

.thanks__body {
  max-width: 30rem;
  margin-top: var(--sp-6);
  font-size: var(--step-1);
  line-height: 1.75;
  color: var(--ivory-a70);
}

.thanks__body strong {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-display);
  color: var(--copper);
}