/* =================================================================
   Ola Ola Studio — Design tokens
   Palette: quiet warm neutral chrome + one wine accent, so the
   photography (not the UI) carries the color — the pattern that
   recurs across premium beauty sites (Glossier, Fenty, The Ordinary).
   ================================================================= */

@font-face {
  font-family: 'Herbik';
  src: url('assets/fonts/herbik/Herbik-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lay Grotesk';
  src: url('assets/fonts/lay-grotesk/LayGrotesk-Medium.woff2') format('woff2'),
       url('assets/fonts/lay-grotesk/LayGrotesk-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg: #FFFFFF;
  --color-bg-alt: #FFFFFF;
  --color-surface: #FBF8F3;
  --color-ink: #000000;
  --color-muted: #8C8073;
  --color-gray-medium: #c1c1c1;
  --color-gray-light: #c1c1c1;
  --color-accent: #fdb1cb;
  --color-link-hover: #FF68B9;
  --color-line: rgba(0, 0, 0, 0.14);
  --color-line-strong: rgba(0, 0, 0, 0.26);

  --font-display: 'Lay Grotesk', sans-serif;
  --font-display-light: 'Lay Grotesk', sans-serif;

  --font-body: 'Herbik', Arial, sans-serif;

  --font-herbik: 'Herbik', Georgia, serif;

  --gutter: 20px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* =================================================================
   Reset
   ================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* =================================================================
   Layout helpers
   ================================================================= */

.wrap {
  padding-inline: var(--gutter);
}

/* Case-study project pages only — 30% wider side gutter than the rest of
   the site (homepage, work index). */
.case-page .wrap {
  padding-inline: calc(var(--gutter) * 1.3);
}

/* Project Info grid keeps the site's normal gutter, matching the homepage. */
.case-page .wrap-meta {
  padding-inline: var(--gutter);
}

/* Gallery + case nav sit in from the edge further still, so the gallery
   reads as centered on the page rather than flush with the wider gutter
   used elsewhere on case-study pages. */
.case-page .wrap-gallery {
  padding-inline: calc(var(--gutter) * 1.3 * 1.2);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
}

/* =================================================================
   Logo splash — homepage only, fades out on scroll, back in on scroll up
   ================================================================= */

.logo-splash {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2rem);
  text-align: center;
  pointer-events: none;
  font-family: var(--font-body);
}

.logo-splash img {
  width: 20%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .logo-splash {
    display: none;
  }
}

/* =================================================================
   Header / Nav
   ================================================================= */

.topbar {
  position: static;
  z-index: 60;
  background: transparent;
}

.topbar .topbar-menu-btn,
.menu-overlay .topbar-menu-btn {
  position: fixed;
  top: 1.1rem;
  right: var(--gutter);
  z-index: 70;
}

.topbar-inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding-block: 1.1rem;
  font-family: var(--font-body);
}

.topbar-item {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: -0.028rem;
  text-transform: uppercase;
  color: var(--color-ink);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.topbar-name {
  position: relative;
  justify-self: start;
  color: var(--color-ink);
  cursor: pointer;
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(255, 104, 185, 0.95);
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s var(--ease), opacity 0.35s var(--ease);
  --color-link-hover: var(--color-ink);
}

.menu-overlay.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.menu-overlay .topbar-item {
  color: var(--color-bg-alt);
}

.menu-overlay .topbar-name {
  color: var(--color-bg);
}

.menu-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  text-align: right;
  padding-inline: var(--gutter);
  padding-block-start: 0.5rem;
  gap: 1.0625rem;
}

.menu-links a {
  position: relative;
  align-self: flex-end;
  font-family: 'Herbik', 'Times New Roman', serif;
  font-style: normal;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -4px;
  font-size: clamp(4.83rem, 8.82vw, 6.51rem);
  line-height: 1.4;
  color: var(--color-bg);
}

/* =================================================================
   Buttons / links
   ================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.85rem 1.5rem;
  border-radius: 0;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.btn-primary {
  background: transparent;
  color: #000000;
  border: 1.5px solid #000000;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.028rem;
  padding: 5px 48px;
  border-radius: 1px;
}

.btn-primary:hover {
  background: #FF68B9;
  border-color: #FF68B9;
  color: #FFFFFF;
}

.btn-outline {
  border: 1px solid var(--color-line-strong);
  color: var(--color-ink);
}

.btn-outline:hover {
  border-color: var(--color-ink);
  background: var(--color-surface);
}

.text-link {
  position: relative;
  font-weight: 600;
}

/* Text link hover — animated underline reveal plus a color change */
.topbar-name,
.topbar-menu-btn,
.menu-links a,
.text-link,
a.hero-bar-item,
.contact-quick-row a,
.footer-col a,
.case-nav a,
.about-copy a {
  position: relative;
  transition: color 0.3s var(--ease);
}

.topbar-name::after,
.topbar-menu-btn::after,
.text-link::after,
a.hero-bar-item::after,
.contact-quick-row a::after,
.footer-col a::after,
.case-nav a::after,
.about-copy a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.15em;
  height: 1.5px;
  background: var(--color-link-hover);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease);
}

