/* ==========================================================================
   Naama Namer — Portfolio
   Static rebuild — matches the original site's fonts, colors and copy:
   Fahkwang (structural words) + Cormorant Garamond light italic (connectors)
   for headlines, Assistant for Hebrew titles/body, coral accent on mint bg.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Fahkwang:wght@400;500;600;700&family=Assistant:wght@400;600;700&display=swap');

:root {
  --color-bg: #dcf4f2;
  --color-bg-project: #fffaf4;
  --color-fg: #000000;
  --color-muted: #495867;
  --color-accent: #e0614d;
  --color-border: rgba(0, 0, 0, 0.08);

  --font-fahkwang: 'Fahkwang', sans-serif;
  --font-cormorant: 'Cormorant Garamond', serif;
  --font-assistant: 'Assistant', 'Fahkwang', sans-serif;
  --font-nav: Helvetica, Arial, sans-serif;

  --max-width: 1900px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  /* The source site is a freeform canvas designed at a 1425px content width
     (a 1440px viewport minus scrollbar). Everything on a project page — every
     x offset, width and height — is that design multiplied by a single scale
     factor. Below 1440px the factor is simply the available width over 1425;
     above it, growth is dampened (measured at 1920px: only +9.9%, not +33%),
     and the whole block centres in the leftover space. Measured directly at
     500/750/980/1000/1440/1920/2200px — see _wix-reference/. */
  --design-width: 1425px;
  --page-scale: calc((100vw - 15px) / 1425px);
}

