/* Hylora — company site.
   One paper tone, one ink, one accent. Nothing else gets a colour. */

:root {
  --paper: #faf7f0;
  --ink: #171512;
  --ink-soft: #4f4940;
  --ink-muted: #6b6357;
  --gold: #a9803a;

  --sans: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Inter, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(1.5rem, 5vw, 5.5rem);
  --measure: 42ch;
}

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

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

body {
  margin: 0;
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3.5vw, 2.75rem) var(--gutter)
    clamp(1.5rem, 3vw, 2.5rem);
}

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex: 0 0 auto;
}

.wordmark {
  font-size: clamp(0.9rem, 1.15vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}

a.wordmark:hover,
a.wordmark:focus-visible {
  color: var(--gold);
}

/* Top right, where people look for it. Set as a word rather than as a nav
   label, though: mono/uppercase/0.2em at 10.5px is the treatment for things you
   would rather people did not click, and this is the only action on the page.
   The sizing rationale, and the reference site it was compared against, are in
   README.md — which is not deployed. */
.nav {
  display: flex;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  font-size: 1rem;
}

.nav a {
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 0.1em;
  border-bottom: 1px solid rgba(23, 21, 18, 0.3);
  transition: color 120ms ease, border-color 120ms ease;
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.nav a[aria-current="page"] {
  color: var(--ink-muted);
  border-bottom-color: transparent;
}

.colophon {
  flex: 0 0 auto;
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---- home -------------------------------------------------------------- */

.hero {
  flex: 1 1 auto;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
  padding: clamp(2rem, 6vh, 5rem) 0;
}

/* The display line and the sentence set their own measures, so the block
   itself must not impose a narrower one. */
.statement {
  min-width: 0;
}

.tagline {
  margin: 0;
  font-size: clamp(2.6rem, 6.6vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 500;
  /* Measured in em so it tracks the display size: wide enough for
     "given form." to hold together on one line, never wider. */
  max-width: 6.6em;
  text-wrap: balance;
}

.lede {
  margin: clamp(1.9rem, 4vh, 2.9rem) 0 0;
  max-width: var(--measure);
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.45;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ---- filings figure ---------------------------------------------------- */

/* The ring has to be big enough that individual filings read as filings.
   Below the compact threshold in ring.js the bands fall under a pixel. */
.figure {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  width: 100%;
  /* The third term is the short-viewport guard: the fixed chrome above and
     below the figure is ~250px, and without it 1366x768 overflowed by 4px
     and grew a scrollbar on a page that has nothing to scroll to. */
  max-width: min(68vh, 40rem, 100svh - 16rem);
  min-width: 0;
  justify-self: end;
  align-self: center;
}

.figure canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 200ms ease;
}

/* Revealed only once the grains exist, so a failed or unsupported WebGL
   context leaves clean paper rather than a blank hole. */
.figure[data-grains="live"] canvas {
  opacity: 1;
}

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

.contact {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 8vh, 6rem) 0;
}

.contact h1 {
  margin: 0;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 500;
  max-width: 20ch;
}

.contact p {
  margin: clamp(1.25rem, 2.5vh, 1.75rem) 0 0;
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.45;
  color: var(--ink-soft);
}

.mailto {
  display: inline-block;
  /* The parent is a stretching flex column; without this the underline runs
     the full width of the page instead of sitting under the address. */
  align-self: flex-start;
  margin-top: clamp(2rem, 5vh, 3.25rem);
  font-size: clamp(1.6rem, 3.8vw, 3.4rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(23, 21, 18, 0.25);
  padding-bottom: 0.12em;
  transition: border-color 140ms ease, color 140ms ease;
}

.mailto:hover,
.mailto:focus-visible {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* No rule above this line: it would sit a few pixels under the address's own
   underline and read as a mistake. Space does the separating. */
.aside {
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  max-width: 52ch;
  font-size: 0.92rem;
  color: var(--ink-muted);
}

/* ---- focus, selection -------------------------------------------------- */

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

::selection {
  background: rgba(169, 128, 58, 0.22);
}

/* The middle block draws in; the corners do not. Extra width lands outside this
   block rather than in the corridor between the text and the graphic — at 1920
   that corridor was 920px, nearly half the screen. The masthead and colophon
   deliberately stay on the page's own margins: pulling them in too made the page
   read as boxed.

   No media query, deliberately. An earlier version gated this behind
   `min-width: 1560px` and the effect was invisible on a 1512px MacBook — the
   most likely screen to view it on. A max-width simply stops binding once the
   content box is narrower than it, so below ~1280px this is already a no-op and
   the breakpoint was doing nothing a reader could not infer.

   72rem is a measured floor, not a taste value. The tagline must break as
   "Matter," / "given form." and the second line is 459px wide at the 96px cap
   the display size clamps to. 72rem leaves the text column at 488-490px across
   1366-2560 — about 29px of headroom. 68rem leaves 2px, which survives on
   Helvetica Neue and breaks to three lines the moment the stack falls through
   to Arial or Segoe UI on a machine without it. */
.hero,
.contact {
  max-width: 72rem;
  margin-inline: auto;
  width: 100%;
}

/* ---- narrow ------------------------------------------------------------ */

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    align-content: center;
    gap: clamp(2rem, 6vh, 3rem);
  }

  .figure {
    order: -1;
    justify-self: center;
    max-width: min(62vw, 20rem);
    /* The ink centroid sits right of the box centre because the gap faces
       left; without this the mark reads as misaligned against the type. */
    translate: -9% 0;
  }

  .statement {
    max-width: none;
  }
}

/* ---- print ------------------------------------------------------------- */

@media print {
  .figure canvas {
    display: none;
  }

  body {
    background: #fff;
  }
}