/* ==========================================================================
   Fold North — shared visual foundation
   Quiet, rational, restrained. Spacing, scale and fine rules carry the
   design — not colour, boxes or imagery.
   ========================================================================== */

:root {
  --background: #F3F2EE;
  --surface: #E9E8E2;
  --hero-surface: #FAF9F6;
  --text-primary: #20211F;
  --text-secondary: #666761;
  --border: #D8D7D1;
  --accent: #68756F;

  --font-sans:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif;

  --font-serif:
    "Iowan Old Style",
    Baskerville,
    "Times New Roman",
    serif;

  --content-max: 780px;
  --wide-max: 1120px;
  --gutter: clamp(20px, 5vw, 64px);
}

/* ---- Reset / base ------------------------------------------------------ */

html {
  box-sizing: border-box;
}

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

* {
  margin: 0;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

ul {
  list-style: none;
  padding: 0;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 0.15em;
}

@media (prefers-reduced-motion: no-preference) {
  a {
    transition: text-decoration-color 0.15s ease, color 0.15s ease;
  }
}

a:hover {
  text-decoration-color: currentColor;
}

a[href^="mailto:"] {
  overflow-wrap: anywhere;
}

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

::selection {
  background: var(--accent);
  color: var(--background);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ---- Headings ------------------------------------------------------------
   Serif is reserved for the hero headline and page-level article titles.
   Everything else — navigation, body copy, section labels, legal text —
   stays on the sans-serif system stack.
   ------------------------------------------------------------------------ */

h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

/* Homepage hero headline — three deliberate lines (hard line breaks in
   the markup). Sized for the ~44%-wide text column beside the hero image. */
#hero-heading {
  grid-column: 1;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

/* Supporting-page titles (Privacy, Contact) — a smaller display heading,
   still serif, but proportioned for an article rather than a hero. */
main > h1 {
  font-size: clamp(32px, 4.5vw, 44px);
  margin-top: clamp(48px, 9vw, 96px);
}

main > h1 + p {
  margin-top: 0.75em;
  color: var(--text-secondary);
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* Homepage section labels sit quietly above their content, in the manner
   of editorial section markers rather than conventional headings. */
main > section > h2 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 1.75em;
}

/* Supporting-page subheadings (e.g. "Information we process") need clear
   hierarchy without shrinking to the homepage's eyebrow-label treatment. */
main > h2 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}

h3 {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ---- Layout: header, main, footer share a page rhythm ------------------- */

/* Homepage-only full-width opening band: a plain wrapper around Header
   and Hero, with no width constraint of its own, so its background spans
   the full viewport edge to edge while Header and Hero keep centring
   their own content exactly as before. index.html only — Privacy and
   Contact don't use this wrapper, so their header sits on the normal
   page background. */
.opening-band {
  background: var(--hero-surface);
}

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  max-width: var(--wide-max);
  margin-inline: auto;
  padding: clamp(20px, 4vw, 36px) var(--gutter);
}

.wordmark a {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-decoration: none;
}

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

header nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
}

header nav a {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  text-decoration: none;
  padding-block: 4px;
}

header nav a:hover,
header nav a:focus-visible {
  color: var(--text-primary);
}

/* Homepage sections use a wider editorial grid (sized below). Supporting
   pages have no <section> wrapper, so their direct heading/paragraph/list
   children are targeted separately and keep the narrower article column. */
