/* ==========================================================================
   Howamesh — landing page stylesheet

   The palette, the heavy black rules, the parenthetical indices and the two
   asymmetric card grids are taken from the brand's own deck. Everything is
   written with CSS logical properties so the Arabic (rtl) and English (ltr)
   editions share one stylesheet and mirror correctly.
   ========================================================================== */

/* --- Brand webfonts -------------------------------------------------------

   The house typefaces, self-hosted. 29LT Idris Round is the face the wordmark
   itself is drawn in — its rounded geometry, its ه and its dotted ش match the
   vector artwork glyph for glyph — so it carries display and body. 29LT Baseet
   is the squarish geometric companion from the same kit; it carries indices,
   numerals and eyebrows, the editorial-contrast role.

   Both are variable fonts, subsetted from the retail originals and split by
   script, so `unicode-range` keeps the 104 KB of Arabic outlines off the
   English page entirely. `scripts/subset-fonts.sh` regenerates them; that
   script also explains why `--layout-features='*'` is not optional (without
   it pyftsubset drops init/medi/fina/isol and Arabic renders unjoined).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: '29LT Idris Round';
  src: url('/assets/fonts/29lt-idris-round-variable-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
    U+2191-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: '29LT Idris Round';
  src: url('/assets/fonts/29lt-idris-round-variable-arabic.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200F, U+25CC,
    U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: '29LT Baseet';
  src: url('/assets/fonts/29lt-baseet-variable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
    U+2191-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: '29LT Baseet';
  src: url('/assets/fonts/29lt-baseet-variable-arabic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200F, U+25CC,
    U+FB50-FDFF, U+FE70-FEFF;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Surfaces, sampled from the deck */
  --paper: #fbfbf9;
  --paper-sunk: #f4f4f0;
  --card: #e9e9e4;
  --card-raised: #eeeee9;

  /* Ink */
  --ink: #0a0a0a;
  --ink-strong: #000;
  --ink-muted: rgba(10, 10, 10, 0.62);
  --ink-faint: rgba(10, 10, 10, 0.42);
  --ink-hairline: rgba(10, 10, 10, 0.12);

  /* The deck's iridescence */
  --iris-blue: #b8cbf2;
  --iris-pink: #f4c3d0;
  --iris-peach: #fbd7b4;
  --iris-mint: #cde8d2;
  --iris-lilac: #dbc9f2;

  /* Type */
  --font-display: '29LT Idris Round', 'Segoe UI', system-ui, sans-serif;
  /* Named --font-mono for the role it plays, not its spacing: Baseet is
     proportional, so every numeric run that has to align asks for 'tnum'. */
  --font-mono: '29LT Baseet', ui-monospace, 'SFMono-Regular', monospace;

  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.875rem);
  --step-0: clamp(0.95rem, 0.9rem + 0.25vw, 1.06rem);
  --step-1: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --step-2: clamp(1.35rem, 1.15rem + 1vw, 2rem);
  --step-3: clamp(1.75rem, 1.35rem + 2vw, 3rem);
  --step-4: clamp(2.25rem, 1.5rem + 3.6vw, 4.75rem);

  /* Rhythm */
  --gutter: clamp(1.15rem, 0.6rem + 2.6vw, 3.5rem);
  --shell: 1440px;
  --section-space: clamp(3.75rem, 2rem + 7vw, 8rem);
  --radius-card: clamp(14px, 1.4vw, 22px);
  --radius-field: 12px;
  --rule-weight: 3px;
}

/* --- Reset ---------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 5.5rem;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
ul,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Arabic sits a touch lower and looser than the Latin at the same size, and a
   step heavier: Idris Round's Light is genuinely light, and Arabic loses its
   thin joins and its dots at 300 in a way the Latin does not. */
html[lang='ar'] body {
  line-height: 1.85;
  font-weight: 400;
}

.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skipLink {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--gutter);
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--step--1);
  border-radius: 0 0 10px 10px;
}

.skipLink:focus-visible {
  inset-block-start: 0;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- Navigation ----------------------------------------------------------- */

.nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-block-end: 1px solid var(--ink-hairline);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0.7rem var(--gutter);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
  flex: 0 0 auto;
}

