/* ==========================================================
   Naasz Arts — site styles
   Colours, type and spacing live in :root. Change them there.
   ========================================================== */
:root {
  --bg: #18181B;
  --surface: #1F1F23;
  --placeholder: #2E2E33;
  --line: #2A2A2F;
  --text: #EDEDED;
  --muted: #9A9AA2;
  --accent: #C8661C;
  --accent-light: #F5A863;

  --container: 1200px;
  --gutter: 24px;
  --header-h: 96px;
  --radius: 8px;     /* rounded corners on thumbnails and images */
  --panel-w: clamp(340px, 34vw, 540px);   /* home page: width of the fixed left panel */

  --font: 'Manrope', 'Helvetica Neue', Arial, sans-serif;          /* body text */
  --font-display: 'Saira', 'Helvetica Neue', Arial, sans-serif;  /* headings, nav, buttons */
}

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

/* ---------- Full-screen scroll snapping ----------
   Every .slide fills the screen and the page snaps to the next one.
   On phones it switches to gentle snapping (see bottom of file). */
html { scroll-behavior: smooth; }

/* Fallback only: CSS snapping when fullPage.js isn't running */
html:not(.fp-enabled) { scroll-snap-type: y mandatory; }

/* fullPage.js sizes each slide itself */
.fp-enabled .slide { min-height: 0; }
.fp-enabled .slide.fp-section { height: 100vh; height: 100svh; overflow: hidden; }
.fp-responsive .slide.fp-section { height: auto; min-height: 100svh; }
.fp-overflow { width: 100%; }

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

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

::selection { background: var(--accent); color: #111; }

a { color: inherit; }

/* Display font: echoes the wordmark */
h1, h2, h3,
.nav a, .btn, .eyebrow, .text-link,
.store-card strong, .next-link small, .next-link strong,
.email, .back, .details dt {
  font-family: var(--font-display);
}

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 8px;
  background: var(--accent); color: #111; padding: 8px 14px; z-index: 100;
}
.skip-link:focus { left: 8px; }

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

/* Everything sits above the grid layer */
.page { position: relative; z-index: 1; }

/* ---------- Brand corner (top right) ----------
   The three diagonal bands from the Naasz Arts letterhead, in muted dark oranges so they
   sit quietly on the charcoal. Flat colours (no gradients), so no banding. Behind all
   content; the header icons sit on top. */
