/* ==========================================================================
   bulluraj mutum Portfolio Layout (Refined Editorial)
   ========================================================================== */

/* Design Tokens & Reset */
:root {
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-text-secondary: #555555;
  --color-text-tertiary: #6f6f6f;  /* 5.02 on --color-bg, 4.61 on --color-surface */
  --color-highlight: #c2410c;  /* the one orange: links, hovers, active states */
  --color-surface: #f5f5f5;
  --color-success: #16a34a;
  --color-placeholder: #e5e5e5;
  --color-border: #e5e5e5;
  --color-accent: #c2410c;
  --font-primary: "Helvetica Neue", Helvetica, Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Type system: a display serif for big titles, Helvetica for text, a mono for labels and numbers. */
  --font-display: "Instrument Serif", "Bodoni 72", Didot, Georgia, serif;
  --font-mono: "Space Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  --radius-photo: 0px;
  /* Hard 90° corners */
  --page-padding-x: clamp(24px, 4.5vw, 64px);
  --page-padding-y: clamp(12px, 1.5vw, 24px);
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}


html.force-dark,
body.force-dark {
  --color-bg: #050505;
  --color-text: #f5f5f7;
  --color-text-secondary: #a0a0a0;
  --color-text-tertiary: #8a8a8a;  /* 5.53 on --color-bg, 5.04 on --color-surface (was #666666 = 3.33/3.03) */
  --color-highlight: #ff6a33;
  --color-surface: #1a1a1a;
  --color-success: #22c55e;
  --color-placeholder: #2a2a2a;
  --color-border: #2a2a2a;
  --color-accent: #ff6a33;
  background-color: #050505;
}

