/*
 * Shared styles for the archived smithkipnis.com.
 *
 * Lives outside the design system on purpose: these pages are meant to read as
 * a different website, so they carry the original's palette and type rather
 * than the macOS tokens, and they are framed rather than composed so neither
 * set of styles can leak into the other.
 */

:root {
  /* The live site paints bands, not one flat ground: white from the header
     through the collage, grey behind the speaking section, navy footer. */
  --paper: #ffffff;
  --band: #e0e0db;
  --ink: #253551;
  --footer: #253551;
  /* Sized so the content box (inside the 4vw gutters) lands on the
     original's 1400px at a 1800px viewport, which also puts the left edge
     at 200px exactly as the live site does. */
  --measure: 1544px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 4vw; }

/* ---------- header ---------- */

header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
  padding: 22px 0;
}
header .wrap { display: flex; align-items: center; justify-content: space-between; }
.wordmark {
  font-family: Poppins, Manrope, sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.header-nav { display: flex; align-items: center; gap: 26px; }

/* "Case Studies" sits beside Contact. The original has no way in to those
   pages at all, so this is an addition — the archive is unreachable without
   one — but it should read as part of the same nav, so both links share a
   rule. The weight shift on hover is reserved so the text does not reflow
   its neighbours as it thickens. */
.nav-link,
.contact-link {
  font-size: 15px;
  font-weight: 500;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  white-space: nowrap;
}

/* Reserve the bold width up front. Without this, thickening on hover widens
   the link and shoves its neighbour sideways. */
.nav-link,
.contact-link { display: inline-flex; flex-direction: column; }
.nav-link::after,
.contact-link::after {
  content: attr(data-text);
  font-weight: 700;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

@media (hover: hover) {
  .nav-link:hover,
  .contact-link:hover { font-weight: 700; }
}

/* ---------- type ---------- */

h1, h2, h3 { font-weight: 500; margin: 0; letter-spacing: -0.02em; }

/* The type ramp is fitted to the live site, sampled at 940px, 1200px and
   1800px: piecewise, steep below 1200px and flat above, with the two lines
   intersecting exactly at 1200px, so min() of the pair reproduces it
   without a media query. Headline: 36.30px @940 -> 41.92 @1200 -> 46.24
   @1800. Body: 29.54 -> 33.28 -> 36.16.

   Measures are em, not a fraction of the container. The original uses
   fractional columns, and they misbehave: its headline column collapses
   from 88% at 600px to 37.5% at 800px, so widening the window takes the
   headline from three lines to six. An em measure is tied to the type
   instead, so the line count holds as the window grows and can only
   improve. min() with 100% keeps it inside the container when narrow.

   This is a deliberate departure from the original, and the only one. */

.hero, .hero-sub {
  font-size: clamp(30px, min(calc(16px + 2.16vw), calc(33.28px + 0.72vw)), 52px);
  line-height: 1.11;
  max-width: min(100%, 12.5em);
}
.hero { margin: 8vh 0 0; }
.hero-sub { margin: 0.55em 0 0; }
.hero strong, .hero-sub strong { font-weight: 600; }

.lede, .patents, .hero-target {
  font-size: clamp(20px, min(calc(16px + 1.44vw), calc(27.52px + 0.48vw)), 40px);
  line-height: 1.14;
  max-width: min(100%, 26em);
}
.lede { margin: 14vh 0 0; }
.patents { margin: 0.9em 0 0; }

/* ---------- target line ----------
   The hero says who; this says what is wanted, in the first screen, before
   the industries paragraph and the collage a viewport further down. It is set
   like the lede it precedes, so the two read as one voice rather than as a
   statement and a caption. */

.hero-target { margin: 8vh 0 0; letter-spacing: -0.02em; }

/* ---------- collage ----------
   Free-form scatter, not a grid: each tile is placed by percentage inside a
   fixed-aspect box, so the whole arrangement scales with the container the
   way the original does. Percentages were measured off the live page at a
   1280px viewport. */

.collage {
  position: relative;
  width: 100%;
  padding-bottom: 86.7%; /* 1110 / 1280 */
  margin: 6vh 0 2vh;
}
.collage img {
  position: absolute;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}
.collage img.cutout { border-radius: 0; }

/* ---------- speaking ---------- */

.band {
  background: var(--band);
  margin-top: 10vh;
  padding: 82px 0;
}
.band-inner {
  display: grid;
  grid-template-columns: 62% 1fr;
  gap: 6%;
  align-items: start;
}

.speaking { margin: 0; }
/* The band's first column already carries the 62% measure, so the heading
   fills it rather than taking the fraction a second time. */
.speaking h3 {
  font-size: clamp(20px, min(calc(16px + 1.44vw), calc(27.52px + 0.48vw)), 40px);
  line-height: 1.14;
}
.speaking .label { margin: 1.6em 0 0.9em; font-size: clamp(17px, 1.6vw, 20px); }
.speaking ul { list-style: none; margin: 0; padding: 0; }
.speaking li {
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.45;
  margin: 0 0 1.1em;
  max-width: 62ch;
}

.cta {
  display: inline-block;
  font-size: clamp(20px, 2.2vw, 27px);
  margin: 9vh 0 0;
}

/* Sits in the band's second column, top-aligned with the heading. */
.presenting {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- footer ---------- */

footer { background: var(--footer); padding: 34px 0; }
footer .wrap { display: flex; justify-content: center; gap: 26px; }
footer a { color: #fff; opacity: 0.92; display: inline-flex; }
footer a:hover { opacity: 1; }
footer svg { width: 22px; height: 22px; fill: currentColor; display: block; }

/* ---------- narrow ----------
   The scatter collapses below the original's breakpoint: absolute placement
   at phone widths turns the tiles into confetti. A staggered two-column
   flow keeps the loose feel and stays legible. */

/* The band's two columns get cramped before the collage does, so they
   stack at a wider breakpoint than the tiles. */
@media (max-width: 900px) {
  .band-inner { grid-template-columns: 1fr; gap: 6vh; }
  .presenting { width: min(320px, 70%); margin: 0 auto; }
}

@media (max-width: 700px) {
  .collage {
    padding-bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 14px;
    align-items: center;
  }
  /* Placement is inline (left/top/width per tile), so the stacked layout has
     to beat those inline widths — hence the !important. */
  .collage img { position: static; width: 100% !important; }
  .collage img:nth-child(even) { transform: translateY(26px); }
}

@media (prefers-reduced-motion: no-preference) {
  a { transition: text-decoration-thickness 120ms ease; }
}

/* ---------- case study pages ----------
   The original centres a narrower column for long-form reading: 812px of
   content at a 1800px viewport, with headings on the same ramps as the home
   page and body copy at a flat 16px. */

/* The live column is a percentage of the viewport with a hard cap, not a fixed
   gutter: 88% up to the tablet breakpoint, then 53.2% until it reaches 812px
   and stops. Matching only the cap left every width between 768px and roughly
   1500px far too wide here, so a paragraph running eight lines on the real
   site ran four. */
.wrap.cs:not(.cs-index) {
  width: min(53.2%, 812px);
  max-width: none;
  padding: 4vh 0 8vh;
}

@media (max-width: 767px) {
  .wrap.cs:not(.cs-index) { width: 88%; }
}

.cs-h2 {
  font-size: clamp(30px, min(calc(16px + 2.16vw), calc(33.28px + 0.72vw)), 52px);
  line-height: 1.11;
  margin: 1.5em 0 0;
}
.cs > .cs-h2:first-child { margin-top: 0; }

.cs-h3 {
  font-size: clamp(20px, min(calc(16px + 1.44vw), calc(27.52px + 0.48vw)), 40px);
  line-height: 1.14;
  margin: 1.7em 0 0;
}

/* Body copy is 16px on the original — deliberately small against the
   headings — and regular weight where the rest of the site runs medium. */
/* Body copy on the case studies is Poppins with normal tracking, while the
   headings stay Manrope. Setting it in Manrope at -0.02em, as the body rule
   does, fitted about 13% more text per line, so wrapping never matched the
   real page at any width no matter how exact the column was. */
.cs-p,
.cs-list li {
  font-family: Poppins, Manrope, sans-serif;
  letter-spacing: normal;
}

.cs-p { font-size: 16px; line-height: 1.5; font-weight: 400; margin: 1.1em 0 0; }
.cs-p em { color: rgb(37 53 81 / 0.72); }

/* The live pages indent their lists but suppress the markers, so a list reads
   as a run of indented paragraphs rather than a bulleted block. */
.cs-list { margin: 1.1em 0 0; padding-left: 40px; list-style: none; }
.cs-list li { font-size: 16px; line-height: 1.5; font-weight: 400; margin: 0 0 0.9em; }
.cs-list li:last-child { margin-bottom: 0; }

/* Some source images are screenshots with extreme ratios — one is 1440x3088 —
   and at full column width they ran nearly two thousand pixels tall. Bounding
   the height as well as the width lets those scale down and centre instead of
   swamping the page, while ordinary images still fill the column. */
.cs-img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  margin: 2.6em auto;
  border-radius: 20px;
}

/* Not every still is set to the full text column. The "what we built" and
   roadmap sequences step up in width as they go — the author's own sizing —
   so the width is carried per image and the height follows the aspect ratio.
   Bounding the height as well would fight the explicit width and squash it. */
.cs-img.cs-scaled {
  width: var(--w);
  max-height: none;
}

/* Reserves the embed's space before it loads. Ratio is overridable, since not
   every clip is 16:9 — one of the Wilson X videos is shot portrait. */
.cs-video {
  width: 100%;
  aspect-ratio: var(--ratio, 16 / 9);
  margin: 2.6em 0;
}
.cs-video iframe { width: 100%; height: 100%; border: 0; border-radius: 20px; display: block; }

/* ---------- two-column rows ----------
   The live pages set a heading beside its illustration, or two stills side by
   side each with its own caption underneath. Flattening those into one column
   detached every caption from its image, so the rows are reproduced. Column
   flex ratios come from the measured widths and are set inline per row. */

.cs-row {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  margin: 2.6em 0;
}
.cs-col { min-width: 0; }
/* The row already supplies the spacing above it. */
.cs-col > *:first-child { margin-top: 0; }
.cs-row .cs-img,
.cs-row .cs-video {
  width: 100%;
  max-height: none;
  margin: 0 0 0.9em;
}

@media (max-width: 700px) {
  .cs-row { flex-direction: column; gap: 8px; }
  .cs-col { width: 100%; }
}

/* Portrait clips would otherwise run taller than the window. */
.cs-video.portrait {
  --ratio: 9 / 16;
  max-height: 78vh;
  width: auto;
  margin-inline: auto;
}

/* ---------- case study index ---------- */

.wrap.cs-index {
  max-width: calc(960px + 8vw);
  padding-top: 9vh;
  padding-bottom: 8vh;
}

.cs-index-h1 {
  font-size: clamp(30px, min(calc(16px + 2.16vw), calc(33.28px + 0.72vw)), 52px);
  line-height: 1.11;
  margin: 0 0 1em;
}

/* One sentence saying how to read the three. It is switched with the running
   order from config/case-studies.mjs, because the same projects make a
   different case depending on the role being applied for. */
.cs-index-framing {
  font-family: Poppins, Manrope, sans-serif;
  letter-spacing: normal;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  max-width: 44em;
  margin: 0 0 3.2em;
}

/* Cards carry a problem statement now, so they need room to be read rather
   than counted. Three across on a wide screen, one below the breakpoint. */
.cs-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 44px 30px;
}

.cs-card { text-decoration: none; display: block; }
.cs-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 20px;
  transition: transform 140ms ease;
}
.cs-card:hover img { transform: scale(1.02); }

.cs-card-title {
  margin: 0.9em 0 0;
  font-size: 20px;
  line-height: 1.25;
}
.cs-card:hover .cs-card-title { text-decoration: underline; text-underline-offset: 4px; }

.cs-card-meta {
  margin: 0.35em 0 0;
  font-family: Poppins, Manrope, sans-serif;
  letter-spacing: normal;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  opacity: 0.62;
}

/* The reason to open this one, in a sentence. Someone skimming reads only
   these three. */
.cs-card-summary {
  margin: 0.85em 0 0;
  font-family: Poppins, Manrope, sans-serif;
  letter-spacing: normal;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}

/* Tags let a reader self-select on their own criteria instead of hunting for
   the signal in prose. Not links: there is nothing to filter yet. */
.cs-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 1em 0 0;
  padding: 0;
}
.cs-tags li {
  font-family: Poppins, Manrope, sans-serif;
  letter-spacing: normal;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  padding: 6px 10px;
  border: 1px solid rgb(37 53 81 / 0.18);
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- previous / next ---------- */

.cs-pager {
  margin-top: 7vh;
  padding-top: 1.8em;
  border-top: 1px solid rgb(37 53 81 / 0.15);
  display: flex;
  gap: 24px;
  justify-content: space-between;
}
/* A lone "next" still sits right, as it would with a sibling present. */
.cs-pager .cs-next-link:only-child { margin-left: auto; text-align: right; }
.cs-pager a {
  text-decoration: none;
  font-size: clamp(17px, 1.6vw, 23px);
  line-height: 1.2;
  max-width: 46%;
}
.cs-pager .cs-next-link { text-align: right; }
.cs-pager a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cs-pager span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 0.45em;
}

@media (max-width: 560px) {
  .cs-pager { flex-direction: column; }
  .cs-pager a, .cs-pager .cs-next-link { max-width: none; text-align: left; }
}

@media (max-width: 700px) {
  .cs-list { padding-left: 22px; }
  /* Too narrow to give up any width to the margins. */
  .cs-img.cs-scaled { width: 100%; }
}