/* ==========================================================================
   Ladushi — base.css
   Reset, design tokens, typography primitives.
   Everything downstream depends on the custom properties declared here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Faces

   Pinyon Script, self-hosted (SIL Open Font License). Chosen over the other
   candidates because it shares the copperplate structure of the La Dushi
   wordmark: the same high stroke contrast, the same delicate hairlines and
   the same wide, formal set. Latin subset only, 39 KB.

   It is a display face and is used as one — never for body copy, never below
   about 1.5rem, where a script of this contrast stops being legible.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Pinyon Script";
  src: url("../fonts/pinyon-script.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */

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

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

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
fieldset, legend {
  margin: 0;
  padding: 0;
}

ul[class],
ol[class] {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a { color: inherit; }

fieldset { border: 0; }

table {
  border-collapse: collapse;
  width: 100%;
}

[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   2. Tokens — the brand has one expression: light
   -------------------------------------------------------------------------- */

:root {
  /* Colour --------------------------------------------------------------
     Taken from the brand artwork: the engraved indigo eye, its gold stars,
     and the white ground they sit on. Light is the only expression — the
     brand lives on white, so there is no dark palette. */
  --c-bg:            #fdfcfa;
  --c-bg-sunken:     #ffe8ab26;  /* warm gold wash, translucent */
  --c-bg-raised:     #ffffff;
  --c-bg-overlay:    rgba(253, 252, 250, .78);

  --c-fg:            #192f6c;   /* indigo ink, tuned to the eye artwork */
  --c-fg-muted:      #565c7d;
  --c-fg-faint:      #8b90a6;

  --c-line:          rgba(26, 30, 58, .14);
  --c-line-strong:   rgba(26, 30, 58, .30);

  /* The brand gold. Bright enough that it is an ornament and fill colour —
     see the note on --c-accent-fg below. */
  --c-accent:        #bc952f;
  --c-accent-soft:   rgba(201, 162, 39, .14);
  --c-accent-fg:     #ffffff;

  /* The exact brand values, taken from the supplied logo artwork.
     The gold measures 1.24:1 on this ground — it is a foil/embroidery colour
     for dark and photographic grounds, and must never carry text here.
     The indigo measures 9.04:1 and is safe anywhere. */
  --c-gold:          #ffe294;
  --c-indigo:        #21409a;

  --c-focus:         #1c53b8;
  --c-danger:        #b3261e;
  --c-success:       #1e7a4d;

  /* A neutral scrim used over imagery so text always clears contrast. */
  --c-scrim: linear-gradient(
    to top,
    rgba(20, 22, 40, .78) 0%,
    rgba(20, 22, 40, .40) 42%,
    rgba(20, 22, 40, 0) 100%
  );

  /* Typography --------------------------------------------------------- */
  --font-display: ui-serif, "Iowan Old Style", "Palatino Linotype",
                  Palatino, Georgia, "Times New Roman", serif;
  --font-body:    ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "JetBrains Mono", "Cascadia Mono",
                  Menlo, Consolas, monospace;
  --font-script:  "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;

  /* Fluid scale. Each step interpolates between a 360px and a 1600px viewport. */
  --t-xs:   clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem);
  --t-sm:   clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --t-base: clamp(0.9375rem, 0.90rem + 0.18vw, 1.0625rem);
  --t-md:   clamp(1.0625rem, 1.00rem + 0.30vw, 1.25rem);
  --t-lg:   clamp(1.25rem, 1.13rem + 0.55vw, 1.625rem);
  --t-xl:   clamp(1.625rem, 1.36rem + 1.20vw, 2.5rem);
  --t-2xl:  clamp(2.125rem, 1.63rem + 2.20vw, 3.75rem);
  --t-3xl:  clamp(2.75rem, 1.78rem + 4.30vw, 5.75rem);
  --t-4xl:  clamp(3rem, 1.6rem + 6.2vw, 7.25rem);

  --lh-tight:   0.94;
  --lh-snug:    1.12;
  --lh-normal:  1.35;
  --lh-relaxed: 1.62;

  --tr-tight:  -0.035em;
  --tr-snug:   -0.02em;
  --tr-normal: -0.005em;
  --tr-wide:    0.08em;
  --tr-wider:   0.18em;

  /* Space — a 4px-rooted scale with fluid section rhythm. */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  2.5rem;
  --s-8:  3rem;
  --s-9:  4rem;
  --s-10: 5rem;
  --s-11: 6.5rem;
  --s-12: 8rem;

  --section-y: clamp(4.5rem, 3rem + 7vw, 10rem);
  --gutter:    clamp(1.25rem, 0.7rem + 2.6vw, 3.5rem);
  --container:  90rem;   /* 1440px */
  --measure:    38rem;   /* comfortable reading width */

  /* Form ---------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --border: 1px solid var(--c-line);

  --shadow-sm: 0 1px 2px rgba(26, 30, 58, .08);
  --shadow-md: 0 12px 32px -14px rgba(26, 30, 58, .22);
  --shadow-lg: 0 40px 80px -34px rgba(26, 30, 58, .28);

  /* Motion -------------------------------------------------------------- */
  --e-out:     cubic-bezier(.22, 1, .36, 1);
  --e-in-out:  cubic-bezier(.65, .05, .36, 1);
  --e-spring:  cubic-bezier(.34, 1.56, .64, 1);

  --d-fast:   180ms;
  --d-base:   320ms;
  --d-slow:   620ms;
  --d-slower: 1000ms;

  /* Layering ------------------------------------------------------------- */
  --z-base:       0;
  --z-raised:     10;
  --z-sticky:     100;
  --z-header:     200;
  --z-menu:       300;
  --z-cursor:     400;
  --z-transition: 500;

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   3. Document
   -------------------------------------------------------------------------- */

body {
  background-color: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--tr-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100svh;
  transition: background-color var(--d-base) var(--e-out),
              color var(--d-base) var(--e-out);
}

/* --------------------------------------------------------------------------
   4. Typography primitives
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  text-wrap: balance;
}

h1 { font-size: var(--t-3xl); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
h2 { font-size: var(--t-2xl); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }
h5 { font-size: var(--t-md); }
h6 { font-size: var(--t-base); }

p { text-wrap: pretty; }

strong, b { font-weight: 600; }

small { font-size: var(--t-sm); }

::selection {
  background-color: var(--c-accent);
  color: var(--c-accent-fg);
}

/* --------------------------------------------------------------------------
   5. Focus — never removed, only restyled
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  z-index: calc(var(--z-transition) + 1);
  padding: var(--s-3) var(--s-5);
  background-color: var(--c-accent);
  color: var(--c-accent-fg);
  border-radius: var(--radius-pill);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(calc(-100% - var(--s-6)));
  transition: transform var(--d-fast) var(--e-out);
}

.skip-link:focus-visible { transform: translateY(0); }

/* --------------------------------------------------------------------------
   6. Screen-reader utility
   -------------------------------------------------------------------------- */

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