/* Hallmark · v2.0.0 · theme: grid (by request of direction, field recoloured to the near-black of the Invendy logo, no red mark) · genre: editorial · shape: Poster Sequence, four sheets · job: understand who Invendy is, then contact · hero: Poster, the head overprinting a near-black field, the founding year at its foot · nav: the wordmark and three text links · footer: the company line and three links · signature: the poster head crossing into the near-black field · imagery: one real capture of Invalley.com · reveal: none */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V5 · weakest: P/S, a holding company has little to show; leaned on the real material instead: the founders and year from Invalley's about page, the client range, a capture of Invalley.com */
/* Hallmark · answered 46a · facts used are the user's own, from invalley.com/about-us and the old invendy.com copy; no invented figures */

@font-face {
  font-family: "Radio Canada Big";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/radiocanadabig-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Radio Canada";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/radiocanada-latin.woff2") format("woff2");
}

:root {
  /* Field = the near-black of the Invendy logo (#1b232e). No brand colour beyond it. */
  --color-paper: oklch(98% 0.002 255);
  --color-paper-2: oklch(95% 0.003 255);
  --color-ink: oklch(22% 0.018 255);
  --color-ink-2: oklch(32% 0.016 255);
  --color-muted: oklch(48% 0.012 255);
  --color-rule: oklch(88% 0.004 255);
  --color-field: oklch(24.5% 0.02 255);
  --color-field-ink: oklch(98% 0.002 255);
  --color-field-muted: oklch(78% 0.008 255);
  --color-mark: oklch(48% 0.012 255);
  --color-mark-ink: oklch(98% 0.002 255);
  --color-focus: oklch(22% 0.018 255);

  --font-display: "Radio Canada Big", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Radio Canada", ui-sans-serif, system-ui, sans-serif;

  --text-sm: 0.9375rem;
  --text-body: 1.0625rem;
  --text-lede: clamp(1.1875rem, 1.5vw, 1.375rem);
  --text-statement: clamp(1.375rem, 2.1vw, 1.875rem);
  --text-section: clamp(2.75rem, 6.4vw, 6rem);
  --text-poster: clamp(3.5rem, 10.2vw, 10rem);
  --text-figure: clamp(4.5rem, 11vw, 11rem);
  --text-mail: clamp(2rem, 5.6vw, 5.25rem);

  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 136px;
  --space-5xl: 184px;

  --tracking-display: -0.035em;
  --tracking-poster: -0.045em;
  --container: 1320px;
  --gutter: clamp(16px, 5vw, 64px);
  --gap: 24px;
  --col: calc((var(--container) - 11 * var(--gap)) / 12);
  --nav-h: 84px;
  --poster-ratio: 0.1099; /* poster type size as a share of the 12-column width, tuned so the field edge falls between two letters */
  --field-cols: 7;        /* the dark field starts after this many columns */
  --field-line: 9;        /* the grid line for that column: field-cols + 2 */
  --dur-short: 180ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dutch headline wraps differently: the field starts one column later, type a touch smaller */
html[lang="nl"] { --poster-ratio: 0.1090; --field-cols: 8; --field-line: 10; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--color-paper);
  color: var(--color-ink-2);
  font: 400 var(--text-body)/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  overflow-wrap: break-word;
  min-width: 0;
}
::selection { background: var(--color-ink); color: var(--color-paper); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.skip {
  position: absolute;
  left: var(--space-sm);
  top: calc(var(--space-3xl) * -1);
  z-index: 10;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-ink);
  color: var(--color-paper);
}
.skip:focus { top: var(--space-sm); }

/* The page grid: a gutter track each side, twelve columns between. */
.sheet {
  display: grid;
  grid-template-columns:
    [full-start] minmax(calc(var(--gutter) - var(--gap)), 1fr)
    [content-start] repeat(12, minmax(0, var(--col)))
    [content-end] minmax(calc(var(--gutter) - var(--gap)), 1fr) [full-end];
  column-gap: var(--gap);
}

