/* ============================================================================
   Mitaya — Coming Soon
   One page, no JavaScript. The concept is the document itself: a green
   passport cover whose foil-stamped thesis is the only loud element, sitting
   directly above a real security-printed data page.
   ========================================================================= */

/* --- Tokens ---------------------------------------------------------------- */

:root {
  --cover:        #0E3226;  /* passport cover green */
  --cover-deep:   #08201A;  /* vignette floor */
  --cover-lit:    #1A4A38;  /* ambient light on the cover */
  --paper:        #E7E2D2;  /* security paper */
  --paper-shade:  #D5CEB8;  /* paper in shadow */
  --ink:          #14201B;  /* printed ink */
  --ink-soft:     #5E6157;  /* machine labels */
  --brass:        #C9A75B;  /* foil */
  --brass-lit:    #F2DFAC;  /* foil highlight */
  --brass-dim:    #8A7239;  /* foil in shadow */
  --stamp:        #9E3325;  /* rubber-stamp red */

  --wrap: 74rem;
  --pad: clamp(1.25rem, 5vw, 4rem);

  --display: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --body: "Inter Tight", "Helvetica Neue", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- Reset ---------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--cover-lit) var(--cover);
}

body {
  min-height: 100svh;
  display: flex;
  background-color: var(--cover);
  background-image:
    radial-gradient(120% 85% at 50% -18%, var(--cover-lit) 0%, transparent 58%),
    radial-gradient(150% 120% at 50% 118%, var(--cover-deep) 0%, transparent 62%);
  background-attachment: fixed;
  color: var(--paper);
  font-family: var(--body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
ol, ul { padding: 0; }

:focus-visible {
  outline: 2px solid var(--brass-lit);
  outline-offset: 3px;
  border-radius: 2px;
}

/* The definition block must stay in the render tree for paint servers. */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --- Cover sheet ---------------------------------------------------------- */

.cover {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(1.5rem, 3.5vw, 2.75rem) var(--pad) clamp(2rem, 5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(2.25rem, 5vw, 3.75rem);
}

/* ---- Foil ---------------------------------------------------------------- */

/* The highlight is sized and positioned so its peak lands on the middle of the
   line: a gradient much wider than the text would leave the glyphs on the
   matte part of the ramp and read as flat ochre rather than gold foil. */
.foil {
  background-image: linear-gradient(
    100deg,
    var(--brass-dim)  0%,
    var(--brass)     15%,
    var(--brass-lit) 31%,
    #FFF8E2          44%,
    var(--brass-lit) 57%,
    var(--brass)     73%,
    var(--brass-dim) 100%
  );
  background-size: 190% 100%;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* --- Top bar -------------------------------------------------------------- */

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgb(201 167 91 / 0.22);
}

.wordmark {
  font-family: var(--display);
  font-variation-settings: "opsz" 40, "wght" 560, "WONK" 1, "SOFT" 30;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  letter-spacing: 0.005em;
}

.bar__meta {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}

.bar__sep { margin-inline: 0.6em; opacity: 0.55; }

/* --- Thesis block --------------------------------------------------------- */

.thesis-block {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.4vw, 1.5rem);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9em;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
}

.eyebrow::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 9rem;
  background: linear-gradient(90deg, rgb(201 167 91 / 0.5), transparent);
}

.thesis {
  font-family: var(--display);
  font-size: clamp(3rem, 1.4rem + 8.6vw, 8.25rem);
  font-variation-settings: "opsz" 144, "wght" 380, "WONK" 1, "SOFT" 40;
  line-height: 0.88;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin-block: 0.15em 0.1em;
}

.thesis__line { display: block; }

.thesis__line--b {
  font-style: italic;
  font-variation-settings: "opsz" 144, "wght" 420, "WONK" 1, "SOFT" 60;
  padding-left: 0.06em;
  margin-top: 0.04em;
}

.lede {
  max-width: 46ch;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);
  font-weight: 300;
  line-height: 1.62;
  color: color-mix(in srgb, var(--paper) 84%, transparent);
}

