/*
 * The company's own pages: About, the opening that pages of words share (shared/_page_header), and the legal pages.
 * They're composed from the design system (10_base.css, 12_motion.css), and this file arranges them, drawn in the
 * system's lines as a product's page is (60_product_page.css; both line up with .split's rule through --split-pad,
 * from 10_base.css): About's table of products and its standard run from rail to rail, ruled into cells, so their
 * outer edges are the rails themselves; rows beside a column rule run into it; and a legal page is a document, its
 * contents and its text either side of one rule, where .split's would be.
 */

/* ---------- About: who we are, and everything we make ---------- */
.about-hero { padding-top: clamp(40px, 5.5vw, 88px); padding-bottom: clamp(80px, 9vw, 144px); }
.about-hero__kicker { margin-bottom: clamp(20px, 2.4vw, 36px); }
.about-hero__title { max-width: 14em; }
.about-hero__row { display: grid; gap: var(--space-6); margin-top: clamp(28px, 3vw, 48px); }
.about-hero__lead { max-width: 34em; }
@media (min-width: 64em) {
  .about-hero__row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--col-gap); align-items: end; }
  .about-hero__actions { justify-content: flex-end; }
}

/* Everything we make, a column each, however many there are: one table ruled into cells from rail to rail. Each column
   leads to its product's page: its name is the link, stretched over the column, and the arrow in its corner moves when
   it's pointed at. */
.about-lineup { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); margin-top: clamp(64px, 7vw, 112px); border-top: 1px solid var(--line); }
.about-lineup__item {
  position: relative; display: grid; gap: var(--space-3); align-content: start; justify-items: start;
  padding-block: var(--space-5) var(--space-6); border-bottom: 1px solid var(--line);
  transition: background-color var(--dur-ui) var(--ease-out);
}
.about-lineup__top { display: flex; align-items: center; justify-content: space-between; justify-self: stretch; margin-bottom: var(--space-3); }
.about-lineup__arrow { width: 18px; height: 18px; color: var(--ink-mute); transition: transform var(--dur-ui) var(--ease-out), color var(--dur-fast); }
.about-lineup__name {
  margin-top: var(--space-1);
  font-family: var(--font-display); font-size: clamp(1.625rem, 1.3rem + 0.9vw, 2.125rem); line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}
.about-lineup__name a { text-decoration: none; }
.about-lineup__name a::after { content: ""; position: absolute; inset: 0; }
.about-lineup__name a:focus-visible { outline: 0; }
.about-lineup__item:has(a:focus-visible) { outline: 2px solid var(--ink); outline-offset: -2px; }
.about-lineup__line { max-width: 26em; font-size: var(--text-small); line-height: 1.55; color: var(--ink-soft); }
.about-lineup__item:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.about-lineup__item:hover .about-lineup__arrow { color: var(--ink); transform: translate(2px, -2px); }
@media (min-width: 48em) {
  .about-lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: calc(-1 * var(--frame-inset)); }
  .about-lineup__item { min-height: clamp(240px, 21vw, 300px); padding-inline: max(var(--frame-inset), 20px); border-left: 1px solid var(--line); }
  .about-lineup__top { margin-bottom: var(--space-7); }
}
@media (min-width: 64em) {
  .about-lineup { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}

/* A split head's kicker sits in its heading's cell, directly above the heading, so a paragraph beside them that's
   longer than the heading never leaves the kicker floating above it */
.section-head__heading { display: grid; gap: var(--space-5); align-content: end; }

/* ---------- About: made in South Africa ---------- */
/* The photograph across the column, drifting a little inside its frame, over a mono caption of the place */
/* Its heading sets in two lines, so it meets the long paragraph beside it at the baseline without leaving a hole */
.about-place .section-head .t-title { max-width: 7.5em; }
.about-place__figure { display: grid; gap: var(--space-4); }
.about-place__photo { aspect-ratio: 16 / 9; }
.about-place__caption {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5);
  font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500; line-height: 1.3;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-mute);
}
@media (max-width: 47.99em) {
  .about-place__photo { aspect-ratio: 4 / 3.4; border-radius: var(--radius-md); }
}

