/* ─────────────────────────────────────────────────────────────
   YA ABATI · DIRECTION ARTISTIQUE
   Editorial styles
   ───────────────────────────────────────────────────────────── */

:root{
  /* Primary — extracted from cover wrap */
  --emerald: #1E3D31;        /* signature deep forest */
  --emerald-deep: #15291F;
  --emerald-ink: #0E1D16;

  /* Cream / paper — cover lettering tone */
  --cream: #EAE0C4;
  --ivory: #F4ECD6;
  --paper: #F7F1E3;
  --paper-warm: #EFE5CE;

  /* Warm neutrals — leather, café, sand */
  --cuir: #7A4A2B;
  --cafe: #4A2E1B;
  --sand: #C9B591;
  --terracotta: #B86E4C;

  /* Inks */
  --ink: #1A1612;
  --ink-soft: #3A322A;
  --mute: #8A7F6B;

  /* Type */
  --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --arabic: "Amiri", "Reem Kufi", serif;
  --arabic-display: "Aref Ruqaa", "Amiri", serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Grid */
  --gutter: clamp(20px, 4vw, 64px);
  --col: minmax(0,1fr);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family: var(--serif);
  background: var(--paper);
  color: var(--ink);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Paper grain — very subtle */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:200;
  opacity:.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.05  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ─────────── Type primitives ─────────── */
.eyebrow{
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.eyebrow.cream{ color: var(--cream); opacity:.85;}
.eyebrow.dot::before{ content:"·"; margin-right:.6em; opacity:.6; }
.eyebrow.dot::after{ content:"·"; margin-left:.6em; opacity:.6; }

.rule{
  width: 48px; height:1px; background: currentColor; opacity:.4;
  display:inline-block; vertical-align: middle;
}
.rule.long{ width: 96px; }

.h-display{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 9vw, 148px);
  line-height: .96;
  letter-spacing: -0.01em;
}
.h-display em{ font-style: italic; font-weight: 300; }

.h-section{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 5.4vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.005em;
}
.h-section em{ font-style: italic; }

.h-sub{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.3;
  color: var(--ink-soft);
}

.lede{
  font-family: var(--serif);
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
}

.body-sm{
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.caption{
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.ar{
  font-family: var(--arabic);
  direction: rtl;
  unicode-bidi: isolate;
  font-feature-settings: "ss01" on;
}
.ar-display{
  font-family: var(--arabic-display);
  direction: rtl;
  unicode-bidi: isolate;
}

/* ─────────── Page chrome ─────────── */

.shell{
  position: relative;
}

.frame-num{
  position: fixed;
  top: 28px; right: 32px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  mix-blend-mode: difference;
  z-index: 100;
  pointer-events:none;
}

.frame-mark{
  position: fixed;
  top: 28px; left: 32px;
  z-index: 100;
  mix-blend-mode: difference;
  color: var(--paper);
  pointer-events: none;
}
.frame-mark .mono{
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
}

/* ─────────── Sections ─────────── */
section{
  padding: clamp(80px, 11vh, 160px) var(--gutter);
  position: relative;
}

section.dark{
  background: var(--emerald);
  color: var(--cream);
}
section.dark .eyebrow,
section.dark .h-sub,
section.dark .lede,
section.dark .body-sm,
section.dark .caption{ color: rgba(234,224,196,.72); }

section.cream{
  background: var(--paper-warm);
}

.section-head{
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--gutter);
  align-items: end;
  margin-bottom: clamp(48px, 7vh, 96px);
}
.section-head .num{
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.section-head .num span{ display:block; margin-top: 4px; font-family:var(--serif); font-size:42px; letter-spacing:-0.02em; color:var(--ink); }
section.dark .section-head .num span{ color: var(--cream); }
section.dark .section-head .num{ color: rgba(234,224,196,.6); }

/* ─────────── HERO ─────────── */
.hero{
  min-height: 100vh;
  background: var(--emerald);
  color: var(--cream);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 80px var(--gutter) 56px;
  position: relative;
  overflow: hidden;
}
.hero-top{
  display:flex; justify-content:space-between; align-items:flex-start;
}
.hero-mark{ display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.hero-mark .mono{ font-family: var(--sans); font-size: 10.5px; letter-spacing:.28em; text-transform:uppercase; color: var(--cream); opacity:.75; }

.monogram{
  width: 44px; height: 44px;
  display:grid; place-items:center;
}
.monogram img{ width: 100%; height: 100%; object-fit: contain; display:block; }
.hero-meta{ text-align:right; }
.hero-meta .mono{ display:block; font-family: var(--sans); font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; color: var(--cream); opacity:.75;}
.hero-meta .mono + .mono{ margin-top: 6px; opacity:.55; }

.hero-center{
  align-self: center;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  position: relative;
}
.hero-ar{
  font-family: var(--arabic-display);
  direction: rtl;
  font-size: clamp(140px, 22vw, 360px);
  line-height: 1;
  color: var(--cream);
  text-align: center;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.hero-title{
  margin-top: -2vh;
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(42px, 7.8vw, 124px);
  line-height: 1;
  letter-spacing: -0.015em;
  text-align: center;
  color: var(--cream);
}

.hero-bottom{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gutter);
  align-items: end;
}
.hero-bottom .left, .hero-bottom .right{ font-family: var(--sans); font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; opacity:.75; }
.hero-bottom .center{ text-align:center; font-family: var(--serif); font-style:italic; font-size: 17px; color: rgba(234,224,196,.9); }
.hero-bottom .right{ text-align:right; }

/* ─────────── Manifesto ─────────── */
.manifesto{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}
.manifesto-left{ padding-top: 12px;}
.manifesto-left .quote{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.16;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.manifesto-left .quote .ar{
  display: block;
  margin-top: 28px;
  font-size: clamp(32px, 3.6vw, 56px);
  font-style: normal;
  color: var(--emerald);
}
.manifesto-right p + p{ margin-top: 1.1em; }
.manifesto-right .pillars{
  margin-top: 36px;
  border-top: 1px solid rgba(26,22,18,.18);
  padding-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 32px;
}
.pillar .caption{ color: var(--mute); }
.pillar .label{
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  margin-top: 4px;
  color: var(--emerald);
}

/* ─────────── Palette ─────────── */
.palette-grid{
  display: grid;
  grid-template-columns: 1.4fr .9fr .9fr .9fr;
  gap: 8px;
  height: 62vh;
  min-height: 480px;
}
.swatch{
  position: relative;
  padding: 24px;
  border-radius: 2px;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
  cursor: default;
}
.swatch.dark{ color: var(--cream); }
.swatch .top{ display:flex; justify-content: space-between; align-items: flex-start; }
.swatch .name{
  font-family: var(--serif); font-style: italic;
  font-size: 24px; line-height: 1; letter-spacing: -0.005em;
}
.swatch .num{
  font-family: var(--sans); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  opacity:.7;
}
.swatch .meta{ display:flex; flex-direction: column; gap: 4px; }
.swatch .meta .hex{ font-family: var(--mono); font-size: 12px; letter-spacing: .04em;}
.swatch .meta .role{ font-family: var(--sans); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; opacity:.75;}

.palette-grid-secondary{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-top: 8px;
  height: 110px;
}
.palette-grid-secondary .swatch{ padding: 14px; }
.palette-grid-secondary .swatch .name{ font-size: 16px;}
.palette-grid-secondary .swatch .hex{ font-size: 10.5px;}

.palette-notes{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  margin-top: 60px;
}
.palette-notes .item .caption{ color: var(--mute); }
.palette-notes .item h4{
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: 28px; margin: 6px 0 10px; color: var(--ink);
}
.palette-notes .item p{ font-size: 16px; color: var(--ink-soft); }

/* ─────────── Typography ─────────── */
.type-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
}
.type-card{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--gutter);
  align-items: start;
  padding-top: 32px;
  border-top: 1px solid rgba(234,224,196,.22);
}
.type-card:first-child{ border-top: 1px solid rgba(234,224,196,.4); }
.type-card .meta{ font-family: var(--sans); }
.type-card .meta .role{ font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: rgba(234,224,196,.6); }
.type-card .meta .name{ font-family: var(--serif); font-style: italic; font-size: 28px; color: var(--cream); margin-top: 4px; }
.type-card .meta dl{ margin-top: 18px; }
.type-card .meta dl div{ display: flex; gap: 10px; padding: 4px 0; font-size: 11px; letter-spacing: .12em; color: rgba(234,224,196,.7);}
.type-card .meta dl dt{ width: 80px; text-transform: uppercase; opacity:.6; }
.type-card .specimen{ color: var(--cream); }
.type-card .specimen .big{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(64px, 9vw, 140px);
  line-height: .95;
  letter-spacing: -0.01em;
}
.type-card .specimen .big em{ font-style: italic; }
.type-card .specimen .ar-big{
  font-family: var(--arabic-display);
  direction: rtl;
  font-size: clamp(80px, 11vw, 180px);
  line-height: 1;
  color: var(--cream);
  text-align: right;
}
.type-card .specimen .sans-big{
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(28px, 3.6vw, 52px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream);
}
.type-card .specimen .scale{
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  border-top: 1px dotted rgba(234,224,196,.25);
  padding-top: 20px;
}
.type-card .specimen .scale .row{
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: baseline;
  gap: 20px;
}
.type-card .specimen .scale .row .lbl{
  font-family: var(--sans);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(234,224,196,.55);
}
.type-card .specimen .scale .row .val{
  font-family: var(--serif);
  color: var(--cream);
}

/* ─────────── Monogram ─────────── */
.mono-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 8px;
  height: 56vh;
  min-height: 460px;
}
.mono-card{
  background: var(--emerald);
  color: var(--cream);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.mono-card.cream{ background: var(--paper-warm); color: var(--emerald);}
.mono-card.ivory{ background: var(--ivory); color: var(--emerald);}
.mono-card .lbl{
  position: absolute; bottom: 16px; left: 16px;
  font-family: var(--sans); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  opacity:.65;
}
.mono-card .lbl-r{
  position: absolute; bottom: 16px; right: 16px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  opacity:.55;
}

.mono-mark{
  width: 140px; height: 140px;
  display: grid; place-items: center;
}
.mono-mark img{ width: 100%; height: 100%; object-fit: contain; display:block; }
.mono-mark.lg{ width: 260px; height: 260px; }
.mono-mark.sm{ width: 64px; height: 64px;}

.lockup{ text-align:center; }
.lockup .name{
  font-family: var(--sans); font-size: 11px; letter-spacing: .32em; text-transform: uppercase;
  margin-top: 14px; opacity:.85;
}
.lockup .ar{
  font-family: var(--arabic-display);
  direction: rtl;
  font-size: 38px;
  margin-top: 12px;
  letter-spacing: -0.02em;
}

/* ─────────── Photography ─────────── */
.photo-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 12vh;
  gap: 8px;
}
.tile{
  position: relative;
  overflow: hidden;
  background: var(--sand);
  color: var(--paper);
}
.tile .caption{
  position: absolute;
  left: 14px; bottom: 12px;
  color: var(--paper);
  font-family: var(--sans); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.tile .tag{
  position: absolute;
  top: 12px; right: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
  color: var(--paper);
  opacity:.85;
}
.tile .focus-word{
  position:absolute;
  inset:auto auto 36px 14px;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1;
  color: var(--paper);
  max-width: 80%;
  text-shadow: 0 1px 14px rgba(0,0,0,.25);
}

/* Placeholder tile gradients = mood swatches */
.tile.t-desert{ background: linear-gradient(135deg, #C9A877 0%, #A87C50 60%, #5E3D24 100%);}
.tile.t-cafe{ background: linear-gradient(165deg, #2E1F14 0%, #4A2E1B 50%, #7A4A2B 100%);}
.tile.t-cuir{ background: linear-gradient(160deg, #6E4429 0%, #8A5A35 50%, #3E2614 100%);}
.tile.t-emerald{ background: linear-gradient(160deg, #1E3D31 0%, #15291F 100%);}
.tile.t-paper{ background: linear-gradient(155deg, #F4ECD6 0%, #D9C9A0 100%); color: var(--ink);}
.tile.t-paper .caption, .tile.t-paper .tag, .tile.t-paper .focus-word{ color: var(--ink); text-shadow: none;}
.tile.t-night{ background: linear-gradient(180deg, #15291F 0%, #0E1D16 60%, #0a1410 100%);}
.tile.t-route{ background: linear-gradient(180deg, #8A7050 0%, #5C432C 60%, #28190E 100%);}
.tile.t-golden{ background: linear-gradient(180deg, #E8C58C 0%, #C58A52 60%, #6E3D1F 100%);}

/* film grain overlay on tiles */
.tile::after{
  content:"";
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  opacity:.18;
  mix-blend-mode: overlay;
  pointer-events:none;
}

/* ─────────── Grid / layout principles ─────────── */
.grid-demo{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  background: var(--paper-warm);
  padding: 28px;
  height: 420px;
  position: relative;
}
.grid-demo .col{
  background: rgba(30,61,49,.06);
  border-left: 1px solid rgba(30,61,49,.12);
  position: relative;
}
.grid-demo .overlay{
  position: absolute; inset: 28px; pointer-events:none;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
}
.grid-demo .overlay .h{
  grid-column: 1 / -1;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(44px, 5.8vw, 84px);
  line-height: 1;
  color: var(--emerald);
}
.grid-demo .overlay .body{
  font-family: var(--serif); font-size: 17px; line-height: 1.5;
  color: var(--ink-soft);
  max-width: 42ch;
}

/* ─────────── Voice / copy ─────────── */
.voice-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
}
.voice-card{
  border: 1px solid rgba(26,22,18,.14);
  padding: 32px 32px 28px;
  background: var(--paper);
  position: relative;
}
.voice-card .role{ font-family: var(--sans); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--mute); }
.voice-card .copy{ font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.18; margin-top: 16px; color: var(--ink);}
.voice-card .ctx{ font-family: var(--sans); font-size: 12px; color: var(--mute); margin-top: 16px; letter-spacing: .04em;}

/* ─────────── Applications: mini hero ─────────── */
.app-stack{ display: grid; gap: 8px; }

.app-hero{
  background: var(--emerald);
  color: var(--cream);
  padding: clamp(40px, 6vw, 96px);
  position: relative;
  overflow: hidden;
  min-height: 540px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 28px;
}
.app-hero-nav{
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--sans); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; opacity:.85;
}
.app-hero-nav ul{ display: flex; gap: 28px; list-style: none; }
.app-hero-center{ display: grid; grid-template-columns: 1fr auto; gap: var(--gutter); align-items: center; }
.app-hero-center .title{
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(42px, 6.4vw, 96px); line-height: 1; letter-spacing: -0.015em;
}
.app-hero-center .title em{ font-style: italic; }
.app-hero-center .arabic-stamp{
  font-family: var(--arabic-display); direction: rtl;
  font-size: clamp(80px, 10vw, 160px); line-height: 1; opacity:.95;
}
.app-hero-bottom{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--gutter); align-items: end; }
.app-hero-bottom .desc{ font-family: var(--serif); font-style: italic; font-size: 18px; max-width: 38ch; color: rgba(234,224,196,.88); }
.app-hero-bottom .cta{
  font-family: var(--sans); font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  border: 1px solid rgba(234,224,196,.45);
  padding: 14px 22px;
  display: inline-flex; align-items: center; gap: 14px;
  color: var(--cream);
  background: transparent; cursor:pointer;
  transition: background .25s ease, color .25s ease;
}
.app-hero-bottom .cta:hover{ background: var(--cream); color: var(--emerald);}
.app-hero-bottom .meta{ text-align: right; font-family: var(--sans); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; opacity:.7;}
.app-hero-bottom .meta span{ display:block; }

.app-ig-row{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.ig{
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
  padding: 22px;
  color: var(--cream);
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.ig.bg-emerald{ background: var(--emerald);}
.ig.bg-paper{ background: var(--paper-warm); color: var(--emerald);}
.ig.bg-cuir{ background: linear-gradient(165deg, #6E4429 0%, #3E2614 100%);}
.ig.bg-night{ background: var(--emerald-ink);}
.ig .ig-top{ display:flex; justify-content:space-between; align-items:flex-start; font-family:var(--sans); font-size: 9.5px; letter-spacing:.26em; text-transform:uppercase; opacity:.8;}
.ig .ig-main{ display: grid; place-items: center; text-align:center;}
.ig .ig-main .ar{ font-family: var(--arabic-display); direction: rtl; font-size: 96px; line-height: 1;}
.ig .ig-main .quote{ font-family: var(--serif); font-style: italic; font-size: 28px; line-height: 1.15;}
.ig .ig-bottom{ font-family:var(--sans); font-size: 9.5px; letter-spacing:.26em; text-transform:uppercase; opacity:.7;}

/* ─────────── Anti patterns ─────────── */
.anti-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.anti{
  padding: 28px;
  min-height: 200px;
  border: 1px solid rgba(26,22,18,.14);
  background: var(--paper);
  display: flex; flex-direction: column; justify-content: space-between;
}
.anti.no{ background: #FAEBE5; border-color: rgba(184,110,76,.4); }
.anti.yes{ background: rgba(30,61,49,.06); border-color: rgba(30,61,49,.25); }
.anti .tag{ font-family: var(--sans); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; }
.anti.no .tag{ color: #B86E4C; }
.anti.yes .tag{ color: var(--emerald); }
.anti .copy{ font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.3; color: var(--ink); margin-top: 16px;}

/* ─────────── Footer ─────────── */
.foot{
  padding: 56px var(--gutter);
  background: var(--emerald-deep);
  color: var(--cream);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gutter);
  align-items: end;
}
.foot .left .ar{ font-family: var(--arabic-display); direction: rtl; font-size: 48px; line-height: 1;}
.foot .center{ text-align:center; font-family: var(--serif); font-style: italic; font-size: 17px; opacity:.8;}
.foot .right{ text-align: right; font-family: var(--sans); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; opacity:.75;}

/* ─────────── Reveal ─────────── */
[data-reveal]{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
}
[data-reveal].in{
  opacity: 1; transform: none;
}

/* ─────────── Responsive ─────────── */
@media (max-width: 880px){
  .section-head{ grid-template-columns: 1fr; gap: 18px; }
  .manifesto{ grid-template-columns: 1fr; gap: 40px;}
  .palette-grid{ grid-template-columns: 1fr 1fr; height: auto; }
  .palette-grid .swatch{ min-height: 200px;}
  .palette-grid-secondary{ grid-template-columns: repeat(3, 1fr); height: auto;}
  .palette-grid-secondary .swatch{ min-height: 90px;}
  .palette-notes{ grid-template-columns: 1fr;}
  .type-card{ grid-template-columns: 1fr;}
  .mono-grid{ grid-template-columns: 1fr; height: auto;}
  .mono-card{ min-height: 280px;}
  .photo-grid{ grid-auto-rows: 14vh; }
  .voice-grid{ grid-template-columns: 1fr;}
  .app-hero-bottom{ grid-template-columns: 1fr;}
  .anti-grid{ grid-template-columns: 1fr;}
  .foot{ grid-template-columns: 1fr; text-align: left;}
  .foot .center, .foot .right{ text-align: left;}
}