/* stephenkelman.co.uk — replica stylesheet
   Type scale + palette are the measured values from docs/design-reference/.
   Layout metrics (grid margins, gutters, masthead spacing) are approximate and
   refined against the live site in the parity check. */

:root {
  --font-sans: "neue-haas-unica", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "le-monde-livre-std", Georgia, "Times New Roman", serif;

  --c-text: #282828;      /* primary */
  --c-secondary: #636569; /* h1, body, project titles */
  --c-muted: #939393;     /* nav */
  --c-faint: #b9b9b9;     /* footer */
  --c-accent: #ef4023;    /* CTA outline/text */
  --c-bg: #ffffff;

  --maxw-page: 1400px;
  --maxw-project: 1200px;
  --maxw-narrow: 700px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* No letter-spacing anywhere (live uses none) */
body, h1, h2, h3, p, a, nav, .btn, .masthead-title, .project-title { letter-spacing: normal; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  color: var(--c-secondary);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; background: #fff;
  padding: 8px 16px; z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Header ---------- */
.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 8px 38px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;   /* header stays white even on dark pages (live) */
}
.primary-nav { justify-self: start; }
.nav-menu {
  display: flex; gap: 24px; list-style: none; margin: 0; padding: 0;
}
.nav-menu a {
  font-size: 15px; line-height: 24px; color: var(--c-muted);
}
.nav-menu a:hover, .nav-menu a[aria-current="page"] { color: var(--c-text); }

.logo { justify-self: center; }
.logo img { width: 52px; height: 44px; }

.social {
  justify-self: end;
  /* Live: 25px icons on a 35px pitch → 10px gap (measured 1280). */
  display: flex; gap: 10px; list-style: none; margin: 0; padding: 0;
  align-items: center;
}
.social a { color: var(--c-muted); display: inline-flex; }
.social a:hover { color: var(--c-text); }
.social svg { width: 25px; height: 25px; fill: currentColor; }

.nav-toggle { display: none; }

/* ---------- Dark pages ----------
   Live keeps the WHITE header + grey nav on dark pages (only the content area
   below goes black). So the header is unchanged; just the project title on the
   black content lifts to #bfbfbf. */
.theme-dark .project-title { color: #bfbfbf; }

/* ---------- Masthead (home) ---------- */
.masthead {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 35px 24px 64px;   /* sticky header takes 60px flow; +35 => h1 at 95px (live) */
}
.masthead-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 31px;
  line-height: 42px;
  color: var(--c-secondary);
  margin: 0 auto;
  max-width: 640px;
}
.masthead-sub {
  font-size: 15px; line-height: 24px; color: var(--c-secondary);
  margin: 25px auto 0;   /* no max-width: sits on one line like live */
}
.masthead-buttons {
  display: flex; justify-content: center; gap: 16px; margin-top: 40px;
  flex-wrap: wrap;
}
.btn {
  display: inline-block;
  font-size: 15px; line-height: 1;
  color: var(--c-accent);
  border: 1px solid var(--c-accent);
  border-radius: 20px;
  padding: 12px 22px;
  transition: background .15s ease, color .15s ease;
}
.btn:hover { background: var(--c-accent); color: #fff; }

/* ---------- Project grid (home) ---------- */
/* Live structure (measured 2026-08-04 at 1280/768/375): the cell is 400×315 and
   the cover sits inside it with `margin: 10px 5px 0`. That margin — not a grid
   gap — is what separates the thumbnails, so the grid itself stays gap-0 and
   unpadded, and the 5px sides inset the outer edges of the grid too. */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;                 /* gutters come from the cover margins, as on live */
  max-width: 1200px;      /* 3 × 400px, centred (live) */
  margin: 0 auto;
  padding: 0 0 64px;
  --cover-inset-y: 10px;  /* live cover margin-top */
  --cover-inset-x: 5px;   /* live cover margin left/right */
}
.grid-item { position: relative; display: block; background: transparent; }
/* The cover's own aspect ratio drives the cell height at every width (live's
   in-flow <img> mechanism): cell = cover height + top margin. 409/320 is the
   covers' intrinsic ratio; yields live's measured cells at 1280/768/375
   (400x315 / 384x301 / 375x300). */
.grid-cover {
  display: block; overflow: hidden;
  margin: var(--cover-inset-y) var(--cover-inset-x) 0;
  aspect-ratio: 409 / 320;
}
.grid-cover picture { display: block; width: 100%; height: 100%; }
.grid-item img { width: 100%; height: 100%; object-fit: cover; }
/* Rollover (matches live): a near-white panel fades in over the cover, inset
   0.65em from the cover on ALL FOUR sides — bottom included — with the project
   title centred in #565656 and padded 15% each side. */
.grid-title {
  position: absolute;
  top: calc(var(--cover-inset-y) + .65em); bottom: .65em;
  left: calc(var(--cover-inset-x) + .65em); right: calc(var(--cover-inset-x) + .65em);
  display: flex; align-items: center; justify-content: center;
  /* Live pads the title 15% of the PANEL width; a bare 15% here would resolve
     against the cell instead, so subtract the panel's own insets first. */
  padding: 0 calc(.15 * (100% - 2 * (var(--cover-inset-x) + .65em)));
  text-align: center;
  font-size: 15px; line-height: 24px; color: #565656;
  background: rgba(255, 255, 255, .97);
  opacity: 0; transition: opacity .15s ease;
}
.grid-item:hover .grid-title, .grid-item:focus-visible .grid-title { opacity: 1; }

/* ---------- Project page ---------- */
/* Live (measured at 900/1440): images are FULL-BLEED — no side padding below
   the 1200px cap; each image module carries 14px bottom padding; text modules
   are a 500px box with 45px internal side padding (410px measure); buttons
   pad 14px 45px. Module spacing is per-module, not a flex gap. */
.project { padding: 48px 0 64px; }   /* live: h1 sits 48px below the header (24px under ~1000) */
.project-title {
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: var(--c-secondary);
  margin: 0 0 20px;   /* live: 20px module rhythm on desktop, 14px under ~1000 */
}
.project-modules {
  max-width: var(--maxw-project);
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 0;
}
.project-image { margin: 0; padding-bottom: 20px; }
.project-image img { width: 100%; cursor: zoom-in; }

/* Text + button modules (interleaved with images).
   Block is centred (max-width + auto margins); text itself reads left — Adobe's
   align-center centres the block, not the copy. */
.project-text { font-size: 15px; line-height: 24px; margin: 0 auto; padding: 0 45px; width: 100%; max-width: 500px; text-align: left; }
.project-text a, .about-text a, .contact-intro a { color: inherit; text-decoration: underline; }
.project-text.align-right { text-align: right; }
.project-text p { margin: 0; }
.project-button { text-align: center; margin: 0; padding: 20px 0; }
.project-embed { margin: 0 auto; padding-bottom: 20px; width: 100%; }
.project-embed .embed-ratio { position: relative; height: 0; }
.project-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* ---------- Narrow pages (about / contact) ---------- */
.page-narrow { max-width: 548px; margin: 0 auto; padding: 24px 24px 80px; }
.about-image { margin: 0 0 32px; }
/* Match live rhythm: headings sit TIGHT above their body (big gap above to
   separate sections, none below); paragraphs/links are one blank line (24px)
   apart; consecutive lines within a para (award/education lists) stay tight. */
.about-text p, .about-text h2 { font-size: 15px; line-height: 24px; color: var(--c-secondary); }
/* Unica Medium (500) now in the kit — matches live's subheading weight. */
/* Measured live rhythm (2026-08-04): heading sits 28px below the previous
   block (mt 28 collapses over the para's mb 24); the big "—" section
   separators get 52px above AND below. */
.about-text h2 { font-weight: 500; margin: 28px 0 0; }
/* Services headings carry 2 authored blank lines on live (52px); the CV-tail
   headings carry 1 (28px, the default above). Flag comes from about.json. */
.about-text h2.gap-wide { margin-top: 52px; }
.about-text .about-para { margin: 0 0 24px; }
.about-text h2 + .about-para { margin-top: 0; }   /* body tight under its heading */
.about-text .about-link { margin: 0 0 24px; }
.about-text .about-divider { color: var(--c-muted); margin: 52px 0; }
.contact-intro p { margin: 0 0 20px; }
.contact-heading { font-size: 15px; font-weight: 500; color: var(--c-secondary); margin: 0 0 20px; }

/* ---------- Contact form ---------- */
.contact-form { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.contact-form input, .contact-form textarea {
  font-family: var(--font-sans); font-size: 15px; color: var(--c-text);
  padding: 14px 16px; border: 1px solid #dadada; border-radius: 3px; width: 100%;
}
.contact-form textarea { resize: vertical; }
.contact-form button {
  align-self: flex-start;
  font-family: var(--font-sans); font-size: 15px; color: var(--c-secondary);
  background: none; border: 1px solid #dadada; border-radius: 3px;   /* match inputs */
  padding: 12px 28px; cursor: pointer;
}
.contact-form button:hover { border-color: var(--c-text); color: var(--c-text); }

/* ---------- 404 ---------- */
.error-page { text-align: center; max-width: 560px; margin: 0 auto; padding: 80px 24px 100px; }
.error-title { font-family: var(--font-serif); font-weight: 300; font-size: 31px; line-height: 42px; color: var(--c-secondary); margin: 0 0 16px; }
.error-page .btn { margin-top: 24px; }

/* ---------- Footer ---------- */
.site-footer { text-align: center; padding: 40px 24px 48px; }
.site-footer p { font-size: 12px; line-height: 20px; color: var(--c-faint); margin: 0; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; background: rgba(255,255,255,.97);
  display: none; align-items: center; justify-content: center; z-index: 200;
  cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 92vh; width: auto; height: auto; }
.lightbox-close {
  position: absolute; top: 20px; right: 24px; font-size: 28px;
  background: none; border: 0; color: var(--c-text); cursor: pointer; line-height: 1;
}

/* ---------- Responsive ---------- */
/* Live's masthead subtitle drops to 14/20 (mt 14) below ~1000px (decisions
   log, confirmed at 375). */
@media (max-width: 1000px) {
  .masthead-sub { font-size: 14px; line-height: 20px; margin-top: 14px; }
  /* Project pages drop to live's mobile rhythm: 24px under the header,
     14px modules, 14/20 title (measured at 800/375; boundary assumed ~1000
     to match the site-wide type switch). */
  .project { padding-top: 24px; }
  .project-title { font-size: 14px; line-height: 20px; margin-bottom: 14px; }
  .project-image, .project-embed { padding-bottom: 14px; }
  .project-button { padding: 14px 0; }
}

@media (max-width: 768px) {
  /* Live mobile header (measured at 375): 60px tall, 0 5vw padding, logo
     CENTRED at 48x40, hamburger on the RIGHT, socials hidden. */
  .site-header { grid-template-columns: 1fr auto 1fr; padding: 0 5vw; height: 60px; align-items: center; }
  .primary-nav { grid-column: 3; grid-row: 1; justify-self: end; }
  .logo { grid-column: 2; grid-row: 1; }
  .logo img { width: 48px; height: 40px; }
  .social { display: none; }

  /* Live glyphs (measured): burger = three 24x2 bars, 4px gaps, GREY #939393
     (var(--c-muted)); close = two 2x20 strokes at ±45°, same grey, 20x20 box. */
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 44px; height: 44px; align-items: center;
    background: none; border: 0; cursor: pointer; padding: 0;
    position: relative; z-index: 210;   /* stays above the open menu overlay */
  }
  .nav-toggle span { display: block; height: 2px; background: var(--c-muted); width: 24px; transition: transform .2s ease, opacity .2s ease, width .2s ease; }
  /* Open state: bars become the live menu's top-right close cross */
  .primary-nav.open .nav-toggle span:nth-child(1) { width: 20px; transform: translateY(6px) rotate(45deg); }
  .primary-nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .primary-nav.open .nav-toggle span:nth-child(3) { width: 20px; transform: translateY(-6px) rotate(-45deg); }

  /* Live's open menu is a FULL-SCREEN white overlay: links 22/32 grey centred
     on a 62px pitch (30px link + 32px gap), biased up by the social bar. */
  .nav-menu {
    display: none; position: fixed; inset: 0;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 32px; padding: 0 0 60px; background: #fff; z-index: 200;
  }
  .primary-nav.open .nav-menu { display: flex; }
  /* live's overlay shows no current-page highlight — every link is the same grey */
  .nav-menu a, .nav-menu a[aria-current="page"] { font-size: 22px; line-height: 32px; color: var(--c-muted); }
  .nav-menu a:hover { color: var(--c-text); }

  /* ...with the five social icons centred along the bottom, above a hairline
     (25px icons on a 62px pitch -> 37px gap; bar pads 16 top / 32 bottom). */
  .primary-nav.open ~ .social {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 205;
    justify-content: center; gap: 37px; padding: 16px 0 32px;
    background: #fff; border-top: 1px solid #eee; margin: 0;
  }

  .masthead-title { font-size: 18px; line-height: 24px; }
  /* h1 starts 19px below the 60px header; buttons-to-grid gap is 28px */
  .masthead { padding: 19px 5vw 28px; }
  .btn { font-size: 14px; line-height: 33px; padding: 0 15px; }  /* 35px incl border */
  .masthead-buttons { gap: 17px; margin-top: 40px; }
  /* Live is full-bleed here (grid padding 0) with a shallower cover margin. */
  .project-grid { grid-template-columns: repeat(2, 1fr); padding: 0 0 48px; --cover-inset-y: 8px; }
  .grid-title { font-size: 14px; line-height: 20px; }
}

@media (max-width: 520px) {
  .masthead-title { font-size: 16px; line-height: 22px; }
  .masthead-buttons { flex-direction: column; align-items: center; }
  /* Single column on live drops the side margins entirely. */
  .project-grid { grid-template-columns: 1fr; --cover-inset-y: 7px; --cover-inset-x: 0px; }
}

/* asset rev: gifs@1920-verbatim */

/* Contact form result message (post-submit redirect) */
.contact-result { color: var(--c-secondary); margin: 0 0 24px; }