/* ==========================================================================
   General Robotics — site styles

   Contents
     1. Design tokens   colours, type, spacing. Change the look here first.
     2. Fonts           self-hosted variable fonts
     3. Base            element defaults
     4. Layout          page width, sections
     5. Components      header, buttons, labels, plates, ornament, founder card
     6. Sections        hero, purpose, standard band, craft, today, contact, footer
     7. Motion          scroll reveals; switched off for reduced-motion users
     8. Print

   Conventions: class names follow block__element--modifier. Sizes are in rem
   so the page respects the reader's browser text size.
   ========================================================================== */

/* 1. Design tokens --------------------------------------------------------- */
:root {
  /* Brand palette (GR-current-direction.md, section 6). */
  --paper: #F6F3EB;        /* ivory page */
  --paper-deep: #EEE8D9;   /* alternate band */
  --plate: #FFFDF7;        /* mat around pictures */
  --ink: #12271F;          /* body text: near-black forest green */
  --ink-soft: #3B4B44;     /* secondary text */
  --green: #1B4332;        /* forest green surfaces */
  --green-deep: #12302A;
  --red: #922422;          /* royal red: rules, links, focus */
  --gold: #C4A15A;         /* decorative only: too light for text on paper */
  --gold-ink: #75581F;     /* gold dark enough for small text on paper */
  --gold-light: #DCC389;   /* gold light enough for small text on green */
  --cream: #EFE4CA;        /* text on green */

  /* Type. */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-text: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --step--1: clamp(0.84rem, 0.81rem + 0.14vw, 0.92rem);
  --step-0: clamp(1.06rem, 1.01rem + 0.25vw, 1.2rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.55rem);
  --step-2: clamp(1.6rem, 1.3rem + 1.4vw, 2.5rem);
  --step-3: clamp(2.1rem, 1.5rem + 2.9vw, 3.6rem);
  --step-4: clamp(2.9rem, 1.6rem + 6vw, 6.25rem);

  /* Space and measure. */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --wrap: 74rem;
  --wrap-narrow: 54rem;
  --section: clamp(4.5rem, 10vw, 8.5rem);
  --header-height: 4.5rem;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: light;
}

/* 2. Fonts ----------------------------------------------------------------- */
/* Variable fonts: one file covers every weight. Licences are in assets/fonts. */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces-latin-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/SourceSerif4-latin-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/SourceSerif4-Italic-latin-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

/* 3. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.65;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  /* SOFT rounds Fraunces' terminals, echoing the brand's Nouveau Roman lettering. */
  font-variation-settings: "SOFT" 100;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.005em; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--red); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

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

::selection { background: var(--green); color: var(--cream); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--green);
  color: var(--cream);
  transition: top 0.15s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* 4. Layout ---------------------------------------------------------------- */
.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - 2 * var(--gutter), var(--wrap-narrow)); }

.section { padding-block: var(--section); }

/* 5. Components ------------------------------------------------------------ */

/* Header: stays in view; gains a hairline once the page has scrolled. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: 0 6px 24px -18px rgb(18 39 31 / 0.5);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--ink);
  text-decoration: none;
}
.brand__emblem { width: 3rem; height: 3rem; flex: none; }
.brand__name {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100;
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}

.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); }
.site-nav a {
  color: var(--ink);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.site-nav a:hover { border-bottom-color: var(--red); color: var(--red); }
.site-nav .site-nav__cta {
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--green);
  border-radius: 999px;
}
.site-nav .site-nav__cta:hover { background: var(--green); color: var(--cream); border-color: var(--green); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.2rem;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.4rem;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -0.4rem; }
.nav-toggle__bars::after { top: 0.4rem; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(0.4rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-0.4rem) rotate(-45deg); }

/* Small spaced capitals used above headings. */
.label {
  margin: 0 0 1.1rem;
  color: var(--gold-ink);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.label--on-dark { color: var(--gold-light); }

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); max-width: 34em; }

.actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }

.button {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--green);
  border-radius: 999px;
  background: var(--green);
  color: var(--cream);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.button:hover { background: var(--green-deep); transform: translateY(-1px); }
.button--quiet { background: transparent; color: var(--green); }
.button--quiet:hover { background: var(--green); color: var(--cream); }

.text-link { font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; }

/* Plate: a picture set in a paper mat with a double red rule, after the
   borders of the General Robotics advertisements. */
.plate {
  position: relative;
  margin: 0;
  padding: clamp(0.6rem, 1.2vw, 0.9rem);
  background: var(--plate);
  border: 1px solid var(--red);
  box-shadow: 0 30px 60px -40px rgb(18 39 31 / 0.55);
}
.plate::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid color-mix(in srgb, var(--red) 55%, transparent);
  pointer-events: none;
}
.plate img { width: 100%; }
.plate figcaption {
  padding-top: 0.7rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}

/* Ornament: a gold rule with a lozenge at its centre. */
.ornament {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(18rem, 60%);
  margin: 2.6rem auto 0;
}
.ornament::before, .ornament::after { content: ""; flex: 1; height: 1px; background: var(--gold); }
.ornament span { width: 0.55rem; height: 0.55rem; background: var(--gold); transform: rotate(45deg); }

.note {
  padding-left: 1rem;
  border-left: 2px solid var(--gold);
  color: var(--ink-soft);
  font-size: var(--step--1);
  font-style: italic;
  line-height: 1.6;
}

/* 6. Sections -------------------------------------------------------------- */

/* Hero */
.hero { padding-block: clamp(2.5rem, 6vw, 5.5rem) var(--section); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5.5rem);
}
.hero__title {
  margin-bottom: 1.6rem;
  font-size: var(--step-4);
  font-weight: 380;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  line-height: 0.98;
  letter-spacing: -0.02em;
  word-spacing: 0.06em;
}

/* Purpose */
.purpose { text-align: center; padding-top: 0; }
.statement {
  font-size: var(--step-2);
  font-weight: 380;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

/* Standard: the forest-green motto band */
.band {
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--green) 82%, #3c7a5e) 0%, var(--green) 55%, var(--green-deep) 100%);
  color: var(--cream);
}
.band__head { max-width: 44rem; margin-inline: auto; text-align: center; }
.band__title { font-size: var(--step-4); font-weight: 380; letter-spacing: -0.025em; color: #FBF6E6; }
.band__lede { margin-top: 1.6rem; font-size: var(--step-1); line-height: 1.5; color: var(--cream); }

.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin: clamp(3rem, 7vw, 5rem) 0 0;
  padding: 0;
  list-style: none;
}
.pillar { padding-top: 1.4rem; border-top: 1px solid var(--gold); }
.pillar__numeral {
  display: block;
  margin-bottom: 0.9rem;
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: 0.12em;
}
.pillar h3 { margin-bottom: 0.6rem; color: #FBF6E6; }
.pillar p { color: color-mix(in srgb, var(--cream) 88%, transparent); }

/* Craft */
.craft__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  align-items: center;
  gap: clamp(2rem, 7vw, 6rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.craft__text { max-width: 42rem; }
.craft__text h2 { margin-bottom: 1.4rem; }
/* The engraving's own paper is close to the page colour; multiply lets it sit
   on the page without a visible rectangle. */
.crest { margin: 0; }
.crest img { width: 100%; mix-blend-mode: multiply; }

/* Today */
.today { background: var(--paper-deep); }
.today__grid {
  display: grid;
  grid-template-columns: minmax(0, 31rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 7vw, 6rem);
}
/* Two engineering drawings side by side. */
.drawings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 2vw, 1.25rem); }
.plate--drawing { border-color: var(--ink-soft); box-shadow: none; }
.plate--drawing::before { border-color: color-mix(in srgb, var(--ink-soft) 45%, transparent); }
.today__text { max-width: 38rem; }
.today__text h2 { margin-bottom: 1.4rem; }
.today__text .note { margin-top: 2rem; }