.topbar-name:hover,
.topbar-menu-btn:hover,
.menu-links a:hover,
.text-link:hover,
a.hero-bar-item:hover,
.contact-quick-row a:hover,
.footer-col a:hover,
.case-nav a:hover,
.about-copy a:hover {
  color: var(--color-link-hover);
}

.topbar-name:hover::after,
.topbar-menu-btn:hover::after,
.text-link:hover::after,
a.hero-bar-item:hover::after,
.contact-quick-row a:hover::after,
.footer-col a:hover::after,
.case-nav a:hover::after,
.about-copy a:hover::after {
  transform: scaleX(1);
}

/* =================================================================
   Hero
   ================================================================= */

.hero {
  position: relative;
  min-height: 82vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: 0;
  animation: rise 0.7s var(--ease) both;
}

/* Keep the "Selected Work" heading visible without scrolling on desktop */
@media (min-width: 1025px) {
  .hero {
    min-height: max(420px, calc(100vh - 320px));
  }
}

#work {
  padding-top: 100px;
  padding-bottom: 50px;
}

#about {
  padding-top: 50px;
  padding-bottom: 50px;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

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

.hero h1 {
  font-family: 'Herbik', 'Times New Roman', serif;
  font-style: normal;
  font-weight: 500;
  text-transform: none;
  font-size: clamp(2.3rem, 4.2vw, 3.1rem);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--color-ink);
  max-width: 34ch;
  margin-inline: auto;
  text-wrap: balance;
}

.hero-bar {
  padding-block: 1.1rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem 2rem;
}

.hero-bar-item:last-child {
  justify-self: end;
}

.hero-bar-item {
  position: relative;
  justify-self: start;
  font-family: 'Herbik', 'Times New Roman', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink);
}

.hero-bar-item:not([href="#work"]) {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.028rem;
  text-transform: uppercase;
}

.hero-bar-item.hero-bar-scroll {
  text-align: center;
  color: #c1c1c1;
  transition: color 0.3s var(--ease);
}

.hero-bar-item.hero-bar-scroll::after {
  content: none;
}

.hero-bar-item.hero-bar-scroll:hover {
  color: var(--color-ink);
}

/* =================================================================
   Section rhythm
   ================================================================= */

section {
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

.section-alt {
  background: var(--color-bg-alt);
}

.section-rule {
  border-top: 1.5px solid var(--color-ink);
}

/* H2 text style — shared by section headings (Selected Work, About Ana, Services, Contact)
   and case-study meta headings (Project Info, Services, Credits) */
.text-h2,
.section-heading-big,
.case-meta-heading {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(1.625rem, 2.8vw, 2.25rem);
  line-height: 1.25;
  letter-spacing: -0.028rem;
  color: var(--color-ink);
}

.text-h2,
.section-heading-big {
  padding-top: 4px;
  margin-bottom: 70px;
}

/* =================================================================
   Work — asymmetric numbered grid, two rows of three tiles
   ================================================================= */

/* Uniform 3-column x 2-row grid of square tiles — shared by the homepage
   "Selected Work" section and the full work index page. */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
}

.work-grid .work-tile-media {
  aspect-ratio: 1 / 1;
}

.work-grid .work-tile-media img {
  height: 100%;
  object-fit: cover;
}

.work-tile {
  display: block;
}

.work-tile-caption {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  font-family: 'Herbik', 'Times New Roman', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-muted);
  transition: color 0.25s var(--ease);
}

.work-tile-num {
  color: var(--color-gray-light);
}

.work-tile-name {
  position: relative;
  flex: 1;
  display: inline-block;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink);
}

.work-tile-name .text-default,
.work-tile-name .text-hover {
  transition: opacity 0.25s var(--ease);
}

.work-tile-name .text-default {
  display: block;
  opacity: 1;
}