main > h1,
main > h2,
main > p,
main > ul {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main {
  padding-bottom: clamp(24px, 4vw, 48px);
}

footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  max-width: var(--wide-max);
  margin-inline: auto;
  padding: clamp(28px, 5vw, 40px) var(--gutter);
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 14px;
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

footer a {
  text-decoration: none;
  color: var(--text-secondary);
}

footer a:hover,
footer a:focus-visible {
  color: var(--text-primary);
}

/* ---- Homepage sections --------------------------------------------------- */

/* Default section rhythm — used as-is by Company and Contact, the more
   compact pair. About and Products (below) get more generous spacing to
   read as the page's major sections. Bottom padding is a little larger
   than top throughout, so content sits near the top of each section
   rather than centred in the space. */
main > section {
  max-width: var(--wide-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(56px, 6.8vw, 100px);
}

/* Hero: headline left (~42%), image right (~58%), vertically centred
   against each other. No border, radius, shadow or frame around the
   image — object-fit: cover keeps its approved 4:3 ratio regardless of
   the column's actual rendered size. Hero now lives inside .opening-band
   rather than <main>, so its own width/centring/padding are set here
   directly (previously inherited from the "main > section" rules). The
   right padding is trimmed (vs. the left, which still matches the page's
   gutter) so the image sits closer to the content area's right edge. */
#hero {
  display: grid;
  grid-template-columns: 0.42fr 0.58fr;
  column-gap: clamp(32px, 5vw, 64px);
  align-items: center;
  max-width: var(--wide-max);
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: clamp(12px, 2vw, 24px);
  padding-top: clamp(32px, 6vw, 72px);
  padding-bottom: clamp(48px, 8vw, 104px);
}

.hero-media {
  grid-column: 2;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* About / Products / Company / Contact share a restrained editorial
   two-column layout: a narrow label column beside a wider content column.
   Hero has no label and is excluded, keeping its own typographic block.
   Each also gets a quiet top separator — including About, which doubles
   as the visual close of the Hero's own spacing above it. */
main > section:not(#hero) {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  column-gap: clamp(24px, 4vw, 64px);
  row-gap: 0.75em;
  align-items: start;
  border-top: 1px solid var(--border);
}

main > section:not(#hero) > h2 {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
  padding-top: 0.15em;
}

main > section:not(#hero) > :not(h2) {
  grid-column: 2;
}

/* About: the page's first major section after the hero, so it gets more
   vertical room than the default section rhythm. */
#about {
  padding-top: clamp(56px, 6.2vw, 92px);
  padding-bottom: clamp(64px, 7vw, 104px);
}

/* The opening band's lighter colour already separates Hero from About,
   so its shared top rule is removed here — Products, Company and Contact
   keep theirs. Specificity matches "main > section:not(#hero)" so this
   wins on source order without affecting the other sections. */
main > section#about {
  border-top: none;
}

/* Ordinary body copy — consistent with the Products description, not a
   second display heading. Font-size/line-height/weight are inherited
   from body; only the reading width is constrained here. */
#about p {
  max-width: 620px;
}

/* Products: the second major section, so it receives the most generous
   spacing of the three content sections. */
#products {
  padding-top: clamp(64px, 7vw, 108px);
  padding-bottom: clamp(72px, 8vw, 120px);
}

/* One considered editorial row, not a card in an implied grid. */
#products article {
  border-left: 2px solid var(--accent);
  padding: clamp(4px, 1vw, 12px) clamp(20px, 3vw, 32px);
}

/* If a future approved StyleDiary image or screenshot is added as
   `<div class="product-media">…</div>` inside the article, this
   activates a two-column layout automatically. Absent any .product-media
   element (the current state), the article stays full width, unchanged. */
#products article:has(.product-media) {
  display: grid;
  grid-template-columns: minmax(200px, 320px) 1fr;
  column-gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.product-media {
  width: 100%;
}

#products h3 {
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 600;
  margin-bottom: 0.5em;
}

#products p {
  max-width: 56ch;
}

/* Company details: legible, but visually secondary to the surrounding
   editorial content. */
#company ul {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  color: var(--text-secondary);
  font-size: 15px;
}

#company li:first-child {
  color: var(--text-primary);
  font-weight: 600;
}

#contact p {
  margin-top: 0.75em;
}

#contact p:first-of-type {
  margin-top: 0;
}

/* ---- Supporting pages: Privacy and Contact ------------------------------ */
/* Reading width comes from the shared container rule above (--content-max,
   now ~780px); paragraphs no longer clip to a narrower ch-based measure. */

main > p {
  margin-top: 1.5em;
}

main > h2 {
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: clamp(24px, 4vw, 40px);
  border-top: 1px solid var(--border);
}

main > ul {
  margin-top: 1.5em;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

main > ul li {
  padding-left: 1.2em;
  position: relative;
}

main > ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--text-secondary);
}

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 640px) {
  header {
    flex-direction: column;
    align-items: flex-start;
  }

  header nav {
    gap: 10px 20px;
  }

  footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  main > section:not(#hero) {
    grid-template-columns: 1fr;
  }

  main > section:not(#hero) > h2 {
    grid-row: auto;
    margin-bottom: 0.75em;
    padding-top: 0;
  }

  main > section:not(#hero) > :not(h2) {
    grid-column: 1;
  }

  #hero {
    grid-template-columns: 1fr;
    align-items: start;
    padding-right: var(--gutter);
  }

  .hero-media {
    grid-column: 1;
    margin-top: 1.5em;
  }

  #products article:has(.product-media) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  body {
    font-size: 16px;
  }
}