:root{
  --ivory:#F8F4EC; --paper:#FFFDF9; --charcoal:#2B2B2B;
  --blush:#D9B8B5; --sage:#B7C4B1; --teal:#6F9E9A;
  --sandstone:#D9C5A1; --terracotta:#BC8267; --asphalt:#DED7C7;
  --maroon:#6B2B2B;
  --border:#D3D1C7; --text-secondary:#5F5E5A;
  --win-lit:#F2C879; --win-dark:#4A4640;
}
html{scroll-behavior:smooth; overflow-x:hidden; max-width:100%;}
body{overflow-x:hidden; max-width:100%;}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--ivory);
  background-image:radial-gradient(circle, rgba(43,43,43,0.12) 1px, transparent 1px);
  background-size:22px 22px; background-position:16px 16px;
  color:var(--charcoal); font-family:'Inter', sans-serif; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px; margin:0 auto; padding:0 32px;}

/* sticky nav, hidden until you scroll past the hero, label updates per section.
   Fades from solid on the left (where the wordmark/label live) to fully transparent
   on the right, instead of a frosted-glass blur. To flip which side stays solid, swap
   "to right" for "to left" below. */
.scroll-nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  transform:translateY(-100%); opacity:0; pointer-events:none;
  background:rgba(248,244,236,0.38);
  backdrop-filter:blur(26px) saturate(1.6); -webkit-backdrop-filter:blur(26px) saturate(1.6);
  border-bottom:0.5px solid var(--border);
  box-shadow:0 1px 0 rgba(255,255,255,0.4) inset;
  transition:transform 0.35s ease, opacity 0.35s ease;
}
.scroll-nav.visible{transform:translateY(0); opacity:1; pointer-events:auto;}
.scroll-nav-inner{display:flex; align-items:center; justify-content:space-between; padding:9px 0;}
.scroll-nav-word{
  display:flex; align-items:baseline; text-decoration:none;
  font-family:'Special Elite','Inter',monospace; font-weight:800; font-size:clamp(18px,3.2vw,32px);
  letter-spacing:-0.01em; color:var(--charcoal); white-space:nowrap; line-height:1;
  text-transform:capitalize;
}
.scroll-nav-tag{display:none; align-items:baseline; gap:12px;}
.scroll-nav-tag.active{display:inline-flex; margin-left:12px;}
.scroll-nav-dot{color:var(--charcoal); font-size:0.35em;}
.scroll-nav-word span#scrollNavLabel{
  /* intentionally no font-size/color override here, it must match "amna azeem" exactly */
  display:inline-block;
}
.scroll-nav-label-inner{display:inline-block;}
.scroll-nav-label-inner.pulse{animation:labelPulse 0.5s cubic-bezier(.34,1.56,.64,1);}
@keyframes labelPulse{
  0%{transform:scale(0.55); opacity:0;}
  55%{transform:scale(1.2);}
  100%{transform:scale(1); opacity:1;}
}
@media (max-width:640px){
  .scroll-nav-word{font-size:clamp(15px,5vw,22px);}
  .scroll-nav-tag.active{margin-left:8px;}
}
@media (prefers-reduced-motion: reduce){
  .scroll-nav{transition:none;}
  .scroll-nav-label-inner.pulse{animation:none;}
}

header{display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:0.5px solid var(--border);}
.wordmark{font-family:'Big Shoulders Display', sans-serif; font-weight:400; font-size:22px; letter-spacing:0.02em;}
.skyline-toggle{display:flex; align-items:flex-end; gap:4px; height:20px; background:none; border:none; padding:8px;}
.skyline-toggle span{display:block; width:6px; background:var(--charcoal);}
.skyline-toggle span:nth-child(1){height:10px;}
.skyline-toggle span:nth-child(2){height:18px;}
.skyline-toggle span:nth-child(3){height:8px;}

.identity-parallel{display:flex; justify-content:space-between; align-items:flex-start; gap:32px; flex-wrap:wrap;}
.identity{font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:clamp(22px,3.3vw,33px); line-height:1.2; letter-spacing:0.01em; text-transform:uppercase; padding:16px 0 0; flex:2 1 480px; white-space:nowrap;}
.identity span{color:var(--terracotta);}
.identity-note{font-size:14px; color:var(--text-secondary); margin-top:10px; max-width:480px; line-height:1.7;}
.identity-note > span{display:block;}

/* new big centered hero */
.hero-header{padding:0; margin:0; border-bottom:none; display:block;}
.hero-bleed{
  padding-top:14px;
  display:flex; flex-direction:column; gap:0;
}
.hero-top-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.wordmark-huge{
  font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:clamp(32px,9vw,130px);
  letter-spacing:-0.01em; color:var(--charcoal); line-height:0.95; white-space:nowrap;
}
.wordmark-dot{
  display:inline-block; width:0.13em; height:0.13em; border-radius:50%;
  background:var(--charcoal); vertical-align:0.05em;
}

.role-marquee{margin-top:clamp(-14px, -2.6vw, -36px); margin-left:8px;}
.role-marquee-viewport{height:30px; overflow:hidden;}
.role-marquee-track{
  display:flex; flex-direction:column;
  animation:roleCycle 11s ease-in-out infinite;
}
.role-marquee-track span{
  height:30px; display:flex; align-items:center; justify-content:flex-start;
  font-family:'Big Shoulders Display', sans-serif; font-weight:800;
  font-size:clamp(13px,1.6vw,20px); letter-spacing:0.04em;
  text-transform:none; color:var(--charcoal); white-space:nowrap;
}
@keyframes roleCycle{
  0%,27%{transform:translateY(0%);}
  33%,60%{transform:translateY(-25%);}
  66%,93%{transform:translateY(-50%);}
  99%,100%{transform:translateY(-75%);}
}
@media (prefers-reduced-motion: reduce){
  .role-marquee-track{animation:none;}
}

@keyframes marqueeScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .urdu-marquee-track{animation:none;}
}
.urdu-bold-wrap{padding:34px 0 24px; flex:1 1 320px; display:flex; align-items:center; justify-content:flex-end; align-self:center;}
.urdu-line{
  font-family:'Noto Nastaliq Urdu', serif; font-weight:700; font-size:clamp(18px,3vw,34px); line-height:2.3;
  color:var(--charcoal); direction:rtl; text-align:right; width:100%;
  display:inline-block; clip-path:inset(0 0 0 100%); padding:8px 0 8px; overflow:visible;
}
.revealed .urdu-line{animation:typeReveal 2s steps(20) forwards;}
@keyframes typeReveal{to{clip-path:inset(0 0 0 0%);}}
.urdu-break{padding:16px 0 0; text-align:center;}

.street-wrap{position:relative; margin-top:20px;}
svg#scene{width:100%; height:auto; display:block;}

