/* =========================================================
   The Inward Lab: tokens, type scale, buttons, motion verbs, nav
   Scale (7 steps, desktop -> mobile): display 96->44 · h2 60->32 · h3 32->24 ·
   lead 22->19 · body 18->17 · small 15->14 · label 13->12
   ========================================================= */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/hanken-grotesk-var-latin.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url("../fonts/newsreader-var-latin.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/newsreader-italic-400-latin.woff2") format("woff2"); }
/* Greek glyphs: the Latin faces have no Greek, so Greek text falls through to companions of similar
   construction (Literata ↔ Newsreader, Manrope ↔ Hanken Grotesk, Fira Mono ↔ IBM Plex Mono). unicode-range
   means these files load only on pages that contain Greek (ΜΗ-25). */
@font-face { font-family: "Inward Serif GR"; font-style: normal; font-weight: 300 600; font-display: swap; unicode-range: U+0370-03FF, U+1F00-1FFF;
  src: url("../fonts/literata-greek-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Inward Serif GR"; font-style: italic; font-weight: 300 600; font-display: swap; unicode-range: U+0370-03FF, U+1F00-1FFF;
  src: url("../fonts/literata-greek-wght-italic.woff2") format("woff2"); }
@font-face { font-family: "Inward Sans GR"; font-style: normal; font-weight: 400 700; font-display: swap; unicode-range: U+0370-03FF, U+1F00-1FFF;
  src: url("../fonts/manrope-greek-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Inward Mono GR"; font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0370-03FF, U+1F00-1FFF;
  src: url("../fonts/fira-mono-greek-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inward Mono GR"; font-style: normal; font-weight: 500; font-display: swap; unicode-range: U+0370-03FF, U+1F00-1FFF;
  src: url("../fonts/fira-mono-greek-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); }

:root {
  /* colour — olive family re-based on the client's #7F8269 (18/10), lighter and greyer than before.
     #7F8269 itself: logo box, strokes, fills. Small text needs 4.5:1, so it takes the nearest passing shade
     of the same olive: #666953 on light (4.7:1), #B3B69B on dark (7.7:1). Neutrals unchanged. */
  --canvas: #ECEAE2; --sage: #C6C8B5; --paper: #F5F2EB; --paper-2: #EEEAE0; --paper-3: #E2DDD0;
  --ink: #20271F; --ink-soft: #525A4A; --ink-faint: #565D4B;
  --accent: #666953;        /* text + filled buttons on light (>= 4.5:1) */
  --accent-hover: #575A46;
  --accent-soft: #7F8269;   /* the brand olive: strokes, fills, large surfaces */
  --accent-tint: #DCDDCF;
  --deep: #404334; --deep-soft: #BFC1AE; --olive-light: #BCBFA4; --brand-olive: #7F8269;
  /* dark sections, lighter (18/10, client): olive charcoal instead of near-black.
     Contrast on --night: text 9.1:1, soft 6.6:1, olive 5.7:1; on --night-2 (panels): soft 5.5:1, olive 4.8:1. */
  --night: #3B3F31; --night-2: #474B3C; --on-night: #EFEBE0; --on-night-soft: #C8CCBC; --glow: #BCBFA4;
  /* accent aliases used by the motion/hover layer (18/10); the palette itself is the original one */
  --sage-brand: var(--glow); --taupe: var(--glow); --taupe-light: var(--glow); --taupe-deep: var(--accent);
  --line: rgba(32,39,31,.16); --line-soft: rgba(32,39,31,.09);
  /* type */
  --serif: "Newsreader", "Inward Serif GR", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", "Inward Sans GR", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "Inward Mono GR", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --t-display: clamp(44px, 7.4vw, 96px);
  --t-h2: clamp(32px, 4.4vw, 60px);
  --t-h3: clamp(24px, 2.6vw, 32px);
  --t-lead: clamp(19px, 1.6vw, 22px);
  --t-body: 18px; --t-small: 15px; --t-label: 13px;
  /* space: 8px base */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;
  --sec-top: 128px; --sec-bot: 160px;
  --gutter: 32px; --maxw: 1240px;
  /* motion */
  --ease: cubic-bezier(.22, 1, .36, 1);        /* entrances */
  --ease-ui: cubic-bezier(.4, 0, .6, 1);       /* state changes */
  --dur-ui: 360ms; --dur-in: 500ms;
  --rise: 14px;
}
@media (max-width: 734px) {
  :root { --t-body: 17px; --t-small: 14px; --t-label: 12px; --sec-top: 80px; --sec-bot: 96px; --gutter: 24px; --rise: 12px; }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
html:not(.reduce) { scroll-behavior: smooth; }
body { font-family: var(--sans); font-size: var(--t-body); line-height: 1.6; color: var(--ink); background: var(--canvas); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.dark :focus-visible { outline-color: var(--glow); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: normal; }
.skip { position: fixed; left: 16px; top: 12px; transform: translateY(-120px); z-index: 300; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 8px; text-decoration: none; transition: transform var(--dur-ui) var(--ease-ui); }
.skip:focus { transform: none; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--sec-top) 0 var(--sec-bot); position: relative; }
/* anchor targets clear the fixed header (07-elegxos §50) */
section[id], [id]:target { scroll-margin-top: 96px; }
/* two light sections in a row: one gap, not two (18/10) */
.section:not(.dark) + .section:not(.dark) { padding-top: calc(var(--sec-top) * .5); }
.section:not(.dark):has(+ .section:not(.dark)) { padding-bottom: calc(var(--sec-bot) * .5); }
.dark { background: var(--night); color: var(--on-night); }
.dark .eyebrow, .dark .tlink { color: var(--glow); }
.dark .lead { color: var(--on-night-soft); }

/* ---------- type ---------- */
.eyebrow { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); font-weight: 500; display: inline-flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.display, .h2, .h3 { font-family: var(--serif); font-weight: 400; text-wrap: balance; }
.display { font-size: var(--t-display); line-height: .98; letter-spacing: -.015em; }
.h2 { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.012em; }
.h3 { font-size: var(--t-h3); line-height: 1.1; letter-spacing: -.005em; }
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
.it { font-family: var(--serif); font-style: italic; }
.section-head { max-width: 720px; }
.section-head .h2 { margin-top: var(--s3); }
.section-head .lead { margin-top: var(--s3); }
.label { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .04em; color: var(--ink-faint); }

/* ---------- actions: filled pill + text link ---------- */
.btn { font-size: var(--t-small); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 26px; border-radius: 100px; text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-ui) var(--ease-ui), background-color var(--dur-ui) var(--ease-ui), box-shadow var(--dur-ui) var(--ease-ui); }
.btn-lg { min-height: 48px; padding: 0 30px; }
.btn-primary { background: var(--accent); color: var(--paper); }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); }
.btn-light { background: var(--on-night); color: var(--night); }
.btn-light:hover { background: #fff; }
.btn-light:hover { transform: translateY(-2px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.arr { display: inline-block; width: 1em; height: 1em; transition: transform var(--dur-ui) var(--ease-ui); flex: none; }
.btn:hover .arr, .tlink:hover .arr { transform: translateX(4px); }
.tlink { font-size: var(--t-small); font-weight: 600; color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; position: relative; }
.tlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(.0); transform-origin: left; transition: transform var(--dur-ui) var(--ease-ui); }
.tlink:hover::after, .tlink:focus-visible::after { transform: scaleX(1); }

/* ---------- motion: section choreography lives in xoro.css + xoro-site.css (library #32); hero timeline in sections.css ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}

/* ---------- nav ---------- */
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; background: var(--accent); z-index: 200; transform: scaleX(0); transform-origin: left; }
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; padding: 16px 0; }
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--canvas) 88%, transparent); box-shadow: 0 1px 0 var(--line-soft); opacity: 0; transition: opacity .4s var(--ease-ui); }
.nav.scrolled::before { opacity: 1; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }   /* blur only once it is visible: no blur layer under the header's entry */
.nav { color: var(--ink); transition: color .3s var(--ease-ui); }
.nav:not(.scrolled) { color: var(--on-night); }
.nav:not(.scrolled) .logo-tag { color: var(--on-night-soft); }
.nav:not(.scrolled) .burger span, .nav:not(.scrolled) .burger span::before, .nav:not(.scrolled) .burger span::after { background: var(--on-night); }
.nav:not(.scrolled) .nav-cta-desktop { background: var(--on-night); color: var(--night); }
.nav:not(.scrolled) .nav-links a:not(.btn)::after { background: var(--glow); }
.nav-links.open { color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 28px; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.logo { text-decoration: none; display: inline-flex; flex-direction: column; gap: 5px; line-height: 1; min-height: 44px; justify-content: center; }
.logo-mark { font-size: 23px; letter-spacing: .005em; white-space: nowrap; display: inline-flex; align-items: center; }
.logo-box { border: 1.5px solid var(--brand-olive); padding: 1px 4px 2px; margin: 0 1px; }
.logo-tag { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); padding-left: 2px; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a:not(.btn) { font-size: var(--t-small); font-weight: 500; text-decoration: none; position: relative; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.nav-links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-ui) var(--ease-ui); }
.nav-links a:not(.btn):hover::after, .nav-links a[aria-current="true"]::after { transform: scaleX(1); }
.burger { display: none; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; }
.burger span, .burger span::before, .burger span::after { display: block; width: 20px; height: 1.5px; background: currentColor; position: relative; content: ""; }
.burger span::before { position: absolute; top: -6px; } .burger span::after { position: absolute; top: 6px; }
.panel-close { display: none; }
.scrim { position: fixed; inset: 0; background: rgba(32,39,31,.35); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-ui); z-index: 90; }  /* below the header (z 100), whose panel creates the menu layer */
@media (max-width: 940px) {
  .burger { display: inline-flex; }
  .nav-cta-desktop { display: none; }
  .nav-links { position: fixed; top: 0; right: 0; bottom: 0; width: min(82vw, 340px); background: var(--paper); z-index: 150; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 4px; padding: 76px 28px 28px; translate: 100% 0; visibility: hidden; transition: translate .55s var(--ease), visibility 0s .55s; box-shadow: -24px 0 60px -30px rgba(32,39,31,.4); }
  .nav-links.open { translate: 0 0; visibility: visible; transition: translate .55s var(--ease), visibility 0s; }
  .nav-links a:not(.btn), .nav-links .nav-sub-t { font-size: 18px; font-family: var(--sans); font-weight: 500; }   /* one family in the panel */
  .nav-links .btn { margin-top: var(--s3); }
  .panel-close { display: inline-flex; position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; align-items: center; justify-content: center; font-size: 26px; line-height: 1; border-radius: 50%; }
  .scrim.on { opacity: 1; pointer-events: auto; }
}
@media (min-width: 941px) { .nav-links .nav-cta-panel { display: none; } }

/* mobile: the label under the logo stays readable (K3 >= 12px) */
@media (max-width: 768px) { .logo-tag { font-size: 12px; letter-spacing: .16em; } }