/*
  SAFE TO EDIT:
  This file styles the reusable project case study page. Change colours,
  spacing, empty-state borders, and responsive layout here.

  CONTENT LIVES ELSEWHERE:
  Project copy, links, image paths, and documents are in js/projects.js.
*/

:root{
  --serif:'Fraunces',serif;
  --mono:'VT323',monospace;
  --ink:#342f34;
  --muted:#6f666a;
  --paper:#f8f1ea;
  --sky:#c8e8f4;
  --blush:#f8dfdf;
  --night:#201d3d;
  --gold:#e9bc56;
  --lilac:#ccb7ea;
  --card:rgba(255,255,255,.48);
  --line:rgba(206,150,54,.52);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:var(--serif);
  color:var(--ink);
  background:
    linear-gradient(180deg,var(--sky) 0%,#dff2f4 28%,var(--paper) 58%,var(--blush) 100%);
  text-rendering:optimizeLegibility;
}

a{color:inherit}
img{max-width:100%}

.project-shell{
  width:min(100%,75rem);
  margin:0 auto;
  padding:clamp(1.2rem,3vw,2rem) clamp(1.2rem,5vw,4.2rem) 0;
}

.project-topline{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1rem;
  margin-bottom:clamp(1.8rem,4vw,3.4rem);
  font-family:var(--mono);
  font-size:clamp(.88rem,1.5vw,1.05rem);
  letter-spacing:.03em;
  text-transform:uppercase;
  color:rgba(52,47,52,.78);
}
.project-topline span:nth-child(2){justify-self:center; font-family:var(--serif); font-size:.82rem; font-weight:600; letter-spacing:0; text-transform:none}
.project-topline span:last-child{justify-self:end}

.back-link{
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:2.5rem;
  padding:.48rem .9rem .58rem;
  border-radius:999px;
  background:rgba(255,246,220,.62);
  border:1px solid rgba(213,165,63,.38);
  text-decoration:none;
  box-shadow:0 .35rem 1.4rem rgba(97,77,72,.08);
}
.back-link:hover,.back-link:focus{outline:2px solid rgba(233,188,86,.55); outline-offset:3px}

.project-hero{padding:clamp(2.3rem,7vw,6rem) 0 clamp(2rem,5vw,4rem)}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.5rem,4vw,3rem);
  align-items:end;
}
.project-kicker,.section-label{
  margin:0 0 .75rem;
  font-family:var(--mono);
  font-size:clamp(.9rem,1.4vw,1.08rem);
  letter-spacing:.05em;
  line-height:1.1;
  text-transform:uppercase;
  color:#8c743d;
}
.project-kicker::before{content:"✦ "; color:var(--gold)}
h1,h2,p{margin-top:0}
h1{
  max-width:11ch;
  margin-bottom:clamp(1.15rem,2.6vw,2.2rem);
  font-size:clamp(4.4rem,14vw,8.8rem);
  line-height:.88;
  font-weight:400;
  letter-spacing:-.01em;
}
.hero-subtitle{
  margin-top:0;
  max-width:44rem;
  font-size:clamp(1.25rem,2.4vw,1.65rem);
  line-height:1.35;
  font-style:italic;
  color:#4f464b;
}
.hero-actions{padding-bottom:.5rem}

.project-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:3rem;
  gap:.35rem;
  padding:.78rem 1.2rem .9rem;
  border-radius:999px;
  border:1px solid rgba(52,47,52,.2);
  background:linear-gradient(135deg,#fff1b8 0%,#eec1e9 100%);
  color:#3d3441;
  font-family:var(--mono);
  font-size:1.05rem;
  line-height:1;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none;
  box-shadow:0 .75rem 1.5rem rgba(80,58,99,.18);
  transition:transform .25s ease,box-shadow .25s ease;
}
.project-button:hover,.project-button:focus{transform:translateY(-2px); outline:0; box-shadow:0 1rem 2rem rgba(80,58,99,.24)}
.project-button--ghost{
  background:transparent;
  color:#f9f1e7;
  border-color:rgba(249,241,231,.5);
  box-shadow:none;
}

.hero-meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,4vw,4rem);
  margin:clamp(2rem,5vw,4rem) 0 0;
}
.hero-meta div{min-width:0}
.hero-meta dt{
  font-family:var(--mono);
  font-size:.9rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#8b784c;
}
.hero-meta dd{
  margin:.32rem 0 0;
  font-size:clamp(.96rem,1.5vw,1.1rem);
  font-weight:600;
  line-height:1.35;
}

