/* ==========================================================================
   Design tokens — palette pulled from your moodboard:
   olive 5A5E27 / wine 640017 / near-black brown 2F1B1A / ivory EFEFC9
   ========================================================================== */
:root{
  --ivory:      #EFEFC9;
  --ivory-dim:  #e6e6ba;
  --ink:        #2F1B1A;
  --wine:       #640017;
  --wine-light: #8a1f31;
  --olive:      #5A5E27;
  --olive-light:#7c8138;

  --bg:      var(--ivory);
  --bg-card: #f7f7e2;
  --text:    var(--ink);
  --text-soft: rgba(47,27,26,0.62);
  --accent:  var(--wine);
  --accent-soft: var(--olive);
  --border:  rgba(47,27,26,0.14);

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-script: "Caveat", cursive;

  --ease: cubic-bezier(.22,.7,.24,1);
  --container: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3{ font-family: var(--font-display); font-weight: 500; margin: 0; }
p{ margin: 0; }
ul{ margin:0; padding:0; list-style:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

.section-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
}

.eyebrow{
  font-family: var(--font-script);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  color: var(--accent);
  margin-bottom: 0.4rem;
  display: inline-block;
}
.eyebrow--light{ color: var(--ivory); opacity: .85; }

.section-title{
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  letter-spacing: -0.01em;
  margin-bottom: clamp(2rem, 6vw, 3.5rem);
}

.section-title--script{
  font-family: var(--font-script);
  font-weight: 500;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
}
.section-title--script strong{
  font-weight: 700;
  color: var(--accent);
}

/* Reveal-on-scroll */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* Progress bar */
.progress-bar{
  position: fixed; top:0; left:0; height: 3px; width: 0%;
  background: var(--accent); z-index: 999; transition: width .1s linear;
}

/* ==========================================================================
   Nav
   ========================================================================== */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  padding: 1.1rem 0;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
}
.site-header.scrolled{
  background: rgba(239,239,201,0.85);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--border);
  padding: 0.75rem 0;
}
.nav-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo{
  font-family: var(--font-script);
  font-size: 1.7rem;
  color: var(--text);
}
.nav-links{ display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.2rem); }
.nav-link{
  font-size: 0.95rem; font-weight: 600; letter-spacing: .01em;
  position: relative; padding: .3rem 0;
}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background: currentColor; transition: width .3s var(--ease);
}
.nav-link:hover::after{ width: 100%; }
.nav-link--cta{
  background: var(--accent); color: var(--ivory) !important;
  padding: .55rem 1.2rem; border-radius: 999px;
}

/* Work dropdown (category -> project flyout) */
.nav-dropdown{ position: relative; }
.nav-dropdown__trigger{ display: inline-flex; align-items: center; gap: .35rem; }
.nav-dropdown__chevron{ width: 9px; height: 9px; transition: transform .3s var(--ease); }
.nav-dropdown:hover .nav-dropdown__chevron,
.nav-dropdown.is-open .nav-dropdown__chevron{ transform: rotate(180deg); }

.nav-dropdown__panel{
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  padding-top: 1rem; /* closes the hover gap between trigger and card below */
  min-width: 230px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, visibility .25s;
  z-index: 600;
}
.nav-dropdown__panel-inner{
  background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 48px -20px rgba(47,27,26,.35);
  padding: .5rem;
  transform: translateY(6px);
  transition: transform .25s ease;
}
.nav-dropdown:hover .nav-dropdown__panel-inner,
.nav-dropdown:focus-within .nav-dropdown__panel-inner,
.nav-dropdown.is-open .nav-dropdown__panel-inner{ transform: translateY(0); }
.nav-dropdown:hover .nav-dropdown__panel,
.nav-dropdown:focus-within .nav-dropdown__panel,
.nav-dropdown.is-open .nav-dropdown__panel{
  opacity: 1; visibility: visible; pointer-events: auto;
}

.nav-dropdown__cat{
  position: relative;
  padding: .6rem .9rem; border-radius: 8px;
  font-size: .88rem; font-weight: 600; color: var(--text);
  cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  transition: background .2s ease, color .2s ease;
}
.nav-dropdown__cat:hover, .nav-dropdown__cat.is-open{ background: var(--bg-card); color: var(--accent); }
.nav-dropdown__cat-arrow{ width: 7px; height: 7px; opacity: .45; flex-shrink: 0; }