/* ---------- About: the standard, four rules every product is held to ---------- */
/* The night band: a grid of two by two, ruled into cells from rail to rail, with a crosshair where its rules cross */
.about-standard__grid { list-style: none; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
.about-standard__item {
  display: grid; gap: var(--space-4); align-content: start;
  padding-block: var(--space-6) var(--space-7); border-bottom: 1px solid var(--line);
}
.about-standard__title {
  margin-top: var(--space-3);
  font-size: clamp(1.625rem, 1.25rem + 1.1vw, 2.25rem); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading);
}
.about-standard__text { max-width: 31em; color: var(--ink-soft); }
@media (min-width: 48em) {
  .about-standard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; margin-inline: calc(-1 * var(--frame-inset)); }
  .about-standard__item {
    min-height: clamp(280px, 25vw, 360px);
    padding: clamp(28px, 3.2vw, 44px) max(var(--frame-inset), 24px) clamp(40px, 4.4vw, 64px);
    border-left: 1px solid var(--line);
  }
  .about-standard__grid::after {
    content: ""; position: absolute; left: calc(50% - 5px); top: calc(50% - 5px); width: 11px; height: 11px; pointer-events: none;
    background:
      linear-gradient(var(--ink-mute), var(--ink-mute)) center / 11px 1px no-repeat,
      linear-gradient(var(--ink-mute), var(--ink-mute)) center / 1px 11px no-repeat;
  }
}

/* ---------- About: where we're going ---------- */
/* The engine's steps on a timeline: a line drawn across, a node on it for each step (amber where the product taking it
   is live), and under each, the product and where it stands, then the step. On phones the line runs down instead. */
.about-plan__timeline { position: relative; }
.about-plan__line { position: absolute; top: 0; left: 0; right: 0; background: var(--line-strong); }
.about-plan__steps { list-style: none; display: grid; gap: var(--space-7) calc(var(--col-gap) * 2); }
.about-plan__step { position: relative; display: grid; gap: var(--space-3); align-content: start; }
.about-plan__node {
  position: absolute; top: -4px; left: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink);
}
.about-plan__step:has(.status--live) .about-plan__node { background: var(--amber); box-shadow: none; }
.about-plan__by {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500; line-height: 1.3;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink);
}
.about-plan__by .row-index { color: var(--ink-mute); }
.about-plan__by .status { text-transform: none; }
.about-plan__text { max-width: 26em; color: var(--ink-soft); }
@media (min-width: 48em) {
  .about-plan__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about-plan__step { padding-top: var(--space-6); }
}
@media (max-width: 47.99em) {
  .about-plan__line { top: 4px; bottom: 0; right: auto; width: 1px; height: auto; }
  .about-plan__steps { padding-left: var(--space-6); }
  .about-plan__node { left: calc(-1 * var(--space-6) - 4px); top: 3px; }
}
/* Down, it draws from the top (12_motion.css draws a line from the left) */
@media (max-width: 47.99em) and (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .about-plan__line[data-reveal="line"]:not(.is-in) { transform: scaleY(0); transform-origin: center top; }
  .about-plan__line[data-reveal="line"].is-in { animation-name: about-plan-down; transform-origin: center top; }
}
@keyframes about-plan-down { from { transform: scaleY(0); } }

/* Where it stands and what's next, in two columns with a rule between */
.about-plan__notes { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: clamp(72px, 8vw, 128px); border-top: 1px solid var(--line); }
.about-plan__note { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-6); }
.about-plan__note + .about-plan__note { margin-top: var(--space-4); }
.about-plan__note p { max-width: 34em; color: var(--ink-soft); }
@media (min-width: 48em) {
  .about-plan__notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-plan__note:first-child { padding-right: clamp(24px, 3vw, 48px); }
  .about-plan__note + .about-plan__note { margin-top: 0; padding-left: clamp(24px, 3vw, 48px); border-left: 1px solid var(--line); }
}

/* ---------- About: say hello ---------- */
/* The ways to reach us as ruled rows run into the column rule, each a mono label and its value in the serif; then the
   name, once, as a mono caption */
