/* =========================================================================
   ARBSQ — أرابيسك وورلد
   Site stylesheet. Hand-authored; no framework.

   Structure
     1  Fonts
     2  Tokens
     3  Reset & base
     4  Typography
     5  Layout primitives
     6  The Gateway device
     7  Masthead
     8  Index rows  (the archive, used on home / work / studio)
     9  Case study
    10  Services
    11  Facts, clients, quote
    12  Forms
    13  Footer
    14  Motion
   ========================================================================= */

/* ---------- 1  Fonts ---------------------------------------------------- */

@font-face {
  font-family: "Thmanyah";
  src: url("../fonts/thmanyah-serif-text-light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah";
  src: url("../fonts/thmanyah-serif-text-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah";
  src: url("../fonts/thmanyah-serif-text-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah";
  src: url("../fonts/thmanyah-serif-text-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah";
  src: url("../fonts/thmanyah-serif-text-black.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

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

:root {
  /* Sampled from the vector fills in Brand Guideline_Arabsq.pdf, pp. 6 & 8. */
  --ink: #1a1934;
  --paper: #e5e5e9;
  --white: #fff;
  --orange: #ff5b23;
  --lilac: #dcb8fe;
  --blue: #3a39ff;
  --amber: #ffb62e;
  --sky: #7cc3ff;

  --ink-raised: #201f3d;
  --text: var(--paper);
  --text-dim: rgba(229, 229, 233, 0.56);
  --text-faint: rgba(229, 229, 233, 0.34);
  --rule: rgba(229, 229, 233, 0.16);
  --rule-soft: rgba(229, 229, 233, 0.09);
  --logo-rule: rgba(26, 25, 52, 0.1);

  /* The Gateway cut: one top corner sheared at 45°. */
  --cut: clamp(1.5rem, 3.5vw, 3.5rem);

  --measure: 36em;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --shell: 86rem;

  color-scheme: dark;
}

/* ---------- 3  Reset & base --------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: "Thmanyah", "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
}

/* Arabic needs more leading than Latin at the same optical size — the script
   carries ascenders, descenders and diacritics the Latin ramp never has to. */
html[lang="ar"] body {
  line-height: 1.95;
}

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

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

ul,
ol,
dl,
dd,
figure {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

::selection {
  background: var(--orange);
  color: var(--white);
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 100;
  background: var(--orange);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  transform: translateY(-200%);
}
.skip:focus {
  transform: none;
}

/* ---------- 4  Typography ----------------------------------------------- */

/* Deliberately not a neat geometric ramp — the sizes were set by eye against
   the real headlines, which is why 2.1 and 1.35 sit where they do. */

.display {
  font-weight: 900;
  font-size: clamp(2.6rem, 7.4vw, 6.25rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0;
}
html[lang="ar"] .display {
  line-height: 1.22;
  letter-spacing: 0;
  font-weight: 700;
}

.h2 {
  font-weight: 700;
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
html[lang="ar"] .h2 {
  line-height: 1.4;
  letter-spacing: 0;
}

.h3 {
  font-weight: 500;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.25;
}
html[lang="ar"] .h3 {
  line-height: 1.6;
}

.lede {
  font-weight: 300;
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  line-height: 1.55;
  color: var(--text);
}
html[lang="ar"] .lede {
  line-height: 1.95;
}

.prose p + p {
  margin-block-start: 1.1em;
}
.prose {
  color: var(--text-dim);
  max-width: var(--measure);
}

/* Section eyebrow. Arabic has no casing axis and tracking breaks the joins,
   so the Latin treatment is undone rather than inherited. */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  display: block;
}
html[lang="ar"] .eyebrow {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.875rem;
}

.meta {
  font-size: 0.8125rem;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}
html[lang="ar"] .meta {
  font-size: 0.875rem;
  letter-spacing: 0;
}

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Latin fragments inside Arabic (stc, ICAO, 3D Mapping) and vice versa. */
[dir="ltr"],
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---------- 5  Layout primitives ---------------------------------------- */

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

.shell-narrow {
  max-width: 62rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Section rhythm varies on purpose; a single uniform value across a whole
   site is the surest way to make it feel machine-set. */
.band {
  padding-block: clamp(4rem, 9vw, 8rem);
}
.band-tight {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.band-tall {
  padding-block: clamp(5.5rem, 13vw, 11rem);
}

.rule-top {
  border-block-start: 1px solid var(--rule);
}

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 62em) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
  .split-aside {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  }
  .split-offset > :last-child {
    padding-block-start: 0.5rem;
  }
}

.band-bottom {
  padding-block-end: clamp(4rem, 9vw, 8rem);
}

/* Heading + standfirst pair that opens most sections. */
.section-head {
  margin-block-end: clamp(1.75rem, 3vw, 2.5rem);
}
.section-head .prose {
  align-self: end;
}

/* The standfirst that follows a page's display line. */
.page-lede {
  max-width: 33em;
  margin-block-start: 1.5rem;
}

.label-block {
  display: block;
}
.meta-heading {
  margin-block-end: 0.5rem;
}
.lead-split {
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
}

.prose-bright {
  color: var(--text);
}

.measure-short {
  max-width: 16ch;
}

.cta-row {
  margin-block-start: clamp(1.5rem, 3vw, 2rem);
}

.index-flush {
  border-block-start: 0;
}

.factlist-stack {
  grid-template-columns: 1fr;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.5rem;
  align-items: center;
}

/* ---------- 6  The Gateway ----------------------------------------------
   «الإطار مستطيل بحافة علوية واحدة مقطوعة بزاوية، استلهامًا من مصراع الباب
   التقليدي» — a rectangle with one top edge cut at an angle, after the
   traditional door leaf. The cut sits on the inline-start corner, so the
   device mirrors with reading direction instead of being flipped by hand.
   ------------------------------------------------------------------------ */

.gate {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
}
[dir="rtl"] .gate {
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}

/* A plate is a Gateway filled with one of the identity's geometric patterns.
   It stands in for photography that has not been cleared for web use. */
.plate {
  position: relative;
  overflow: hidden;
  background: var(--ink-raised);
}
.plate svg {
  width: 100%;
  height: 100%;
  display: block;
}
.plate-wide {
  aspect-ratio: 16 / 9;
}
.plate-tall {
  aspect-ratio: 4 / 5;
}
.plate-square {
  aspect-ratio: 1;
}

/* Photography. The source images vary from 5064×1536 panoramas to 960×1280
   portraits, so every frame sets its own ratio and crops to fill rather than
   letting the page jump around with each image's native shape. */
.plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.plate-hero {
  aspect-ratio: 16 / 9;
}
@media (max-width: 48em) {
  .plate-hero {
    aspect-ratio: 4 / 3;
  }
}

.plate-gallery {
  aspect-ratio: 3 / 2;
}

.gallery {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  grid-template-columns: 1fr;
}
@media (min-width: 48em) {
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}

/* Index thumbnail. Small enough that the archive still reads as a list. */
.row-thumb {
  --cut: 0.6rem;
  aspect-ratio: 3 / 2;
  width: 100%;
  grid-row: span 2;
  align-self: center;
}
@media (max-width: 55.99em) {
  .row-thumb {
    grid-column: 2 / -1;
    grid-row: auto;
    width: 11rem;
    max-width: 100%;
    justify-self: start;
    margin-block-end: 0.5rem;
  }
}

/* ---------- 7  Masthead -------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  border-block-end: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.masthead[data-stuck="true"] {
  border-block-end-color: var(--rule);
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.5rem;
}
@media (min-width: 48em) {
  .masthead-inner {
    min-height: 5.5rem;
  }
}

.logo {
  flex: none;
}
.logo img {
  height: 1.6rem;
  width: auto;
  /* The mark is a single-colour vector; inverting is cheaper and sharper
     than shipping a second file just to recolour it. */
  filter: brightness(0) invert(1);
}
@media (min-width: 48em) {
  .logo img {
    height: 1.9rem;
  }
}

.nav {
  display: none;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: center;
}
@media (min-width: 56em) {
  .nav {
    display: flex;
  }
}

.nav a {
  font-size: 0.95rem;
  position: relative;
  padding-block: 0.25rem;
}
.nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}
.nav a:hover::after,
.nav a[aria-current]::after {
  transform: none;
}
.nav a[aria-current] {
  color: var(--orange);
}

.masthead-end {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lang-link {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  border: 1px solid var(--rule);
  padding: 0.45rem 0.8rem;
  transition:
    color 0.25s,
    border-color 0.25s;
}
.lang-link:hover {
  color: var(--text);
  border-color: var(--text-dim);
}

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.25rem;
  height: 2.25rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}
@media (min-width: 56em) {
  .burger {
    display: none;
  }
}
.burger span {
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform 0.3s ease;
}

.drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  border-block-start: 1px solid var(--rule);
}
.drawer[data-open="true"] {
  grid-template-rows: 1fr;
}
.drawer > div {
  overflow: hidden;
}
.drawer nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-block: 1.5rem 2.25rem;
}
.drawer a {
  font-size: 1.6rem;
  font-weight: 500;
  padding-block: 0.4rem;
}
@media (min-width: 56em) {
  .drawer {
    display: none;
  }
}

/* ---------- 8  Index rows ------------------------------------------------
   The archive device: a ruled list, not a card grid. Used for projects on the
   home page and the work index, and for people in the studio.
   ------------------------------------------------------------------------ */

.index {
  border-block-start: 1px solid var(--rule);
}

.index-year {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 1.5rem 0.5rem;
  color: var(--text-faint);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
}
.index-year::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule-soft);
}

.row {
  display: block;
  position: relative;
  border-block-end: 1px solid var(--rule);
  padding-block: clamp(1.25rem, 2.4vw, 1.9rem);
  transition: background-color 0.4s ease;
}
.row::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 2px;
  background: var(--row-accent, var(--orange));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}
.row:hover,
.row:focus-visible {
  background: rgba(229, 229, 233, 0.035);
}
.row:hover::before,
.row:focus-visible::before {
  transform: none;
}

.row-grid {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  gap: 0.35rem 1rem;
  align-items: baseline;
  padding-inline: 0.75rem;
}

/* Wide: number, thumbnail, title, client, year — with the summary tucked
   under the title and the thumbnail spanning both rows. */
@media (min-width: 56em) {
  .row-grid {
    grid-template-columns: 3rem 9rem minmax(0, 6fr) minmax(0, 4fr) 5rem;
    gap: 0.4rem 1.5rem;
    padding-inline: 1.25rem;
  }
}

.row-num {
  font-size: 0.75rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.row-title {
  font-size: clamp(1.15rem, 2.1vw, 1.75rem);
  font-weight: 500;
  line-height: 1.25;
  grid-column: 2 / -1;
  transition: color 0.3s ease;
}
html[lang="ar"] .row-title {
  line-height: 1.55;
}
@media (min-width: 56em) {
  .row-title {
    grid-column: auto;
  }
}
.row:hover .row-title {
  color: var(--orange);
}

.row-client {
  grid-column: 2 / -1;
  color: var(--text-dim);
  font-size: 0.9rem;
}
@media (min-width: 56em) {
  .row-client {
    grid-column: auto;
    font-size: 0.95rem;
  }
}

.row-year {
  grid-row: 1;
  grid-column: 3;
  color: var(--text-faint);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}
@media (min-width: 56em) {
  .row-year {
    grid-row: auto;
    grid-column: auto;
  }
}

.row-summary {
  grid-column: 2 / -1;
  color: var(--text-faint);
  font-size: 0.9rem;
  max-width: 44ch;
  margin-block-start: 0.35rem;
}

/* Wide placement lives here, after every .row-* base rule, so it wins the
   cascade rather than being quietly undone by one defined further down. */
@media (min-width: 56em) {
  .row-num {
    grid-column: 1;
    grid-row: 1;
  }
  .row-thumb {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .row-title {
    grid-column: 3;
    grid-row: 1;
  }
  .row-client {
    grid-column: 4;
    grid-row: 1;
  }
  .row-year {
    grid-column: 5;
    grid-row: 1;
  }
  .row-summary {
    grid-column: 3 / 6;
    grid-row: 2;
  }
}

/* ---------- 9  Case study ------------------------------------------------ */

.case-head {
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 3.5rem);
}

.case-title {
  font-weight: 700;
  font-size: clamp(2rem, 5.4vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 18ch;
}
html[lang="ar"] .case-title {
  line-height: 1.32;
  letter-spacing: 0;
  max-width: 20ch;
}

.factlist {
  display: grid;
  gap: 1.75rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.factlist dt {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-block-end: 0.4rem;
}
html[lang="ar"] .factlist dt {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8125rem;
}
.factlist dd {
  font-size: 1rem;
  line-height: 1.5;
}
html[lang="ar"] .factlist dd {
  line-height: 1.8;
}

.scope {
  border-block-start: 1px solid var(--rule);
}
.scope > div {
  display: grid;
  gap: 0.4rem 2.5rem;
  padding-block: 1.5rem;
  border-block-end: 1px solid var(--rule-soft);
}
@media (min-width: 48em) {
  .scope > div {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  }
}
.scope dt {
  font-weight: 500;
}
.scope dd {
  color: var(--text-dim);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: baseline;
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.05rem;
}
.arrow-link svg {
  transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}
[dir="rtl"] .arrow-link svg {
  transform: scaleX(-1);
}
.arrow-link:hover svg {
  transform: translateX(0.3rem);
}
[dir="rtl"] .arrow-link:hover svg {
  transform: scaleX(-1) translateX(0.3rem);
}

/* ---------- 10  Services ------------------------------------------------- */

.service {
  border-block-start: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  display: grid;
  gap: 1.25rem 3rem;
}
@media (min-width: 56em) {
  .service {
    grid-template-columns: 3.5rem minmax(0, 4fr) minmax(0, 6fr);
    align-items: start;
  }
}
.service-num {
  font-size: 0.75rem;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  padding-block-start: 0.5rem;
}
.service-lede {
  color: var(--text-dim);
  font-size: 1.05rem;
  margin-block-start: 0.75rem;
}

/* ---------- 11  Facts, clients, quote ------------------------------------ */

.facts {
  display: grid;
  gap: 2.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.fact-value {
  display: block;
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
html[lang="ar"] .fact-value {
  font-weight: 700;
  letter-spacing: 0;
}
.fact-label {
  display: block;
  margin-block-start: 0.75rem;
  font-weight: 500;
}
.fact-note {
  display: block;
  color: var(--text-faint);
  font-size: 0.8125rem;
  margin-block-start: 0.25rem;
  line-height: 1.5;
  max-width: 24em;
}

.clients {
  display: grid;
  gap: 0.15rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.clients li {
  color: var(--text-dim);
  padding-block: 0.45rem;
  font-size: 0.95rem;
  border-block-end: 1px solid var(--rule-soft);
}

/* ---------- Client logos -------------------------------------------------
   The marks are coloured and drawn for a light ground — several are gold,
   pale green or thin line art and would disappear on the dark page. So the
   wall gets its own paper band, which also gives the site a change of pace.
   ------------------------------------------------------------------------ */

.band-paper {
  background: var(--paper);
  color: var(--ink);
}
.band-paper .eyebrow {
  color: var(--orange);
}
.band-paper .prose,
.band-paper .clients li {
  color: rgba(26, 25, 52, 0.62);
}
.band-paper .clients li {
  border-block-end-color: rgba(26, 25, 52, 0.12);
}

/* The separators are borders on the tiles rather than a 1px gap over a
   coloured grid. With the gap technique the leftover cell on the last row
   shows the line colour as a grey block; this way an unfilled cell is simply
   white, like the rest of the band. */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--white);
  border: 0 solid var(--logo-rule);
  border-block-start-width: 1px;
  border-inline-start-width: 1px;
}
@media (min-width: 34em) {
  .logo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 48em) {
  .logo-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 64em) {
  .logo-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.logo-tile {
  background: var(--white);
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 2vw, 1.4rem);
  border: 0 solid var(--logo-rule);
  border-inline-end-width: 1px;
  border-block-end-width: 1px;
}

.logo-tile img {
  max-width: 100%;
  max-height: clamp(2.6rem, 5.4vw, 3.6rem);
  width: auto;
  height: auto;
  object-fit: contain;
}

/* A single height makes a square mark read half the size of a wide lockup.
   Wide marks are allowed less height and tall ones more, so each carries
   about the same optical weight on the wall. */
.logo-tile.is-wide img {
  max-height: clamp(2rem, 4vw, 2.7rem);
}
.logo-tile.is-tall img {
  max-height: clamp(3.4rem, 7vw, 4.6rem);
}

.quote {
  border-inline-start: 2px solid var(--orange);
  padding-inline-start: clamp(1.25rem, 3vw, 2.5rem);
}
.quote p {
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  line-height: 1.3;
  font-weight: 300;
}
html[lang="ar"] .quote p {
  line-height: 1.7;
}
.quote footer {
  margin-block-start: 1.25rem;
  color: var(--text-faint);
  font-size: 0.875rem;
}

/* Studio people: a ruled index that opens in place. */
.person {
  border-block-end: 1px solid var(--rule);
}
.person-head {
  width: 100%;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  padding-block: 1.4rem;
  display: grid;
  gap: 0.2rem 1.5rem;
  align-items: baseline;
}
@media (min-width: 48em) {
  .person-head {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 1.5rem;
  }
}
.person-name {
  font-size: clamp(1.1rem, 1.9vw, 1.4rem);
  font-weight: 500;
  transition: color 0.3s ease;
}
.person-role {
  color: var(--text-dim);
  font-size: 0.95rem;
}
.person-head:hover .person-name {
  color: var(--orange);
}
.person-sign {
  justify-self: end;
  color: var(--text-faint);
  transition: transform 0.35s ease;
}
.person[data-open="true"] .person-sign {
  transform: rotate(45deg);
}
.person-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}
.person[data-open="true"] .person-body {
  grid-template-rows: 1fr;
}
.person-body > div {
  overflow: hidden;
}
.person-body .inner {
  padding-block-end: 1.75rem;
  display: grid;
  gap: 1.25rem 3rem;
  color: var(--text-dim);
}
@media (min-width: 48em) {
  .person-body .inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
}
.person-projects li {
  font-size: 0.875rem;
  color: var(--text-faint);
  padding-block: 0.2rem;
}

/* ---------- 12  Forms ---------------------------------------------------- */

.form {
  display: grid;
  gap: 1.75rem 2.5rem;
}
@media (min-width: 48em) {
  .form {
    grid-template-columns: 1fr 1fr;
  }
  .form .wide {
    grid-column: 1 / -1;
  }
}

.field label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-block-end: 0.5rem;
}
html[lang="ar"] .field label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8125rem;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--rule);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  padding-block: 0.65rem;
  border-radius: 0;
  transition: border-color 0.3s ease;
}
.field textarea {
  resize: vertical;
  min-height: 3.5rem;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-block-end-color: var(--orange);
}
.field select option {
  background: var(--ink);
  color: var(--text);
}

/* Native select arrows land on the wrong side in RTL, so the chevron is
   drawn and placed on the inline-end edge in both directions. */
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23E5E5E9' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 10px 6px;
  background-position: right 0 center;
  padding-inline-end: 1.75rem;
}
[dir="rtl"] .field select {
  background-position: left 0 center;
  padding-inline-end: 0;
  padding-inline-start: 1.75rem;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--orange);
  color: var(--white);
  border: 0;
  font: inherit;
  font-weight: 500;
  padding: 1rem 1.75rem;
  cursor: pointer;
  --cut: 0.9rem;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
  transition: background-color 0.3s ease;
}
[dir="rtl"] .button {
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.button:hover {
  background: #ff7343;
}
.button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.button svg {
  flex: none;
}
[dir="rtl"] .button svg {
  transform: scaleX(-1);
}

.button-quiet {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--rule);
}
.button-quiet:hover {
  background: rgba(229, 229, 233, 0.06);
}

