/* ==========================================================================
   MUHCINE / base
   Tokens, reset, page chrome (header, nav, footer bar), theme, RTL.
   ========================================================================== */

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

html,
body,
h1,
h2,
h3,
p,
figure,
ul,
ol,
li,
button,
input,
textarea {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

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

/* --- tokens --------------------------------------------------------------- */

:root {
  --bg: #ffffff;
  --fg: #0b0b0b;
  --muted: #8c8c8c;
  --line: #e4e4e4;
  --panel: #f4f4f4;
  --accent: #0b0b0b;

  --font: "Helvetica Neue", Helvetica, Inter, "Segoe UI", Arial, sans-serif;
  --font-ar: "Geeza Pro", "SF Arabic", "Noto Naskh Arabic", "Segoe UI", Tahoma, serif;

  /* Measured from the edge of the window, so the first part of the top strip
     is hidden behind the header. It has to be taller than the header for any
     of it to show. */
  --blur-top: 170px;    /* the soft edge under the header */
  --blur-bottom: 130px; /* and above the bar */
  --blur-strength: 2;   /* how hard the far end of each strip is blurred */
  --blur-layers: 5;     /* how many steps the blur is built from */

  --cursor-size: 12px;  /* the pointer label */
  --lab-text: 3.4vw;    /* the words in the middle of the Lab */
  --page-top: 0px;      /* room above the page content, on top of the header */
  --index-top: 5%;      /* room above the index */

  --head-h: 56px;     /* the header itself */
  --chrome-h: 56px;   /* everything the page has to clear at the top */
  --bar-h: 56px;
  --pad: clamp(16px, 3vw, 40px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body.has-filters {
  --chrome-h: 110px;
}

@media (max-width: 720px) {
  :root {
    --head-h: 92px;
    --chrome-h: 92px;
  }

  body.has-filters {
    --chrome-h: 148px;
  }
}

html[data-theme="dark"] {
  --bg: #0b0b0b;
  --fg: #f2f2f2;
  --muted: #7a7a7a;
  --line: #232323;
  --panel: #151515;
  --accent: #f2f2f2;
}

/* The system's dark setting is deliberately not followed. Every visit starts
   on white, and dark is only ever reached by pressing the moon. */

/* Turning the page over. The class is on for as long as the change takes and
   is then taken off again, so this never gets in the way of an ordinary
   hover or a tween. It has to be forceful to reach past the transitions the
   parts already carry. */
html.theme-shift,
html.theme-shift *,
html.theme-shift *::before,
html.theme-shift *::after {
  transition: background-color 0.5s var(--ease),
              color 0.5s var(--ease),
              border-color 0.5s var(--ease),
              outline-color 0.5s var(--ease),
              fill 0.5s var(--ease),
              stroke 0.5s var(--ease),
              box-shadow 0.5s var(--ease) !important;
}

/* --- page ----------------------------------------------------------------- */

html,
body {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background 0.4s ease, color 0.4s ease;
}

html[lang="ar"] body {
  font-family: var(--font-ar);
}

body.loading .fade-in {
  opacity: 0;
}

.fade-in {
  opacity: 1;
  transition: opacity 0.6s var(--ease);
}

/* Leaving and arriving use the same curve, so the two halves of a page
   change read as one movement rather than two fades. */
body.is-leaving {
  opacity: 0;
  transform: translate3d(0, -6px, 0);
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
  pointer-events: none;
}

/* Only the page itself lifts. A transform on every .fade-in would reparent
   the fixed layers the Store and the Lab hang off. */
body.loading .page,
body.loading .work-main {
  transform: translate3d(0, 8px, 0);
}

.page,
.work-main {
  transition: transform 0.6s var(--ease);
}

.u-mono {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- header --------------------------------------------------------------- */

.chrome {
  position: fixed;
  inset-inline: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: var(--pad);
  padding: 0 var(--pad);
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.chrome--top {
  top: 0;
  height: var(--head-h);
}

/* Three slots: controls at the start, the switch in the middle, the count at
   the end. No rule above it, the page carries the edge. */
.chrome--bottom {
  bottom: 0;
  height: var(--bar-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.bar-start {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bar-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.bar-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  color: var(--muted);
}

.bar-end b {
  color: var(--fg);
  font-weight: 500;
}

@media (max-width: 720px) {
  .chrome--top {
    flex-wrap: wrap;
    align-content: center;
    gap: 10px var(--pad);
  }

  .chrome--top .nav {
    order: 3;
    flex: 1 0 100%;
    justify-content: space-between;
    margin: 0;
  }

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

/* A menu link with no address yet stays in place but does not pretend. */
.nav a.is-unset {
  opacity: 0.45;
  cursor: default;
}

.nav a.is-unset::after {
  display: none;
}

.wordmark {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: lowercase;
  white-space: nowrap;
}

.nav {
  display: flex;
  gap: 5px;
  margin-inline: auto;
}

.nav a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--muted);
  padding: 4px 0;
  position: relative;
  transition: color 0.3s ease;
}

.nav a::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--fg);
  transition: width 0.4s var(--ease);
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--fg);
}

.nav a[aria-current="page"]::after,
.nav a:hover::after {
  width: 100%;
}

.chrome__end {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}

.lang {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* The three codes are folded away behind the planet and slide out when it is
   pressed, so the header carries two round buttons and nothing else. */
.lang__list {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-width 0.45s var(--ease), opacity 0.3s ease, margin 0.45s var(--ease);
}

.lang[data-open="true"] .lang__list {
  max-width: 120px;
  opacity: 1;
  pointer-events: auto;
  margin-inline-end: 2px;
}

.lang__list button {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--muted);
  transition: color 0.25s ease;
  white-space: nowrap;
}

.lang__list button[aria-pressed="true"] {
  color: var(--fg);
}

.theme-toggle,
.lang-toggle {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--fg);
  line-height: 0;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.theme-toggle svg,
.lang-toggle svg {
  width: 14px;
  height: 14px;
  display: block;
}

.theme-toggle:hover,
.lang-toggle:hover,
.lang[data-open="true"] .lang-toggle {
  border-color: var(--fg);
}

/* --- bottom bar segmented control ---------------------------------------- */

.seg {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
}

.bar-hint {
  color: var(--muted);
}

/* The mark a pill can carry. It waits until the screen is too narrow for the
   word, then takes its place. */
.pill-mark {
  display: none;
  position: relative;
  z-index: 1;
  line-height: 0;
}

.pill-mark svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* Grid and Carousel read as marks at every size. The filters keep their
   words, so the default above still stands for them. */
.seg .pill-mark {
  display: block;
}

.seg .label-stack {
  display: none;
}

.seg .pill {
  padding: 8px 16px;
}

.bar-credit {
  color: var(--muted);
  white-space: nowrap;
}

/* On a phone the bar has room for one line, and it is the credit. */
@media (max-width: 700px) {
  .bar-aside {
    display: none;
  }
}

@media (max-width: 560px) {
  .bar-credit {
    font-size: 9px;
    letter-spacing: 0.08em;
  }
}

@media (max-width: 720px) {
  .bar-hint {
    display: none;
  }
}

/* --- bar controls --------------------------------------------------------- */

.bar-nav {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 13px;
  line-height: 1;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.bar-nav:hover {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}

.bar-link {
  font-size: 11px;
  font-weight: 600;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--fg);
}

[data-bar][hidden] {
  display: none;
}

/* --- shared page shell ---------------------------------------------------- */

/* The header floats over the page, so the top padding is the header's own
   height plus whatever extra room is asked for. Zero extra by default. */
.page {
  padding: calc(var(--chrome-h) + var(--page-top)) var(--pad) calc(var(--bar-h) + var(--pad));
  min-height: 100vh;
}

.display {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.95;
  font-size: clamp(30px, 6.4vw, 86px);
}

.eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}

/* --- RTL ------------------------------------------------------------------ */

html[dir="rtl"] .u-mono,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .seg button,
html[dir="rtl"] .lang button {
  letter-spacing: 0;
}

html[dir="rtl"] .display {
  letter-spacing: 0;
  line-height: 1.15;
}

/* --- utility -------------------------------------------------------------- */

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

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}