.nav-dropdown__sub{
  position: absolute; top: -.5rem; left: 100%;
  padding-left: .6rem; /* closes the hover gap; card chrome lives on the inner box */
  min-width: 220px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, visibility .2s;
}
.nav-dropdown__sub-inner{
  background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 48px -20px rgba(47,27,26,.35);
  padding: .5rem;
  display: flex; flex-direction: column;
}
.nav-dropdown__cat:hover .nav-dropdown__sub,
.nav-dropdown__cat:focus-within .nav-dropdown__sub,
.nav-dropdown__cat.is-open .nav-dropdown__sub{
  opacity: 1; visibility: visible; pointer-events: auto;
}
.nav-dropdown__sub a{
  padding: .55rem .8rem; border-radius: 8px; font-size: .85rem; font-weight: 600; color: var(--text);
  transition: background .2s ease, color .2s ease;
}
.nav-dropdown__sub a:hover{ background: var(--bg-card); color: var(--accent); }
.nav-link--cta::after{ display:none; }
.nav-link--cta:hover{ background: var(--wine-light); }

.nav-toggle{
  display:none; flex-direction: column; justify-content: center; gap: 5px;
  width: 34px; height: 34px; background: none; border: none; cursor: pointer; padding: 0;
}
.nav-toggle span{
  display:block; height: 2px; width: 100%; background: var(--text);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 6rem clamp(1.5rem, 5vw, 3rem) clamp(9rem, 16vw, 11rem);
  max-width: var(--container);
  margin: 0 auto;
  overflow: hidden;
}
.hero-blob{
  position: absolute;
  width: min(60vw, 55vh, 640px); height: min(60vw, 55vh, 640px);
  top: 50%; right: clamp(1rem, 4vw, 3rem); transform: translateY(-50%);
  background: radial-gradient(circle at 30% 30%, var(--olive-light), var(--wine) 65%, transparent 75%);
  filter: blur(60px);
  opacity: .35;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  transition: transform .3s ease-out;
  animation: blobFloat 12s ease-in-out infinite;
}
@keyframes blobFloat{
  0%,100%{ border-radius: 50% 50% 50% 50%; }
  33%{ border-radius: 60% 40% 55% 45%; }
  66%{ border-radius: 45% 55% 40% 60%; }
}
.hero-inner{ position: relative; z-index: 1; max-width: 780px; }
.hero-title{
  font-size: clamp(2.8rem, 8vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  display: flex; flex-direction: column; gap: .1em;
}
.hero-title__accent{
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.hero-lede{
  margin-top: 1.6rem;
  max-width: 46ch;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--text-soft);
}
.hero-actions{ margin-top: 2.4rem; display: flex; gap: 1rem; flex-wrap: wrap; }

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: .95rem 1.9rem;
  border-radius: 999px;
  font-weight: 700; font-size: .95rem;
  transition: transform .35s var(--ease), background .3s ease, color .3s ease, box-shadow .3s ease;
  will-change: transform;
}
.btn--primary{ background: var(--accent); color: var(--ivory); }
.btn--primary:hover{ background: var(--ink); box-shadow: 0 10px 24px -8px rgba(47,27,26,.4); }
.btn--ghost{ border: 1.5px solid var(--border); color: var(--text); }
.btn--ghost:hover{ border-color: var(--text); background: var(--ink); color: var(--ivory); }

.scroll-badge{
  position: absolute; left: clamp(1.5rem, 5vw, 3rem); bottom: 2rem;
  width: 96px; height: 96px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-soft);
  transition: color .3s ease, transform .3s var(--ease);
}
.scroll-badge:hover{ color: var(--accent); transform: scale(1.06); }
.scroll-badge__ring{
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: currentColor;
  animation: spinSlow 14s linear infinite;
}
.scroll-badge__arrow{
  position: relative; z-index: 1;
  width: 18px; height: 18px;
  color: var(--accent);
  animation: bounceArrow 1.7s ease-in-out infinite;
}
.scroll-badge__arrow svg{ width: 100%; height: 100%; }
@keyframes spinSlow{ to{ transform: rotate(360deg); } }
@keyframes bounceArrow{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(6px); } }