.form-status {
  font-size: 0.9rem;
  color: var(--text-dim);
}
.form-status[data-tone="error"] {
  color: var(--orange);
}

/* Honeypot. Hidden by clipping rather than by an off-screen coordinate:
   `left:-9999px` is the usual trick, but in an RTL document that lands
   outside the scroll origin and gives the page 10,000px of horizontal
   scroll. Clipping has no such side effect in either direction. */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

.footer {
  border-block-start: 1px solid var(--rule);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}
.footer-grid {
  display: grid;
  gap: 2.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.footer h2 {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
  margin-block-end: 1rem;
}
html[lang="ar"] .footer h2 {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8125rem;
}
.footer li,
.footer p {
  color: var(--text-dim);
  font-size: 0.9rem;
  padding-block: 0.2rem;
}
.footer a:hover {
  color: var(--orange);
}
.colophon {
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--rule-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  color: var(--text-faint);
  font-size: 0.8125rem;
}

/* ---------- 14  Motion ---------------------------------------------------
   Used sparingly and only at the top of a page. Nothing further down fades
   in on scroll: an archive that withholds its contents until you scroll past
   them is an archive that is harder to read.
   ------------------------------------------------------------------------ */

.enter {
  opacity: 0;
  transform: translateY(0.9rem);
  animation: enter 0.85s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

@keyframes enter {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .enter {
    opacity: 1;
    transform: none;
  }
  .person-body,
  .drawer {
    transition: none;
  }
}