@media (min-width: 1440px) {
  :root {
    --page-scale: clamp(1, calc(1 + 0.099 * ((100vw - 1440px) / 480px)), 1.099);
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

body.project-page {
  background: var(--color-bg-project);
}

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

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

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* mixed-typeface headline words, per the source site's pattern */
.fw {
  font-family: var(--font-fahkwang);
  font-weight: 400;
}
.fw-bold {
  font-family: var(--font-fahkwang);
  font-weight: 700;
}
.cg {
  font-family: var(--font-cormorant);
  font-weight: 400;
  font-style: italic;
}

/* ---------- Header ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem var(--gutter);
  max-width: var(--max-width);
  margin: 0 auto;
}

.logo {
  font-family: var(--font-fahkwang);
  color: var(--color-accent);
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.logo span {
  opacity: 0.75;
}

.main-nav ul {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a {
  font-family: var(--font-nav);
  font-weight: 400;
  letter-spacing: 0.06em;
  font-size: 1rem;
  text-transform: uppercase;
  color: var(--color-muted);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.main-nav a:hover,
.main-nav a[aria-current='page'] {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ---------- Hero ---------- */

.hero {
  padding: clamp(3rem, 10vw, 12rem) var(--gutter) clamp(3rem, 9vw, 6rem);
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.hero-greeting {
  font-size: clamp(2.25rem, 6.5vw, 4.25rem);
  line-height: 1.05;
  margin: 0 0 1.75rem;
  color: var(--color-accent);
  letter-spacing: 0.01em;
}

.hero-tagline p {
  margin: 0.4rem 0;
  font-size: clamp(1.15rem, 3vw, 1.9rem);
  color: var(--color-accent);
  line-height: 1.3;
}

.scroll-cue {
  margin-top: 2.5rem;
  font-size: 1.5rem;
  color: var(--color-accent);
  opacity: 0.6;
}

/* ---------- Category sections ---------- */

.category {
  padding: clamp(2rem, 5vw, 3rem) var(--gutter) clamp(3rem, 7vw, 5rem);
  max-width: var(--max-width);
  margin: 0 auto;
}

.category-inner {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

/* UX/UI and BRANDING: same overlap technique as BOOKS — heading and
   tiles share the cell, tiles stay anchored to the container's left
   edge, and the (still sticky) heading moves to sit over the image's
   top-left corner instead of floating in a separate far column. */
.category.align-right .category-inner {
  grid-template-columns: 1fr;
}

.category.align-right .category-inner .category-heading {
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  justify-self: end;
  margin-right: 12vw;
}

.category.align-right .category-inner .project-tiles {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  /* Capped narrower than two wide tiles combined, so UX/UI's pair
     stacks instead of sitting side by side (matches the source site);
     BRANDING's narrower pair still fits side by side under this cap. */
  max-width: 1700px;
}

.category-heading {
  font-size: clamp(2rem, 5vw, 3.25rem);
  color: var(--color-accent);
  margin: 0;
  /* Follows the tiles down the page as you scroll through this
     category, then releases when the next category takes over —
     matches the scroll behavior on the original site. */
  position: sticky;
  top: 1.5rem;
  align-self: start;
}

.category.align-right .category-heading {
  text-align: right;
  order: 2;
}

.category.align-right .project-tiles {
  order: 1;
}

.project-tiles {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-content: start;
}

/* BOOKS: the heading rides on top of the image instead of sitting in
   its own reserved column — both occupy the same grid cell, so the
   tiles reach the container's true left edge and the (still sticky)
   heading overlaps the artwork as you scroll past it. */
.category-books .category-inner,
.category-lettering .category-inner {
  grid-template-columns: 1fr;
}

.category-books .category-heading,
.category-lettering .category-heading {
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  justify-self: start;
}

.category-books .project-tiles,
.category-lettering .project-tiles {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
}

/* LETTERING: capped narrower than capybara + a narrow tile combined,
   so it wraps onto its own row and the two narrow tiles pair up
   beneath it (matches the source site's grouping). The row itself
   stays full-width (same cell as BRANDING's heading); its CHILDREN
   are right-aligned within it via justify-content, so the rightmost
   tile's edge lines up with BRANDING's heading. */
.category-lettering .project-tiles {
  max-width: 1300px;
  justify-content: flex-end;
}

.project-tile {
  flex: 0 0 auto;
  display: block;
  max-width: 100%;
}

/* Each project image is set to its exact measured size from the
   source site (scaled from a 1440px-viewport measurement pass), via
   --tw/--th custom properties set inline per <img>. This replicates
   the source's real proportions instead of a generic wide/narrow
   guess — some pairs sit side by side, others stack, exactly as
   their real pixel widths dictate. */
.project-tile img {
  width: var(--tw);
  height: var(--th);
  max-width: 100%;
  object-fit: cover;
}

/* Staggers this tile down relative to its row partner — the source
   site pairs these two images at different vertical offsets instead
   of a uniform row, per pixel measurement of the original. Relative
   positioning is used so it doesn't affect the flex row's own
   cross-axis alignment (which the partner tile still follows). */
.project-tile.tile-offset {
  position: relative;
  top: var(--ty);
}

.project-tile-caption {
  text-align: center;
  padding-top: 0.9rem;
}

.project-tile-title {
  font-family: var(--font-assistant);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-accent);
  margin: 0 0 0.25rem;
}

.project-tile-tags {
  font-family: var(--font-cormorant);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-muted);
}

/* ---------- Instagram feed (static snapshot) ---------- */

.instagram {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) var(--gutter) clamp(2rem, 5vw, 3rem);
  text-align: center;
}

.instagram-heading {
  margin: 0 0 2rem;
  font-size: clamp(2rem, 5vw, 3.5rem);
}

.instagram-heading a {
  color: var(--color-accent);
}

.instagram-heading span {
  text-decoration: underline;
}

.instagram-scroll {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.instagram-track {
  display: flex;
  gap: 1rem;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 0.25rem 0.5rem;
}

.instagram-track::-webkit-scrollbar {
  display: none;
}

.instagram-track img {
  flex: 0 0 clamp(200px, 23vw, 320px);
  height: clamp(200px, 23vw, 320px);
  object-fit: cover;
  scroll-snap-align: start;
}

.instagram-arrow {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  color: var(--color-accent);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.instagram-arrow:hover {
  background: var(--color-accent);
  color: #ffffff;
}

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 4rem);
}

.lightbox[hidden] {
  display: none;
}

.lightbox-image {
  max-width: min(70vw, 800px);
  max-height: 80vh;
  object-fit: contain;
}

.lightbox-caption {
  position: absolute;
  top: clamp(2rem, 8vw, 4.5rem);
  right: clamp(3rem, 10vw, 8rem);
  max-width: 22rem;
  font-family: var(--font-cormorant);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--color-fg);
  text-align: right;
}

.lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  border: none;
  background: none;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-fg);
  cursor: pointer;
}

.lightbox-close:hover {
  color: var(--color-accent);
}

.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-fg);
  cursor: pointer;
  padding: 0.5rem;
}

.lightbox-arrow:hover {
  color: var(--color-accent);
}

