@font-face {
  font-family: Gulzar;
  src: url("gulzar-arabic.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url("vazirmatn-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url("vazirmatn-extrabold.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --night: #17130f;
  --panel: #211a14;
  --paper: #f1e6ce;
  --ink: #302319;
  --text: #f6ebd5;
  --muted: #c2b29a;
  --gold: #e5bc7a;
  --rule: #4d3a2a;
  --max-width: 74rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font: 1rem/1.9 Vazirmatn, Tahoma, sans-serif;
}
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3, strong { font-weight: 800; }
h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.35; }
h3 { line-height: 1.55; }
img { display: block; max-inline-size: 100%; }
a { color: inherit; text-decoration: none; }
a, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
  border-radius: .25rem;
}
section[id] { scroll-margin-block-start: 1.5rem; }
.container { inline-size: min(100% - 2 * var(--gutter), var(--max-width)); margin-inline: auto; }

.skip-link {
  position: fixed;
  z-index: 5;
  inset-block-start: .75rem;
  inset-inline-start: 1rem;
  padding: .5rem 1rem;
  color: var(--ink);
  background: var(--paper);
  transform: translateY(-180%);
}
.skip-link:focus { transform: none; }

.site-header { border-bottom: 1px solid var(--rule); }
.header-inner, .footer-inner {
  min-block-size: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-block-size: 44px;
  font-size: 1.28rem;
  font-weight: 800;
  white-space: nowrap;
}
.brand img { object-fit: contain; }
.site-header nav { display: flex; gap: clamp(1rem, 3.3vw, 3rem); }
.site-header nav a, .site-footer a { display: inline-flex; align-items: center; min-block-size: 44px; }
.site-header nav a, .footer-nav a { color: var(--muted); font-size: .9rem; }
.site-header nav a:hover, .footer-nav a:hover { color: var(--text); }
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-block-size: 44px;
  border: 1px solid #775b3a;
  border-radius: .5rem;
  padding: .35rem .9rem;
  color: var(--gold);
  font-size: .87rem;
  white-space: nowrap;
}
.header-cta:hover { background: var(--panel); }