.lede strong {
  font-weight: 500;
  color: var(--paper);
  white-space: nowrap;
}

/* --- Passport data page --------------------------------------------------- */

.passport {
  position: relative;
  max-width: 60rem;
  margin-top: clamp(0.5rem, 2vw, 1.25rem);
}

.paper {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background-color: var(--paper);
  background-image: linear-gradient(168deg, #F1EDE0 0%, var(--paper) 46%, var(--paper-shade) 100%);
  color: var(--ink);
  padding: clamp(1.5rem, 3.6vw, 3rem);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.5) inset,
    0 42px 70px -34px rgb(0 0 0 / 0.72),
    0 12px 28px -18px rgb(0 0 0 / 0.55);
}

.paper__guilloche {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(115% 95% at 82% 6%, #000 4%, transparent 72%);
  mask-image: radial-gradient(115% 95% at 82% 6%, #000 4%, transparent 72%);
  pointer-events: none;
}

.paper__frame {
  position: absolute;
  inset: clamp(0.6rem, 1.4vw, 0.95rem);
  border: 1px solid rgb(20 32 27 / 0.26);
  outline: 1px solid rgb(20 32 27 / 0.1);
  outline-offset: 3px;
  pointer-events: none;
}

.paper__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.6vw, 2rem);
}

/* The top-right corner of the page is reserved for the stamp: the heading
   keeps clear of it rather than colliding with it at any width. */
.doc-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding-right: clamp(5.5rem, 20vw, 8.5rem);
}

.doc-head__type {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.doc-head__code {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: rgb(20 32 27 / 0.72);
}

.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem 2rem;
  padding-block: clamp(0.75rem, 1.8vw, 1.1rem);
  border-block: 1px solid rgb(20 32 27 / 0.16);
}

.field dt {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}

.field dd {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.doc-quote {
  font-family: var(--display);
  font-size: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  font-variation-settings: "opsz" 60, "wght" 400, "WONK" 1, "SOFT" 30;
  font-style: italic;
  line-height: 1.24;
  letter-spacing: -0.012em;
  text-wrap: balance;
  max-width: 30ch;
}

/* The thesis chain, set as a printed table row rather than a badge row. */
.chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(20 32 27 / 0.72);
}

.chain li + li::before {
  content: "→";
  margin-right: 0.9rem;
  color: var(--stamp);
  opacity: 0.75;
}

.engines {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem);
  padding-top: clamp(0.5rem, 1.6vw, 1rem);
  border-top: 1px solid rgb(20 32 27 / 0.16);
}

.engine__name {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.engine__no {
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  padding: 0.15em 0.42em 0.12em;
  border: 1px solid rgb(20 32 27 / 0.35);
  border-radius: 999px;
}

.engine__copy {
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.5;
  color: rgb(20 32 27 / 0.78);
  text-wrap: pretty;
}

.mrz {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: clamp(0.25rem, 1vw, 0.5rem);
  padding: 0.7rem 0.85rem;
  background: rgb(20 32 27 / 0.05);
  border-left: 2px solid rgb(20 32 27 / 0.2);
  font-family: var(--mono);
  font-size: clamp(0.5rem, 0.4rem + 0.3vw, 0.6875rem);
  letter-spacing: 0.14em;
  color: rgb(20 32 27 / 0.72);
  white-space: nowrap;
  overflow: hidden;
}

/* --- Rubber stamp --------------------------------------------------------- */

.stamp {
  position: absolute;
  z-index: 2;
  right: clamp(0.35rem, 1.4vw, 1.1rem);
  /* Fully on the paper: red ink over the dark cover would read as a smear
     rather than a stamp. */
  top: clamp(0.9rem, 2.6vw, 1.9rem);
  display: grid;
  justify-items: center;
  gap: 0.08em;
  padding: 0.75em 0.95em 0.7em;
  font-family: var(--mono);
  font-size: clamp(0.6875rem, 0.6rem + 0.35vw, 0.875rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stamp);
  border: 2px solid currentColor;
  border-radius: 6px;
  transform: rotate(-11deg);
  opacity: 0.92;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.stamp::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid currentColor;
  border-radius: 3px;
  opacity: 0.55;
}

/* --- Footer --------------------------------------------------------------- */

.foot {
  margin-top: auto;
  padding-top: clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid rgb(201 167 91 / 0.22);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--paper) 66%, transparent);
}