body.force-light {
  --color-border: #e5e5e5;
  --color-accent: #c2410c;
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-text-secondary: #555555;
  --color-text-tertiary: #6f6f6f;  /* 5.02 on --color-bg, 4.61 on --color-surface */
  --color-highlight: #c2410c;  /* the one orange: links, hovers, active states */
  --color-surface: #f5f5f5;
  --color-success: #16a34a;
  --color-placeholder: #e5e5e5;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Screen-reader-only. For headings the design does not show but the document
   outline needs — a page with no h1 is unlabelled for assistive tech. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The UA default focus ring is a thin dark outline — invisible against the
   dark theme's surfaces. This one is drawn in the text colour with an
   offset gap, so it reads on any background. :focus-visible keeps it off
   mouse clicks. */
:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Rounded controls keep their own silhouette. */
:where(.theme-toggle-pill, .section-fab, .project-badge):focus-visible {
  outline-offset: 4px;
  border-radius: 999px;
}

html,
body {
  width: 100%;
  min-height: 100%;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: visible;
}

.brand-name {
  font-variant: normal;
  /* Standalone control, so WCAG 2.5.8's 24px minimum applies; the text
     itself is only ~16px tall. */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Page Frame Container */
@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.canvas-container {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: var(--page-padding-y) var(--page-padding-x);
  box-sizing: border-box;
  animation: pageFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Entrance Animations */
.reveal-wrapper {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  flex-shrink: 0;
  min-width: min-content;
  padding: 0.1em;
  margin: -0.1em;
}

.reveal-text {
  display: inline-block;
  transform: translateY(110%);
  animation: revealUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes revealUp {
  0% {
    transform: translateY(110%);
  }

  100% {
    transform: translateY(0);
  }
}

.image-reveal {
  opacity: 0;
  transform: scale(0.6);
  animation: scaleUpReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.3s;
}

@keyframes scaleUpReveal {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==========================================================================
   Case Study Layout
   ========================================================================== */
.case-study-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: clamp(24px, 4vw, 48px);
}

.case-study-title {
  /* Display serif, set in caps like the Good Objects masthead. */
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7vw, 6rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.case-study-subtitle {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-width: 250px;
  text-align: right;
  margin-top: 0.5em;
  /* Optical alignment with huge text */
}

.case-study-hero {
  /* Was 90% and centred, which left the hero inset ~65px from the content
     column below it and read as misalignment. */
  width: 100%;
  aspect-ratio: 21 / 9;
  background: var(--color-placeholder);
  margin-bottom: clamp(48px, 8vw, 96px);
  border-radius: clamp(14px, 2vw, 24px);
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 18px 40px -18px rgb(0 0 0 / 28%);
}

/* A slow settle from a slight zoom reads as the image arriving, rather than
   popping in over a flat colour block. */
.case-study-hero img {
  animation: hero-settle 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes hero-settle {
  from {
    opacity: 0;
    transform: scale(1.04);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* 21:9 at 90% width is a 294x126 strip on a phone, which shrinks the
   artwork past recognition. Give it the full column and a taller frame. */


.case-study-body {
  display: flex;
  gap: clamp(32px, 6vw, 80px);
  align-items: flex-start;
  /* Flex items default to min-width: auto, so a single wide child (a scaled
     stage, a venn diagram) props the whole column open and scrolls the page
     sideways. Both columns opt out of intrinsic minimums instead. */
  min-width: 0;
}

.case-study-nav {
  position: sticky;
  top: clamp(80px, 10vw, 120px);
  width: clamp(200px, 20vw, 250px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.case-study-nav-link {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-text);
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 0.2s;
  opacity: 0.6;
}

.case-study-nav-link:hover,
.case-study-nav-link.active {
  opacity: 1;
}

/* The section you're reading is bold as well as full strength. */
.case-study-nav-link.active {
  font-weight: 700;
  color: var(--color-accent);
}

.case-study-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 64px;
  min-width: 0;
}

.case-study-section {
  scroll-margin-top: clamp(80px, 10vw, 120px);
  /* Account for sticky nav */
}

.case-study-section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.case-study-section-line {
  width: 32px;
  height: 6px;
  background-color: #3b82f6;
  border-radius: 4px;
}

.case-study-section-title {
  font-family: var(--font-primary);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text);
  letter-spacing: 0.12em;
  margin: 0;
}

.case-study-section p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: 1rem;
}

#introduction p {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


/* ==========================================================================
   Top Header Bar
   ========================================================================== */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  z-index: 10;
  margin-bottom: clamp(32px, 5vw, 64px);
}

.brand-name {
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  font-weight: 800;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -0.02em;
  line-height: 1;
}

.symbol {
  font-size: clamp(1.25rem, 1.5vw, 1.4rem);
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
  user-select: none;
}

/* ==========================================================================
   Main Content Layout
   ========================================================================== */
.main-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: clamp(40px, 8vw, 120px);
}

/* .main-content's gap is the gutter between its two side-by-side columns.
   The case study pages stack their sections into one column instead, where
   that same gutter becomes vertical and lands on top of each section's own
   margin-bottom — 163px above the hero and 211px below it at 1440. The
   margins are the intended rhythm, so the gutter is dropped here. Two
   classes so this still wins inside the 900px block below. */
.main-content.main-stacked {
  gap: 0;
}

/* Left Column: Navigation & Footer */
.left-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  max-width: 600px;
}

/* Primary Navigation */
.primary-nav {
  margin-bottom: clamp(40px, 6vw, 80px);
}

.nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(0.2rem, 0.4vw, 0.5rem);
}

.nav-link {
  font-size: clamp(2rem, 3.2vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--color-text);
  text-decoration: none;
  display: inline-block;
  transition: color var(--transition-fast);
}

.nav-link:hover {
  color: var(--color-text-secondary);
}

.nav-link.hover-red:hover {
  color: var(--color-highlight);
}

/* Cursor-following hover preview */
.hover-preview {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 999;
  transform: translate(100px, -50%) scale(0.9);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-preview img {
  display: block;
  max-width: 180px;
  max-height: 180px;
  width: auto;
  height: auto;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  object-fit: contain;
  background-color: var(--color-bg-secondary);
}

.hover-preview.is-visible {
  opacity: 1;
  transform: translate(100px, -50%) scale(1);
}

/* Bottom Footer Social Links */
.bottom-bar {
  margin-top: auto;
}

.social-list {
  list-style: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(16px, 2vw, 24px);
  flex-wrap: wrap;
}

.social-link {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.social-link:hover {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ==========================================================================
   Right Column Profile Photo & Info
   ========================================================================== */
.profile-section {
  flex-shrink: 0;
  width: clamp(320px, 35vw, 480px);
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.photo-link {
  display: block;
  text-decoration: none;
  cursor: pointer;
}

.photo-wrapper {
  width: 100%;
  border-radius: var(--radius-photo);
  overflow: hidden;
  line-height: 0;
  background-color: var(--color-surface);
}

.profile-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 308 / 344;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-photo);
}

/* Profile Info Block */
.profile-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.role-caption {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.role-caption .separator {
  color: var(--color-text-tertiary);
  font-weight: 400;
}

.description {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  font-weight: 400;
  color: var(--color-text-secondary);
  line-height: 1.4;
  max-width: 440px;
}

.availability {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-success);
  /* Professional green */
  margin-top: 8px;
}

/* ==========================================================================
   Responsive Adaptations
   ========================================================================== */


/* ==========================================================================
   Projects Gallery Grid
   ========================================================================== */
.projects-container {
  width: 100%;
  max-width: 100%;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  /* Increased spacing based on user request */
}

.project-card {
  display: flex;
  flex-direction: column;
}

.project-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--color-placeholder);
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 14px 30px -16px rgb(0 0 0 / 30%);
}

.project-image img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover zoom only where hover exists; on touch it would stick after a tap. */


.project-meta {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  font-size: clamp(0.8rem, 1vw, 0.85rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--color-text);
  line-height: 1.4;
}

.project-meta-top {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.project-meta-bottom {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  color: var(--color-text-secondary);
}

/* Award badges hang off the right edge of their card. The negative inset is
   safe while the grid has gutters either side; at one column the card runs to
   the page edge, so the narrow-screen rules below pull them back inside. */
.project-badge {
  position: absolute;
  z-index: 10;
  display: block;
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-badge img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 18px rgb(0 0 0 / 35%));
  pointer-events: auto;
}

.project-badge:hover {
  transform: scale(1.08) rotate(2deg);
}

.project-badge--ux {
  right: -24px;
  bottom: -10px;
  width: 130px;
}

.project-badge--cashew {
  right: -36px;
  bottom: 45px;
  width: 210px;
}


/* Three columns is too tight below ~1000px, one column makes each card
   ~700px on a tablet. Two columns fills that gap. */


/* ==========================================================================
   Image Asset Protection
   ========================================================================== */
img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  /* The width/height attributes that reserve layout space are presentational
     hints mapped to CSS width/height. Where a rule sets width but not height,
     that attribute height wins and stretches the image (the team polaroid
     rendered 1350px tall). Element specificity, so any rule that genuinely
     wants a height — .case-study-hero img, .project-thumb — still overrides. */
  height: auto;
}

/* Theme Toggle Pill */
.theme-toggle-pill {
  width: 46px;
  height: 26px;
  border-radius: 13px;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 3px;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  color: var(--color-text);
  transform: translateX(0);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  line-height: 1;
}

/* Specific asterisk alignment hack */
.theme-toggle-thumb span {
  position: relative;
  top: 4px;
}

html.force-dark .theme-toggle-thumb,
body.force-dark .theme-toggle-thumb {
  transform: translateX(20px);
}

/* Make images white in dark mode */
html.force-dark .theme-invert,
body.force-dark .theme-invert {
  filter: invert(1) hue-rotate(180deg);
}

/* ==========================================================================
   Hamburger Menu (mobile only, <=768px)
   ========================================================================== */

/* The trigger button — hidden on desktop */
.hamburger-btn {
  display: none;
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: var(--color-text);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  z-index: 1001;
  -webkit-tap-highlight-color: transparent;
}

/* The full-screen overlay */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: var(--color-bg);
  flex-direction: column;
  padding: var(--page-padding-y) var(--page-padding-x);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
}

