/* ===========================================================
   LATIFA AL MULLA — PORTFOLIO
   Design tokens — Swiss / graphic-studio system
=========================================================== */
:root{
  --bg:        #F3F1EC;
  --bg-soft:   #E9E8E2;
  --ink:       #111111;
  --ink-soft:  #73716D;
  --ink-faint: #A7A5A0;
  --line:      rgba(17,17,17,0.14);
  --line-soft: rgba(17,17,17,0.07);
  --accent:    #8E1F17;
  --white:     #FFFFFF;

  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;

  --nav-h: 76px;
  --edge: clamp(32px, 7.5vw, 104px);
  --max: 1560px;

  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior:smooth; scrollbar-gutter: stable; }
html,body{ margin:0; padding:0; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; background:none; border:none; color:inherit; cursor:pointer; padding:0; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,dl,dd{ margin:0; }

::selection{ background: var(--ink); color: var(--bg); }

:focus-visible{
  outline: 1.5px solid var(--accent);
  outline-offset: 4px;
}

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--edge);
  padding-right: var(--edge);
  box-sizing: border-box;
  width: 100%;
}

.eyebrow{
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}

.mono-num{
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.accent{ color: var(--accent); }

/* ===========================================================
   NAVIGATION
=========================================================== */
.site-nav{
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display:flex;
  align-items:center;
  background: rgba(244,243,239,0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: transform .5s var(--ease), border-color .3s;
}
.site-nav.nav-hidden{ transform: translateY(-100%); }
.site-nav .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}
.nav-name{
  font-size: 13px;
  letter-spacing: 0.02em;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-links{
  display:flex;
  align-items:center;
  gap: clamp(20px, 3vw, 44px);
}
.nav-links a{
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  position: relative;
  padding: 4px 0;
  transition: color .25s;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height:1px; background: var(--ink);
  transition: right .3s var(--ease);
}
.nav-links a:hover{ color: var(--ink); }
.nav-links a:hover::after{ right:0; }
.nav-links a.active{ color: var(--ink); }
.nav-links a.active::after{ right:0; background: var(--accent); }

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  width:24px;
  cursor:pointer;
}
.nav-toggle span{ display:block; height:1px; background:var(--ink); width:100%; transition: transform .3s, opacity .3s; }

.mobile-panel{
  position:fixed; inset:0;
  background: var(--bg);
  z-index: 99;
  display:flex; flex-direction:column;
  justify-content:center;
  padding: 0 var(--edge);
  transform: translateY(-100%);
  transition: transform .5s var(--ease);
}
.mobile-panel.open{ transform: translateY(0); }
.mobile-panel a{
  font-weight: 800;
  text-transform: uppercase;
  font-size: 38px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  letter-spacing: -0.01em;
}

/* ===========================================================
   BUTTONS / LINKS
=========================================================== */
.text-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
  transition: color .25s, border-color .25s, gap .25s;
}
.text-link:hover{ color: var(--accent); border-color: var(--accent); gap:12px; }
.text-link .arrow{ transition: transform .25s var(--ease); }
.text-link:hover .arrow{ transform: translateX(3px); }

/* ===========================================================
   HOME — HERO
=========================================================== */
.hero{
  position:relative;
  padding-top: clamp(36px, 7vh, 80px);
  padding-bottom: clamp(50px, 9vh, 100px);
}
.hero-top{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:start;
  gap: 24px;
  margin-bottom: clamp(30px, 5vh, 60px);
}
.hero-role{
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  font-weight: 500;
  margin-top: 12px;
}
.hero-desc{
  max-width: 260px;
  text-align: right;
}
.hero-desc p{
  font-size: 13px;
  color: var(--ink-soft);
  line-height:1.55;
}