.street-path{fill:none; stroke:#B6AB92; stroke-width:13; stroke-linecap:round; stroke-linejoin:round;}
.street-center{fill:none; stroke:var(--paper); stroke-width:2.2; stroke-dasharray:8 10; stroke-linecap:round;}

.lamp{animation:lampBlink 3.2s steps(1) infinite;}
@keyframes lampBlink{0%,100%{fill:var(--win-lit);} 50%{fill:var(--win-dark);}}

.stop{cursor:pointer;}
.stop circle.dot{transition:r 0.15s ease;}
.stop:hover circle.dot{r:11;}
.stop text.year{font-family:'Inter', sans-serif; font-size:12px; font-weight:500; fill:var(--charcoal);}

.win{animation:flicker 4s ease-in-out infinite;}
@keyframes flicker{0%,100%{fill:var(--win-lit);} 50%{fill:var(--win-dark);}}

.tl-red{animation:tlRed 6s steps(1) infinite;}
.tl-yellow{animation:tlYellow 6s steps(1) infinite;}
.tl-green{animation:tlGreen 6s steps(1) infinite;}
@keyframes tlGreen{0%,60%{opacity:1;} 61%,100%{opacity:0.15;}}
@keyframes tlYellow{0%,60%{opacity:0.15;} 61%,70%{opacity:1;} 71%,100%{opacity:0.15;}}
@keyframes tlRed{0%,70%{opacity:0.15;} 71%,100%{opacity:1;}}

.bird-wing{animation:flap 0.28s ease-in-out infinite alternate; transform-origin:4px -2px;}
@keyframes flap{0%{transform:scaleY(1);} 100%{transform:scaleY(0.35);}}

.bird-bubble rect{stroke:none;}
.bird-bubble-de rect{fill:var(--terracotta);}
.bird-bubble-en rect{fill:var(--blush);}
.bird-bubble-ur rect{fill:var(--sage);}
.bird-bubble text{
  font-family:'Inter', sans-serif; font-weight:700; font-size:9px;
  letter-spacing:0.03em; text-transform:uppercase; fill:var(--paper);
}
.bird-bubble-ur text{
  font-family:'Noto Nastaliq Urdu', serif; font-weight:700; font-size:9px;
  letter-spacing:0; text-transform:none;
}
.bird-bubble{opacity:0;}
.bird-bubble-de{animation:bubbleDE 24s ease-in-out infinite;}
.bird-bubble-en{animation:bubbleEN 24s ease-in-out infinite;}
.bird-bubble-ur{animation:bubbleUR 24s ease-in-out infinite;}
@keyframes bubbleDE{0%,6%,20%,100%{opacity:0;} 9%,17%{opacity:1;}}
@keyframes bubbleEN{0%,50%,64%,100%{opacity:0;} 53%,61%{opacity:1;}}
@keyframes bubbleUR{0%,76%,90%,100%{opacity:0;} 79%,87%{opacity:1;}}
@media (prefers-reduced-motion: reduce){
  .bird-wing{animation:none;}
  .bird-bubble{animation:none; opacity:1;}
}

.sig-red{animation:sigRed 4s steps(1) infinite;}
.sig-green{animation:sigGreen 4s steps(1) infinite;}
@keyframes sigRed{0%,45%{opacity:1;} 50%,95%{opacity:0.15;} 100%{opacity:1;}}
@keyframes sigGreen{0%,45%{opacity:0.15;} 50%,95%{opacity:1;} 100%{opacity:0.15;}}

.popup{
  position:absolute; width:220px; background:var(--paper);
  border:0.5px solid var(--border); border-radius:12px;
  padding:15px 17px; box-shadow:0 4px 14px rgba(43,43,43,0.1);
  z-index:20; display:none;
}
.popup.show{display:block;}
.popup-close{position:absolute; top:8px; right:10px; background:none; border:none; font-size:16px; color:var(--text-secondary); line-height:1;}
.popup-year{font-family:'Big Shoulders Display', sans-serif; font-weight:700; font-size:12px; color:var(--terracotta); text-transform:uppercase;}
.popup-title{font-family:'Big Shoulders Display', sans-serif; font-weight:700; font-size:16px; text-transform:uppercase; margin-top:2px; line-height:1.15;}
.popup-desc{font-size:12px; color:var(--charcoal); margin-top:8px; line-height:1.5;}

.placeholder-hint{font-size:12px; color:var(--text-secondary); margin:8px 0 40px; font-style:italic;}

@media (prefers-reduced-motion: reduce){
  .street-path{animation:none; stroke-dashoffset:0;}
  .street-center{animation:none; opacity:1;}
  .win{animation:none;}
  .lamp{animation:none;}
  .tl-red,.tl-yellow,.tl-green{animation:none;}
  .urdu-line{animation:none; clip-path:none;}
}

.lens-section{padding:50px 0 70px;}
.section-heading{font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:clamp(24px,3.2vw,34px); text-transform:uppercase; letter-spacing:0.01em; color:var(--charcoal); margin-bottom:20px;}
.lens-label{font-family:'Inter',sans-serif; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:16px;}
.lens-pills{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px;}
.pill{
  font-family:'Special Elite','Inter',monospace; font-size:13px; font-weight:500; color:var(--charcoal);
  background:var(--paper); border:0.5px solid var(--border); border-radius:20px;
  padding:8px 16px; cursor:pointer; transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pill:hover{border-color:var(--terracotta);}
.pill.active{background:var(--charcoal); color:var(--paper); border-color:var(--charcoal);}

/* non-interactive "blob" tag sitting right next to a heading, e.g. "Endeavours" next to
   the Work heading, "Recognition" next to the achievements one. Rectangular with rounded
   corners (not a full stadium/oval pill), and each corner radius gently drifts over time
   so it never sits perfectly still, a small cutesey wobble rather than a static chip. */
.pill--static{
  cursor:default; border:none; font-weight:700; padding:7px 18px;
  animation:blobWiggle 5s ease-in-out infinite;
}
.pill--static:hover{border-color:transparent;}
.pill--blob-a{background:var(--charcoal); color:var(--paper);}
.pill--blob-b{background:var(--charcoal); color:var(--paper);}

/* Reflections heading: a small still coffee mug next to the "Collected Thoughts"
   pill, with three thin steam wisps that continuously rise and fade above it - the
   mug itself never moves, only the steam animates, each wisp staggered so they
   don't rise in lockstep. */
/* Reflections heading: title stays on its own line like every other section
   heading; the pill and the coffee mug sit together on the row below it,
   center-aligned to each other so the mug isn't left dangling lower than the pill. */
.reflection-tag-row{display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap;}
.reflection-coffee{
  display:flex; align-items:flex-end; width:92px; height:106px;
  color:var(--win-lit); opacity:0.55; flex-shrink:0;
  margin-top:-59px;
}
.reflection-coffee svg{width:100%; height:100%; display:block;}
.reflection-steam{
  opacity:0; transform-origin:center;
  animation-name:reflectionSteamRise;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
.reflection-steam--1{animation-duration:2.6s; animation-delay:0s;}
.reflection-steam--2{animation-duration:2.6s; animation-delay:0.7s;}
.reflection-steam--3{animation-duration:2.6s; animation-delay:1.4s;}

@keyframes reflectionSteamRise{
  0%{ transform:translateY(3px); opacity:0; }
  30%{ opacity:0.7; }
  65%{ opacity:0.4; }
  100%{ transform:translateY(-5px) scaleY(1.2); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .reflection-steam{animation:none; opacity:0;}
}
@keyframes blobWiggle{
  0%, 100%{border-radius:10px 16px 12px 18px; transform:rotate(-1.5deg);}
  33%{border-radius:16px 10px 18px 12px; transform:rotate(1deg);}
  66%{border-radius:12px 18px 10px 16px; transform:rotate(-0.5deg);}
}
@media (prefers-reduced-motion: reduce){
  .pill--static{animation:none; border-radius:10px;}
}

/* heading + blob pill, sitting inline on the same line rather than stacked. --right
   pushes the pair to the right edge (Work heading); the default (left) is used for the
   Recognition heading below the gallery. */
.section-heading-block{display:flex; flex-direction:column; align-items:flex-start; gap:10px;}
.section-heading-block--right{align-items:flex-end;}
.section-heading-block .work-heading, .section-heading-block .work-collage-heading{margin:0;}
.work-heading--left{text-align:left;}

.lens-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:18px;}
.lens-card{
  background:var(--paper); border:0.5px solid var(--border); border-radius:12px;
  padding:16px; transition:opacity 0.25s ease, transform 0.25s ease;
}
.lens-card.hidden{display:none;}
.lens-card-swatch{width:100%; height:64px; border-radius:8px; margin-bottom:12px;}
.lens-card-title{font-family:'Big Shoulders Display',sans-serif; font-weight:700; font-size:15px; color:var(--charcoal); margin-bottom:6px;}
.lens-card-desc{font-family:'Inter',sans-serif; font-size:13px; color:var(--text-secondary); line-height:1.5;}

/* menu button + its icon dropdown */
.menu-wrap{position:relative;}
.menu-btn{
  position:relative; width:26px; height:26px;
  background:none; border:none; padding:0; flex-shrink:0;
}
.menu-btn .bar{
  position:absolute; top:50%; left:50%; width:3px; height:16px;
  background:var(--charcoal); border-radius:2px;
  transition:transform 0.25s ease, opacity 0.2s ease;
}
.menu-btn .bar:nth-child(1){transform:translate(-9.5px,-8px);}
.menu-btn .bar:nth-child(2){transform:translate(-1.5px,-8px);}
.menu-btn .bar:nth-child(3){transform:translate(6.5px,-8px);}
.menu-btn.open .bar:nth-child(1){transform:translate(-1.5px,-8px) rotate(45deg);}
.menu-btn.open .bar:nth-child(2){opacity:0;}
.menu-btn.open .bar:nth-child(3){transform:translate(-1.5px,-8px) rotate(-45deg);}

.social-drop{
  position:absolute; top:calc(100% + 12px); right:0;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  z-index:50;
}
.social-drop-item{
  width:32px; height:32px; border-radius:9px;
  background:var(--charcoal); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  opacity:0; transform:translateY(-16px) scale(0.5);
  pointer-events:none;
  transition:opacity 0.28s ease, transform 0.28s cubic-bezier(.34,1.56,.64,1), background 0.2s ease;
}
.social-drop-item svg{width:15px; height:15px;}
.social-drop.open .social-drop-item{
  opacity:1; transform:translateY(0) scale(1); pointer-events:auto;
}
.social-drop.open .social-drop-item:nth-child(1){transition-delay:0.02s;}
.social-drop.open .social-drop-item:nth-child(2){transition-delay:0.07s;}
.social-drop.open .social-drop-item:nth-child(3){transition-delay:0.12s;}
.social-drop.open .social-drop-item:nth-child(4){transition-delay:0.17s;}
.social-drop.open .social-drop-item:nth-child(5){transition-delay:0.22s;}
.social-drop-item:hover{background:var(--terracotta); transform:translateY(0) scale(1.12) !important;}
@media (prefers-reduced-motion: reduce){
  .menu-btn .bar, .social-drop-item{transition:none;}
}

/* teaser sections (used repeatedly down the home page) */
.teaser{padding:36px 0; border-top:0.5px solid var(--border); display:flex; gap:20px; align-items:flex-start;}
.teaser-icon{
  width:52px; height:52px; border-radius:50%; background:var(--charcoal);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.teaser-icon svg{width:26px; height:26px;}
.teaser-body{flex:1;}
.teaser-heading{font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:clamp(18px,2.2vw,22px); text-transform:uppercase; color:var(--charcoal); margin-bottom:8px;}
.teaser-text{font-family:'Inter',sans-serif; font-size:14px; color:var(--text-secondary); line-height:1.7; max-width:560px; margin-bottom:10px;}
.teaser-link{font-family:'Inter',sans-serif; font-size:13px; font-weight:700; color:var(--terracotta); text-decoration:none;}
.teaser-link:hover{text-decoration:underline;}

[data-reveal]{opacity:0; transform:translateY(18px); transition:opacity 0.7s ease, transform 0.7s ease;}
[data-reveal].revealed{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1; transform:none; transition:none;}
}

/* Medium Rare-style stacked index list, now matching the plain full-bleed photo
   treatment used for the Work-section break: photo touches the true left edge, tabs sit
   immediately next to it. No more rounded corners/tilt/shadow on the photo. */
.index-list-section{padding:16px 0 70px;}
.intro-split{
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  margin-top:24px;
  display:flex; align-items:flex-start;
}
.intro-photo-wrap{
  flex:0 0 auto; width:40%; /* fallback before script.js measures the real sizes */
  position:relative; overflow:hidden; border-radius:0 16px 16px 0;
}
.intro-photo{
  width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block;
}
.intro-tabs-col{
  flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center;
  padding:40px clamp(24px,5vw,64px);
}
.intro-see-work{
  font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:clamp(24px,4.4vw,46px);
  letter-spacing:-0.01em; text-transform:uppercase; color:var(--charcoal);
  line-height:0.95; margin-bottom:0;
}
.index-list{display:flex; flex-direction:column; gap:8px; margin-top:0;}
@media (max-width:640px){
  .intro-split{flex-direction:column;}
  .intro-photo-wrap{width:100% !important; height:auto !important; aspect-ratio:4/5.6;}
  .intro-tabs-col{padding:36px 28px 44px;}
}
.index-block{
  position:relative; display:flex; align-items:center;
  padding:22px 24px; border-radius:6px; text-decoration:none;
  max-width:480px;
  transform:rotate(-1.4deg);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.index-list a:nth-child(even){transform:rotate(1.3deg);}
.index-block:hover{
  transform:rotate(0deg) translateY(-6px);
  box-shadow:0 8px 18px rgba(43,43,43,0.18);
}
.index-title{font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:clamp(18px,2.6vw,28px); text-transform:uppercase; color:var(--charcoal); letter-spacing:0.01em;}
.index-block-dark .index-title{color:var(--paper);}
@media (prefers-reduced-motion: reduce){
  .index-block{transition:none; transform:none;}
  .index-block:hover{transform:none;}
}

/* big hand cursor: replaces the paper-plane cursor whenever something is clickable */
a,
button,
.index-block,
.menu-btn,
.popup-close,
.social-drop-item,
.skyline-toggle{
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='38' viewBox='0 0 50 56'><rect x='12' y='26' width='26' height='22' rx='9' fill='%23FFFDF9' stroke='%232B2B2B' stroke-width='2.4'/><rect x='14' y='5' width='9' height='26' rx='4.5' fill='%23FFFDF9' stroke='%232B2B2B' stroke-width='2.4'/><rect x='23' y='9' width='8' height='22' rx='4' fill='%23FFFDF9' stroke='%232B2B2B' stroke-width='2.2'/><rect x='31' y='13' width='7.5' height='18' rx='3.7' fill='%23FFFDF9' stroke='%232B2B2B' stroke-width='2'/><path d='M12 37 C5 35 4.5 28 10 26 C13.5 24.6 16 27 16 30.5 L16 40 Z' fill='%23FFFDF9' stroke='%232B2B2B' stroke-width='2.4' stroke-linejoin='round'/><line x1='23' y1='31' x2='23' y2='35' stroke='%232B2B2B' stroke-width='1.4'/><line x1='31' y1='31' x2='31' y2='35' stroke='%232B2B2B' stroke-width='1.4'/></svg>") 12 5, pointer;
}

/* shared subpage header/hero (used by about/work/etc pages), no repeated heading here,
   since the sticky nav's scroll-spy label now carries that role as you scroll through */
.page-hero{padding:50px 0 20px; border-top:0.5px solid var(--border); scroll-margin-top:90px;}
#work.page-hero{
  border-top:none; padding-top:18px;
  /* placeholder, swap for a real color pulled from the Copenhagen photo once it's in.
     Both .work-break and .work-collage below read from this same variable, so the
     achievements notes visually inherit their accent color from the photo above them. */
  --photo-accent: var(--win-lit);
}
.work-subsection + .work-subsection{margin-top:44px; padding-top:36px; border-top:0.5px dashed var(--border);}
.page-lead{font-family:'Inter',sans-serif; font-weight:500; font-size:clamp(15px,1.6vw,17px); color:var(--text-secondary); line-height:1.7; max-width:560px;}
.work-heading{font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:clamp(26px,3.6vw,38px); color:var(--charcoal); line-height:1.1; letter-spacing:-0.01em; text-align:right;}

/* three butterflies rising from near the Work heading toward the Urdu line, lives in the
   right gutter outside the text column so it never sits on top of content. height:0 on
   the wrapper means it doesn't push anything else down; it's purely an overlay. */
.butterfly-zone{position:relative; height:0; overflow:visible;}
.butterfly-svg{position:absolute; bottom:0; right:calc(50% - 560px); width:140px; height:920px; overflow:visible;}
.butterfly-wing-left, .butterfly-wing-right{
  animation:butterflyFlap 0.35s ease-in-out infinite alternate;
  transform-origin:0 0;
}
@keyframes butterflyFlap{0%{transform:scaleX(1);} 100%{transform:scaleX(0.35);}}
@media (max-width:1180px){
  .butterfly-zone{display:none;} /* no gutter space to fly through once the column fills the viewport */
}
@media (prefers-reduced-motion: reduce){
  .butterfly-zone{display:none;}
}

.back-link{font-family:'Inter',sans-serif; font-size:13px; color:var(--text-secondary); text-decoration:none;}
.back-link:hover{color:var(--terracotta);}

.placeholder-block{
  background:var(--paper); border:0.5px dashed var(--border); border-radius:12px;
  padding:20px; margin-top:16px; font-family:'Inter',sans-serif; font-size:13px;
  color:var(--text-secondary); font-style:italic;
}

/* full-bleed image band used as a quiet visual pause between sections - no text,
   no interaction, just a breath before the next section starts */
.section-break{
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  margin-top:56px;
  height:clamp(220px, 34vw, 460px); overflow:hidden;
  position:relative;
}
.section-break img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(0.85);
}
.section-break-hover{
  position:absolute; left:0; right:0; bottom:0;
  padding:40px 24px 20px;
  background:linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.3) 55%, transparent);
  font-family:'Inter',sans-serif; font-size:14px; font-weight:700;
  text-align:right;
  opacity:0; transition:opacity 0.35s ease;
  pointer-events:none;
}
.section-break:hover .section-break-hover,
.section-break:focus-within .section-break-hover{
  opacity:1; pointer-events:auto;
}
.section-break-hover a{ color:#fff; text-decoration:none; }
.section-break-caption{
  max-width:1180px; margin:14px auto 0; padding:0 24px;
  font-family:'Special Elite','Inter',monospace; font-size:22px;
  color:var(--text-secondary); text-align:center;
  display:flex; align-items:center; justify-content:center; gap:2px;
  min-height:1.4em;
}
.typewriter-cursor{
  display:inline-block; width:0.12em; height:1em; background:var(--terracotta);
  margin-left:2px; animation:typewriter-blink 0.9s step-end infinite;
  vertical-align:text-bottom;
}
@keyframes typewriter-blink{
  0%, 49%{ opacity:1; }
  50%, 100%{ opacity:0; }
}
.section-break-next{ border-top:none; }
/* ---- Reflections / "Loose Pages": a flat grid, 5 across on desktop, wrapping to
   fewer columns on smaller screens - C1..C6 on row one, C7..C12 on row two, and so
   on as more get added. Each card is a 3D flip (same mechanic as the Dialogues "who
   I met" blobs: .is-flipped toggles rotateY(180deg) on the inner wrapper via
   script.js). Every card defaults to a photo on the front; flipping reveals the
   writing on the back, in an actual glassmorphism panel (.reflection-card-face--text:
   a blurred copy of the card's own photo behind a translucent tint, writing on top,
   scrollable internally if the entry runs long). ---- */
.reflections-grid{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:14px; margin-top:28px;
}
.reflection-card{
  position:relative; aspect-ratio:3/3.7; perspective:2200px; cursor:pointer;
  outline:none; overflow:hidden; border-radius:14px;
  transition:transform 0.35s ease, box-shadow 0.35s ease, border-radius 0.35s ease;
}
.reflection-card-inner{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform 0.6s cubic-bezier(.45,.05,.15,1);
}
.reflection-card.is-flipped .reflection-card-inner{transform:rotateY(180deg);}
.reflection-card:focus-visible .reflection-card-inner{outline:2px solid var(--terracotta); outline-offset:3px;}
.reflection-card-face{
  position:absolute; inset:0; backface-visibility:hidden;
  border-radius:14px; border:1px solid var(--border); overflow:hidden;
  background:var(--paper); box-shadow:0 10px 22px rgba(43,43,43,0.12);
  transition:border-radius 0.35s ease;
}
.reflection-card-face--back{transform:rotateY(180deg);}

/* same "corner softens, card lifts" treatment as the map tiles elsewhere on the
   site, so hovering a reflection card reads consistently with the rest of the page -
   only while showing the front (unflipped), since once it's open the back face
   should sit still while you read it. */
.reflection-card:not(.is-flipped):hover{
  transform:translateY(-3px);
  border-radius:22px;
  box-shadow:0 14px 26px rgba(43,43,43,0.2);
}
.reflection-card:not(.is-flipped):hover .reflection-card-face{border-radius:22px;}

/* a soft shadow that eases in while the card is mid-turn, so the flip reads as a
   page lifting rather than a flat mirror-spin. Contained by overflow:hidden on the
   .reflection-card itself above, so nothing bulges past the card's own edges. */
.reflection-card-inner::after{
  content:''; position:absolute; inset:0; z-index:5; pointer-events:none;
  border-radius:14px;
  background:linear-gradient(90deg, rgba(43,43,43,0.22) 0%, rgba(43,43,43,0) 30%, rgba(43,43,43,0) 70%, rgba(43,43,43,0.22) 100%);
  opacity:0; transition:opacity 0.6s cubic-bezier(.45,.05,.15,1);
}
.reflection-card.is-flipped .reflection-card-inner::after{opacity:1;}

/* Only the currently-visible face should ever receive scroll/click/hover - otherwise
   the hidden face (backface-visibility:hidden hides it visually, but some browsers
   still hit-test it if it's later in the DOM) can silently swallow scroll/pointer
   events meant for the visible one underneath. This is what was blocking scroll on
   text-front cards, where the text face sits first in the markup and the hidden
   image face behind it was still catching the wheel/touch events. */
.reflection-card-face--back{pointer-events:none;}
.reflection-card.is-flipped .reflection-card-face--back{pointer-events:auto;}
.reflection-card.is-flipped .reflection-card-face--front{pointer-events:none;}

/* image-front variant: photo fills the face, caption sits on a scrim at the bottom.
   Sepia gives every reflection photo a consistent vintage warmth by default; hovering
   the front face (not a flip - just a filter fade) lifts the tint so the photo's own
   true colors show through, as a little "there's more here" reward before the click. */
.reflection-card-photo{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:sepia(0.45); transition:filter 0.45s ease;
}
.reflection-card-face--front:hover .reflection-card-photo{filter:sepia(0);}
.reflection-card-face--front .img-missing{background:var(--ivory);}
.reflection-card-caption{
  position:absolute; left:0; right:0; bottom:0; padding:12px 14px 10px;
  display:flex; flex-direction:column; gap:2px;
  background:linear-gradient(to top, rgba(43,43,43,0.78), rgba(43,43,43,0));
}
.reflection-card--image-front .reflection-card-face--front .reflection-card-date{color:var(--asphalt);}
.reflection-card--image-front .reflection-card-face--front .reflection-card-title{color:var(--paper);}

/* whichever face holds the writing gets an actual frosted-glass treatment: a blurred
   copy of the same photo that's on the other side of the flip sits behind it (real
   CSS filter:blur() on an <img> that's part of THIS face, not backdrop-filter reaching
   across to the other face - that doesn't work inside a preserve-3d flip card, browsers
   just don't composite it), then a translucent tint on top for the "glass" wash, then
   the actual writing on top of that in its own scrollable layer so the blurred photo
   stays put while only the text scrolls. */
.reflection-card-face.reflection-card-face--text{
  padding:0; border-color:rgba(255,255,255,0.85);
  box-shadow:0 12px 30px rgba(43,43,43,0.2), inset 0 1px 0 rgba(255,255,255,0.7);
}
.reflection-card-blur-bg{
  position:absolute; top:-10%; left:-10%; width:120%; height:120%;
  object-fit:cover; filter:blur(18px) saturate(1.15) brightness(1.08);
}
.reflection-card-glass-tint{
  position:absolute; inset:0;
  background:linear-gradient(155deg, rgba(20,18,16,0) 0%, rgba(20,18,16,0.02) 55%, rgba(20,18,16,0) 100%);
  transition:background 0.4s ease;
}
.reflection-card.is-flipped:hover .reflection-card-glass-tint{
  background:rgba(20,18,16,0);
}
.reflection-card-text-scroll{
  position:relative; z-index:1; height:100%; width:100%;
  padding:16px 15px; display:flex; flex-direction:column; gap:6px;
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin; scrollbar-color:rgba(43,43,43,0.3) transparent;
}
.reflection-card-text-scroll::-webkit-scrollbar{width:5px;}
.reflection-card-text-scroll::-webkit-scrollbar-thumb{background:rgba(43,43,43,0.28); border-radius:3px;}
.reflection-card-face--text .reflection-card-title,
.reflection-card-face--text .reflection-card-date{flex-shrink:0;}

/* on the flip side, now that it's a dark tinted glass panel (matching the reference
   look), every card uses the same light, high-contrast text - consistent and
   reliably legible regardless of what's in that particular photo underneath. */
.reflection-card-face--text .reflection-card-date{
  color:var(--paper); font-weight:700; opacity:0.9;
}

.reflection-card-date{
  font-family:'Special Elite','Inter',monospace; font-size:10px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--text-secondary);
}
.reflection-card-title{
  font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:16px;
  line-height:1.15; color:var(--charcoal); letter-spacing:-0.005em;
}
.reflection-card-face--text .reflection-card-title{color:var(--paper);}
.reflection-card-text{
  font-family:'Special Elite','Amaranth',monospace; font-weight:700; font-size:12.5px; line-height:1.65;
  color:var(--paper); margin:0;
}

