/* ---- Design tokens ---- */
:root {
  --bg: #faf7f0;
  --bg-dark: #1c1712;
  --text: #2a241e;
  --text-muted: #8c8477;
  --accent: #c15f2c;
  --border: #ddd7c9;
  --stage-border: rgba(44, 36, 22, 0.3);
  --border-dark: #3a332a;
  --card-bg: #f2ede1;

  --font-serif: "Instrument Serif", Georgia, serif;
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.5;
  font-size: 16px;
}

a { color: inherit; text-decoration: none; }

/* ---- Header ---- */
/* The rule under the nav runs the full width of the screen, not just the
   1280px column. The header itself stays full width and the content is held
   to the column by auto side padding, so the border spans the viewport
   without a second wrapper element in every page. */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px max(40px, calc((100% - 1280px) / 2 + 40px));
  border-bottom: 1px solid var(--border);
}

.logo {
  font-family: var(--font-serif);
  font-size: 30px;
}

.site-nav {
  display: flex;
  gap: 32px;
  font-family: var(--font-sans);
  font-size: 14px;
}

.site-nav a { color: var(--text-muted); }
.site-nav a.active { color: var(--text); font-weight: 600; }

.logo-dot { display: none; }

.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.mobile-menu-btn span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
}

.crumb {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.crumb .sep { color: var(--text-muted); margin: 0 6px; }

/* ---- Hero (home) ---- */
.hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 40px 70px;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin-bottom: 20px;
}

.hero h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 72px;
  margin: 0 0 20px;
}

.eyebrow-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}

.hero p.lede {
  max-width: 560px;
  color: var(--text);
  font-size: 16px;
  margin-bottom: 22px;
}

.link-arrow {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 14px;
}

.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* ---- Section headings ---- */
.section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 70px 40px;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.section-label.accent { color: var(--accent); }

/* Figma gives every section heading as Instrument Serif 28px (style_759798de),
   which is also what `.context-copy h2` already used. Confirmed independently
   against designs/desktop-home.png: "Case Studies" measures 115px of ink there,
   and 28px renders 115.1px where 38px renders 156.6px. */
.section h2, .made-this-work-copy h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 28px;
  margin: 0 0 40px;
}

/* ---- Project grid ---- */
.project-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.project-card { display: block; }

.project-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--border);
  border-radius: 4px;
  object-fit: cover;
  display: block;
  margin-bottom: 16px;
}

.project-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.project-meta h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  margin: 0;
}

.project-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.project-desc {
  color: var(--text-muted);
  font-size: 14.5px;
  max-width: 520px;
}

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 40px 40px 50px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
}

.footer-email {
  font-family: var(--font-serif);
  font-size: 20px;
  margin-top: 6px;
}

.footer-links {
  display: flex;
  gap: 24px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* ==================================================== */
/* Detail page                                           */
/* ==================================================== */

/* align-items: start is load-bearing. The illustration carries an
   aspect-ratio, so when it stretches to the row height that height becomes a
   minimum width and the picture takes the width away from the copy. Below
   1240px that fed back on itself: 550/550 at 1240 became 269/704 at 1024, with
   the page scrolling sideways by 49px. Starting the items stops the loop. */
.detail-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 60px;
  padding: 40px 40px 0;
  max-width: 1280px;
  margin: 0 auto;
}

.detail-hero-copy h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 72px;
  line-height: 1.15;
  margin: 18px 0 20px;
}

/* Figma node 385:60432: Geist 18px/1.6 in a 526px column, #6B5C4A. */
.detail-hero-copy p {
  color: #6b5c4a;
  font-size: 18px;
  line-height: 1.6;
  max-width: 526px;
  margin-bottom: 24px;
}

.detail-hero-copy strong { color: var(--text); }

.hero-toc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
}

.hero-toc a { color: var(--accent); }

.detail-hero-image {
  background: rgb(217, 217, 217);
  border-radius: 4px;
}

.calendly-hero-image {
  background: var(--bg) url("../assets/calendly-hero-illustration.webp") center / cover no-repeat;
  aspect-ratio: 651 / 789;
}

.grocery-hero-image {
  background: var(--bg) url("../assets/8451-hero-illustration.webp") center / cover no-repeat;
  aspect-ratio: 750 / 1047;
}

/* contain, not cover: the illustration is one composed picture and cover was
   cropping its edges away. The ratio is the artwork's own, so nothing is cut
   and no letterbox shows. */