.nav__mark {
  display: grid;
  place-items: center;
  inline-size: 1.05em;
  block-size: 1.05em;
  color: var(--ink);
}

.nav__mark svg {
  inline-size: 100%;
  block-size: 100%;
}

.nav__mark--text {
  font-size: 1.3em;
  line-height: 0.6;
  transform: translateY(0.18em);
}

.nav__menu {
  margin-inline-start: auto;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.8vw, 2rem);
}

.nav__link {
  position: relative;
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--ink-muted);
  padding-block: 0.35rem;
  transition: color 0.22s ease;
}

.nav__link::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 1.5px;
  background: var(--ink);
  transition: inline-size 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav__link:hover,
.nav__link[aria-current='true'] {
  color: var(--ink);
}

.nav__link:hover::after,
.nav__link[aria-current='true']::after {
  inline-size: 100%;
}

.nav__lang {
  flex: 0 0 auto;
  margin-inline-start: clamp(0.5rem, 1.5vw, 1.25rem);
  padding: 0.32rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}

/* The toggle on the English edition is a lone ع. Baseet draws it squared
   enough to read as a Latin glyph at this size, so that one label borrows the
   display face; the Arabic edition's own "EN" stays in Baseet. */
.nav__lang[lang='ar'] {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0;
}

.nav__lang:hover {
  background: var(--ink);
  color: var(--paper);
}

@media (max-width: 760px) {
  .nav__menu {
    display: none;
  }
  .nav__lang {
    margin-inline-start: auto;
  }
}

/* --- Iridescent fields ---------------------------------------------------- */

/* The soft airbrushed glow behind the deck's key slides. */
.hero__field,
.contact__field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 46% at 24% 34%, color-mix(in srgb, var(--iris-blue) 78%, transparent), transparent 68%),
    radial-gradient(32% 40% at 62% 46%, color-mix(in srgb, var(--iris-pink) 72%, transparent), transparent 66%),
    radial-gradient(30% 34% at 50% 62%, color-mix(in srgb, var(--iris-peach) 76%, transparent), transparent 64%),
    radial-gradient(34% 40% at 78% 28%, color-mix(in srgb, var(--iris-lilac) 62%, transparent), transparent 68%),
    radial-gradient(26% 30% at 36% 74%, color-mix(in srgb, var(--iris-mint) 52%, transparent), transparent 62%);
  filter: blur(46px) saturate(118%);
  opacity: 0.85;
  animation: fieldDrift 34s ease-in-out infinite alternate;
}

@keyframes fieldDrift {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.09) translate3d(1.5%, -1.5%, 0);
  }
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block-start: clamp(2.5rem, 1rem + 6vw, 6rem);
  /* The gradient field animates past its own box; clip it here. */
  overflow: clip;
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block-end: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-block-end: clamp(1.25rem, 3vw, 2.5rem);
}

html[lang='ar'] .hero__eyebrow {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  text-transform: none;
}

