/* ---------- Case study pages (projects/*.html) ---------- */
/* Loaded after style.css, so it shares the fonts, grid tokens, blue backdrop, canvas colour and
   dashed seams. Unlike the homepage, the canvas here grows with its content and the page scrolls.
   Layout: the 1440 canvas with the 12-column grid (60px margin, 20px gutter). Below the hero, the
   chapter list is a sticky rail in columns 1–2 and the story runs in columns 3–12.
   The project's own palette (from its style guide) is kept in --cs-* tokens so the next case study
   can swap it. */
:root {
  /* California Digital Driver's License style guide (EIII Proj. 1 > Case Study, slide 21) */
  --cs-green: #52774e;
  --cs-butter: #fff5b2;
  --cs-cream: #fffff5;
  --cs-ink: #212120;

  /* journal-page.svg colours */
  --cs-paper: #fffdf6;
  --cs-tape: #f8e44d;

  --cs-muted: #6b6b66;
  --cs-rule: #1a1a1a;
  --cs-placeholder: #ecebe4;
}

.cs {
  position: relative;
  max-width: var(--canvas-width);
  margin-inline: auto;
  padding: 32px var(--grid-margin) 120px;
  color: var(--cs-ink);
  font-size: 20px;
  line-height: 1.55;
}

.cs a {
  color: inherit;
}

.cs strong {
  font-weight: 700;
}

/* A 10-column grid for the story column (columns 3–12 of the page grid). */
.cs-cols {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
}

/* ---------- Top bar ---------- */
.cs-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
}

.cs-top__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  border: 2px solid var(--cs-rule);
  border-radius: 999px;
  color: var(--cs-ink);
  text-decoration: none;
  background: var(--cs-paper);
}

.cs-top__back svg {
  width: 18px;
  height: 18px;
}

.cs-top__back:hover {
  background: var(--cs-butter);
}

/* In the top bar, the back link is plain text like the breadcrumb opposite it: same Instrument
   Sans Bold 16px and grey, blue on hover. */
.cs-top > .cs-top__back {
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--cs-muted);
}

.cs-top > .cs-top__back svg {
  width: 16px;
  height: 16px;
}

.cs-top > .cs-top__back:hover {
  color: var(--color-nav-current);
}

.cs-top__crumbs {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--cs-muted);
}

.cs-top__crumbs li + li::before {
  content: "/";
  margin-right: 10px;
}

.cs-top__crumbs a {
  text-decoration: none;
}

.cs-top__crumbs a:hover {
  color: var(--color-nav-current);
}

.cs-top__crumbs [aria-current="page"] {
  color: var(--color-nav-current);
}

/* ---------- Hero ---------- */
.cs-hero {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  align-items: start;
  padding-top: 96px;
}

.cs-hero__text {
  grid-column: 1 / 9;
}

.cs-eyebrow {
  margin: 0 0 24px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-green);
}

.cs-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(72px, 8.9vw, var(--typography-size-xxl));
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.cs-hero__title em {
  font-style: italic;
  text-transform: none;
}

.cs-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.cs-tag {
  padding: 6px 14px;
  border: 1.5px solid var(--cs-rule);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
}

/* The project details, written on a taped journal page (assets/images/journal-page.svg). */
.cs-hero__card {
  grid-column: 9 / 13;
  justify-self: end;
  margin-top: 8px;
  transform: rotate(2deg);
}

/* ---------- Journal page card ---------- */
/* The SVG is 197 × 284 with the tape across the top 30px. aspect-ratio keeps it from stretching;
   the padding (a share of the card's width, set with --card-w) keeps text clear of the tape and
   the hand-drawn edge. */
.journal-card {
  --card-w: 320px;
  width: var(--card-w);
  aspect-ratio: 197 / 284;
  padding: calc(var(--card-w) * 0.22) calc(var(--card-w) * 0.11) calc(var(--card-w) * 0.1);
  background: url("../images/journal-page.svg") center / 100% 100% no-repeat;
  font-size: 17px;
  line-height: 1.45;
}

.journal-card h3 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
}

.journal-card ul {
  margin: 0;
  padding-left: 1.1em;
}

.journal-card li + li {
  margin-top: 6px;
}

.cs-meta {
  display: grid;
  gap: 12px;
  margin: 0;
}

.cs-meta dt {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-muted);
}

.cs-meta dd {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
}