.work-tile-name .text-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  white-space: nowrap;
  color: var(--color-gray-medium);
}

.work-tile:hover .work-tile-name .text-default {
  opacity: 0;
}

.work-tile:hover .work-tile-name .text-hover {
  opacity: 1;
}

.work-tile-media {
  overflow: hidden;
  border-radius: 2px;
  background: var(--color-bg-alt);
}

.work-tile-media img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s var(--ease);
}

.work-tile:hover .work-tile-media img {
  transform: scale(1.03);
}

/* Full work-index page only — four columns at full page width instead of
   three, and a tighter section rhythm, so all seven tiles (two rows, one
   empty slot on the second) sit above the fold instead of needing a scroll. */
.index-page .work {
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

.index-page .section-heading-big {
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.index-page .work-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
}

.index-page .work-tile-caption {
  margin-bottom: 0.75rem;
}

/* =================================================================
   About
   ================================================================= */

.about-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  min-height: 63vh;
}

.about-portrait {
  aspect-ratio: 3 / 4;
  width: 40%;
  background: var(--color-bg-alt);
  overflow: hidden;
  border-radius: 2px;
  align-self: end;
}

.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-copy {
  width: 50%;
  padding-top: 2rem;
}

/* H3 text style — reusable for subheadings/copy (e.g. services names) */
.text-h3,
.services-row h3 {
  font-size: clamp(1.08rem, 1.7vw, 1.35rem);
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0;
  color: var(--color-ink);
}

.services-row h3 {
  font-family: var(--font-display);
  letter-spacing: -0.028rem;
}

.about-copy p {
  line-height: 1.68;
  break-inside: avoid;
}

.about-copy p+p {
  margin-top: 1.5rem;
}

.about-copy p.about-contact-email {
  margin-top: 68px;
}

.about-copy p.about-contact-link {
  margin-top: 6px;
}

.about-copy p.about-contact-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

/* =================================================================
   Experience (timeline)
   ================================================================= */

.timeline {
  border-top: 2px solid var(--color-line);
}

.timeline-row {
  display: grid;
  grid-template-columns: 11rem 1fr 1fr;
  gap: 2rem;
  padding-block: 2rem;
  border-bottom: 2px solid var(--color-line);
}

.timeline-row .dates {
  font-size: 0.82rem;
  color: var(--color-muted);
  padding-top: 0.2rem;
}

.timeline-row h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.028rem;
}

.timeline-row .org {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-top: 0.2rem;
}

.timeline-row p.desc {
  font-size: 0.95rem;
  color: var(--color-ink);
  line-height: 1.65;
  max-width: 52ch;
}

/* =================================================================
   Services strip
   ================================================================= */


.services-row {
  --services-indent: 4.5rem;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1.5rem;
  align-items: center;
  padding-block: 1.5rem;
  padding-inline: var(--services-indent);
}

.services-row::after {
  content: '';
  position: absolute;
  left: var(--services-indent);
  right: var(--services-indent);
  bottom: 0;
  height: 1.5px;
  background: #E3E3E3;
}

/* H4 text style — reusable for lead/description copy (e.g. about copy, services descriptions, contact lead) */
.text-h4,
.about-copy p,
.services-row p,
.contact-lead,
.case-narrative p,
.case-meta-col p,
.case-meta-col li {
  font-family: 'Herbik', 'Times New Roman', serif;
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--color-ink);
}

/* =================================================================
   Contact
   ================================================================= */

.contact-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 8vw, 6rem);
  align-items: start;
}

.contact-media {
  aspect-ratio: 1024 / 1011;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EDEDED;
  border-radius: 2px;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.contact-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-top {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1.5px solid #E3E3E3;
}

.contact-lead {
  max-width: none;
}

.contact-quick {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.contact-quick-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--font-body);
}

.contact-quick-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
  min-width: 7.5rem;
}

.contact-quick-row a {
  position: relative;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-ink);
}

.form-row {
  margin-bottom: 1.25rem;
}

.form-row label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 0.5rem;
}

.form-row input,
.form-row textarea {
  width: 100%;
  padding: 0.4rem 0;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid #E3E3E3;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-ink);
  resize: vertical;
}

.form-row input::placeholder,
.form-row textarea::placeholder {
  color: var(--color-muted);
}

.form-row input:focus,
.form-row textarea:focus {
  border-color: var(--color-ink);
  outline: none;
}

.form-fieldset {
  border: none;
  padding: 0 0 1.5rem;
  margin: 0 0 1.25rem;
}

