/* =========================================================
   Vera Sung — Colors & Type
   A quiet, archival palette inspired by Japanese photobooks,
   wabi-sabi, and the muted tones of aged paper.
   ========================================================= */

/* --- Webfonts (Google Fonts substitutes — see README) ----- */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Cutive+Mono&family=Special+Elite&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap");

:root {
  /* ---------- COLOR / GROUND ----------
     Pale mineral whites — gallery wall, light passing through paper.
     Subtle warm-neutral, never cream. Never pure #fff. */
  --paper:        #F4F1E8;   /* primary — warm ivory, never green */
  --paper-light:  #F8F5EC;   /* lightest sheet — pale parchment */
  --paper-warm:   #EBE5D3;   /* aged paper, warmer */
  --paper-bone:   #E3DCC8;   /* dry, naturally aged */
  --linen:        #D6CEB7;   /* washed cotton */
  --stone:        #BFB6A0;   /* pale stone */
  --taupe:        #A89F8B;   /* dust */

  /* ---------- INK / FOREGROUND ----------
     Softened ink — lower contrast, quieter against the paper. */
  --ink:          #35312A;   /* primary heading ink — softer */
  --ink-2:        #494640;   /* body text — lower contrast */
  --ink-3:        #75726A;   /* secondary */
  --ink-4:        #A09D94;   /* tertiary / labels */
  --ink-5:        #C5C2B6;   /* hairlines */

  /* ---------- ACCENT ----------
     Warm-neutral paper greys. No green, no moss, no sage.
     Almost-disappearing — old paper and faded ink. */
  --clay:         #B8AD9D;   /* warm tan */
  --sepia:        #968D7E;   /* faded taupe */
  --ash:          #ADA59A;   /* warm grey */
  --dust:         #C0B8A9;   /* pale warm grey */
  --smoke:        #9F988C;   /* mid warm grey */
  --chalk:        #CDC6B8;   /* palest warm grey */

  /* ---------- SEMANTIC ---------- */
  --bg:           var(--paper);
  --bg-alt:       var(--paper-warm);
  --fg:           var(--ink-2);
  --fg-muted:     var(--ink-3);
  --fg-quiet:     var(--ink-4);
  --rule:         var(--ink-5);
  --link:         var(--ink-2);

  /* ---------- TYPE FAMILIES ----------
     Cutive Mono is PRIMARY — a Selectric-feeling typewriter mono.
     Special Elite is used for more degraded, stamped annotations.
     Cormorant Garamond is reserved for occasional titles and poetic fragments. */
  --mono:       "Cutive Mono", "Courier Prime", "Courier New", monospace;
  --mono-worn:  "Special Elite", "Cutive Mono", "Courier New", monospace;
  --serif:      "Cormorant Garamond", "EB Garamond", "Times New Roman", serif;
  /* Legacy alias — some early files reference --sans; route it to mono. */
  --sans:       var(--mono);

  /* ---------- TYPE SCALE ----------
     Mono runs small and tight. Serif scales larger, sparingly. */
  --t-xxs:  10px;   /* index numbers, captions */
  --t-xs:   11px;   /* labels, meta */
  --t-sm:   12px;   /* secondary body */
  --t-base: 13px;   /* body (mono) */
  --t-md:   15px;   /* lead serif */
  --t-lg:   22px;
  --t-xl:   34px;
  --t-2xl:  52px;
  --t-3xl:  84px;
  --t-4xl:  120px;

  /* ---------- SPACING (page-margins, not button paddings) --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 20px;
  --s-5: 32px;
  --s-6: 56px;
  --s-7: 96px;
  --s-8: 160px;

  /* ---------- LINE / RULES / RADII ---------- */
  --hairline:   1px solid var(--ink-5);
  --rule-warm:  1px solid #C9C0AE;
  --r-0: 0px;     /* default — sharp, archival */
  --r-1: 2px;
  --r-2: 6px;

  /* ---------- MOTION ----------
     Not transitions \u2014 dissolves. Felt, not noticed.
     Durations are slow on purpose; users should slow down. */
  --ease:        cubic-bezier(0.33, 0, 0.20, 1);     /* slow ease-out, no overshoot */
  --ease-slow:   cubic-bezier(0.22, 0.04, 0.30, 1);
  --dur-fast:    420ms;    /* hover ink-shift */
  --dur:         800ms;    /* image emerging */
  --dur-slow:    1400ms;   /* page dissolve */
}

/* ===========================================================
   SEMANTIC TYPE
   =========================================================== */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--t-base);
  font-weight: 300;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

h1, h2, h3, h4, h5 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0;
}

.h-display { font-size: var(--t-4xl); font-weight: 300; line-height: 0.95; letter-spacing: -0.02em; }
.h1        { font-size: var(--t-3xl); font-weight: 300; line-height: 1.0;  letter-spacing: -0.015em; }
.h2        { font-size: var(--t-2xl); font-weight: 400; line-height: 1.05; }
.h3        { font-size: var(--t-xl);  font-weight: 400; line-height: 1.15; }
.h4        { font-size: var(--t-lg);  font-weight: 400; line-height: 1.25; }

/* Primary body — mono, small, tightly leaded */
.body      { font-family: var(--mono);  font-size: var(--t-base); font-weight: 300; line-height: 1.55; color: var(--ink-3); }
/* Occasional serif passages — a poetic fragment, an artist statement */
.body-serif{ font-family: var(--serif); font-size: var(--t-md);   font-weight: 400; line-height: 1.55; color: var(--ink-2); }
.lead      { font-family: var(--serif); font-size: var(--t-lg);   font-style: italic; color: var(--ink-3); line-height: 1.4; }

/* Tracked uppercase labels — used in corners, headers, section markers.
   Mono. Slightly faded color. */
.label {
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.label--quiet { color: var(--ink-4); }

/* Dates, indices, technical metadata */
.meta {
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 300;
  color: var(--ink-4);
  letter-spacing: 0.02em;
}

/* Faded mono — for the most quiet annotations (.archival) */
.archival {
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 300;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  line-height: 1.5;
}

/* Roman / index numerals — for photobook-style sequence markers */
.numeral {
  font-family: var(--serif);
  font-size: var(--t-base);
  letter-spacing: 0.4em;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* Captions under photographs — mono, very small, slightly faded */
.caption {
  font-family: var(--mono);
  font-size: var(--t-xxs);
  font-weight: 300;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  line-height: 1.45;
}
/* Italic-serif caption variant, for a poetic line under a photograph */
.caption--serif {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-4);
  line-height: 1.4;
}

/* Links — underline-on-hover only, in body color */
a, .link {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
a:hover, .link:hover {
  border-bottom-color: var(--ink-3);
}

/* Selection */
::selection { background: var(--ink-2); color: var(--paper-light); }

/* ===========================================================
   PAPER TEXTURE — applied sparingly via .paper-grain
   =========================================================== */
.paper-grain {
  position: relative;
}
.paper-grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.37  0 0 0 0 0.30  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.35;
}