/* ==========================================================
   Case-study subpages ("web, 1st page" / "mobile, 1st page")
   Loaded in addition to styles.css — reuses .site-header,
   .timeline, .timeline-item etc. from the home page as-is so
   header + timeline placement/responsiveness stays identical.
   ========================================================== */

html {
  scroll-behavior: smooth;
}

/* .logo doubles as a link back home on subpages */
a.logo {
  display: inline-block;
}

/* ---------- Page shell ---------- */
/* Sidebar (header + back button + timeline) on the left, case-study
   content on the right. The sidebar is sticky so it stays in view
   while the (much taller) content column scrolls — this is what keeps
   "timeline and naomitan header stay fixed" true without pulling them
   out of normal, responsive document flow. */
.page-shell {
  display: flex;
  align-items: flex-start;
  gap: 96px;
  /* Top padding matches .site-header's own padding-top (56px) on the
     home page exactly, so "naomitan" sits at the same y position on
     both pages — a seamless transition when navigating between them. */
  padding: 56px 68px 56px;
}

.page-sidebar {
  /* Grows continuously with the viewport past ~1620px instead of
     jumping at one breakpoint, plateauing at 380px — same clamp()
     expression as .timeline's in styles.css, so the two stay
     pixel-identical at every width (no size jump between pages).
     Scaled down from the original 406/25vw/640 in five earlier passes
     (370/22vw/580, 330/20vw/520, 300/18vw/470, 270/16vw/420,
     245/14.5vw/380), then widened back up slightly on the minimum
     only (245 -> 300) so the longest timeline-item titles stay on
     one line instead of wrapping — see .timeline-title's
     white-space: nowrap in styles.css. */
  flex: 0 0 clamp(300px, 14.5vw, 380px);
  max-width: clamp(300px, 14.5vw, 380px);
  position: sticky;
  top: 56px;
  display: flex;
  flex-direction: column;
  /* Matches .home's own padding-top (40px) — the gap between the header's
     content bottom and the timeline's top — so the timeline lands at the
     exact same y position as it does on the home page. */
  gap: 40px;
  align-self: flex-start;
}

.page-sidebar .site-header {
  padding: 0;
}

/* ---------- Case content ---------- */
/* .case itself is now an uncapped flex item — it simply fills whatever
   row space is left between the sidebar and the browser edge. That's
   what lets .case-pagination--top (its direct child, full-width) put
   real distance between the prev/next arrows: no negative-margin
   "breakout" needed, since there's nothing here constraining the width
   to break out of. .case-content below carries the actual reading-
   column width (see below) for everything else. */
.case {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
  /* .case-pagination--top is hidden on desktop now (see below), so without
     this the title would sit flush with .page-shell's own 56px top
     padding — the exact same row as "naomitan" in the header — which reads
     as cramped against the top edge instead of settling into its own
     space. 40px matches the sidebar's own header-to-timeline gap, so the
     title drops into roughly that same rhythm instead of racing the
     header. */
  padding-top: 40px;
}

/* The actual reading column — everything in .case except the top
   pagination nav lives in here, so it keeps the original width/centering
   behavior (grows with the viewport past ~1500px, plateauing at 1040px,
   centered in .case's leftover space once it hits that cap) while
   .case-pagination--top above it is free to span .case's full width. */