.mobile-menu-overlay.is-open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

/* Top row inside overlay: brand + close */
.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 48px;
}

.mobile-menu-close {
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: var(--color-text);
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

/* Nav links inside the overlay */
.mobile-menu-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-menu-nav a {
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.04em;
  color: var(--color-text);
  text-decoration: none;
  display: block;
  transition: color var(--transition-fast);
}

.mobile-menu-nav a:hover,
.mobile-menu-nav a:active {
  color: var(--color-text-secondary);
}

/* Social links at the bottom of the overlay */
.mobile-menu-social {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: auto;
  padding-top: 40px;
}

.mobile-menu-social a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.mobile-menu-social a:hover {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Theme toggle inside the menu */
.mobile-menu-theme {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Mobile Responsive Overrides
   ========================================================================== */


/* ==========================================================================
   Case Study: narrow-screen layout
   ==========================================================================
   .main-content flips to column at 900px and switches to align-items:
   flex-start, which stops stretching its children. Without an explicit
   width the case study body then sizes to max-content — the sidebar nav's
   longest link plus the widest figure — and the page scrolls sideways.
   This breakpoint matches .main-content's so the two never disagree. */


/* ==========================================================================
   Case Study: sticky section menu (narrow screens)
   ==========================================================================
   Page-local jump list. It sits bottom-right so it never collides with the
   site hamburger in the top bar, and is built from .case-study-nav by
   assets/js/section-nav.js — the markup lives in one place per page. */
.section-fab {
  display: none;
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 6px 20px rgb(0 0 0 / 18%);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.section-fab:active {
  transform: scale(0.94);
}

.section-fab-bars {
  display: block;
  position: relative;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background-color: currentcolor;
}

/* The two outer bars are drawn off the middle one so the button needs no SVG. */
.section-fab-bars::before,
.section-fab-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background-color: currentcolor;
}

.section-fab-bars::before {
  top: -6px;
}

.section-fab-bars::after {
  top: 6px;
}

/* Toggled with visibility rather than display so the panel's slide-in
   transition actually has two frames to run between. */
.section-sheet {
  position: fixed;
  inset: 0;
  z-index: 950;
  background-color: rgb(0 0 0 / 45%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.section-sheet.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.25s ease, visibility 0s;
}

.section-sheet-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: 72vh;
  overflow-y: auto;
  padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  border-radius: 16px 16px 0 0;
  background-color: var(--color-bg);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-sheet.is-open .section-sheet-panel {
  transform: translateY(0);
}

.section-sheet-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}

.section-sheet-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.section-sheet-link {
  display: block;
  padding: 12px 10px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text);
  opacity: 0.62;
}

.section-sheet-link.active {
  opacity: 1;
  background-color: var(--color-surface);
}


/* ==========================================================================
   Case Study: narrow-screen typography
   ==========================================================================
   The case study pages set their body and card type in px inside page-level
   <style> blocks, which load after this file. These selectors are one class
   more specific so they win on source order regardless, without each page
   needing its own copy. */


/* ==========================================================================
   Case Study: more work
   ==========================================================================
   Sits after .case-study-body as a sibling, so it spans the full column
   rather than sitting under the content half. Reuses .project-card and
   .project-image from the gallery so the cards, their radius, shadow and
   hover zoom stay identical to projects.html. */
.next-projects {
  /* .main-content switches to align-items: flex-start at 900px, so without
     this the section sizes to max-content and reopens the sideways scroll. */
  width: 100%;
  margin-top: clamp(56px, 9vw, 112px);
  padding-top: clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--color-border);
}

.next-projects-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(20px, 3vw, 32px);
}