.hero-name{
  font-weight: 800;
  line-height: 0.88;
  font-size: clamp(52px, 10.6vw, 148px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.hero-media{
  margin-top: clamp(40px, 7vh, 76px);
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(10px,1.4vw,18px);
  align-items:end;
}
.hero-media .m1{ grid-column: 1 / 6; aspect-ratio: 3/4; }
.hero-media .m2{ grid-column: 6 / 9; aspect-ratio: 1/1; margin-top: 18%; }
.hero-media .m3{ grid-column: 9 / 13; aspect-ratio: 4/5; }
.hero-media figure{ margin:0; overflow:hidden; background:var(--bg-soft); position:relative; }
.hero-media img{ width:100%; height:100%; object-fit:cover; transition: transform 1.1s var(--ease), filter .6s; filter: grayscale(0.15); }
.hero-media figure:hover img{ transform: scale(1.04); filter: grayscale(0); }
.hero-media .idx{
  position:absolute; top:12px; left:12px;
  font-size:10.5px; color: var(--white); background: var(--ink);
  padding: 3px 7px; letter-spacing:.04em;
}

@media (max-width: 720px){
  .hero-top{ grid-template-columns: 1fr; }
  .hero-desc{ max-width:none; text-align:left; margin-top:16px; }
  .hero-media{ grid-template-columns: repeat(6,1fr); }
  .hero-media .m1{ grid-column:1/5; aspect-ratio:4/5; }
  .hero-media .m2{ grid-column:1/4; margin-top:16px; aspect-ratio:1/1; }
  .hero-media .m3{ grid-column:4/7; margin-top:16px; aspect-ratio:4/5; }
}

/* ===========================================================
   SECTION HEADERS
=========================================================== */
.section{ padding: clamp(60px,10vh,120px) 0; }
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-bottom: clamp(36px,6vh,72px);
}
.section-head h2{
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(30px, 4.5vw, 48px);
  letter-spacing: -0.01em;
}
.section-head .count{
  font-size: 11px; letter-spacing:.1em; color: var(--ink-faint);
}

/* ===========================================================
   SELECTED WORK — collection features
=========================================================== */
.feature{
  position: relative;
  display:grid;
  grid-template-columns: 70px 1fr;
  gap: clamp(14px, 3vw, 40px);
  padding: clamp(30px,4.5vh,48px) 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.feature:last-child{ border-bottom: 1px solid var(--line); }
.feature-num{
  font-weight: 600;
  font-size: 13px;
  color: var(--accent);
  padding-top: 6px;
  font-variant-numeric: tabular-nums;
}
.feature-body{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(20px,4vw,56px);
  align-items:center;
}
.feature-text h3{
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(28px, 4.6vw, 58px);
  line-height: 1.0;
  letter-spacing: -0.015em;
  transition: color .3s, transform .4s var(--ease);
}
.feature-meta{
  display:flex;
  gap: 20px;
  flex-wrap:wrap;
  margin-top: 16px;
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.feature-meta span:first-child{ color: var(--ink); font-weight:600; }
.feature-media{
  position:relative;
  aspect-ratio: 4/3;
  overflow:hidden;
  background: var(--bg-soft);
}
.feature-media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition: transform 1s var(--ease), opacity .6s ease;
}
.feature-media img.img-b{ opacity:0; }
.feature:hover .feature-media img.img-a{ transform: scale(1.06); opacity:0; }
.feature:hover .feature-media img.img-b{ opacity:1; transform:scale(1.06); }
.feature:hover .feature-text h3{ color: var(--accent); transform: translateX(4px); }
.feature-cta{
  position:absolute; right:0; top: 40%;
  font-size: 11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  display:flex; align-items:center; gap:8px;
  opacity:0; transform: translateX(-8px);
  transition: opacity .3s, transform .3s var(--ease);
}
.feature:hover .feature-cta{ opacity:1; transform:translateX(0); }

@media (max-width: 860px){
  .feature{ grid-template-columns: 36px 1fr; }
  .feature-body{ grid-template-columns: 1fr; }
  .feature-media{ order:-1; aspect-ratio: 4/3.2; }
}

/* ===========================================================
   PROJECTS PAGE — header / filter / view toggle
=========================================================== */
.projects-head{
  display:grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px,4vw,60px);
  align-items:end;
  padding-bottom: clamp(30px,5vh,54px);
}
.projects-head h1{
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(52px, 11vw, 148px);
  line-height: 0.86;
  letter-spacing: -0.02em;
}
.projects-sub{
  max-width: 320px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  padding-bottom: clamp(6px,1vh,14px);
}
@media (max-width: 780px){
  .projects-head{ grid-template-columns: 1fr; }
  .projects-sub{ max-width:none; }
}

.projects-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap: wrap;
  gap: 16px;
  border-top: 1px solid var(--ink);
  padding-top: 16px;
  margin-bottom: clamp(40px,7vh,80px);
}
.filter-group{
  display:flex; gap: 22px; flex-wrap:wrap;
  font-size: 12px; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
}
.filter-group button{ color: var(--ink-faint); padding-bottom:3px; border-bottom:1px solid transparent; transition:.25s; }
.filter-group button.active{ color: var(--ink); border-color: var(--accent); }
.filter-group button:hover{ color: var(--ink); }

.view-toggle{
  display:flex; gap: 20px;
  font-size: 12px; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
}
.view-toggle button{ color: var(--ink-faint); padding-bottom:3px; border-bottom:1px solid transparent; transition:.25s; }
.view-toggle button.active{ color: var(--ink); border-color: var(--ink); }
.view-toggle button:hover{ color: var(--ink); }

/* ===========================================================
   PROJECTS — irregular editorial grid
=========================================================== */
.index-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px,2vw,28px);
}
.index-grid .card{
  cursor:pointer;
}
.index-grid .card.filtered-out{ display:none; }

.index-grid figure{
  margin:0; overflow:hidden; background: var(--bg-soft);
  position:relative;
  aspect-ratio: 4/5;
}