.brand-corner {
  position: fixed;
  top: 0;
  right: 0;
  width: clamp(200px, 20vw, 320px);
  height: auto;
  z-index: 0;
  pointer-events: none;
}
.bc-dark  { fill: #2E1A10; }
.bc-mid   { fill: #4A2614; }
.bc-light { fill: #6A3416; }
@media (max-width: 760px) { .brand-corner { width: 150px; } }

/* ---------- Cursor grid reveal (background only) ---------- */
/* --grid-size: cell size. --grid-radius: how far it spreads.
   --grid-colour: line colour and strength. */
.checker {
  --grid-size: 40px;
  --grid-radius: 400px;
  --grid-colour: rgba(212, 122, 36, 0.08);
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-colour) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-colour) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  -webkit-mask-image: radial-gradient(var(--grid-radius) circle at var(--mx, 50%) var(--my, 50%), #000 0%, transparent 80%);
          mask-image: radial-gradient(var(--grid-radius) circle at var(--mx, 50%) var(--my, 50%), #000 0%, transparent 80%);
  opacity: 0;
  transition: opacity 0.9s ease;
}
.checker.is-active { opacity: 1; }

@media (hover: none) { .checker { display: none; } }

/* ---------- Header (fixed over every slide) ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  background: linear-gradient(to bottom, rgba(24, 24, 27, 0.85), rgba(24, 24, 27, 0));
}
.site-header .container {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wordmark img { height: 30px; width: auto; }

.nav ul {
  display: flex;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.nav a:hover { color: var(--text); border-color: var(--accent); }
.nav a.is-current, .nav a[aria-current="page"] { color: var(--text); border-color: var(--accent); }

/* Header icons: ArtStation and email, on every page */
.header-icons { display: flex; align-items: center; gap: 8px; }
.header-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;          /* comfortable tap size on phones */
  color: var(--text);
  transition: color 0.2s ease;
}
.header-icons a:hover { color: var(--accent); }
.header-icons svg { display: block; }
/* Project pages: close (X) button, top of the right-hand column, above the slide dots
   and level with the top of the image. Kept out of the header so the header is identical
   on every page and doesn't jump during page transitions. */
.close-project {
  position: fixed;
  top: calc(var(--header-h) + 40px - 11px);
  right: 30px;                       /* centred over the slide dots */
  z-index: 20;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
  border-radius: var(--radius);   /* rounded square, matching the thumbnails and photo */
  transition: color 0.2s ease, background 0.2s ease;
  view-transition-name: close-project;   /* fades in and out on its own between pages */
}
.close-project:hover { color: var(--accent); background: rgba(255, 255, 255, 0.05); }
.close-project svg { width: 22px; height: 22px; }
/* Sized so both icons look equally large (their artwork fills the box differently) */
.header-icons .icon-artstation { width: 26px; height: 26px; }
.header-icons .icon-mail { width: 24px; height: 19.2px; }

.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 0; padding: 0; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 6px;
}
.menu-toggle span { width: 22px; height: 2px; background: var(--text); transition: transform 0.2s ease, opacity 0.2s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Slides ---------- */
.slide {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 24px) 0 64px;
}

/* Full-bleed image behind a slide, with text over it */
.slide-image {
  align-items: flex-end;
  padding-bottom: clamp(56px, 9vh, 96px);
}
.slide-image .bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.slide-image .bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(24, 24, 27, 0.92) 0%, rgba(24, 24, 27, 0.35) 45%, rgba(24, 24, 27, 0) 70%),
    linear-gradient(to right, rgba(24, 24, 27, 0.55) 0%, rgba(24, 24, 27, 0) 55%);
}
.slide-image .container { position: relative; }

/* ---------- Images & placeholders ---------- */
.media {
  position: relative;
  overflow: hidden;
  background: var(--placeholder);
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Type ---------- */
.eyebrow {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
}

.slide h1, .slide-title {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 500;
  line-height: 1.05;
}

.lead {
  margin: 14px 0 0;
  max-width: 560px;
  color: #C9C9CF;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
}

.btn {
  display: inline-block;
  margin-top: 32px;
  padding: 13px 28px;
  border: 2px solid var(--accent);
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn:hover { background: var(--accent); color: #111; }

.text-link {
  display: inline-block;
  margin-top: 24px;
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--accent);
  transition: color 0.2s ease;
}
.text-link:hover { color: var(--accent-light); }
.text-link b { color: var(--accent); font-weight: 400; }
/* Drawn arrow icons: same stroke as the site's other icons, centred on the text */
.icon-arrow { display: inline-block; width: 0.95em; height: 0.95em; vertical-align: -0.12em; }
.text-link b .icon-arrow { transition: transform 0.2s ease; }
.text-link:hover b .icon-arrow { transform: translateX(3px); }
.panel-next strong .icon-arrow, .panel-back strong .icon-arrow { transition: transform 0.2s ease; }
.panel-next:hover strong .icon-arrow { transform: translateX(3px); }
.panel-back:hover strong .icon-arrow { transform: translateX(-3px); }
.icon-x { width: 18px; height: 18px; display: block; }
.lightbox-nav .icon-arrow { width: 20px; height: 20px; vertical-align: 0; }

.section-title {
  display: inline-block;
  margin: 0 0 40px;
  padding-bottom: 10px;
  font-size: 1.5rem;
  font-weight: 500;
  border-bottom: 3px solid var(--accent);
}

/* ---------- Selected work (one slide) ---------- */
/* Slide headings (Recent work, Work with me): white, a step larger than card titles, no underline */
.work-label {
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
}
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 8px;
}
.project a { display: block; text-decoration: none; }
.project .media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  isolation: isolate;   /* keeps the corners rounded while the image zooms on hover (Safari) */
  /* Grounding: a soft dark shadow underneath, plus a hairline edge so the card reads
     as a defined object on the charcoal */
  box-shadow:
    0 18px 40px -12px rgba(0, 0, 0, 0.7),
    0 4px 10px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: box-shadow 0.3s ease;
}
.project a:hover .media {
  box-shadow:
    0 24px 48px -12px rgba(0, 0, 0, 0.8),
    0 6px 14px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}