/* ---------- Header banner ---------- */
/* Figma "header-id" (2202:218): a 1248 × 360 pink (#ef5fa0) box with 48px rounded corners and a
   textured, hand-drawn black outline (header-box.png: the box rendered from Figma at 3×; its
   outline overhangs the box by 1.25px). Inside: the "landscape_banner" (ground line, ten redwoods
   and the bear, black, the whole group at 10% opacity), the white title block at (48, 91), and the
   phones image at (700.66, 1.93), 470.78 wide. It spans the full page column, so its edges line
   up with the "projects" button and the breadcrumb above, and everything scales evenly with it:
   --u is one Figma pixel at the banner's current size, and positions are Figma's x/y. */
.cs-banner {
  position: relative;
  aspect-ratio: 1248 / 360;
  margin-top: 80px;
  container-type: inline-size;
}

.cs-banner > * {
  --u: calc(100cqi / 1248);
  position: absolute;
  max-width: none;
}

.cs-banner__box {
  left: calc(var(--u) * -1.25);
  top: calc(var(--u) * -1.25);
  width: calc(var(--u) * 1251);
  height: calc(var(--u) * 363);
}

/* The landscape is faded as one layer (10%), as in Figma: everything in it is drawn solid first,
   so overlapping trees don't get darker and the bear covers what's behind it. */
.cs-banner__landscape {
  inset: 0;
  opacity: 0.1;
}

.cs-banner__landscape > * {
  position: absolute;
  max-width: none;
}

/* Vector 32 at y 289 (the SVG overhangs its 22px box by 2px for the stroke). */
.cs-banner__line {
  left: 0;
  top: calc(var(--u) * 287.007);
  width: calc(var(--u) * 1248.23);
  height: calc(var(--u) * 25.994);
}

/* bear at (494.75, 215). Its SVG is the black bear with a pink band around it, which hides the
   trees and line behind it once the group is faded. */
.cs-banner__bear {
  left: calc(var(--u) * 494.751);
  top: calc(var(--u) * 215);
  width: calc(var(--u) * 217.103);
  height: calc(var(--u) * 117.23);
}

/* redwood_images01: one tree image cropped (and stretched) exactly as each Figma layer does. */
.cs-banner__tree {
  left: calc(var(--u) * var(--x));
  top: calc(var(--u) * var(--y));
  overflow: hidden;
}

.cs-banner__tree img {
  position: absolute;
  left: 0;
  top: 0;
  width: 367.35%;
  height: 100%;
  max-width: none;
}

.cs-banner__tree--a     { width: calc(var(--u) * 100.536); height: calc(var(--u) * 218.728); }
.cs-banner__tree--small { width: calc(var(--u) * 88.135);  height: calc(var(--u) * 191.754); }

.cs-banner__tree--edge  { width: calc(var(--u) * 75);      height: calc(var(--u) * 219); }
.cs-banner__tree--edge img { left: -34.67%; top: 0.01%; width: 492.43%; height: 99.88%; }

.cs-banner__tree--tall  { width: calc(var(--u) * 123.051); height: calc(var(--u) * 283.122); }
.cs-banner__tree--tall img { left: 0.39%; top: -12.47%; width: 367.1%; height: 112.43%; }

/* sidebyside_wGlass 3: a 470.78 × 356.15 box showing the phones image cropped as in Figma. */
.cs-banner__phones {
  left: calc(var(--u) * 700.66);
  top: calc(var(--u) * 1.93);
  width: calc(var(--u) * 470.78);
  height: calc(var(--u) * 356.15);
  overflow: hidden;
}

.cs-banner__phones img {
  position: absolute;
  left: -6.73%;
  top: 0;
  width: 113.46%;
  height: 100%;
  max-width: none;
}

/* Instrument Sans, white: "case study" Regular 20 (lowercase), the title Bold 40, the line
   under it Regular 20; 24px apart, each trimmed to cap height and baseline as in Figma. */
.cs-banner__text {
  left: calc(var(--u) * 48);
  top: calc(var(--u) * 91);
  width: calc(var(--u) * 456.39);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 24);
  color: #fff;
  font-family: var(--font-sans);
  line-height: 1.2;
}

.cs-banner__text > * {
  margin: 0;
  text-box: trim-both cap alphabetic;
}

.cs-banner__eyebrow {
  font-size: calc(var(--u) * 20);
  font-weight: 400;
  text-transform: lowercase;
}

.cs-banner__title {
  font-size: calc(var(--u) * 40);
  font-weight: 700;
}

.cs-banner__sub {
  font-size: calc(var(--u) * 20);
  font-weight: 400;
  white-space: nowrap;
}

/* ---------- Contents ---------- */
.cs-contents {
  margin-top: 120px;
  padding: 40px 0;
  border-block: 2px dashed var(--cs-rule);
}

.cs-contents h2 {
  margin: 0 0 32px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 1;
  text-transform: uppercase;
}

.cs-contents__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-contents__chapter > a {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  text-decoration: none;
}