.index-grid img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .8s var(--ease);
}
.index-grid .card:hover img{ transform: scale(1.045); }
.card-num{
  font-size: 11px; font-weight:600; color: var(--accent);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.index-grid figcaption{
  margin-top: 12px;
  display:flex; justify-content:space-between; align-items:baseline;
  gap: 10px;
}
.index-grid figcaption .t{ font-weight:600; font-size: 13.5px; text-transform:uppercase; letter-spacing:.01em; }
.index-grid figcaption .t::after{
  content: "→"; color: var(--accent); margin-left: 6px;
  opacity:0; display:inline-block; transform: translateX(-4px);
  transition: opacity .2s, transform .2s var(--ease);
}
.index-grid .card:hover figcaption .t::after{ opacity:1; transform:translateX(0); }
.index-grid figcaption .meta{ color:var(--ink-faint); font-size:11px; text-align:right; white-space:nowrap; }

.index-list{ display:none; }
.index-list.active{ display:block; }
.index-grid.hidden{ display:none; }

.list-row{
  position: relative;
  display:grid;
  grid-template-columns: 46px 2.2fr 1.1fr 1fr 70px;
  align-items:center;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  cursor:pointer;
  transition: background .25s;
}
.index-list .list-row:last-child{ border-bottom: 1px solid var(--line); }
.list-row:hover{ background: rgba(17,17,17,0.03); }
.list-row.filtered-out{ display:none; }
.list-row .num{ font-weight:600; color:var(--accent); font-size:12px; }
.list-row .proj{ font-weight: 700; text-transform:uppercase; font-size: clamp(14px,1.6vw,17px); letter-spacing:-0.005em; }
.list-row .client, .list-row .cat{ font-size: 11.5px; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; }
.list-row .year{ font-size:11.5px; color: var(--ink-faint); text-align:right; }

.list-preview{
  position: fixed;
  width: 220px; height: 280px;
  overflow:hidden;
  pointer-events:none;
  z-index: 150;
  opacity:0;
  transition: opacity .2s;
  background: var(--bg-soft);
  box-shadow: 0 20px 50px rgba(17,17,17,0.18);
}
.list-preview.show{ opacity:1; }
.list-preview img{ width:100%; height:100%; object-fit:cover; }

@media (hover: none){ .list-preview{ display:none; } }

@media (max-width: 860px){
  .index-grid{ grid-template-columns: repeat(2,1fr); }
  .list-row{ grid-template-columns: 28px 1fr 60px; }
  .list-row .client, .list-row .cat{ display:none; }
}
@media (max-width: 560px){
  .index-grid{ grid-template-columns: 1fr; }
}

/* ===========================================================
   PROJECT DETAIL PAGES
=========================================================== */
.proj-hero{
  padding-top: clamp(40px,7vh,80px);
  padding-bottom: clamp(36px,5vh,64px);
  box-sizing:border-box;
  width:100%;
}
.proj-eyebrow{
  display:flex; align-items:center; gap:14px;
  margin-bottom: 20px;
  font-weight:600;
}
.proj-title{
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 100%;
  width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  box-sizing: border-box;
}
/* Ounass: short single word, larger scale */
.proj-title.proj-title-lg{ font-size: clamp(40px, 7.5vw, 116px); }
/* MOCCAE: long multi-word title, reduced scale, wraps to ~2 lines */
.proj-title.proj-title-md{ font-size: clamp(32px, 5.6vw, 92px); max-width: 18ch; }
.proj-intro{
  font-size: clamp(14.5px,1.5vw,17px);
  color: var(--ink-soft);
  max-width: 48ch;
  margin-top: 24px;
  line-height: 1.6;
}
.proj-meta{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: clamp(36px,5.5vh,58px);
  padding-top: 22px;
  border-top: 1px solid var(--ink);
}
.proj-meta dt{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px; font-weight:600; }
.proj-meta dd{ margin:0; font-size:13.5px; font-weight:500; }
.proj-meta .disciplines span{ display:block; }

@media (max-width: 720px){
  .proj-meta{ grid-template-columns: 1fr 1fr; }
}

/* sub-project chapter heading inside collection pages */
.chapter-head{
  display:flex;
  align-items: baseline;
  gap: 20px;
  padding-top: clamp(28px,4.5vh,52px);
  margin-bottom: clamp(16px,2.4vh,26px);
  border-top: 1px solid var(--line);
}
.chapter-num{ font-weight:700; color:var(--accent); font-size:13px; white-space:nowrap; }
.chapter-title{
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(18px, 2.9vw, 36px);
  line-height: 1.05;
  letter-spacing:-0.01em;
}
.chapter-sub{
  font-size: 11.5px; color: var(--ink-soft);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing:.04em;
}

/* subtle Fashion / Beauty internal grouping within a collection */
.subgroup-head{
  display:flex; align-items:center; gap:16px;
  padding-top: clamp(30px,5vh,48px);
  margin-bottom: 14px;
}
.subgroup-head span{
  font-size: 11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-faint);
}
.subgroup-head::after{ content:""; flex:1; height:1px; background: var(--line); }
.subgroup-head.first{ padding-top: clamp(20px,3vh,32px); }

/* first chapter after a subgroup label shouldn't add a second rule right below it */
.chapter-head.no-top{ border-top:none; padding-top: clamp(6px,1vh,14px); }

.gallery{ display:flex; flex-direction:column; gap: clamp(14px,2.2vw,24px); margin-bottom: clamp(36px,6vh,64px); }
.g-full{ width:100%; }
.g-full img, .g-2col img, .g-3col img, .g-6040 img, .g-solo img{
  width:100%; height:auto; display:block; background: var(--bg-soft);
}
.g-2col{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(14px,2.2vw,24px); }
.g-3col{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,2.2vw,24px); }
.g-6040{ display:grid; grid-template-columns: 3fr 2fr; gap: clamp(14px,2.2vw,24px); align-items:end; }
.g-4060{ display:grid; grid-template-columns: 2fr 3fr; gap: clamp(14px,2.2vw,24px); align-items:end; }
.g-solo{ max-width: 560px; margin: 0 auto; }
.g-cap{
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--ink-faint);
  letter-spacing:.02em;
  text-transform: uppercase;
}
@media (max-width: 780px){
  .g-2col, .g-3col, .g-6040, .g-4060{ grid-template-columns: 1fr; }
}