.about-contact__head { margin-bottom: 0; }
.about-contact__head .actions { margin-top: var(--space-2); }
.about-ways { border-top: 1px solid var(--line); }
.about-ways__row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2) var(--space-5); align-items: baseline;
  padding-block: var(--space-5); border-bottom: 1px solid var(--line);
}
.about-ways dt {
  font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500; line-height: 1.3;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-mute);
}
.about-ways dd { min-width: 0; margin: 0; }
.about-ways__value {
  font-family: var(--font-display); font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.25rem); line-height: 1.2;
  letter-spacing: var(--tracking-heading); text-decoration: none; overflow-wrap: anywhere;
}
a.about-ways__value {
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 6px;
  transition: text-decoration-color var(--dur-fast);
}
a.about-ways__value:hover { text-decoration-color: var(--amber); }
.about-name {
  max-width: 54em; margin-top: var(--space-7);
  font-family: var(--font-mono); font-size: var(--text-label); line-height: 1.7; letter-spacing: 0.02em; color: var(--ink-mute);
}
@media (min-width: 36em) {
  .about-ways__row { grid-template-columns: 8rem minmax(0, 1fr); }
}
@media (min-width: 64em) {
  .about-ways { margin-left: calc(-1 * var(--split-pad)); }
  .about-ways__row { padding-left: var(--split-pad); }
}

/* ---------- A page of words: its opening (shared/_page_header) ---------- */
.page-header { padding-top: clamp(40px, 5.5vw, 88px); padding-bottom: clamp(56px, 6vw, 96px); }
.page-header__kicker { margin-bottom: clamp(20px, 2.4vw, 36px); }
.page-header__title { max-width: 14em; }
.page-header__row { display: grid; gap: var(--space-5); margin-top: clamp(24px, 2.8vw, 44px); }
.page-header__lead { max-width: 34em; }
.page-header__meta time { color: var(--ink); }
@media (min-width: 64em) {
  .page-header__row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--col-gap); align-items: end; }
  .page-header__meta { justify-self: end; padding-bottom: 0.45em; text-align: right; }
}

/* The reading line: a hairline that fills across the site's header's own lower rule, over it, as the page is read,
   drawn from the page's scroll where the browser can; elsewhere, and with less motion, there's nothing. It steps out of
   the way of the phone menu's sheet. */
.reading-progress { display: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .reading-progress {
      display: block; position: fixed; z-index: 51; left: 0; right: 0;
      top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); height: 1px; pointer-events: none;
      background: var(--ink); transform: scaleX(0); transform-origin: 0 50%;
      animation: reading-progress linear both; animation-timeline: scroll(root);
    }
  }
}
html.menu-open .reading-progress { visibility: hidden; }
@keyframes reading-progress { to { transform: scaleX(1); } }

/* ---------- Legal pages: the contents beside the short version and the text ---------- */
/* Ruled off from the opening, with crosshairs where the rule meets the rails. On wide screens the contents stay in view
   beside the text, either side of a column rule, as a .split does; on phones and tablets the short version comes
   first, then the contents, then the text. */
.legal { padding-block: clamp(56px, 6vw, 96px) var(--section); border-top: 1px solid var(--line); }
.legal__layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "summary" "toc" "body"; gap: var(--space-7); }
.legal__main { display: contents; }
.legal-summary { grid-area: summary; }
.legal__toc { grid-area: toc; }
.legal .prose { grid-area: body; }
.legal-summary, .legal .prose { min-width: 0; max-width: 36rem; }
@media (min-width: 64em) {
  .legal__layout {
    grid-template-columns: calc((100% + 2 * var(--frame-inset)) / 3 - var(--frame-inset)) minmax(0, 1fr);
    grid-template-areas: "toc main"; gap: 0;
  }
  .legal__main { display: block; grid-area: main; min-width: 0; padding-left: var(--split-pad); border-left: 1px solid var(--line); }
  .legal__toc { position: sticky; top: calc(var(--header-h) + 40px); align-self: start; padding-right: var(--split-pad); }
  .legal .prose { margin-top: clamp(56px, 6vw, 88px); }
}

