/* [project]/src/app/[locale]/landing.css [app-client] (css) */
@layer components {
  .landing {
    --ground: var(--color-canvas);
    --cell: var(--color-canvas);
    --cell-ink: var(--color-ink);
    --cell-muted: var(--color-ink-muted);
    --rule: var(--color-line);
    --rule-strong: var(--color-line-strong);
    --accent: var(--color-gold-700);
    --accent-ink: var(--color-white);
    --field: var(--color-ink);
    --field-ink: var(--color-white);
    --field-muted: color-mix(in srgb, var(--color-white) 72%, transparent);
    --field-rule: color-mix(in srgb, var(--color-white) 22%, transparent);
    --field-mark: color-mix(in srgb, var(--color-white) 40%, transparent);
    --hero-columns: minmax(0, 1fr) minmax(0, 46%);
    --hero-gap: clamp(2rem, 4.5vw, 4.5rem);
    --text-title: clamp(1.75rem, 3.2vw, 2.875rem);
    --text-title--line-height: 1.12;
    --text-title--font-weight: 700;
  }

  .landing .bg-field {
    --accent: var(--color-gold-300);
    --accent-ink: var(--color-ink);
  }

  .landing .bg-field :focus-visible {
    outline-color: var(--color-gold-300);
  }

  .landing .btn {
    border-radius: 0;
  }

  .landing .btn-print {
    background-color: var(--color-ink);
    color: var(--color-white);
  }

  .landing .hero-label {
    max-width: calc(1320px + 2 * var(--gutter));
    padding: var(--gutter) var(--gutter) .5rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "photo"
                         "words"
                         "tabs";
    margin-inline: auto;
    display: grid;
  }

  .landing .hero-words {
    grid-area: words;
    padding-block-start: 1.5rem;
    display: grid;
  }

  .landing .hero-photo {
    aspect-ratio: 3 / 2;
    border: 1px solid var(--field-rule);
    grid-area: photo;
    position: relative;
    overflow: hidden;
  }

  .landing .hero-tabs {
    grid-area: tabs;
    margin-block-start: 1.25rem;
    display: flex;
    overflow-x: auto;
  }

  @media (min-width: 48rem) {
    .landing .hero-tabs {
      margin-block-start: 1.5rem;
    }

    .landing .hero-label {
      grid-template-columns: var(--hero-columns);
      column-gap: var(--hero-gap);
      grid-template-rows: auto 1fr auto;
      grid-template-areas: "words photo"
                           ". photo"
                           "tabs photo";
      padding-block: clamp(1.5rem, 3vw, 2.75rem);
    }

    .landing .hero-words {
      padding-block-start: 0;
    }

    .landing .hero-photo {
      place-self: start stretch;
    }
  }

  .landing .hero-message {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    display: flex;
  }

  .landing .hero-copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    display: flex;
  }

  @media (min-width: 48rem) {
    .landing .hero-message {
      gap: 1rem;
    }

    .landing .hero-copy {
      gap: 2rem;
    }
  }

  .landing .hero-title {
    font-family: var(--font-display);
    text-wrap: balance;
    font-size: clamp(2.25rem, 4.45vw, 4rem);
  }

  .landing .hero-title:lang(ar) {
    max-width: 7em;
    margin-block-start: -.36em;
    font-weight: 400;
    line-height: 1.5;
  }

  .landing .hero-title:lang(en) {
    letter-spacing: -.02em;
    max-width: 12em;
    margin-block-start: -.19em;
    font-weight: 300;
    font-stretch: 112.5%;
    line-height: 1.1;
  }

  .landing .hero-line {
    max-width: 40ch;
    color: var(--field-muted);
    text-wrap: balance;
    font-size: 1rem;
    line-height: 1.7;
  }

  @media (min-width: 80rem) {
    .landing .hero-line {
      font-size: var(--text-lead);
    }
  }

  .landing .hero-cta {
    border-color: var(--color-gold-300);
    color: var(--color-white);
    background-color: #0000;
    gap: .75rem;
    padding-inline: 1.75rem;
    font-weight: 500;
  }

  .landing .hero-cta:is(:hover, :focus-visible) {
    background-color: var(--color-gold-300);
    color: var(--color-ink);
  }

  .landing .hero-tab {
    min-width: 2.75rem;
    min-height: 2.75rem;
    color: var(--field-muted);
    font-size: var(--text-caption);
    font-weight: 500;
    line-height: var(--text-caption--line-height);
    text-align: start;
    flex: 1 1 0;
    align-items: center;
    transition: color .15s ease-out;
    display: flex;
    position: relative;
  }

  .landing .hero-tab:is(:hover, [aria-current="true"]) {
    color: var(--field-ink);
  }

  .landing :is(.hero-tab, .hero-pause):focus-visible {
    outline-offset: -2px;
  }

  .landing .hero-tab-track {
    background: var(--field-mark);
    height: 1px;
    position: absolute;
    inset-block-start: calc(50% - .5px);
    inset-inline: .375rem;
  }

  .landing .hero-tab-run {
    background: var(--accent);
    transform-origin: 0;
    height: 2px;
    margin-block-start: -.5px;
    display: block;
  }

  .landing .hero-tab-run:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    transform-origin: 100%;
  }

  @media (prefers-reduced-motion: no-preference) {
    .landing .hero-tab-run-pending {
      transform: scaleX(0);
    }
  }

  .landing .hero-pause {
    width: 2.75rem;
    min-height: 2.75rem;
    color: var(--field-muted);
    flex: none;
    place-items: center;
    transition: color .15s ease-out;
    display: grid;
  }

  .landing .hero-pause:hover {
    color: var(--field-ink);
  }

  @media (min-width: 80rem) {
    .landing .hero-tabs {
      box-shadow: inset 0 1px 0 var(--field-rule);
      gap: 2rem;
    }

    .landing .hero-tab {
      flex: 0 auto;
      padding-block-start: .5rem;
    }

    .landing .hero-tab-track {
      background: none;
      inset-block-start: 0;
      inset-inline: 0;
    }

    .landing .hero-tab-run {
      margin-block-start: 0;
    }

    .landing .hero-pause {
      margin-inline-start: auto;
    }
  }

  @media (forced-colors: active) {
    .landing .hero-tab-track {
      forced-color-adjust: none;
      background: canvastext;
    }

    .landing .hero-tab-run {
      forced-color-adjust: none;
      background: highlight;
    }
  }

  @media (min-width: 48rem) {
    .landing .notice-label {
      grid-template-columns: var(--hero-columns);
      column-gap: var(--hero-gap);
      display: grid;
    }
  }

  .landing .btn-print:hover {
    background-color: var(--color-gold-900);
  }

  .landing .ruled {
    border-block-start: 1px solid var(--rule);
    border-inline-start: 1px solid var(--rule);
    display: grid;
  }

  .landing .ruled > * {
    background: var(--ground);
    border-inline-end: 1px solid var(--rule);
    border-block-end: 1px solid var(--rule);
  }

  .landing .ruled-cells > * {
    background: var(--cell);
    color: var(--cell-ink);
  }

  .landing .gold-field {
    --accent: var(--color-ink);
    background: var(--color-gold-500);
    color: var(--color-ink);
  }

  .landing .gold-field :focus-visible {
    outline-color: var(--color-ink);
  }

  .landing .display {
    font-family: var(--font-display);
    letter-spacing: -.02em;
    text-wrap: balance;
    font-weight: 700;
    font-stretch: 125%;
  }

  .landing .display:lang(ar) {
    letter-spacing: 0;
  }

  .landing .photo {
    background: var(--color-surface);
  }

  .landing .on-stock {
    mix-blend-mode: multiply;
  }
}