.interlude{
  padding: clamp(40px,8vh,100px) 0;
}
.interlude p{
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(24px,4.6vw,54px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  max-width: 16ch;
}

.proj-nav{
  display:flex; justify-content:space-between;
  border-top: 1px solid var(--ink);
  margin-top: clamp(60px,10vh,120px);
  padding: clamp(28px,4.5vh,46px) 0;
}
.proj-nav a{
  display:flex; flex-direction:column; gap:8px;
  max-width: 45%;
}
.proj-nav a:last-child{ text-align:right; align-items:flex-end; }
.proj-nav .lbl{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; }
.proj-nav .ttl{ font-weight:800; text-transform:uppercase; font-size: clamp(18px,2.6vw,28px); transition: color .25s; letter-spacing:-0.01em; }
.proj-nav a:hover .ttl{ color: var(--accent); }

/* ===========================================================
   ABOUT
=========================================================== */
.about-hero{ padding: clamp(44px,8vh,90px) 0 clamp(36px,5vh,64px); }
.about-hero h1{
  font-weight:800; text-transform:uppercase;
  font-size: clamp(48px, 9.5vw, 120px);
  line-height:0.9;
  letter-spacing: -0.02em;
}
.about-split{
  display:grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(30px,5vw,70px);
  margin-top: clamp(30px,5vh,54px);
  padding-top: clamp(24px,4vh,40px);
  border-top: 1px solid var(--ink);
}
.about-split h2{
  font-weight: 800; text-transform:uppercase; font-size: clamp(20px,2.4vw,28px);
  line-height:1.15;
}
.about-split .role{
  font-size:13px; color:var(--ink-soft); margin-top:8px; text-transform:uppercase; letter-spacing:.03em;
}
.about-bio{
  font-size: clamp(15px,1.7vw,19px);
  line-height:1.65;
  color: var(--ink);
}
@media (max-width: 720px){ .about-split{ grid-template-columns: 1fr; } }

.about-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(30px,4vw,50px);
  padding: clamp(50px,8vh,90px) 0;
  border-top:1px solid var(--line);
  margin-top: clamp(44px,7vh,80px);
}
.about-block h4{
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom: 18px; font-weight:700;
}
.role-entry{ margin-bottom: 20px; }
.role-entry:last-child{ margin-bottom:0; }
.role-entry .role{ font-size: 14.5px; font-weight:700; text-transform:uppercase; line-height:1.3; }
.role-entry .org{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; }
.role-entry .yr{ font-size:11px; color:var(--ink-faint); margin-top:2px; letter-spacing:.03em; }

.tags{ display:flex; flex-direction:column; gap: 10px; }
.tags span{
  font-size:13px; color: var(--ink);
  font-weight: 500;
}

@media (max-width: 900px){
  .about-grid{ grid-template-columns: 1fr 1fr; gap: 40px; }
}

.cv-cta{
  margin-top: clamp(44px,7vh,80px);
  padding-top: 26px;
  border-top: 1px solid var(--ink);
}

/* ===========================================================
   CONTACT
=========================================================== */
.contact-hero{
  min-height: 66vh;
  display:flex; flex-direction:column; justify-content:center;
  padding: clamp(36px,6vh,70px) 0;
}
.contact-hero h1{
  font-weight: 800; text-transform:uppercase;
  font-size: clamp(52px, 12vw, 156px);
  line-height: 0.86;
  letter-spacing: -0.02em;
}
.contact-links{
  display:flex; flex-wrap:wrap;
  gap: clamp(30px,5vw,60px);
  margin-top: clamp(36px,5.5vh,60px);
}
.contact-links a{
  font-size: clamp(17px,1.9vw,22px);
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  transition: color .25s, border-color .25s;
}
.contact-links a:hover{ color: var(--accent); border-color: var(--accent); }
.contact-links .lbl{
  display:block; font-weight:600;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:10px;
}

/* ===========================================================
   FOOTER
=========================================================== */
.site-footer{
  border-top: 1px solid var(--ink);
  padding: clamp(36px,5.5vh,54px) 0;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap: 20px;
}
.site-footer .f-name{
  font-weight: 800; text-transform:uppercase; font-size: 16px; letter-spacing:-0.01em;
}
.site-footer .f-meta{
  font-size: 11px; color: var(--ink-faint); letter-spacing:.04em;
  margin-top:6px;
}
.footer-nav{ display:flex; gap: 24px; }
.footer-nav a{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--ink-soft); }
.footer-nav a:hover{ color: var(--accent); }

/* ===========================================================
   REVEAL ON SCROLL
=========================================================== */
.reveal{ opacity:0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* custom cursor — small oxblood dot, always visible, no text */
.cursor-tag{
  position: fixed;
  top:0; left:0;
  width: 12px; height:12px;
  border-radius:50%;
  background: var(--accent);
  pointer-events:none;
  z-index: 500;
  opacity:0;
  transform: translate(-50%,-50%);
  transition: opacity .15s;
}
.cursor-tag.active{ opacity:1; }
@media (max-width: 900px){ .cursor-tag{ display:none; } }

/* page transition veil */
.veil{
  position:fixed; inset:0; background: var(--bg);
  z-index: 300; transform-origin: bottom;
  transform: scaleY(0);
  pointer-events:none;
}
.veil.active{ animation: veil-in .5s var(--ease) forwards; }
@keyframes veil-in{
  0%{ transform: scaleY(0); transform-origin: bottom; }
  50%{ transform: scaleY(1); transform-origin: bottom; }
  50.01%{ transform-origin: top; }
  100%{ transform: scaleY(0); transform-origin: top; }
}

/* ===========================================================
   COMPACT HOME HERO (revision 3 — projects-first hierarchy)
=========================================================== */
.hero-compact{
  padding-top: clamp(28px, 5vh, 50px);
  padding-bottom: clamp(24px, 4vh, 40px);
}
.hero-compact-row{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(20px,4vw,60px);
  align-items:end;
}
.hero-compact-name{
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.92;
  font-size: clamp(38px, 6.2vw, 84px);
  letter-spacing: -0.02em;
}
.hero-compact-role{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 10px;
}
.hero-compact-desc{
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 42ch;
}
.scroll-cue{
  display:flex; align-items:center; gap:10px;
  margin-top: clamp(20px,3.5vh,34px);
  font-size: 11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  color: var(--ink-faint);
}
.scroll-cue .dn{ animation: bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(4px);} }