.hero__wordmark {
  inline-size: min(100%, 62rem);
  margin-inline-start: 0;
  color: var(--ink-strong);
  animation: markRise 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero__wordmark svg {
  inline-size: 100%;
  block-size: auto;
  fill: currentColor;
}

/* Mirrored for the ltr edition so the kashida still sweeps into the page. */
html[dir='ltr'] .hero__wordmark {
  margin-inline-start: 0;
}

.hero__wordmarkFallback {
  font-size: var(--step-4);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  animation: markRise 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes markRise {
  from {
    opacity: 0;
    transform: translateY(1.5rem) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero__rule {
  block-size: var(--rule-weight);
  background: var(--ink-strong);
  margin-block: clamp(1.5rem, 3vw, 2.75rem) 1.15rem;
}

.hero__footnote {
  font-size: var(--step-1);
  font-weight: 500;
  max-inline-size: 46ch;
}

.hero__subline {
  margin-block-start: 0.9rem;
  font-size: var(--step-0);
  color: var(--ink-muted);
  max-inline-size: 54ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
}

/* --- Buttons -------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.5rem;
  font-size: var(--step-0);
  font-weight: 500;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease,
    color 0.2s ease, box-shadow 0.2s ease;
}

.button--primary {
  background: var(--ink);
  color: var(--paper);
}

.button--primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.7);
}

.button--ghost {
  background: transparent;
  color: var(--ink);
}

.button--ghost:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
}

.button:disabled {
  opacity: 0.55;
  cursor: progress;
  transform: none;
}

/* --- Statistics ----------------------------------------------------------- */

.stats {
  position: relative;
  border-block-start: var(--rule-weight) solid var(--ink-strong);
  background: var(--paper);
}

.stats__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.stat {
  padding-block: clamp(1.1rem, 2.2vw, 1.9rem);
  padding-inline-end: 1rem;
  border-inline-start: 1px solid var(--ink-hairline);
  padding-inline-start: clamp(0.75rem, 1.6vw, 1.5rem);
}

.stat:first-child {
  border-inline-start: 0;
  padding-inline-start: 0;
}

.stat__value {
  font-family: var(--font-mono);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  /* Baseet is proportional; the stats sit in a row and have to line up. */
  font-variant-numeric: tabular-nums;
}

.stat__label {
  margin-block-start: 0.4rem;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

@media (max-width: 620px) {
  .stats__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stat:nth-child(3) {
    border-inline-start: 0;
    padding-inline-start: 0;
  }
  .stat:nth-child(-n + 2) {
    border-block-end: 1px solid var(--ink-hairline);
  }
}

/* --- Client marquee ------------------------------------------------------- */

.marquee {
  direction: ltr;
  overflow: hidden;
  border-block-end: 1px solid var(--ink-hairline);
  background: var(--paper-sunk);
  padding-block: clamp(0.9rem, 1.8vw, 1.4rem);
  /* Fade the ends so names dissolve rather than clip. */
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marqueeSlide 48s linear infinite;
}

.marquee__run {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-inline-end: clamp(1.5rem, 3vw, 3rem);
}

.marquee__item {
  unicode-bidi: isolate;
  font-size: var(--step-1);
  font-weight: 400;
  color: var(--ink-faint);
  white-space: nowrap;
  transition: color 0.3s ease;
}

.marquee__item::after {
  content: '·';
  margin-inline-start: clamp(1.5rem, 3vw, 3rem);
  color: var(--ink-hairline);
}

.marquee:hover .marquee__item {
  color: var(--ink);
}

@keyframes marqueeSlide {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* --- Chapters ------------------------------------------------------------- */

.chapter {
  border-block-start: var(--rule-weight) solid var(--ink-strong);
  padding-block: var(--section-space);
}

.chapter--works {
  background: var(--paper-sunk);
}

.chapter__inner {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.chapter__headline {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.chapter__title {
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.chapter__numeral {
  flex: 1 1 auto;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  color: var(--ink-faint);
}

.chapter__label {
  flex: 0 0 auto;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.chapter__lead {
  margin-block-start: 1rem;
  max-inline-size: 62ch;
  font-size: var(--step-1);
  color: var(--ink-muted);
  font-weight: 300;
}

.chapter .grid {
  margin-block-start: clamp(2rem, 4vw, 3.5rem);
}

@media (max-width: 700px) {
  .chapter__headline {
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
  }
  .chapter__numeral {
    order: 3;
    flex: 0 0 auto;
    text-align: start;
  }
  .chapter__title {
    flex: 1 1 100%;
  }
}

/* --- Cards ---------------------------------------------------------------- */

.grid {
  display: grid;
  gap: clamp(0.6rem, 1.1vw, 1rem);
}

/* Deck page 2: nine cards, one of them a full-height column. */
.grid--principles {
  grid-template-columns: 1fr 1.45fr 1fr 1.35fr 1.15fr;
  grid-template-areas:
    'a b c g h'
    'd e f g i';
}

/* Deck page 3: two full-height columns bracketing a wide band and two tiles. */
.grid--pursuits {
  grid-template-columns: 1.05fr 1.15fr 1fr 1.45fr;
  grid-template-areas:
    'p1 p2 p2 p5'
    'p1 p3 p4 p5';
}

.card {
  grid-area: var(--card-area);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-block-size: clamp(178px, 22vw, 268px);
  padding: clamp(0.9rem, 1.6vw, 1.4rem);
  background: var(--card);
  border-radius: var(--radius-card);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s ease;
}

.card--pursuit {
  min-block-size: clamp(210px, 26vw, 340px);
}

/* Each card carries its own faint iridescence, as in the deck. */
.card::before {
  content: '';
  position: absolute;
  inset: -12%;
  z-index: -2;
  background:
    radial-gradient(44% 44% at 40% 34%, color-mix(in srgb, var(--iris-blue) 60%, transparent), transparent 70%),
    radial-gradient(34% 34% at 66% 56%, color-mix(in srgb, var(--iris-peach) 52%, transparent), transparent 68%);
  filter: blur(30px);
  opacity: 0.55;
  transition: opacity 0.45s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover {
  transform: translateY(-4px);
  background: var(--card-raised);
}

.card:hover::before {
  opacity: 0.9;
  transform: scale(1.08);
}

.card__art {
  position: absolute;
  inset-block-start: 5%;
  inset-inline: 8%;
  z-index: -1;
  block-size: 52%;
  display: grid;
  place-items: center;
}

.card__art img {
  inline-size: auto;
  block-size: 100%;
  max-inline-size: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover .card__art img {
  transform: scale(1.05) rotate(-1deg);
}

.card__body {
  position: relative;
  margin-block-start: auto;
}

/* A scrim in the card's own colour, so a label always stays legible even
   where the artwork reaches down into it. Sits above .card__art (same stack
   level, later in tree order) but below the label text itself. */
.card__body::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset-block: -1.6rem calc(-1 * clamp(0.9rem, 1.6vw, 1.4rem));
  inset-inline: calc(-1 * clamp(0.9rem, 1.6vw, 1.4rem));
  background: linear-gradient(
    to top,
    var(--card) 42%,
    color-mix(in srgb, var(--card) 78%, transparent) 72%,
    transparent 100%
  );
  transition: background 0.4s ease;
}

.card:hover .card__body::before {
  background: linear-gradient(
    to top,
    var(--card-raised) 42%,
    color-mix(in srgb, var(--card-raised) 78%, transparent) 72%,
    transparent 100%
  );
}

.card__title {
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.card__index {
  font-family: var(--font-mono);
  font-size: 0.62em;
  font-weight: 400;
  color: var(--ink-faint);
  margin-inline-start: 0.35em;
  vertical-align: super;
}

.card__detail {
  margin-block-start: 0.35rem;
  font-size: var(--step--1);
  color: var(--ink-muted);
  line-height: 1.6;
}

/* The full-height columns can afford taller artwork. */
.card[style*='--card-area: g'] .card__art,
.card[style*='--card-area: p1'] .card__art,
.card[style*='--card-area: p5'] .card__art {
  block-size: 62%;
}

@media (max-width: 1080px) {
  /* Cards get wider and shorter here, which leaves the portrait illustrations
     small relative to the card. Buy back some height. */
  .card {
    min-block-size: clamp(200px, 30vw, 288px);
  }
  .card--pursuit {
    min-block-size: clamp(230px, 34vw, 330px);
  }

  .grid--principles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      'a b b'
      'c d e'
      'g g f'
      'h i i';
  }
  .grid--pursuits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      'p1 p2'
      'p1 p3'
      'p5 p4';
  }
}

@media (max-width: 640px) {
  .grid--principles,
  .grid--pursuits {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
  }
  .card {
    grid-area: auto;
    min-block-size: 200px;
  }
  .card--pursuit {
    min-block-size: 230px;
  }
}

/* --- Works index (deck page 4) -------------------------------------------- */

.works {
  columns: 3;
  column-gap: clamp(1.5rem, 3.5vw, 4rem);
  margin-block-start: clamp(2rem, 4vw, 3.5rem);
}

.works__group {
  break-inside: avoid;
  margin-block-end: clamp(1.75rem, 3vw, 2.75rem);
}

.works__groupTitle {
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
  padding-block-end: 0.55rem;
  border-block-end: 1.5px solid var(--ink);
}

.works__groupIndex {
  font-family: var(--font-mono);
  font-size: 0.72em;
  font-weight: 400;
  color: var(--ink-faint);
  margin-inline-end: 0.4em;
}

.works__groupCount {
  margin-block-start: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

html[lang='ar'] .works__groupCount {
  font-family: var(--font-display);
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--step--1);
}

.works__list {
  margin-block-start: 0.6rem;
  display: grid;
  gap: 0.32rem;
}

.works__item {
  position: relative;
  font-size: var(--step-0);
  color: var(--ink-muted);
  padding-inline-start: 0.9rem;
  transition: color 0.2s ease;
}

.works__item::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.75em;
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  background: var(--ink-faint);
  transition: background 0.2s ease, transform 0.2s ease;
}

.works__item:hover {
  color: var(--ink);
}

.works__item:hover::before {
  background: var(--ink);
  transform: scale(1.6);
}

@media (max-width: 1000px) {
  .works {
    columns: 2;
  }
}

@media (max-width: 620px) {
  .works {
    columns: 1;
  }
}

/* --- Contact -------------------------------------------------------------- */

.contact {
  position: relative;
  border-block-start: var(--rule-weight) solid var(--ink-strong);
  padding-block: var(--section-space);
  overflow: hidden;
}

.contact__inner {
  position: relative;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.contact__question {
  font-size: var(--step-4);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-inline-size: 22ch;
}

.contact__lead {
  margin-block-start: 1.15rem;
  max-inline-size: 52ch;
  font-size: var(--step-1);
  color: var(--ink-muted);
  font-weight: 300;
}

.contact__email {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
}

.contact__emailLabel {
  font-size: var(--step--1);
  color: var(--ink-faint);
}

.contact__emailLink {
  font-size: var(--step-1);
  font-weight: 500;
  border-block-end: 2px solid var(--ink);
  transition: opacity 0.2s ease;
}

.contact__emailLink:hover {
  opacity: 0.62;
}

/* --- Form ----------------------------------------------------------------- */

.form {
  margin-block-start: clamp(2rem, 4vw, 3rem);
  max-inline-size: 56rem;
  padding: clamp(1.15rem, 2.4vw, 2rem);
  background: color-mix(in srgb, var(--paper) 74%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--ink-hairline);
  border-radius: calc(var(--radius-card) + 6px);
}

.form__honeypot {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  margin-block-end: clamp(0.75rem, 1.6vw, 1.25rem);
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field__label {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink);
}

.field__required {
  color: var(--ink-faint);
}

.field__input {
  inline-size: 100%;
  padding: 0.72rem 0.9rem;
  background: var(--paper);
  border: 1.5px solid var(--ink-hairline);
  border-radius: var(--radius-field);
  font-size: var(--step-0);
  font-weight: 300;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.field__input::placeholder {
  color: var(--ink-faint);
}

.field__input:hover {
  border-color: rgba(10, 10, 10, 0.28);
}

.field__input:focus {
  outline: none;
  border-color: var(--ink);
  background: #fff;
}

.field__input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.field__input--area {
  resize: vertical;
  min-block-size: 7rem;
  line-height: 1.7;
}

/* A real chevron, not two clipped gradients — the gradient trick renders as a
   broken glyph at some zoom levels and does not mirror cleanly. */
.field__input--select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230a0a0a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 12px 8px;
  background-position: right 1rem center;
  padding-inline-end: 2.5rem;
}

html[dir='rtl'] .field__input--select {
  background-position: left 1rem center;
}

.field__input[aria-invalid='true'] {
  border-color: #a3231f;
}

.form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-block-start: clamp(1rem, 2vw, 1.5rem);
}

.form__note {
  font-size: var(--step--1);
  color: var(--ink-faint);
}

.form__status {
  margin-block-start: 0.9rem;
  font-size: var(--step-0);
  font-weight: 500;
  min-block-size: 1.5em;
}

.form__status[data-state='success'] {
  color: #1c6b3f;
}

.form__status[data-state='error'] {
  color: #a3231f;
}

@media (max-width: 620px) {
  .form__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Footer --------------------------------------------------------------- */

.footer {
  border-block-start: var(--rule-weight) solid var(--ink-strong);
  padding-block: clamp(2rem, 4vw, 3.25rem);
  background: var(--paper);
}

.footer__inner {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.footer__motto {
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.5;
  max-inline-size: 40ch;
  letter-spacing: -0.015em;
}

.footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.5rem;
  margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
  padding-block-start: 1.15rem;
  border-block-start: 1px solid var(--ink-hairline);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.footer__email {
  font-weight: 500;
  color: var(--ink);
  border-block-end: 1.5px solid var(--ink-hairline);
  transition: border-color 0.2s ease;
}

.footer__email:hover {
  border-color: var(--ink);
}

.footer__rights {
  margin-inline-end: auto;
}

.footer__top {
  border-block-end: 1.5px solid var(--ink-hairline);
  transition: border-color 0.2s ease;
}

.footer__top:hover {
  border-color: var(--ink);
}

/* --- Scroll reveal -------------------------------------------------------- */

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(1.15rem);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

html.js [data-reveal][data-revealed='true'] {
  opacity: 1;
  transform: none;
}

/* Without the `js` class (script blocked or failed) the rules above never
   apply, so every section stays visible. */

/* --- Motion and contrast preferences -------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hero__field,
  .contact__field {
    animation: none;
  }
  .marquee__track {
    animation: none;
    transform: none;
  }
  .marquee {
    overflow-x: auto;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --ink-muted: rgba(10, 10, 10, 0.85);
    --ink-faint: rgba(10, 10, 10, 0.7);
    --ink-hairline: rgba(10, 10, 10, 0.35);
  }
  .hero__field,
  .contact__field,
  .card::before {
    opacity: 0.35;
  }
}

@media print {
  .nav,
  .marquee,
  .hero__field,
  .contact__field,
  .form {
    display: none;
  }
  body {
    background: #fff;
  }
}

/* --- The house standard (ihsan) ------------------------------------------- */

/* Deck line (1) is a statement of the standard rather than a caption for a
   card, so it gets a quiet full-width band of its own. */
.standard {
  margin: clamp(2.5rem, 5vw, 4.5rem) 0 0;
  padding-block-start: clamp(1.5rem, 3vw, 2.5rem);
  border-block-start: 1.5px solid var(--ink);
  display: grid;
  gap: 0.9rem;
}

.standard__caption {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

html[lang='ar'] .standard__caption {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: none;
}

.standard__statement {
  margin: 0;
  max-inline-size: 34ch;
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* --- Card 1 of chapter two: label above, artwork bleeding off the bottom --- */

/* This illustration's soil fills the frame's bottom edge — it has no
   transparent margin there — so floating it inside the card shows a hard
   rectangular cut. The deck solves it the same way: label at the top, artwork
   bled off the card's bottom. */
.card[style*='--card-area: p1'] {
  justify-content: flex-start;
}

.card[style*='--card-area: p1'] .card__body {
  margin-block-start: 0;
}

.card[style*='--card-area: p1'] .card__body::before {
  inset-block: calc(-1 * clamp(0.9rem, 1.6vw, 1.4rem)) -1.6rem;
  background: linear-gradient(
    to bottom,
    var(--card) 42%,
    color-mix(in srgb, var(--card) 78%, transparent) 72%,
    transparent 100%
  );
}

.card[style*='--card-area: p1']:hover .card__body::before {
  background: linear-gradient(
    to bottom,
    var(--card-raised) 42%,
    color-mix(in srgb, var(--card-raised) 78%, transparent) 72%,
    transparent 100%
  );
}

.card[style*='--card-area: p1'] .card__art {
  inset-block: auto 0;
  inset-inline: 0;
  block-size: auto;
  max-block-size: 52%;
  align-items: end;
}

.card[style*='--card-area: p1'] .card__art img {
  inline-size: 100%;
  block-size: auto;
  max-block-size: 100%;
  object-fit: contain;
  object-position: bottom;
}