/* ============================================================================
   NAM YAM — base
   Reset, page shell, and the elements shared by more than one section:
   eyebrow, rule, buttons, text links, hairline, skip link, reveal animation.

   ⛔ No hex value, font name or duration may appear in this file.
      Everything reads from tokens.css.
   ============================================================================ */

/* ---- Self-hosted fonts -----------------------------------------------------
   Uncomment this block once the five .woff2 files are in assets/fonts/
   (see assets/fonts/README.md), then delete the Google Fonts <link> tags
   from index.html.

@font-face { font-family:'Lora'; font-style:normal; font-weight:400; font-display:swap;
             src:url('../fonts/lora-400.woff2') format('woff2'); }
@font-face { font-family:'Lora'; font-style:normal; font-weight:500; font-display:swap;
             src:url('../fonts/lora-500.woff2') format('woff2'); }
@font-face { font-family:'Be Vietnam Pro'; font-style:normal; font-weight:300; font-display:swap;
             src:url('../fonts/be-vietnam-pro-300.woff2') format('woff2'); }
@font-face { font-family:'Be Vietnam Pro'; font-style:normal; font-weight:400; font-display:swap;
             src:url('../fonts/be-vietnam-pro-400.woff2') format('woff2'); }
@font-face { font-family:'Be Vietnam Pro'; font-style:normal; font-weight:500; font-display:swap;
             src:url('../fonts/be-vietnam-pro-500.woff2') format('woff2'); }
--------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  font-synthesis: none;          /* never let the browser fake a missing weight */
}

body {
  margin: 0;
  background: var(--ny-ink);
  color: var(--ny-white);
  font-family: var(--ny-sans);
  font-weight: var(--ny-sans-light);
  line-height: 1.58;
  font-kerning: normal;
  font-variant-ligatures: none;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ny-gold); text-decoration: none; }
a:hover { color: var(--ny-paper); }
button { font: inherit; }
img { max-width: 100%; }

h1, h2, h3, p, blockquote, figure { margin: 0; }

.ny-defs { position: absolute; overflow: hidden; }

section { position: relative; }

/* ---- Skip link ----------------------------------------------------------- */
.ny-skip {
  position: fixed; top: -60px; left: 20px; z-index: var(--ny-z-skip);
  background: var(--ny-paper); color: var(--ny-ink);
  padding: 10px 16px;
  font: var(--ny-sans-regular) var(--ny-fs-body)/1 var(--ny-sans);
  transition: top var(--ny-fast) var(--ny-ease);
}
.ny-skip:focus { top: 20px; color: var(--ny-ink); }

/* ---- Eyebrow + hairline rule --------------------------------------------- */
.ny-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font: var(--ny-sans-regular) var(--ny-fs-label)/1 var(--ny-sans);
  text-transform: uppercase;
  letter-spacing: var(--ny-ls-eyebrow);
}
.ny-eyebrow--plain { display: block; letter-spacing: .3em; }
.ny-eyebrow--gold { color: var(--ny-gold); }
.ny-eyebrow--red  { color: var(--ny-red); }

.ny-rule { width: 44px; height: 1px; background: currentColor; flex: none; }

.ny-hairline { display: block; height: 1px; background: var(--ny-dark-22); }

/* ---- Buttons -------------------------------------------------------------
   52px tall, uppercase, wide tracking. Sizes come from design v3.0.1.        */
.ny-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px;
  padding: 0 clamp(26px, 2.8vw, 38px);
  font: var(--ny-sans-medium) var(--ny-fs-button)/1 var(--ny-sans);
  text-transform: uppercase;
  letter-spacing: .3em;
  transition: background var(--ny-fast) var(--ny-ease);
}
.ny-btn--gold { background: var(--ny-gold); color: var(--ny-ink); }
.ny-btn--gold:hover { background: var(--ny-gold-hi); color: var(--ny-ink); }
.ny-btn--ink  { background: var(--ny-ink); color: var(--ny-white); }
.ny-btn--ink:hover { background: var(--ny-brown); color: var(--ny-white); }

/* ---- Underlined text link ------------------------------------------------ */
.ny-textlink {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--ny-tap);
  padding-bottom: 5px;
  font: var(--ny-sans-regular) var(--ny-fs-textlink)/1 var(--ny-sans);
  text-transform: uppercase;
  letter-spacing: var(--ny-ls-link);
  border-bottom: 1px solid transparent;
  transition: color var(--ny-fast), border-color var(--ny-fast);
}
.ny-textlink--light { color: var(--ny-white); border-bottom-color: var(--ny-white-32); }
.ny-textlink--light:hover { color: var(--ny-gold); border-bottom-color: var(--ny-gold); }
.ny-textlink--dark { color: var(--ny-ink); border-bottom-color: var(--ny-dark-32); }
.ny-textlink--dark:hover { color: var(--ny-red); border-bottom-color: var(--ny-red); }

/* ---- Reveal on scroll ----------------------------------------------------
   JS adds .is-pending, then removes it when the element enters the viewport.
   If JS never runs, nothing is hidden — content is visible by default.       */
[data-reveal].is-pending {
  opacity: 0;
  transform: translateY(22px);
}
[data-reveal] {
  transition: opacity 900ms var(--ny-ease), transform 900ms var(--ny-ease);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  [data-reveal].is-pending { opacity: 1; transform: none; }
}