/* ---------- Controls ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding-inline: var(--space-lg);
  border: 0;
  background: var(--color-ink);
  color: var(--color-paper);
  font: 500 var(--text-body)/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out);
}
.btn:hover { background: var(--color-ink-2); }
.btn:active { background: var(--color-ink); }
.link {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.32em;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}
.link:hover { color: var(--color-mark); }
.link:active { color: var(--color-ink); }

/* ---------- Nav ---------- */
.nav { height: var(--nav-h); align-items: center; }
.nav .brand { grid-column: content-start / span 4; display: inline-flex; align-self: center; }
.nav .brand img { height: 22px; width: auto; }
.nav .right {
  grid-column: span 8 / content-end;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  font: 500 var(--text-sm)/1 var(--font-body);
}
.nav ul { display: flex; gap: var(--space-lg); list-style: none; }
/* Language switch: a globe and two codes, the current one in ink. */
.lang { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-muted); }
.lang svg { width: 16px; height: 16px; flex: none; }
.lang [aria-current] { color: var(--color-ink); font-weight: 600; }
.lang .sep { color: var(--color-rule); }
.lang a { padding-block: var(--space-2xs); }
.nav a { text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.nav a:hover { color: var(--color-mark); }

/* ---------- Hero: the head overprints the near-black field ---------- */
.hero {
  position: relative;
  grid-template-rows: 1fr auto auto var(--space-2xl);
  min-height: min(calc(100svh - var(--nav-h)), 816px);
}
.hero .field {
  grid-column: var(--field-line) / full-end;
  grid-row: 1 / -1;
  background: var(--color-field);
}
/* The headline box spans the twelve columns and is a size container, so the
   poster type scales with the grid itself: the field's edge (a column line)
   always falls on the same spot in the letters, at every screen width. */
.hero .headline {
  grid-column: content-start / content-end;
  grid-row: 2;
  align-self: end;
  display: grid;
  container-type: inline-size;
  padding-bottom: var(--space-xl);
}
.hero .poster {
  grid-area: 1 / 1;
  font: 700 calc(100cqi * var(--poster-ratio))/0.9 var(--font-display);
  letter-spacing: var(--tracking-poster);
  color: var(--color-ink);
  /* --cut: where the field starts, measured inside the 12-column head box */
  --cut: calc((100% + var(--gap)) * var(--field-cols) / 12);
}
.hero h1.poster { clip-path: inset(-0.2em calc(100% - var(--cut)) -0.2em -0.2em); }
.hero .poster.overprint {
  color: var(--color-field-ink);
  clip-path: inset(-0.2em -0.2em -0.2em var(--cut));
  pointer-events: none;
  user-select: none;
}
.hero .intro { grid-column: content-start / var(--field-line); grid-row: 3; }
.hero .lede { max-width: 32ch; font-size: var(--text-lede); color: var(--color-ink-2); }
.hero .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-lg);
}
.hero .founded {
  grid-column: var(--field-line) / content-end;
  grid-row: 3;
  align-self: end;
  padding-left: var(--space-lg);
  color: var(--color-field-ink);
}
.hero .founded strong {
  display: block;
  font: 700 var(--text-figure)/0.82 var(--font-display);
  letter-spacing: var(--tracking-poster);
}
.hero .founded span {
  display: block;
  margin-top: var(--space-sm);
  max-width: 28ch;
  text-wrap: balance;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-field-muted);
}

/* ---------- Invalley ---------- */
.flagship { padding-block: var(--space-5xl) var(--space-4xl); row-gap: var(--space-xl); }
.flagship .head { grid-column: content-start / span 5; }
.flagship h2 { font-size: var(--text-section); }
.flagship .head p { margin-top: var(--space-lg); max-width: 38ch; font-size: var(--text-lede); }
.flagship .head .link { display: inline-block; margin-top: var(--space-lg); }
.flagship figure { grid-column: 7 / full-end; align-self: start; }
.flagship figure a { display: block; }
.flagship figure img {
  width: 100%;
  background: var(--color-paper-2);
  filter: grayscale(1);
  transition: filter 400ms var(--ease-out);
}
.flagship figure a:hover img,
.flagship figure a:focus-visible img { filter: grayscale(0); }
.flagship figcaption { margin-top: var(--space-xs); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }

/* ---------- Beyond SEO ---------- */
.beyond { padding-block: var(--space-4xl); background: var(--color-paper-2); row-gap: var(--space-xl); align-items: start; }
.beyond h2 { grid-column: content-start / span 6; font-size: var(--text-section); text-wrap: balance; }
.beyond .text { grid-column: 8 / content-end; padding-top: var(--space-2xs); }
.beyond .statement { font-size: var(--text-statement); line-height: 1.35; color: var(--color-ink); max-width: 30ch; }
.beyond .more { margin-top: var(--space-md); font-size: var(--text-lede); max-width: 44ch; }

/* ---------- Contact field ---------- */
.contact {
  background: var(--color-field);
  color: var(--color-field-ink);
  padding-block: var(--space-4xl);
  row-gap: var(--space-xl);
  --color-focus: var(--color-field-ink);
}
.contact { align-items: end; }
.contact .say { grid-column: content-start / span 7; }
.contact h2 { color: var(--color-field-ink); font-size: var(--text-section); margin-bottom: var(--space-lg); }
.contact .mail {
  display: inline-block;
  font: 700 var(--text-mail)/1 var(--font-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-field-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
  overflow-wrap: anywhere;
  transition: text-decoration-color var(--dur-short) var(--ease-out);
}
.contact .mail:hover { text-decoration-color: transparent; }
.contact .where { grid-column: 10 / content-end; font-size: var(--text-lede); }
.contact address { font-style: normal; }
.contact .where p { margin-top: var(--space-md); display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); font-size: var(--text-body); }
.contact .link:hover { color: var(--color-field-muted); }

/* ---------- Footer ---------- */
.footer { padding-block: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); row-gap: var(--space-md); }
.footer p { grid-column: content-start / span 7; }
.footer p strong { color: var(--color-ink); font-weight: 500; }
.footer nav { grid-column: span 5 / content-end; justify-self: end; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); }
.footer a { text-decoration: none; font-weight: 500; color: var(--color-ink); transition: color var(--dur-short) var(--ease-out); }
.footer a:hover { color: var(--color-mark); }

/* ---------- 404 ---------- */
.lost { padding-block: var(--space-4xl); min-height: calc(100svh - var(--nav-h) - 120px); align-content: center; }
.lost h1 { grid-column: content-start / content-end; font-size: var(--text-section); }
.lost p { grid-column: content-start / span 6; margin-top: var(--space-lg); font-size: var(--text-lede); }
.lost .actions { grid-column: content-start / content-end; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-xl); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .flagship .head { grid-column: content-start / content-end; }
  .flagship figure { grid-column: content-start / full-end; }
  .beyond h2, .beyond .text { grid-column: content-start / content-end; }
  .contact .say, .contact .where { grid-column: content-start / content-end; }
}
@media (max-width: 860px) {
  .hero { grid-template-rows: auto; min-height: 0; }
  .hero .headline { grid-row: auto; padding-block: var(--space-xl) var(--space-lg); }
  .hero .poster { --poster-ratio: 0.155; }
  .hero h1.poster { clip-path: none; }
  .hero .poster.overprint { display: none; }
  .hero .intro { grid-column: content-start / content-end; grid-row: auto; }
  .hero .field { grid-column: full-start / full-end; grid-row: 4 / span 1; margin-top: var(--space-2xl); }
  .hero .founded { grid-column: content-start / content-end; grid-row: 4; align-self: center; padding: var(--space-xl) 0; margin-top: var(--space-2xl); }
  .flagship { padding-block: var(--space-3xl); }
  .beyond, .contact { padding-block: var(--space-3xl); }
  .nav ul { gap: var(--space-md); }
  .nav ul { display: none; }
  .footer p, .footer nav { grid-column: content-start / content-end; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}