/* ===========================================================
   COMPACT PROJECT GRID (home + index) — smaller than the
   full-bleed "feature" rows used previously
=========================================================== */
.compact-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(18px,2.2vw,30px);
}
.compact-card{ grid-column: span 4; cursor:pointer; }
.compact-card[data-size="wide"]{ grid-column: span 6; }
.compact-card[data-size="small"]{ grid-column: span 3; }
.compact-card.offset{ margin-top: clamp(30px,6vw,70px); }

.compact-card figure{
  margin:0; overflow:hidden; background: var(--bg-soft); position:relative;
  aspect-ratio: 4/5;
}
.compact-card[data-size="wide"] figure{ aspect-ratio: 4/3; }
.compact-card[data-size="small"] figure{ aspect-ratio: 1/1; }
.compact-card img, .compact-card video{
  width:100%; height:100%; object-fit:cover;
  transition: transform .7s var(--ease);
}
.compact-card:hover img, .compact-card:hover video{ transform: scale(1.04); }

.compact-tag{
  position:absolute; top:10px; left:10px;
  font-size: 9.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  background: var(--ink); color: var(--bg);
  padding: 3px 7px;
}
.compact-tag.motion{ background: var(--accent); }

.compact-meta{
  margin-top: 12px;
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
}
.compact-num{ font-size:10.5px; font-weight:700; color: var(--accent); margin-bottom:6px; }
.compact-title{ font-size: 13px; font-weight:700; text-transform:uppercase; letter-spacing:.01em; }
.compact-sub{ font-size: 10.5px; color: var(--ink-faint); text-align:right; white-space:nowrap; }

@media (max-width: 860px){
  .compact-grid{ grid-template-columns: repeat(6,1fr); }
  .compact-card{ grid-column: span 6 !important; }
  .compact-card.offset{ margin-top:0; }
  .hero-compact-row{ grid-template-columns:1fr; }
  .hero-compact-desc{ max-width:none; margin-top:14px; }
}

/* ===========================================================
   CAPABILITIES SECTION
=========================================================== */
.capabilities{
  border-top: 1px solid var(--ink);
  padding: clamp(50px,8vh,90px) 0;
}
.cap-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px,5vw,60px);
}
.cap-list{ display:flex; flex-direction:column; }
.cap-row{
  display:flex; align-items:baseline; gap: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.cap-list .cap-row:last-child{ border-bottom: 1px solid var(--line); }
.cap-row .n{ font-size:11px; font-weight:700; color: var(--accent); width:24px; flex-shrink:0; }
.cap-row .label{ font-size: clamp(16px,2vw,22px); font-weight:800; text-transform:uppercase; letter-spacing:-0.01em; }
.tool-list{
  display:flex; flex-wrap:wrap; align-content:flex-start;
  gap: 10px 22px;
  padding-top: 4px;
}
.tool-list span{
  font-size: 12.5px; font-weight:600; letter-spacing:.02em;
  color: var(--ink-soft);
}
@media (max-width: 780px){ .cap-grid{ grid-template-columns:1fr; gap:36px; } }

/* ===========================================================
   VIDEO IN GALLERY (project detail pages)
=========================================================== */
.g-video{ position:relative; background: var(--bg-soft); overflow:hidden; }
.g-video video{ width:100%; height:auto; display:block; }
.g-video-tall video{ aspect-ratio: 9/16; object-fit:cover; max-width: 420px; margin: 0 auto; }

/* ===========================================================
   COMPACT ABOUT PAGE (revision 3)
=========================================================== */
.about-compact{ padding: clamp(40px,7vh,70px) 0 clamp(20px,3vh,30px); }
.about-compact h1{
  font-weight: 800; text-transform:uppercase;
  font-size: clamp(42px, 7.5vw, 88px);
  line-height:0.92; letter-spacing:-0.02em;
}
.about-compact p{
  font-size: clamp(14.5px,1.6vw,17px);
  color: var(--ink-soft);
  max-width: 58ch;
  margin-top: 18px;
  line-height:1.6;
}
.about-compact-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(26px,3.5vw,44px);
  padding: clamp(30px,5vh,50px) 0 clamp(50px,8vh,90px);
  border-top:1px solid var(--ink);
  margin-top: clamp(26px,4vh,40px);
}
@media (max-width: 900px){
  .about-compact-grid{ grid-template-columns: 1fr 1fr; gap:32px; }
}

/* ===========================================================
   FOOTER — quick nav (revision 3)
=========================================================== */
.footer-quick{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(24px,4vw,50px);
  padding: clamp(40px,6vh,64px) 0 clamp(24px,4vh,36px);
  border-top: 1px solid var(--ink);
}
.footer-quick h5{
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom: 14px; font-weight:700;
}
.footer-quick ul{ display:flex; flex-direction:column; gap:9px; }
.footer-quick a{ font-size:13px; font-weight:600; }
.footer-quick a:hover{ color: var(--accent); }
.footer-quick .f-name-big{
  font-weight:800; text-transform:uppercase; font-size: clamp(24px,3vw,34px); letter-spacing:-0.01em;
}
.footer-bottom{
  display:flex; justify-content:space-between; padding: 18px 0;
  border-top: 1px solid var(--line);
  font-size: 11px; color: var(--ink-faint); letter-spacing:.04em;
}
@media (max-width: 720px){
  .footer-quick{ grid-template-columns: 1fr 1fr; }
  .footer-quick .f-name-big{ grid-column: 1 / -1; }
}

/* ===========================================================
   REVISION 4 — corrections pass
=========================================================== */

/* Global gallery narrowing — smaller mockups, more whitespace,
   no full-bleed dominance on project detail pages */
