/* Zerin. Near-black, antique gold, ivory. Pieces melt into the page; names carry the design. */
:root {
  --ink: #141210;
  --panel: #1b1714;
  --gold: #c6a25e;
  --gold-light: #e3c98f;
  --ivory: #f2ece1;
  --soft: #d9d0c0;
  --muted: #a89d8b;
  --line: rgba(198, 162, 94, 0.22);
  --red: #3a0a0e;
  --serif: "Cormorant Garamond", "Noto Naskh Arabic", Georgia, serif;
  --pad: clamp(1.25rem, 4.5vw, 4.5rem);
  --head: 5.25rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
:lang(ar), :lang(ckb) { line-height: 1.85; }
html:lang(ar) body, html:lang(ckb) body { font-size: 1.0625rem; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, ol, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
html[data-view="home"] #view-pieces, html[data-view="home"] #view-maker,
html[data-view="pieces"] #view-home, html[data-view="pieces"] #view-maker,
html[data-view="maker"] #view-home, html[data-view="maker"] #view-pieces { display: none; }
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 1rem; top: -4rem; background: var(--gold); color: var(--ink); padding: 0.5rem 1rem; z-index: 20; }
.skip:focus { top: 1rem; }
#main:focus { outline: none; }
.soft { color: var(--soft); }

/* ---------- header ---------- */
.head {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  height: var(--head);
  padding-inline: var(--pad);
}
.wordmark { display: block; }
.wordmark img { height: 2.35rem; width: auto; }
.head__nav, .head__langs { display: flex; gap: clamp(1rem, 2.4vw, 2.25rem); align-items: baseline; }
.head__langs { justify-content: flex-end; }
.head__nav a, .head__langs button {
  background: none; border: 0; padding: 0.35rem 0; cursor: pointer;
  text-decoration: none; color: var(--soft); font-size: 1.05rem;
  border-bottom: 1px solid transparent;
}
.head__nav a:hover, .head__langs button:hover { color: var(--ivory); }
.head__nav a[aria-current], .head__langs button[aria-pressed="true"] { color: var(--ivory); border-bottom-color: var(--gold); }

/* ---------- links and buttons ---------- */
.go {
  display: inline-block;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--gold-light);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  text-decoration-color: var(--line);
  transition: text-decoration-color 0.2s;
}
:lang(ar) .go, :lang(ckb) .go { font-style: normal; font-size: 1.1rem; }
.go:hover { text-decoration-color: var(--gold-light); }
.go--small { font-size: 1.05rem; color: var(--soft); }
.go--button { background: none; border: 0; padding: 0; cursor: pointer; }
.btn {
  display: inline-block;
  padding: 0.85rem 1.9rem;
  border: 1px solid var(--gold);
  color: var(--ivory);
  text-decoration: none;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  transition: background 0.2s, color 0.2s;
}
.btn:hover { background: var(--gold); color: var(--ink); }
.btn--send { display: block; text-align: center; background: var(--gold); color: var(--ink); font-weight: 600; margin-top: 2.25rem; }
.btn--send:hover { background: var(--gold-light); }
.after-send { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; margin-top: 0.9rem; }
.hint { color: var(--muted); font-size: 1rem; line-height: 1.45; margin-top: 0.75rem; }
:lang(ar) .hint, :lang(ckb) .hint { font-size: 0.92rem; line-height: 1.8; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  margin-top: calc(var(--head) * -1);
  min-height: min(92svh, 56rem);
  display: flex;
  align-items: center;
  padding: var(--head) var(--pad) 3rem;
  overflow: hidden;
}
.hero__img {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(62vw, 64rem);
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 38%), linear-gradient(to top, transparent, #000 22%);
  mask-image: linear-gradient(to right, transparent, #000 38%), linear-gradient(to top, transparent, #000 22%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
[dir="rtl"] .hero__img {
  -webkit-mask-image: linear-gradient(to left, transparent, #000 38%), linear-gradient(to top, transparent, #000 22%);
  mask-image: linear-gradient(to left, transparent, #000 38%), linear-gradient(to top, transparent, #000 22%);
}
.hero__text { position: relative; max-width: 34rem; }
.hero__title {
  font-size: clamp(3.1rem, 7.4vw, 6.75rem);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.012em;
}
:lang(ar) .hero__title, :lang(ckb) .hero__title { line-height: 1.35; font-weight: 400; font-size: clamp(2.4rem, 5.4vw, 4.5rem); letter-spacing: 0; }
.hero__lede { margin-top: 1.75rem; font-size: 1.35rem; color: var(--soft); max-width: 24rem; }
.hero__links { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.hero__tag, .plate__tag {
  position: absolute; bottom: 1.25rem; inset-inline-end: var(--pad);
  font-style: italic; font-size: 0.95rem; color: var(--muted);
}
:lang(ar) .hero__tag, :lang(ckb) .hero__tag, :lang(ar) .plate__tag, :lang(ckb) .plate__tag,
:lang(ar) .order__list li::before, :lang(ckb) .order__list li::before { font-style: normal; }

/* ---------- name lockups ---------- */
.sub { color: var(--muted); font-size: 1.05rem; }
.lock { font-weight: 300; line-height: 0.9; margin-top: 0.4rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1em 0.45em; direction: ltr; }
[dir="rtl"] .lock { justify-content: flex-end; }
.lock__name { font-size: clamp(4rem, 9.2vw, 8.25rem); font-style: italic; letter-spacing: -0.02em; }
.lock__script { font-family: "Noto Naskh Arabic", serif; font-size: clamp(1.4rem, 2.6vw, 2.25rem); color: var(--gold); line-height: 1.6; font-weight: 400; }
.lock__meaning { font-style: italic; font-size: 1.45rem; color: var(--gold-light); margin-top: 0.9rem; }
:lang(ar) .lock__meaning, :lang(ckb) .lock__meaning { font-style: normal; font-size: 1.25rem; }
.lock--page .lock__name { font-size: clamp(3.4rem, 6.2vw, 6rem); }

/* ---------- home spreads ---------- */
/* pictures carry their own soft edge (baked in), so nothing is blended or masked while the page moves */
#view-home { overflow-x: clip; }
.spread {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  column-gap: 1.5rem;
  padding: clamp(1.5rem, 3.5vw, 3.5rem) var(--pad);
}
.spread__media { grid-row: 1; display: block; }
.spread__media img { width: 100%; }
.spread__text { grid-row: 1; position: relative; z-index: 1; }
.spread__text .soft { max-width: 27rem; margin-top: 1.4rem; }
.spread__text .go { margin-top: 1.6rem; }
.spread--tirej .spread__media { grid-column: 1 / span 7; }
.spread--tirej .spread__text { grid-column: 7 / -1; }
.spread--hetaw .spread__media { grid-column: 8 / span 5; }
.spread--hetaw .spread__text { grid-column: 2 / span 7; }
.spread--aquila .spread__media { grid-column: 1 / span 6; }
.spread--aquila .spread__text { grid-column: 7 / -1; }
.spread--hanar .spread__media { grid-column: 7 / span 6; }
.spread--hanar .spread__text { grid-column: 2 / span 7; }
.spread--maker { border-top: 1px solid var(--line); margin-top: clamp(2rem, 5vw, 5rem); }
.spread--hanar { padding-block: clamp(3rem, 6vw, 6rem); }
.spread--maker .spread__media { grid-column: 2 / span 5; }
.spread--maker .spread__text { grid-column: 8 / -1; }
.spread__title { font-size: clamp(2.4rem, 4.6vw, 4rem); font-weight: 300; line-height: 1.05; }
:lang(ar) .spread__title, :lang(ckb) .spread__title { line-height: 1.5; font-weight: 400; font-size: clamp(2rem, 3.6vw, 3rem); }

/* ---------- scroll motion: js/motion.js moves these; only transform and opacity change ---------- */
.motion .spread__media, .motion .spread__text, .motion .hero__img, .motion .hero__text { will-change: transform, opacity; }
.motion .spread .lock__name, .motion .spread__title { display: inline-block; will-change: transform; }

/* ---------- ordering ---------- */
.order { padding: clamp(3rem, 7vw, 6rem) var(--pad); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; }
.order__title { grid-column: 1 / span 4; font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 300; line-height: 1.1; }
.order__list { grid-column: 6 / -1; counter-reset: step; }
.order__list li {
  counter-increment: step;
  display: grid; grid-template-columns: 2.5rem 9rem 1fr; gap: 0 1rem; align-items: baseline;
  padding: 1.1rem 0; border-bottom: 1px solid var(--line);
}
.order__list li:first-child { padding-top: 0; }
.order__list li::before { content: counter(step); color: var(--gold); font-style: italic; font-size: 1.3rem; }
.order__list h3 { font-size: 1.3rem; font-weight: 500; }
.order__list p { color: var(--soft); }

/* ---------- pieces and maker: the bench ---------- */
.names { display: flex; flex-wrap: wrap; gap: 0.25rem clamp(1.25rem, 3vw, 3rem); padding: 1rem var(--pad) 0; }
.names a { font-style: italic; font-size: clamp(1.35rem, 2.2vw, 1.9rem); font-weight: 400; color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; direction: ltr; }
.names a:hover { color: var(--ivory); }
.names a[aria-current] { color: var(--gold-light); border-bottom-color: var(--gold); }
.bench { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 4.5rem); padding: 1.5rem var(--pad) 5rem; align-items: start; }
.bench__stage { position: sticky; top: 1.5rem; }
.bench__panel { max-width: 31rem; padding-top: 0.5rem; }
.bench__panel > .soft { margin-top: 1.25rem; }
.page-title { font-size: clamp(3rem, 5.4vw, 5rem); font-weight: 300; font-style: italic; line-height: 1; letter-spacing: -0.015em; }
:lang(ar) .page-title, :lang(ckb) .page-title { font-style: normal; font-weight: 400; line-height: 1.4; font-size: clamp(2.2rem, 4vw, 3.4rem); letter-spacing: 0; }

.plate { position: relative; height: min(78vh, 52rem); display: flex; align-items: center; justify-content: center; }
.plate img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.plate--trio { display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: 1fr 1fr; gap: 0.5rem; }
.plate--trio img { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.plate--trio img:first-child { grid-row: 1 / span 2; }
.plate__tag { inset-inline-end: 0.75rem; bottom: 0.5rem; }
.plate img { cursor: zoom-in; }
.zoom { border: 0; padding: 0; background: var(--ink); width: 100vw; height: 100dvh; max-width: none; max-height: none; }
.zoom::backdrop { background: var(--ink); }
.zoom img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-out; }
.zoom__close { position: absolute; top: 1rem; inset-inline-end: 1.25rem; background: none; border: 0; border-bottom: 1px solid var(--gold); color: var(--ivory); padding: 0.25rem 0; cursor: pointer; font-size: 1.1rem; }
.plate img { cursor: zoom-in; }
.zoom { border: 0; padding: 0; background: var(--ink); width: 100vw; height: 100dvh; max-width: none; max-height: none; }
.zoom::backdrop { background: var(--ink); }
.zoom img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-out; }
.zoom__close { position: absolute; top: 1rem; inset-inline-end: 1.25rem; background: none; border: 0; border-bottom: 1px solid var(--gold); color: var(--ivory); padding: 0.25rem 0; cursor: pointer; font-size: 1.1rem; }
/* Hanar sits on red silk: feather the silk into the page so it glows out of the dark instead of sitting in a box */
.spread--hanar .spread__media img, .plate--red:not(.plate--trio) img {
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 34%, rgba(0, 0, 0, 0.55) 62%, transparent 86%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 34%, rgba(0, 0, 0, 0.55) 62%, transparent 86%);
}
.plate--red.plate--trio img {
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, rgba(0, 0, 0, 0.6) 66%, transparent 96%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, rgba(0, 0, 0, 0.6) 66%, transparent 96%);
}
.thumbs { display: flex; gap: 0.6rem; justify-content: center; margin-top: 0.75rem; }
.thumbs button { width: 3.5rem; height: 3.5rem; padding: 0; border: 1px solid transparent; background: none; cursor: pointer; opacity: 0.6; }
.thumbs button[aria-pressed="true"] { border-color: var(--gold); opacity: 1; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }

.stage {
  position: relative;
  height: min(78vh, 52rem);
  background: radial-gradient(ellipse 60% 55% at 50% 55%, #2a221b 0%, #1a1613 55%, var(--ink) 100%);
}
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.stage canvas:active { cursor: grabbing; }
.stage__note { text-align: center; }
.stage__fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; text-align: center; margin: 0; }

/* ---------- choices ---------- */
.row { margin-top: 1.9rem; }
.row__head { display: flex; gap: 0.75rem; align-items: baseline; width: 100%; margin-bottom: 0.7rem; }
.row__label { color: var(--muted); font-size: 1.02rem; }
.row__value { font-style: italic; color: var(--ivory); }
:lang(ar) .row__value, :lang(ckb) .row__value { font-style: normal; }
.words, .discs, .shapes { display: flex; flex-wrap: wrap; }
.words { gap: 0.35rem 1.6rem; }
.discs { gap: 0.8rem; }
.shapes { gap: 0.5rem; }
.words input, .discs input, .shapes input { position: absolute; opacity: 0; pointer-events: none; }
.words label, .discs label, .shapes label { cursor: pointer; display: block; }
.word { display: block; padding: 0.15rem 0; font-size: 1.2rem; color: var(--soft); border-bottom: 1px solid transparent; }
:lang(ar) .word, :lang(ckb) .word { font-size: 1.08rem; }
.word:hover { color: var(--ivory); }
input:checked + .word { color: var(--ivory); border-bottom-color: var(--gold); }
.disc {
  display: block; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 -3px 6px rgba(0, 0, 0, 0.35), inset 0 2px 3px rgba(255, 255, 255, 0.25);
  transition: transform 0.15s;
}
.disc:hover { transform: scale(1.06); }
input:checked + .disc { box-shadow: 0 0 0 3px var(--ink), 0 0 0 4px var(--gold), inset 0 -3px 6px rgba(0, 0, 0, 0.35), inset 0 2px 3px rgba(255, 255, 255, 0.25); }
.shape { display: block; width: 3rem; height: 3rem; padding: 0.45rem; border-bottom: 1px solid transparent; }
.shape svg { width: 100%; height: 100%; display: block; }
.shape polygon { fill: none; stroke: var(--muted); stroke-width: 0.9; stroke-linejoin: round; }
.shape:hover polygon { stroke: var(--ivory); }
input:checked + .shape { border-bottom-color: var(--gold); }
input:checked + .shape polygon { stroke: var(--gold-light); fill: rgba(198, 162, 94, 0.14); }
input:focus-visible + .word, input:focus-visible + .disc, input:focus-visible + .shape { outline: 2px solid var(--gold-light); outline-offset: 3px; }

.row--fields { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.row--inline { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: flex-end; margin-top: 1.1rem; }
.row--inline .row { margin-top: 0; }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field--grow { flex: 1 1 12rem; }
.input {
  background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 0.45rem 0; min-width: 0; width: 100%; font-size: 1.15rem;
}
.input::placeholder { color: #94897a; font-style: italic; }
:lang(ar) .input::placeholder, :lang(ckb) .input::placeholder { font-style: normal; }
.input:focus { outline: none; border-bottom-color: var(--gold-light); }
select.input { padding-inline-end: 1.25rem; cursor: pointer; }
select.input option { background: var(--panel); color: var(--ivory); }
textarea.input { border: 1px solid var(--line); padding: 0.6rem 0.75rem; margin-top: 0.75rem; resize: vertical; }
.input--short { width: 7rem; }
.input--letters { width: 6.5rem; font-size: 1.5rem; letter-spacing: 0.2em; text-align: center; }
.more { margin-top: 1.6rem; }
.more--tight { margin-top: 0.9rem; }
.more summary { cursor: pointer; color: var(--soft); font-size: 1.05rem; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.3em; list-style: none; width: fit-content; }
.more summary::-webkit-details-marker { display: none; }
.more summary:hover { color: var(--ivory); }
.dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.5rem; margin-top: 1rem; font-size: 1.05rem; }
.dl dt { color: var(--muted); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 2.5rem var(--pad) 3rem; display: grid; grid-template-columns: auto 1fr; gap: 0.75rem 3rem; align-items: baseline; }
.wordmark--foot { height: 1.7rem; width: auto; }
.foot__line { color: var(--muted); }
.foot__links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem 2.25rem; font-size: 1.05rem; }
.foot__links a { color: var(--soft); text-decoration: none; }
.foot__links a:hover { color: var(--gold-light); }

/* ---------- tablets and phones ---------- */
@media (max-width: 959px) {
  :root { --head: 6.75rem; }
  .head { grid-template-columns: 1fr auto; grid-template-rows: auto auto; height: auto; padding-block: 1rem 0.75rem; row-gap: 0.4rem; }
  .wordmark { grid-column: 1; grid-row: 1; justify-self: start; }
  .wordmark img { height: 2rem; }
  .head__langs { grid-column: 2; grid-row: 1; gap: 0.9rem; }
  .head__nav { grid-column: 1 / -1; grid-row: 2; gap: 1.5rem; }
  .head__nav a, .head__langs button { font-size: 1rem; }

  .hero { display: block; min-height: 0; padding: 0 0 3rem; }
  .hero__img, [dir="rtl"] .hero__img {
    position: relative;
    width: 100%;
    height: 68svh;
    min-height: 24rem;
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 30%);
    mask-image: linear-gradient(to top, transparent 0, #000 30%);
    object-position: 50% 70%;
  }
  .hero__text { padding-inline: var(--pad); margin-top: -2.5rem; }
  .hero__tag { display: none; }

  .spread { display: block; padding-block: 2.5rem; }
  .spread__media { max-width: 30rem; margin-inline: auto; }
  .spread__text { margin-top: -1.5rem; }
  .spread--hanar .spread__text, .spread--maker .spread__text { margin-top: 1.5rem; }
  .order { display: block; }
  .order__list { margin-top: 1.75rem; }
  .order__list li { grid-template-columns: 2rem 1fr; }
  .order__list p { grid-column: 2; }

  .bench { display: block; padding-top: 0.75rem; }
  .bench__stage { top: 0; z-index: 5; background: var(--ink); margin-inline: calc(var(--pad) * -1); }
  .plate, .stage { height: 42svh; min-height: 230px; }
  .thumbs, .stage__note { display: none; }
  .bench__panel { max-width: none; padding-top: 1.25rem; }
  .foot { display: block; }
  .foot__line { margin: 0.5rem 0 1rem; }
}
@media (max-width: 480px) {
  .lock__name { font-size: 4rem; }
  .lock--page .lock__name { font-size: 3.1rem; }
  .words { gap: 0.3rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}