/* ==========================================================================
   About
   ========================================================================== */
.about{ padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(3rem, 6vw, 4rem); }
.about-grid{
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.about-media{ display: flex; flex-direction: column; }
.about-photo{
  aspect-ratio: 4/5; width: 100%;
  border: 1.5px dashed var(--border);
  border-radius: 18px;
  background: var(--bg-card);
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--text-soft); font-size: .9rem;
  padding: 1rem;
}
.about-photo__caption{
  margin-top: 1.2rem; font-size: .85rem; line-height: 1.5; color: var(--text-soft);
}
.about-photo__caption-label{
  display: block;
  font-family: var(--font-script); font-size: 1.3rem; color: var(--accent-soft);
  margin-bottom: .2rem;
}
.about-copy{ font-size: 1.05rem; color: var(--text-soft); display: flex; flex-direction: column; gap: 1.3rem; }
.about-copy__lead{
  font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  color: var(--text); font-style: italic; font-weight: 400;
}
.about-copy__quote{
  font-family: var(--font-script); font-size: 1.6rem; line-height: 1.3;
  color: var(--accent-soft); margin-top: .4rem;
}
.stats-row{
  display: flex; gap: clamp(1.2rem, 3vw, 2rem); margin-top: 1.6rem;
  padding-top: 1.6rem; border-top: 1px solid var(--border); flex-wrap: wrap;
}
.stat{ display: flex; flex-direction: column; }
.stat__num{
  font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.4rem); color: var(--accent); line-height: 1;
}
.stat__label{ font-size: .78rem; color: var(--text-soft); margin-top: .4rem; }

/* ==========================================================================
   Archive
   ========================================================================== */
.archive{ padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(5rem, 10vw, 8rem); }
.archive-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 160px;
  gap: clamp(.8rem, 2vw, 1.2rem);
}
.archive-tile{
  border: 1.5px dashed var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-soft); font-size: .8rem;
  overflow: hidden;
  transition: transform .4s var(--ease);
}
.archive-tile:hover{ transform: scale(1.03); }
.archive-tile img{ width: 100%; height: 100%; object-fit: cover; }
.archive-tile--tall{ grid-row: span 2; }

/* ==========================================================================
   Forte / marquee
   ========================================================================== */