.gallery{ max-width: 1100px; margin-left:auto; margin-right:auto; }
.interlude{ max-width: 1100px; margin-left:auto; margin-right:auto; }

/* smaller DM / motion videos on detail pages */
.g-video-tall video{ max-width: 320px; }
.g-video{ max-width: 480px; margin: 0 auto; }
.g-video.g-video-tall{ max-width: 320px; }

/* nav dropdown — WORK > OUNASS / MOCCAE */
.has-dropdown{ position: relative; }
.nav-dropdown{
  position: absolute;
  top: 100%; left: 0;
  padding-top: 14px;
  display: none;
  flex-direction: column;
  gap: 10px;
  min-width: 130px;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown{ display:flex; }
.nav-dropdown a{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
}
.nav-dropdown a:hover{ color: var(--accent); }
.mobile-panel a.sub{
  font-size: 20px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 8px 0 8px 20px;
  border-bottom: 1px solid var(--line-soft);
  text-transform: uppercase;
}

/* WORK page — client-grouped sections */
.client-section{ padding-top: clamp(50px,8vh,90px); }
.client-section:first-of-type{ padding-top: clamp(20px,3vh,30px); }
.client-head{
  display:flex; align-items:baseline; gap:18px;
  border-top: 1px solid var(--ink);
  padding-top: 18px;
  margin-bottom: clamp(30px,5vh,50px);
}
.client-head h2{
  font-weight:800; text-transform:uppercase; font-size: clamp(28px,4.5vw,48px); letter-spacing:-0.015em;
}
.client-head .yrs{ font-size:12px; color:var(--ink-faint); letter-spacing:.04em; }

/* carousel cover badge */
.cover-badge{
  position:absolute; top:10px; right:10px; z-index:2;
  font-size: 9.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  background: var(--ink); color: var(--bg);
  padding: 3px 7px;
}

/* carousel trigger cursor hint */
[data-carousel-trigger]{ cursor: pointer; }

/* ===========================================================
   REVISION 4 — sizing corrections, carousel, nav dropdown
=========================================================== */

/* Framed mockup treatment: full-page screenshots shown small,
   cropped to the top (hero) portion — sharp, contained, editorial */
.g-frame{
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg-soft);
  position: relative;
}
.g-frame.g-frame-wide{ max-width: 620px; aspect-ratio: 4/3.4; }
.g-frame.g-frame-app{ max-width: 260px; aspect-ratio: 3/4.6; }
.g-frame img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}
.g-frame-row{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap: clamp(16px,2.4vw,28px);
}
.g-frame-row .g-frame{ margin: 0; }

/* smaller motion display */
.g-video-tall{ max-width: 320px !important; }
.g-video-tall video{ aspect-ratio: 9/16; object-fit:cover; }

/* carousel cover — grid/chapter shows one image + slide-count badge */
.carousel-cover{ position:relative; cursor:pointer; }
.carousel-badge{
  position:absolute; bottom:10px; right:10px;
  background: var(--ink); color: var(--bg);
  font-size: 10px; font-weight:700; letter-spacing:.04em;
  padding: 3px 8px;
}

/* lightbox carousel — scrollable so tall assets are never clipped;
   close/arrows/count are fixed to the viewport, independent of scroll */