.pointme-hero-image {
  background: var(--bg) url("../assets/pointme-hero-illustration.webp") center / contain no-repeat;
  aspect-ratio: 883 / 1205;
}

.docdraft-hero-image {
  background: var(--bg) url("../assets/docdraft-hero-illustration.webp") center / cover no-repeat;
  aspect-ratio: 908 / 1236;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}

.tag {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 16px;
}

/* At a glance */
.glance {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: 50px;
}

.glance-label {
  text-align: center;
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--text);
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.glance-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: 1280px;
  margin: 0 auto;
}

.glance-item {
  padding: 24px 28px;
  border-left: 1px solid var(--border);
}
.glance-item:first-child { border-left: none; }

.glance-item .k {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.glance-item .v {
  font-family: var(--font-serif);
  font-size: 20px;
}

/* Results (dark) */
.results {
  background: var(--bg-dark);
  color: #f1ece0;
  padding: 60px 40px;
}

.results-inner { max-width: 1280px; margin: 0 auto; }

.results h2 { font-family: var(--font-serif); font-weight: 400; font-size: 28px; color: #f1ece0; margin: 6px 0 0; }

.results-header {
  display: flex;
  border: 1px solid var(--border-dark);
  margin-bottom: -1px;
}

/* Figma node 385:61994: the header cell is 226px wide including its
   32/32/96/32 padding, and the label and title sit at the top of it. */
.results-header-copy {
  flex: 0 0 226px;
  min-height: 179px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 32px 32px 96px;
  border-right: 1px solid var(--border-dark);
}

.results-header-fill {
  flex: 1;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.05) 0,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px,
    transparent 11px
  );
}

.stat-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 0.6fr;
  gap: 1px;
  background: var(--border-dark);
  border: 1px solid var(--border-dark);
  margin-bottom: 1px;
}

.stat-row.three { grid-template-columns: 1fr 1fr 1fr 0.5fr; }

/* Figma node 385:61994 gives each row its own cell padding: the featured row
   is 20/32 and the three-up row is 32/64. */
.stat-box {
  background: var(--bg-dark);
  padding: 20px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 316px;
}

.stat-row.three .stat-box {
  padding: 32px 64px;
  min-height: 248px;
}

.stat-fill {
  background: var(--bg-dark);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.05) 0,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px,
    transparent 11px
  );
}

.stat-box .label {
  font-family: var(--font-mono);
  font-size: 20px;
  letter-spacing: 0;
  color: #f1ece0;
  margin-bottom: 0;
}

/* The featured cell carries the larger label and the larger number. */
.stat-row:not(.three) .stat-box:first-child .label { font-size: 24px; }

/* The Figma sizes are 165px and 100px, and the clamps hit them from about
   1500px up. Below that the cells are narrower than the frame's, so a fixed
   size splits a value across two lines -- "+3-5%" wrapped at 1280 and
   "+4-10%" at 1240. The viewport terms track the cell width instead. */
.stat-box .big {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(60px, 6.6vw, 100px);
  line-height: 1;
  color: var(--accent);
}