.form-fieldset legend {
  padding: 0;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 1.5rem;
}

.form-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

label.form-check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink);
  cursor: pointer;
}

.form-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--color-ink);
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.form-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--color-ink);
}

.form-status {
  margin-top: 1rem;
  font-size: 0.85rem;
  min-height: 1.2em;
}

.form-status.is-error {
  color: var(--color-accent);
}

.form-status.is-ok {
  color: var(--color-ink);
}

/* =================================================================
   Footer
   ================================================================= */

.site-footer-dark {
  background: #FF68B9;
  color: #FFFFFF;
  padding-block: 12px;
  font-family: var(--font-display);
  letter-spacing: 0.01rem;
  --color-link-hover: var(--color-ink);
}

.footer-columns {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 1.5rem;
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.footer-col-copyright {
  justify-self: end;
}

.footer-col-contact {
  align-items: center;
  text-align: center;
}

.footer-col a,
.footer-col span {
  position: relative;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: 0.8rem;
  line-height: 1.4;
  text-transform: none;
  color: #FFFFFF;
}

/* =================================================================
   Case-study page
   ================================================================= */

.case-meta-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.case-meta-heading {
  padding-bottom: 4px;
  margin-bottom: 8px;
  border-bottom: 1.5px solid var(--color-ink);
}

.case-meta-col li+li {
  margin-top: 0.15rem;
}

.case-narrative p+p {
  margin-top: 1rem;
}

.case-narrative a {
  color: var(--color-accent);
  border-bottom: 2px solid currentColor;
}

/* =================================================================
   Resume page
   ================================================================= */

/* Resume-only override: case-meta-heading is 1 step down the h2/h3/h4
   scale (lands on the h3 size) and loses its underline — scoped to this
   page only, the shared .case-meta-heading rule elsewhere is untouched. */
.resume-page .case-meta-heading {
  font-size: clamp(1.08rem, 1.7vw, 1.35rem);
  border-bottom: none;
}

/* Timeline is a shared/dormant component reused here — drop its top rule
   and the last row's bottom rule, scoped to this page only. */
.resume-page .timeline {
  border-top: none;
}

.resume-page .timeline-row:last-child {
  border-bottom: none;
}

.resume-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
  border-bottom: 1.5px solid var(--color-ink);
}

.resume-header h1 {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.028rem;
}

.resume-header .resume-title {
  font-family: 'Herbik', 'Times New Roman', serif;
  font-size: 1.1rem;
  color: var(--color-muted);
  margin-top: 0.25rem;
}

.resume-contact {
  text-align: right;
  font-size: 0.9rem;
  line-height: 1.7;
}

.resume-contact a {
  color: var(--color-ink);
}

.resume-contact a:hover {
  color: var(--color-link-hover);
}

.resume-links {
  margin-top: 1.25rem;
}

.resume-links+.resume-links {
  margin-top: 0.5rem;
}

.resume-links a {
  color: var(--color-ink);
}

.resume-links a:hover {
  color: var(--color-link-hover);
}

.resume-header,
.resume-layout {
  max-width: 1200px;
  margin-inline: auto;
}

.resume-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

.resume-block+.resume-block {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.resume-aside .resume-block+.resume-block {
  margin-top: clamp(0.5rem, 1vw, 0.75rem);
}

.resume-cap-group+.resume-cap-group {
  margin-top: 1.25rem;
}

.resume-cap-group h3 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.3rem;
}

.resume-cap-group li {
  font-family: 'Herbik', 'Times New Roman', serif;
  font-size: 0.95rem;
}

.resume-cap-group li+li {
  margin-top: 0.15rem;
}

.resume-edu-item h3,
.resume-lang-item h3 {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-ink);
}

.resume-edu-item p {
  font-size: 0.9rem;
  margin-top: 0.1rem;
}

.resume-edu-item+.resume-edu-item,
.resume-lang-item+.resume-lang-item {
  margin-top: 1.25rem;
}

.resume-edu-item .org,
.resume-lang-item .org {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-top: 0.1rem;
}

.timeline-row ul.desc {
  font-size: 0.95rem;
  color: var(--color-ink);
  line-height: 1.65;
  max-width: 52ch;
  list-style: disc;
  padding-left: 1.1em;
}

.timeline-row ul.desc li+li {
  margin-top: 0.4rem;
}