.lightbox-prev {
  left: clamp(0.5rem, 3vw, 2rem);
}

.lightbox-next {
  right: clamp(0.5rem, 3vw, 2rem);
}

@media (max-width: 640px) {
  .lightbox-caption {
    position: static;
    max-width: 100%;
    text-align: center;
    margin-top: 1rem;
  }

  .lightbox {
    flex-direction: column;
    gap: 1rem;
  }

  .lightbox-image {
    max-width: 100%;
    max-height: 60vh;
  }
}

/* ---------- Footer ---------- */

.site-footer {
  background: #fffaf4;
  padding: 2.5rem 0 2rem;
  overflow: hidden;
}

/* Continuously scrolling email ticker — the whole line is one mailto
   link, and it pauses on hover instead of needing a play button. */
.footer-marquee {
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}

.footer-marquee-link {
  display: block;
}

.footer-marquee-track {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  animation: footer-marquee 16s linear infinite;
}

.footer-marquee-link:hover .footer-marquee-track {
  animation-play-state: paused;
}

@keyframes footer-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.footer-marquee-track span {
  font-family: var(--font-cormorant);
  font-weight: 700;
  font-size: clamp(1.75rem, 5vw, 3.25rem);
  color: var(--color-muted);
  white-space: nowrap;
}

.footer-marquee-link:hover .footer-marquee-track span {
  color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .footer-marquee-track {
    animation-play-state: paused;
  }
}