.stat-box .big.white { font-size: clamp(84px, 10.9vw, 165px); color: #f1ece0; }

.big-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.stat-box .sub {
  font-size: 18px;
  color: #f1ece0;
  margin-top: 0;
}

.stat-box .growth {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 300;
  color: #f1ece0;
  line-height: 1.25;
}

/* What shipped */
.shipped-backdrop {
  background-image:
    linear-gradient(rgba(250, 245, 236, 0.6), rgba(250, 245, 236, 0.6)),
    url("../assets/backdrop.webp");
  background-size: auto, 640px;
  background-repeat: repeat, repeat;
}

.shipped-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.pager {
  display: flex;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
}

.pager span { color: var(--text-muted); }
.pager span.active { color: var(--accent); font-weight: 600; }

.shipped-image {
  width: 100%;
  /* Fixed stage: the box keeps one height for every slide, so changing image
     never shifts the page. Slides are letterboxed into it, not cropped.
     max-height keeps tall sets inside the viewport; it depends on the viewport
     alone, so the height still never changes between slides.

     Each page sets --carousel-ratio to its WIDEST slide. With object-fit:
     contain the rendered height of a slide is width / max(slideRatio,
     boxRatio), so a box at least as wide as every slide gives every slide the
     same rendered height -- the letterboxing moves to the sides, where it
     reads as margin rather than as the picture changing size.

     Setting it to the tallest slide instead, as this did before, is the one
     value that guarantees the opposite: the height then tracks each slide's
     own ratio. On Point.me that swung the picture 78px between slides inside a
     box that never moved. */
  aspect-ratio: var(--carousel-ratio, 1.5);
  max-height: 72vh;
  object-fit: contain;
  object-position: center;
  background: #efe9db;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-top: 30px;
  display: block;
  cursor: zoom-in;
  padding:64px 0px;
}

.carousel { position: relative; padding: var(--carousel-pad, 0px) 0; }

/* The shipped carousel breaks out of the 1280px column and runs the full
   width of the viewport, with breathing room above and below. The arrows read
   --carousel-pad too, so their bands stay level with the picture. */
.carousel-full {
  --carousel-pad: 0px 0px;
  max-width: none;
  width: 100%;
}

.carousel-full .shipped-image {
  margin-top: 0;
  max-height: 85vh;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}

/* One edge-band rule for both the in-page carousel and the lightbox.
   The button is a full-height band down each side; the pill you see is drawn
   by ::before and is only decoration. Aiming at a 44px dot is the hard part of
   stepping a carousel, so the target is the whole band -- click anywhere in
   the outer sliver of the picture and it moves that way.
   isolation: isolate keeps the ::before's z-index: -1 inside the button, so
   the pill sits behind the chevron without falling behind the image. */
.carousel-arrow,
.lightbox-arrow {
  position: absolute;
  /* 0px, not 0: a unitless zero makes the calc() invalid and the band
     collapses to its content height. */
  /* top: var(--carousel-pad, 0px); */
  /* height: calc(100% - 2 * var(--carousel-pad, 0px)); */

  top: 20%;
  margin-top:auto;
  margin-bottom:auto;
  height:60%;
  width: var(--carousel-edge, 15%);
  min-width: 56px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--text);
  font-size: 42px;
  font-weight:bold;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  z-index: 2;
}

.carousel-arrow::before,
.lightbox-arrow::before {
  content: "";
  position: absolute;
  width: 64px;
  height: 64px;
  /* border-radius: 50%; */
  /* border: 1px solid var(--border); */
  background: rgba(250, 245, 236, 0.92);
  box-shadow: 0 2px 10px rgba(28, 23, 18, 0.12);
  z-index: -1;
}

.carousel-arrow:hover::before,
.lightbox-arrow:hover::before { background: #fff; }
.carousel-arrow[data-dir="prev"],
.lightbox-arrow[data-dir="prev"] { left: 0; }
.carousel-arrow[data-dir="next"],
.lightbox-arrow[data-dir="next"] { right: 0; }
.carousel.single .carousel-arrow,
.pager.single { display: none; }

/* The caption and the pager sit above the carousel on plain cream, per the
   Figma frame (node 385:63011), where the section runs title row, caption
   row, then the picture. */
.shipped-caption-band {
  background: #fdfaf2;
}

.shipped-caption-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 12px 32px;
}

.shipped-caption {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pager span { cursor: pointer; }

/* Key stages */
/* Figma node 370:26907. The eyebrow and title sit in the box's top-left cell,
   the rows hang off the bottom of the same column, and the panel centres its
   content beside them. Colours and sizes below are the Figma values. */
.stages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--stage-border);
  max-width: 1280px;
  margin: 0 auto;
  /* Every stage export is 1280x830: the box height is fixed and the copy is
     centred inside it, so short stages sit in more space rather than shrinking
     the box. The JS equaliser still grows it if a stage overruns. */
  min-height: 830px;
}

/* The other sections on the page run to 1280px; only this box was inset by the
   section padding, which cost the sidebar the 640px the row text is sized for. */
#stages { padding-left: 0; padding-right: 0; }