.project .media img { transition: transform 0.6s ease; }
.project a:hover .media img { transform: scale(1.03); }
.project .media::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.project a:hover .media::after { transform: scaleX(1); }
.project h3 {
  margin: 16px 0 4px;
  font-size: 1.15rem;
  font-weight: 500;
  transition: color 0.2s ease;
}
.project a:hover h3 { color: var(--accent-light); }
/* Orange arrow after each title: the same "this is a link" signal used everywhere else */
/* "Coming soon" card: same look as the others, but not clickable */
.project-soon { display: block; cursor: default; }
.project-soon .media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  box-shadow:
    0 18px 40px -12px rgba(0, 0, 0, 0.7),
    0 4px 10px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}
.project-soon .media img { filter: saturate(0.85) brightness(0.85); }
.soon-badge {
  position: absolute;
  top: 12px; left: 12px;
  padding: 5px 10px;
  background: rgba(24, 24, 27, 0.85);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--accent-light);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* With a single link in the bottom row, keep "Next project" on the right */
.panel-nav .panel-next { margin-left: auto; }
.card-arrow {
  position: relative;   /* stays inline so it never wraps away from the title */
  left: 0;
  color: var(--accent);
  transition: left 0.2s ease;
}
.project a:hover .card-arrow { left: 4px; }
.project p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.work-links {
  margin-top: 40px;
  display: flex;
  justify-content: flex-start;   /* both links grouped together on the left */
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 32px;
}
.work-links .text-link { margin-top: 0; }
.work-links .store-line { margin: 0; padding: 0; border: 0; }

/* ---------- About ---------- */
.about {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 64px;
  align-items: center;
}
.about-text p { margin: 0 0 16px; color: var(--muted); max-width: 620px; font-size: 1.05rem; }
.about-text p strong { color: var(--accent-light); font-weight: 500; }
.about-text p strong::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 1px;
}
.about-mark { width: 220px; aspect-ratio: 1; }

.tools {
  display: flex; flex-wrap: wrap; gap: 10px;
  list-style: none; margin: 24px 0 0; padding: 0;
}
.tools li {
  padding: 5px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  font-size: 14px;
  color: var(--muted);
}

/* ---------- Store ---------- */
.store-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.store-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 180px;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.store-card:hover { border-color: var(--accent); }
.store-card strong { font-size: 1.35rem; font-weight: 500; }
.store-card span { color: var(--muted); }
.store-card span b { color: var(--accent); font-weight: 400; transition: margin 0.2s ease; }
.store-card:hover span b { margin-left: 4px; }

/* ---------- Contact ---------- */
.contact-slide { flex-direction: column; justify-content: center; }
.contact p { margin: 0; color: var(--muted); }
.email {
  display: inline-block;
  margin: 24px 0 20px;
  font-size: clamp(1.6rem, 5vw, 3.2rem);
  text-decoration: none;
  border-bottom: 3px solid var(--accent);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.email:hover { color: var(--accent-light); }
.contact .secondary a { color: var(--text); }
.contact .secondary a:hover { color: var(--accent-light); }

/* ---------- Contact (closing slide) ---------- */
.closing-slide { flex-direction: column; justify-content: center; padding-bottom: 120px; }
.closing { display: flex; flex-direction: column; align-items: flex-start; }
/* Hidden visually, still announced by screen readers so the section has a name */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.blurb { margin: 0 0 20px; color: var(--muted); max-width: 560px; font-size: 1.1rem; }
.available { margin: 0; }
.available strong { color: var(--accent-light); font-weight: 500; }
.available strong::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 1px;
}
.closing .available {
  max-width: 640px;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.5;
}
.closing .work-label { margin-bottom: 14px; }