.case-content {
  max-width: clamp(690px, 46vw, 1040px);
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.case-intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ---------- Case pagination (prev / next through the case studies) ----------
   Replaces the old single "back" arrow, which only ever moved backward and
   duplicated what the timeline sidebar already does on desktop. This pair
   makes the prev/next relationship explicit and labeled (project name,
   not just an icon), and loops at both ends (packaging-misc.'s "next" goes
   to the first case study, content-strategy's "prev" goes to the last) —
   there's no natural first/last here, just a personal ordering, so a dead
   end at either edge would be worse than wrapping around.
   --top is mobile-only (reversed below the 1010px breakpoint): on desktop
   it duplicated the sticky sidebar timeline's own "where am I in the
   sequence" job, just in a different visual language, and sat as an airy,
   disconnected bar above the title once it spread across .case's full
   width. Mobile has no visible timeline (hidden below 1010px), so there
   it's still the only way to move between case studies without scrolling
   all the way down. --bottom runs on every screen size: it's the one
   placement that's actually earned everywhere — the moment right after
   finishing a case study is when a reader is actually deciding what to
   read next, on desktop as much as mobile. */
.case-pagination {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

/* On desktop, this is a full-width direct child of the now-uncapped
   .case (see above) — not of the narrower .case-content — so its
   space-between layout spreads the two links across the whole sidebar-
   to-edge width. That's what puts real distance between them and clears
   each link's inward-facing end (the project title text) past
   .case-content's own edge, with no negative-margin breakout needed.
   Hidden by default (desktop) — see the mobile override below. */
.case-pagination--top {
  display: none;
}

.case-pagination-link {
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity 0.15s ease;
}

.case-pagination-link:hover {
  opacity: 0.6;
}

.case-pagination-link--next {
  flex-direction: row-reverse;
}

.case-pagination-arrow {
  flex-shrink: 0;
}

.case-pagination-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.case-pagination-text--right {
  align-items: flex-end;
  text-align: right;
}

/* Matches .timeline-role's styling exactly so this reads as the same
   "kicker label" pattern used in the sidebar, instead of introducing a
   new type style. */
.case-pagination-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #73766F;
}

/* Matches .timeline-title's styling for the same reason. */
.case-pagination-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #292B29;
}

.case-title {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 48px;
  line-height: 1.3;
  color: #000000;
  text-align: center;
}

.case-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: 'Inter', sans-serif;
  /* Matches .case-col-body's body-copy size instead of standing out at
     its own larger size. */
  font-size: 14px;
  color: #969696;
}

.case-project {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.case-project-title {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 36px;
  color: #000000;
}

.case-cols {
  display: flex;
  gap: 76px;
  align-items: flex-start;
}

.case-cols--tight {
  gap: 48px;
  align-items: flex-start;
}

.case-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Flex items default to min-width:auto (their content's intrinsic
     width), which can force a "wide" column — and the whole .case-cols
     row — wider than the space actually available and push .page-shell
     into horizontal overflow near the mobile breakpoint. min-width:0
     lets these columns (and the text/images inside them) actually
     shrink to fit. */
  min-width: 0;
}

.case-col--narrow {
  flex: 0 0 202px;
  max-width: 202px;
}

.case-col--wide {
  flex: 1 1 auto;
}

.case-col--strategy {
  flex: 0 0 229px;
  max-width: 229px;
}

.case-col--results {
  flex: 1 1 auto;
  max-width: 346px;
}

.case-col--results-full {
  max-width: 360px;
}

.case-col-title {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 20px;
  color: #000000;
}

.case-col-title a {
  text-decoration: underline;
}

.case-col-body {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #666666;
}