.stages-list {
  border-right: 1px solid var(--stage-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stages-head { padding: 32px 34px; }
.stages-head .section-label { margin-bottom: 10px; }
.stages-head h2 {
  font-size: 28px;
  line-height: 1.15;
  margin: 0;
}

.stage-item {
  padding: 24px 34px;
  border-top: 1px solid var(--stage-border);
  font-family: var(--font-mono);
  font-size: 24px;
  color: #9c8c78;
  cursor: pointer;
  background: none;
  width: 100%;
  text-align: left;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

.stage-item.active {
  color: #2c2416;
  font-weight: 700;
}

.stage-panel {
  padding: 0 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.stage-panel h3 {
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
}

.stage-panel p {
  color: #6b5c4a;
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
}

/* Below the design width the box needs its inset back, and the 24px rows no
   longer fit the sidebar. The longest label across the four case studies is 38
   monospace characters, i.e. 22.8em, and the sidebar offers (50vw - 108px), so
   this is the largest size that still sets every label on one line. */
@media (max-width: 1359px) {
  #stages { padding-left: 40px; padding-right: 40px; }
  .stage-item { font-size: clamp(15px, calc(2.1vw - 4.5px), 23px); }
}

/* Two 24px columns stop being readable before the site's own 900px breakpoint,
   so the stages box stacks earlier than the rest of the page. */
@media (max-width: 1000px) {
  .stages { grid-template-columns: 1fr; min-height: 0; }
  .stages-list { border-right: none; }
  .stage-item { font-size: 16px; }
  .stage-panel { padding: 32px 34px; }
}

.stage-thumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0;
}

.stage-thumb {
  width: 64px;
  height: 56px;
  background: var(--border);
  object-fit: cover;
  object-position: center;
  border-radius: 3px;
  flex-shrink: 0;
  border: none;
  display: block;
}

img.stage-thumb[data-full] { cursor: pointer; }

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(28, 23, 18, 0.9);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 40px 92px;
}
.lightbox.single { padding: 40px; }
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.lightbox-close {
  position: absolute;
  top: 24px;
  right: 32px;
  background: none;
  border: none;
  color: #f1ece0;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

/* The lightbox shares the edge-band geometry defined with .carousel-arrow and
   overrides only the palette: a dark pill on the scrim instead of a cream one
   on the page. */
.lightbox-arrow {
  color: #f1ece0;
  font-size: 42px;
  font-weight:bold;
}
.lightbox-arrow::before {
  width: 64px;
  height: 64px;
  border-color: rgba(241, 236, 224, 0.35);
  background: rgba(28, 23, 18, 0.55);
  box-shadow: none;
}
.lightbox-arrow:hover::before { background: rgba(28, 23, 18, 0.85); }
.lightbox.single .lightbox-arrow { display: none; }

/* Pins the page while the lightbox is open; js/main.js restores the offset. */
body.scroll-locked {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

.pager span:focus-visible,
.shipped-image:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.lightbox-close:focus-visible {
  outline: 2px solid #f1ece0;
  outline-offset: 3px;
}

/* The arrow's hit area is a full-height band, so outlining the button itself
   would draw a tall rectangle down the side of the picture. Ring the pill the
   reader can actually see instead. */
.carousel-arrow:focus-visible,
.lightbox-arrow:focus-visible { outline: none; }
.carousel-arrow:focus-visible::before {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.lightbox-arrow:focus-visible::before {
  outline: 2px solid #f1ece0;
  outline-offset: 3px;
}

.stage-thumb-caption {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.35;
}

/* What made this work */
.made-this-work {
  display: flex;
  max-width: 1280px;
  margin: 0 auto;
  padding: 70px 0 70px 40px;
}

.made-this-work-copy {
  flex: 0 0 300px;
  padding-right: 20px;
}

.made-this-work-table {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
}

/* The isometric grid from the Figma frame, on cream, replaces the flat tan
   block that sat here. */
.mtw-band {
  height: 176px;
  /* 312x180 is the grid's own repeat: the source PNG is 521x181, and those two
     extra columns put a visible seam in every tile. */
  background: #fdfaf2 url("../assets/iso-grid.webp") repeat;
  background-size: 312px 180px;
}

.principles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.principle {
  padding: 30px 40px;
  border-left: 1px solid var(--border);
}
.principle:nth-child(odd) { border-left: none; }
.principle:nth-child(3), .principle:nth-child(4) {
  border-top: 1px solid var(--border);
}

.principle h4 {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 15px;
  margin: 0 0 10px;
  font-weight: 600;
}

.principle p {
  font-size: 14.5px;
  color: #55493c;
  margin: 0;
}

/* Editorial row (Calendly at-a-glance) */
/* No border-top here. `.glance-label` already draws the rule under the bar,
   and a second one on this row rendered as a doubled line. */
.editorial-row {
  display: flex;
  max-width: 1280px;
  margin: 0 auto;
}

.editorial-block { flex: 1; padding: 40px 32px; }
.editorial-block + .editorial-block { border-left: 1px solid var(--border); }

.editorial-block .k {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 10px;
}
.editorial-block .v {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.3;
}

.editorial-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
}
.editorial-stack .editorial-block { flex: 1; padding: 20px 32px; }
.editorial-stack .editorial-block + .editorial-block { border-left: none; border-top: 1px solid var(--border); }

/* Context & Problem */
.context-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  max-width: 1280px;
  margin: 0 auto;
}

.context-visual {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(44, 36, 22, 0.05) 0,
    rgba(44, 36, 22, 0.05) 1px,
    transparent 1px,
    transparent 13px
  );
  border-right: 1px solid var(--border);
}

/* #FDFAF2 is the Figma value for this card; --card-bg (#f2ede1) read as a
   grey panel against the striped ground. */
/* Figma node 385:61320: the card is #FDFAF2, padded 96px all round, and its
   body is Geist 18px/1.6 in #6B5C4A. */
.context-copy { background: #fdfaf2; padding: 96px; }
.context-copy h2 { font-family: var(--font-serif); font-weight: 400; font-size: 28px; margin: 0 0 20px; }
.context-copy p { color: #6b5c4a; font-size: 18px; line-height: 1.6; margin-bottom: 20px; }
.context-copy strong { color: var(--text); }

/* Context & Problem — single column variant */
.context-single {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(44, 36, 22, 0.05) 0,
    rgba(44, 36, 22, 0.05) 1px,
    transparent 1px,
    transparent 13px
  );
  padding: 60px 40px;
}

.context-single .context-copy {
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid var(--border);
}

/* Before / after compare table (Results) */
.compare-table {
  border: 1px solid var(--border-dark);
  max-width: 1280px;
  margin: 24px auto 0;
}

.compare-head { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border-dark); }
.compare-head span {
  font-family: var(--font-mono);
  font-size: 20px;
  text-transform: uppercase;
  color: #f1ece0;
  padding: 22px 34px;
}
.compare-head span:first-child { border-right: 1px solid var(--border-dark); }

.compare-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border-dark); }
.compare-row:last-child { border-bottom: none; }