/* 6-column grid, referencing doris.design/projects/the-masher's `grid grid-cols-6
   gap-4 sm:gap-5 md:gap-6` gallery structure — every image/text block is placed via
   col-start and col-span classes on a single consistent grid+gap, rather than each
   row defining its own gap value. Intentionally breaks the page's usual full-bleed
   .wrap gutter: the section sits inset with side margins that grow on wide screens. */
.case-gallery {
  padding-top: clamp(2.5rem, 6vw, 4rem);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: start;
  gap: 1rem;
  --gallery-gap: 1rem;
  max-width: 1530px;
  margin-inline: auto;
}

@media (min-width: 640px) {
  .case-gallery {
    gap: 1.25rem;
    --gallery-gap: 1.25rem;
  }
}

/* Project title (first grid item, beside the hero image) borrows the hero
   tagline's text style instead of the standard section-heading treatment. */
.case-gallery h2.section-heading-big {
  font-family: 'Herbik', 'Times New Roman', serif;
  font-style: normal;
  font-weight: 500;
  text-transform: none;
  font-size: clamp(2.3rem, 4.2vw, 3.1rem);
  line-height: 1.4;
  letter-spacing: 0;
}

@media (min-width: 768px) {
  .case-gallery {
    gap: 1.5rem;
    --gallery-gap: 1.5rem;
  }
}

.case-gallery img,
.case-gallery video {
  width: 100%;
  display: block;
  border-radius: 2px;
}

/* A fixed-width left image plus a smaller right image that's truly centered
   in the space left over — not just centered within a grid cell, which
   would be offset by one column-gap from the left image's actual edge.
   Flexbox auto-margins split the leftover space evenly on both sides. */
.case-gallery .pair-center-right {
  display: flex;
  align-items: center;
}

.case-gallery .pair-center-right img:first-child {
  width: 50%;
}

.case-gallery .pair-center-right img:last-child {
  width: 33.3333%;
  margin-inline: auto;
}

/* Centers an item at its original 1-column width inside a 2-column cell
   (e.g. a small image sharing a row with a wider one, floated in the
   leftover space rather than flush to either edge). */
.case-gallery .center-1-in-2 {
  width: calc((100% - var(--gallery-gap)) / 2);
  margin-inline: auto;
}

.case-gallery .col-span-1 { grid-column-end: span 1; }
.case-gallery .col-span-2 { grid-column-end: span 2; }
.case-gallery .col-span-3 { grid-column-end: span 3; }
.case-gallery .col-span-4 { grid-column-end: span 4; }
.case-gallery .col-span-6 { grid-column-end: span 6; }

.case-gallery .col-start-1 { grid-column-start: 1; }
.case-gallery .col-start-2 { grid-column-start: 2; }
.case-gallery .col-start-3 { grid-column-start: 3; }
.case-gallery .col-start-4 { grid-column-start: 4; }
.case-gallery .col-start-5 { grid-column-start: 5; }
.case-gallery .col-start-6 { grid-column-start: 6; }

/* Vertically stacks an image with its own caption/text box, tight to just that
   image — used where a shorter row-mate would otherwise leave dead space above
   the text box before the shared grid row-gap kicks in. */
.case-gallery .stack {
  display: flex;
  flex-direction: column;
  gap: var(--gallery-gap);
}

/* Nested 1.5fr / 3fr split — for a pair ratio finer than the outer grid's
   integer column spans can express (e.g. "1.5 columns" isn't a valid span). */
.case-gallery .pair-1-2 {
  display: grid;
  grid-template-columns: 1.5fr 3fr;
  gap: var(--gallery-gap);
  grid-column: 1 / -1;
}

/* Row pairing an image with a video (or two items whose native aspect ratios
   don't naturally resolve to the same height) — the image crops via
   object-fit to match whatever height the video's own aspect ratio yields. */
.case-gallery .fit-row {
  display: flex;
  gap: var(--gallery-gap);
}

.case-gallery .fit-row img {
  width: 33.3333%;
  object-fit: cover;
}

.case-gallery .fit-row video {
  width: 66.6667%;
}

.placeholder-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EDEDED;
  border: 1px dashed var(--color-line-strong);
  border-radius: 2px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: center;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-wide {
  aspect-ratio: 2 / 1;
}

.aspect-inset {
  aspect-ratio: 4 / 3;
}

img.aspect-square,
img.aspect-wide,
img.aspect-inset {
  height: 100%;
  object-fit: cover;
}

.case-gallery .gallery-text {
  min-height: 6rem;
  padding: 1.5rem;
}

.case-gallery .gallery-text.is-long {
  min-height: 9rem;
}