.case-col-list {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #666666;
  list-style: disc;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.case-social {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.case-social-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #000000;
  text-decoration: underline;
}

.case-ispy {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #000000;
}

.case-ispy-secondary {
  color: #666666;
}

.case-screenshot {
  width: 100%;
  height: auto;
  /* Without this, a flex-column parent (.case-col) falls back to the
     image's intrinsic pixel width as its automatic minimum size, which
     can force the column — and its row — wider than the available
     space instead of letting the image shrink with width:100% above. */
  min-width: 0;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.case-screenshot--yuzu {
  object-fit: cover;
  aspect-ratio: 728 / 562;
}

/* Flat variant — drops the default drop-shadow. Used on the PurpleTie
   page for every screenshot except the hero (.case-hero keeps its own
   shadow below), per an explicit request to de-emphasize the rest. */
.case-screenshot--flat {
  box-shadow: none;
}

.back-to-top {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #000000;
  text-decoration: underline;
}

/* ==========================================================
   Generic sub-heading used across page-specific sections below
   ("The Science Behind it", "About", "How") — one step down from
   .case-project-title (36px), not bold like .case-fix-label (12px).
   ========================================================== */
.case-subhead {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #000000;
}

/* ==========================================================
   "web, 2nd page" (PurpleTie) — page-specific additions.
   Reuses every .case-* class above as-is; these only cover
   content shapes that page 1 didn't need.
   ========================================================== */

.case-hero {
  /* No max-width cap: scales with .case's own width (including its
     clamp() growth on large screens) so it always spans the full
     column and stays aligned with the title/meta row above it,
     rather than stalling at its native resolution while the text
     around it keeps growing. */
  width: 100%;
  height: auto;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

/* Column images (user-flow whiteboard photo, interview quote
   bubbles) sit under their column's copy, same width as the column. */
.case-col .case-screenshot {
  margin-top: 8px;
}

/* These two are fixed-size photos in the Figma frame, not stretched to
   fill their column — capping max-width at their native pixel size
   keeps them from being upscaled (and blurred) past their own
   resolution when the column is wider than the source photo. */
.case-screenshot--userflow {
  width: 251px;
  max-width: 100%;
  aspect-ratio: 251 / 287;
  object-fit: cover;
}

.case-screenshot--quotes {
  width: 234px;
  max-width: 100%;
  aspect-ratio: 234 / 287;
  object-fit: contain;
}

/* Strip/before/after/design-system/challenges images: also full-width,
   uncapped, so they scale with .case and stay edge-aligned with the
   text above/below them — same reasoning as .case-hero above. */

.case-findings-lead {
  color: #000000;
}

.case-chips {
  display: flex;
  gap: 16px;
}

.case-chip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
  background: #F8F7F3;
  border-radius: 10px;
  padding: 14px;
}

.case-chip-emoji {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.case-chip p {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #666666;
}

/* ---------- Challenges question card ---------- */
.case-question-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #F8F7F3;
  border-radius: 10px;
  padding: 16px;
}

.case-question-mark {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: #E14434;
}

.case-question-card p {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #000000;
}

.case-fix {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-fix-label {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #000000;
}

/* ---------- Figma prototype preview / link ("Finale.") ---------- */
.case-proto {
  display: block;
  border-radius: 16px;
  background: #1C1C1C;
  padding: 10px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  transition: opacity 0.15s ease;
}

.case-proto:hover {
  opacity: 0.9;
}

.case-proto-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 10px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #C9C9C9;
}

.case-proto-bar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F24E1E;
  flex-shrink: 0;
}

.case-proto-open {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.case-proto-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 366 / 726;
  max-width: 320px;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: #0D0D0D;
}

.case-proto-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-proto-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.35);
}

/* ==========================================================
   "web, 2nd page" node in Figma / 3rd timeline item on the site —
   Athletic Game Scratch Cards (PolyPicks). Reuses every .case-*
   class above; these only cover shapes the first two pages didn't need.
   ========================================================== */

/* Hero photo has rounded corners in this frame, unlike the flush
   full-bleed hero images on the other two case studies. */
.case-hero--rounded {
  border-radius: 17px;
}

/* Survey quote above the pie chart in "The Problem" */
.case-quote {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 20px;
  color: #666666;
}

/* Fixed-width left column in "The Problem" (survey stats), same
   fixed-column pattern as .case-col--narrow / .case-col--strategy. */
.case-col--problem {
  /* Shrinkable (unlike the other fixed-width columns above) — in the
     narrow band just past the mobile breakpoint, .case itself is
     briefly narrower than 303px + the quote column's own minimum
     width, so this needs to be able to compress rather than force
     the row into overflow. */
  flex: 1 1 303px;
  max-width: 303px;
}