.forte{
  position: relative;
  background: var(--ink); color: var(--ivory);
  padding: clamp(1.8rem, 4vw, 2.5rem) 0 calc(clamp(1.8rem, 4vw, 2.5rem) + 3rem);
  overflow: hidden;
}
.forte-blob{
  position: absolute; inset: -30%;
  background: radial-gradient(circle at 28% 35%, var(--olive-light) 0%, var(--olive) 32%, var(--ink) 68%, transparent 72%);
  opacity: .55;
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
  animation: blobFloat 16s ease-in-out infinite;
}
.forte::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: clamp(7rem, 16vw, 11rem);
  background: linear-gradient(to bottom,
    rgba(239,239,201,0) 0%,
    rgba(239,239,201,0.35) 55%,
    rgba(239,239,201,0.75) 80%,
    var(--bg) 100%);
  z-index: 2;
  pointer-events: none;
}
.forte-heading{
  position: relative; z-index: 1;
  text-align: center; font-family: var(--font-script);
  font-size: clamp(1.5rem, 3vw, 2rem); color: var(--ivory);
  opacity: .85; margin-bottom: 2rem;
}
.marquee{
  position: relative; z-index: 1;
  overflow: hidden; white-space: nowrap; margin: .6rem 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display: inline-flex; gap: 2.2rem;
  animation: marqueeLeft 28s linear infinite;
}
.marquee--right .marquee-track{ animation-name: marqueeRight; animation-duration: 34s; }
.marquee-track span{
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  color: var(--ivory-dim);
  padding: .2rem 1.4rem;
  border: 1px solid rgba(239,239,201,0.18);
  border-radius: 999px;
}
.marquee--right .marquee-track span{ color: var(--ivory); opacity: .6; }
@keyframes marqueeLeft{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@keyframes marqueeRight{ from{ transform: translateX(-50%); } to{ transform: translateX(0); } }

/* ==========================================================================
   Why
   ========================================================================== */
.why{
  background: linear-gradient(180deg, var(--wine) 0%, var(--ink) 100%);
  color: var(--ivory);
  padding: clamp(3rem, 7vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}
.why-statement{
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  line-height: 1.15;
  max-width: 900px; margin: 0 auto;
  font-style: italic; font-weight: 400;
}
.why-body{
  max-width: 60ch; margin: 1.8rem auto 0;
  color: rgba(239,239,201,0.75); font-size: 1.05rem;
}

/* ==========================================================================
   Work / projects grid
   ========================================================================== */
.work{ position: relative; padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(5rem, 10vw, 9rem); overflow: hidden; }
.work-blob{
  position: absolute; top: clamp(1rem, 4vw, 3rem); right: clamp(1rem, 4vw, 3rem);
  width: min(50vw, 50vh, 560px); aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, var(--wine-light) 0%, var(--wine) 45%, transparent 72%);
  opacity: .22;
  filter: blur(80px);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  animation: blobFloat 18s ease-in-out infinite;
}
.work > .section-inner{ position: relative; z-index: 1; }
.work-grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.2rem);
}
.project-card{
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  transform: perspective(800px);
}
.project-card:hover{
  box-shadow: 0 30px 50px -25px rgba(47,27,26,.35);
}
.project-card__media{
  aspect-ratio: 4/3;
  background: var(--bg-card);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-soft); font-size: .85rem;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.project-card__media:has(span){
  background: repeating-linear-gradient(135deg, var(--ivory-dim), var(--ivory-dim) 10px, var(--bg-card) 10px, var(--bg-card) 20px);
}
.project-card__media img{ max-width: 55%; max-height: 55%; width: auto; height: auto; object-fit: contain; }
.project-card__media--photo img{ max-width: none; max-height: none; width: 100%; height: 100%; object-fit: cover; }
.project-card__body{ padding: 1.4rem 1.5rem 1.7rem; }
.project-card__tag{
  font-size: .75rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--accent-soft); font-weight: 700;
}
.project-card__title{
  margin-top: .5rem; font-size: 1.4rem;
}
.project-card__desc{
  margin-top: .5rem; font-size: .92rem; color: var(--text-soft);
}
.project-card__link{
  display: inline-block; margin-top: 1rem; font-weight: 700; font-size: .9rem;
  color: var(--accent);
  transform: translateX(0); transition: transform .3s var(--ease);
}
.project-card:hover .project-card__link{ transform: translateX(4px); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{
  background: var(--ink); color: var(--ivory);
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 2rem;
  text-align: center;
}
.contact-title{
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1.1;
}
.contact-cta{ margin-top: 2.2rem; }

.social-row{
  display: flex; justify-content: center; gap: 1.1rem;
  margin-top: 2.8rem; flex-wrap: wrap;
}
.social-icon{
  width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid rgba(239,239,201,0.25);
  display: flex; align-items: center; justify-content: center;
  transition: transform .35s var(--ease), background .3s ease, border-color .3s ease;
}
.social-icon svg{ width: 20px; height: 20px; }
.social-icon:hover{ background: var(--wine); border-color: var(--wine); transform: translateY(-4px); }

.site-footer{
  margin-top: clamp(4rem, 10vw, 6rem);
  padding: 1.6rem clamp(1.5rem, 5vw, 3rem);
  border-top: 1px solid rgba(239,239,201,0.12);
  text-align: center;
  font-size: .82rem;
  color: rgba(239,239,201,0.5);
}

/* ==========================================================================
   Work page — intro
   ========================================================================== */
.work-intro{ padding: clamp(8rem, 14vw, 10rem) 0 clamp(2rem, 5vw, 3rem); }
.work-intro--center{ text-align: center; }
.work-intro--center .work-intro__lede{ margin-left: auto; margin-right: auto; }
.work-intro__lede{
  max-width: 60ch; font-size: 1.05rem; color: var(--text-soft); margin-top: -1rem;
}

/* ==========================================================================
   Numbered hover-reveal grid — on each project page: hover (or focus) a
   number and it fades into the torn-paper card assigned to it.
   ========================================================================== */
.numbered-grid{
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem);
}
.num-tile{
  display: block; position: relative; aspect-ratio: 4/5;
  cursor: pointer;
}
.num-tile:nth-child(3n+1) .num-tile__blob{ background: radial-gradient(circle at 32% 32%, var(--wine-light) 0%, var(--wine) 55%, transparent 78%); }
.num-tile:nth-child(3n+2) .num-tile__blob{ background: radial-gradient(circle at 32% 32%, var(--olive-light) 0%, var(--olive) 55%, transparent 78%); }
.num-tile:nth-child(3n+3) .num-tile__blob{ background: radial-gradient(circle at 32% 32%, #a34b5c 0%, var(--wine) 52%, transparent 78%); }

.num-tile__base{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.num-tile__blob{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 62%; aspect-ratio: 1;
  filter: blur(18px);
  opacity: .9;
  border-radius: 50%;
  animation: blobFloat 14s ease-in-out infinite;
  z-index: 0;
}
.num-tile__number{
  position: relative; z-index: 1;
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3rem); color: var(--ivory);
}
.num-tile__label{
  position: relative; z-index: 1;
  font-family: var(--font-script); font-size: 1.1rem; color: rgba(239,239,201,.85);
}

.num-tile__reveal{
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease);
  text-decoration: none; color: inherit;
}
.num-tile:hover .num-tile__base,
.num-tile:focus-within .num-tile__base{ opacity: 0; transform: scale(.92); }
.num-tile:hover .num-tile__reveal,
.num-tile:focus-within .num-tile__reveal{ opacity: 1; pointer-events: auto; }

.torn-card{
  position: relative;
  width: 100%; height: 100%;
  background: var(--bg-card);
  color: var(--text);
  /* Bottom padding is a % (resolves against this box's width, which is fixed
     to its height by the 4:5 aspect-ratio on .num-tile) so the safe content
     area always scales with the card — a fixed rem value would fall short
     on larger cards and let text poke into the torn edge below. */
  padding: 1.3rem 1.2rem 10%;
  display: flex; flex-direction: column; gap: .6rem;
  overflow: hidden;
  box-shadow: 0 20px 40px -18px rgba(47,27,26,.4);
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 94%,
    96% 98%, 92% 94.5%, 88% 98%, 84% 94.5%, 80% 98%, 76% 94.5%, 72% 98%,
    68% 94.5%, 64% 98%, 60% 94.5%, 56% 98%, 52% 94.5%, 48% 98%, 44% 94.5%,
    40% 98%, 36% 94.5%, 32% 98%, 28% 94.5%, 24% 98%, 20% 94.5%, 16% 98%,
    12% 94.5%, 8% 98%, 4% 94.5%, 0% 98%
  );
}
.torn-card__media{
  flex: 1;
  border-radius: 6px;
  background: var(--bg-card);
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; color: var(--text-soft); text-align: center;
  overflow: hidden;
}
.torn-card__media:has(span){
  background: repeating-linear-gradient(135deg, var(--ivory-dim), var(--ivory-dim) 10px, var(--bg-card) 10px, var(--bg-card) 20px);
}
.torn-card__media img{ width: 100%; height: 100%; object-fit: cover; }
.torn-card__title{ font-family: var(--font-display); font-size: 1.05rem; line-height: 1.3; }
.torn-card__desc{ font-size: .8rem; color: var(--text-soft); line-height: 1.45; }

