/* ====== Local @font-face ====== */
@font-face {
  font-family: "Gaya";
  src: url("fonts/gayatrial-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gaya";
  src: url("fonts/gayatrial-italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cactus Jack Alternate";
  src: url("fonts/Cactus-Jack-Alternate.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/AtkinsonHyperlegible-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/AtkinsonHyperlegible-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/AtkinsonHyperlegible-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/AtkinsonHyperlegible-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
/* ====== Base ====== */
:root{
  --bg:#ffffff;
  --text:#1a1a1a;
  --muted:#666;
  --accent:#7997b5;
  --accent-2:#dcecfc;
  --gold:#B99A5B;
  --card:#f7f7f8;
  --radius:16px;
  --shadow: 0 6px 20px rgba(0,0,0,.08);
  --maxw:1100px;
  --card-hover:#A8BBCE;

  /* 4-column grid system — full viewport width
     margin: 30px outer (left/right), gutter: 20px between columns */
  --grid-margin: 30px;
  --grid-gutter: 20px;
  --grid-columns: 4;
  --grid-maxw: 1440px; /* safety cap on very large screens */

  /* Typography */
  --font-logo: "Gaya", Georgia, serif;
  --font-display: "Cactus Jack Alternate", "Gaya", Georgia, serif;
  --font-sans: "Atkinson Hyperlegible", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ====== 4-column grid container ======
   Use on any block-level element to align its content to the page grid.
   Desktop: 4 columns. Tablet (<900px): 2 columns. Mobile (<600px): 1 column. */
.page-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  column-gap: var(--grid-gutter);
  row-gap: var(--grid-gutter);
  width: 100%;
  max-width: var(--grid-maxw);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--grid-margin);
  padding-right: var(--grid-margin);
}
@media (max-width: 899px) {
  :root { --grid-columns: 2; }
}
@media (max-width: 599px) {
  :root { --grid-columns: 1; }
}

/* Keep old .wrap working but switch it to the new grid system.
   Content inside .wrap that was previously block-flow is wrapped via
   .wrap-content (full row span) to preserve current visuals. */
.wrap{
  width: 100%;
  max-width: var(--grid-maxw);
  margin-left: auto;
  margin-right: auto;
  padding: 24px var(--grid-margin);
}

/* ====== Nav ====== */
header {
  border-bottom: 1px solid #eee;
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Nav uses the 4-column page grid:
   - logo spans columns 1-2 (left)
   - links sit on the right (columns 3-4) */
.nav {
  align-items: center;
  padding-top: 18px;
  padding-bottom: 18px;
}
.brand {
  grid-column: 1 / span 2;
  font-family: var(--font-logo);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 400;
  line-height: 1;
  color: var(--gold);
  letter-spacing: 0.5px;
}
.links {
  grid-column: 3 / span 2;
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: flex-end;
}
.links a {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.18s, border-bottom-color 0.18s;
}
.links a:hover { color: var(--gold); }
.links a.is-active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  font-weight: 600;
}

/* Tablet (2-col grid): logo col 1, links col 2 */
@media (max-width: 899px) {
  .brand { grid-column: 1 / span 1; }
  .links { grid-column: 2 / span 1; gap: 24px; }
}

.menu-toggle { display: none; }

/* Mobile (1-col): logo + toggle on same row, links collapse */
@media (max-width: 599px) {
  .nav {
    display: flex !important;
    justify-content: space-between;
    padding-left: var(--grid-margin);
    padding-right: var(--grid-margin);
    max-width: var(--grid-maxw);
    margin-left: auto;
    margin-right: auto;
  }
  .brand, .links { grid-column: auto; }
  .links { display: none; }
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 4px;
    text-decoration: none;
    line-height: 1;
  }
  .menu-toggle svg path { fill: #1a1a1a; }
}

/* (envelope icon removed from nav) */

/* ====== Hero roles tagline ====== */
.hero-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: center;
  justify-content: center;
  margin: 0 0 28px;
}
.hero-role {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent);
}
.hero-role-sep {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--accent);
  margin: 0 14px;
  letter-spacing: 0;
}

/* ====== Hero ====== */
.hero {
  width: 100%;
  max-width: var(--grid-maxw);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.hero-inner {
  /* Sit on the inner 2 columns of the 4-col grid (cols 2 & 3) on desktop.
     On smaller screens, take the full available width. */
  width: 100%;
  max-width: 820px;
  text-align: center;
}

/* Desktop-only line break (for hero headline) */
.br-desktop { display: inline; }
@media (max-width: 899px) {
  .br-desktop { display: none; }
}

/* Headline — the "who loves..." line in Cactus Jack Alternate */
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--text);
  margin: 0;
  letter-spacing: 0.5px;
}

/* Responsive: tighter min-height + padding on mobile */
@media (max-width: 899px) {
  .hero { min-height: 60vh; }
}
@media (max-width: 599px) {
  .hero { min-height: 55vh; padding-top: 40px; padding-bottom: 40px; }
  .hero-roles { margin-bottom: 22px; }
  .hero-role-sep { margin: 0 8px; }
}

/* Right col — no card background */
.hero-right {
  min-width: 200px;
}
.hero-right-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

/* Skills section — full width below hero */
.skills-section {
  width: 100%;
  max-width: var(--grid-maxw);
  margin: 0 auto;
  padding: 0 var(--grid-margin) 40px;
}
.skills-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.cta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: stretch;
}
@media (max-width: 899px) {
  .cta-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 599px) {
  .cta-grid { grid-template-columns: 1fr; }
}
.cta-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: #fff;
  border: 1px solid #e7e7e9;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  transition: border-color 0.18s, background 0.18s;
  color: var(--text);
  height: 100%;
}
.cta-link:hover { border-color: var(--accent); background: var(--accent-2); }
.cta-link .cta-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.cta-link .cta-text { display: flex; flex-direction: column; }
.cta-link .cta-title { font-family: var(--font-mono); font-weight: 400; font-size: 13px; line-height: 1.2; letter-spacing: 0.5px; text-transform: uppercase; }
.cta-link .cta-sub { font-size: 11px; color: var(--muted); line-height: 1.2; margin-top: 1px; }

