/* ==========================================================================
   IDES — shared foundation
   Every branding decision lives in this file. Swap these values to match the
   print catalogue and all three directions re-skin at once.
   ========================================================================== */

:root {
  /* --- Ink & paper. Placeholder palette: warm paper, near-black ink. ------ */
  --paper:        #f4f2ed;
  --paper-deep:   #e9e6df;
  --ink:          #14140f;
  --ink-soft:     #55554c;
  --ink-faint:    #8d8d83;
  --rule:         #cfccc3;
  --accent:       #b0431f;   /* single accent — used sparingly, print-style */

  /* --- Type. Direction files may override --font-display. ---------------- */
  --font-text:    "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-text);
  --font-mono:    ui-monospace, "SFMono-Regular", "JetBrains Mono", monospace;

  /* Fluid scale — clamp(min, preferred, max) */
  --t-xs:   0.6875rem;
  --t-sm:   0.8125rem;
  --t-base: 1rem;
  --t-lg:   clamp(1.125rem, 0.9rem + 0.7vw, 1.5rem);
  --t-xl:   clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  --t-2xl:  clamp(2.5rem, 1.2rem + 5.5vw, 6rem);
  --t-3xl:  clamp(3.5rem, 0.5rem + 12vw, 13rem);

  /* --- Rhythm ------------------------------------------------------------ */
  --gutter:   clamp(1.25rem, 4vw, 3.5rem);
  --stack:    clamp(4rem, 9vw, 9rem);
  --measure:  62ch;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Shared primitives ---------------------------------------------------- */
.wrap { padding-inline: var(--gutter); }

.label {                       /* small caps micro-label, used in all directions */
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.rule { border: 0; border-top: 1px solid var(--rule); }

.link-u {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.4s var(--ease);
}
.link-u:hover { background-size: 100% 1px; }

/* Image frame. Every image fills its frame completely — never letterboxed,
   never padded. To give a subject more room, recrop the source. */
.frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ratio, 1);
  background: var(--paper-deep);
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}