.footer-bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.footer-social {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-social img {
  width: 24px;
  height: 24px;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.footer-social a:hover img {
  opacity: 1;
}

.footer-back-to-top {
  font-family: var(--font-cormorant);
  font-style: italic;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.footer-back-to-top:hover {
  color: var(--color-accent);
}

/* ---------- About page ---------- */

.about-hero {
  padding: clamp(2rem, 6vw, 3.5rem) var(--gutter) clamp(1rem, 4vw, 2rem);
  max-width: 1150px;
  margin: 0 auto;
  text-align: center;
}

.about-hero h1 {
  font-size: clamp(1.6rem, 4.2vw, 2.6rem);
  line-height: 1.3;
  color: var(--color-accent);
  margin: 0;
  font-weight: 400;
}

.about-body {
  max-width: 1150px;
  margin: 0 auto;
  padding: 1rem 0 clamp(3rem, 8vw, 5rem);
  display: flex;
  gap: clamp(2rem, 14.6vw, 13.2rem);
  align-items: flex-start;
}

.about-portrait {
  flex: 0 0 clamp(200px, 32.5vw, 468px);
}

.about-portrait img {
  width: 100%;
  display: block;
}

.about-columns {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  flex: 1;
  min-width: 0;
}

.about-row {
  display: flex;
  gap: 1.5rem;
  align-items: baseline;
}

.about-columns h2 {
  font-family: var(--font-cormorant);
  font-weight: 600;
  font-style: italic;
  font-size: 1.9rem;
  color: var(--color-accent);
  margin: 0;
  flex: 0 0 95px;
}

.skills-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.skills-list li {
  font-family: var(--font-cormorant);
  font-style: italic;
  font-size: 1.15rem;
  padding: 0.25rem 0;
}

.social-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.social-list a {
  font-family: var(--font-fahkwang);
  font-size: 1.1rem;
  color: var(--color-accent);
  border-bottom: 1px solid transparent;
}

.social-list a:hover {
  border-color: var(--color-accent);
}

/* ---------- Project detail pages ---------- */

.story-video-wrap {
  position: relative;
  cursor: pointer;
}

.story-video-wrap--hero,
.story-video-wrap--full {
  display: block;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

.story-video-wrap--fixed {
  display: inline-block;
}

.video-play-toggle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-accent);
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.video-play-toggle:hover {
  background: var(--color-accent);
  color: #ffffff;
}

.video-play-toggle.is-playing {
  opacity: 0;
}

.story-video-wrap:hover .video-play-toggle.is-playing,
.video-play-toggle.is-playing:focus-visible {
  opacity: 1;
}

.project-hero {
  display: block;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  aspect-ratio: 2.94;
  object-fit: cover;
}

.project-meta {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 3.5rem) var(--gutter) clamp(1.5rem, 4vw, 2.5rem);
}

.project-year {
  font-family: var(--font-cormorant);
  font-style: italic;
  color: var(--color-muted);
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
}

.project-title {
  font-family: var(--font-fahkwang);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--color-accent);
  margin: 0 0 0.6rem;
}

.project-tags {
  font-family: var(--font-cormorant);
  font-style: italic;
  color: var(--color-muted);
  font-size: 1.15rem;
  margin: 0 0 1.75rem;
}

.project-copy p {
  font-family: var(--font-assistant);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 640px;
  margin: 0 0 1.25rem;
}

.project-gallery {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(3rem, 8vw, 5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vw, 3.5rem);
}

.project-gallery figure {
  margin: 0;
}

.project-gallery img {
  width: 100%;
  display: block;
}

.project-gallery figcaption {
  font-family: var(--font-assistant);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 640px;
  margin: 1rem auto 0;
  text-align: center;
  color: var(--color-fg);
}

/* The story block is the scaled design canvas: everything inside is placed at
   its 1440px-design offset times --page-scale, so the whole page tracks the
   source site at any width instead of being redistributed by the layout. */
.project-story {
  width: min(100%, calc(var(--design-width) * var(--page-scale)));
  margin: 0 auto;
  /* Top padding enlarged on purpose (user request) — gap from the page's
     hero image down to the first row, now original + 96px (2x48px extra).
     Row-to-row gap below is untouched. */
  padding: clamp(4.5rem, 12vw, 9rem) 0 clamp(2rem, 5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vw, 3.5rem);
}

.story-row {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0;
}

/* --x = the row's first child's left offset on the design canvas;
   --gap = the design-space gap from the first child's right edge to the
   second child's left edge. Both come from direct measurement of the
   source page (see _wix-reference/), not layout guesswork. */
.story-row > :first-child {
  margin-left: calc(var(--x, 0px) * var(--page-scale));
}

.story-row > :nth-child(2) {
  margin-left: calc(var(--gap, 0px) * var(--page-scale));
}

.story-row > :nth-child(3) {
  margin-left: calc(var(--gap2, 0px) * var(--page-scale));
}

.story-row.reverse {
  flex-direction: row-reverse;
}

.story-row > .story-text {
  flex: 0 0 calc(var(--tw) * var(--page-scale));
  position: sticky;
  top: 30px;
  align-self: flex-start;
}

.story-text {
  padding-top: 0.25rem;
}

.story-text .project-year {
  font-family: var(--font-cormorant);
  font-weight: 600;
  font-style: italic;
  color: var(--color-fg);
  font-size: clamp(20.28px, calc(20.28px + (100vw - 1440px) * 0.004729), 22.55px);
  margin: 0 0 0.5rem;
}

.story-text .project-title {
  font-family: var(--font-assistant);
  font-weight: 600;
  font-size: clamp(50.69px, calc(50.69px + (100vw - 1440px) * 0.011854), 56.38px);
  color: var(--color-accent);
  margin: 0 0 0.6rem;
}

.story-text .project-tags {
  font-family: var(--font-cormorant);
  font-weight: 600;
  font-style: italic;
  color: var(--color-fg);
  font-size: clamp(18px, calc(18px + (100vw - 1440px) * 0.004167), 20px);
  margin: 0 0 1.75rem;
}

.story-text p {
  font-family: var(--font-fahkwang);
  font-size: clamp(19.15px, calc(19.15px + (100vw - 1440px) * 0.001771), 20px);
  line-height: 1.4;
  margin: 0 0 1.25rem;
}

.story-text p:last-child {
  margin-bottom: 0;
}

.story-captions {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-fahkwang);
  font-size: clamp(19.15px, calc(19.15px + (100vw - 1440px) * 0.001771), 20px);
  line-height: 1.4;
}

.story-image {
  width: calc(var(--tw) * var(--page-scale));
  height: calc(var(--th) * var(--page-scale));
  max-width: 100%;
  object-fit: cover;
  display: block;
}

.story-image.solo,
.story-video-wrap--fixed.solo {
  /* Right-aligns to its own design-canvas x, same as a row's second child —
     NOT to the container's own right edge, which sits further right than
     this design column when the container is wider than the content block
     (e.g. a narrower image column vs a full-bleed hero above it). */
  margin-left: calc(var(--x, 0px) * var(--page-scale));
}

/* A standalone caption/paragraph that isn't paired with an image in a
   .story-row (it just introduces the image(s) below it) still needs the
   same left offset as the row text column, or it drifts out of alignment
   with everything else in the text column above and below it. */