/* Filter pills under My projects */
.project-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.filter-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
  width: 100%;
}
.project-filter-btn {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid #e0e0e0;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.18s ease;
}
.project-filter-btn:hover { border-color: var(--gold); color: var(--gold); }
.project-filter-btn.active { background: var(--gold); border-color: var(--gold); color: #fff; }

.pills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pill-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid #e7e7e9;
  background: var(--card);
  color: var(--text);
  line-height: 1.2;
  cursor: default;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.pill-badge.clickable { cursor: pointer; }
.pill-badge.clickable:hover { border-color: var(--gold); color: var(--gold); background: #fff; }
.pill-badge.clickable.active { background: var(--gold); border-color: var(--gold); color: #fff; }
.pill-badge.hoverable { cursor: default; }
.pill-badge.hoverable:hover { border-color: var(--gold); color: var(--gold); background: #fff; }

/* ====== Divider ====== */
.section-divider { border: none; border-top: 1px solid #eee; margin: 0; }

/* ====== Sections ====== */
section { padding: 40px 0; }
.section-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.section-title {
  font-family: var(--font-logo);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 400;
  margin: 0;
  color: var(--text);
  letter-spacing: 0.3px;
  line-height: 1.1;
}
.muted { color: var(--muted); }

/* ====== Projects grid ====== */
.grid {
  display: grid;
  gap: 18px;
  grid-auto-flow: row;
  align-items: stretch;
}
@media (max-width: 679px){ .grid{ grid-template-columns: 1fr; } }
@media (min-width:680px) and (max-width:999px){ .grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width:1000px){ .grid{ grid-template-columns: repeat(3, 1fr); } }

.card-wrap { display: block; min-width: 0; }
.card-wrap.hidden { display: none; }

.card-link { display: block; height: 100%; text-decoration: none; color: inherit; }
.card {
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  aspect-ratio: 3/4;
  position: relative;
  background: #111;
}
.thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  transition: transform 0.4s ease;
}
.card-link:hover .thumb { transform: scale(1.03); }
.card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, transparent 40%, transparent 55%, rgba(0,0,0,0.55) 100%);
  border-radius: var(--radius);
}
.card-tags {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.card-tag {
  background: rgba(255,255,255,0.92);
  color: #1a1a1a;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  line-height: 1.2;
}
/* Award-winning project badge — top-right gold square */
.card-award {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 50px;
  height: 50px;
  background: var(--gold);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}
.card-award img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  /* Force the SVG to render white regardless of its source color */
  filter: brightness(0) invert(1);
}
.card-handle {
  position: absolute;
  top: 16px;
  right: 16px;
  color: rgba(255,255,255,0.85);
  font-size: 12px;
}
.card-bottom {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.card-title {
  font-family: var(--font-logo);
  color: #fff;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.3px;
}
.card-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  color: #1a1a1a;
  transition: background 0.2s, transform 0.2s;
}
.card-link:hover .card-arrow { background: #fff; transform: scale(1.08); }

/* ====== Experiments cards ======
   Reuse the project .card / .grid skeleton (3-col desktop, etc.).
   Grey placeholder background; title + year hidden by default,
   fade in on hover via an overlay. */
.exp-card {
  background: #d8d8d8;
  cursor: pointer;
  aspect-ratio: 1 / 1;
}
/* Subtle dark overlay that becomes visible on hover */
.exp-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.exp-link:hover .exp-card-overlay,
.exp-link:focus-visible .exp-card-overlay { opacity: 1; }

/* Text container: year top-left, title bottom-left */
.exp-card-meta {
  position: absolute;
  inset: 0;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.exp-link:hover .exp-card-meta,
.exp-link:focus-visible .exp-card-meta { opacity: 1; }

/* Arrow circle pinned bottom-right of the experiment card.
   Follows the same visibility pattern as .exp-card-meta:
   hidden by default on desktop, fades in on hover; always visible on tablet/mobile. */
.exp-card-arrow {
  position: absolute;
  bottom: 16px;
  right: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.exp-link:hover .exp-card-arrow,
.exp-link:focus-visible .exp-card-arrow { opacity: 1; }

/* On tablet and mobile, show overlay, text, and arrow by default (no hover available) */
@media (max-width: 999px) {
  .exp-card-overlay { opacity: 1; }
  .exp-card-meta { opacity: 1; }
  .exp-card-arrow { opacity: 1; }
}

.exp-card-year {
  font-family: var(--font-mono);
  font-size: 14px;
  color: #fff;
  letter-spacing: 0.5px;
}
.exp-card-title {
  font-family: var(--font-logo);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 400;
  color: #fff;
  line-height: 1.15;
  letter-spacing: 0.3px;
  padding-right: 56px; /* leave room for the bottom-right arrow circle */
}

.skills-cards{display:grid; grid-template-columns:1fr; gap:12px;}
@media(min-width:600px){.skills-cards{grid-template-columns:repeat(2,1fr);}}
@media(min-width:900px){.skills-cards{grid-template-columns:repeat(4,1fr);}}
.skills-card{background:var(--card); border-radius:var(--radius); padding:20px; display:flex; flex-direction:column; gap:14px;}
.skills-card-title{font-size:14px; font-weight:700; color:var(--text);}
.skills-card-pills{display:flex; flex-wrap:wrap; gap:6px;}
.skills-card .pill-badge{font-size:12px;}
.card-handle{display:none;}

/* ====== I care about ====== */
.care-section {
  width: 100%;
  max-width: var(--grid-maxw);
  margin: 0 auto;
  padding: 0 var(--grid-margin) 48px;
}
.care-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.care-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media(min-width: 680px) {
  .care-grid { grid-template-columns: repeat(4, 1fr); }
}
.care-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px 18px;
  border: 1px solid #eeede9;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.care-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(121,151,181,0.12);
}
.care-icon {
  font-size: 22px;
  line-height: 1;
}
.care-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.care-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}
  display: none;
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
  font-size: 15px;
}
.empty-state.show { display: block; }

/* ====== Thinking ====== */
.thinking-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media(min-width:680px){ .thinking-grid { grid-template-columns: repeat(2, 1fr); } }
@media(min-width:1000px){ .thinking-grid { grid-template-columns: repeat(3, 1fr); } }

.thinking-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid #eee;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.thinking-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.thinking-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.thinking-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent);
}
.thinking-date {
  font-size: 12px;
  color: var(--muted);
}
.thinking-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}
.thinking-excerpt {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.thinking-arrow {
  font-size: 16px;
  color: var(--accent);
  align-self: flex-end;
  transition: transform 0.18s;
}
.thinking-card:hover .thinking-arrow { transform: translateX(4px); }

/* ====== Contact ====== */
.contact-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.contact-row a {
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 10px 14px;
  background: #fff;
  font-weight: 500;
  color: var(--gold);
  transition: background 0.18s, color 0.18s;
}
.contact-row a:hover { background: var(--gold); color: #fff; }

/* ====== Let's work together section ====== */
.lwt-section {
  padding: 24px 0;
}
/* Bento spans all 4 columns of the page-grid */
.lwt-bento {
  grid-column: 1 / -1;
  background: var(--gold);
  color: #fff;
  padding: 40px 44px;
  border-radius: 20px;
  box-sizing: border-box;
  position: relative;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
}
.lwt-bento:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(185, 154, 91, 0.25);
}
/* Heading + intro stacked at the top-left of the bento */
.lwt-bento-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 720px;
}
.lwt-heading {
  margin: 0;
  color: #fff;
}
.lwt-bento .contacts-intro {
  color: #fff;
  max-width: none;
  margin: 0;
}
/* CTA pinned to the bottom-right corner of the bento. Plain text + arrow. */
.lwt-cta {
  position: absolute;
  right: 44px;
  bottom: 36px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  transition: gap 0.18s, transform 0.18s;
}
.lwt-cta-arrow {
  font-size: 22px;
  line-height: 1;
  transition: transform 0.18s;
}
.lwt-cta:hover { gap: 18px; }
.lwt-cta:hover .lwt-cta-arrow { transform: translateX(4px); }
/* When hovering anywhere on the card, also animate the CTA */
.lwt-bento:hover .lwt-cta { gap: 18px; }
.lwt-bento:hover .lwt-cta-arrow { transform: translateX(4px); }

