/* ==========================================================================
   ACT 6 — yakında. The decision.
   The page's one hard cut to light. Not a drift: an opaque cream ground that
   arrives all at once, because interpolating from near-black to paper is a
   visitor wondering what they clicked.

   Contrast, measured against #EDE2CE:
     #191108  body ink        14.55:1
     #6A5B44  secondary ink    5.13:1
     #A82C19  accent-deep      5.39:1   (accent TEXT and links)
     #E8452F  accent fill      3.08:1   (the button's own edge, a control)
     #140C08  on #E8452F       4.90:1   (the button's label)

   Prefix: .close-  /  ids: close-title, close-email
   ========================================================================== */

.close {
  /* Setting --sc-ink alone is not enough: `color` inherits as a computed
     value, so the body's ink would win over every descendant. Restate it. */
  --sc-ink: var(--tt-paper-ink);
  --sc-ink-soft: var(--tt-paper-soft);
  color: var(--sc-ink);

  background: var(--tt-paper);
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: clamp(4.5rem, 10vh, 8rem) clamp(2rem, 4.5vh, 3rem);
  isolation: isolate;
}

.close-wrap {
  display: grid;
  gap: clamp(1.3rem, 2.6vw, 2.1rem);
}

/* more space above the heading than below it: the padding-block-start above
   is the space, and the gap below is smaller than it */
.close-title {
  max-width: 12ch;
  font-variation-settings: "wght" 860, "wdth" 118;
  color: var(--sc-ink);
}

.close-lede {
  margin: 0;
  max-width: 46ch;
  font-family: var(--sc-font-text);
  font-size: clamp(1.12rem, 1.65vw, 1.46rem);
  line-height: 1.5;
  color: var(--sc-ink);
  text-wrap: pretty;
}

/* --- the one action ------------------------------------------------------ */
.close-form {
  display: grid;
  gap: 0.75rem;
  width: 100%;
  max-width: 34rem;
  margin-block-start: clamp(0.4rem, 1.4vw, 1rem);
}
.close-field { display: grid; gap: 0.5rem; }

.close-label {
  font-family: var(--sc-font-text);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tt-paper-soft);
}

.close-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.close-input {
  flex: 1 1 15rem;
  min-width: 0;
  min-height: 3rem;
  padding: 0.82em 0.95em;
  font-family: var(--sc-font-text);
  font-size: 1rem;
  line-height: 1.2;
  color: var(--tt-paper-ink);
  background: color-mix(in oklab, var(--tt-paper) 62%, #fff);
  border: 1px solid var(--tt-paper-soft);
  border-radius: 2px;
  box-shadow: inset 0 1px 2px rgb(25 17 8 / 0.08);
  transition: border-color 160ms var(--sc-ease-out),
              box-shadow 160ms var(--sc-ease-out);
}
.close-input::placeholder { color: var(--tt-paper-soft); opacity: 1; }
.close-input:hover { border-color: color-mix(in oklab, var(--tt-paper-ink) 60%, var(--tt-paper)); }
.close-input:focus-visible {
  outline: 2px solid var(--tt-accent-deep);
  outline-offset: 2px;
  border-color: var(--tt-accent-deep);
}
.close-input[aria-invalid="true"] {
  border-color: var(--tt-accent-deep);
  box-shadow: inset 0 0 0 1px var(--tt-accent-deep);
}
.close-input:disabled { opacity: 0.55; cursor: not-allowed; }

.close-send {
  flex: 0 0 auto;
  min-height: 3rem;
  /* site.css writes this shadow with rgb() around an HSL triple, which drops
     it entirely. Restate it correctly on the paper ground. */
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.30) inset,
    0 10px 24px -14px hsl(var(--sc-shadow-color) / 0.75);
}
.close-send:disabled { opacity: 0.5; cursor: not-allowed; }

.close-status {
  margin: 0;
  min-height: 1.5em;
  max-width: 48ch;
  font-family: var(--sc-font-text);
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--tt-paper-soft);
}
.close-status--bad { color: var(--tt-accent-deep); }

/* --- one line back to the game ------------------------------------------ */
.close-back {
  margin: 0;
  font-family: var(--sc-font-text);
  font-size: 0.98rem;
  color: var(--tt-paper-soft);
}

.close-link {
  color: var(--tt-accent-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  border-radius: 2px;
  transition: color 140ms var(--sc-ease-out),
              text-decoration-color 140ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .close-link:hover { color: var(--tt-paper-ink); }
}
.close-link:active { color: var(--tt-paper-ink); }
.close-link:focus-visible {
  outline: 2px solid var(--tt-accent-deep);
  outline-offset: 3px;
}

/* --- the footer, inside the act ----------------------------------------- */
.close-foot {
  margin-block-start: clamp(2.6rem, 6.5vh, 5rem);
  padding-block-start: clamp(1.1rem, 2.4vh, 1.9rem);
  /* the corner disc is fixed at bottom-right and would sit on top of the small
     print. Reserve its width plus its own inset. */
  padding-inline-end: calc(var(--tt-disc) + clamp(0.9rem, 2.2vw, 2rem) + 0.75rem);
  border-block-start: 1px solid color-mix(in oklab, var(--tt-paper-ink) 18%, transparent);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem 1.6rem;
}

.close-mark {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.42em;
  font-family: var(--sc-font-display);
  font-variation-settings: "wght" 850, "wdth" 118;
  font-weight: 800;
  font-size: clamp(1.35rem, 3.2vw, 2.1rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--sc-ink);
}
.close-mark b {
  font-weight: inherit;
  color: var(--tt-accent-deep);
}

.close-fine {
  margin: 0;
  font-family: var(--sc-font-text);
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--tt-paper-soft);
}
.close-link--fine { color: var(--tt-paper-soft); }
@media (hover: hover) and (pointer: fine) {
  .close-link--fine:hover { color: var(--tt-accent-deep); }
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 620px) {
  .close {
    padding-block: clamp(4.5rem, 12vh, 7rem) clamp(2rem, 5vh, 3rem);
  }
  .close-title { max-width: 10ch; }
  .close-row { flex-direction: column; align-items: stretch; }
  .close-send { justify-content: center; }
  .close-foot {
    flex-direction: column;
    align-items: flex-start;
    margin-block-start: clamp(2.4rem, 7vh, 4rem);
    /* stacked and left-aligned, so the disc is cleared sideways rather than by
       reserving a column, plus a little air under the last line */
    padding-inline-end: 0;
    padding-block-end: calc(var(--tt-disc) * 0.5);
  }
  .close-fine { max-width: 26ch; }
}

/* Reduced motion: the entrance is fewer and gentler, never zero. The engine
   already drops the translate and keeps the fade, and nothing here fades OUT,
   so the last feeling lands and holds either way. */

/* The fixed bar over this act's cream ground is handled in css/site.css,
   where the stuck bar is painted opaque for the whole page. */