/* Same treatment as .case-study-section-title so it reads as one of the
   page's own section headings. */
.next-projects-title {
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text);
  margin: 0;
}

.next-projects-all {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.next-projects-all:hover {
  color: var(--color-accent);
}

.next-projects-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 32px);
}

.next-project {
  text-decoration: none;
  color: inherit;
}

/* ==========================================================================
   Responsive & preference overrides
   ==========================================================================
   One block per query, widest first so the narrower ones win. These were
   previously scattered (four separate 900px blocks, three 600px, two 768px)
   across the file. Rule order inside each block is unchanged. */
@media (max-width: 1000px) {
  .projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (max-width: 900px) {
  .main-content {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 48px;
  }

  .profile-section {
    width: min(100%, 400px);
  }

  .left-column {
    max-width: 100%;
  }

  .case-study-body {
    flex-direction: column;
    width: 100%;
    min-width: 0;
    gap: 0;
  }

  .case-study-content {
    width: 100%;
    min-width: 0;
    gap: 48px;
  }

  /* The sidebar is replaced by the sticky section menu below, which reuses
     these same links, so the in-flow copy would only be a duplicate. */
  .case-study-nav {
    display: none;
  }

  .case-study-header {
    flex-wrap: wrap;
    gap: 12px;
  }

  .case-study-subtitle {
    text-align: left;
    max-width: 100%;
    margin-top: 0;
  }

  /* Figures are authored at desktop widths; cap them to the column. */
  .case-study-section img,
  .case-study-section video,
  .case-study-section svg,
  .case-study-section canvas,
  .case-study-section iframe {
    max-width: 100%;
    height: auto;
  }

  .section-fab {
    display: flex;
  }

  /* Body copy is 1.2rem for a wide measure; in a 327px column that runs to
     barely six words a line. */
  .case-study-section p {
    font-size: 1.05rem;
    line-height: 1.55;
  }

  /* The intro is set in caps, which loses the word shapes that make small
     text skimmable — so it gets less tracking and a little less size. */
  #introduction p {
    font-size: 1rem;
    letter-spacing: 0.02em;
  }

  /* Ticket cards (soulka + cashew) are a fixed 260px stub with 10-11px type.
     At phone width there is room to use the whole column and get back above
     the legibility floor. */
  .ticket-style .ticket-card {
    width: 100%;
    max-width: 340px;
  }

  .ticket-style .ticket-header {
    font-size: 12px;
    letter-spacing: 0.06em;
  }

  .ticket-style .ticket-cell {
    font-size: 12.5px;
  }

  .ticket-style .ticket-cell strong {
    font-size: 14px;
  }

  .ticket-style .ticket-body p,
  .ticket-style .ticket-body p strong {
    font-size: 16px;
  }

  .mobile-menu-social a {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .project-badge--ux {
    right: 4px;
    bottom: -6px;
    width: 96px;
  }

  .project-badge--cashew {
    right: 4px;
    bottom: 24px;
    width: 140px;
  }

  /* Touch devices have no hover; the scale-up would stick after a tap. */
  .project-badge:hover {
    transform: none;
  }

  /* Show hamburger, hide desktop theme toggle in header */
  .hamburger-btn {
    display: block;
  }

  .top-bar>.theme-toggle-pill {
    display: none;
  }

  /* Projects page: fix badge overflow */
  .project-card {
    position: relative;
    overflow: visible;
  }
}

@media (max-width: 600px) {
  .case-study-hero {
    width: 100%;
    aspect-ratio: 4 / 3;
    margin-bottom: 40px;
  }

  .projects-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .next-projects-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (hover: hover) {
  .project-card:hover .project-image img {
    transform: scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-study-hero img {
    animation: none;
  }

  .project-image img {
    transition: none;
  }

  .section-sheet,
  .section-sheet-panel,
  .section-fab {
    transition: none;
  }
}

/* ==========================================================================
   Top bar, same as the home page: brand left, light/dark right, fixed,
   white text inverted against whatever scrolls underneath.
   ========================================================================== */
.top-bar.site-chrome {
  --chrome-pad: clamp(20px, 4vw, 56px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: calc(var(--chrome-pad) + 40px);
  margin: 0;
  padding: var(--chrome-pad) var(--chrome-pad) 0;
  align-items: flex-start;
  color: #fff;
  mix-blend-mode: difference;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.site-chrome > * {
  pointer-events: auto;
}

.chrome-brand {
  color: inherit;
  text-decoration: none;
}

.chrome-theme {
  margin-left: auto;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: lowercase;
  cursor: pointer;
}

.site-chrome .hamburger-btn {
  color: #fff;
  margin-left: 20px;
}

/* The bar no longer takes up space, so the page starts where it used to. */
body:has(> .site-chrome) .canvas-container {
  padding-top: calc(clamp(20px, 4vw, 56px) + 40px + clamp(16px, 3vw, 40px));
}

/* Light mode is pure white: image frames sit on white, not a grey placeholder. */
body:not(.force-dark) .case-study-hero,
body:not(.force-dark) .project-image {
  background-color: #ffffff;
}

/* Links inside case-study text use the one orange. */
.case-study-content p a,
.case-study-content li a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Award pill under a case-study subtitle (Soulka) */
.award-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
  color: var(--color-text);
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s;
}

.award-pill img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}



/* Sits just under the case-study thumbnail, pulling up into the hero's bottom margin. */
.award-row {
  margin-top: calc(18px - clamp(48px, 8vw, 96px));
  margin-bottom: clamp(48px, 8vw, 96px);
}

.award-row {
  display: flex;
  justify-content: center;
}

.award-row .award-pill {
  margin-top: 0;
  gap: 10px;
  padding: 8px 20px 8px 8px;
  font-size: 1rem;
}

.award-row .award-pill img {
  width: 36px;
  height: 36px;
}

/* Project facts: one row under the case-study thumbnail */
.project-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: calc(28px - clamp(48px, 8vw, 96px)) 0 clamp(48px, 8vw, 96px);
  padding: 20px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.project-facts div {
  min-width: 0;
}

.project-facts dt {
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.project-facts dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text);
}

/* On Soulka the award pill sits between the thumbnail and this row. */
.award-row:has(+ .project-facts) {
  margin-bottom: 28px;
}

.award-row + .project-facts {
  margin-top: 0;
}

@media (max-width: 768px) {
  .project-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Editorial case studies (desktop): full-width serif title, a mono chapter
   index across the top with a reading-progress line, numbered chapters,
   square hairline cards, and serif pull quotes.
   ========================================================================== */
.case-study-content {
  counter-reset: chapter;
}

.case-study-section-line {
  display: none;
}

.case-study-section-header {
  padding-top: 14px;
  border-top: 1px solid var(--color-text);
}

.case-study-section-title::before {
  counter-increment: chapter;
  content: counter(chapter, decimal-leading-zero) " / ";
  color: var(--color-text-tertiary);
}

.case-study-hero {
  border-radius: 0;
  box-shadow: none;
}

/* Square corners and hairlines instead of rounded, shadowed app cards.
   The paper tickets keep their tilt and shadow: they are objects, not UI. */
body .case-study-content :is(.apple-feature-card, .carousel-card, .stat-card, .persona-card, .ja-review-card,
  .showcase-card, .illustration-box, .workers-sticky-viewport, .cashewmachine-image-placeholder, .hk-figure) {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid var(--color-border);
}

body .case-study-content .apple-feature-icon {
  border-radius: 0 !important;
}

/* Pull quotes and statement panels in the display serif. */
.case-study-content blockquote,
.case-study-section p.hk-quote,
.case-study-content .pull-quote {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em !important;
}

@media (min-width: 901px) {
  /* Title runs the full width; the subtitle sits underneath as a mono label. */
  .case-study-header {
    display: block;
  }

  .case-study-title {
    font-size: clamp(3.2rem, 8.6vw, 9.5rem);
    line-height: 0.9;
  }

  .case-study-subtitle {
    max-width: none;
    text-align: left;
    margin-top: 1.1rem;
  }

  /* The left contents menu stays; each entry gets a mono chapter number. */
  .case-study-nav {
    counter-reset: navi;
  }

  .case-study-nav-link::before {
    counter-increment: navi;
    content: counter(navi, decimal-leading-zero) "\00a0\00a0";
    color: var(--color-text-tertiary);
  }

  .case-study-section {
    scroll-margin-top: calc(clamp(20px, 4vw, 56px) + 100px);
  }
}

/* Phones: the award pill fits the screen, and the Venn circles never push the page sideways while they slide in. */
.soulka-venn-container {
  overflow-x: clip;
}

@media (max-width: 480px) {
  .award-row .award-pill {
    max-width: 100%;
    font-size: 0.875rem;
  }

  .award-row .award-pill img {
    width: 30px;
    height: 30px;
  }
}