/* ====== Contacts footer ====== */
.contacts-footer {
  padding: 60px 0 32px;
  border-top: 1px solid #eee;
  background: var(--bg);
}
.contacts-grid {
  row-gap: 32px;
}

/* Left block (only block now): heading + social pills.
   Spans the full page-grid width since we have 4 pills in 2×2 layout. */
.contacts-left {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.contacts-heading {
  margin: 0 0 28px;
}

/* Intro phrase (still used inside .lwt-bento) */
.contacts-intro {
  margin: 0 0 28px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 420px;
}

/* Social pills container — 2×2 grid on desktop, row-by-row */
.contacts-socials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 20px;
  width: 100%;
}
/* Each social pill — stretches to fill its grid cell so all are same width */
.contacts-social {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 22px 12px 12px;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  transition: background 0.18s, transform 0.18s;
}
.contacts-social:hover {
  background: rgba(185, 154, 91, 0.08);
  transform: translateY(-1px);
}
/* Icon: gold filled circle, white svg inside */
.contacts-social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contacts-social-icon svg {
  width: 20px;
  height: 20px;
}
/* Text stack: name on top, handle below.
   Force text-align: left so the pill content stays left-aligned
   even when the parent column uses text-align: center (mobile). */
.contacts-social-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
}
.contacts-social-name {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.2;
}
.contacts-social-handle {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.2;
  white-space: nowrap;
}

/* Copyright spans full grid, aligns right */
.contacts-copyright {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 24px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  text-align: right;
}

/* Tablet (2-col grid) */
@media (max-width: 899px) {
  .lwt-heading, .lwt-bento { grid-column: 1 / -1; }
  .contacts-left { grid-column: 1 / -1; }
}

/* Mobile (1-col grid) */
@media (max-width: 599px) {
  .lwt-heading, .lwt-bento { grid-column: 1 / -1; }
  .lwt-bento {
    padding: 28px 24px;
    min-height: 0;
  }
  .lwt-cta {
    position: static;
    margin-top: 24px;
    align-self: flex-end;
  }
  .contacts-footer { padding: 40px 0 24px; }
  .contacts-left { grid-column: 1 / -1; align-items: center; text-align: center; }
  .contacts-intro { max-width: none; }
  .contacts-socials { grid-template-columns: 1fr; }
  .contacts-copyright { text-align: center; }
}

/* ====== Experience / Education ====== */
.exp-grid { display: flex; flex-direction: column; gap: 0; }
.exp-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid #f0f0f0;
}
.exp-item:last-child { border-bottom: none; }
.exp-meta { padding-top: 2px; }
.exp-period { font-size: 13px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.exp-role { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.exp-company { font-size: 14px; color: var(--muted); font-weight: 400; }
.exp-desc { font-size: 14px; color: #444; line-height: 1.6; margin: 6px 0 0; }
.edu-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media(max-width:640px){
  .edu-row { grid-template-columns: 1fr; gap: 32px; }
  .exp-item { grid-template-columns: 80px 1fr; gap: 12px; }
}

/* ======================================================
   ABOUT PAGE
   ====================================================== */

/* Section block (no hero — page starts with about content) */
.about-section {
  width: 100%;
  max-width: var(--grid-maxw);
  margin: 0 auto;
  padding: 60px var(--grid-margin) 40px;
}

/* About: photo left + text right on desktop.
   Photo column auto-sizes to keep a 3:4 aspect at the row height;
   text column takes the remaining space. */
.about-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px 60px;
  align-items: stretch;
}
.about-photo {
  height: 100%;
  aspect-ratio: 3 / 4;
  background: #e8e5e0;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
.about-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.about-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.about-heading {
  margin: 0 0 8px;
}
.about-paragraph {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
}
.about-paragraph strong {
  font-family: var(--font-sans);
  font-weight: 700;
  font-style: italic;
  color: var(--gold);
}

/* Experience / Education / Languages — reuse .exp-* from index but place
   in clean about-page containers. */
.about-block {
  width: 100%;
  max-width: var(--grid-maxw);
  margin: 0 auto;
  padding: 40px var(--grid-margin);
}
.about-block-title {
  margin: 0 0 24px;
}

/* Edu + Languages side by side on desktop */
.about-edu-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 32px 60px;
  align-items: start;
}

/* Recognition cards — small cards with the gold award badge */
.recognition-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.recognition-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 24px;
  border: 1px solid #eee;
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.recognition-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(185, 154, 91, 0.12);
}
.recognition-badge {
  width: 44px;
  height: 44px;
  background: var(--gold);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.recognition-badge img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.recognition-body { flex: 1; min-width: 0; }
.recognition-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
}
.recognition-name {
  font-family: var(--font-logo);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 4px;
  color: var(--text);
}
.recognition-meta {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.recognition-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--gold);
  transition: gap 0.18s;
}
.recognition-cta-arrow {
  font-size: 16px;
  line-height: 1;
  transition: transform 0.18s;
}
.recognition-card:hover .recognition-cta { gap: 12px; }
.recognition-card:hover .recognition-cta-arrow { transform: translateX(3px); }

