@font-face { font-family:"IBM Plex Sans Arabic"; font-style:normal; font-weight:200; font-display:swap; src:url("../../fonts/IBMPlexSansArabic-200.ttf") format("truetype"); }
@font-face { font-family:"IBM Plex Sans Arabic"; font-style:normal; font-weight:300; font-display:swap; src:url("../../fonts/IBMPlexSansArabic-300.ttf") format("truetype"); }
@font-face { font-family:"IBM Plex Sans Arabic"; font-style:normal; font-weight:400; font-display:swap; src:url("../../fonts/IBMPlexSansArabic-400.ttf") format("truetype"); }
@font-face { font-family:"IBM Plex Sans Arabic"; font-style:normal; font-weight:500; font-display:swap; src:url("../../fonts/IBMPlexSansArabic-500.ttf") format("truetype"); }

/* Benshad — About (Mondrian grid).
   Implemented from Claude Design export `About.dc.html`. */

.about-page {
  --ink: #1a1a1a;
  --ground: #f8f7f7;
  --white: #ffffff;
  --ease-reflow: cubic-bezier(0.2, 0.9, 0.2, 1);
  --reflow: 780ms;
  --font: "Handjet", "Silkscreen", monospace;
  --blur: 36px;
}

.about-page, .about-page *, .about-page *::before, .about-page *::after { box-sizing: border-box; }
.about-page { -webkit-font-smoothing: antialiased; }
.about-page { margin: 0; padding:0; overflow:clip; background: var(--ink); }
.about-page ::selection { background: #0711ff; color: var(--white); }

.about-page {
  min-height: calc(100vh - var(--about-header-height));
  min-height: calc(100dvh - var(--about-header-height));
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 300;
}

/* ── Grid ─────────────────────────────────────────────────────────── */
.about-grid {
  --gap: var(--about-border-width,1px);
  flex-shrink: 0;
  display: grid;
  height: max(0px, calc(100vh - var(--about-header-height)));
  height: max(0px, calc(100dvh - var(--about-header-height)));
  overflow: clip;
  gap: var(--gap);
  padding: var(--gap);
  padding-top: 0;
  background: #000;
  grid-template-areas:
    "A A B C C C"
    "A A D D E F"
    "G H D D I F"
    "G J J L L N"
    "K J J M M N";
  /* Tracks are written by about.about-js; these are the default-state values. */
  grid-template-columns: 1.5fr 1fr 1.2fr 1fr 0.8fr 1.1fr;
  grid-template-rows: 1.3fr 1fr 1fr 0.9fr 0.8fr;
  transition:
    grid-template-columns var(--reflow) var(--ease-reflow),
    grid-template-rows var(--reflow) var(--ease-reflow);
}
.about-grid[data-line-weight="bold"] { --gap: 6px; }
.about-grid[data-line-weight="mondrian"] { --gap: 12px; }


@media (max-width: 719.98px) {
  .about-grid {
    height: max(1400px, calc(170vh - var(--about-header-height)));
    height: max(1400px, calc(170dvh - var(--about-header-height)));
    grid-template-areas:
      "C C C"
      "A A B"
      "A A E"
      "D D H"
      "D D G"
      "I F F"
      "K F F"
      "J J L"
      "J J M"
      "N N N";
    grid-template-columns: 1fr 1fr 0.8fr;
    grid-template-rows: 0.9fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 0.9fr;
  }
}

[data-tile="A"] { grid-area: A; }
[data-area="B"] { grid-area: B; }
[data-area="C"] { grid-area: C; }
[data-tile="D"] { grid-area: D; }
[data-area="E"] { grid-area: E; }
[data-tile="F"] { grid-area: F; }
[data-area="G"] { grid-area: G; }
[data-tile="H"] { grid-area: H; }
[data-area="I"] { grid-area: I; }
[data-tile="J"] { grid-area: J; }
[data-area="K"] { grid-area: K; }
[data-area="L"] { grid-area: L; }
[data-area="M"] { grid-area: M; }
[data-area="N"] { grid-area: N; }

.about-blank { background: var(--ground); min-width: 0; min-height: 0; }

/* ── Colour tiles ─────────────────────────────────────────────────── */
.about-tile {
  position: relative;
  overflow: hidden;
  container-type: size;
  cursor: pointer;
  min-width: 0;
  min-height: 0;
  outline: none;
}
.about-tile:focus-visible { box-shadow: inset 0 0 0 3px var(--ink); }

[data-tile="A"] { background: #ff779d; color: var(--ink); }   /* Benshad — pink */
[data-tile="D"] { background: #ffed24; color: var(--ink); }   /* Enamel — yellow */
[data-tile="F"] { background: #0711ff; color: var(--white); --about-index-color:var(--white); } /* Colour — blue */
[data-tile="H"] { background: #4ac127; color: var(--ink); }   /* Everyday — lima */
[data-tile="J"] { background: #ff0004; color: var(--white); --about-index-color:var(--white); } /* Sweet names — red */
[data-tile="F"]:focus-visible, [data-tile="J"]:focus-visible { box-shadow: inset 0 0 0 3px var(--white); }

.about-tile__liquid {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 500ms linear;
}
.about-tile__liquid-inner { position: absolute; inset: -10%; pointer-events: none; }
.about-blob {
  position: absolute;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  filter: blur(var(--blur));
  will-change: transform;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: paused;
}
.about-blob--a { left: 0; top: 0; animation-name: bs-drift-a; animation-duration: 6.5s; animation-delay: 0s; }
.about-blob--b { right: 0; bottom: 0; animation-name: bs-drift-b; animation-duration: 8s; animation-delay: -2s; }
.about-blob--c { left: 20%; top: 25%; width: 50%; height: 50%; opacity: 0.85; animation-name: bs-drift-c; animation-duration: 7.2s; animation-delay: -4s; }

@keyframes bs-drift-a { 0% { transform: translate(-25%, -20%) scale(1); } 100% { transform: translate(35%, 30%) scale(1.35); } }
@keyframes bs-drift-b { 0% { transform: translate(40%, 35%) scale(1.2); } 100% { transform: translate(-30%, -15%) scale(0.85); } }
@keyframes bs-drift-c { 0% { transform: translate(10%, -35%) scale(0.9); } 100% { transform: translate(-20%, 40%) scale(1.25); } }

.about-grid[data-liquid="on"] .about-tile.about-is-hover .about-tile__liquid,
.about-grid[data-liquid="on"] .about-tile.about-is-active .about-tile__liquid { opacity: 1; }
.about-grid[data-liquid="on"] .about-tile.about-is-hover .about-blob,
.about-grid[data-liquid="on"] .about-tile.about-is-active .about-blob { animation-play-state: running; }

.about-tile__content {
  position: relative;
  height: 100%;
  padding: clamp(10px, 7cqmin, 24px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  transition: opacity 300ms linear;
}
/* While a tile is open, the other colour tiles hide their text. */
.about-grid.about-has-active .about-tile:not(.about-is-active) .about-tile__content { opacity: 0; }

.about-tile__meta {
  display: flex;
  justify-content: space-between;
  color: var(--about-index-color,#000);
  font-weight: 500;
  font-size: clamp(14px, 9cqmin, 23px);
  letter-spacing: 0.02em;
}
.about-tile__meta > .magazine-rich { flex:1; min-width:0; }
.about-tile__cue { opacity: 0; transition: opacity 200ms linear; }
.about-tile.about-is-hover .about-tile__cue { opacity: 1; }

.about-tile__text { display: flex; flex-direction: column; gap: 20px; }
/* Use the shared flow in both states; only recover unused closed-tile space. */
[data-tile="H"] .about-tile__content {
  transition:opacity 300ms linear,padding-bottom var(--reflow) var(--ease-reflow);
}
[data-tile="H"]:not(.about-is-active) .about-tile__content { padding-bottom:8px; gap:0; }
[data-tile="H"] .about-tile__text {
  transition:gap var(--reflow) var(--ease-reflow);
}
[data-tile="H"]:not(.about-is-active) .about-tile__text { gap:0; }
[data-tile="H"] .about-tile__title { transition:opacity 200ms linear,margin-top var(--reflow) var(--ease-reflow); }
.about-tile__title {
  margin: 0;
  font-weight: 400;
  font-size: clamp(18px, 14cqmin, 120px);
  line-height: 0.92;
  letter-spacing: -0.04em;
}
.about-tile__title--hero { font-size: clamp(20px, 16cqmin, 160px); }
.about-tile__title--md { font-size: clamp(18px, 12cqmin, 120px); }
.about-tile__sub { font-weight: 200; font-size: clamp(16px, 6cqmin, 40px); line-height: 1; }

.about-tile__body {
  margin: 0;
  max-width: 30ch;
  font-size: clamp(16px, 4cqmin, 20px);
  line-height: 1.5;
  text-wrap: pretty;
  /* Collapsed until the tile is opened so it never pushes headings out of small tiles. */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px);
  transition:
    max-height var(--reflow) var(--ease-reflow),
    opacity 400ms linear 240ms,
    transform var(--reflow) var(--ease-reflow);
}
.about-tile__body--wide { max-width: 32ch; }
.about-tile.about-is-active .about-tile__body { max-height: 400px; opacity: 1; transform: translateY(0); }

/* ── Title tile ───────────────────────────────────────────────────── */
.about-title {
  background: var(--ground);
  container-type: size;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: clamp(12px, 6cqmin, 24px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.about-title__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.about-title:empty { padding:0; }
.about-title__kicker { font-weight: 200; font-size: clamp(14px, min(14cqh, 6cqw), 40px); line-height: 1; }
.about-title__slogan {
  font-weight: 400;
  font-size: clamp(20px, min(24cqh, 9cqw), 72px);
  line-height: 0.92;
  letter-spacing: -0.04em;
}
.about-title__badge { display: block; flex-shrink: 0; height: 88px; width: auto; aspect-ratio: 128.47 / 90.733; }
@media (max-width: 719.98px) { .about-title__badge { height: 56px; } }

/* ── Black box / reset ────────────────────────────────────────────── */
.about-box {
  background: var(--ink);
  color: var(--about-box-foreground,var(--white));
  box-shadow: inset 0 0 0 1px #474543;
  container-type: size;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  padding: clamp(12px, 8cqmin, 24px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  cursor: default;
  outline: none;
}
.about-grid.about-has-active .about-box { cursor: pointer; }
.about-box:focus-visible { box-shadow: inset 0 0 0 3px var(--white); }

.about-box__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.about-box__icon {
  flex-shrink: 0;
  font-weight: 500;
  font-size: clamp(28px, 30cqmin, 120px);
  line-height: 0.85;
  letter-spacing: 0.02em;
  color: var(--about-box-icon-color,#a3a09d);
  transition: color 300ms linear;
}
.about-grid.about-has-active .about-box__icon { color: var(--about-box-icon-color,var(--white)); }
.about-box__index {
  font-weight: 500;
  font-size: clamp(16px, 9cqmin, 23px);
  line-height: 1;
  letter-spacing: 0.02em;
}
.about-tile__meta, .about-box__icon, .about-box__index { font-family:"Handjet",monospace; }
@media (hover:hover) {
  .about-tile__title, .about-box__title, .about-box__hint { opacity:0; transition:opacity 200ms linear; }
  .about-tile:hover .about-tile__title,
  .about-tile.about-is-active .about-tile__title,
  .about-box:hover .about-box__title,
  .about-box:hover .about-box__hint,
  .about-grid.about-has-active .about-box__title,
  .about-grid.about-has-active .about-box__hint { opacity:1; }
}
.about-box__bottom { display: flex; flex-direction: column; gap: 8px; }
.about-grid:not(.about-has-active) .about-box .about-return-word { visibility:hidden; }
.about-box__title { font-weight: 400; font-size: clamp(16px, 9cqmin, 20px); line-height: 1; letter-spacing: -0.02em; }
.about-box__hint {
  font-weight: 500;
  font-size: clamp(13px, 7cqmin, 16px);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--about-box-foreground,#c4c2c0);
  transition: color 300ms linear,opacity 200ms linear;
}
.about-grid.about-has-active .about-box__hint { color: var(--about-box-foreground,var(--white)); }



/* ── Persian (RTL) ────────────────────────────────────────────────
   The grid mirrors automatically under dir="rtl". Arabic script needs
   zero tracking (spacing breaks the joins) and taller line boxes for dots. */
/* Handjet's Arabic glyphs don't join well, so Persian uses the design system's core face. */
html[dir="rtl"] .about-page { --font: "IBM Plex Sans Arabic", "Adapter Arabic Text", sans-serif; }
html[dir="rtl"] .about-page * { letter-spacing: 0 !important; }
html[dir="rtl"] .about-tile__title,
html[dir="rtl"] .about-title__slogan { line-height: 1.15; }
html[dir="rtl"] .about-tile__sub,
html[dir="rtl"] .about-title__kicker,
html[dir="rtl"] .about-box__title { line-height: 1.3; }
html[dir="rtl"] .about-tile__body { line-height: 1.7; }
html[dir="rtl"] .about-box__hint { line-height: 1.5; }


.about-page { min-width:0; -webkit-font-smoothing:antialiased; }
.about-page main { margin:0; width:100%; max-width:none; }
.about-page .about-title__badge { max-width:none; }
.about-page .about-tile { cursor:pointer !important; }
.about-page .about-grid.about-has-active .about-box { cursor:pointer !important; }

body.about-standalone { --about-header-height:104px; margin:0; background:#1a1a1a; }
.about-standalone > [data-site-header]:empty { height:var(--about-header-height); background:var(--background); }
.about-page, .about-page * { caret-color:transparent !important; }
@media (max-width: 992px) { body.about-standalone { --about-header-height:92px; } }
@media (max-width: 760px) { body.about-standalone { --about-header-height:var(--mobile-header-height); } }
.about-page .about-box { cursor:pointer; }
.about-grid:not(.about-content-ready) .about-tile__content,
.about-grid:not(.about-content-ready) .about-box__top,
.about-grid:not(.about-content-ready) .about-box__bottom { visibility:hidden; }
.about-tile__title, .about-tile__sub, .about-tile__body,
.about-box__title, .about-box__hint { white-space:pre-wrap; }
.about-page .magazine-rich p { margin:0; }
.about-page .about-tile__body { max-width:100%; text-wrap:wrap; }

/* Fit text inside the existing tracks, including editor-defined font sizes. */
.about-tile__meta, .about-tile__text,
.about-box__top, .about-box__bottom { flex-shrink:0; min-width:0; overflow-wrap:anywhere; }
.about-tile.about-is-active .about-tile__body { max-height:var(--about-body-height,400px); }
.about-fit-measure { position:fixed; left:-100000px; top:0; visibility:hidden; pointer-events:none; }
.about-fit-measure .about-grid, .about-fit-measure .about-grid * { transition:none !important; animation:none !important; }
@font-face { font-family:Handjet; font-style:normal; font-weight:100 900; src:url("../../fonts/Handjet-Variable.08c2bb7a8ffe.woff2") format("woff2"); }