.cs-contents__chapter > a span {
  color: var(--cs-green);
  margin-right: 8px;
}

.cs-contents__chapter ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: 1.9;
}

.cs-contents__chapter ul a {
  text-decoration: none;
}

.cs-contents a:hover {
  color: var(--color-nav-current);
}

/* ---------- Body: sticky rail + story ---------- */
.cs-body {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  margin-top: 120px;
}

.cs-rail {
  grid-column: 1 / 3;
}

.cs-rail ol {
  position: sticky;
  top: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
}

.cs-rail li + li {
  margin-top: 14px;
}

.cs-rail a {
  display: flex;
  gap: 8px;
  color: var(--cs-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.cs-rail a span {
  min-width: 22px;
}

.cs-rail a:hover,
.cs-rail a[aria-current="true"] {
  color: var(--color-nav-current);
}

.cs-story {
  grid-column: 3 / 13;
}

/* ---------- Chapters ---------- */
.cs-chapter + .cs-chapter {
  margin-top: 160px;
}

/* Chapter opener, like the deck's section slides: big uppercase serif with the poppy field. */
.cs-chapter__head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 300px;
  padding-bottom: 24px;
  border-bottom: 2px dashed var(--cs-rule);
}

.cs-chapter__num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  color: var(--cs-green);
}

.cs-chapter__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 104px;
  line-height: 0.9;
  text-transform: uppercase;
}

.cs-chapter__art {
  width: 420px;
  margin-bottom: -26px;
  pointer-events: none;
}

/* ---------- Blocks (one per slide or pair of slides) ---------- */
.cs-block {
  margin-top: 96px;
  row-gap: 32px;
  align-items: start;
}

.cs-block__label {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
}

.cs-block__label small {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-muted);
}

.cs-text {
  grid-column: 1 / 6;
}

.cs-text--wide {
  grid-column: 1 / 8;
}

.cs-text > :first-child {
  margin-top: 0;
}

.cs-text p {
  margin: 0 0 1em;
}

.cs-text h4 {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 20px;
}

.cs-text ul,
.cs-text ol {
  margin: 0 0 1em;
  padding-left: 1.2em;
}

.cs-text li + li {
  margin-top: 6px;
}

/* Wireframe callouts: numbered to match the red dots on the wireframes. */
.cs-numbered {
  padding: 0;
  list-style: none;
  counter-reset: callout;
}

.cs-text .cs-numbered {
  padding-left: 0;
}

.cs-numbered li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  counter-increment: callout;
}

.cs-numbered li::before {
  content: counter(callout);
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e05a5a;
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  transform: translateY(-2px);
}

.cs-media {
  grid-column: 6 / 11;
  margin: 0;
}

.cs-media--full {
  grid-column: 1 / -1;
}

.cs-media img {
  width: 100%;
  height: auto;
}

.cs-media figcaption,
.cs-caption {
  margin-top: 12px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  color: var(--cs-muted);
  text-align: center;
}

/* ---------- Pull quote (Project Goal) ---------- */
.cs-goal {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 1.12;
}

.cs-goal p {
  margin: 0;
}

.cs-goal p + p {
  margin-top: 32px;
}

.cs-goal strong {
  font-weight: 400;
  font-style: italic;
  color: var(--cs-green);
}

/* ---------- Problems / Opportunities: two taped journal pages ---------- */
.cs-pages {
  grid-column: 1 / -1;
  display: flex;
  gap: 60px;
  justify-content: flex-start;
}

.cs-pages .journal-card {
  --card-w: 340px;
  flex: none;
  font-size: 20px;
}

.cs-pages .journal-card:first-child {
  transform: rotate(-2deg);
}

.cs-pages .journal-card:nth-child(2) {
  transform: rotate(1.5deg) translateY(24px);
}

/* ---------- Pros / cons (physical ID) ---------- */
.cs-proscons {
  display: grid;
  gap: 20px;
}

.cs-proscons > div {
  padding: 20px 24px;
  border-radius: 20px;
  background: var(--cs-paper);
  border: 1.5px solid var(--cs-rule);
}

.cs-proscons h4 {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cs-proscons p {
  margin: 0;
}

/* ---------- Taped photos (sketches) ---------- */
.cs-sketches {
  grid-column: 6 / 11;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 24px;
  margin: 0;
}

.cs-sketches .taped:first-child {
  grid-column: 1 / -1;
  width: 78%;
  justify-self: center;
}

.taped {
  position: relative;
  margin: 0;
  padding: 10px;
  background: #fff;
  box-shadow: 0 2px 0 var(--cs-rule), 0 0 0 1.5px var(--cs-rule);
  border-radius: 4px;
}

.taped::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 96px;
  height: 26px;
  background: var(--cs-tape);
  opacity: 0.9;
  transform: translateX(-50%) rotate(-3deg);
  clip-path: polygon(3% 0, 97% 6%, 100% 50%, 96% 100%, 2% 94%, 0 50%);
}

