/* ==========================================================
   Vipunia — vipunia.com
   Two full-viewport panels that snap: the hero on stratum, the
   contact panel a step darker on loam. The V of the wordmark is the logo.
   ========================================================== */

:root {
  /* brand palette */
  --loam:       #0C1015;
  --stratum:    #161E27;
  --stone:      #2E4057;
  --ash:        #6B7684;
  --ash-light:  #8A94A2;
  --ember:      #C6642B;
  --ember-lite: #DD7A3A;
  --spark:      #E8A33D;
  --bone:       #F2EFE9;
  --bone-dim:   #C6C1B9;

  --rule: rgba(107, 118, 132, 0.28);

  /* type roles */
  --display: "Helvetica Neue", Helvetica, "Segoe UI", system-ui, Arial, sans-serif;
  --serif:   Charter, "Bitstream Charter", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono", Consolas, monospace;

  --gutter: clamp(1.25rem, 5vw, 3.5rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* jump between panels, never glide */
}

body {
  margin: 0;
  background: var(--stratum);
  color: var(--bone);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Holds the logo <g id="mark">. Kept out of flow with a class rather
   than an inline style attribute, so the CSP can forbid inline styles. */
.svg-defs { position: absolute; width: 0; height: 0; }

/* ---------- panels ---------- */

.panel {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  padding-block: clamp(1.5rem, 4vh, 3rem);
}

.panel--hero {
  background: var(--stratum);
  align-content: center;
}

/* Body centred in the space left over, footer pinned to the floor. */
.panel--contact {
  background: var(--loam);
  grid-template-rows: 1fr auto;
  padding-bottom: 0;
}

.panel--contact .panel-body { align-self: center; }

/* Grid rather than block so sibling margins add predictably instead of
   collapsing — the wordmark's spacing is tuned to exact pixel gaps. */
.panel-body { display: grid; align-content: start; }

/* Snapping is applied by main.js, and only when every panel actually
   fits the viewport — see the note there. A height media query cannot
   decide this, because the contact panel's height depends on whether the
   grid is one column or two. No JS means no snapping, which is the right
   fallback: the page just scrolls. */
:root.snap { scroll-snap-type: y mandatory; }

:root.snap .panel {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* ---------- shared ---------- */

.wrap {
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bone);
  color: var(--loam);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.7rem 1rem;
  z-index: 10;
}
.skip:focus { left: 0; }

/* The drawn V is aria-hidden, so the letter is supplied here and the
   heading still reads "VIPUNIA". */
.vis-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--spark);
  outline-offset: 3px;
}

/* ---------- hero ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ember-lite);
  margin: 0;
}

.wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.25rem, 15vw, 10.5rem);
  letter-spacing: -0.04em;
  line-height: 0.88;
  color: var(--bone);
  /* The logo's slash overhangs the line box in both directions, so these
     margins are measured, not guessed: they reproduce the 49px and 47px
     ink gaps the plain-text wordmark had. The rem floors keep the slash
     off the eyebrow and lede once the type gets small. */
  margin-top: max(0.75rem, 0.207em);
  margin-bottom: max(0.75rem, 0.149em);
}

/* The V is logo.svg, inlined so it inherits colour and shares a baseline
   with IPUNIA. Measured off the artwork: the arms begin at y=86 and the
   leg tips at y=296, so that 210-unit letterform band is exactly one cap
   height (0.717em) — the mark rises to the same cap line as the letters
   and rests on the same baseline. Every value below derives from that one
   ratio; recompute them together if the artwork is ever replaced. */
.vee {
  height: 1.311em;          /* 384 units tall */
  width: 0.788em;           /* 230.7 units wide */
  vertical-align: -0.300em; /* baseline sits 88 units above the viewBox floor */
  margin-left: -0.081em;    /* trim the artwork's built-in left padding */
  margin-right: -0.087em;   /* close the gap to the I to a normal letter fit */
  overflow: visible;
  color: var(--ember);
}

.lede {
  font-size: clamp(1.25rem, 3vw, 1.875rem);
  line-height: 1.4;
  max-width: 38ch;
  margin: 0 0 1.25rem;
}

/* One sentence per line: the break is the beat, so it is set here rather
   than left to text-wrap. Each half still wraps on narrow screens. */
.lede span {
  display: block;
  text-wrap: balance;
}

.sub {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.6;
  max-width: 52ch;
  margin: 0;
  color: var(--bone-dim);
}

/* ---------- contact ---------- */

.section-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.5vw, 2.125rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 clamp(1.25rem, 3vh, 2rem);
}

.contact {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

@media (min-width: 54rem) {
  .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}

.contact-intro p {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.7;
  color: var(--bone-dim);
  max-width: 42ch;
  margin: 0;
}

/* ash-light reads 6.21:1 on the loam ground. */
.contact-intro .contact-note {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--ash-light);
  margin-top: 1rem;
}

/* The panel is the darker surface now, so the card sits a step above it. */
.card {
  background: var(--stratum);
  border: 1px solid var(--rule);
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
  display: grid;
  gap: clamp(0.7rem, 1.6vh, 1.1rem);
}

.field { display: grid; gap: 0.35rem; }

.field label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash-light);
}

.field label span {
  letter-spacing: 0.1em;
  color: var(--ash-light);
  text-transform: none;
}

.field input,
.field textarea {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--bone);
  background: var(--loam);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.55rem 0.7rem;
  width: 100%;
  transition: border-color 140ms ease;
  -webkit-appearance: none;
          appearance: none;
}

.field textarea { resize: vertical; min-height: 4.5rem; }

.field input::placeholder,
.field textarea::placeholder { color: var(--ash-light); opacity: 1; }

.field input:hover,
.field textarea:hover { border-color: var(--ash); }

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--spark);
  outline-offset: 1px;
  border-color: transparent;
}

.btn {
  justify-self: start;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--loam);
  background: var(--ember);
  border: 1px solid var(--ember);
  border-radius: 0;
  padding: 0.7rem 1.3rem;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.btn:hover { background: var(--ember-lite); border-color: var(--ember-lite); }

.form-status {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--spark);
  margin: 0;
  display: none;
}

.form-status.is-shown { display: block; }

/* ---------- footer ---------- */

.foot { padding-block: 1.5rem 1.75rem; }

.foot-inner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

/* The same wordmark as the hero, just small: the logo carries the V and
   the letters follow in the display face. .vee is sized in em, so it
   tracks this font-size without any separate tuning. */
.footmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--bone-dim);
  margin: 0;
}

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

@media (prefers-reduced-motion: no-preference) {
  .panel--hero .eyebrow,
  .panel--hero .wordmark,
  .panel--hero .lede,
  .panel--hero .sub {
    animation: rise 800ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
  .panel--hero .wordmark { animation-delay: 90ms; }
  .panel--hero .lede     { animation-delay: 220ms; }
  .panel--hero .sub      { animation-delay: 320ms; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: none; }
}