/* Hayloft Systems B.V. · company page. The values are documented in DESIGN.md. */

:root {
  --ground: #f4f7f7;      /* cool white */
  --ink: #14191b;         /* near-black */
  --ink-soft: #4a5357;    /* secondary text, 7.3:1 on ground */
  --rule: #cfd7da;        /* hairlines */
  --green: #1e5a3c;       /* the mark; links */
  --burgundy: #5A1E31;    /* Peterloff Holdings B.V.'s signet only */
  --on-burgundy: #F6EFE6;

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

  --gutter: clamp(20px, 5vw, 72px);
  --measure: 40rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--ground);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}
body { min-height: 100vh; display: flex; flex-direction: column; }

::selection { background: var(--green); color: var(--ground); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
a { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }

/* Masthead: the mark and the name, centred over everything beneath, closed by a double rule */
.head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 24px;
  padding: clamp(32px, 5vh, 56px) var(--gutter) clamp(28px, 4vh, 44px);
  border-bottom: 2px solid var(--ink);
  position: relative;
}
.head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  border-bottom: 1px solid var(--ink);
}
.head .mark { grid-column: 2; }
.head .lang { grid-column: 3; justify-self: end; }

.mark { display: inline-flex; flex-direction: column; align-items: center; color: var(--ink); }
.mark svg { width: clamp(96px, 10vw, 150px); height: auto; display: block; margin-bottom: clamp(14px, 1.6vw, 22px); }
.mark svg path { stroke: var(--green); }
.mark h1 {
  font: 600 clamp(1.375rem, 3.4vw, 2.875rem)/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-right: -0.14em;
  white-space: nowrap;
}

.lang { display: flex; gap: 20px; font-size: 0.9375rem; padding-top: 4px; }
.lang a { color: var(--ink); }
.lang a[aria-current] { text-decoration: none; font-weight: 600; }

/* Body: statements on the left, the register on the right */
.body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) minmax(260px, 22rem);
  justify-content: space-between;
  column-gap: clamp(40px, 6vw, 112px);
  padding: clamp(40px, 8vh, 88px) var(--gutter) clamp(56px, 10vh, 104px);
  align-content: start;
}

.lead {
  font-size: clamp(1.625rem, 3vw, 2.375rem);
  line-height: 1.22;
  font-weight: 500;
  letter-spacing: -0.012em;
  text-wrap: balance;
  max-width: 22em;
}

.statements section { margin-top: clamp(48px, 7vh, 72px); }
.statements h2 {
  font-size: 1.0625rem;
  font-weight: 600;
  padding-bottom: 10px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--ink);
}
.statements p { max-width: 36em; text-wrap: pretty; }

.values ul { list-style: none; margin-top: -12px; } /* first value sits 18px under the rule, as the mission does */
.values li {
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}

/* The register: what a bank or a landlord checks */
.register { align-self: start; border-top: 2px solid var(--ink); }
.register h2 { font-size: 1.0625rem; font-weight: 600; padding: 12px 0 4px; }
.register dl > div { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.register dt { font-size: 0.8125rem; color: var(--ink-soft); letter-spacing: 0.01em; }
.register dd { font-size: 1rem; }
.register .id { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* Foot: ownership, the parent's signet, the legal line */
.foot {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 20px;
  row-gap: 10px;
  align-items: center;
  padding: 28px var(--gutter) 40px;
  border-top: 1px solid var(--ink);
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.foot p { max-width: 70ch; }
.foot .owner { color: var(--ink); }

.signet {
  grid-row: 1 / 3;
  width: 44px;
  aspect-ratio: 1;
  background: var(--burgundy);
}
/* The signet is Peterloff Holdings B.V.'s placeholder image, rules included, copied from
   peterloff-nl-branding/design-system/assets/: cream on the burgundy field, ink for paper. */
.signet img { display: block; width: 100%; height: 100%; }
.signet .on-paper { display: none; }
/* Forced colours replace the field with the theme's background but never recolour
   an image: on a light theme, show the ink version. */
@media (forced-colors: active) and (prefers-color-scheme: light) {
  .signet .on-field { display: none; }
  .signet .on-paper { display: block; }
}

@media (max-width: 820px) {
  .body { grid-template-columns: 1fr; row-gap: 56px; }
  .register { order: 2; }
}

@media (max-width: 600px) {
  .head { grid-template-columns: 1fr; justify-items: center; gap: 24px; }
  .head .lang { grid-column: 1; grid-row: 1; justify-self: end; }
  .head .mark { grid-column: 1; }
  .mark h1 { letter-spacing: 0.1em; margin-right: -0.1em; font-size: clamp(1.125rem, 5.4vw, 1.5rem); }
}

@media print {
  html { background: none; }
  .lang { display: none; }
  .mark svg path { stroke: var(--ink); }
  a { color: var(--ink); text-decoration: none; }
  .body { grid-template-columns: 1fr 16rem; padding-top: 32px; }
  .signet { background: none; }
  .signet .on-field { display: none; }
  .signet .on-paper { display: block; }
}