.lightbox{
  position: fixed; inset:0; z-index: 400;
  background: rgba(17,17,17,0.96);
  display:none;
}
.lightbox.open{ display:block; }
.lightbox-scroll{
  width:100%; height:100%;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  display:flex; align-items:flex-start; justify-content:center;
  padding: 84px 20px 100px;
  box-sizing:border-box;
}
.lightbox-stage{
  max-width: min(88vw, 480px);
  width:100%;
  margin:auto;
}
.lightbox-stage img{ width:100%; height:auto; display:block; background:#fff; }
.lightbox-close{
  position:fixed; top:22px; right:22px; z-index:2;
  color: var(--bg); font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  cursor:pointer;
}
.lightbox-arrow{
  position:fixed; top:50%; transform:translateY(-50%); z-index:2;
  color: var(--bg); font-size:30px; cursor:pointer;
  width:52px; height:52px; border-radius:50%;
  background: rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center;
  user-select:none;
  transition: opacity .2s, visibility .2s;
}
.lightbox-arrow:hover{ background: rgba(255,255,255,0.16); }
.lightbox-arrow.prev{ left: clamp(10px,3vw,32px); }
.lightbox-arrow.next{ right: clamp(10px,3vw,32px); }
.lightbox-arrow.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.lightbox-count{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:2;
  color: var(--bg); font-size: 11px; letter-spacing:.1em; font-weight:600;
}
@media (max-width: 640px){
  .lightbox-arrow{ width:42px; height:42px; font-size:24px; }
  .lightbox-scroll{ padding: 70px 14px 90px; }
}

/* ===========================================================
   NAV DROPDOWN — WORK > OUNASS / MOCCAE
=========================================================== */
.nav-item-dropdown{ position:relative; }
.nav-dropdown{
  position:absolute; top:100%; left:0;
  padding-top: 14px;
  opacity:0; visibility:hidden;
  transform: translateY(-4px);
  transition: opacity .2s, transform .2s, visibility .2s;
  display:flex; flex-direction:column; gap:8px;
  min-width: 130px;
}
.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown.open .nav-dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.nav-dropdown a{
  font-size: 11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  color: var(--ink-soft);
  white-space:nowrap;
}
.nav-dropdown a:hover{ color: var(--accent); }

.mobile-work-toggle{
  display:flex; align-items:center; justify-content:space-between;
}
.mobile-sub{
  display:flex; flex-direction:column;
  max-height:0; overflow:hidden;
  transition: max-height .35s var(--ease);
}
.mobile-sub.open{ max-height: 200px; }
.mobile-sub a{
  font-weight:600; text-transform:uppercase; font-size:20px;
  padding: 8px 0 8px 20px;
  border-bottom:none !important;
  color: var(--ink-soft);
}

/* ===========================================================
   WORK PAGE — per-collection sections
=========================================================== */
.collection-head{
  display:flex; align-items:baseline; gap:20px; flex-wrap:wrap;
  padding-top: clamp(30px,5vh,50px);
  margin-bottom: clamp(20px,3vh,32px);
  border-top: 1px solid var(--ink);
}
.collection-head h2{
  font-weight:800; text-transform:uppercase; font-size: clamp(32px,5vw,58px); letter-spacing:-0.015em;
}
.collection-head .yrs{ font-size:12px; color:var(--ink-faint); letter-spacing:.04em; font-weight:600; }

/* ===========================================================
   REVISION 5 — uncropped mockups, merged home/about, minimal footer
=========================================================== */

/* Uncropped design-artifact display: object-fit:contain, smaller,
   preserves full composition. Use for all HP mockups, invitations,
   newsletters, screens — anything that's a design artifact rather
   than photography. */
.g-contain{
  max-width: 320px;
  margin: 0 auto;
  background: var(--bg-soft);
  padding: 14px;
}
.g-contain img{
  width: 100%; height: auto;
  object-fit: contain;
  display: block;
}
.g-contain.g-contain-sm{ max-width: 270px; }
.g-contain.g-contain-md{ max-width: 380px; }
.g-contain.g-contain-gwp{ max-width: 340px; }
.g-contain-row{
  display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center;
  gap: clamp(16px,2.4vw,28px);
}
.g-contain-row.dsk-app{ align-items:flex-start; }
.g-contain-row .g-contain{ margin:0; }

/* Desktop + App paired presentation — both share one height so their
   top AND bottom edges align; app is deliberately narrower, never
   cropped or stretched (object-fit: contain inside a fixed-height box). */
.g-pair-row{
  display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center;
  gap: clamp(14px,2.2vw,26px);
}
.g-pair{
  height: clamp(220px, 36vw, 440px);
  background: var(--bg-soft);
  padding: 14px;
  box-sizing: border-box;
  display:flex; align-items:center; justify-content:center;
}
.g-pair img{ width:100%; height:100%; object-fit:contain; display:block; }
.g-pair-dsk{ width: clamp(160px, 30vw, 380px); }
.g-pair-app{ width: clamp(90px, 13vw, 150px); }
@media (max-width: 640px){
  .g-pair{ height: clamp(200px, 46vw, 320px); }
  .g-pair-dsk{ width: clamp(140px, 42vw, 260px); }
  .g-pair-app{ width: clamp(70px, 20vw, 110px); }
}

/* equal-height media pair (e.g. DM video + image) */
.g-media-pair{
  display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center;
  gap: clamp(10px,1.4vw,16px);
}
.g-media-pair > *{
  height: clamp(260px, 34vw, 340px);
  width: clamp(150px, 19vw, 195px);
}
.g-media-pair .g-video{ max-width:none !important; margin:0 !important; background:var(--bg-soft); padding:0; }
.g-media-pair .g-video video{ width:100%; height:100%; object-fit:cover; display:block; }
.g-media-pair .g-contain{ max-width:none !important; margin:0 !important; height: clamp(260px, 34vw, 340px); padding:10px; display:flex; align-items:center; justify-content:center; }
.g-media-pair .g-contain img{ width:100%; height:100%; object-fit:contain; }

/* clickable cover with hint — includes a visible arrow so browsability is obvious */
.cover-trigger{ position:relative; cursor:pointer; display:block; }
.cover-hint{
  position:absolute; bottom:10px; right:10px;
  background: var(--ink); color: var(--bg);
  font-size: 10px; font-weight:700; letter-spacing:.04em;
  padding: 3px 9px;
  display:flex; align-items:center; gap:6px;
}
.cover-arrow{
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  width:30px; height:30px; border-radius:50%;
  background: rgba(17,17,17,0.82); color: var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; pointer-events:none;
}

/* ===========================================================
   HOMEPAGE — merged intro/about sections
=========================================================== */
.home-section{
  padding: clamp(44px,7vh,80px) 0;
  border-top: 1px solid var(--ink);
}
.home-section-title{
  font-weight: 800; text-transform:uppercase;
  font-size: clamp(24px, 3.2vw, 36px);
  letter-spacing: -0.01em;
  margin-bottom: clamp(24px,4vh,40px);
}
.list-rule{
  display:flex; align-items:baseline; justify-content:space-between;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.list-rule:last-child{ border-bottom: 1px solid var(--line); }
.list-rule .n{ font-size:11px; font-weight:700; color:var(--accent); width:28px; flex-shrink:0; }
.list-rule .label{ flex:1; font-weight:800; text-transform:uppercase; font-size: clamp(15px,1.8vw,20px); letter-spacing:-0.005em; }

/* secondary (Tools) — visually quieter than Capabilities, but not tiny (70-80% scale) */
.list-rule-sm{
  display:flex; align-items:baseline; gap:16px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}
.list-rule-sm:last-child{ border-bottom: 1px solid var(--line-soft); }
.list-rule-sm .n{ font-size:11px; font-weight:700; color:var(--accent); width:24px; flex-shrink:0; }
.list-rule-sm .label{ font-weight:800; text-transform:uppercase; font-size: clamp(14px,1.6vw,17px); color: var(--ink); letter-spacing:-0.005em; }

.exp-entry{
  display:grid; grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
}
.exp-entry:last-child{ border-bottom: 1px solid var(--line-soft); }
.exp-entry .yr{ font-size:11.5px; color:var(--accent); font-weight:700; letter-spacing:.02em; }
.exp-entry .role{ font-weight:700; font-size:14.5px; }
.exp-entry .org{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }

/* ===========================================================
   MINIMAL FOOTER (no repeated name)
=========================================================== */
.footer-minimal{
  border-top: 1px solid var(--ink);
  padding: clamp(30px,5vh,48px) 0 clamp(20px,3vh,30px);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
}
.footer-minimal-links{ display:flex; gap:26px; flex-wrap:wrap; }
.footer-minimal-links a{ font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--ink-soft); }
.footer-minimal-links a:hover{ color:var(--accent); }
.footer-minimal .copy{ font-size:11px; color:var(--ink-faint); letter-spacing:.04em; }

/* home mark (monogram, homepage nav only) */
.nav-mark{ font-size:13px; letter-spacing:.02em; font-weight:700; text-transform:uppercase; }

/* ===========================================================
   COLLECTION QUICK TABS (Work page)
=========================================================== */
.collection-tabs{
  display:flex; gap: 28px;
  padding-bottom: clamp(24px,4vh,40px);
  margin-bottom: clamp(10px,2vh,18px);
}
.collection-tabs a{
  font-weight:800; text-transform:uppercase; font-size: clamp(15px,1.8vw,19px);
  letter-spacing:-0.005em; color: var(--ink-soft);
  padding-bottom:6px; border-bottom:2px solid transparent;
  transition: color .2s, border-color .2s;
}
.collection-tabs a:hover{ color:var(--ink); border-color: var(--line); }
.collection-tabs a.active{ color: var(--ink); border-color: var(--accent); }

.work-panel{ display:none; }
.work-panel.active{ display:block; }

/* ===========================================================
   REVISION 6 — controlled asymmetry variant for chapter headers
=========================================================== */
.chapter-head-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 20px;
  padding-top: clamp(44px,7vh,76px);
  margin-bottom: clamp(16px,2.4vh,26px);
  border-top: 1px solid var(--line);
}
.chapter-head-split .chapter-left{ display:flex; align-items:baseline; gap:16px; }
.chapter-head-split .chapter-right{ text-align:right; max-width: 40ch; margin-left:auto; }
.chapter-head-split .chapter-right p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; }
@media (max-width: 720px){
  .chapter-head-split{ grid-template-columns:1fr; }
  .chapter-head-split .chapter-right{ text-align:left; margin-left:0; }
}

