/* ============================================================
   Proodlez, design tokens & base

   The palette is lifted straight off the pack: the chicken cup's
   red, the thai cup's blue, the lid's gold, the noodle cream.
   Nothing here was invented; it was sampled.
   ============================================================ */

:root {
  /* The ticker and the header are both fixed and both always there,
     so the top 102px of the page is never the top of the page. An
     anchor lands its target at zero, which put every heading behind
     them: the section arrived, its name did not. Held here so the
     three places that need the figure cannot drift apart. */
  --ticker-h: 38px;
  --hdr-h:    64px;
  --chrome:   calc(var(--ticker-h) + var(--hdr-h));

  /* pack inks */
  --red:       #E8112D;   /* chicken cup */
  --red-deep:  #B00C22;
  --blue:      #1E93CE;   /* thai cup */
  --blue-deep: #0B57A0;   /* the display carton */
  --gold:      #FFC20E;   /* lid foil */
  --gold-deep: #D89A00;

  /* grounds */
  --ink:    #141414;
  --paper:  #FFFDF7;
  --cream:  #FFF3DE;      /* the noodle itself */
  --sky:    #CFEAF9;      /* the blue cup, watered down */
  --white:  #FFFFFF;
  --mute:   #7A7368;
  --hero:   #840111;      /* sampled from the hero photograph's backdrop */

  --latin:  "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --arabic: "Cairo", system-ui, sans-serif;
  --font:   var(--latin);

  --display-wdth: 120;
  --display-wght: 900;

  --gut:     clamp(18px, 3.6vw, 48px);
  /* 8vw put 230px of nothing between two sections on a desktop,
     a quarter of the page. The sections are loud enough to separate
     themselves without that much silence. */
  --section: clamp(48px, 5.2vw, 88px);
  --r:       22px;
  --r-lg:    36px;
  --pill:    999px;
  --line:    2px;
  --maxw:    1360px;
}

html[lang="ar"] { --font: var(--arabic); --display-wdth: 100; }

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

/* every in-page jump stops clear of the fixed chrome, with room to
   breathe under it, so the heading it was aimed at is the first thing
   read and not the first thing hidden */
html { scroll-padding-block-start: calc(var(--chrome) + 18px); }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.58;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font);
  font-weight: var(--display-wght);
  font-variation-settings: "wdth" var(--display-wdth), "wght" var(--display-wght);
  line-height: 0.88;
  letter-spacing: -0.026em;
  text-transform: uppercase;
}

html[lang="ar"] h1, html[lang="ar"] h2,
html[lang="ar"] h3, html[lang="ar"] h4 {
  line-height: 1.12; letter-spacing: 0; text-transform: none;
}

/* ---------- layout ---------- */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: var(--section); }

/* ---------- display scale ---------- */

.d1 { font-size: clamp(38px, 4.7vw, 68px); }
.d2 { font-size: clamp(32px, 4.8vw, 68px); }
.d3 { font-size: clamp(21px, 2.4vw, 32px); }

html[lang="ar"] .d1 { font-size: clamp(34px, 4.4vw, 66px); }
html[lang="ar"] .d2 { font-size: clamp(25px, 4vw, 56px); }

/* ---------- money ----------
   A price is a Latin-ordered run. Left to itself, bidi moves the
   currency in front of the figure once the page flips, so every
   amount is isolated. */
.money, .price, .buy__now, .buy__was {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---------- katakana ---------- */

.kana { font-family: "Noto Sans JP", var(--latin); font-weight: 900; letter-spacing: 0.08em; user-select: none; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: var(--pill);
  border: 3px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform .16s cubic-bezier(.34,1.6,.5,1), background-color .16s, color .16s;
}

html[lang="ar"] .btn { letter-spacing: 0; text-transform: none; font-size: 16px; }

.btn:hover { transform: translateY(-3px) rotate(-1deg); background: var(--red); border-color: var(--ink); color: var(--white); }
.btn:active { transform: translateY(0); }

.btn--out   { background: transparent; color: var(--ink); }
.btn--out:hover { background: var(--gold); color: var(--ink); }

.btn--paper { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--paper:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.btn--gold  { background: var(--gold); border-color: var(--ink); color: var(--ink); }
.btn--gold:hover { background: var(--ink); color: var(--gold); }

.btn--paper-out { background: transparent; border-color: var(--paper); color: var(--paper); }
.btn--paper-out:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }


/* ---------- shared bits ---------- */

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}