/* CRUNA — minimal landing. Tokens from _assets/design/cruna-design-system.md §11. */

:root {
  --cruna-petrol: #18473F;
  --cruna-ink:    #1D2421;
  --cruna-paper:  #F3F0E8;
  --cruna-mist:   #DDE3DE;
  --cruna-font: "Commissioner", Arial, sans-serif;

  /* §6 spacing scale */
  --s-8: 8px; --s-16: 16px; --s-24: 24px; --s-32: 32px;
  --s-48: 48px; --s-64: 64px; --s-96: 96px; --s-128: 128px;

  --margin: 8vw;                /* §6: 7–8% outer margin, nothing touches the edge */
}

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

html {
  height: 100%;
  background: var(--cruna-paper);
  color: var(--cruna-ink);
  font-family: var(--cruna-font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
html.is-intro { overflow: hidden; }

body { margin: 0; min-height: 100%; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
strong { font-weight: 600; }

/* ---- Screens ---------------------------------------------------------- */

.screen {
  min-height: 100vh;
  min-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  padding: var(--s-64) var(--margin);
}

.screen__inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-32);
  align-items: center;
}

.screen__figure {
  width: min(72vw, 40svh);
  justify-self: center;
}

/* Display XL (mobile 43/47 → desktop 62/64), Semibold only on the selected phrase */
.screen__phrase {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(43px, 3.2vw + 24px, 62px);
  line-height: 1.06;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.screen__mail { text-decoration: none; }
.screen__mail:hover strong,
.screen__mail:focus-visible strong { color: var(--cruna-petrol); }
.screen__mail:focus-visible { outline: 2px solid var(--cruna-petrol); outline-offset: 8px; }

/* Small 14/21, readable fallback for a bare mailto on a phone with no mail client */
.screen__address {
  margin: var(--s-16) 0 0;
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
}

@media (min-width: 900px) {
  .screen__inner {
    grid-template-columns: 6fr 1fr 5fr;   /* text · deliberate gap · illustration */
  }
  .screen__figure {
    grid-column: 3;
    width: min(100%, 68svh);
    justify-self: center;
  }
  .screen__phrase,
  .screen__contact { grid-column: 1; grid-row: 1; }
}

/* ---- Logo screens: first and last, Petrol field (§3 application #2) ------ */

.screen--brand {
  background: var(--cruna-petrol);
  color: var(--cruna-paper);
  justify-content: center;
}

.lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-24);
}
.lockup__mark {
  /* §3: the textured logo wants 250 px and up, so it takes as much of the screen as it can.
     Whichever runs out first bounds it: the outer margins (72vw), or the height left once the
     screen padding and the signature are paid for (42svh — a landscape phone is the tight case). */
  width: min(72vw, 42svh, 460px);
}
.lockup__signature {
  margin: 0;
  font-size: 21px;      /* Lead */
  line-height: 31px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ---- Compact lockup, fixed top-left on the Paper screens only ----------- */

.brand {
  position: fixed;
  top: var(--s-24);
  left: var(--margin);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--s-8);
  text-decoration: none;
  color: var(--cruna-ink);
  transition: opacity 0.5s ease, visibility 0.5s;
}
.brand__mark { height: 34px; width: auto; }          /* small cut, tested legible from 32px */
.brand__text { display: flex; flex-direction: column; gap: 2px; }
/* Hidden during the intro and while a logo screen is in view (main.js toggles .is-off). */
.is-intro .brand,
.brand.is-off { opacity: 0; visibility: hidden; }
.brand__name { font-size: 14px; line-height: 16px; font-weight: 600; letter-spacing: 0.04em; }   /* Label */
.brand__signature { font-size: 12px; line-height: 16px; font-weight: 400; }                       /* Caption */
.brand:focus-visible { outline: 2px solid var(--cruna-petrol); outline-offset: 6px; }
@media (min-width: 900px) { .brand { top: var(--s-32); } }

/* ---- Intro overlay ---------------------------------------------------- */

.intro { display: none; }
.js .intro {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: var(--cruna-petrol);
  color: var(--cruna-paper);
  padding: var(--margin);
}
.js .intro.is-done { display: none; }

/* Reveal states — only when JS is running, so the no-JS page is fully visible.
   The first logo screen is excluded: the intro already showed it, so it is simply there when scrolled to. */
.js.has-motion .screen--reveal .screen__figure,
.js.has-motion .screen--reveal .screen__phrase,
.js.has-motion .screen--reveal .screen__address,
.js.has-motion .screen--reveal .lockup__mark,
.js.has-motion .screen--reveal .lockup__signature { opacity: 0; }

/* ---- Reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .brand { transition: none; }
  .js.has-motion .screen--reveal .screen__figure,
  .js.has-motion .screen--reveal .screen__phrase,
  .js.has-motion .screen--reveal .screen__address,
  .js.has-motion .screen--reveal .lockup__mark,
  .js.has-motion .screen--reveal .lockup__signature { opacity: 1; }
}