.feature-section{margin:0 0 clamp(3rem,8vw,6rem)}
.media-tile{
  position:relative;
  display:flex;
  min-height:clamp(18rem,34vw,28rem);
  aspect-ratio:4/3;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.62);
  background:linear-gradient(145deg,rgba(255,255,255,.58),rgba(255,255,255,.28));
  box-shadow:0 1rem 2.4rem rgba(81,76,93,.11);
}
.feature-media{aspect-ratio:4/3; min-height:clamp(24rem,48vw,38rem)}
.media-zoom{
  appearance:none;
  border:0;
  box-sizing:border-box;
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  padding:0;
  overflow:hidden;
  border-radius:inherit;
  background:transparent;
  cursor:zoom-in;
  color:inherit;
}
.media-zoom:focus-visible{outline:3px solid rgba(233,188,86,.8); outline-offset:-6px}
.media-tile img{width:100%; height:100%; object-fit:cover; transition:transform .55s ease,filter .55s ease}
.media-tile:hover img{transform:scale(1.025); filter:saturate(1.04)}
.media-tile--contain .media-zoom{padding:clamp(.7rem,2vw,1.25rem)}
.media-tile--contain img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  padding:0;
  background:transparent;
}
.media-tile:not(.media-tile--plain).media-tile--contain .media-zoom{
  position:absolute;
  inset:0;
}
.media-tile:not(.media-tile--plain).media-tile--contain img{
  align-self:stretch;
  justify-self:stretch;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  max-width:none;
  max-height:none;
}
.media-tile--plain{
  min-height:auto;
  aspect-ratio:auto;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.media-tile--plain img{
  display:block;
  height:auto;
  object-fit:contain;
  padding:0;
  border-radius:0;
  background:transparent;
}
.media-tile--plain:hover img{transform:none; filter:none}
.media-tile figcaption{
  position:absolute;
  left:1rem;
  bottom:1rem;
  padding:.28rem .65rem .38rem;
  border-radius:999px;
  background:rgba(255,248,236,.74);
  font-family:var(--mono);
  font-size:.95rem;
  line-height:1;
  text-transform:uppercase;
  pointer-events:none;
}
.media-zoom-icon{
  position:absolute;
  top:.85rem;
  right:.85rem;
  display:grid;
  place-items:center;
  width:2.15rem;
  height:2.15rem;
  border-radius:50%;
  border:1px solid rgba(52,47,52,.16);
  background:rgba(255,248,236,.72);
  box-shadow:0 .45rem 1.1rem rgba(80,58,99,.14);
  font-family:var(--mono);
  font-size:1rem;
  line-height:1;
  opacity:.88;
  pointer-events:none;
}
.media-tile--empty{
  color:transparent;
  border:2px dashed var(--line);
  background:
    linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.1)),
    radial-gradient(circle at 50% 50%,rgba(233,188,86,.1),transparent 42%);
}

.overview-section{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(17rem,24rem);
  gap:clamp(2rem,8vw,7rem);
  align-items:start;
  margin-bottom:clamp(5rem,10vw,8rem);
}
.overview-section h2,.work-section h2,.docs-section h2,.story-section h2{
  margin-bottom:.75rem;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1;
  font-weight:500;
}
.overview-section p,.story-section p{
  max-width:40rem;
  color:#4f464b;
  font-size:clamp(1rem,1.55vw,1.12rem);
  line-height:1.7;
}
.facts-card{
  padding:clamp(1.3rem,3vw,2rem);
  border:1px solid rgba(255,255,255,.6);
  border-radius:14px;
  background:rgba(255,255,255,.48);
  box-shadow:0 1rem 2.5rem rgba(81,76,93,.14);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.fact-row{padding:1rem 0; border-top:1px solid rgba(52,47,52,.09)}
.fact-row:first-of-type{border-top:0}
.fact-row span{
  display:block;
  margin-bottom:.25rem;
  font-family:var(--mono);
  font-size:.9rem;
  text-transform:uppercase;
  color:#8b784c;
}
.fact-row strong{font-size:1rem; line-height:1.45}

.work-section,.docs-section{margin-bottom:clamp(4rem,8vw,7rem)}
.screen-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(1rem,2vw,1.4rem);
}
.screen-grid .media-tile{grid-column:span 6}
.screen-grid .media-tile--wide{grid-column:span 12}
.screen-grid .media-tile--process{grid-column:span 4; aspect-ratio:3/4}
body[data-project-slug="cinnamon-souk"] .screen-grid{
  align-items:start;
}
body[data-project-slug="cinnamon-souk"] .screen-grid .media-tile--phone{
  grid-column:span 4;
  min-height:clamp(28rem,46vw,42rem);
  aspect-ratio:9/16;
  background:linear-gradient(180deg,rgba(198,226,242,.36),rgba(248,227,206,.28));
}
body[data-project-slug="cinnamon-souk"] .screen-grid .media-tile--phone .media-zoom{
  padding:.7rem;
}
body[data-project-slug="cinnamon-souk"] .screen-grid .media-tile--phone img{
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:contain;
  border-radius:14px;
  filter:drop-shadow(0 1.2rem 1.8rem rgba(54,43,37,.13));
}
body[data-project-slug="cinnamon-souk"] .screen-grid .media-tile--flow,
body[data-project-slug="cinnamon-souk"] .screen-grid .media-tile--storyboard{
  grid-column:span 12;
  min-height:clamp(17rem,30vw,24rem);
  aspect-ratio:2.65/1;
}
body[data-project-slug="cinnamon-souk"] .screen-grid .media-tile--tall-board{
  grid-column:span 8;
  min-height:clamp(36rem,72vw,58rem);
  aspect-ratio:9/14;
}
body[data-project-slug="cinnamon-souk"] .screen-grid .media-tile--flow .media-zoom,
body[data-project-slug="cinnamon-souk"] .screen-grid .media-tile--storyboard .media-zoom,
body[data-project-slug="cinnamon-souk"] .screen-grid .media-tile--tall-board .media-zoom{
  padding:clamp(.45rem,1.2vw,.9rem);
}
body[data-project-slug="cinnamon-souk"] .screen-grid .media-tile--flow img,
body[data-project-slug="cinnamon-souk"] .screen-grid .media-tile--storyboard img,
body[data-project-slug="cinnamon-souk"] .screen-grid .media-tile--tall-board img{
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:contain;
  border-radius:10px;
  background:rgba(255,255,255,.26);
}