/* CV download — styled button */
.cv-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  background: var(--gold);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: background 0.18s, transform 0.18s;
}
.cv-button:hover {
  background: #a8884e;
  transform: translateY(-1px);
}
.cv-button svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Languages block */
.about-languages {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.about-language {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text);
}
.about-language-name { font-weight: 600; }
.about-language-level { color: var(--muted); margin-left: 8px; }

/* Tablet */
@media (max-width: 899px) {
  .about-grid { grid-template-columns: 1fr; gap: 28px; }
  .about-photo { aspect-ratio: 3 / 4; min-height: 0; }
  .about-edu-row { grid-template-columns: 1fr; gap: 40px; }
  .recognition-grid { grid-template-columns: 1fr; }
}

/* Mobile */
@media (max-width: 599px) {
  .about-section,
  .about-block {
    padding-top: 32px;
    padding-bottom: 24px;
  }
}

/* ======================================================
   CASE STUDY (project page) — shared template styles
   ====================================================== */

/* Section block: full-width container that uses the 4-col page grid */
.case-section {
  width: 100%;
  max-width: var(--grid-maxw);
  margin: 0 auto;
  padding: 24px var(--grid-margin);
}
.case-section--narrow {
  /* For body content that benefits from a shorter line-length */
  max-width: 980px;
}

/* ====== Case study HERO ====== */
.case-hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--grid-gutter);
  row-gap: 20px;
  align-items: stretch;
}
/* Title block sits on col 1, stretches to match image height so the
   award badge can be pinned to the bottom of the column. */
.case-hero-info {
  grid-column: 1 / span 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.case-backlink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 28px;
  transition: gap 0.18s, color 0.18s;
}
.case-backlink:hover { color: var(--gold); gap: 16px; }
.case-backlink-arrow { font-size: 16px; line-height: 1; }
.case-title {
  font-family: var(--font-logo);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  line-height: 1;
  margin: 0;
  letter-spacing: 0.3px;
  color: var(--text);
}
.case-tags {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.case-tag {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent);
}
.case-year {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
}
.case-summary {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}
/* Gold award badge — pinned to the bottom of the info column when present */
.case-award {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--gold);
  color: #fff;
  padding: 18px 22px;
  border-radius: 12px;
  margin-top: auto;
}
.case-award-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.case-award-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  display: block;
}
.case-award-text {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.3px;
}

/* Hero image (cols 2-4) */
.case-hero-image {
  grid-column: 2 / span 3;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}
.case-hero-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}
/* Modifier for hero images with a white/very light background — adds a hairline outline */
.case-hero-image--bordered { border: 1px solid #e8e0cd; }

/* Pull-quote question below the hero image */
.case-question {
  grid-column: 2 / span 3;
  font-family: var(--font-mono);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.4;
  color: var(--gold);
  margin: 16px 0 0;
  letter-spacing: 0.3px;
}

/* ====== Case study BODY sections ======
   Body content sits on cols 2-4 of the page grid, aligning with the
   hero image and pull-quote question above. */
.case-body {
  width: 100%;
  max-width: var(--grid-maxw);
  margin: 0 auto;
  padding: 40px var(--grid-margin);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--grid-gutter);
  row-gap: 0;
}
.case-body > section {
  grid-column: 2 / span 3;
  margin-bottom: 56px;
}
.case-body > section:last-child {
  margin-bottom: 0;
}
.case-section-title {
  font-family: var(--font-logo);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 20px;
  color: var(--text);
}
.case-body p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 18px;
  color: var(--text);
}
.case-body p:last-child { margin-bottom: 0; }

/* Yellow highlight on key phrases */
.case-body mark,
.case-highlight {
  background: linear-gradient(180deg, transparent 50%, rgba(255, 232, 120, 0.7) 50%);
  color: inherit;
  padding: 0 2px;
}

/* Images inside the body */
.case-body img,
.case-figure {
  width: 100%;
  border-radius: var(--radius);
  margin: 20px 0;
  display: block;
}
.case-figure {
  margin: 28px 0;
}
.case-figure img { margin: 0; border-radius: var(--radius); }
.case-figure figcaption {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.5;
}

/* Two-column callouts (role / tools, etc.) */
.case-callouts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
}

/* Two images side-by-side with matched heights, no cropping. */
.case-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
  align-items: stretch;
}
.case-pair img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
  display: block;
  margin: 0;
}
@media (max-width: 599px) {
  .case-pair { grid-template-columns: 1fr; }
  .case-pair img { height: auto; }
}

/* Variant: match the visible height, let widths differ per image's aspect.
   Outer images align to the text edges; gap fills any extra horizontal space. */
.case-pair--matchH {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  margin: 20px 0;
  grid-template-columns: none;
  height: 380px;
}
.case-pair--matchH img {
  height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: var(--radius);
  display: block;
  margin: 0;
}
@media (max-width: 899px) {
  .case-pair--matchH { height: 280px; }
}
@media (max-width: 599px) {
  .case-pair--matchH {
    flex-direction: column;
    height: auto;
    align-items: center;
  }
  .case-pair--matchH img { height: auto; width: 100%; }
}

/* Three images side-by-side (good for vertical photos) — matched heights, stacks on mobile. */
.case-triple {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
  align-items: stretch;
}
.case-triple img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
  margin: 0;
}
/* Variant: no cropping (use when image aspects don't match the cell ratio).
   Images are letterboxed inside their cells, but the row fills the full width. */
.case-triple--contain img { object-fit: contain; }
@media (max-width: 599px) {
  .case-triple { grid-template-columns: 1fr; }
  .case-triple img { height: auto; }
}

/* Variant: match the visible height, let widths differ per image's aspect.
   Outer images align to the text edges; gap fills any extra horizontal space. */
.case-triple--matchH {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  margin: 20px 0;
  grid-template-columns: none;
  height: 380px;
}
.case-triple--matchH img {
  height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: var(--radius);
  display: block;
  margin: 0;
}
@media (max-width: 899px) {
  .case-triple--matchH { height: 280px; }
}
@media (max-width: 599px) {
  .case-triple--matchH {
    flex-direction: column;
    height: auto;
    align-items: center;
  }
  .case-triple--matchH img { height: auto; width: 100%; }
}