.taped:nth-child(2) { transform: rotate(-2.5deg); }
.taped:nth-child(3) { transform: rotate(2deg); }

/* ---------- Keyword chips (inspiration boards) ---------- */
.cs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-chips li {
  margin: 0 !important;
}

/* ---------- Style guide ---------- */
.cs-type-specimens {
  grid-column: 1 / 6;
  display: grid;
  gap: 20px;
  margin: 0;
}

.cs-type-specimens div {
  padding-bottom: 20px;
  border-bottom: 1.5px dashed var(--cs-rule);
}

.cs-type-specimens dt {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-muted);
}

.cs-type-specimens dd {
  margin: 4px 0 0;
}

.cs-swatches {
  grid-column: 6 / 11;
}

.cs-swatches h4 {
  margin: 0 0 16px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-muted);
}

.cs-swatches ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-swatches li span {
  display: block;
  aspect-ratio: 1;
  border-radius: 20px;
  border: 1.5px solid var(--cs-rule);
}

.cs-swatches li code {
  display: block;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
}

.cs-swatches__art {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
}

.cs-swatches__art img {
  width: 48%;
}

/* ---------- Rows of phones ---------- */
.cs-phones {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-phones li {
  flex: 1;
  max-width: 200px;
}

.cs-phones--pair {
  grid-column: 6 / 11;
  justify-content: center;
  gap: 40px;
}

.cs-phones--pair li {
  max-width: 240px;
}

/* Animated prototype: one phone with a play button over it. */
.cs-prototype {
  grid-column: 6 / 11;
  justify-self: center;
  width: 280px;
  margin: 0;
}

.cs-prototype .iphone__screen::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--cs-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fffff5'/%3E%3C/svg%3E") center / 40px no-repeat;
  transform: translate(-50%, -50%);
}

/* ---------- Reflection ---------- */
.cs-next {
  grid-column: 7 / 11;
  justify-self: end;
  transform: rotate(2deg);
}

/* ---------- End ---------- */
.cs-end {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 200px;
  text-align: center;
}

.cs-end__art {
  width: 520px;
}

.cs-end__title {
  margin: -40px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 120px;
  line-height: 1;
}

.cs-end .cs-top__back {
  margin-top: 40px;
}

/* ---------- iPhone 16 mockup ---------- */
/* A blank iPhone 16 (screen 393 × 852 pt) drawn in CSS, sized by its container's width. To show a
   real screen, put an <img> inside .iphone__screen; the placeholder label hides itself.
   Proportions from the iPhone 16: body 71.6 × 147.6 mm, ~2.2 mm black border, Dynamic Island
   about a third of the screen width. */
.iphone {
  container-type: inline-size;
  position: relative;
  width: 100%;
}

.iphone__body {
  position: relative;
  padding: 4.2cqw;
  border-radius: 17cqw;
  background: #1c1c1e;
  box-shadow:
    0 0 0 1.2cqw #c7c7cc,
    0 0 0 1.6cqw #8e8e93,
    0 3cqw 6cqw rgb(0 0 0 / 0.18);
}

/* Side buttons: action + volume on the left, side button and camera control on the right. */
.iphone__body::before,
.iphone__body::after {
  content: "";
  position: absolute;
  width: 1.6cqw;
  border-radius: 1cqw;
  background: #8e8e93;
}

.iphone__body::before {
  left: -2.8cqw;
  top: 22%;
  height: 7%;
  box-shadow: 0 13cqw 0 #8e8e93, 0 30cqw 0 #8e8e93;
}

.iphone__body::after {
  right: -2.8cqw;
  top: 30%;
  height: 11%;
  box-shadow: 0 48cqw 0 -0.2cqw #8e8e93;
}

.iphone__screen {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 393 / 852;
  border-radius: 13cqw;
  overflow: hidden;
  background: var(--cs-placeholder);
}

.iphone__screen img,
.iphone__screen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dynamic Island */
.iphone__screen::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 3cqw;
  left: 50%;
  width: 31cqw;
  height: 9cqw;
  border-radius: 999px;
  background: #000;
  transform: translateX(-50%);
}

.iphone__label {
  padding: 0 12cqw;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: max(11px, 6.4cqw);
  line-height: 1.3;
  color: #9a998f;
  text-align: center;
}

.iphone__screen:has(img, video) .iphone__label {
  display: none;
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}