/* Korjin password gate.
   Tokens only — no literal colours (tokens.css, "RULE: never write a literal
   colour in a component stylesheet"). The layout hard-sets data-ground="dark",
   so every role below resolves to the dark direction. */

.korjin-password-page {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
}

/* The platform wraps every rendered section in
   <div id="shopline-section-…" class="section">, and the design system's own
   `.section` helper puts ~7rem of padding on that class — so the wrapper
   injected a dead band above the gate. adapter.css neutralises this for the
   main site, but the password layout deliberately does not load adapter.css
   (it is scoped to storefront sections that do not exist here), so the rule
   is repeated locally rather than pulling in the whole sheet. */
[id^="shopline-section-"].section {
  padding-block: 0;
  margin-block: 0;
}

.korjin-password-page main {
  display: block;
}

.kp {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--sp-7) var(--gutter);
  overflow: hidden;
  isolation: isolate;
}

/* ---- background ------------------------------------------------------- */

.kp__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.kp__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The roots sit low in the frame; bias the crop so they stay visible
     behind the card at tall/narrow viewports. */
  object-position: center 35%;
}

/* Two layers, not one: a flat wash for contrast on the card, and a vertical
   falloff so the top edge stays dark enough for the wordmark and the bottom
   carries the owner link. A single flat scrim washed the photo out. */
.kp__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--ground) 85%, transparent) 0%,
      color-mix(in srgb, var(--ground) 45%, transparent) 45%,
      color-mix(in srgb, var(--ground) 90%, transparent) 100%),
    color-mix(in srgb, var(--ground) 55%, transparent);
}

/* ---- shell ------------------------------------------------------------ */

.kp__inner {
  width: 100%;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  text-align: center;
}

.kp__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
}

/* ---- brand marks ------------------------------------------------------ */

.kp__icon {
  width: auto;
  height: clamp(3rem, 7vw, 4.25rem);
  color: var(--gold-line);
}

.kp__wordmark {
  width: min(17rem, 72%);
  height: auto;
  color: var(--ink);
  margin-top: var(--sp-1);
}

/* ---- type ------------------------------------------------------------- */

.kp__eyebrow {
  margin: var(--sp-3) 0 0;
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--gold-text);
}

.kp__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-5);
  line-height: var(--leading-tight);
  color: var(--ink);
}

.kp__lede {
  margin: 0;
  max-width: 34ch;
  font-size: var(--step-0);
  line-height: var(--leading-body);
  color: var(--ink-muted);
}

/* ---- form ------------------------------------------------------------- */

.kp__form {
  width: 100%;
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
}

/* Visible now that the field is the page's only action — the disclosure
   trigger used to carry this label. */
.kp__label {
  display: block;
  margin-bottom: var(--sp-3);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.kp__field {
  display: flex;
  width: 100%;
  border: 1px solid var(--rule-strong);
  background: color-mix(in srgb, var(--ground-sunken) 70%, transparent);
  /* The two children own the frame's corners, so the border reads as one
     control rather than an input with a button parked beside it. */
}

.kp__field:focus-within {
  border-color: var(--gold-line);
  outline: 2px solid color-mix(in srgb, var(--gold-line) 45%, transparent);
  outline-offset: 2px;
}

.kp__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--sp-4);
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--step-0);
}

.kp__input::placeholder {
  color: var(--ink-faint);
}

.kp__input:focus {
  outline: none;
}

.kp__input[data-error="true"] {
  color: var(--accent-text);
}

.kp__submit {
  flex: 0 0 auto;
  padding: var(--sp-4) var(--sp-5);
  border: 0;
  background: var(--accent-surface);
  color: var(--accent-on);
  font-family: var(--font-body);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-2, 200ms) var(--ease-out, ease);
}

.kp__submit:hover {
  background: var(--accent-surface-hover);
}

.kp__msg {
  margin: var(--sp-3) 0 0;
  font-size: var(--step--1);
  line-height: var(--leading-snug);
}

.kp__msg--err {
  color: var(--accent-text);
}

/* ---- owner link ------------------------------------------------------- */

.kp__owner {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-faint);
}

.kp__owner a {
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.kp__owner a:hover {
  color: var(--ink);
}

/* ---- narrow ----------------------------------------------------------- */

@media (max-width: 34rem) {
  /* Side-by-side input + button floors around 300px of input; below that the
     placeholder truncates before the button does. Stack instead. */
  .kp__field {
    flex-direction: column;
  }

  .kp__submit {
    width: 100%;
    border-top: 1px solid var(--rule-strong);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kp__submit {
    transition: none;
  }
}