/* ============================================================
   LIMEN ATHENS — site foundation
   Self-contained tokens distilled from the brand system.
   Classical bones, contemporary posture. Marble · Ink · Aegean.
   ============================================================ */

/* — Fonts — */
@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,700;1,6..96,400;1,6..96,500&display=swap");

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Core */
  --ink:      #17181A;
  --marble:   #F3EFE6;
  --accent:   #2B4F68;   /* Aegean */
  --accent-deep: #1B3749;
  --accent-soft: #4F7F9A;

  /* Supporting */
  --ink-soft: #3B3D40;
  --graphite: #6D7076;
  --stone:    #A6A69E;
  --bone:     #EDE8DD;
  --chalk:    #FBF8F1;
  --pure:     #FFFFFF;
  --olive:      #707455;
  --olive-deep: #4F5339;

  /* Fonts */
  --font-serif: "Bodoni Moda", "Didot", "Playfair Display", "Times New Roman", serif;
  --font-sans:  "Poppins", -apple-system, "Segoe UI", sans-serif;
  --font-mono:  ui-monospace, "SF Mono", Menlo, monospace;

  /* Tracking */
  --track-tight:  -0.02em;
  --track-wide:   0.18em;
  --track-widest: 0.32em;

  /* Spacing */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 144px;

  /* Lines */
  --border-1: rgba(23, 24, 26, 0.10);
  --border-2: rgba(23, 24, 26, 0.22);
  --hairline: 1px;

  /* On dark surfaces */
  --line-on-dark: rgba(243, 239, 230, 0.14);
  --line-on-dark-2: rgba(243, 239, 230, 0.28);

  --shadow-lifted: 0 12px 40px -12px rgba(23,24,26,0.18);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--marble);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* never let a stray wide element force a horizontal scroll on mobile.
   `clip` (not `hidden`) avoids creating a scroll container, so it does
   not break the sticky Field Notes header. */
html, body { overflow-x: clip; max-width: 100%; }

/* — The diamond: the only recurring glyph — */
.diamond {
  display: inline-block; width: 6px; height: 6px;
  background: var(--accent); transform: rotate(45deg);
  vertical-align: middle; flex: none;
}

/* — Type voices — */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-weight: 500;
  font-size: 11px; letter-spacing: var(--track-widest);
  text-transform: uppercase; color: var(--graphite);
}
.serif { font-family: var(--font-serif); font-weight: 400; }
.serif-i { font-family: var(--font-serif); font-weight: 400; font-style: italic; }
.athens {
  font-family: var(--font-sans); font-weight: 500;
  letter-spacing: var(--track-widest); text-transform: uppercase;
}

/* — Grain overlay (set on a fixed full-screen layer) — */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* — Language toggle — */
.lang {
  display: inline-flex; align-items: center; gap: 2px;
  font-family: var(--font-sans); font-weight: 500;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  user-select: none;
}
.lang button {
  background: none; border: 0; padding: 4px 6px; cursor: pointer;
  font: inherit; letter-spacing: inherit; color: currentColor; opacity: 0.42;
  transition: opacity 160ms var(--ease);
}
.lang button:hover { opacity: 0.8; }
.lang button[aria-pressed="true"] { opacity: 1; }
.lang .sep { opacity: 0.3; }

/* Hide GR text until activated; i18n.js swaps visibility */
[data-gr] { display: none; }
html[lang="el"] [data-en] { display: none; }
html[lang="el"] [data-gr] { display: revert; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}