@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Raleway:wght@700&display=swap');

/* ==========================================================================
   scale.css — site-wide type scale + layout shell
   --------------------------------------------------------------------------
   Loaded after each page's inline <style>, so it wins on equal specificity.
   This is the one file to tune. Everything below hangs off three variables.

   Body copy, captions, carousel text, form fields and nav are +30%.
   Display headings (h1, hero, stat numbers) are scaled less (+12-25%) so the
   hierarchy still reads at the larger base size instead of shouting.
   ========================================================================== */

:root {
  --shell: 1140px;       /* content width — matched to joecahill.com */
  --shell-wide: 1480px;  /* wider column the work-card grids break out to */
  --gutter: 24px;        /* minimum side padding on small screens */
  --measure: 960px;      /* text line length, grown in step with the type size */

  /* Body font — Inter Tight, the same stack joecahill.com runs. Change this one
     value to swap the body typeface sitewide. Headings stay Newsreader. */
  --body-font: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   1. THE SHELL
   Every section pads in to the same 1140px column, so the header, the hero,
   the case-study body and the footer all line up on one left edge.
   Padding (not max-width) is used so full-bleed backgrounds still bleed.
   -------------------------------------------------------------------------- */
header,
footer,
.hero,
.marquee-label,
.projects,
.page-head,
.tabs,
.panel,
.about,
.contact,
.wrap {
  padding-left: max(var(--gutter), calc((100% - var(--shell)) / 2));
  padding-right: max(var(--gutter), calc((100% - var(--shell)) / 2));
}

/* these three carried their own narrower caps — release them to the shell */
.wrap      { max-width: none; margin-left: 0; margin-right: 0; }
.page-head { max-width: none; }
.about     { max-width: none; }
.contact   { max-width: none; }
.panel .grid { max-width: none; }

/* --------------------------------------------------------------------------
   2. BASE TYPE
   Case studies were running at 0.92rem (~15px). This is the +30% move.
   -------------------------------------------------------------------------- */
/* 19px / 30.4px and 32px between paragraphs — matched to joecahill.com */
body { font-family: var(--body-font); font-size: 1.2rem; line-height: 1.6; }
p { margin-bottom: 32px; }
p:last-child { margin-bottom: 0; }

/* everything that isn't a Newsreader heading follows the body font */
p, li, td, th, label, input, textarea, button, .btn, .pill, .tab, .meta,
.lede, .card p, .card h3, .cap p, .hint, .intro, .areas-lead, .marquee-label,
nav a, footer, figcaption, .fig-cap, h3.sub,
.submit, .gate button, .gate input, .thumb, .stats p, .quote-attr,
.figma-embed, .video-embed { font-family: var(--body-font); }

/* Emphasis: heavier weight everywhere. On light backgrounds the bold words also
   go full-ink so they lift off muted body copy. Never applied inside the dark
   callout band, where bold must stay white. */
strong, b { font-weight: 600; }

.wrap strong,
.bio strong,
.hero p strong,
.page-head p strong,
.gate p strong,
.areas-lead strong,
.cap p strong,
.intro strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   3. HEADER + FOOTER
   -------------------------------------------------------------------------- */
.wordmark { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 1.35rem; }
.wordmark img { height: 24px; }
nav { gap: 36px; }
nav a { font-size: 1rem; }
footer { font-size: 1.1rem; }

@media (max-width: 640px) {
  nav { gap: 20px; }
  nav a { font-size: 0.95rem; }
}

/* --------------------------------------------------------------------------
   4. BUTTONS + PILLS
   -------------------------------------------------------------------------- */
.btn, .btn-light, .submit, .gate button {
  font-size: 1.05rem;
  padding: 16px 34px;
}
.pill { font-size: 1.15rem; padding: 16px 42px; }

/* --------------------------------------------------------------------------
   5. HOMEPAGE
   -------------------------------------------------------------------------- */
.hero h1 { font-size: clamp(2.9rem, 6vw, 5rem); }
.hero p  { font-size: 1.35rem; max-width: 820px; }

.marquee-label { font-size: 0.95rem; }
.marquee-track { gap: 90px; animation-duration: 54s; }
.logo-slot.h-xs { height: 26px; }
.logo-slot.h-sm { height: 34px; }
.logo-slot.h-md { height: 52px; }
.logo-slot.h-lg { height: 60px; }
.logo-placeholder { font-size: 1.45rem; }

/* Work cards, +30%. Three across at 1140 gives ~355px cards; there is no room
   to grow them inside that column, so the grid breaks out to --shell-wide.
   Below 1200px it stays inside the shell and reflows on its own. */
@media (min-width: 1200px) {
  .projects .grid,
  .panel .grid {
    width: min(var(--shell-wide), calc(100vw - 96px));
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}

.projects h2 { font-size: 2.25rem; }
.thumb .overlay h3 { font-size: 1.7rem; }
.thumb .overlay p  { font-size: 1.05rem; }
.card h3 { font-size: 1.3rem; }
.card p  { font-size: 1.1rem; }

/* --------------------------------------------------------------------------
   6. WORK PAGE
   -------------------------------------------------------------------------- */
.page-head h1 { font-size: clamp(2.2rem, 4.6vw, 3.2rem); }
.page-head p  { font-size: 1.35rem; max-width: 720px; }
.tab { font-size: 1.2rem; }
.gate { max-width: 560px; }
.gate h2 { font-size: 1.85rem; }
.gate p  { font-size: 1.2rem; }
.gate input { font-size: 1.15rem; }
.gate .error { font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   7. ABOUT + CONTACT
   -------------------------------------------------------------------------- */
.callout-inner { max-width: 820px; }
.callout h2 { font-size: clamp(2rem, 4.2vw, 2.85rem); }
.callout p  { font-size: 1.25rem; }

/* About: the bio is one short block on a page with a lot of air, so it carries
   a slightly larger size than the sitewide base. */
.bio p { font-size: 1.3rem; line-height: 1.65; }

.intro { font-size: 1.25rem; }
.areas-lead { font-size: 1.55rem; max-width: 880px; }
.cap h2 { font-size: 1.45rem; }
.cap p  { font-size: 1.1rem; }
form, .hint, .intro { max-width: 880px; }
.hint { font-size: 1.2rem; }
label { font-size: 1.05rem; }
input, textarea { font-size: 1.2rem; }
.linkedin { font-size: 1.2rem; }

/* --------------------------------------------------------------------------
   8. CASE STUDIES
   Text keeps a readable line length (--measure); images and carousels are
   released to the full width of the shell, so they read wider than the copy.
   -------------------------------------------------------------------------- */
h1 { font-size: clamp(2.2rem, 5vw, 3.45rem); max-width: 900px; }
h2 { font-size: 2rem; margin-bottom: 22px; }
h3.sub { font-size: 1.2rem; margin: 34px 0 8px; }

.wrap > p,
.wrap > h2,
.wrap > h3,
.wrap > ul,
.wrap > ol { max-width: var(--measure); }

/* The teal italic project-type line under the case-study title. It was 1.25rem
   and got skipped in the first pass, so once the body went to 19px it no longer
   read as a distinct step above the copy. +30%, same as the body. */
.kicker { font-size: 1.625rem; }

.lede { font-size: 1.4rem; max-width: 840px; }
.meta { font-size: 1.1rem; }

.pull  { font-size: clamp(1.5rem, 3vw, 1.95rem); max-width: 990px; }
.quote { font-size: clamp(1.5rem, 3.1vw, 2rem); max-width: 920px; }
.quote-attr { font-size: 1.05rem; }

.stats .n { font-size: 3.2rem; }
.stats p  { font-size: 1.1rem; }
.adjectives { font-size: 1.7rem; }

/* images run the full width of the shell */
.measure { max-width: none; }
.carousel, .carousel.wide { max-width: none; }

/* captions */
.car-slide figcaption,
.shots figcaption,
.proto-row figcaption,
.figure-stack figcaption,
.fig-cap { font-size: 0.98rem; }
.figma-embed, .video-embed { font-size: 1.02rem; }

/* carousel arrows, scaled to match */
.car-btn { width: 56px; height: 56px; }
.car-btn svg { width: 20px; height: 20px; }
.car-btn.prev { left: -30px; }
.car-btn.next { right: -30px; }
@media (max-width: 1260px) {
  .car-btn.prev { left: 10px; }
  .car-btn.next { right: 10px; }
}

.prevnext a { font-size: clamp(1.3rem, 2.6vw, 1.75rem); }

/* --------------------------------------------------------------------------
   9. FIXES FOR RULES THAT ASSUMED THE OLD LAYOUT
   These are page-level rules that were tuned to the old 1060px / 6vw geometry
   and outrank the shell above. Without these the broker and admin-tools pages
   change width from section to section.
   -------------------------------------------------------------------------- */

/* Beige bands were pinned to the old 1060px cap by a more specific selector,
   so band sections stayed narrow while everything around them widened. */
.band .wrap { max-width: none; }

/* The full-bleed hero: image bleeds off the left, copy sits right. Its right
   edge was aligned to the old 6vw padding, so it no longer lined up with any
   other section. Re-align it to the shell. */
.hero-feature {
  padding-right: max(var(--gutter), calc((100% - var(--shell)) / 2));
}

/* Hero copy never grew with the type, so the overview paragraph was cramped
   while the rest of the page opened up. */
.hero-copy { max-width: 680px; }

/* --------------------------------------------------------------------------
   10. BUTTONS: ONE SYSTEM
   Case studies used a black pill that predates the teal buttons on the home,
   about and contact pages, so prototype links read as a different product.
   These now use the same primary/secondary pair as .btn.

   Note the specificity: .pill.solid (0,2,0) outranks .pill (0,1,0), so it has
   to be named explicitly or it stays black.
   -------------------------------------------------------------------------- */

/* primary — teal fill, same as .btn-primary */
.pill,
.pill.solid {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
}
.pill:hover,
.pill.solid:hover {
  background: #0a4640;
  border-color: #0a4640;
  color: #fff;
}

/* a second pill next to the first is the secondary action — same as
   .btn-secondary. Keeps one clear primary per row instead of two teal slabs. */
.pill + .pill {
  background: transparent;
  color: var(--ink);
  border: 1px solid #c9c7c2;
}
.pill + .pill:hover {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   11. ICON GRIDS ON THE TWO BROKER CASE STUDIES
   Impact (workflow) and the KPI / Validation rows (admin tools) were left at
   ~13px copy while the body went to 19px, and at 3-4 columns there was no room
   to grow. Two columns, type brought up to body scale.
   .icon-grid.cols-3 / .cols-4 are (0,2,0), so they must be named explicitly or
   they keep their old column count.
   -------------------------------------------------------------------------- */

.impact-grid,
.icon-grid,
.icon-grid.cols-2,
.icon-grid.cols-3,
.icon-grid.cols-4 {
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 64px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.impact-grid .t,
.icon-grid .t {
  font-size: 1.25rem;
  margin-bottom: 10px;
}

.impact-grid p,
.icon-grid p {
  font-size: 1.15rem;
  line-height: 1.6;
}

/* icons grow with the type so they don't look stranded */
.impact-grid .icon,
.icon-grid .ic {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
}
.icon-grid .photo { width: 130px; height: 130px; }

/* the pages drop these to a single column on mobile; the rules above would
   otherwise override that and leave two cramped columns on a phone */
@media (max-width: 800px) {
  .impact-grid,
  .icon-grid,
  .icon-grid.cols-2,
  .icon-grid.cols-3,
  .icon-grid.cols-4 { grid-template-columns: 1fr; gap: 48px; }
}

/* KPI row has three items — two columns left one stranded on its own line.
   Back to three across, narrower columns, type unchanged. Validation (two
   items) and Impact (four, so an even 2x2) stay at two. */
.icon-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1100px;
  gap: 48px 40px;
}
@media (max-width: 800px) {
  .icon-grid.cols-3 { grid-template-columns: 1fr; gap: 48px; }
}