/* Contents: ruled rows numbered in mono like the headings they lead to, the one being read underlined along its rule
   (the scroll-spy controller) */
.legal__toc-title { margin-bottom: var(--space-4); }
.legal__toc ol { list-style: none; counter-reset: toc; border-top: 1px solid var(--line); }
.legal__toc li { counter-increment: toc; }
.legal__toc a {
  position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: baseline;
  padding-block: 10px; border-bottom: 1px solid var(--line);
  font-size: var(--text-small); line-height: 1.4; color: var(--ink-soft); text-decoration: none; text-wrap: balance;
  transition: color var(--dur-fast);
}
.legal__toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--tracking-label); color: var(--ink-mute);
  font-variant-numeric: tabular-nums; transition: color var(--dur-fast);
}
.legal__toc a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-ui) var(--ease-out);
}
.legal__toc a:hover, .legal__toc a[aria-current] { color: var(--ink); }
.legal__toc a[aria-current]::before { color: var(--ink); }
.legal__toc a[aria-current]::after { transform: none; }
.legal__toc a:focus-visible { outline-offset: -2px; }
@media (min-width: 36em) and (max-width: 63.99em) {
  .legal__toc ol { columns: 2; column-gap: var(--space-6); }
  .legal__toc li { break-inside: avoid; }
}

/* The short version: the page's main points, before the detail, on a warm panel whose words line up with the text's */
.legal-summary { padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); background: var(--surface-raised); }
.legal-summary__title { font-size: clamp(1.5rem, 1.25rem + 0.7vw, 1.875rem); line-height: 1.15; letter-spacing: var(--tracking-heading); }
.legal-summary ul { list-style: none; display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.legal-summary li { position: relative; padding-left: 28px; color: var(--ink-soft); }
.legal-summary li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 14px; height: 1px; background: var(--ink-mute); }
@media (min-width: 64em) {
  .legal-summary { max-width: calc(36rem + 2 * clamp(24px, 3vw, 36px)); margin-left: calc(-1 * clamp(24px, 3vw, 36px)); }
}

/* Long-form text, about 68 characters to the line, its sections ruled off and numbered in mono, the numbers hanging in
   the margin on wide screens so every heading's words line up with the text */
.prose { line-height: 1.7; color: var(--ink-soft); counter-reset: section; }
.prose h2 {
  counter-increment: section; display: flex; align-items: baseline; gap: 16px;
  margin-top: var(--space-9); padding-top: var(--space-5); border-top: 1px solid var(--line);
  font-size: clamp(1.5rem, 1.25rem + 0.7vw, 1.875rem); line-height: 1.2; letter-spacing: var(--tracking-heading); color: var(--ink);
}
.prose h2::before {
  content: counter(section, decimal-leading-zero); flex: none;
  font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500; letter-spacing: var(--tracking-label);
  color: var(--ink-mute); font-variant-numeric: tabular-nums;
}
@media (min-width: 64em) {
  .prose h2::before { width: 2.5rem; margin-left: calc(-2.5rem - 16px); text-align: right; }
}
.prose h3 { margin-top: var(--space-6); font-family: var(--font-text); font-size: var(--text-body); font-weight: 600; line-height: 1.4; color: var(--ink); }
/* The first section follows the short version, which already sets it apart */
.prose > :first-child { margin-top: 0; }
.prose h2 + p, .prose h2 + h3, .prose h3 + p { margin-top: var(--space-3); }
.prose h2 + p { margin-top: var(--space-4); }
.prose p + p, .prose p + ul, .prose ul + p, .prose p + .legal-details, .prose .legal-details + p { margin-top: 1em; }
.prose ul { list-style: none; display: grid; gap: var(--space-2); }
.prose li { position: relative; padding-left: 28px; }
.prose li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 14px; height: 1px; background: var(--ink-mute); }
.prose a {
  color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--amber);
  text-decoration-thickness: 1.5px; text-underline-offset: 4px; overflow-wrap: anywhere;
  transition: text-decoration-color var(--dur-fast);
}
.prose a:hover { text-decoration-color: currentColor; }