/* Contact slide: details on the left, client testimonial on the right.
   Stacks (testimonial underneath) when there isn't room side by side. */
.container.closing {
  display: grid;
  grid-template-columns: auto minmax(280px, 380px);
  justify-content: start;
  align-items: start;
  column-gap: 96px;
}
.testimonial {
  margin: 0;
  padding-left: 24px;
  border-left: 2px solid var(--line);
  /* starts level with the intro sentence, below the heading */
  margin-top: calc(clamp(1.35rem, 1.9vw, 1.7rem) * 1.2 + 14px);
}
.testimonial blockquote { margin: 0; }
.testimonial blockquote p {
  margin: 0;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.65;
}
.testimonial blockquote p::before { content: "\201C"; }
.testimonial blockquote p::after { content: "\201D"; }
.testimonial figcaption {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;   /* name on the left, logo at the bottom right */
  gap: 16px;
  font-size: 0.95rem;
}
.testimonial figcaption strong { font-family: var(--font-display); font-weight: 500; color: var(--text); }
.testimonial figcaption span { color: var(--muted); }
.client-name { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.client-name span { color: var(--muted); }
.client-logo-link { display: inline-flex; flex-shrink: 0; }
/* Turns the logo into a flat off-white silhouette, like the ArtStation and email icons */
.client-logo {
  height: 34px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.93;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
/* On hover: the site's orange, like the header icons */
.client-logo-link:hover .client-logo,
.client-logo-link:focus-visible .client-logo {
  filter: brightness(0) saturate(100%) invert(47%) sepia(63%) saturate(1220%) hue-rotate(349deg) brightness(92%) contrast(91%);
  opacity: 1;
}
@media (max-width: 1599px) {
  .container.closing { grid-template-columns: minmax(0, 1fr); }
  .testimonial { margin-top: 40px; max-width: 560px; }
}
.closing .email { white-space: nowrap; }   /* never break the address across lines */   /* text follows directly, so less gap than above the cards */
.closing .contact-intro {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
}
.closing .email {
  margin: 36px 0 0;
  font-size: clamp(1.8rem, 4.2vw, 3.6rem);
  font-weight: 400;
  padding-bottom: 4px;
  border-bottom-width: 4px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.closing .email:hover { color: var(--accent-light); border-color: var(--accent-light); }

/* Quiet row under the email: Copy email · UK time */
.email-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.95rem;
}
.email-meta .sep { color: var(--muted); opacity: 0.5; }
.copy-email {
  min-height: 44px;            /* comfortable tap size on phones */
  padding: 0;
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}
.copy-email svg { width: 15px; height: 15px; }
.copy-email:hover { color: var(--accent-light); }
.copy-email.is-copied { color: var(--accent-light); }
.closing .secondary { margin: 0; color: var(--muted); }

.store-line {
  margin: 48px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline;
  color: var(--muted);
  font-size: 15px;
}
.store-line a { color: var(--text); text-decoration: none; transition: color 0.2s ease; }
.store-line a:hover { color: var(--accent-light); }
.store-line b { color: var(--accent); font-weight: 400; }
.store-line .sep { color: var(--line); }

/* ---------- Footer (sits at the bottom of the last slide) ---------- */
.site-footer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  border-top: 1px solid var(--line);
}
.site-footer .container {
  padding-top: 24px; padding-bottom: 24px;
  display: flex; justify-content: flex-end; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 14px; color: var(--muted);
}
.socials { display: flex; gap: 20px; }
.socials a { color: var(--muted); font-size: 1.15rem; transition: color 0.2s ease; }
.socials a:hover { color: var(--accent); }

/* ---------- Split layout (home + project pages): fixed left panel, scrolling right side ---------- */
.split .site-header .container { max-width: none; padding: 0 30px 0 40px; }  /* icon artwork ends 40px from the edge, like the wordmark */

.side-panel {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--panel-w);
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 40px clamp(48px, 8vh, 88px);
  overflow: hidden;
  background: var(--bg);
  border-right: 1px solid var(--line);
}
.side-panel .bg { position: absolute; inset: 0; z-index: 0; }
/* Which part of the hero render shows in the tall panel. 50% = centre of the image;
   lower numbers show more of the left side, higher numbers more of the right.
   12% keeps the gate's left pillar in frame on narrower screens (big monitors, phones). */