@media (max-width:1100px){
  .reflections-grid{grid-template-columns:repeat(4, 1fr);}
}
@media (max-width:900px){
  .reflections-grid{grid-template-columns:repeat(3, 1fr);}
}
@media (max-width:560px){
  .reflections-grid{grid-template-columns:repeat(2, 1fr); gap:12px;}
  .reflection-card-title{font-size:14px;}
  .reflection-card-text{font-size:11.5px;}
}
@media (prefers-reduced-motion: reduce){
  .reflection-card, .reflection-card-face{transition:none;}
  .reflection-card:not(.is-flipped):hover{transform:none;}
}

/* ---- Work: full-bleed, static, natively swipeable/scrollable gallery. The container
   breaks out of the page's normal max-width so cards genuinely touch the real edge of
   the browser window; the mask fades cards out at the edges rather than hard-clipping. ---- */
.work-gallery-wrap{
  position:relative; margin-top:8px;
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  overflow-x:auto; overflow-y:hidden; padding:6px 0 14px;
  touch-action:pan-x;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
}
.work-gallery-wrap::-webkit-scrollbar{display:none;}
.work-gallery-track{
  display:flex; gap:16px; width:max-content;
  align-items:flex-start; /* so an expanded card grows its own height only, not every card in the row */
  transition:padding 0.35s ease;
}
/* the fade stays on always (it's the effect you like on small cards), but if the
   first/last card is the one currently expanded, give it the same 32px edge margin the
   rest of the page uses (see .wrap), so its readable content clears the fade zone
   instead of sitting flush against the viewport where the fade eats into it */