.torn-card--stack{ flex-direction: row; gap: .5rem; }
.torn-card--stack .torn-card__media{ font-size: .68rem; }

.torn-card--poem{ justify-content: center; text-align: center; }
.torn-card__poem{
  font-family: var(--font-script); font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.5;
  color: var(--text);
}
.no-select{ user-select: none; -webkit-user-select: none; }

.tile-video{
  width: 100%; height: 100%; object-fit: cover; border-radius: 6px; flex: 1;
  background: var(--ink);
}
.torn-card--video{ padding: .6rem .6rem 1.6rem; }

/* Written Pieces (archive) — the tile stays paper-shaped at rest, showing
   just the number. On hover/focus it grows into its own bigger paper card
   (a sibling of .torn-card, so it isn't clipped by the small tile's own
   clip-path) large enough to read the full poem without cutting it off;
   overflow-y stays as a safety net for the handful of longest pieces. */
.numbered-grid--tri{
  grid-template-columns: repeat(3, 1fr);
}
.torn-card__swap{
  position: relative;
  flex: 1;
  display: flex;
}
.torn-card__number{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  color: var(--accent);
  opacity: .5;
  transition: opacity .4s var(--ease);
}
.num-tile--paper:hover .torn-card__number,
.num-tile--paper:focus-within .torn-card__number{ opacity: 0; }