.foot__status {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 74%, transparent);
}

.tick {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 3px rgb(201 167 91 / 0.16);
  animation: pulse 2.8s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.32; }
}

.contact {
  color: var(--brass-lit);
  text-decoration: none;
  border-bottom: 1px solid rgb(242 223 172 / 0.35);
  padding-bottom: 1px;
  transition: border-color 160ms ease, color 160ms ease;
}

.contact:hover { border-color: var(--brass-lit); }

.foot__legal {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--paper) 58%, transparent);
}

/* --- Entrance sequence ----------------------------------------------------
   Two CSS-only beats, no script: the display line rises, the cover settles.
   Everything animated starts in its final position and ends there, so the
   page is complete even if an engine never runs, skips or abandons the
   animations. Nothing here may leave content transparent.                     */

@media (prefers-reduced-motion: no-preference) {
  .thesis__line {
    animation: stamp-in 0.95s cubic-bezier(0.2, 0.9, 0.24, 1) backwards;
    animation-delay: calc(var(--i, 0) * 120ms);
    transform-origin: 24% 62%;
  }

  .passport {
    animation: settle 1s cubic-bezier(0.16, 0.84, 0.3, 1) backwards;
    animation-delay: 320ms;
  }

  .tick { animation: pulse 2.8s ease-in-out infinite; }
}

@keyframes stamp-in {
  from { opacity: 0; letter-spacing: 0.05em; transform: scale(1.025); }
  to   { opacity: 1; letter-spacing: -0.025em; transform: none; }
}

/* The data page drops onto the cover and compresses by a hair on landing. */
@keyframes settle {
  0%   { opacity: 0; transform: translateY(-16px) rotate(-0.35deg); }
  70%  { opacity: 1; transform: translateY(0) rotate(0deg); }
  85%  { transform: translateY(0) scale(0.996, 0.999); }
  100% { opacity: 1; transform: none; }
}

/* --- Width adjustments ---------------------------------------------------- */

@media (min-width: 46rem) {
  .doc-quote { max-width: 34ch; }
}

@media (max-width: 45.99rem) {
  .bar__meta { font-size: 0.625rem; }
  .thesis__line--b { padding-left: 0.02em; }

  .stamp {
    right: 0.5rem;
    top: 0.9rem;
    font-size: 0.6875rem;
    padding: 0.6em 0.8em 0.55em;
  }

  .stamp::after { inset: 3px; }
}

@media (max-width: 24rem) {
  .stamp { font-size: 0.625rem; }
}

/* --- Motion and contrast preferences -------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .tick { animation: none; opacity: 1; }
}

@media (prefers-contrast: more) {
  .lede,
  .foot,
  .bar__meta { color: var(--paper); }

  .paper { background-image: none; }
  .paper__guilloche { opacity: 0.22; }
  .engine__copy,
  .mrz,
  .chain,
  .doc-head__code { color: var(--ink); }

  .foot { border-top-color: rgb(201 167 91 / 0.5); }
  .bar { border-bottom-color: rgb(201 167 91 / 0.5); }
}

/* --- Print: the page itself is a document -------------------------------- */

@media print {
  body { background: #fff; color: #000; }

  /* Only the guilloche references an SVG paint server, so it goes with the
     definitions: leaving a dangling url(#…) reference can render the element
     as nothing at all. */
  .svg-defs,
  .paper__guilloche,
  .stamp { display: none; }

  .paper {
    background-image: none;
    box-shadow: none;
    border: 1px solid #000;
  }

  .thesis { letter-spacing: -0.025em; }
  .foil { color: var(--brass-dim); -webkit-text-fill-color: var(--brass-dim); }
}