.work-gallery-wrap.edge-card-expanded .work-gallery-track{
  padding-left:32px; padding-right:32px;
}
.work-gallery-card{
  flex:0 0 auto; width:min(330px, 68vw); position:relative;
  background:none; border:none; padding:0; text-align:left; cursor:pointer;
  transition:width 0.45s cubic-bezier(.34,1.56,.64,1);
}
.work-gallery-card.is-expanded{
  width:min(462px, 92vw); z-index:2;
}
.work-gallery-card:focus{outline:none;}
.work-gallery-card:focus-visible .work-gallery-img{
  outline:2px dashed var(--terracotta); outline-offset:3px;
}
.work-gallery-img{
  position:relative; overflow:hidden; display:block;
  aspect-ratio:16/9; border:2.5px dashed var(--charcoal); border-radius:6px;
  transition:transform 0.25s cubic-bezier(.34,1.56,.64,1), border-color 0.2s ease, max-height 0.45s ease;
}
.work-gallery-card.is-expanded .work-gallery-img{max-height:260px;}
.work-gallery-photo{
  width:100%; height:100%; object-fit:cover; display:block;
  /* warm, faded film-stock look rather than flat grayscale, sepia pulls in a little of the
     site's own warm tone instead of a neutral gray, desaturated but not fully colorless,
     with a slight contrast lift so it doesn't read as washed-out */
  filter:sepia(0.32) saturate(0.55) contrast(1.05);
  transition:filter 0.4s ease;
}
.work-gallery-card:hover .work-gallery-photo,
.work-gallery-card.is-expanded .work-gallery-photo{
  filter:sepia(0) saturate(1) contrast(1) brightness(1);
}
/* if the referenced image file doesn't exist yet, this shows instead, same dashed-border
   frame, just with the placeholder pattern + label rather than a broken-image icon */
.work-gallery-img-fallback{
  display:none; align-items:center; justify-content:center; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg, var(--border), var(--border) 2px, transparent 2px, transparent 10px);
  font-family:'Inter',sans-serif; font-size:12px; color:var(--text-secondary); font-style:italic;
}
.work-gallery-img.no-image .work-gallery-photo{display:none;}
.work-gallery-img.no-image .work-gallery-img-fallback{display:flex;}

/* ---- hover hint tag: a small "View Project"/"View Honour" button, dark frosted
   glass (so it stays legible over any photo, light or dark, rather than the earlier
   light-glass version that washed out) with a dashed border in the same paper tone as
   the text. Pure CSS :hover (no JS timing needed) since hover no longer triggers the
   expand itself - only clicking this button does (see script.js). Hidden once the
   card is actually open, since the label no longer applies at that point. Now
   genuinely clickable (pointer-events:auto + cursor:pointer) since it's the only
   thing that opens the card anymore.
   Padding is intentionally asymmetric (more on top than bottom): Special Elite's
   glyphs sit high in their own line-box, so equal padding reads as more space below
   the text than above - this compensates so it looks visually centered. ---- */
.work-gallery-hint, .recognition-hint{
  z-index:3; display:inline-flex; align-items:center; justify-content:center;
  padding:5px 7px 2px; pointer-events:auto; cursor:pointer; text-align:center;
  overflow:hidden; isolation:isolate;
  border:1.5px dashed rgba(255,253,249,0.8);
  border-radius:20px; box-shadow:0 2px 10px rgba(43,43,43,0.22);
  font-family:'Special Elite','Inter',monospace; font-size:9.5px;
  letter-spacing:0.04em; text-transform:uppercase; color:var(--paper);
  line-height:1; white-space:nowrap;
  opacity:0; transition:opacity 0.2s ease, transform 0.2s ease;
}
/* real frosted-glass layer, same mechanism as the Reflections cards: a blurred copy
   of the card's own photo sits behind the label (genuine filter:blur() on an <img>,
   not backdrop-filter reaching through - kept consistent with the reflections cards,
   and it also sidesteps backdrop-filter's flaky behaviour over masked/scrolling
   ancestors like .work-gallery-wrap's edge fade), with a translucent tint on top for
   the glass wash, then the label on top of that. */
.hint-glass-bg{
  position:absolute; top:-25%; left:-25%; width:150%; height:150%;
  object-fit:cover; z-index:0;
  filter:blur(10px) saturate(1.2) brightness(0.95);
}
.hint-glass-tint{
  position:absolute; inset:0; z-index:1;
  background:rgba(43,43,43,0.22);
}
.hint-glass-label{ position:relative; z-index:2; }
/* Work gallery: anchored bottom-right of the rectangular image, same as before */
.work-gallery-hint{
  position:absolute; bottom:8px; right:8px;
  transform:translateY(4px);
}
.work-gallery-card:hover .work-gallery-hint{ opacity:1; transform:translateY(0); }
/* Recognition: the photo is a circle, so a corner-anchored tag would land outside the
   circular mask and get clipped - bottom-center keeps it fully inside the circle
   while still reading as an anchored "tag" rather than a floating center label */
.recognition-hint{
  position:absolute; bottom:6%; left:50%;
  transform:translate(-50%, 6px);
}
.recognition-card:hover .recognition-hint{ opacity:1; transform:translate(-50%, 0); }

.work-gallery-card.is-expanded .work-gallery-hint,
.recognition-card.is-expanded .recognition-hint{opacity:0 !important; pointer-events:none;}
@media (prefers-reduced-motion: reduce){
  .work-gallery-hint, .recognition-hint{transition:none;}
}

/* ---- a size-neutral lift + scale on hover - separate from the click-triggered full
   expand (which changes the card's width/max-height instead). This gives hover some
   feedback of its own without touching layout, so it never fights the gallery's
   horizontal swipe/scroll the way the old hover-to-expand version did. Skipped once
   the card is actually expanded, since the click-expand's own sizing takes over. ---- */
.work-gallery-card:not(.is-expanded):hover .work-gallery-img{
  transform:translateY(-4px) scale(1.035);
}
@media (prefers-reduced-motion: reduce){
  .work-gallery-card:hover .work-gallery-img{transform:none;}
}

/* ---- shimmer while a photo/embed is still loading: a soft highlight sweeps over a
   plain fill instead of the card just sitting blank, then fades out once the real
   image/iframe actually finishes loading (see script.js for the load-event wiring). ---- */
.work-gallery-img::after,
.dialogues-blob-front::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(100deg, var(--asphalt) 35%, #F4EEDF 50%, var(--asphalt) 65%);
  background-size:250% 100%;
  animation:shimmerSweep 1.5s ease-in-out infinite;
  opacity:1; transition:opacity 0.4s ease;
}
.work-gallery-img.img-loaded::after,
.dialogues-blob-front.img-loaded::after{ opacity:0; }
.work-gallery-img.no-image::after{ display:none; }
@keyframes shimmerSweep{
  0%{background-position:200% 0;}
  100%{background-position:-50% 0;}
}
.work-gallery-photo{opacity:0; transition:opacity 0.4s ease, filter 0.4s ease;}
.work-gallery-img.img-loaded .work-gallery-photo{opacity:1;}
.dialogues-blob-front img{opacity:0; transition:opacity 0.4s ease;}
.dialogues-blob-front.img-loaded img{opacity:1;}
@media (prefers-reduced-motion: reduce){
  .work-gallery-img::after, .dialogues-blob-front::after{animation:none;}
}

/* a real live page shown as a "thumbnail", render the iframe at 4x the container size,
   then scale it down to 25%. That gives a proportionally zoomed-out view of the whole
   page rather than iframe's normal behavior of just clipping/scrolling a 1:1 slice of it.
   pointer-events:none so hovering/clicking the card still opens the detail panel instead
   of the click landing inside the embedded page. */
.work-gallery-embed{pointer-events:none;}
.work-gallery-embed iframe{
  position:absolute; top:0; left:0; width:400%; height:400%;
  transform:scale(0.25); transform-origin:top left;
  border:none;
  filter:sepia(0.32) saturate(0.55) contrast(1.05);
  transition:filter 0.4s ease;
}
.work-gallery-card:hover .work-gallery-embed iframe,
.work-gallery-card.is-expanded .work-gallery-embed iframe{
  filter:sepia(0) saturate(1) contrast(1) brightness(1);
}

/* expanded card gets a subtle highlight so it's clear which one is open, thin, matching
   the site's restrained line weights rather than a bold block of color */
.work-gallery-card.is-expanded .work-gallery-img{
  border-color:var(--terracotta);
}

/* ---- the unfolded panel itself: lives inside the card, right under its cover image.
   No border/background of its own, it just sits full-width under the photo (both are
   plain block children of the card with no explicit width, so they're already locked to
   the same width; no visible frame is needed to prove that). Height is animated with the
   grid-rows 0fr→1fr trick (no JS measuring needed), the outer element must stay
   overflow:hidden with the inner wrapper at min-height:0 for the collapse to actually
   reach zero rather than stopping at the content's natural height. ---- */
.work-gallery-detail{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows 0.45s cubic-bezier(.34,1.56,.64,1);
  overflow:hidden;
}
.work-gallery-card.is-expanded .work-gallery-detail{margin-top:10px;}
.work-gallery-detail.open{grid-template-rows:1fr;}
.work-gallery-detail-inner{
  min-height:0; overflow:hidden;
  display:flex; flex-direction:column; gap:14px;
  padding-top:4px; position:relative;
  opacity:0; transition:opacity 0.3s ease;
}
.work-gallery-detail.open .work-gallery-detail-inner{opacity:1; transition-delay:0.12s;}

/* header row: title + year/location tags + small org logos all sit on the same line
   together, wrapping as a unit if the card's too narrow to fit them all, photos and
   text follow underneath, full width */