.torn-card__poem-wrap{
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%; max-height: 100%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; justify-content: center; gap: .5rem;
  padding: 1.3rem 1.2rem 10%;
  background: var(--bg-card);
  color: var(--text);
  text-align: center;
  box-shadow: 0 20px 40px -18px rgba(47,27,26,.4);
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 94%,
    96% 98%, 92% 94.5%, 88% 98%, 84% 94.5%, 80% 98%, 76% 94.5%, 72% 98%,
    68% 94.5%, 64% 98%, 60% 94.5%, 56% 98%, 52% 94.5%, 48% 98%, 44% 94.5%,
    40% 98%, 36% 94.5%, 32% 98%, 28% 94.5%, 24% 98%, 20% 94.5%, 16% 98%,
    12% 94.5%, 8% 98%, 4% 94.5%, 0% 98%
  );
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  /* height/max-height snap instantly (CSS can't smoothly animate to/from
     'auto') — only opacity and width transition. */
  transition: opacity .4s var(--ease), width .4s var(--ease);
}
.torn-card__poem-wrap .torn-card__poem{
  font-size: clamp(.8rem, 1.3vw, .95rem);
  line-height: 1.55;
}
.num-tile--paper:hover .torn-card__poem-wrap,
.num-tile--paper:focus-within .torn-card__poem-wrap{
  opacity: 1; pointer-events: auto; z-index: 20;
  width: clamp(280px, 34vw, 460px);
  height: auto;
  max-height: min(84vh, 650px);
}

.media-subheads{ display: flex; gap: .4rem; flex-wrap: wrap; margin-top: auto; }
.media-subheads span{
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: .25rem .55rem; border-radius: 999px;
  border: 1px solid var(--border); color: var(--accent-soft);
}

/* ==========================================================================
   Individual project pages
   ========================================================================== */
.project-back{
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; font-weight: 700; color: var(--accent-soft);
}
.project-hero{ padding: clamp(7rem, 12vw, 9rem) 0 clamp(2rem, 5vw, 3rem); }
.project-hero__tag{ margin-top: 1rem; }
.project-hero__title{ margin-bottom: clamp(1rem, 2vw, 1.5rem); }

.project-layout{ padding-bottom: clamp(5rem, 10vw, 8rem); }
.project-desc{ max-width: 70ch; font-size: 1.05rem; line-height: 1.7; color: var(--text-soft); margin-bottom: clamp(2rem, 5vw, 3rem); }
.project-subhead{ margin-bottom: 1.2rem; display: block; }
.project-footnote{
  /* Hidden for now; keep the HTML in place so notes can be re-enabled later. */
  display: none;
  margin-top: 1rem;
  max-width: 70ch; font-size: .82rem; font-style: italic; line-height: 1.6; color: var(--text-soft);
}
.project-footnote strong{ color: var(--text); font-style: normal; }

/* ==========================================================================
   Testimonials page
   ========================================================================== */
