/* ===========================================================================
   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;
  /* One row now — the beta button lives inside the lockup, not in a footer. */
  grid-template-rows: 1fr;
  min-height: 100svh;
  /* The page is a single view. It must never scroll, on any screen. */
  height: 100svh;
  overflow: hidden;
}

.landing__stage {
  display: grid;
  place-items: center;
  /* 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;
}

.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. */
  transform: translateY(-3vh);
}

/* --- 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 floor was 1.8rem, which on a 320px screen set the wordmark 279px wide
     inside a 272px box — nowrap, so it pushed the page 7px sideways and the
     home page picked up a horizontal scrollbar. The mark measures 9.69em, so
     1.7rem is the largest floor that still clears the stage's padding. */
  font-size: min(clamp(1.7rem, 8.6vw, 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 {
    font-size: min(clamp(1.7rem, 7.5vw, 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);
  }
}