/* ====== Chat windows (Claude conversation comparison) ======
   Used inside .case-pair to show two side-by-side chat captures. */
.case-chats { align-items: stretch; }
.chat-window {
  background: #1a1a1a;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  height: 100%;
}
.chat-user-msg {
  background: #6b6bd6;
  color: #fff;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
  align-self: flex-end;
  max-width: 80%;
  line-height: 1.4;
}
.chat-agent-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.chat-agent-icon { font-size: 16px; }
.chat-agent-name {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.chat-agent-tag {
  background: #333;
  color: #aaa;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
}
.chat-agent-msg {
  background: #2a2a2a;
  border-radius: 12px;
  padding: 16px;
  flex: 1; /* fills remaining vertical space so both chat windows match height */
}
/* High-specificity overrides for paragraphs inside chat messages,
   so the .case-body p rules don't drag text back to dark. */
.case-body .chat-agent-msg p {
  margin: 0 0 8px;
  color: #e0e0e0;
  font-size: 13px;
  line-height: 1.7;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.case-body .chat-agent-msg p:last-child { margin-bottom: 0; }
.case-body .chat-agent-msg em { color: #aaa; font-style: italic; }
.case-callout {
  background: var(--card);
  border-radius: 12px;
  padding: 20px;
}
.case-callout-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.case-callout-content {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.case-callout-content ul {
  margin: 0;
  padding-left: 18px;
}
.case-callout-content li { margin: 2px 0; }

/* Credits block (small, end of case study) */
.case-credits {
  width: 100%;
  max-width: var(--grid-maxw);
  margin: 0 auto;
  padding: 32px var(--grid-margin) 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--grid-gutter);
}
.case-credits-inner {
  grid-column: 2 / span 3;
  padding-top: 32px;
  border-top: 1px solid #eee;
}
.case-credits-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.case-credits-body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}
.case-credits-body strong { color: var(--text); font-weight: 600; }

/* Responsive — case study */
@media (max-width: 899px) {
  .case-hero {
    grid-template-columns: 1fr;
  }
  .case-hero-info { grid-column: 1; }
  .case-hero-image { grid-column: 1; }
  .case-question { grid-column: 1; margin-top: 8px; }
  .case-callouts { grid-template-columns: 1fr; }
  .case-body > section { grid-column: 1 / -1; }
  .case-credits-inner { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .case-section { padding: 16px var(--grid-margin); }
  .case-body { padding: 24px var(--grid-margin); }
  .case-body > section { margin-bottom: 40px; }
  .case-title { font-size: 44px; }
  .case-backlink { margin-bottom: 20px; }
}

/* ======================================================
   CASE STUDY — Tap & Know specific
   ====================================================== */

/* 3-step interaction cards */
.case-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 20px 0;
}
.case-step {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.case-step-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 4px;
}
.case-step-title {
  font-family: var(--font-logo);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  color: var(--text);
}
.case-step-desc {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
@media (max-width: 599px) {
  .case-steps { grid-template-columns: 1fr; }
}

/* Shapes grid (5 across on desktop) */
.case-shapes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 24px 0 20px;
}
.case-shape {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.case-shape img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  border-radius: 8px;
}
.case-shape-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 899px) {
  .case-shapes { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .case-shapes { grid-template-columns: repeat(2, 1fr); }
}

/* ======================================================
   CASE STUDY — Luma specific
   ====================================================== */

/* Three interactions row: text-left + image-right; stacks on mobile */
.case-interaction-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid #eee;
}
.case-interaction-row:last-child { border-bottom: 1px solid #eee; }
.case-interaction-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
  display: block;
}
.case-interaction-title {
  font-family: var(--font-logo);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 8px;
  color: var(--text);
}
.case-interaction-desc {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
.case-interaction-row img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  border-radius: 8px;
}
@media (max-width: 599px) {
  .case-interaction-row { grid-template-columns: 1fr; gap: 14px; }
}

/* ======================================================
   CASE STUDY — Pazzamente specific
   ====================================================== */

/* Logo framed on the brand violet (#A55999). Stretches to fill available space
   above the cover image; the cover keeps its natural aspect ratio. */
.case-logo-frame {
  background: #A55999;
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
}
.case-logo-frame img {
  width: 100%;
  height: auto;
  max-height: 100%;
  display: block;
  margin: 0;
  border-radius: 0;
}

/* Brand identity grid — logo / palette / supporting elements */
.case-brand-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
  align-items: stretch;
}
.case-brand-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Cover + envelope (the natural-ratio anchors) — auto height, no stretch */
.case-brand-col > img.case-brand-anchor,
.case-brand-col > video.case-brand-anchor {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  border-radius: var(--radius);
}
/* Pattern (texture, can be cropped) — fills remaining space below the envelope */
.case-brand-col > img.case-brand-fill,
.case-brand-col > video.case-brand-fill {
  width: 100%;
  display: block;
  margin: 0;
  border-radius: var(--radius);
  flex: 1;
  min-height: 0;
  object-fit: cover;
}
/* Palette fills full column height with 4 rows of 2 swatches */
.case-brand-palette {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, 1fr);
  gap: 8px;
  height: 100%;
}
.case-brand-swatch {
  border-radius: 12px;
  padding: 14px 12px;
  display: flex;
  align-items: flex-end;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: #fff;
  min-height: 60px;
}
.case-brand-swatch--light { color: #444; }
@media (max-width: 899px) {
  .case-brand-grid { grid-template-columns: 1fr; }
  .case-logo-frame { flex: none; height: 200px; }
  .case-brand-col > img.case-brand-fill,
  .case-brand-col > video.case-brand-fill { flex: none; height: auto; }
  .case-brand-palette { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); height: auto; }
}
@media (max-width: 599px) {
  .case-brand-palette { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); }
}

/* Episode cards with YouTube embeds */
.case-episodes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 20px 0;
}
.case-episode {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.case-episode-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
}
.case-body .case-episode-title {
  font-family: var(--font-logo);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.1;
  margin: 2px 0 2px;
  color: var(--text);
}
.case-body .case-episode-sub {
  font-family: var(--font-sans);
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}
.case-body .case-episode-desc {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text);
  line-height: 1.55;
  margin: 4px 0 8px;
}
.case-episode-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  margin-top: auto;
}
.case-episode-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px;
}
@media (max-width: 899px) {
  .case-episodes { grid-template-columns: 1fr; }
}