.compare-cell { display: flex; gap: 12px; align-items: flex-start; padding: 24px; }
.compare-cell:first-child { border-right: 1px solid var(--border-dark); }

.compare-cell .icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; }
.compare-cell.before .icon { color: #9c8c78; }
.compare-cell.after .icon { color: var(--accent); }

.compare-cell p { margin: 0; font-size: 15.5px; line-height: 1.55; color: #f1ece0; }
.compare-cell strong { color: var(--accent); font-weight: 600; }

/* Impact (dark, 3-col) */
.impact-dark { background: var(--bg-dark); padding-bottom: 1px; }

.impact-head {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 40px 24px;
  border-bottom: 1px solid var(--border-dark);
}
.impact-head .section-label { margin-bottom: 8px; }
.impact-head h2 { font-family: var(--font-serif); font-weight: 400; font-size: 28px; color: #f1ece0; margin: 0; }

.impact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1280px;
  margin: 0 auto;
}

.impact-col { border-left: 1px solid var(--border-dark); }
.impact-col:first-child { border-left: none; }

.impact-fill {
  height: 90px;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.05) 0,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px,
    transparent 11px
  );
  border-top: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
}

.impact-col-body { padding: 32px; }
.impact-col-body h4 {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  color: #f1ece0;
  margin: 0 0 14px;
}
.impact-col-body p { font-size: 15.5px; color: #cfc6b6; line-height: 1.6; margin: 0; }

/* ---- Responsive ---- */
/* The frame's 64px side padding assumes the frame's own cell widths, which are
   wider than the ones this grid produces. Below 1440 it takes more room than
   the number has to spare. */
@media (max-width: 1440px) {
  .stat-row.three .stat-box { padding: 32px; }
  .shipped-image{padding: 64px 0px;}
}

/* Tablet. The page ran the full desktop layout at desktop values all the way
   down to 900px, and the 901-1200px band is where that hurt: the heading ran
   to five lines and "What made this work" gave a quarter of the screen to a
   two-line title. */
@media (max-width: 1200px) {
  .detail-hero-copy h1 { font-size: 56px; }

  .stat-row:not(.three) .stat-box:first-child .label { font-size: 20px; }
  .stat-box .label { font-size: 16px; }
  .stat-box .sub { font-size: 16px; }

  .made-this-work { flex-direction: column; padding: 56px 40px; gap: 24px; }
  .made-this-work-copy { flex: 1; padding-right: 0; }
  .shipped-image{padding: 42px 0px;}
}

@media (max-width: 900px) {
  .shipped-image{padding: 0px 0px;}
  .project-grid { grid-template-columns: 1fr; }
  .detail-hero { grid-template-columns: 1fr; }
  .detail-hero-image { aspect-ratio: 4 / 3; }
  .glance-grid { grid-template-columns: repeat(2, 1fr); }
  .glance-item { border-left: none; border-top: 1px solid var(--border); }
  .stat-row, .stat-row.three { grid-template-columns: 1fr; }
  .stat-fill, .results-header-fill { display: none; }
  .results-header-copy { flex: 1; border-right: none; }
  .stages { grid-template-columns: 1fr; }
  .stages-list { border-right: none; }
  #stages { padding-left: 20px; padding-right: 20px; }
  .stages-head { padding: 24px 20px; }
  .stage-item { padding: 18px 20px; font-size: 16px; }
  .stage-panel { padding: 28px 20px; }
  .stage-panel h3, .stage-panel p { font-size: 16px; }
  .made-this-work { flex-direction: column; padding: 40px; gap: 20px; }
  .made-this-work-copy { flex: 1; padding-right: 0; }
  .principles-grid { grid-template-columns: 1fr; }
  .principle:nth-child(odd) { border-left: 1px solid var(--border); }
  .principle:nth-child(n+2) { border-top: 1px solid var(--border); }
  .site-footer { flex-direction: column; gap: 20px; }
  .hero h1 { font-size: 40px; }
  .editorial-row { flex-direction: column; }
  .editorial-block + .editorial-block { border-left: none; border-top: 1px solid var(--border); }
  .editorial-stack { border-left: none; }
  .context-section { grid-template-columns: 1fr; }
  .context-copy { padding: 50px 30px; }
  .context-visual { min-height: 200px; }
  .context-single { padding: 40px 20px; }
  .context-single .context-copy { padding: 40px 24px; }
  .compare-head, .compare-row { grid-template-columns: 1fr; }
  .compare-head span:first-child, .compare-cell:first-child { border-right: none; border-bottom: 1px solid var(--border-dark); }
  .impact-grid { grid-template-columns: 1fr; }
  .impact-col { border-left: none; border-top: 1px solid var(--border-dark); }
  .impact-col:first-child { border-top: none; }

  .site-header { padding: 20px 24px; position: relative; }
  .logo-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    margin-right: 8px;
  }
  .logo { font-size: 22px; }
  .mobile-menu-btn { display: flex; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 8px 24px 16px;
    z-index: 10;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 10px 0; border-top: 1px solid var(--border); }
  .site-nav a:first-child { border-top: none; }

  /* The band keeps its width; only the pill inside it shrinks. */
  .carousel-arrow { font-size: 20px; }
  .carousel-arrow::before { width: 36px; height: 36px; }
  .shipped-caption-inner { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 24px; }
  /* 16x20px numbers are too small to tap; pad them out to 44px. */
  .pager { flex-wrap: wrap; gap: 4px; }
  .pager span {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .lightbox { padding: 20px 56px; }
  .lightbox.single { padding: 20px; }
  .lightbox-arrow { font-size: 22px; }
  .lightbox-arrow::before { width: 40px; height: 40px; }

  .detail-hero-copy h1 { font-size: 44px; }
  .detail-hero-copy p { font-size: 16px; }

  /* The desktop scale puts "+4-10%" onto two lines in a 309px cell. */
  .stat-box .big.white { font-size: 84px; }
  .stat-box .big { font-size: 60px; }
  .stat-row:not(.three) .stat-box:first-child .label { font-size: 15px; }
  .stat-box .label { font-size: 13px; letter-spacing: 0.04em; }
  .stat-box .sub { font-size: 15px; }
  .stat-box,
  .stat-row.three .stat-box { padding: 24px; min-height: 0; }
  .results { padding: 40px 20px; }
  .results-header-copy { padding: 24px; min-height: 0; }

  /* The picture can never be wider than the screen here, so give it the space
     the 42px band was taking and keep more of it tappable to open the
     lightbox, which is where a phone actually reads these screenshots. */
  .carousel-full { --carousel-pad: 16px; --carousel-edge: 12%; }
  .carousel-arrow { min-width: 44px; }
}

@media (max-width: 600px) {
  .detail-hero-copy h1 { font-size: 36px; }
}