/* eth3r Studio — base tokens, reset, layout primitives
 * Premium editorial commercial. Light neutrals + muted gold.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* Palette — light editorial */
  --bg:        #ffffff;
  --bg-alt:    #f7f5f1;   /* warm off-white, paper */
  --bg-deep:   #efece6;   /* slight step deeper */
  --ink:       #0d0d0d;   /* near-black */
  --ink-soft:  #5a5a5a;   /* secondary text */
  --ink-mute:  #8a8a86;   /* tertiary, meta */
  --rule:      #e5e3df;   /* hairline rules */
  --rule-soft: #efece8;
  --accent:    #8a6a3a;   /* muted gold */
  --accent-deep:#6e5429;

  /* Type */
  --sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;

  /* Scale (modular, tightened for editorial) */
  --fs-xs:    0.6875rem;  /* 11 */
  --fs-sm:    0.8125rem;  /* 13 */
  --fs-base:  1rem;       /* 16 */
  --fs-md:    1.125rem;   /* 18 */
  --fs-lg:    1.375rem;   /* 22 */
  --fs-xl:    1.75rem;    /* 28 */
  --fs-2xl:   2.5rem;     /* 40 */
  --fs-3xl:   3.75rem;    /* 60 */
  --fs-4xl:   5.5rem;     /* 88 */
  --fs-display:clamp(3rem, 9vw, 8rem);

  /* Spacing */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10:9rem;

  /* Layout */
  --max:    1440px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --nav-h:  72px;

  /* Motion */
  --ease:   cubic-bezier(0.2, 0.6, 0.2, 1);
  --t-fast: 180ms;
  --t-med:  320ms;
  --t-slow: 600ms;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* Typography classes */
.eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.eyebrow--accent { color: var(--accent); }

.h-display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.h-display em { font-style: italic; }

.h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.875rem, 3.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.h4 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fs-lg);
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.lede {
  font-family: var(--sans);
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
}
.meta {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.body-lg { font-size: var(--fs-md); line-height: 1.6; color: var(--ink-soft); }
.body { font-size: var(--fs-base); line-height: 1.6; color: var(--ink-soft); }
.body strong, .body-lg strong { color: var(--ink); font-weight: 500; }

/* Layout primitives */
.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--wide { max-width: 1680px; }
.container--narrow { max-width: 960px; }

.section { padding: var(--s-9) 0; }
.section--tight { padding: var(--s-7) 0; }
.section--loose { padding: var(--s-10) 0; }
.section--alt { background: var(--bg-alt); }
.section--ink { background: var(--ink); color: var(--bg); }
.section--ink .lede, .section--ink .body, .section--ink .body-lg { color: rgba(255,255,255,0.72); }
.section--ink .eyebrow { color: rgba(255,255,255,0.6); }

.rule { height: 1px; background: var(--rule); width: 100%; }
.rule--ink { background: var(--ink); }

/* Grid utilities */
.grid { display: grid; gap: var(--s-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }

@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-12 { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-12 { grid-template-columns: repeat(2, 1fr); }
}

/* Focus */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Selection */
::selection { background: var(--ink); color: var(--bg); }

/* Reveal animations (lazy-loaded images + scroll).
   Scoped to .js so content stays fully visible if JavaScript never runs
   (no-JS users, JS errors, non-rendering crawlers). The inline head script
   adds .js to <html> before paint, so JS users get the animation with no FOUC. */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); animation: reveal-failsafe 0.01s linear 2.6s forwards; }
.js .reveal.is-in { opacity: 1; transform: none; }
/* Failsafe: if app.js loads .js but then fails/throws before IntersectionObserver
   fires (JS-failed, not just JS-disabled), this reveals every .reveal at 2.6s so
   content can never stay hidden. The normal is-in path reveals well before then. */
@keyframes reveal-failsafe { to { opacity: 1; transform: none; } }

.js img.lazy-fade { opacity: 0; transition: opacity 400ms var(--ease); }
.js img.lazy-fade.is-loaded { opacity: 1; }

/* Utility */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.mono { font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }
.italic { font-style: italic; }
.accent-text { color: var(--accent); }
.ink-text { color: var(--ink); }
.soft-text { color: var(--ink-soft); }

/* Print/no-anim respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}