/* Contact */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(2.5rem, 6vw, 5rem);
}
.contact__text h2 { margin-bottom: 1.2rem; }
.contact__text p { max-width: 32rem; }
.contact__text p:has(.email) { max-width: none; }
.email {
  display: inline-block;
  margin-top: 0.6rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100;
  /* Sized so the whole address fits on one line from phone width upward. */
  font-size: clamp(1.1rem, 0.5rem + 2.7vw, 2.1rem);
  letter-spacing: -0.01em;
  text-decoration-color: var(--red);
  overflow-wrap: anywhere;
}
.email:hover { color: var(--red); }

.founder {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  padding: 1.4rem 1.8rem 1.4rem 1.4rem;
  background: var(--plate);
  border: 1px solid color-mix(in srgb, var(--gold) 70%, transparent);
}
.founder__photo {
  width: 5.5rem;
  height: 5.5rem;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold);
}
.founder p { margin: 0; }
.founder__name { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-size: var(--step-1); line-height: 1.2; }
.founder__role { margin-top: 0.2rem; color: var(--gold-ink); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.founder__place { margin-top: 0.35rem; color: var(--ink-soft); font-size: var(--step--1); }

/* Footer */
.site-footer { background: var(--green-deep); color: var(--cream); padding-block: 3rem; }
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.brand--footer { color: #FBF6E6; gap: 1.1rem; }
.brand--footer .brand__emblem { width: 4.5rem; height: 4.5rem; }
.brand__motto { display: block; margin-top: 0.3rem; color: var(--gold-light); font-size: var(--step--1); letter-spacing: 0.06em; }
.site-footer__legal { margin: 0; color: color-mix(in srgb, var(--cream) 80%, transparent); font-size: var(--step--1); line-height: 1.7; text-align: right; }

/* Narrow screens ----------------------------------------------------------- */
@media (max-width: 60rem) {
  .hero__grid, .today__grid, .contact__grid, .craft__intro { grid-template-columns: minmax(0, 1fr); }
  .hero__art { max-width: 34rem; }
  .crest { max-width: 15rem; margin-inline: auto; }
  .drawings { max-width: 34rem; }
  .contact__grid { align-items: start; }
  .pillars { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .site-footer__legal { text-align: left; }
}

@media (max-width: 46rem) {
  .nav-toggle { display: inline-flex; }
  /* Without JavaScript the menu simply stays open beneath the header. */
  .site-header__inner { flex-wrap: wrap; gap: 0 0.75rem; }
  .site-nav {
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding-bottom: 1.2rem;
  }
  .site-nav a { padding-block: 0.7rem; }
  .site-nav .site-nav__cta { margin-top: 0.6rem; }
  .js .nav-toggle[aria-expanded="false"] + .site-nav { display: none; }
  .brand__emblem { width: 2.6rem; height: 2.6rem; }
  .brand { gap: 0.6rem; }
  .brand__name { font-size: 0.86rem; letter-spacing: 0.1em; }
  .nav-toggle__label { font-size: 0.72rem; }
  .founder { width: 100%; }
}

/* 7. Motion ---------------------------------------------------------------- */
/* Elements with .reveal rise into place as they scroll into view. They are
   only hidden when JavaScript is running (.js) and motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(1.1rem);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }
  .pillar:nth-child(2) { transition-delay: 0.08s; }
  .pillar:nth-child(3) { transition-delay: 0.16s; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* 8. Print ----------------------------------------------------------------- */
@media print {
  .site-header, .nav-toggle, .actions, .skip-link { display: none; }
  .band, .site-footer { background: none; color: var(--ink); }
  .band__title, .pillar h3, .brand--footer { color: var(--ink); }
  .js .reveal { opacity: 1; transform: none; }
  .section { padding-block: 2rem; }
}