/* Who stands behind HeyHi (legal_pages/_business_details), as a small register: mono labels, ruled rows */
.legal-details { border-top: 1px solid var(--line); }
.legal-details__row {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 2px var(--space-5); align-items: baseline;
  padding-block: var(--space-3); border-bottom: 1px solid var(--line);
}
.legal-details dt {
  font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500; line-height: 1.5;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-mute);
}
.legal-details dd { min-width: 0; margin: 0; color: var(--ink); }
@media (max-width: 29.99em) {
  .legal-details__row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- The PAIA manual: its editions, then how to make a request ---------- */
/* Two parts, each a .split with its label level with the first line of what it labels. On wide screens they share
   the one column rule, the second starting a little way down it. */
.legal-part .prose { margin-top: 0; }
@media (max-width: 63.99em) {
  .legal-part { gap: var(--space-4); }
  .legal-part + .legal-part { margin-top: clamp(56px, 6vw, 88px); }
}
@media (min-width: 64em) {
  .legal-part { align-items: baseline; }
  .legal-part + .legal-part > * { padding-top: clamp(56px, 6vw, 88px); }
}

/* The editions as ruled rows that open them: the language in the serif, then the edition's own title, its format and
   its size in mono, and an arrow that moves when the row is pointed at. On wide screens each row is a cell, run into
   the column rule on one side and out to the rail on the other, which its tint fills. */
.legal-files { list-style: none; border-top: 1px solid var(--line); }
.legal-file {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "language arrow" "meta meta";
  align-items: baseline; gap: var(--space-2) var(--space-5);
  padding-block: clamp(20px, 2.2vw, 28px); border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
  transition: background-color var(--dur-ui) var(--ease-out);
}
.legal-file__language {
  grid-area: language;
  font-family: var(--font-display); font-size: clamp(1.5rem, 1.25rem + 0.7vw, 1.875rem); line-height: 1.15;
  letter-spacing: var(--tracking-heading);
}
.legal-file__meta { grid-area: meta; }
.legal-file__arrow {
  grid-area: arrow; align-self: center; width: 18px; height: 18px; color: var(--ink-mute);
  transition: transform var(--dur-ui) var(--ease-out), color var(--dur-fast);
}
.legal-file:hover .legal-file__arrow { color: var(--ink); transform: translate(2px, -2px); }
.legal-file:focus-visible { outline-offset: -2px; }
@media (min-width: 48em) {
  .legal-file { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "language meta arrow"; }
}
@media (min-width: 64em) {
  .legal-files { margin-inline: calc(-1 * var(--split-pad)) calc(-1 * var(--frame-inset)); }
  .legal-file { padding-inline: var(--split-pad) var(--frame-inset); }
}
@media (hover: hover) and (min-width: 64em) {
  .legal-file:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
}

/* On paper: the text in black on white, without the site's header, footer, contents, reading line or AI widget */
@media print {
  html:has(.legal), body:has(.legal) { background: #fff; }
  body:has(.legal) :is(.skip-link, .site-nav, .site-footer, .back-to-top, .reading-progress, [class^="assistant-"]) { display: none !important; }
  .page-header, .legal { --ink: #000; --ink-soft: #000; --ink-mute: #444; --amber-ink: #000; --line: #bbb; padding: 0; border: 0; }
  .page-header .wrap, .legal .wrap { max-width: none; padding: 0; }
  .page-header__row { display: block; }
  .page-header__meta { margin-top: 12px; text-align: left; }
  .legal { margin-top: 24px; }
  .legal .cross, .legal__toc, .legal-file__arrow { display: none; }
  .legal__layout, .legal__main { display: block; padding: 0; border: 0; }
  .legal-summary, .legal .prose { max-width: none; margin: 0; }
  .legal-summary { margin-bottom: 24px; background: none; border: 1px solid #bbb; }
  .legal .prose { margin-top: 24px; }
  .prose h2::before { width: auto; margin-left: 0; }
  .prose h2, .prose h3 { break-after: avoid; }
  .prose a { text-decoration: none; }
}