/* Ilmaris Labs site, holding page v0.2 (Sointu, 2026-10-28)
   System carried over from the ident study (ilmaris-design/marketing/2026-10-ident-study/brief.md):
   ledger paper, ruled rows hung off one vertical margin rule, Plex Sans for display, Plex Mono for the record.
   Red has one meaning: the newest entry, the write line. On the site that is the contact row. */

@font-face { font-family: "Plex Sans"; src: url("/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("/assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --paper: #E6EBE4;     /* ledger paper */
  --rule: #C3CEC5;      /* row rules: decorative only, never the sole carrier of meaning */
  --ink: #17191A;       /* 14.6:1 on paper */
  --graphite: #4F5752;  /* 6.2:1 on paper */
  --red: #B8321C;       /* 4.9:1 on paper; the write line only */

  --u: 0.5rem;                           /* 8 px unit */
  --gutter: clamp(1.25rem, 5vw, 5rem);   /* outer margin */
  --label: 12ch;                         /* label column: longest label ("london 2026") + 1ch, in mono */
  --gap: calc(var(--u) * 3);             /* 24 px either side of the margin rule */
  --sheet: 72rem;                        /* entry column at most; the wordmark spans it */
  --measure: 34rem;                      /* running text */

  --sans: "Plex Sans", "IBM Plex Sans", system-ui, sans-serif;
  --mono: "Plex Mono", "IBM Plex Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; font: 400 1.0625rem/1.6 var(--sans); }
h1, h2, p { margin: 0; }

/* The sheet: one left-aligned container. Rules end where the sheet ends, not at the window edge.
   The margin rule is one continuous line from the top of the window to the bottom of the sheet. */
.sheet {
  --rule-x: calc(var(--label) + var(--gap));
  font-size: 1rem;
  position: relative;
  /* height follows content: no forced void before the footer on tall screens */
  margin-left: var(--gutter);
  margin-right: var(--gutter);
  max-width: calc(var(--label) + var(--gap) * 2 + var(--sheet));
  padding-top: calc(var(--u) * 12);
}
.sheet::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--rule-x) - 0.5px);
  width: 1px; background: var(--rule);
}

.row {
  display: grid;
  grid-template-columns: var(--label) minmax(0, 1fr);
  column-gap: calc(var(--gap) * 2);
  align-items: baseline;            /* label and entry share a first baseline */
  padding-block: calc(var(--u) * 4);
  border-bottom: 1px solid var(--rule);
}

.label {
  font: 400 0.8125rem/1.6 var(--mono);
  color: var(--graphite);
  text-align: right;
  font-size: 0.8125rem;
}

.mark {
  font-weight: 600;
  font-size: 18.7cqi;                        /* "Ilmaris Labs" sets 5.33em wide: 100 / 5.33, so the mark spans the entry column */
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-left: -0.05em;                       /* optical: pull the I's side-bearing onto the column edge */
}
.row--mark { border-bottom: 2px solid var(--ink); padding-top: 0; }
.markbox { container-type: inline-size; }
.row--mark { align-items: last baseline; }

.lede {
  font-weight: 400;
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-width: 22em;
  text-wrap: balance;
}
.body { max-width: var(--measure); text-wrap: pretty; }
/* phrase groups: on wide screens lines break between phrases, not inside them */
@media (min-width: 30rem) { .ph { display: inline-block; } }

/* the write line: the newest entry, the only red on the page */
.row--write { border-bottom: 2px solid var(--red); }
.row--write .label { color: var(--red); }

a { color: inherit; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 1px; }

.mail {
  font: 400 clamp(1.125rem, 2.2vw, 1.5rem)/1.4 var(--mono);
  color: var(--red);
  text-underline-offset: 0.3em;
  display: inline-block; padding-block: calc(var(--u) * 1);   /* 44 px target */
  margin-block: calc(var(--u) * -1);                          /* keep the baseline on the grid */
}

.row--legal { border-bottom: 0; padding-top: calc(var(--u) * 4); padding-bottom: calc(var(--u) * 12 + env(safe-area-inset-bottom)); }
.legal { font-size: 0.875rem; line-height: 1.6; color: var(--graphite); max-width: var(--measure); }
.legal p + p { margin-top: calc(var(--u) * 0.5); }
.legal p:last-child { margin-top: calc(var(--u) * 2); }
.legal a { display: inline-block; padding-block: calc(var(--u) * 1.5); margin-block: calc(var(--u) * -1.5); }

/* Prose pages (privacy) */
.prose { max-width: var(--measure); }
.prose h2 { font: 600 1.25rem/1.3 var(--sans); margin: calc(var(--u) * 4) 0 calc(var(--u) * 1); }
.prose p, .prose ul { margin: 0 0 calc(var(--u) * 2); }
.prose .draft { font: 400 0.875rem/1.6 var(--mono); color: var(--red); }
.row--title .lede { font-weight: 600; }

/* Small screens: label above entry; the margin rule moves to the left edge of the sheet. */
@media (max-width: 44rem) {
  .sheet { --rule-x: 0px; padding-top: calc(var(--u) * 6); }
  .row { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--u) * 1.5); padding-block: calc(var(--u) * 3); padding-left: calc(var(--u) * 2); }
  .row--mark .label { align-self: auto; }
  .mark { font-size: 18.7cqi; }
  .row--mark { padding-top: 0; }
  .label { text-align: left; }
  .sheet::before { left: 0; }
}

@media print { html { background: #fff; } .sheet::before { display: none; } }