/* ============================================
   S EVANS DESIGN — SITE LAYER
   Loaded last on every page. The site has three page templates
   (main, service, case study), each with its own inline CSS. This
   file holds the rules they must share: one gutter, one section
   rhythm, one footer, one nav. Change spacing here, not per page.
   ============================================ */

:root {
  --maxw: 1600px;
  --gutter: 96px;
  --section-y: 128px;
  --page-title: clamp(52px, 6.6vw, 112px);
  /* Gutter for full-bleed bars (nav, footer, strips). Tracks the centred
     max-width on wide screens so they line up with .wrap content. */
  --gx: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
}
@media (max-width: 1024px) { :root { --gutter: 40px; --section-y: 96px; } }
@media (max-width: 640px)  { :root { --gutter: 24px; --section-y: 72px; } }

/* --- Nav and footer: same left edge as the content --- */
.nav { padding-left: var(--gx); padding-right: var(--gx); }
.nav-logo img { width: 133px; height: auto; }
.footer { padding-left: var(--gx); padding-right: var(--gx); }
.footer-grid { gap: 48px; }
@media (max-width: 1024px) { .footer-grid { gap: 32px; } }

/* --- Main + service templates --- */
body:not(.page-case) .wrap {
  max-width: var(--maxw);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
body:not(.page-case) .hero { padding-left: var(--gx); padding-right: var(--gx); }
.services { padding: var(--section-y) 0; }
.cta { padding: var(--section-y) 0; }

/* Page titles on index pages share one size */
.page-title,
.hub-hero h1,
.svc-hero h1,
.faq-hero-text h1,
#contact-top h1 { font-size: var(--page-title); text-wrap: balance; }

/* Homepage services: every tile links to its service page */
.services-names { grid-template-columns: repeat(4, 1fr); }
.services-names a.services-name { display: block; padding-right: 24px; text-wrap: balance; }
.services-names .services-name-sub { text-wrap: pretty; }
.services-names .services-name:nth-child(-n+4) { border-top: none; }
.services-names .services-name:nth-child(n+5) { border-top: 1px solid var(--border-subtle); }
/* The title sits in a span, so undo the number-label styling that
   `.services-name span:not(.services-name-sub)` gives every other span */
.services-name span.services-name-title {
  display: inline; margin: 0;
  font: inherit; letter-spacing: 0; color: inherit;
}
@media (hover: hover) and (pointer: fine) {
  a.services-name:hover span.services-name-title { font-style: italic; }
}
.services-name--all span.services-name-title { color: var(--accent-text); }
@media (max-width: 1180px) {
  .services-names { grid-template-columns: repeat(2, 1fr); }
  .services-names .services-name:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
}
@media (max-width: 640px) {
  .services-names { grid-template-columns: 1fr; }
  .services-names .services-name:nth-child(n+2) { border-top: 1px solid var(--border-subtle); }
}

/* FAQ hero matches the home and contact hero: framed image inside the gutter */
.faq-hero {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  min-height: 0;
  padding: 160px var(--gx) var(--section-y);
}
.faq-hero-text { padding: 0; }
.faq-hero-text h1 { white-space: normal; }
.faq-hero-img { min-height: 0; aspect-ratio: 1 / 1; align-self: center; }
@media (max-width: 1024px) {
  .faq-hero { grid-template-columns: 1fr; padding-top: 128px; }
}

/* Service pages */
.svc-hero .inner { padding-left: var(--gx); padding-right: var(--gx); }
.hub-hero .tx { padding-left: var(--gx); }
.svc-sec, .svc-work { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.svc-band { padding-bottom: var(--section-y); }
.svc-faq { padding-top: var(--section-y); }
.svc-next { padding-bottom: var(--section-y); }
.svc-produce { max-width: none; }
/* Links in the services index rows: underline only as wide as the text */
.hub-row .tx .services-cta { align-self: flex-start; }

/* Spec strip under service and case study heroes: text starts on the gutter */
.svc-meta, .meta {
  gap: 0;
  padding-left: var(--gx);
  padding-right: var(--gx);
}
.svc-meta { background: var(--surface-2); }
.meta { background: var(--page-bg); }
.svc-meta > div, .meta > div { padding: 28px 32px; }
.svc-meta > div { border-left: 1px solid var(--border); }
.meta > div { border-left: 1px solid var(--line); }
.svc-meta > div:first-child, .meta > div:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 880px) {
  .svc-meta > div, .meta > div { padding: 24px 24px 24px 24px; }
  .svc-meta > div:nth-child(odd), .meta > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .svc-meta > div:nth-child(n+3) { border-top: 1px solid var(--border); }
  .meta > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
/* Phones: keep the strip as a 2 x 2 grid rather than a single stacked column
   (the case study CSS switches it to one column at 680px) */
@media (max-width: 680px) {
  .meta, .svc-meta { grid-template-columns: repeat(2, 1fr); }
  .svc-meta > div, .meta > div { padding: 20px 16px; }
  .svc-meta > div:nth-child(odd), .meta > div:nth-child(odd) { padding-left: 0; }
  .meta .v, .svc-meta .v { font-size: 18px; }
}

/* --- Case study template --- */
.page-case h2.head { text-wrap: balance; }
.page-case section {
  padding: var(--section-y) var(--gutter);
}
.page-case .wrap { max-width: calc(var(--maxw) - 2 * var(--gutter)); }
.page-case .hero .inner { padding-left: var(--gx); padding-right: var(--gx); }
.page-case .hero .logo { right: var(--gx); }
.page-case .band { padding: 96px 0; }
.page-case .fblabel,
.page-case .pagewide,
.page-case .sixup,
.page-case .twoup,
.page-case .credits {
  max-width: var(--maxw);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.page-case .fbfull { padding-left: var(--gx); padding-right: var(--gx); }
@media (min-width: 881px) {
  .page-case .split { grid-template-columns: 240px 1fr; gap: 80px; }
}
@media (max-width: 880px) {
  .page-case .band { padding: 72px 0; }
}

/* ── Phone menu (29 Sep 2026) ────────────────────────────────────────
   js/menu.js adds a menu button beside the theme toggle and a full-screen
   panel. At 680px and below every template now shows: logo, theme toggle,
   menu. The button reuses .theme-toggle, so it takes each template's colours. */
.nav-menu-li { display: none; }
.nav-panel[hidden] { display: none; }
@media (max-width: 680px) {
  .nav .nav-links { display: flex !important; align-items: center; gap: 12px; list-style: none; margin: 0; padding: 0; }
  .nav .nav-links > li { display: none; }
  .nav .nav-links > li:has(> .theme-toggle),
  .nav .nav-links > li.nav-menu-li { display: flex; }
  .nav-menu-btn { width: 44px; height: 44px; margin-right: -10px; }
  .nav-menu-btn svg { width: 22px; height: 22px; }
}
.nav-panel {
  position: fixed; inset: 0; z-index: 1000;
  background: #0A0A0A; color: #F5F2EE;
  display: flex; flex-direction: column;
  padding: 0 24px calc(40px + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity 200ms cubic-bezier(.22, 1, .36, 1);
}
.nav-panel.is-open { opacity: 1; }
.nav-panel-bar { height: 56px; flex: none; display: flex; align-items: center; justify-content: space-between; }
.nav-panel-logo img { display: block; width: 133px; height: auto; }
.nav-panel-close {
  width: 44px; height: 44px; margin-right: -10px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: rgba(245, 242, 238, .72);
}
.nav-panel-close:hover { color: #F5F2EE; }
.nav-panel-close svg { width: 22px; height: 22px; }
.nav-panel-links { list-style: none; margin: auto 0 0; padding: 48px 0 0; }
.nav-panel-links li { border-top: 1px solid rgba(245, 242, 238, .14); }
.nav-panel-links li:last-child { border-bottom: 1px solid rgba(245, 242, 238, .14); }
.nav-panel-links a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 16px 0; color: #F5F2EE; text-decoration: none;
}
.nav-panel-num {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-weight: 500; font-size: 11px; letter-spacing: .2em;
  color: rgba(245, 242, 238, .5); min-width: 24px;
}
.nav-panel-word {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: 44px; line-height: 1.05; letter-spacing: -.02em;
}
.nav-panel-links a[aria-current="page"] .nav-panel-num { color: #BFFF00; }
.nav-panel-links a:focus-visible, .nav-panel-close:focus-visible, .nav-panel-logo:focus-visible { outline: 2px solid #BFFF00; outline-offset: 3px; }
html.nav-open, html.nav-open body { overflow: hidden; }
@media (min-width: 681px) { .nav-panel { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .nav-panel { transition: none; } }

/* --- Next project: end of every case study ---
   Added by _tools/add_next_project.py, just above the footer. */
.next-case { background: var(--page-bg); color: var(--ink); padding: 96px var(--gx) 112px; }
.page-case .next-case { padding: 96px var(--gx) 112px; }
.next-case-top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding-bottom: 24px; margin-bottom: 40px; border-bottom: 1px solid var(--line);
}
.next-case-eyebrow, .next-case-all, .next-case-meta, .next-case-go { font-size: 11px; letter-spacing: .2em; }
.next-case-eyebrow { color: var(--muted); }
.next-case-all { color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 4px; transition: border-color .2s var(--ease-out); }
.next-case-all:hover { border-color: var(--ink); }
.next-case-card { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; color: inherit; text-decoration: none; }
.next-case-img { overflow: hidden; border-radius: 4px; background: var(--tile); aspect-ratio: 3 / 2; }
.next-case-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.next-case-card:hover .next-case-img img { transform: scale(1.02); }
.next-case-meta { color: var(--muted); margin-bottom: 20px; }
.next-case-title {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: clamp(44px, 5vw, 80px); line-height: 1.02; letter-spacing: -.01em;
  margin-bottom: 24px; text-wrap: balance;
}
.next-case-desc { font-size: 18px; line-height: 1.6; color: var(--body); max-width: 44ch; text-wrap: pretty; }
.next-case-go {
  display: inline-block; margin-top: 32px; color: var(--ink);
  border-bottom: 1px solid var(--line); padding-bottom: 4px; transition: border-color .2s var(--ease-out);
}
.next-case-card:hover .next-case-go { border-color: var(--ink); }
.next-case-cta {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px;
  margin-top: 80px; padding-top: 40px; border-top: 1px solid var(--line);
}
.next-case-ask { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.1; text-wrap: balance; }
.next-case-btn {
  display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: #0A0A0A; background: #BFFF00;
  padding: 16px 24px; line-height: 1; transition: transform .2s var(--ease-out);
}
.next-case-btn:hover { transform: translateY(-2px); }
[data-theme="dark"] .next-case { background: var(--near); }
.next-case a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (max-width: 880px) {
  .next-case, .page-case .next-case { padding: 72px var(--gutter) 80px; }
  .next-case-card { grid-template-columns: 1fr; gap: 32px; }
  .next-case-cta { margin-top: 56px; }
}
@media (max-width: 640px) {
  .next-case-top { margin-bottom: 32px; }
  .next-case-all { font-size: 10px; }
  .next-case-cta { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .next-case-img img, .next-case-btn { transition: none; } }

/* Footer, mid widths: logo block on its own row so the five link columns have room */
@media (min-width: 1025px) { footer .footer-col a[href^="mailto:"] { white-space: nowrap; } }
@media (min-width: 1025px) and (max-width: 1480px) {
  footer .footer-grid { grid-template-columns: repeat(5, 1fr); row-gap: 40px; }
  footer .footer-brand { grid-column: 1 / -1; max-width: 480px; }
}