.home .side-panel .bg img { object-position: 12% center; }
.side-panel .bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Darkens the render only where text sits (bottom) and lightly behind the wordmark (top) */
  background: linear-gradient(to top, rgba(24, 24, 27, 0.92) 0%, rgba(24, 24, 27, 0.55) 28%, rgba(24, 24, 27, 0.05) 55%, rgba(24, 24, 27, 0.05) 74%, rgba(24, 24, 27, 0.4) 88%, rgba(24, 24, 27, 0.75) 100%);
}
.side-content { position: relative; z-index: 1; }
/* Photo + name sit together as one unit above the headline */
.identity {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}
.avatar {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: var(--radius);   /* rounded square, matching the project thumbnails */
  object-fit: cover;
}
/* Two short lines next to the photo, so the text block is about as tall as the photo
   without making your name big */
.identity-text { display: flex; flex-direction: column; gap: 3px; }
.identity-sub { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.3; }
.identity-name {
  margin: 0;
  color: var(--accent-light);   /* lighter orange: the darker orange disappeared against the warm hero render */
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Only the headline is white; supporting text stays grey */
.side-panel .lead { color: var(--muted); }
.side-panel h1 {
  margin: 0;
  font-size: clamp(1.9rem, 2.7vw, 2.7rem);
  font-weight: 500;
  line-height: 1.05;
}

.split main { margin-left: var(--panel-w); }
.split .slide .container { max-width: 1400px; padding: 0 88px 0 clamp(32px, 3vw, 56px); }  /* right side leaves room for the slide dots */

@media (max-width: 1180px) and (min-width: 761px) {
  .split .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split .work-grid .project:nth-child(3) { display: none; }  /* two cards fit better here */
}

/* Project pages: the left panel holds the project's details */
.project-panel {
  --title-nudge: 6px;   /* lifts the title so its letters, not its line box, meet the image's top edge */
  justify-content: flex-start;
  overflow-y: auto;
  /* The title starts level with the top of the image on the right */
  padding-top: calc(var(--header-h) + 40px - var(--title-nudge, 0px));
  padding-bottom: 80px;   /* navigation ends level with the bottom of the image area */
}
.project-panel .back { margin: 0; }
.project-panel h1 { font-size: clamp(2rem, 3vw, 3rem); }
.panel-text { margin: 12px 0 0; color: var(--muted); max-width: 460px; font-size: 0.95rem; line-height: 1.6; }
.project-panel .details-row { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 22px 0 0; }
.project-panel .details-row div { margin: 0; }
.tool { display: inline-flex; align-items: center; gap: 7px; margin-right: 14px; }
.tool:last-child { margin-right: 0; }
.tool svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); }
.project-panel .text-link { margin-top: 22px; }
/* Bottom of the panel: "← Home" on the left, next project on the right */
.panel-nav {
  margin-top: auto;                         /* pushes it to the bottom of the panel */
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: flex-start;   /* labels line up even when a long name wraps */
  justify-content: space-between;
  gap: 24px;
}
.project-panel .side-content { margin-bottom: 40px; }
.panel-next {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  text-decoration: none;
}
/* "Back to Home" (left) and "Next project" (right) share the same two-line style */
.panel-back {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
}
.panel-back small, .panel-next small { color: var(--accent); font-family: var(--font-display); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.panel-back strong, .panel-next strong { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; line-height: 1.35; transition: color 0.2s ease; }
.panel-back, .panel-next { flex: 1 1 0; min-width: 0; }   /* each side gets half; long names wrap neatly */
.panel-back:hover strong, .panel-next:hover strong { color: var(--accent-light); }

/* Project pages inside the split: renders get as much of the right side as possible */
.split .gallery-slide { padding-left: 40px; padding-right: 88px; }  /* clear of the slide dots */

/* ---------- Page transitions ----------
   Moving between pages, the left panel and header stay perfectly still while the
   right side cross-fades. Supported in Chrome, Edge and Safari (desktop and mobile);
   other browsers simply load the page normally. Only works on the live site, not when
   opening the files directly from your computer. */
@view-transition { navigation: auto; }
.side-panel { view-transition-name: side-panel; }
.site-header { view-transition-name: site-header; }
::view-transition-group(side-panel),
::view-transition-group(site-header),
::view-transition-old(site-header),
::view-transition-new(site-header) { animation: none; }
/* The panel stays in place; its text cross-fades to the new page's content */
::view-transition-old(side-panel) { animation: 0.25s ease both fade-out; }
::view-transition-new(side-panel) { animation: 0.35s ease 0.1s both fade-in; }
::view-transition-old(root) { animation: 0.35s ease both fade-out; }
::view-transition-new(root) { animation: 0.45s ease 0.1s both fade-in; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

/* Footer text ends 40px from the edge, in line with the header icons and slide dots */
.split .site-footer .container { max-width: none; padding-right: 40px; }

/* ---------- 404 page ---------- */
.not-found-page .site-header .container { max-width: none; padding: 0 40px; }
.not-found {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: var(--header-h) 0 64px;
}
.not-found .container { max-width: none; padding: 0 40px; }
.not-found h1 { margin: 0; font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 500; line-height: 1.05; }
@media (max-width: 760px) {
  .not-found-page .site-header .container, .not-found .container { padding: 0 var(--gutter); }
}

/* ---------- Project pages: sideways navigation + full-size image viewer ---------- */
/* Stop the browser's own two-finger back/forward swipe from fighting ours */
html:has(body.project-page), body.project-page { overscroll-behavior-x: none; }

.gallery-slide .media img.is-zoomable { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 76px 24px 24px;   /* top space keeps the close button clear of the image */
  background: rgba(12, 12, 14, 0.94);
  cursor: zoom-out;
  touch-action: pinch-zoom;   /* phones: pinch to zoom into detail */
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
}
/* Desktop: click the image again to see it at full resolution, then scroll around it */
.lightbox.is-actual { align-items: flex-start; justify-content: flex-start; overflow: auto; }
.lightbox.is-actual img { max-width: none; max-height: none; border-radius: 0; cursor: grab; }
.lightbox.is-panning, .lightbox.is-panning img { cursor: grabbing; user-select: none; }
.lightbox:not(.is-actual) img { cursor: zoom-in; }
.lightbox-close {
  position: fixed;
  top: 20px; right: 24px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(24, 24, 27, 0.8);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { border-color: var(--accent); color: var(--accent-light); }
/* Previous / next arrows and the image counter */
.lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(24, 24, 27, 0.8);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}
.lightbox-nav:hover { border-color: var(--accent); color: var(--accent-light); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-nav[hidden] { display: none; }
.lightbox-count {
  position: fixed;
  bottom: 14px; left: 0; right: 0;
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.06em;
  pointer-events: none;
}
.lightbox { padding-left: 80px; padding-right: 80px; padding-bottom: 44px; }
.lightbox.is-actual { padding: 0; }
@media (max-width: 760px) {
  .lightbox { padding-left: 12px; padding-right: 12px; }
  .lightbox-nav { top: auto; bottom: 8px; transform: none; }
  .lightbox-prev { left: 12px; }
  .lightbox-next { right: 12px; }
}

/* ---------- Slide dots (right edge, desktop) ---------- */
.dots {
  position: fixed;
  right: 47px;          /* centred under the email icon */
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dots button {
  width: 10px; height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--muted);
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.dots button:hover { border-color: var(--text); }
.dots button[aria-current="true"] { background: var(--accent); border-color: var(--accent); transform: scale(1.2); }

/* ---------- Project page ---------- */
.back {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
}
.back:hover { color: var(--accent-light); }

.project-info {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 64px;
  align-items: start;
}
.project-info p { margin: 0 0 16px; color: var(--muted); max-width: 640px; font-size: 1.05rem; }

.details { margin: 0; }
.details div { margin-bottom: 18px; }
.details dt { font-size: 13px; color: var(--accent); }
.details dd { margin: 2px 0 0; }

/* Gallery slides show the whole render, never cropped */
.gallery-slide { padding-left: 64px; padding-right: 64px; } /* room for the slide dots */
.gallery-slide figure { margin: 0; width: 100%; }
.gallery-slide .media {
  width: 100%;
  height: calc(100svh - 2 * (var(--header-h) + 24px));
  background: transparent;
  display: flex;
  align-items: center;       /* renders sit in the middle of the screen, level with the slide dots */
  justify-content: center;
}
/* Same space above and below the image area, so it's centred on the screen */
.project-page .gallery-slide { padding-bottom: calc(var(--header-h) + 24px); }
/* The image itself is sized to fit, so the rounded corners sit on the render, not the empty box */
.gallery-slide .media img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius);
}
.gallery-slide .media:not(:has(img)) { background: var(--placeholder); border-radius: var(--radius); }
.gallery-slide .pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
/* Four detail shots in a 2 x 2 grid, sized so the whole grid fits the screen height.
   Each tile is 16:9; renders of a different shape are trimmed slightly to fill their tile. */
.gallery-slide .quad {
  --quad-gap: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--quad-gap);
  width: min(100%, calc((100svh - 2 * (var(--header-h) + 24px) - var(--quad-gap)) * 16 / 9 + var(--quad-gap)));
  margin: 0 auto;
}
.gallery-slide .quad .media { height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; }
.gallery-slide .quad .media img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; border-radius: 0; }
/* Same grounding shadow and hairline edge as the home page cards */
.gallery-slide .media img,
.gallery-slide .quad .media,
.gallery-slide .media:not(:has(img)) {
  box-shadow:
    0 18px 40px -12px rgba(0, 0, 0, 0.7),
    0 4px 10px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}