.landing .display:lang(ar) {
  line-height: 1.5;
}

@keyframes stamp-press {
  0% {
    opacity: 0;
    transform: scale(1.45)rotate(-18deg);
  }

  55% {
    opacity: 1;
    transform: scale(.94)rotate(-9deg);
  }

  100% {
    opacity: 1;
    transform: scale(1)rotate(-10deg);
  }
}

@keyframes stamp-lift {
  to {
    opacity: 0;
    transform: scale(1.04)rotate(-10deg);
  }
}

@keyframes stamp-rest {
  from {
    opacity: 1;
    transform: rotate(-10deg);
  }

  to {
    opacity: 0;
    transform: rotate(-10deg);
  }
}

@keyframes inscribe {
  from {
    -webkit-mask-image: var(--inscribe-mask);
    mask-image: var(--inscribe-mask);
    -webkit-mask-size: 225% 100%;
    mask-size: 225% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: var(--inscribe-from) 0;
    mask-position: var(--inscribe-from) 0;
  }

  to {
    -webkit-mask-image: var(--inscribe-mask);
    mask-image: var(--inscribe-mask);
    -webkit-mask-size: 225% 100%;
    mask-size: 225% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: var(--inscribe-to) 0;
    mask-position: var(--inscribe-to) 0;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    translate: 0 .5rem;
  }
}

