/* Alexandre Errera — base layout: client feedback of 12 Nov 2026 on top of brief §4–6.
   Desktop: header + About fill the first screen; Team + Contact share the second,
   with 1.5× the gap between them. Mobile: double section spacing, quieter menu. */

@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/eb-garamond-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/eb-garamond-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --paper: #F5F2EC;
  --ink: #1C1B19;
  --stone: #6B675F;
  --rule: #C9C3B8;

  --serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --gutter: clamp(24px, 5vw, 72px);
  --section-space: clamp(72px, 9vw, 128px);
  --label-col: 240px;

  /* Fixed heights so the two desktop screens add up to exactly one viewport each.
     Header: 40 top + 21 line + 24 to rule + 1 rule. Footer: 1 rule + 24 + 17 line + 40. */
  --header-h: 86px;
  --footer-h: 82px;
  --screen: 100vh;
}

@supports (height: 100svh) {
  :root { --screen: 100svh; }
}

/* ---------- Base ---------- */

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

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  padding: 0 var(--gutter);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  font-synthesis: none; /* never fake bold */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, p, ul, address {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: 400;
  font-style: normal;
}

ul { list-style: none; }

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

a:hover { opacity: 0.7; }

a:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

.nowrap { white-space: nowrap; }

.name,
.menu a,
.label,
.meta,
.site-footer {
  text-transform: uppercase;
}

/* ---------- Header ---------- */

.site-header {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: var(--header-h);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
}

.name {
  font-size: 17px;
  letter-spacing: 0.32em;
  line-height: 1.2;
}

.menu {
  display: flex;
  gap: 2.2em;
  font-size: 12px;
  letter-spacing: 0.22em;
  line-height: 1.2;
}

.menu a:last-child { margin-right: -0.22em; }

/* ---------- Sections ---------- */

.section {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  column-gap: 64px;
  align-items: baseline;
  padding: var(--section-space) 0;
}

#team,
#contact {
  border-top: 1px solid var(--rule);
}

.label {
  font-size: 12px;
  letter-spacing: 0.22em;
  line-height: 1.2;
  color: var(--stone);
}

/* About */

.headline {
  font-size: clamp(22px, 1.1rem + 0.6vw, 27px);
  line-height: 1.45;
  max-width: 46ch;
}

.bio {
  margin-top: 40px;
  font-size: 17px;
  line-height: 1.7;
  max-width: 44rem;
  color: var(--stone);
}

/* Team */

.lead-name {
  font-size: clamp(22px, 1.1rem + 0.45vw, 26px);
  line-height: 1.3;
}

.staff {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 40px 48px;
  margin-top: 56px;
}

.person {
  font-size: 17px;
  line-height: 1.4;
}

.meta {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.16em;
  line-height: 1.7;
  color: var(--stone);
}

/* Contact */

.contact {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 32px clamp(48px, 8vw, 120px);
  font-size: 17px;
  line-height: 1.6;
}

/* ---------- Footer ---------- */

.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  height: var(--footer-h);
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  color: var(--stone);
  line-height: 1;
}

.footer-place {
  font-size: 12px;
  letter-spacing: 0.2em;
}

/* Legal: registered name must stay legible — never below 10px. */
.footer-legal {
  font-size: 10px;
  letter-spacing: 0.16em;
  margin-right: -0.16em;
}

/* ---------- Desktop: two full screens ---------- */

@media (min-width: 861px) {
  /* Screen 1: header + About, About centred in what's left. */
  #about {
    min-height: calc(var(--screen) - var(--header-h));
    align-content: center;
  }

  /* Screen 2: Team + Contact above the footer. Both sections grow by the same
     amount and centre their content, so the space above and below the text is
     equal in each, and the same in both. */
  .screen-rest {
    display: flex;
    flex-direction: column;
    min-height: calc(var(--screen) - var(--footer-h));
  }

  #team,
  #contact {
    flex: 1 0 auto;
    align-content: center;
    padding: 48px 0; /* minimum, for short windows */
  }

  /* Headline on one line; bio exactly as wide as the headline (max ≈ 800px).
     The container shrinks to the headline, and the bio fills that width. */
  #about .content { width: fit-content; max-width: 100%; }
  .headline { max-width: 800px; }
  .bio { width: 0; min-width: 100%; max-width: none; }
}

/* ---------- Below ~860px: stack; section space 1⅓× the original ---------- */

@media (max-width: 860px) {
  .section {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
    padding: calc(var(--section-space) * 4 / 3) 0;
  }

  .staff { grid-template-columns: minmax(0, 1fr); }

  .contact { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Mobile ---------- */

@media (max-width: 600px) {
  /* 40 top + 18 name + 14 gap + 12 menu + 24 to rule + 1 rule */
  :root { --header-h: 109px; }

  .header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .name { font-size: 15px; }

  /* Quieter menu so the name clearly leads. */
  .menu {
    font-size: 10px;
    letter-spacing: 0.16em;
  }

  .menu a:last-child { margin-right: 0; }

  .headline { font-size: 22px; }

  .bio { font-size: 16px; }

  .meta { font-size: 10.5px; }
}