/* ==========================================================================
   Zeitvibe Ventures
   Single stylesheet. No framework, no build step.

   FORMAT: plain type on paper. Two asymmetric columns, top aligned, with the
   lower half of the page left empty on purpose. No rules, no borders, no
   texture, no colour, no motion. The restraint is the design.

   Order: tokens, reset, page shell, lockup, grid, elements, responsive
   ========================================================================== */

:root {
  /* Monochrome. There is no accent colour, and adding one would break the
     register. Hierarchy comes from size and weight alone. */
  --paper:  #eeeeec;
  --ink:    #14140f;
  --ink-60: rgb(20 20 15 / 0.60);

  /* One family: EB Garamond, variable 400 to 600, roman only. */
  --serif: 'EB Garamond', ui-serif, Georgia, 'Times New Roman', serif;

  /* Fluid scale. Generous, because size is the only hierarchy device here. */
  --t-statement: clamp(2.25rem, 5vw, 4.25rem);
  --t-link:      clamp(1.375rem, 2.6vw, 2.125rem);
  --t-about:     clamp(1.125rem, 1.6vw, 1.4375rem);
  --t-mark:      clamp(1.75rem, 3.2vw, 2.75rem);
  --t-colophon:  clamp(0.9375rem, 1.3vw, 1.125rem);

  --gutter: clamp(1.5rem, 4vw, 3.5rem);
  --maxw:   96rem;
}

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

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-about);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

h1, p { margin: 0; }

/* No italics anywhere on this site, and no italic face is even loaded. */
em, i { font-style: normal; font-weight: 600; }

a {
  color: inherit;
  text-decoration: none;
}
/* Underline rather than a fade. Dimming the link on hover dropped it under
   4.5:1 at the smaller end of the fluid size, and this suits the register. */
a:hover {
  text-decoration: underline;
  text-underline-offset: 0.14em;
  text-decoration-thickness: 1px;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.skip {
  position: fixed;
  top: 0; left: 50%;
  translate: -50% -150%;
  z-index: 10;
  padding: 0.6rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 1rem;
  transition: translate 0.15s linear;
}
.skip:focus-visible { translate: -50% 0; }

/* ---------- Page shell ----------
   Deliberately not full height and not vertically centred. Content sits at the
   top and the page simply ends, the way the reference does. */

.page {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(1.5rem, 3.5vw, 3rem) var(--gutter) clamp(4rem, 12vh, 9rem);
}

/* ---------- Lockup, standing in for a logo image ---------- */

.mark {
  display: block;
  width: max-content;
  line-height: 0.92;
}
.mark__name {
  display: block;
  font-size: var(--t-mark);
  font-weight: 500;
}
.mark__sub {
  display: block;
  /* Small tracked caps tucked under the name, echoing the reference lockup */
  font-size: 0.3em;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: right;
}

/* ---------- Grid ----------
   Explicit placement rather than wrapper divs, so the source order already is
   the mobile reading order: statement, paragraph, links, copyright. */

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  column-gap: clamp(2.5rem, 6vw, 6rem);
  margin-top: clamp(3rem, 9vh, 6.5rem);
}

.statement { grid-column: 1; grid-row: 1; }
.about     { grid-column: 2; grid-row: 1; }
.links     { grid-column: 1; grid-row: 2; }
.colophon  { grid-column: 1; grid-row: 3; }

/* ---------- Elements ---------- */

.statement {
  /* Measured in em, not ch: `ch` is the width of a zero, which in Garamond is
     far narrower than a capital, so a ch cap wraps uppercase unpredictably.
     12em holds "MAKING THINGS" on one line and drops the long second word. */
  max-width: 12em;
  font-size: var(--t-statement);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

.about {
  max-width: 30ch;
  line-height: 1.34;
  text-wrap: pretty;
}

.links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.2rem, 0.8vw, 0.5rem);
  margin-top: clamp(2.5rem, 7vw, 5rem);
  font-size: var(--t-link);
}

.colophon {
  margin-top: clamp(2.5rem, 7vw, 5rem);
  font-size: var(--t-colophon);
  color: var(--ink-60);
}

/* ---------- Responsive ---------- */

@media (max-width: 48rem) {
  .grid {
    grid-template-columns: 1fr;
    row-gap: clamp(2rem, 8vw, 3rem);
  }
  /* Collapse to one column in source order; nothing is hidden or reordered */
  .statement, .about, .links, .colophon {
    grid-column: 1;
    grid-row: auto;
  }
  .links, .colophon { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}