.case-gallery .gallery-text h1 {
  font-family: 'Herbik', 'Times New Roman', serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.3rem, 2.3vw, 1.65rem);
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink);
  margin: 0;
}

.case-gallery .gallery-text h1 + h1 {
  margin-top: 1rem;
}

.case-gallery .gallery-text p {
  font-family: 'Herbik', 'Times New Roman', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink);
  margin: 0;
}

/* =================================================================
   Horizontal scrolling photo gallery — alternate to .case-gallery for
   photography-led project pages (e.g. Vogue). Vertical scroll drives
   horizontal movement: .horiz-gallery-sticky pins via position:sticky
   while its parent's extra height (set in script.js, based on how far
   the track overflows the viewport) supplies the scroll runway. Each
   photo keeps its own real aspect ratio at a shared height, filmstrip-
   style, rather than being cropped to a uniform ratio.
   ================================================================= */

.horiz-gallery {
  position: relative;
  padding-block: 0;
  margin-top: -1.25rem;
}

.horiz-gallery-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.horiz-gallery-track {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding-inline: var(--gutter);
  will-change: transform;
}

.horiz-gallery-item {
  flex: none;
  height: min(86vh, 900px);
  margin: 0;
}

.horiz-gallery-item img {
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  border-radius: 2px;
}

@media (max-width: 768px) {
  .horiz-gallery-sticky {
    position: static;
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-block: 1rem;
  }

  .horiz-gallery-track {
    transform: none !important;
  }

  .horiz-gallery-item {
    height: 68vh;
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .horiz-gallery-sticky {
    position: static;
    height: auto;
    overflow-x: auto;
  }

  .horiz-gallery-track {
    transform: none !important;
  }
}

.case-nav {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-block: 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.case-nav a {
  position: relative;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: -0.028rem;
  text-transform: uppercase;
  color: var(--color-ink);
}

.case-nav a.case-nav-index {
  font-family: 'Herbik', 'Times New Roman', serif;
  text-transform: capitalize;
}

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

@media (max-width: 1024px) {
  .about-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .about-portrait {
    width: 100%;
    max-width: 22rem;
    align-self: auto;
  }

  .about-copy {
    width: 100%;
    padding-top: 0;
  }

  .timeline-row {
    grid-template-columns: 8rem 1fr 1fr;
  }

  .case-meta-grid {
    grid-template-columns: 1fr;
  }

  .resume-layout {
    grid-template-columns: 1fr;
  }

  .index-page .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-body {
    grid-template-columns: 1fr;
  }

  .footer-columns {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    justify-items: center;
  }

  .footer-col-contact {
    display: none;
  }

  .footer-col,
  .footer-col-copyright {
    align-items: center;
    text-align: center;
    justify-self: center;
  }
}

@media (max-width: 768px) {
  .topbar-item:not(.topbar-name):not(.topbar-menu-btn) {
    display: none;
  }

  .hero {
    min-height: 58vh;
    min-height: 58svh;
    padding-top: 1.5rem;
  }

  .work-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .index-page .work-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .resume-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .resume-contact {
    text-align: left;
  }

  .services-row {
    --services-indent: 2rem;
    grid-template-columns: 1fr;
  }

  .services-row p {
    margin-top: 0.5rem;
  }

  .case-gallery {
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2.5vw, 2rem);
  }

  .case-gallery .col-span-1,
  .case-gallery .col-span-2,
  .case-gallery .col-span-3,
  .case-gallery .col-span-4,
  .case-gallery .col-span-6 {
    grid-column: 1 / -1;
  }

  .case-gallery .pair-center-right {
    flex-direction: column;
    gap: clamp(1rem, 2.5vw, 2rem);
  }

  .case-gallery .pair-center-right img:first-child,
  .case-gallery .pair-center-right img:last-child {
    width: 100%;
    margin-inline: 0;
  }

  .case-gallery .center-1-in-2 {
    width: 100%;
    margin-inline: 0;
  }

  .case-gallery .pair-1-2 {
    grid-template-columns: 1fr;
  }

  .case-gallery .fit-row {
    flex-direction: column;
  }

  .case-gallery .fit-row img,
  .case-gallery .fit-row video {
    width: 100%;
  }

  .case-gallery .fit-row img {
    height: auto;
  }
}

@media (max-width: 480px) {
  .hero-bar {
    display: none;
  }

  .timeline-row {
    grid-template-columns: 1fr;
  }

  .timeline-row .dates {
    padding-top: 0;
  }
}