/* External link button pair (YouTube / Spotify) */
.case-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px 0 12px;
}
.case-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--gold);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: background 0.18s, transform 0.18s;
}
.case-link:hover {
  background: #a8884e;
  transform: translateY(-1px);
}
.case-link svg { width: 16px; height: 16px; }

/* Metrics callouts */
.case-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
}
.case-metric {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.case-metric-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.case-metric-body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}
@media (max-width: 599px) {
  .case-metrics { grid-template-columns: 1fr; }
}

/* Backstage bento — magazine layout: tall left image + top-right wide image
   + two smaller bottom-right images side by side. Stacks on mobile. */
.case-backstage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
  margin: 20px 0;
}
.case-backstage-1 {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.case-backstage-2 {
  grid-column: 2;
  grid-row: 1;
}
.case-backstage-bottom {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.case-backstage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  border-radius: var(--radius);
}
@media (max-width: 599px) {
  .case-backstage {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .case-backstage-1,
  .case-backstage-2 { grid-column: 1; grid-row: auto; }
  .case-backstage-bottom { grid-column: 1; grid-row: auto; }
}

/* ======================================================
   CASE STUDY — AirPal specific
   ====================================================== */

/* PAL character grid — 5 on top row, 4 below */
.case-pals {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 20px 0;
}
.case-pals img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  border-radius: 12px;
}
@media (max-width: 599px) {
  .case-pals { grid-template-columns: repeat(3, 1fr); }
}

/* Three "modes" cards with image + label + description */
.case-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 20px 0;
}
.case-mode {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.case-mode img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  border-radius: var(--radius);
  background: var(--card);
}
.case-mode-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.case-body .case-mode-desc {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}
@media (max-width: 899px) {
  .case-modes { grid-template-columns: 1fr; }
}

/* Hardware schematic row — two SVG diagrams side by side, large */
.case-hardware-pair {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;
  margin: 24px 0;
}
.case-hardware-pair > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.case-hardware-pair img {
  display: block;
  margin: 0;
  border-radius: 0;
  max-width: 100%;
  height: 320px;
  width: auto;
}
.case-hardware-pair .case-mode-label { margin-top: 0; }
@media (max-width: 599px) {
  .case-hardware-pair img { height: auto; width: 100%; }
}

/* Mixed-content row — SVG diagram + photos, matched heights.
   SVG diagrams use object-fit: contain so they aren't cropped;
   raster photos use cover to fill the cell.
   Weighted columns so the portrait photos get wider cells than the diagram
   — keeps all three at the same height without skinny photos. */
.case-hardware-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.4fr;
  gap: 16px;
  margin: 24px 0;
  align-items: stretch;
}
.case-hardware-row img {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  object-fit: cover;
  border-radius: var(--radius);
}
.case-hardware-row img[src$=".svg"] {
  object-fit: contain;
  border-radius: 0;
}
@media (max-width: 899px) {
  .case-hardware-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .case-hardware-row { grid-template-columns: 1fr; }
  .case-hardware-row img { height: auto; }
}

/* ======================================================
   CASE STUDY — Milanosport specific
   ====================================================== */

/* Before/After redesign pair with labels above each */
.case-redesign-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0;
  align-items: start;
}
.case-redesign-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.case-redesign-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
}
.case-redesign-col img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  border-radius: var(--radius);
  border: 1px solid #eee;
}
@media (max-width: 599px) {
  .case-redesign-pair { grid-template-columns: 1fr; }
}

/* ======================================================
   CASE STUDY — Milanosport: research artifacts
   ====================================================== */

/* Personas grid — 5 across */
.case-personas {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin: 20px 0;
}
.case-persona {
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.case-persona img {
  width: 72px;
  height: 72px;
  display: block;
  margin: 0;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
}
.case-body .case-persona-name {
  font-family: var(--font-logo);
  font-size: 18px;
  margin: 4px 0 0;
  color: var(--text);
  line-height: 1.1;
}
.case-body .case-persona-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin: 0;
}
.case-body .case-persona-bio {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text);
  margin: 4px 0 0;
}
@media (max-width: 899px) {
  .case-personas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .case-personas { grid-template-columns: 1fr; }
}

/* Cognitive walkthrough cards — task + clicks + pages */
.case-cog-table {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0;
}
.case-cog-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  background: var(--card);
  border-radius: var(--radius);
}
.case-cog-task {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
}
.case-cog-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--accent);
  flex-shrink: 0;
}
.case-cog-stats {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
}
.case-cog-stat {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.3px;
}
.case-cog-stat--big { color: var(--gold); }
@media (max-width: 599px) {
  .case-cog-row { grid-template-columns: 1fr; }
  .case-cog-stats { justify-content: flex-start; }
}