.hero {
  min-block-size: 36rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5.25rem);
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--gold);
  font-size: .88rem;
}
.spark { font-size: 1.12rem; }
.hero h1 {
  margin-block: 1rem 1.1rem;
  font-size: clamp(2.25rem, 4.55vw, 4.7rem);
  line-height: 1.24;
}
.hero h1 em {
  color: var(--gold);
  display: block;
  margin-block-start: .08em;
  font: 400 1.12em/1.42 Gulzar, Vazirmatn, Tahoma, sans-serif;
  white-space: nowrap;
}
.hero-lead { max-inline-size: 28rem; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.14rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-block-start: 1.8rem; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-block-size: 3.25rem;
  padding: .55rem 1.1rem;
  border: 1px solid transparent;
  border-radius: .55rem;
  font-weight: 800;
  font-size: .92rem;
  text-align: center;
  transition: background-color .18s, border-color .18s;
}
.button-gold { background: var(--gold); color: #25180d; }
.button-gold:hover { background: #f3d09a; }
.button-gold:focus-visible { outline-color: var(--gold); }
.button-quiet { border-color: var(--rule); color: var(--text); }
.button-quiet:hover { border-color: var(--gold); background: var(--panel); }
.hero-note { margin-block-start: .85rem; color: var(--muted); font-size: .78rem; }
.hero-art { position: relative; margin-inline-start: .75rem; }
.hero-frame {
  position: relative;
  overflow: hidden;
  padding: .45rem;
  border: 1px solid #735437;
  border-radius: 48% 48% .65rem .65rem / 22% 22% .65rem .65rem;
  background: #271c13;
}
.hero-photo {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1.12;
  object-fit: cover;
  object-position: center 46%;
  border-radius: inherit;
}
.hero-frame::after {
  content: "";
  position: absolute;
  inset: .45rem;
  border-radius: inherit;
  background: linear-gradient(0deg, #100a07cb, transparent 27%);
  pointer-events: none;
}
.frame-corner {
  position: absolute;
  inset-block-start: 1.3rem;
  inset-inline-start: 50%;
  transform: translateX(50%);
  color: #f1d3a2;
  font-size: 1.35rem;
}
.hero-frame figcaption {
  position: absolute;
  z-index: 1;
  inset-block-end: 1.1rem;
  inset-inline-end: 1.5rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--text);
  font-size: .78rem;
}
.caption-rule { inline-size: 1.6rem; block-size: 1px; background: var(--gold); }
.hero-ticket {
  position: absolute;
  z-index: 2;
  inset-block-end: 2.5rem;
  inset-inline-start: -.95rem;
  padding: .5rem 1rem .6rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid #a88457;
  border-radius: .28rem;
  box-shadow: 0 .45rem 1.7rem #12090066;
  transform: rotate(5deg);
}
.hero-ticket span { color: #694b35; font-size: .72rem; }
.hero-ticket p { font-weight: 800; font-size: .91rem; }
.hero-ticket i { font-size: .55rem; font-style: normal; color: #8f3d28; margin-inline: .12rem; }

.how-section { padding-block: clamp(3.5rem, 6vw, 5.8rem); background: var(--paper); color: var(--ink); }
.how-section .eyebrow { color: #843c28; }
.section-intro h2, .faq-grid h2 { margin-block: .5rem .6rem; }
.section-intro > p:last-child, .steps p { color: #5b4937; }
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  list-style: none;
  padding: 0;
  margin-block: 2.25rem 0;
}
.steps li { border-block-start: 1px solid #c1a783; padding-block-start: 1rem; }
.step-number { color: #843c28; font-size: 1.25rem; font-weight: 800; }
.steps h3 { margin-block: .45rem .4rem; font-size: 1.16rem; }
.steps p { font-size: .94rem; }

.sample-section {
  background: radial-gradient(ellipse at 21% 55%, #40291c 0, var(--night) 64%);
  padding-block: clamp(3.5rem, 7vw, 7rem);
}
.sample-grid, .keepsakes, .faq-grid { display: grid; align-items: center; }
.sample-grid { grid-template-columns: 5fr 6fr; gap: clamp(2rem, 7vw, 7rem); }
.sample-copy h2, .keepsakes-copy h2 { margin-block: .65rem 1rem; }
.sample-copy > p:not(.eyebrow), .feature-list dd, .faq-list p, .availability p { color: var(--muted); }
.sample-copy > p:not(.eyebrow) { max-inline-size: 25rem; }
.word-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 0;
  margin: 1.15rem 0;
  list-style: none;
}
.word-list li {
  color: var(--gold);
  padding: .15rem .85rem;
  border: 1px solid #765533;
  border-radius: 10rem;
  background: #281d15;
}
.sample-note { font-size: .83rem; }
.sample-paper {
  padding: clamp(.55rem, 1vw, .8rem);
  border-radius: .5rem;
  background: linear-gradient(143deg, #f7edda, #e7d2af);
  color: var(--ink);
  box-shadow: 0 1.2rem 3.6rem #0e08064d;
}
.paper-content {
  border: 1px solid #ad8c65;
  border-radius: .25rem;
  padding: clamp(1rem, 3vw, 2rem);
  text-align: center;
}
.paper-kicker, .attribution { color: #6d4e32; font-size: .77rem; }
.paper-kicker span { margin-inline: .35rem; color: #88452a; }
.paper-content h3 { margin-block: .45rem .75rem; font-size: clamp(1.6rem, 3vw, 2.35rem); }
.poem { font-size: clamp(1rem, 2vw, 1.33rem); line-height: 2.05; }
.poem span { display: block; }
.poem mark { color: #8a3220; background: transparent; font-weight: 800; }
.attribution { margin-block: .75rem .95rem; }
details { border-block-start: 1px solid var(--rule); }
summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  min-block-size: 3.6rem;
  padding-block: .45rem;
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 1.35rem; font-weight: 400; }
details[open] > summary::after { content: "−"; }
details p { padding-block-end: 1rem; }
.interpretation { border-color: #b49670; text-align: start; font-size: .9rem; }
.interpretation summary { color: #792d1e; }
.interpretation p { padding-block-end: .25rem; }

.keepsakes {
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 7vw, 7rem);
  padding-block: clamp(3.5rem, 6vw, 6rem);
  border-block-start: 1px solid var(--rule);
}
.story-figure { text-align: center; }
.story-card {
  position: relative;
  margin-inline: auto;
  max-inline-size: 15rem;
  overflow: hidden;
  border: 1px solid #8b673f;
  border-radius: .85rem;
  box-shadow: 0 1rem 3rem #0d0806aa;
}
.story-card img { inline-size: 100%; block-size: auto; }
.story-copy { position: absolute; inset: 32% 0 auto; color: #fff1d5; line-height: 1.65; }
.story-copy span { font-size: .75rem; }
.story-copy p { margin-block: .3rem; font-size: 1.65rem; font-weight: 800; }
.story-copy small, .story-figure figcaption { font-size: .8rem; }
.story-figure figcaption { margin-block-start: .8rem; color: var(--muted); }
.feature-list div { padding-block: .9rem; border-block-start: 1px solid var(--rule); }
.feature-list dt { color: var(--gold); font-weight: 800; }
.feature-list dt span { margin-inline-end: .38rem; }
.feature-list dd { margin-block-start: .25rem; font-size: .93rem; }

.faq-section { padding-block: clamp(3.5rem, 6vw, 5.25rem); background: var(--panel); border-block: 1px solid var(--rule); }
.faq-grid { grid-template-columns: 4fr 7fr; align-items: start; gap: clamp(1.1rem, 4vw, 4rem); }
.faq-list { border-block-end: 1px solid var(--rule); }
.faq-list summary::after { color: var(--gold); }
.faq-list summary:hover { color: var(--gold); }
.faq-list p { font-size: .95rem; max-inline-size: 34rem; }
.availability { padding-block: clamp(2.75rem, 6vw, 5rem); }
.availability-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.15rem;
  padding: clamp(1.3rem, 4vw, 2.4rem);
  border: 1px solid #735437;
  border-radius: .8rem;
  background: linear-gradient(120deg, var(--panel), #302116);
}
.availability-box img { object-fit: contain; }
.availability-box h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.availability-box p { margin-block-start: .3rem; font-size: .94rem; }
.availability-box .button { margin-inline-start: auto; }
.site-footer { border-block-start: 1px solid var(--rule); }
.footer-inner { flex-wrap: wrap; padding-block: .65rem; }
.footer-nav { display: flex; flex-wrap: wrap; column-gap: clamp(1rem, 3vw, 2rem); }
.footer-nav [aria-current="page"] { color: var(--gold); }
.text-link { color: var(--gold); text-decoration: underline; text-underline-offset: .18em; }

.info-page {
  max-inline-size: 48rem;
  padding-block: clamp(2.5rem, 7vw, 5.25rem);
}
.info-page h1 {
  margin-block: .5rem 1rem;
  font-size: clamp(2rem, 6vw, 3.5rem);
  line-height: 1.35;
}
.info-page section {
  margin-block-start: 1.8rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--rule);
}
.info-page h2 { margin-block-end: .5rem; font-size: 1.25rem; }
.info-page p:not(.eyebrow), .info-page li { color: var(--muted); }
.info-page p + p { margin-block-start: .8rem; }
.info-page .button { margin-block-start: 1.25rem; }

.contact-links {
  display: grid;
  gap: .7rem;
  margin-block: .85rem 0;
  padding: 0;
  list-style: none;
}
.contact-link {
  --channel-accent: var(--gold);
  --channel-surface: #3b2a18;
  display: grid;
  grid-template-columns: 2.85rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  min-block-size: 4.5rem;
  padding: .65rem .8rem;
  border: 1px solid var(--rule);
  border-radius: .7rem;
  background: var(--panel);
  color: var(--text);
}
.contact-link--telegram { --channel-accent: #75d3ff; --channel-surface: #173340; }
.contact-link--rubika { --channel-accent: #92e2cb; --channel-surface: #233c35; }
.contact-link:hover, .contact-link:focus-visible { border-color: var(--channel-accent); }
.contact-icon {
  display: grid;
  place-items: center;
  inline-size: 2.85rem;
  aspect-ratio: 1;
  border-radius: .65rem;
  background: var(--channel-surface);
  color: var(--channel-accent);
}
.contact-link strong, .contact-link bdi { display: block; }
.contact-link bdi {
  color: var(--muted);
  text-align: right;
  font-size: .86rem;
  overflow-wrap: anywhere;
}
.contact-arrow { color: var(--channel-accent); padding-inline-end: .15rem; }

@media (max-width: 60rem) {
  .hero { gap: 1.75rem; min-block-size: auto; }
  .hero-actions { gap: .55rem; }
  .hero-actions .button { padding-inline: .8rem; }
}

@media (max-width: 47rem) {
  .site-header nav { display: none; }
  .header-inner, .footer-inner { min-block-size: 4.25rem; }
  .hero, .sample-grid, .keepsakes, .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .hero { gap: 2rem; padding-block: 2.5rem 3.15rem; }
  .hero h1 { font-size: clamp(2.3rem, 8vw, 3.9rem); }
  .hero-art { inline-size: min(100% - .6rem, 31rem); margin-inline: auto; }
  .hero-ticket { inset-inline-start: -.6rem; }
  .hero-photo { aspect-ratio: 1.26; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .steps li { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); column-gap: .6rem; }
  .steps h3 { margin-block: 0 .25rem; }
  .steps p { grid-column: 2; }
  .keepsakes-copy { grid-row: 1; }
  .availability-box { align-items: start; }
  .availability-box .button { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}