/* "Solution" row: fixed-width copy column ("About"/"How"), image
   column grows via the existing .case-col--wide. */
.case-cols--solution {
  gap: 26px;
  align-items: flex-start;
}

.case-col--solution-text {
  flex: 0 0 228px;
  max-width: 228px;
}

/* Numbered "How" steps — same look as .case-col-list, just decimal */
ol.case-col-list--ol {
  list-style: decimal;
}

/* 24px sub-section titles within "Execution" (Print Production /
   Marketing Campaign), one step down from .case-project-title. */
.case-subsection-title {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 24px;
  color: #000000;
}

/* Print-spec two-column row — left is prose, right is the bold spec
   sheet. No max-width cap on either side, so both grow with .case
   the same way the rest of this page's content does. */
.case-cols--specs {
  gap: 40px;
}

.case-col--spec {
  flex: 1 1 0;
  min-width: 0;
}

.case-specs-list {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #000000;
}

.case-specs-list strong {
  font-weight: 700;
}

/* Packaging Misc.'s dieline spec text is grey per its Figma frame,
   unlike PolyPicks' black print-spec list above — same class, muted
   color, so it reads consistently with the rest of the page's grey
   body copy (.case-col-body). */
.case-specs-list--muted {
  color: #666666;
}

/* Campaign chips reuse .case-chip's shape with a lighter background
   and a larger emoji, per this page's Figma frame. */
.case-chip--campaign {
  background: #EDEDED;
}

.case-chip-emoji--lg {
  font-size: 32px;
}

.case-chip p strong {
  color: #000000;
}

/* ==========================================================
   "web, 3rd page" / 4th timeline item — Packaging & Print
   (Miscellaneous). No case-meta row on this page (not part of
   its Figma frame) — .case-intro just holds the title. Reuses
   .case-project-title for both "Contents" and each section
   heading, and .case-col-body for all body copy/captions per
   the site's uniform-14px-body-text rule.
   ========================================================== */

.case-contents-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-contents-link {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 24px;
  color: #000000;
  text-decoration: underline;
  width: fit-content;
}

/* Course code / class name line above each section's description
   paragraph (.case-col-body) — bold, same size/color as the body
   copy it introduces. */
.case-course-label {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #666666;
}

/* Side-by-side box photo pairs (front/back collage sits above full
   width via .case-screenshot; this pair is the two smaller photos
   further down — one flexible, one capped at its native size). */
.case-cols--boxrow {
  gap: 32px;
  align-items: flex-start;
}

.case-col--box-wide {
  flex: 1 1 0;
  min-width: 0;
}

.case-col--box-fixed {
  flex: 0 0 250px;
  max-width: 250px;
}

/* Dieline spec row: fixed-width prose column + flexible image
   column (the image column reuses .case-col--wide as-is). */
.case-col--specs-narrow {
  flex: 0 0 178px;
  max-width: 178px;
}

/* ================================================
   Text-column stacking — narrower than the sidebar/timeline
   going mobile (below), this just stacks two-column paragraph
   rows (About/What I did, Strategy/Results, etc.) before they'd
   otherwise get squeezed. .case's own content-column width is
   designed to float down to 690px (clamp() above) and no
   narrower; once the viewport can't give it that much room,
   the side-by-side columns are forced skinnier than their
   design width, so this switches them to stacked single-column
   right at that point instead. Sidebar/timeline and heading
   sizes are untouched here — they still follow the wider
   mobile-layout breakpoint below.
   ================================================ */
@media (max-width: 1180px) {
  .case-cols {
    flex-direction: column;
    gap: 24px;
  }

  .case-cols--tight {
    align-items: stretch;
  }

  .case-col--narrow,
  .case-col--strategy,
  .case-col--results,
  .case-col--results-full,
  .case-col--problem,
  .case-col--solution-text,
  .case-col--box-fixed,
  .case-col--specs-narrow {
    max-width: none;
    flex: 1 1 auto;
  }
}