/* ===========================================================
   REVISION 7 — DM tight grid, publication covers, DSK+APP pairing
=========================================================== */

/* Digital Marketing: consistent, tighter grid instead of scattered assets */
.dm-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(10px,1.6vw,18px);
  max-width: 640px;
  margin: 0 auto;
}
.dm-grid .g-contain, .dm-grid .g-video{
  max-width:none; width:100%; margin:0;
  aspect-ratio: 3/4;
  display:flex; align-items:center; justify-content:center;
}
.dm-grid .g-contain img{ width:100%; height:100%; object-fit:contain; }
.dm-grid .g-video video{ width:100%; height:100%; object-fit:cover; }

/* MOCCAE publication cover — compact, generous whitespace */
.pub-cover{
  max-width: 260px;
  margin: 0 auto;
  background: var(--bg-soft);
  padding: 20px;
  position: relative;
}
.pub-cover img{ width:100%; height:auto; display:block; }

/* ===========================================================
   REVISION 8 — height-matched DSK+APP pairing, uniform gallery grid
=========================================================== */

/* Desktop + App shown as one paired presentation: both scaled to
   the SAME height so their top and bottom edges align exactly.
   App renders narrower, which is expected and intentional. */
.g-pair-row{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap: clamp(14px,2.2vw,26px);
  flex-wrap: wrap;
}
.g-pair-row .g-pair{
  height: clamp(280px, 38vw, 480px);
  background: var(--bg-soft);
  padding: 14px;
  box-sizing: border-box;
  display:flex;
  align-items:center;
  justify-content:center;
}
.g-pair-row .g-pair img{
  height: 100%; width: auto; max-width: 62vw;
  object-fit: contain;
  display:block;
}
.g-pair-row .g-pair.g-pair-app{ flex-shrink:0; }
@media (max-width: 720px){
  .g-pair-row{ flex-direction:column; align-items:center; }
  .g-pair-row .g-pair{ height: clamp(220px,60vw,360px); width:100%; max-width:340px; }
  .g-pair-row .g-pair img{ max-width:100%; }
}

/* Digital Marketing: video + image matched to equal height */
.dm-pair{
  display:flex; align-items:stretch; justify-content:center;
  gap: clamp(14px,2.2vw,24px);
  flex-wrap: wrap;
}
.dm-pair > div{
  height: clamp(240px, 30vw, 340px);
  background: var(--bg-soft);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.dm-pair img, .dm-pair video{ height:100%; width:auto; max-width:100%; object-fit:contain; display:block; }
.dm-pair video{ object-fit:cover; width:100%; }
@media (max-width: 640px){
  .dm-pair{ flex-direction:column; align-items:center; }
  .dm-pair > div{ width:100%; max-width:300px; height:clamp(220px,60vw,300px); }
}

/* Newsletters: 2-column grid so a 3rd item wraps left-aligned
   beneath the top-left item, never centered alone */
.g-contain-grid-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 380px));
  justify-content:center;
  gap: clamp(14px,2.2vw,26px);
}
@media (max-width: 780px){
  .g-contain-grid-2{ grid-template-columns: minmax(0,380px); justify-items:center; }
}