/* Heuristic findings cards — 2-col grid with severity color tags */
.case-heuristics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 20px 0;
}
.case-heuristic {
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.case-heuristic-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.case-heuristic-tag::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}
.case-heuristic-tag--critical::before { background: #E5484D; }
.case-heuristic-tag--high::before { background: #F5A623; }
.case-heuristic-tag--medium::before { background: #F2C94C; }
.case-heuristic-tag--low::before { background: #75C44C; }
.case-body .case-heuristic-name {
  font-family: var(--font-logo);
  font-size: 18px;
  line-height: 1.15;
  margin: 0;
  color: var(--text);
}
.case-body .case-heuristic-desc {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  color: var(--text);
}
@media (max-width: 599px) {
  .case-heuristics { grid-template-columns: 1fr; }
}

/* Competitor analysis matrix — responsive: table-grid on desktop, stacked cards on mobile */
.case-competitors {
  margin: 20px 0;
}
/* Header row — task labels at the top, hidden on mobile */
.case-competitors-head {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.case-competitors-head > div {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--text);
  line-height: 1.25;
  padding: 8px 4px;
  text-align: center;
}
.case-competitors-head > div:first-child { text-align: left; }
/* Row: competitor name + 7 task cells */
.case-competitor-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 6px;
}
.case-competitor-name {
  background: transparent;
  font-family: var(--font-logo);
  font-size: 15px;
  color: var(--text);
  display: flex;
  align-items: center;
  padding: 14px 8px;
}
.case-competitor-cell {
  background: var(--card);
  border-radius: 10px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-competitors-icon { font-weight: 600; }
.case-competitors-icon--good { color: #2D8F4E; }
.case-competitors-icon--good::before { content: "✓"; font-size: 18px; }
.case-competitors-icon--mid { color: #C99A3A; }
.case-competitors-icon--mid::before { content: "—"; font-size: 22px; font-weight: 700; }
.case-competitors-icon--bad { color: #C0464A; }
.case-competitors-icon--bad::before { content: "✕"; font-size: 18px; }
.case-competitors-icon--na { color: var(--muted); font-family: var(--font-mono); font-size: 11px; }
.case-competitors-icon--na::before { content: "N.A."; }

/* Legend below the table */
.case-competitors-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--muted);
}
.case-competitors-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Mobile: each competitor becomes a card with task labels */
@media (max-width: 899px) {
  .case-competitors-head { display: none; }
  .case-competitor-row {
    grid-template-columns: 1fr;
    gap: 0;
    background: var(--card);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 12px;
  }
  .case-competitor-name {
    padding: 0 0 12px;
    border-bottom: 1px solid #eee;
    font-size: 18px;
  }
  .case-competitor-cell {
    background: transparent;
    min-height: 0;
    padding: 8px 0;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
  }
  .case-competitor-row .case-competitor-cell:last-child { border-bottom: none; }
  .case-competitor-cell::before {
    content: attr(data-task);
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--text);
    text-align: left;
    margin-right: auto;
  }
}

/* New features bento — Profile+Reviews stacked on the left, Routes full height right */
.case-newfeatures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
  align-items: start;
}
.case-newfeatures-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.case-newfeatures-right {
  display: flex;
}
.case-newfeatures-left img,
.case-newfeatures-right img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  border-radius: var(--radius);
  border: 1px solid #eee;
  object-fit: contain;
}
@media (max-width: 599px) {
  .case-newfeatures { grid-template-columns: 1fr; }
}

/* Accessibility colour-blindness comparison — 4 images in one row with labels */
.case-accessibility {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 20px 0;
}
.case-accessibility figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.case-accessibility img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  border-radius: var(--radius);
  border: 1px solid #eee;
}
.case-accessibility figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
}
@media (max-width: 899px) {
  .case-accessibility { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .case-accessibility { grid-template-columns: 1fr; }
}

/* ======================================================
   CASE STUDY — Behind Closed Doors specific
   ====================================================== */

/* Hand-lettered titles row — 3 across, transparent backgrounds */
.case-titles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 20px 0;
  align-items: center;
}
.case-titles img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  border-radius: 0;
}
@media (max-width: 599px) {
  .case-titles { grid-template-columns: 1fr; gap: 18px; }
}

/* 6-colour palette swatches with hex labels */
.case-palette {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin: 20px 0;
}
.case-palette-swatch {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.case-palette-swatch-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
}
.case-palette-swatch-hex {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--muted);
}
@media (max-width: 599px) {
  .case-palette { grid-template-columns: repeat(3, 1fr); }
}

/* Illustration cards — 3 across, title + image + play caption */
.case-illus {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 20px 0;
}
.case-illus-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.case-illus-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.case-body .case-illus-title {
  font-family: var(--font-logo);
  font-size: 22px;
  line-height: 1.1;
  margin: 0;
  color: var(--text);
}
.case-body .case-illus-author {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.case-illus-card img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  border-radius: var(--radius);
}
.case-body .case-illus-desc {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
@media (max-width: 899px) {
  .case-illus { grid-template-columns: 1fr; }
}

/* Final poster — full content width */
.case-poster {
  display: block;
  margin: 16px 0;
}
.case-poster img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  border-radius: var(--radius);
}

/* ======================================================
   EXPERIMENT — Designers of Milan
   ====================================================== */

/* Two formats blocks side by side: visual system on the left, content formats on the right */
.case-formats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
}
.case-format {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.case-format-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.case-format ul {
  margin: 0;
  padding-left: 20px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}
.case-format li { margin: 2px 0; }
@media (max-width: 599px) {
  .case-formats { grid-template-columns: 1fr; }
}

/* DoM brand palette — 3 swatches at full row width */
.case-dom-palette {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0;
}
.case-dom-swatch {
  border-radius: 12px;
  padding: 18px 14px;
  min-height: 80px;
  display: flex;
  align-items: flex-end;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
}
.case-dom-swatch--black { background: #000000; color: #fff; }
.case-dom-swatch--red { background: #E92D28; color: #fff; }
.case-dom-swatch--white { background: #FFFFFF; color: #444; border: 1px solid #eee; }

/* Instagram post grid — 3 across, portrait posts, optionally linked to IG */
.case-ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0;
}
.case-ig-grid a {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.case-ig-grid a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.case-ig-grid img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
  margin: 0;
}
@media (max-width: 899px) {
  .case-ig-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .case-ig-grid { grid-template-columns: 1fr; }
}

/* Big stat block — for the "8 people" first event moment */
.case-stat {
  background: var(--card);
  border-radius: var(--radius);
  padding: 36px 32px;
  margin: 24px 0;
  text-align: center;
}
.case-stat-number {
  font-family: var(--font-logo);
  font-size: clamp(56px, 9vw, 96px);
  line-height: 1;
  color: var(--gold);
  margin: 0;
}
.case-body .case-stat-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text);
  margin: 12px 0 0;
}

/* Review theme pills — recurring positive tags from MeetUp reviews */
.case-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 8px;
}
.case-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid #eee;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1;
}

/* ======================================================
   EXPERIMENT — Homage to Albers
   ====================================================== */

/* Info hierarchy: Primary vs Secondary lists, side by side */
.case-info-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
}
.case-info-col {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.case-info-col-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.case-info-col ul {
  margin: 0;
  padding-left: 18px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}
.case-info-col li { margin: 4px 0; }
@media (max-width: 599px) {
  .case-info-cols { grid-template-columns: 1fr; }
}

/* User journey — vertical numbered sequence with arrow connectors */
.case-journey {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 20px 0;
}
.case-journey-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 18px;
  padding: 14px 0;
  align-items: baseline;
}
.case-journey-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--gold);
  padding-top: 2px;
}
.case-body .case-journey-label {
  font-family: var(--font-logo);
  font-size: 22px;
  line-height: 1.15;
  margin: 0;
  color: var(--text);
}
.case-body .case-journey-desc {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin: 4px 0 0;
}
.case-journey-step + .case-journey-step {
  border-top: 1px solid #eee;
}

