/* ============================================================================
   Aden — reset, typography, focus, form primitives.
   ========================================================================= */

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

html {
  scroll-behavior: smooth;
  /* anchors land below the fixed bar instead of under it (shared spec §10a.6) */
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.62;
  color: var(--text);
  background: #1b2329;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; line-height: 1.2; }

/* Cinzel, Cormorant and EB Garamond all default to old-style figures, which
   turns "11,402" into "ıı,402". Anything that sets the display face must also
   set lining figures. (shared spec §10a, bonus) */
.u-display,
.lockup__title, .panel-title, .page-title, .stat-plate__value, .btn,
.tab, .drawer__link, .crest, .counter__value, .dot-label, .meta-num,
.brand-sub, .lockup__kicker, .field__label, .table th, .pager__btn,
.badge, .fact-row__value, .price, .pill {
  font-family: var(--font-display);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--gold-text); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--cream); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.35em; }
li { margin-bottom: .35em; }

code, kbd { font-family: var(--font-mono); font-size: .9em; }

/* -- focus ---------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

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

.skip-link {
  position: fixed;
  top: var(--s-2); left: var(--s-2);
  z-index: calc(var(--z-toast) + 1);
  padding: var(--s-2) var(--s-4);
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .18s var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); color: var(--ink); }

/* -- forms (mockup 08 sets the language for the whole site) --------------- */
.field { display: block; margin-bottom: var(--s-4); }

.field__label {
  display: block;
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--s-2);
}

.field__hint { display: block; font-size: var(--t-sm); color: var(--text-faint); margin-top: var(--s-2); }

.input, .select, .textarea {
  width: 100%;
  padding: .72rem .9rem;
  font-family: var(--font-body);
  font-size: var(--t-md);
  color: var(--text);
  background: rgba(255, 255, 255, .09);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.textarea { min-height: 9.5rem; resize: vertical; line-height: 1.55; }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
                    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: right 1.05rem center, right .75rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}

/* Focus raises the fill and the border. No colour shift. (site prompt §8) */
.input:hover, .textarea:hover, .select:hover { background: rgba(255, 255, 255, .13); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  background: rgba(255, 255, 255, .17);
  border-color: var(--line-strong);
  outline: 2px solid var(--cream);
  outline-offset: 1px;
}
.input::placeholder, .textarea::placeholder { color: rgba(var(--paper-rgb) / .42); }

.field.is-invalid .input,
.field.is-invalid .textarea,
.field.is-invalid .select { border-width: 2px; border-color: var(--danger); }

.field__error {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--danger);
}
.field__error:empty { display: none; }

.check {
  display: flex; align-items: flex-start; gap: var(--s-3);
  margin-bottom: var(--s-4);
  font-size: var(--t-md);
  cursor: pointer;
}
.check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.05rem; height: 1.05rem;
  margin: .28rem 0 0;
  accent-color: var(--cream);
  cursor: pointer;
}
.check.is-invalid { color: var(--danger); }

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