.testimonials-grid{
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.2rem);
}
.testimonial-card{
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  display: flex; flex-direction: column; gap: 1.2rem;
}
.testimonial-card__quote{
  font-family: var(--font-display); font-style: italic; font-size: 1.2rem; line-height: 1.5;
}
.testimonial-card__author{ display: flex; flex-direction: column; }
.testimonial-card__name{ font-weight: 700; font-size: .95rem; }
.testimonial-card__role{ font-size: .82rem; color: var(--text-soft); }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-page-hero{ padding: clamp(8rem, 14vw, 10rem) 0 clamp(3rem, 6vw, 4rem); }
.contact-layout{
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
  align-items: start;
}
.contact-list{ display: flex; flex-direction: column; gap: 1.6rem; }
.contact-list__item{ display: flex; flex-direction: column; gap: .3rem; }
.contact-list__label{ font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-soft); font-weight: 700; }
.contact-list__value{ font-size: 1.1rem; font-weight: 600; transition: color .3s ease; }
.contact-list__value:hover{ color: var(--accent); }

.enquiry-form{ display: flex; flex-direction: column; gap: 1.3rem; }
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.form-field{ display: flex; flex-direction: column; gap: .5rem; }
.form-field--full{ grid-column: 1 / -1; }
.form-field label{ font-size: .85rem; font-weight: 700; color: var(--text); }
.form-field .hint{ font-size: .78rem; color: var(--text-soft); font-weight: 400; }
.form-field input,
.form-field select,
.form-field textarea{
  font-family: var(--font-body); font-size: .95rem; color: var(--text);
  background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 10px;
  padding: .8rem 1rem;
  transition: border-color .3s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{ outline: none; border-color: var(--accent); }
.form-field textarea{ resize: vertical; min-height: 120px; font-family: var(--font-body); }
.enquiry-form .btn{ align-self: flex-start; margin-top: .5rem; border: none; cursor: pointer; }
.form-note{ font-size: .82rem; color: var(--text-soft); margin-top: -.5rem; }
.form-success{
  display: none; padding: 1.4rem; border-radius: 12px;
  background: var(--bg-card); border: 1.5px solid var(--olive); color: var(--text);
  font-size: .95rem;
}
.form-success.is-visible{ display: block; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px){
  .work-grid{ grid-template-columns: repeat(2, 1fr); }
  .archive-grid{ grid-template-columns: repeat(3, 1fr); }
  .testimonials-grid{ grid-template-columns: 1fr; }
  .contact-layout{ grid-template-columns: 1fr; }
}

@media (max-width: 880px){
  .nav-links{
    position: fixed; top: 0; right: 0; height: 100svh; width: min(78vw, 320px);
    background: var(--ivory);
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: 1.6rem; padding: 6rem clamp(1.5rem, 8vw, 2.5rem) 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .4s var(--ease);
    box-shadow: -20px 0 40px -20px rgba(47,27,26,.25);
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-toggle{ display: flex; }

  .nav-dropdown{ width: 100%; }
  .nav-dropdown__panel{
    position: static; opacity: 1; visibility: visible; pointer-events: auto;
    display: none; padding: .6rem 0 0 .8rem; min-width: 0; width: 100%;
  }
  .nav-dropdown__panel-inner{
    background: transparent; border: none; box-shadow: none; padding: 0;
    display: flex; flex-direction: column; gap: .2rem; transform: none;
  }
  .nav-dropdown.is-open .nav-dropdown__panel{ display: flex; }
  .nav-dropdown__cat:hover{ background: transparent; color: var(--text); }
  .nav-dropdown__sub{
    position: static; opacity: 1; visibility: visible; pointer-events: auto;
    display: none; padding: 0;
  }
  .nav-dropdown__sub-inner{
    background: transparent; border: none; box-shadow: none;
    padding: .2rem 0 .3rem .8rem; min-width: 0;
  }
  .nav-dropdown__cat.is-open .nav-dropdown__sub{ display: flex; }
}

@media (max-width: 720px){
  .hero-blob{ opacity: .25; }
  .about-grid{ grid-template-columns: 1fr; }
  .about-media{ max-width: 360px; margin: 0 auto; }
  .work-grid{ grid-template-columns: 1fr; }
  .archive-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .stats-row{ gap: 1.6rem; }
  .form-row{ grid-template-columns: 1fr; }
  .numbered-grid{ grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
}

@media (max-width: 480px){
  .hero{ padding-top: 8rem; }
  .btn{ width: 100%; }
  .hero-actions{ flex-direction: column; }
}