.work-detail-header{display:flex; flex-direction:column; gap:8px;}
.work-detail-title-row{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:nowrap;}
.work-detail-title-row-actions{display:flex; align-items:center; gap:10px; flex-shrink:0; margin-left:auto;}
.work-detail-tags{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.work-detail-readmore{
  display:inline-flex; align-items:center; flex-shrink:0;
  font-family:'Inter',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:0.02em;
  color:var(--paper); background:var(--teal); text-decoration:none;
  padding:6px 14px; border-radius:999px;
  transition:background 0.2s ease, transform 0.2s ease;
}
.work-detail-readmore:hover{background:var(--charcoal); transform:translateX(2px);}

/* close button now sits inline in the title row, right after the Read more pill, so it's
   always level with the title instead of floating over the photo corner. */
.work-gallery-detail-close{
  flex-shrink:0; width:22px; height:22px; border-radius:50%;
  background:var(--charcoal); border:1.5px solid var(--paper); color:var(--paper);
  font-size:12px; line-height:1; box-shadow:0 3px 8px rgba(43,43,43,0.25);
  transition:transform 0.2s ease, background 0.2s ease;
}
.work-gallery-detail-close:hover{background:var(--terracotta); transform:scale(1.1) rotate(90deg);}

/* title + year/location tags + small org logos all sit on the same line together,
   wrapping as a unit if the card's too narrow to fit them all */
.work-detail-title{font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:clamp(19px,3vw,24px); color:var(--charcoal); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.work-detail-tags{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.work-detail-tag{
  display:inline-block; font-family:'Big Shoulders Display',sans-serif; font-weight:800;
  font-size:11px; letter-spacing:0.04em; color:var(--paper); text-transform:uppercase;
  padding:3px 10px; border-radius:3px;
}
.work-detail-tag:empty{display:none;}
.work-detail-year{background:var(--terracotta); transform:rotate(-2deg);}
.work-detail-location{background:var(--charcoal); transform:rotate(1.5deg);}

/* Sparking Dialogues meta tags (Global / date range) use teal instead of the default
   charcoal, scoped to this block only so other location/date tags site-wide are
   untouched. */
.dialogues-meta .work-detail-tag{background:var(--teal); color:var(--paper);}
.dialogues-meta .dialogues-global-tag{background:var(--terracotta);}

/* small org logos, inline with the tags, PNGs only, no name text. Renders as a <span>
   when data-org-links has no URL for that org, or an <a> (new tab) when it does. */
.work-detail-logo{position:relative; display:inline-block; width:38px; height:24px; margin-left:2px;}
a.work-detail-logo{transition:transform 0.15s ease, opacity 0.15s ease;}
a.work-detail-logo:hover{transform:scale(1.08); opacity:0.85;}
.work-detail-logo-img{width:100%; height:100%; object-fit:contain; display:block;}
.work-detail-logo-fallback{
  display:none; align-items:center; justify-content:center; position:absolute; inset:0;
  border:1px dashed var(--border); border-radius:3px; background:var(--paper);
  font-family:'Inter',sans-serif; font-size:8px; font-weight:700; letter-spacing:0.02em; color:var(--text-secondary);
}
.work-detail-logo.no-image .work-detail-logo-img{display:none;}
.work-detail-logo.no-image .work-detail-logo-fallback{display:flex;}

/* the photo area holds 1+ real polaroid-frame elements (script.js builds them based on
   data-photos on the clicked card), same tilted/washi-tape language as the rest of the
   site, laid out as a plain horizontal row (wraps if there isn't room) */
.work-detail-photos{display:flex; flex-wrap:wrap; gap:10px;}
.work-detail-photo{
  position:relative; flex:0 0 auto; width:100px;
  background:var(--paper); padding:3px 3px 7px; border:1px solid var(--charcoal);
  border-radius:2px; box-shadow:0 10px 20px rgba(43,43,43,0.18);
  transform:rotate(var(--tilt, 3deg));
}
.work-detail-photo-tape{
  position:absolute; top:-7px; left:50%; width:32px; height:12px;
  background:var(--sandstone); opacity:0.85;
  transform:translateX(-50%) rotate(-4deg);
  box-shadow:0 2px 4px rgba(43,43,43,0.15);
}
.work-detail-photo-inner{
  position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:4/3;
  overflow:hidden; border:1px dashed var(--border);
}
.work-detail-photo-img{width:100%; height:100%; object-fit:cover; display:block;}
.work-detail-photo-fallback{
  display:none; align-items:center; justify-content:center; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg, var(--border), var(--border) 2px, transparent 2px, transparent 10px);
  font-family:'Inter',sans-serif; font-size:10px; color:var(--text-secondary); font-style:italic;
}
.work-detail-photo-inner.no-image .work-detail-photo-img{display:none;}
.work-detail-photo-inner.no-image .work-detail-photo-fallback{display:flex;}

.work-detail-desc{font-family:'Inter',sans-serif; font-size:13.5px; color:var(--charcoal); line-height:1.65;}
.work-detail-desc a{color:var(--terracotta); font-weight:700; text-decoration:none;}
.work-detail-desc a:hover{color:var(--charcoal);}

/* ---- break: full-height portrait photo + big text, side by side, full-bleed like the
   gallery above it. --photo-accent is meant to be one real color pulled from the photo
   once it's in (a building color from the Copenhagen shot), everything below that reads
   from this same variable, so the achievements collage visually inherits its color from
   the photo instead of the two blocks feeling unrelated. ---- */
/* ---- break: back to the simple version, plain full-bleed photo on the right (portrait
   crop via object-fit:cover), plain text on the left. No overlay, no gradient, no dark
   panel, just the two of them side by side. ---- */
.work-break{
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  margin-top:56px;
  display:grid; grid-template-columns:1fr 0.65fr; align-items:stretch;
  min-height:min(38vh, 340px);
}
.work-break-photo{position:relative; overflow:hidden; order:2; border-radius:16px 0 0 16px;}
.work-break-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block;
}
.work-break-text{
  position:relative;
  display:flex; align-items:center; justify-content:flex-end; order:1;
  padding:40px clamp(24px,5vw,64px);
  text-align:right;
}
.break-butterflies{
  position:absolute; left:0; top:0; width:52%; height:100%;
  overflow:visible; pointer-events:none;
}
.work-break-line{
  font-family:'Big Shoulders Display',sans-serif; font-weight:800;
  font-size:clamp(26px,4vw,58px); line-height:1.12; letter-spacing:-0.01em;
  color:var(--charcoal); margin:0;
}
.work-break-line .hl-yellow{color:var(--win-lit);}
.work-break-line .hl-teal{color:var(--teal);}
.work-break-line .hl-pink{color:var(--blush);}
.work-break-line .hl-terracotta{color:var(--terracotta);}
.work-break-line .hl-pink{color:var(--blush);}
@media (max-width:820px){
  .work-break{grid-template-columns:1fr; min-height:auto;}
  .work-break-photo{aspect-ratio:3/4; order:1;}
  .work-break-text{padding:36px 28px 44px; order:2;}
}

/* ---- achievements: scattered collage of tilted notes, sitting below the Work gallery
   instead of being its own nav section. Uses the same pinned-paper language as the
   project polaroids (tape, tilt, hand-set feel) but as flowing/wrapping notes rather
   than a strip, so it reads as a loose pinboard rather than another row of cards. ---- */
.work-collage{margin-top:56px; padding-top:36px; border-top:0.5px solid var(--border);}
.work-collage-heading{
  font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:clamp(18px,2.4vw,24px);
  letter-spacing:-0.01em; color:var(--charcoal); margin:0 0 20px; text-align:right;
}

/* ---- Recognition strip: same full-bleed swipeable-row mechanics as .work-gallery-wrap
   (edge-fade mask, hidden scrollbar, native touch/trackpad scroll) so it reads as a
   sibling gallery to the Work one above, but the cards themselves are plain circular
   photo bubbles (blank/paper until an image loads, thin neutral ring, no color, no tilt)
   rather than the pinned colored-paper look used before. ---- */
.recognition-gallery-wrap{
  position:relative; margin-top:8px;
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  overflow-x:auto; overflow-y:hidden; padding:14px 0 30px;
  touch-action:pan-x;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
}
.recognition-gallery-wrap::-webkit-scrollbar{display:none;}
.recognition-gallery-track{
  --circle-size:min(240px, 62vw);
  display:flex; gap:14px; width:max-content; padding:10px 40px 14px;
  align-items:flex-start;
}
/* the opened card near either end of the strip would otherwise sit flush against the
   mask's fade zone and read as visually "cut off", give the track breathing room on
   whichever side that's happening, same fix as the Work gallery above uses */
.recognition-gallery-wrap.edge-card-expanded .recognition-gallery-track{
  padding-left:56px; padding-right:56px;
}
.recognition-card{
  position:relative; flex:0 0 auto; display:flex; flex-direction:column; align-items:center;
  width:var(--circle-size); padding:0; cursor:pointer; text-align:center;
  transition:width 0.45s cubic-bezier(.34,1.56,.64,1);
}
.recognition-card:focus{outline:none;}
.recognition-card:focus-visible .recognition-photo-frame{outline:2px dashed var(--terracotta); outline-offset:3px;}
/* opened card widens so the detail panel underneath has room to breathe, while the
   circle itself, centered via align-items:center above, stays exactly the same size */
.recognition-card.is-expanded{width:min(400px, 92vw);}
/* the headshot/main photo, blank/paper until it loads, dotted ring instead of a solid
   line, no color, no tilt. Same dashed-fallback pattern as the Work gallery's photo
   cards so a missing file never shows a broken-image icon. */
.recognition-photo-frame{
  position:relative; display:block; overflow:hidden;
  width:var(--circle-size); aspect-ratio:1/1; border-radius:50%;
  background:var(--paper); border:2.5px dotted var(--charcoal);
  box-shadow:0 8px 18px rgba(43,43,43,0.12);
  transition:transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease, border-color 0.2s ease, width 0.45s cubic-bezier(.34,1.56,.64,1);
}
.recognition-card:hover .recognition-photo-frame{
  transform:translateY(-5px) scale(1.05);
  box-shadow:0 14px 26px rgba(43,43,43,0.18);
}
/* expanded gets the same terracotta highlight the Work gallery's border does, only on
   actual expand, not on a plain hover, so the two galleries behave identically, and the
   photo itself grows here too, same idea as the Work gallery's image getting taller */
.recognition-card.is-expanded .recognition-photo-frame{
  width:min(320px, 84vw); transform:translateY(-3px); border-color:var(--terracotta);
}
.recognition-photo{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:sepia(0.22) saturate(0.6) contrast(1.05); transition:filter 0.35s ease;
}
.recognition-card:hover .recognition-photo, .recognition-card.is-expanded .recognition-photo{
  filter:sepia(0) saturate(1) contrast(1);
}
.recognition-photo-fallback{
  display:none; align-items:center; justify-content:center; position:absolute; inset:0;
  font-family:'Inter',sans-serif; font-size:11px; color:var(--text-secondary); font-style:italic;
}
.recognition-photo-frame.no-image .recognition-photo{display:none;}
.recognition-photo-frame.no-image .recognition-photo-fallback{display:flex;}

/* ---- expand-in-place detail, dropping open below the circle rather than widening a
   rectangle, extra photos + fuller text slide open underneath the fold line. Close
   button and Read more link reuse the exact Work-gallery-detail classes (see above)
   instead of their own look, so the two galleries feel like one system. ---- */
.recognition-detail{
  width:100%; max-height:0; overflow:hidden; opacity:0;
  transition:max-height 0.4s ease, opacity 0.3s ease;
}
.recognition-detail.open{max-height:640px; opacity:1;}
.recognition-detail-inner{
  position:relative; margin-top:12px; padding-top:12px; text-align:left;
  border-top:1px solid var(--border);
}
/* title, Read more, and the close × all sit together on one line: title takes the
   remaining space and wraps if it needs to, Read more and the × stay put on the right */
.recognition-detail-title-row{
  display:flex; align-items:center; gap:10px;
  margin:2px 0 8px; flex-wrap:wrap;
}
.recognition-detail-title{
  font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:17px;
  line-height:1.25; color:var(--charcoal); flex:1; min-width:0;
}
.recognition-detail-readmore, .recognition-detail-close{flex-shrink:0;}
/* year + location + org logos all sit together in their own row below the title */
.recognition-detail-tags-row{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:10px;}
/* extra photos use the exact .work-detail-photo* polaroid classes shared with the Work
   gallery above (tilt, washi tape, dashed placeholder), just smaller and forced onto a
   single row (however many there are, from 1 up to a handful) so they never wrap onto a
   second line inside the narrower Recognition card, unlike the Work gallery's wider one */
/* small left/right buffer: the polaroids are tilted (transform:rotate), so their
   rotated corners poke a few px past their own layout box, and get sliced off by the
   panel's overflow:hidden (needed for the open/close animation) without this padding */
.recognition-detail-photos{flex-wrap:nowrap; padding:10px 8px 0; margin-bottom:14px;}
/* Recognition's polaroids drop the white paper margin (background + padding) that the
   Work gallery's keep, so the photo fills right up to the border, tape stays as-is */
.recognition-detail-photos .work-detail-photo{width:76px; flex-shrink:0; background:none; padding:0;}
.recognition-detail-desc{font-family:'Inter',sans-serif; font-size:12.5px; line-height:1.65; color:var(--charcoal); margin-bottom:2px;}
.recognition-detail-desc a{color:var(--terracotta); font-weight:700; text-decoration:none;}
.recognition-detail-desc a:hover{text-decoration:underline;}

@media (prefers-reduced-motion: reduce){
  .recognition-card, .recognition-photo-frame{transition:none;}
  .recognition-detail{transition:none;}
}

/* ---- Dialogues collage: fixed curated layout, not a scroll strip. An irregular
   "skyline" of mixed portrait/landscape photos (hand-set heights per slot, not natural
   aspect ratio) flanks a centered line of text, matching a reference collage template
   the client shared. ---- */
.dialogues-block{margin-top:56px; padding-top:36px; border-top:0.5px solid var(--border);}
.dialogues-meta{display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:10px; flex-wrap:wrap;}
.dialogues-logo{display:inline-flex; width:34px; height:34px; flex-shrink:0; border-radius:50%; overflow:hidden; border:1px solid var(--border); background:var(--paper);}
.dialogues-logo img{width:100%; height:100%; object-fit:cover; display:block;}

/* Meet-box: rounded card sitting to the LEFT of the collage. Three photo "blobs"
   (soft-cornered, tilted, overlapping) are centered on the card's left border, text
   sits on the right inside the card. Not a grid, not a stack of uniform boxes. */
.dialogues-content-row{display:flex; align-items:center; gap:4px; margin-top:28px;}
.dialogues-meetbox{
  position:relative; flex:0 0 360px; width:360px; height:480px;
  border-radius:24px;
  box-shadow:0 8px 30px rgba(43,43,43,0.08);
}
.dialogues-meetbox-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  border-radius:24px; z-index:0;
}
.dialogues-meetbox-glass{
  position:absolute; inset:0; z-index:1; border-radius:24px;
  background:rgba(255,253,249,0.08);
  backdrop-filter:blur(34px) saturate(180%); -webkit-backdrop-filter:blur(34px) saturate(180%);
  border:2px dashed rgba(43,43,43,0.55);
  pointer-events:none;
}
.dialogues-washi-top{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%) rotate(-2deg);
  width:70px; height:26px; background:rgba(188,130,103,0.6);
  box-shadow:0 2px 4px rgba(43,43,43,0.12); z-index:4;
}
.dialogues-meetbox-text{
  position:absolute; right:6px; top:25px; height:430px; width:155px;
  display:flex; align-items:center; text-align:center;
  font-family:'Special Elite', 'Amaranth', sans-serif; font-weight:700; font-size:17px;
  line-height:1.55; color:var(--paper); margin:0;
  text-shadow:0 1px 6px rgba(43,43,43,0.35);
}
.dialogues-meetbox-heart{width:14px; height:14px; flex-shrink:0; color:var(--win-lit); margin-left:5px; vertical-align:-1px;}
.dialogues-cityscene{position:absolute; inset:0; width:100%; height:100%; opacity:0.22; z-index:1; pointer-events:none; border-radius:24px; overflow:hidden;}
.dialogues-blob{z-index:2;}
.dialogues-meetbox-text{z-index:3;}
.dialogues-blob{
  position:absolute; left:-45px; width:220px; height:130px; perspective:900px; cursor:pointer;
}
.dialogues-blob--1{top:25px; transform:rotate(-7deg);}
.dialogues-blob--2{top:175px; transform:rotate(6deg); z-index:2;}
.dialogues-blob--3{top:325px; transform:rotate(-5deg); z-index:3;}
.dialogues-blob-inner{
  display:block; position:relative; width:100%; height:100%;
  transform-style:preserve-3d; transition:transform 0.6s ease;
}
.dialogues-blob:hover .dialogues-blob-inner, .dialogues-blob.is-flipped .dialogues-blob-inner{transform:rotateY(180deg);}
.dialogues-blob-face{
  display:block; position:absolute; inset:0; backface-visibility:hidden;
  border-radius:22px; border:1px solid var(--charcoal); overflow:hidden;
  box-shadow:0 8px 16px rgba(43,43,43,0.16);
}
.dialogues-blob-front img{width:100%; height:100%; object-fit:cover; display:block;}
.dialogues-blob-back{
  transform:rotateY(180deg); background:var(--charcoal);
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.dialogues-blob-back a{
  color:var(--paper); text-decoration:none; padding:12px;
  font-family:'Inter',sans-serif; font-weight:700; font-size:13px; line-height:1.55;
}
@media (max-width:900px){
  .dialogues-content-row{flex-direction:column; align-items:stretch;}
  .dialogues-meetbox{width:100%; margin-left:85px;}
}


/* Single unified 4-column grid: column 1 is the books, columns 2-4 are the original
   photo grid. Using one grid (not separate flex columns) means every cell shares the
   exact same track width, so the books column lines up pixel-for-pixel with the
   photos beside it - no manual width-matching needed. */
.dialogues-collage{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
  max-width:592px; margin:28px 0 0 auto;
}
.dialogues-hero{
  display:block; grid-column:span 2;
  overflow:hidden; border-radius:2px; border:1px solid var(--charcoal);
  box-shadow:0 10px 22px rgba(43,43,43,0.18);
  transition:border-radius 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.dialogues-hero img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s ease;}
.dialogues-hero a, .dialogues-photo a{display:block; width:100%; height:100%;}
.dialogues-photo{
  display:block; aspect-ratio:3/4;
  overflow:hidden; border-radius:2px; border:1px solid var(--charcoal);
  box-shadow:0 8px 18px rgba(43,43,43,0.16);
  transition:border-radius 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.dialogues-photo img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s ease;}

/* hover: corners round off and the photo lifts + gently zooms, same tactile feel as
   the gallery cards elsewhere on the page */
.dialogues-photo:hover, .dialogues-hero:hover{
  border-radius:16px;
  transform:translateY(-3px);
  box-shadow:0 14px 26px rgba(43,43,43,0.24);
}
.dialogues-photo:hover img, .dialogues-hero:hover img{transform:scale(1.05);}
@media (prefers-reduced-motion: reduce){
  .dialogues-photo, .dialogues-hero, .dialogues-photo img, .dialogues-hero img{transition:none;}
  .dialogues-photo:hover, .dialogues-hero:hover{transform:none;}
  .dialogues-photo:hover img, .dialogues-hero:hover img{transform:none;}
}

/* Book role tags: little sticker-style labels tucked on the corner of each book
   photo. Absolutely positioned so they sit on top of the image rather than adding
   height, keeping every row in the grid the exact same height as before. */
.dialogues-book{position:relative;}
.dialogues-book-tag{
  position:absolute; bottom:-9px; left:50%; z-index:2;
  background:var(--charcoal); color:var(--paper);
  font-family:'Inter', sans-serif; font-weight:600; font-size:11px; letter-spacing:0.02em;
  padding:4px 10px 3px; border-radius:6px;
  box-shadow:0 3px 7px rgba(43,43,43,0.22); white-space:nowrap;
  opacity:0; transform:translate(-50%, 4px); transition:opacity 0.2s ease, transform 0.2s ease;
  pointer-events:none;
}
.dialogues-book:hover .dialogues-book-tag{opacity:1; transform:translate(-50%, 0);}
@media (max-width:900px){
  .dialogues-collage{max-width:100%; grid-template-columns:repeat(2, 1fr); gap:8px;}
  .dialogues-hero{grid-column:span 2;}
}

@media (prefers-reduced-motion: reduce){
  .work-gallery-card{transition:none;}
  .work-gallery-detail{transition:none;}
  .work-gallery-detail-inner{transition:none;}
}

/* ---- Cartographic Work: heading + gallery form the left column, M11 the right,
   full-bleed to the true right edge (mirroring the Copenhagen break's photo-on-right
   treatment elsewhere on the page) rather than sitting in a framed card - object-
   fit:cover with a box matched to M11's own aspect ratio, so nothing is cropped or
   padded. Both columns are align-items:start siblings in one row, so the heading and
   M11's top edges land parallel. The other 10 maps fill a balanced masonry grid below
   the heading (see script.js), since they mix portrait and landscape orientation and
   each tile keeps its own natural aspect ratio. ---- */
.map-feature-row{
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  display:grid; grid-template-columns:1fr minmax(260px, min(38%, 560px)); align-items:start;
}
.map-feature-left-col{
  padding:0 clamp(20px,4vw,40px) 24px clamp(24px,5vw,64px);
}
.map-feature-photo-wrap{
  /* M11's own dimensions (4961 x 7016), so the box IS the poster's shape - object-fit
     has nothing to crop or pad, the full image just fills its frame exactly. */
  aspect-ratio:4961 / 7016;
  overflow:hidden; border-radius:16px 0 0 16px;
}
.map-feature-tile{display:block; width:100%; height:100%;}
.map-feature-photo{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
}
.map-grid{margin-top:20px;}
@media (max-width:900px){
  .map-feature-row{grid-template-columns:1fr;}
  .map-feature-photo-wrap{order:1; border-radius:0;}
  .map-feature-left-col{order:2; padding:24px clamp(20px,5vw,40px) 8px;}
}

/* a handful of pastel pink bubbles drifting up from the bottom-left corner of the
   section, purely a quiet background detail behind the maps/heading - not a
   repeat of the butterflies or the birds, just soft, slow, and easy to miss. */
#visual-practice{position:relative;}
.practice-bubbles{position:absolute; left:-60px; bottom:0; width:280px; height:100%; overflow:visible; pointer-events:none; z-index:-1;}
.practice-bubble{
  position:absolute; bottom:-50px; border-radius:50%;
  background:var(--blush); opacity:0;
  animation:practiceBubbleFloat linear infinite;
}
.practice-bubble--1{left:10px;  width:52px; height:52px; animation-duration:13s; animation-delay:0s;}
.practice-bubble--2{left:40px;  width:82px; height:82px; animation-duration:17s; animation-delay:0.2s;}
.practice-bubble--3{left:90px;  width:38px; height:38px; animation-duration:10s; animation-delay:1.5s;}
.practice-bubble--4{left:70px;  width:84px; height:84px; animation-duration:19s; animation-delay:3s;}
.practice-bubble--6{left:130px; width:44px; height:44px; animation-duration:11s; animation-delay:3.2s;}
.practice-bubble--5{left:160px; width:60px; height:60px; animation-duration:14s; animation-delay:5s;}
.practice-bubble--7{left:190px; width:72px; height:72px; animation-duration:16s; animation-delay:5.3s;}
.practice-bubble--8{left:20px;  width:34px; height:34px; animation-duration:9s;  animation-delay:7s;}
.practice-bubble--9{left:150px; width:48px; height:48px; animation-duration:12s; animation-delay:7.2s;}
@keyframes practiceBubbleFloat{
  0%{transform:translateY(0) scale(0.85); opacity:0;}
  8%{opacity:0.85;}
  55%{opacity:0.8; transform:translateY(-380px) scale(0.95);}
  85%{opacity:0.35; transform:translateY(-620px) scale(1);}
  100%{transform:translateY(-720px) scale(1); opacity:0;}
}
@media (max-width:900px){
  .practice-bubbles{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .practice-bubble{animation:none; opacity:0;}
}

/* Balanced masonry: script.js distributes the 10 tiles into column wrapper divs here,
   always adding each next tile to whichever column currently sums shortest, using the
   real width/height attributes on each <img> (no need to wait for image load). Real
   aspect ratios throughout, no crop - this is what actually keeps the bottom edge from
   going ragged, since plain CSS multi-column fills one column completely before
   starting the next rather than balancing them. */
.map-grid{
  display:flex; gap:10px; align-items:flex-start; width:100%;
}
.map-col{
  display:flex; flex-direction:column; gap:10px; flex:1 1 0; min-width:0;
}
.map-tile{
  display:block; width:100%;
  border:none; background:none; padding:0; cursor:pointer; text-align:left;
  border-radius:2px; overflow:hidden; position:relative;
  border:1px solid var(--charcoal); box-shadow:0 8px 18px rgba(43,43,43,0.16);
  transition:border-radius 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.map-tile img{
  width:100%; height:auto; display:block; transition:transform 0.5s ease, filter 0.4s ease;
  filter:sepia(0.32) saturate(0.55) contrast(1.05);
}
.map-tile:hover img{filter:sepia(0) saturate(1) contrast(1) brightness(1);}
.map-tile::after{
  content:''; position:absolute; inset:0; background:rgba(43,43,43,0.06);
  opacity:0; transition:opacity 0.35s ease; pointer-events:none;
}
.map-tile:hover{
  border-radius:16px; transform:translateY(-3px);
  box-shadow:0 14px 26px rgba(43,43,43,0.24);
}
.map-tile:hover img{transform:scale(1.05);}
.map-tile:hover::after{opacity:1;}
.map-tile:focus-visible{outline:2px solid var(--terracotta); outline-offset:3px;}

@media (max-width:640px){ .map-grid{gap:8px;} .map-col{gap:8px;} }
@media (prefers-reduced-motion: reduce){
  .map-tile, .map-tile img{transition:none;}
  .map-tile:hover{transform:none;}
  .map-tile:hover img{transform:none;}
}

/* Lightbox: fixed dark overlay, single centered image, prev/next + close. Opacity/scale
   transition on open rather than display toggling alone, so it doesn't feel like a hard
   cut; hidden entirely via visibility once closed so it can't be tabbed into. */
.map-lightbox{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,19,17,0.92);
  opacity:0; visibility:hidden;
  transition:opacity 0.3s ease, visibility 0s linear 0.3s;
}
.map-lightbox.is-open{opacity:1; visibility:visible; transition:opacity 0.3s ease;}
.map-lightbox-img{
  max-width:min(88vw, 1100px); max-height:86vh; object-fit:contain;
  border-radius:3px; box-shadow:0 20px 60px rgba(0,0,0,0.5);
  opacity:0; transform:scale(0.97); transition:opacity 0.3s ease, transform 0.3s ease;
}
.map-lightbox.is-open .map-lightbox-img{opacity:1; transform:scale(1);}
.map-lightbox-close, .map-lightbox-nav{
  position:absolute; background:none; border:none; color:var(--paper); cursor:pointer;
  font-family:'Inter', sans-serif; line-height:1; padding:10px;
  transition:opacity 0.2s ease, transform 0.2s ease; opacity:0.75;
}
.map-lightbox-close:hover, .map-lightbox-nav:hover{opacity:1;}
.map-lightbox-close{top:18px; right:22px; font-size:34px;}
.map-lightbox-nav{top:50%; transform:translateY(-50%); font-size:52px;}
.map-lightbox-nav:hover{transform:translateY(-50%) scale(1.12);}
.map-lightbox-prev{left:14px;}
.map-lightbox-next{right:14px;}
.map-lightbox-count{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  color:var(--paper); opacity:0.7; font-family:'Inter',sans-serif; font-size:13px; letter-spacing:0.02em;
}
@media (max-width:640px){
  .map-lightbox-nav{font-size:36px; padding:6px;}
  .map-lightbox-close{font-size:28px; top:12px; right:14px;}
}
@media (prefers-reduced-motion: reduce){
  .map-lightbox, .map-lightbox-img, .map-lightbox-close, .map-lightbox-nav{transition:none;}
}

/* ---- Creative Studio: title at the top, then amna.jpg on the LEFT (headshot
   pattern, full-bleed/cropped on the true left edge) with a big pull-quote on the
   right in the same style as the Copenhagen break's "impact begins" line, colored
   highlight words carrying the emphasis instead of underlines/bold. The "handmade
   with love" line and the citiescapebyamna pill+logo sit underneath the quote. ---- */
.studio-quote-row{
  position:relative;
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  margin-top:20px;
  display:grid; grid-template-columns:1fr 0.75fr; align-items:stretch;
  min-height:min(46vh, 420px);
}

/* a handful of autumn leaves drifting down over the right side of the row (behind
   the pull-quote, in front of nothing) - mirrors the visual-practice bubbles but
   falling top to bottom instead of rising, and traveling the full height of the row
   before fading. Mostly terracotta, with a couple of other fall colors mixed in. */
.studio-leaves{position:absolute; top:0; right:0; width:48%; height:100%; overflow:hidden; pointer-events:none; z-index:-1;}
.studio-leaf{
  position:absolute; top:-8%; border-radius:0% 60% 0% 60%;
  opacity:0;
  animation:studioLeafFall linear infinite;
}
.studio-leaf--terracotta{background:var(--terracotta);}
.studio-leaf--gold{background:var(--win-lit);}
.studio-leaf--sage{background:var(--sage);}
.studio-leaf--1{left:6%;  width:14px; height:14px; animation-duration:20s; animation-delay:0s;}
.studio-leaf--2{left:22%; width:19px; height:19px; animation-duration:26s; animation-delay:3s;}
.studio-leaf--3{left:40%; width:12px; height:12px; animation-duration:17s; animation-delay:6s;}
.studio-leaf--4{left:57%; width:17px; height:17px; animation-duration:28s; animation-delay:1.5s;}
.studio-leaf--5{left:74%; width:15px; height:15px; animation-duration:22s; animation-delay:9s;}
.studio-leaf--6{left:89%; width:18px; height:18px; animation-duration:26s; animation-delay:5s;}
.studio-leaf--7{left:15%; width:11px; height:11px; animation-duration:16s;  animation-delay:12s;}
.studio-leaf--8{left:65%; width:13px; height:13px; animation-duration:19s; animation-delay:8s;}
.studio-leaf--9{left:48%; width:16px; height:16px; animation-duration:23s; animation-delay:10.5s;}
@keyframes studioLeafFall{
  0%{top:-8%; transform:translateX(0) rotate(0deg); opacity:0;}
  10%{opacity:0.75;}
  30%{transform:translateX(12px) rotate(90deg);}
  55%{top:50%; transform:translateX(-9px) rotate(175deg); opacity:0.65;}
  80%{transform:translateX(11px) rotate(265deg); opacity:0.4;}
  100%{top:104%; transform:translateX(-5px) rotate(345deg); opacity:0;}
}
@media (max-width:640px){
  .studio-leaves{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .studio-leaf{animation:none; opacity:0;}
}
.studio-quote-photo{position:relative; overflow:hidden; border-radius:0 16px 16px 0;}
.studio-quote-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center 25%; display:block;
}
.studio-quote-text{
  display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
  gap:18px; padding:40px clamp(24px,5vw,64px); text-align:right;
}
.studio-quote-line{
  font-family:'Big Shoulders Display',sans-serif; font-weight:800;
  font-size:clamp(21px,3.1vw,36px); line-height:1.28; letter-spacing:-0.01em;
  color:var(--charcoal); margin:0;
}
.studio-quote-line .hl-terracotta{color:var(--terracotta);}
.studio-quote-line .hl-maroon{color:var(--maroon);}
.studio-quote-line .hl-teal{color:var(--teal);}
.studio-quote-line .hl-yellow{color:var(--win-lit);}
.studio-typewriter{
  font-family:'Special Elite', 'Inter', monospace; font-size:15px; color:var(--text-secondary);
  display:flex; align-items:center; gap:8px; margin:0;
}
.studio-heart{width:15px; height:15px; flex-shrink:0; color:var(--terracotta);}
.studio-badge-row{
  display:flex; align-items:center; gap:10px; justify-content:flex-end;
}
.studio-ig-logo{
  display:inline-flex; width:34px; height:34px; flex-shrink:0; border-radius:50%;
  overflow:hidden; border:1px solid var(--border); background:var(--paper);
  transition:border-color 0.15s ease, transform 0.15s ease;
}
.studio-ig-logo:hover{border-color:var(--terracotta); transform:translateY(-1px);}
.studio-ig-logo img{width:100%; height:100%; object-fit:cover; display:block;}

/* Vintage "press stamp" box: double-ring border like an old postage stamp, slight
   tilt, warm paper tone, sepia-toned thumbnail - sits under the citiescapebyamna
   badge, right-aligned like everything else in this column. */
.studio-press-box{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  width:184px; padding:14px 14px 13px;
  background:var(--paper);
  border:1.5px solid var(--charcoal);
  box-shadow:0 0 0 4px var(--paper), 0 0 0 5.5px var(--charcoal), 0 6px 16px rgba(43,43,43,0.12);
  text-decoration:none; color:var(--charcoal);
  transform:rotate(-1.5deg);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.studio-press-box:hover{
  transform:rotate(0deg) translateY(-2px);
  box-shadow:0 0 0 4px var(--paper), 0 0 0 5.5px var(--terracotta), 0 10px 20px rgba(43,43,43,0.16);
}
.studio-press-label{
  font-family:'Special Elite', 'Inter', monospace; font-size:10px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--text-secondary);
}
.studio-press-thumb{
  display:block; width:100%; aspect-ratio:1752/1235; overflow:hidden;
  border:1px solid var(--border); background:var(--ivory);
}
.studio-press-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:sepia(0.2) saturate(0.75) contrast(1.02);
}
@media (max-width:640px){
  .studio-press-box{width:168px;}
}
@media (max-width:640px){
  .studio-quote-row{grid-template-columns:1fr; min-height:auto;}
  .studio-quote-photo{aspect-ratio:4/5.6; border-radius:0; order:1;}
  .studio-quote-text{order:2; padding:28px 28px 8px; align-items:flex-end;}
}

/* Film strip: a real 35mm negative frame is a fixed size no matter what's on it, so
   uniform cropped frames here are the authentic look for this motif rather than a
   shortcut. Perforation holes are a repeating background pattern (not DOM elements),
   so they always tile cleanly across however wide the strip's content makes it,
   without any JS needed to count/measure. */
.filmstrip-wrap{
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  margin-top:24px; background:#1b1a17; padding:12px 0;
}
.filmstrip-perf{
  height:9px; margin:0 0 8px;
  background-image:repeating-linear-gradient(to right, #57544c 0 7px, transparent 7px 18px);
  background-position:24px center;
}
.filmstrip-wrap .filmstrip-perf:last-child{margin:8px 0 0;}
.filmstrip-track{
  display:flex; gap:10px; overflow-x:auto; padding:0 24px;
  touch-action:pan-x; scrollbar-width:none; -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0, black 30px, black calc(100% - 30px), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, black 30px, black calc(100% - 30px), transparent 100%);
}
.filmstrip-track::-webkit-scrollbar{display:none;}
.filmstrip-frame{
  flex:0 0 auto; width:150px; height:190px; position:relative;
  border:2px solid #4a473f; background:#2a2925; padding:0; cursor:pointer; overflow:hidden;
}
.filmstrip-frame:not(.img-loaded):not(.no-image)::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.09) 50%, transparent 70%);
  background-size:200% 100%; animation:filmShimmer 1.4s ease-in-out infinite;
}
@keyframes filmShimmer{
  0%{background-position:150% 0;}
  100%{background-position:-50% 0;}
}
.filmstrip-frame img{
  width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease, opacity 0.3s ease;
  opacity:0;
}
.filmstrip-frame.img-loaded img{opacity:1;}
.filmstrip-frame.no-image img{display:none;}
.filmstrip-frame.no-image{
  background:repeating-linear-gradient(135deg, #29281f 0 8px, #26251e 8px 16px);
  cursor:default;
}
.filmstrip-frame.no-image::before{
  content:'artwork coming soon'; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:12px;
  font-family:'Inter',sans-serif; font-size:11px; letter-spacing:0.03em; color:#6f6c62;
  pointer-events:none;
}
.filmstrip-frame:hover img{transform:scale(1.06);}
.filmstrip-frame:focus-visible{outline:2px solid var(--terracotta); outline-offset:2px;}
@media (max-width:640px){
  .filmstrip-frame{width:120px; height:154px;}
}
@media (prefers-reduced-motion: reduce){
  .filmstrip-frame img{transition:none;}
  .filmstrip-frame:hover img{transform:none;}
  .filmstrip-frame:not(.img-loaded):not(.no-image)::after{animation:none;}
}

/* Lightbox for the film strip - identical mechanics to the map lightbox but its own
   separate instance/classes so nothing here can affect that one or vice versa. */
.art-lightbox{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,19,17,0.92);
  opacity:0; visibility:hidden;
  transition:opacity 0.3s ease, visibility 0s linear 0.3s;
}
.art-lightbox.is-open{opacity:1; visibility:visible; transition:opacity 0.3s ease;}
.art-lightbox-img{
  max-width:min(88vw, 1100px); max-height:86vh; object-fit:contain;
  border-radius:3px; box-shadow:0 20px 60px rgba(0,0,0,0.5);
  opacity:0; transform:scale(0.97); transition:opacity 0.3s ease, transform 0.3s ease;
}
.art-lightbox.is-open .art-lightbox-img{opacity:1; transform:scale(1);}
.art-lightbox-close, .art-lightbox-nav{
  position:absolute; background:none; border:none; color:var(--paper); cursor:pointer;
  font-family:'Inter', sans-serif; line-height:1; padding:10px;
  transition:opacity 0.2s ease, transform 0.2s ease; opacity:0.75;
}
.art-lightbox-close:hover, .art-lightbox-nav:hover{opacity:1;}
.art-lightbox-close{top:18px; right:22px; font-size:34px;}
.art-lightbox-nav{top:50%; transform:translateY(-50%); font-size:52px;}
.art-lightbox-nav:hover{transform:translateY(-50%) scale(1.12);}
.art-lightbox-prev{left:14px;}
.art-lightbox-next{right:14px;}
.art-lightbox-count{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  color:var(--paper); opacity:0.7; font-family:'Inter',sans-serif; font-size:13px; letter-spacing:0.02em;
}
@media (max-width:640px){
  .art-lightbox-nav{font-size:36px; padding:6px;}
  .art-lightbox-close{font-size:28px; top:12px; right:14px;}
}
@media (prefers-reduced-motion: reduce){
  .art-lightbox, .art-lightbox-img, .art-lightbox-close, .art-lightbox-nav{transition:none;}
}