.gallery-slide .quad .media img { box-shadow: none; }   /* the tile carries the shadow */
.gallery-slide figure .media { overflow: visible; }      /* let the shadow show around single images */
.caption { margin: 12px 0 0; font-size: 14px; color: var(--muted); text-align: center; }

.next-slide { flex-direction: column; justify-content: center; text-align: center; }
.next-link { text-decoration: none; display: inline-flex; flex-direction: column; gap: 8px; }
.next-link small { color: var(--accent); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.next-link strong { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 500; line-height: 1.1; transition: color 0.2s ease; }
.next-link:hover strong { color: var(--accent-light); }

/* ---------- Phone & tablet ---------- */
@media (max-width: 760px) {
  :root { --gutter: 20px; --header-h: 72px; }

  /* Gentle snapping on phones: tall slides stay fully scrollable */
  html, html:not(.fp-enabled) { scroll-snap-type: y proximity; }

  .wordmark img { height: 22px; }

  .menu-toggle { display: flex; }
  .nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    display: none;
  }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; gap: 0; padding: 8px var(--gutter) 16px; }
  .nav a { display: block; padding: 12px 0; font-size: 17px; border: 0; }

  .dots { display: none; }

  /* Project pages on phones: details first, then the images stacked below */
  .split.project-page .side-panel {
    min-height: 0;
    padding-top: calc(var(--header-h) + 16px);
    padding-bottom: 40px;
    border-bottom: 1px solid var(--line);
  }
  .project-page .gallery-slide { min-height: 0; padding: 12px var(--gutter); }

  /* Home on phones: the left panel becomes the first screen */
  .split .side-panel {
    position: relative;
    width: auto;
    min-height: 100svh;
    border-right: 0;
    padding: 0 var(--gutter) 56px;
    scroll-snap-align: start;
  }
  .split main { margin-left: 0; }
  .split .site-header .container { padding: 0 calc(var(--gutter) - 10px) 0 var(--gutter); }
  .split .slide .container { padding: 0 var(--gutter); }
  /* Phones: X sits top-right of the project details, and scrolls with the page */
  .close-project { position: absolute; top: calc(var(--header-h) + 8px); right: calc(var(--gutter) - 10px); }
  .split .site-footer .container { padding-right: var(--gutter); }
  .gallery-slide { padding-left: var(--gutter); padding-right: var(--gutter); }

  .store-grid, .gallery-slide .pair, .gallery-slide .quad, .work-grid { grid-template-columns: 1fr; }
  .gallery-slide .quad { width: 100%; }
  .about, .project-info { grid-template-columns: 1fr; gap: 32px; }
  .about-mark { width: 140px; }
  .gallery-slide .media { height: auto; aspect-ratio: 16 / 9; }
  .gallery-slide .pair .media { aspect-ratio: 4 / 3; }

  .closing-slide { padding-bottom: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}