.docs-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}
.doc-card{
  display:grid;
  gap:.35rem;
  min-height:6rem;
  padding:1rem;
  border-radius:12px;
  border:1px solid rgba(119,89,128,.18);
  background:rgba(255,255,255,.58);
  text-decoration:none;
  box-shadow:0 .65rem 1.6rem rgba(81,76,93,.08);
}
.doc-card strong{font-size:1rem}
.doc-card small,.doc-card span{
  font-family:var(--mono);
  font-size:.9rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#6f666a;
}
.doc-card span{color:#8b6d24}
.doc-card--disabled{opacity:.72}

.story-section{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(18rem,32rem);
  gap:clamp(2rem,8vw,7rem);
  align-items:center;
  min-height:auto;
  margin-bottom:clamp(5rem,9vw,8rem);
}
.story-section--approach{grid-template-columns:minmax(18rem,32rem) minmax(0,1fr)}
.story-section--outcome{margin-bottom:clamp(6rem,12vw,10rem)}
.story-section--text-only{
  grid-template-columns:minmax(0,44rem);
  justify-content:start;
  min-height:auto;
}
.story-section--approach.story-section--text-only{grid-template-columns:minmax(0,44rem)}
.story-section > div{min-width:0}
.story-media{width:100%; min-height:18rem}

body.lightbox-open{overflow:hidden}
.image-lightbox[hidden]{display:none}
.image-lightbox{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  padding:clamp(1rem,3vw,2.5rem);
  background:rgba(24,22,47,.84);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.lightbox-frame{
  display:grid;
  gap:.8rem;
  width:min(94vw,86rem);
  max-height:88vh;
  margin:0;
  justify-items:center;
}
.lightbox-frame img{
  display:block;
  width:auto;
  max-width:100%;
  max-height:78vh;
  object-fit:contain;
  border-radius:12px;
  background:rgba(255,255,255,.18);
  box-shadow:0 2rem 5rem rgba(0,0,0,.34);
}
.lightbox-frame figcaption{
  max-width:min(100%,52rem);
  color:#f9f1e7;
  font-family:var(--mono);
  font-size:1.1rem;
  letter-spacing:.04em;
  line-height:1.2;
  text-align:center;
  text-transform:uppercase;
}
.lightbox-close{
  position:fixed;
  top:clamp(1rem,3vw,2rem);
  right:clamp(1rem,3vw,2rem);
  min-height:2.8rem;
  padding:.6rem 1rem .75rem;
  border-radius:999px;
  border:1px solid rgba(249,241,231,.38);
  background:rgba(249,241,231,.12);
  color:#f9f1e7;
  font-family:var(--mono);
  font-size:1.05rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
}
.lightbox-close:focus-visible{outline:3px solid var(--gold); outline-offset:3px}

.final-cta{
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding:clamp(4rem,9vw,8rem) 1.5rem clamp(4rem,8vw,6rem);
  text-align:center;
  color:#f9f1e7;
  background:
    radial-gradient(circle at 50% 12%,rgba(233,188,86,.18),transparent 18rem),
    linear-gradient(180deg,#272344,#18162f);
}
.moon-orb{
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  width:clamp(9rem,22vw,16rem);
  aspect-ratio:1;
  margin:0 auto 2.2rem;
  border-radius:50%;
  border:2px solid var(--gold);
  background:linear-gradient(135deg,rgba(249,241,231,.62),rgba(194,179,211,.52));
  box-shadow:0 0 1.5rem rgba(233,188,86,.72), inset 0 0 2rem rgba(255,246,220,.28);
  overflow:hidden;
  transition:box-shadow .42s ease, transform .42s ease;
}
.moon-orb img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  border-radius:50%;
  filter:saturate(.98) contrast(.98);
  transform:scale(.86);
  transition:transform .42s ease, filter .42s ease;
}
.portal-lens::before,
.portal-lens::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:50%;
  pointer-events:none;
}
.portal-lens::before{
  background:
    radial-gradient(circle at 35% 26%,rgba(255,255,255,.52),rgba(255,255,255,.14) 13%,transparent 28%),
    radial-gradient(circle at 50% 54%,transparent 42%,rgba(31,27,57,.34) 82%,rgba(20,18,36,.48) 100%);
  mix-blend-mode:screen;
}
.portal-lens::after{
  box-shadow:
    inset 0 0 2.2rem rgba(255,246,220,.38),
    inset 0 -1.1rem 2.4rem rgba(24,22,47,.38);
}
.portal-lens:hover{
  transform:translateY(-2px);
  box-shadow:0 0 2.2rem rgba(233,188,86,.86), inset 0 0 2.4rem rgba(255,246,220,.36);
}
.portal-lens:hover img{
  transform:scale(.92);
  filter:saturate(1.04) contrast(1.02);
}
.final-cta p{margin-bottom:.35rem; color:rgba(249,241,231,.7)}
  .final-cta h2{
  max-width:11ch;
  margin:0 auto 1.5rem;
  font-size:clamp(2.4rem,6vw,4rem);
  line-height:.95;
}
.cta-actions{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center}
.site-credit{
  margin:2.2rem auto 0;
  max-width:min(100%,40rem);
  font-family:var(--mono);
  font-size:1rem;
  letter-spacing:.035em;
  line-height:1.35;
  color:rgba(249,241,231,.58);
  text-transform:none;
}
.site-credit-sparkle{
  font-family:"Apple Color Emoji","Segoe UI Symbol","Noto Sans Symbols 2","Noto Sans Symbols",system-ui,sans-serif;
  letter-spacing:0;
  white-space:nowrap;
}

.missing-project{
  min-height:100vh;
  display:grid;
  place-content:center;
  gap:1rem;
  padding:2rem;
}

@media (max-width:980px){
  .story-section,.story-section--approach{
    grid-template-columns:1fr;
    gap:clamp(1.5rem,6vw,3rem);
  }
  .story-section--approach .story-media{order:2}
  .story-section--approach > div{order:1}
}

@media (max-width:760px){
  .project-shell{padding-inline:1rem}
  .project-topline{grid-template-columns:1fr; justify-items:start}
  .project-topline span:nth-child(2),.project-topline span:last-child{justify-self:start}
  .hero-grid,.overview-section,.story-section,.story-section--approach{grid-template-columns:1fr}
  .hero-actions{padding-bottom:0}
  .hero-meta{grid-template-columns:1fr; gap:1rem}
  h1{font-size:clamp(3.7rem,22vw,6.5rem)}
  .screen-grid,.docs-grid{grid-template-columns:1fr}
  .screen-grid .media-tile,.screen-grid .media-tile--wide,.screen-grid .media-tile--process{grid-column:auto}
  body[data-project-slug="cinnamon-souk"] .screen-grid .media-tile--phone,
  body[data-project-slug="cinnamon-souk"] .screen-grid .media-tile--flow,
  body[data-project-slug="cinnamon-souk"] .screen-grid .media-tile--storyboard,
  body[data-project-slug="cinnamon-souk"] .screen-grid .media-tile--tall-board{grid-column:auto}
  body[data-project-slug="cinnamon-souk"] .screen-grid .media-tile--phone{min-height:clamp(25rem,120vw,38rem)}
  body[data-project-slug="cinnamon-souk"] .screen-grid .media-tile--flow,
  body[data-project-slug="cinnamon-souk"] .screen-grid .media-tile--storyboard{aspect-ratio:16/8.5; min-height:14rem}
  body[data-project-slug="cinnamon-souk"] .screen-grid .media-tile--tall-board{aspect-ratio:3/4; min-height:28rem}
  .media-tile,.feature-media,.story-media{min-height:13rem}
  .final-cta{margin-top:2rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .project-button{transition:none}
  .media-tile img{transition:none}
  .moon-orb,.moon-orb img{transition:none}
}