/* Subsection heading inside a body section */
.case-body .case-subhead {
  font-family: var(--font-logo);
  font-size: 28px;
  line-height: 1.1;
  margin: 36px 0 14px;
  color: var(--text);
}

/* 6-image grid for exhibition photos / layout sketches — 3 across */
.case-grid-6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0;
}
.case-grid-6 img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  margin: 0;
  border-radius: var(--radius);
}
@media (max-width: 899px) {
  .case-grid-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .case-grid-6 { grid-template-columns: 1fr; }
}

/* Font specimen row — 3 candidate fonts as image previews */
.case-fonts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 20px 0;
}
.case-font {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.case-font img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  border-radius: var(--radius);
  background: var(--card);
  padding: 18px 14px;
  box-sizing: border-box;
}
.case-font-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.case-font--chosen .case-font-label { color: var(--gold); }
.case-font--chosen img { border: 2px solid var(--gold); }
@media (max-width: 599px) {
  .case-fonts { grid-template-columns: 1fr; }
}

/* Final mockup — single large image */
.case-mockup {
  display: block;
  margin: 24px 0;
}
.case-mockup img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  border-radius: var(--radius);
}


/* Layout iterations grid — like .case-grid-6 but images keep natural ratio (no cropping) */
.case-grid-6--natural {
  align-items: start;
}
.case-grid-6--natural img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}

/* ======================================================
   MOBILE NAV — pure CSS slide-in menu (no JS required)
   ====================================================== */

/* Hidden checkbox is the state holder — checked = menu open */
.menu-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* On desktop the toggle label is invisible. Show it on mobile only. */
.menu-toggle-label {
  display: none;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 8px;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}
.menu-toggle-label svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Mobile only — show hamburger, hide inline links, prep slide-in panel */
@media (max-width: 899px) {
  .menu-toggle-label { display: inline-flex; }

  /* Full-screen overlay panel — hidden off-screen by default */
  .nav .links {
    position: fixed;
    inset: 0;
    background: #FAF6EE;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    padding: 24px;
  }
  /* Slide in when checkbox is checked */
  .menu-checkbox:checked ~ .links {
    transform: translateX(0);
  }

  /* Big centered links inside the panel — match desktop navbar style:
     Atkinson Mono, uppercase, with the active page in gold. */
  .nav .links a {
    font-family: var(--font-mono);
    font-size: clamp(22px, 6vw, 32px);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text);
    text-decoration: none;
    padding: 10px 16px;
    border-bottom: 1px solid transparent;
    transition: color 0.18s, border-bottom-color 0.18s;
  }
  .nav .links a:hover { color: var(--gold); }
  .nav .links a.is-active {
    color: var(--gold);
    border-bottom-color: var(--gold);
    font-weight: 600;
  }

  /* Close (X) icon — top-right, only visible when menu open */
  .menu-close-label {
    display: none;
    position: fixed;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    z-index: 1001;
    -webkit-tap-highlight-color: transparent;
  }
  .menu-checkbox:checked ~ .menu-close-label { display: inline-flex; }
  .menu-close-label svg { width: 24px; height: 24px; display: block; }

  /* Lock body scroll while menu is open */
  body:has(.menu-checkbox:checked) { overflow: hidden; }
}

/* Hide the checkbox-hack assist elements on desktop entirely */
@media (min-width: 900px) {
  .menu-checkbox,
  .menu-close-label { display: none; }
}

/* ======================================================
   VIDEO ELEMENTS — autoplay loops used in place of GIFs
   Inherits visual treatment from the surrounding image grids
   so a <video> can sit alongside <img> without restyling.
   ====================================================== */
.case-body video,
.case-pair video,
.case-triple video,
.case-backstage video,
.case-hardware-row video {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  border-radius: var(--radius);
  object-fit: cover;
}
/* Standalone videos directly inside a section get the same spacing as standalone images */
.case-body section > video {
  margin: 20px 0;
}
/* In case-pair / case-triple where images use contain by default */
.case-pair video,
.case-triple video {
  object-fit: contain;
}
/* In case-triple--contain, video also stays contain */
.case-triple--contain video { object-fit: contain; }
/* In case-backstage cells the video fills its cell like the images */
.case-backstage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ======================================================
   CASE STUDY — Personal Brand Design specific
   ====================================================== */

/* Three touchpoints — connected pills showing the system at a glance */
.case-touchpoints {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 24px 0;
}
.case-touchpoint {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.case-touchpoint-num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
}
.case-body .case-touchpoint-title {
  font-family: var(--font-logo);
  font-size: 24px;
  line-height: 1.1;
  margin: 0;
  color: var(--text);
}
.case-body .case-touchpoint-desc {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin: 4px 0 0;
}
@media (max-width: 899px) {
  .case-touchpoints { grid-template-columns: 1fr; }
}

/* Typography stack — small specimen cards */
.case-type-stack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 20px 0;
}
.case-type {
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}
.case-type-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.case-type-sample {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1;
  color: var(--text);
  margin: 0;
}
.case-type-sample--gaya { font-family: var(--font-logo); }
.case-type-sample--cactus { font-family: var(--font-display); font-weight: 400; }
.case-type-sample--atkinson { font-family: var(--font-sans); font-weight: 400; font-size: clamp(28px, 4vw, 40px); }
.case-body .case-type-name {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
}
@media (max-width: 599px) {
  .case-type-stack { grid-template-columns: 1fr; }
}

/* Personal-brand palette — 3 swatches matching the website */
.case-pb-palette {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 16px 0;
}
.case-pb-swatch {
  border-radius: 12px;
  padding: 22px 14px;
  min-height: 90px;
  display: flex;
  align-items: flex-end;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
}
.case-pb-swatch--cream { background: #FAF6EE; color: #555; border: 1px solid #ece6d6; }
.case-pb-swatch--gold { background: #B99A5B; color: #fff; }
.case-pb-swatch--blue { background: #7997b5; color: #fff; }
.case-pb-swatch--text { background: #2a2a2a; color: #fff; }
@media (max-width: 599px) {
  .case-pb-palette { grid-template-columns: repeat(2, 1fr); }
}

/* Visual resting station — a blank white square, inline-rendered to save an image.
   Sized to match the IG grid cells, with a hairline outline so it's visible on the cream page. */
.case-resting-station {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #ffffff;
  border-radius: var(--radius);
  border: 1px solid #e8e0cd;
  display: block;
}