.project-story > .story-text {
  margin-left: calc(var(--x, 0px) * var(--page-scale));
}

video.story-image {
  background: #000;
}

.story-image.full-width {
  width: 100%;
  max-width: 1600px;
  height: auto;
  margin: 0 auto;
}

.story-cluster {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--cgap, 24px) * var(--page-scale));
}

.story-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.story-col > .story-text {
  width: calc(var(--tw) * var(--page-scale));
}

.story-col > .story-image {
  margin-top: calc(var(--ytop, 0px) * var(--page-scale));
}

.story-cluster-col {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 3vw, 1.5rem);
}

.story-gallery {
  display: flex;
  gap: 0.75rem;
  max-width: 1430px;
  margin: 2.75rem auto 0;
  padding: 0 var(--gutter);
  align-items: flex-start;
}

.story-gallery-thumbs {
  flex: 0 0 110px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: clamp(320px, 42vw, 730px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.story-gallery-thumbs img {
  width: 110px;
  height: 110px;
  object-fit: cover;
  display: block;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease;
  flex: none;
}

.story-gallery-thumbs img:hover {
  opacity: 0.85;
}

.story-gallery-thumbs img.active {
  opacity: 1;
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.story-gallery-main {
  position: relative;
  flex: 1;
  min-width: 0;
  height: clamp(320px, 42vw, 730px);
}

.story-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

.story-gallery-next {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  color: var(--color-accent);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.story-gallery-next:hover {
  background: var(--color-accent);
  color: #ffffff;
}

.story-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  justify-content: center;
  padding: 0 var(--gutter);
}

.story-links a {
  font-family: var(--font-fahkwang);
  font-weight: 600;
  color: var(--color-accent);
  font-size: 1.1rem;
  border-bottom: 1px solid var(--color-accent);
}

.project-nav {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(3rem, 6vw, 4rem);
  text-align: center;
}

.project-nav a {
  font-family: var(--font-fahkwang);
  font-weight: 600;
  color: var(--color-accent);
  font-size: 1.1rem;
  border-bottom: 1px solid var(--color-accent);
}

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .site-header {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }

  .about-body {
    flex-direction: column;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  .about-portrait {
    flex-basis: auto;
    width: 100%;
  }

  .about-row {
    flex-direction: column;
    gap: 0.5rem;
  }

  .project-tile {
    flex: 1 1 100%;
  }

  .project-tile.tile-offset {
    top: 0;
  }

  .project-tile img {
    width: 100%;
    height: auto;
  }

  .category-inner {
    grid-template-columns: 1fr;
  }

  .category-heading,
  .category.align-right .category-heading,
  .category.align-right .category-inner .category-heading,
  .category-books .category-heading,
  .category-lettering .category-heading {
    position: static;
    text-align: left;
    order: 0;
    grid-row: auto;
    justify-self: stretch;
    margin: 0 0 1.5rem;
  }

  .category.align-right .project-tiles,
  .category.align-right .category-inner .project-tiles {
    order: 0;
    grid-row: auto;
    width: auto;
    margin-left: 0;
    max-width: 100%;
  }

  .category-books .project-tiles,
  .category-lettering .project-tiles {
    grid-row: auto;
    margin-left: 0;
    max-width: 100%;
  }

  .story-row,
  .story-row.reverse {
    flex-direction: column;
  }

  .story-row > :first-child,
  .story-row > :nth-child(2),
  .story-row > :nth-child(3),
  .story-image.solo,
  .story-video-wrap--fixed.solo,
  .project-story > .story-text {
    margin-left: 0;
  }

  .story-text {
    flex: none;
    width: 100%;
    position: static;
  }

  .story-image {
    width: 100%;
    height: auto;
    margin-left: 0;
  }

  .story-cluster {
    flex-direction: column;
    width: 100%;
  }

  .story-cluster img {
    width: 100%;
    height: auto;
  }

  .story-col {
    width: 100%;
  }

  .story-col > .story-text {
    width: 100%;
  }

  .story-col > .story-image {
    margin-top: 1.5rem;
  }

  .story-gallery {
    flex-direction: column;
  }

  .story-gallery-thumbs {
    flex-direction: row;
    width: 100%;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .story-gallery-main {
    width: 100%;
    height: 60vw;
  }
}