/* ---------- Project panel on shorter screens (laptops) ----------
   Long descriptions: tighter spacing so as much as possible fits; if it still
   doesn't, the panel scrolls, with a visible slim scrollbar and a fade at the
   bottom edge so visitors can see there's more. */
@media (min-width: 761px) and (max-height: 960px) {
  .project-panel h1 { font-size: clamp(1.8rem, 2.6vw, 2.5rem); }
  .project-panel .panel-text { margin-top: 9px; font-size: 0.92rem; line-height: 1.55; }
  .project-panel .details-row { margin-top: 16px; }
  .project-panel .text-link { margin-top: 16px; }
  .project-panel .side-content { margin-bottom: 24px; }
  .panel-nav { padding-top: 14px; }
}
.project-panel { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.project-panel::-webkit-scrollbar { width: 6px; }
.project-panel::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.project-panel.is-scrollable {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
}
.project-panel.is-scrollable.at-end { -webkit-mask-image: none; mask-image: none; }


/* ---------- Before / after comparison slider (project pages) ---------- */
.compare {
  --pos: 50%;
  position: relative;
  width: min(100%, calc((100svh - 2 * (var(--header-h) + 24px)) * 16 / 9));
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--placeholder);
  box-shadow:
    0 18px 40px -12px rgba(0, 0, 0, 0.7),
    0 4px 10px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  user-select: none;
}
.compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;      /* both images fill the slider exactly, so matching renders line up pixel for pixel */
  display: block;
  pointer-events: none;
}
/* The clay render shows on the left of the handle, the final render on the right */
.compare-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--text);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.compare-grip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(24, 24, 27, 0.85);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.compare-grip svg { width: 18px; height: 18px; }
.compare:hover .compare-grip,
.compare.is-dragging .compare-grip,
.compare:focus-within .compare-grip { border-color: var(--accent); color: var(--accent-light); }
.compare-tag {
  position: absolute;
  top: 12px;
  padding: 4px 10px;
  background: rgba(24, 24, 27, 0.75);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}
.compare-tag-before { left: 12px; opacity: clamp(0, calc((var(--p, 50) - 8) / 12), 1); }
.compare-tag-after { right: 12px; opacity: clamp(0, calc((92 - var(--p, 50)) / 12), 1); }
/* Invisible slider over the whole image: drag anywhere, works with mouse, touch and keyboard */
.compare { cursor: ew-resize; touch-action: pan-y; }
.compare-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;   /* mouse and touch are handled by the slider itself; this is for keyboard users */
}
@media (max-width: 760px) { .compare { width: 100%; } }