.studio-tagline{
  font-family:'Special Elite', 'Inter', monospace;
  font-size:15px; letter-spacing:0;
  text-align:right; margin:22px 0 0;
}
.studio-tagline-inner{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px; text-decoration:none; color:var(--paper); font-weight:700;
  transition:transform 0.2s ease, opacity 0.2s ease;
}
.studio-tagline-inner:hover{transform:translateY(-1px); opacity:0.92;}
.studio-tagline-stroke{
  position:absolute; inset:-6px -4px; z-index:-1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 70' preserveAspectRatio='none'%3E%3Cpath d='M6,38 C3,20 14,6 34,6 C110,2 200,3 268,7 C288,8 297,22 296,36 C298,54 286,66 264,65 C190,68 100,67 30,64 C10,63 4,54 6,38 Z' fill='%233E2723'/%3E%3C/svg%3E");
  background-size:100% 100%; background-repeat:no-repeat;
}
.studio-tagline-text{position:relative;}
.studio-tagline-heart{width:15px; height:15px; flex-shrink:0; color:#C22B21; position:relative;}

/* ---- Closing "note to little Amna": deliberately quiet, no cards/grid/gallery
   pattern - just a photo and a letter. The photo is a real transparent-background
   cutout (not a rectangular photo), so it's styled like a sticker taped onto the
   page: filter:drop-shadow (which hugs the actual cutout silhouette) instead of
   box-shadow (which would draw a rectangle around empty transparent space), a
   slight tilt, and a small washi-tape strip pinning it in place, reusing the same
   tape language as the Work gallery's polaroids and the Dialogues collage. ---- */
.note-block{
  position:relative; margin-top:8px; padding:64px 0 56px;
}
.note-content{
  position:relative; z-index:1;
  display:flex; align-items:flex-start; gap:68px;
  justify-content:center; flex-wrap:wrap; padding:0 32px;
}
.note-butterflies{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; overflow:visible;
  opacity:0.5; pointer-events:none;
}
.note-title{
  font-family:'Special Elite','Amaranth',monospace; font-weight:400;
  font-size:clamp(20px,2.6vw,25px); text-align:left; color:var(--charcoal);
  margin:0 0 20px;
}
.note-photo-wrap{position:relative; flex-shrink:0; transform:rotate(-4deg); margin-top:84px;}
.note-photo{
  display:block; width:210px; height:auto;
  filter:drop-shadow(0 16px 22px rgba(43,43,43,0.32));
}
.note-photo-tape{
  position:absolute; top:-11px; left:50%; width:64px; height:24px;
  background:rgba(188,130,103,0.65);
  transform:translateX(-50%) rotate(-3deg);
  box-shadow:0 2px 4px rgba(43,43,43,0.15);
  z-index:2;
}
.note-letter{
  max-width:560px; font-family:'Special Elite','Amaranth',monospace;
  font-size:13px; line-height:1.75; color:var(--charcoal);
}
.note-letter p{margin:0 0 13px;}
.note-letter-quote{
  margin:0 0 13px; padding:2px 0 2px 16px;
  border-left:2px solid var(--terracotta);
  font-style:italic; color:var(--terracotta);
}
.note-letter-signoff{margin-top:6px; font-style:italic;}
@media (max-width:640px){
  .note-block{padding:48px 0 40px;}
  .note-content{gap:28px; padding:0 24px;}
  .note-title{text-align:center;}
  .note-photo{width:160px;}
  .note-letter{font-size:12.5px;}
}

footer.site-footer{
  position:relative; overflow:hidden;
  border-top:0.5px solid var(--border); padding:66px 0 40px; margin-top:20px;
  display:flex; flex-direction:column; align-items:center;
  font-family:'Inter',sans-serif; font-size:13px; color:var(--text-secondary); text-align:center;
}
.footer-copy{font-weight:400; color:var(--charcoal);}

/* ---- Full-screen loader shown while the page's content (fonts, images, iframes)
   is still loading. Butterflies from the "Thinking through cities" section reused
   here at a smaller scale so the loading moment still feels like this site rather
   than a generic spinner. Faded + removed by script.js once window 'load' fires. ---- */
.page-loader{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--ivory);
  transition:opacity 0.6s ease;
}
.page-loader-dots{
  position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(43,43,43,0.12) 1px, transparent 1px);
  background-size:22px 22px; background-position:16px 16px;
}
.page-loader.is-hidden{opacity:0; pointer-events:none;}
.page-loader-scene{width:min(70vw, 320px); height:auto; overflow:visible; margin-bottom:6px;}
.loader-wing-left, .loader-wing-right{transform-origin:0 -2px; animation:flap 0.32s ease-in-out infinite alternate;}
.loader-wing-right{animation-delay:0.05s;}
.page-loader-word{
  font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:clamp(22px,4vw,30px);
  letter-spacing:-0.01em; color:var(--charcoal);
}
.page-loader-label{
  margin-top:8px; font-family:'Inter', sans-serif; font-weight:500; font-size:13px;
  letter-spacing:0.02em; color:var(--text-secondary);
}
@media (prefers-reduced-motion: reduce){
  .loader-wing-left, .loader-wing-right{animation:none;}
}