/* ================================================
   Mobile — matches "mobile, 1st page": header + back
   arrow at the top of a single scrolling column, no
   sticky sidebar and no timeline (not part of that frame).
   Raised from 940px to 1010px: the wider .page-shell gap
   (96px, for the centered back arrow) leaves too little
   room for the two-column desktop rows just above 940px,
   causing horizontal overflow — snapping to single-column
   mobile sooner avoids that cramped in-between range.
   ================================================ */
@media (max-width: 1010px) {

  .page-shell {
    flex-direction: column;
    gap: 0;
    padding: 0 30px 40px;
  }

  .page-sidebar {
    flex: 0 0 auto;
    position: static;
    max-width: none;
    width: 100%;
    gap: 16px;
  }

  .page-sidebar .site-header {
    padding: 32px 0 0;
  }

  .page-sidebar .site-header .brand {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0;
  }

  /* The timeline isn't part of the mobile case-study frame — which also
     means mobile loses its only other way to browse between case studies,
     so .case-pagination--bottom (below) turns back on to cover it. */
  .page-sidebar .timeline {
    display: none;
  }

  .case {
    padding-top: 24px;
    gap: 40px;
  }

  .case-content {
    max-width: none;
  }

  .case-pagination--top {
    display: flex;
  }

  .case-title {
    font-size: 32px;
  }

  .case-title-break {
    display: none;
  }

  /* Content-level headings all sit below .case-title (24px) on mobile —
     per "mobile, 1st page" in Figma, section headings compress to a
     single smaller size instead of keeping their desktop scale, so the
     page title reads as clearly the biggest text on the page. Sized in
     a small step-down scale so project/subsection/column headings still
     read as a hierarchy among themselves. */
  .case-project-title {
    font-size: 20px;
  }

  .case-subsection-title {
    font-size: 18px;
  }

  .case-col-title {
    font-size: 16px;
  }

  /* Meta row (company / dates / categories) — per "mobile, 1st page" in
     Figma this carries over under the title, just smaller and lighter
     than the desktop row: first item stays left, the date range centers
     in the remaining space, and the categories sit flush right (wrapping
     to two lines on their own, same as the fixed-width block in Figma). */
  .case-meta {
    gap: 12px;
  }

  .case-meta p:nth-child(2) {
    flex: 1 1 auto;
    text-align: center;
  }

  .case-meta p:nth-child(3) {
    text-align: right;
    max-width: 100px;
  }

  .case-cols {
    flex-direction: column;
    gap: 24px;
  }

  .case-cols--tight {
    align-items: stretch;
  }

  .case-col--narrow,
  .case-col--strategy,
  .case-col--results,
  .case-col--results-full,
  .case-col--problem,
  .case-col--solution-text,
  .case-col--box-fixed,
  .case-col--specs-narrow {
    max-width: none;
    flex: 1 1 auto;
  }

  /* Mobile drops the "About Azar / About YUZU" heading — the
     description paragraph runs directly under the page title. */
  .case-col-title--about {
    display: none;
  }

  .case-chips {
    flex-direction: column;
    gap: 16px;
  }

  .case-proto-frame {
    max-width: 260px;
  }
}


/* ==========================================================
   Image lightbox — see the "Image lightbox" block in script.js.
   Grey backdrop; the image sits at its natural size, capped to the
   viewport. Clicking anywhere except the image closes it.
   ========================================================== */
.is-zoomable {
  cursor: zoom-in;
}

.is-zoomable:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 3px;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(120, 120, 120, 0.97);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.lightbox[hidden] {
  display: none;
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  cursor: default;
  background: #ffffff;
}

html.lightbox-lock {
  overflow: hidden;
}

@media (max-width: 1010px) {
  .lightbox {
    padding: 12px;
  }
}