@keyframes photo-in {
  from {
    opacity: 0;
  }
}

@keyframes fill-line {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.landing .anim-inscribe {
  --inscribe-mask: linear-gradient(to right, var(--color-ink) 44.4%, transparent 55.6%);
  --inscribe-from: 100%;
  --inscribe-to: 0%;
  padding-block: .1em;
}

.landing .anim-inscribe:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  --inscribe-mask: linear-gradient(to left, var(--color-ink) 44.4%, transparent 55.6%);
  --inscribe-from: 0%;
  --inscribe-to: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .landing .anim-inscribe {
    animation: .52s cubic-bezier(.4, 0, .6, 1) backwards inscribe;
  }

  .landing .anim-copy {
    animation: rise .36s var(--ease-out-label) .2s backwards;
  }

  .landing .anim-photo {
    animation: photo-in .48s var(--ease-out-label) backwards;
  }

  .landing .anim-stamp {
    animation: stamp-press .26s var(--ease-out-label) both,
			stamp-lift .42s ease-in 1.4s forwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing .anim-stamp {
    animation: 1.82s step-end both stamp-rest;
  }
}

/* [next]/internal/font/google/amiri_6296ff9b.module.css [app-client] (css) */
@font-face {
  font-family: Amiri;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/05d29f0ed5b0e698-s.p.1mou8v493x-u7.woff2") format("woff2");
  unicode-range: U+6??, U+750-77F, U+870-891, U+897-8E1, U+8E3-8FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF?, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: Amiri;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/d48a75a69535be63-s.2otm1xqa4lz8q.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Amiri;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/648474ecaeaf4c9a-s.3bws0utn4kpyc.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Amiri;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/291696193ea1e96b-s.p.1zf0xf1cyi65q.woff2") format("woff2");
  unicode-range: U+6??, U+750-77F, U+870-891, U+897-8E1, U+8E3-8FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF?, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: Amiri;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/966a9c3087fc8ac2-s.17y8b371423uo.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Amiri;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/1062333f2bd32cfe-s.1u_72eqgml40c.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Amiri Fallback;
  src: local(Times New Roman);
  ascent-override: 112.47%;
  descent-override: 63.44%;
  line-gap-override: 0.0%;
  size-adjust: 99.94%;
}

.amiri_6296ff9b-module__kQIIqW__className {
  font-family: Amiri, Amiri Fallback;
  font-style: normal;
}

.amiri_6296ff9b-module__kQIIqW__variable {
  --font-amiri: "Amiri", "Amiri Fallback";
}

/*# sourceMappingURL=%5Broot-of-the-server%5D__1typyrq._.css.map*/