/* Walks and Wonders — shared design tokens (from DESIGN.md) */
:root {
  --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-ui: 'Jost', system-ui, -apple-system, sans-serif;

  --fs-display: clamp(3.0rem, 6vw, 5.6rem);
  --fs-h1: clamp(2.2rem, 4vw, 3.4rem);
  --fs-h2: clamp(1.7rem, 2.8vw, 2.4rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.8rem;
  --fs-label: 0.72rem;

  --lh-display: 1.1;
  --lh-heading: 1.25;
  --lh-body: 1.75;
  --ls-label: 0.3em;

  --c-text: #23201C;
  --c-text-2: #8C8981;
  --c-bg: #FFFFFF;
  --c-bg-2: #F6F6F5;
  --c-border: #DEDAD1;
  --c-accent: #2A4A6B;
  --c-on-img: #FFFFFF;

  --scrim-top: linear-gradient(to bottom, rgba(20,18,16,0.42) 0%, rgba(20,18,16,0) 42%);
  --scrim-bottom: linear-gradient(to top, rgba(20,18,16,0.58) 0%, rgba(20,18,16,0) 52%);

  --pad-block: clamp(4rem, 10vw, 9rem);
  --pad-inline: clamp(1.5rem, 6vw, 6rem);
  --maxw: 1200px;
  --measure: 66ch;
  --t-normal: 0.45s cubic-bezier(0.22,0.61,0.36,1);
  --t-slow: 0.6s cubic-bezier(0.22,0.61,0.36,1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; image-orientation: from-image; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 500; line-height: var(--lh-heading); }
em { font-style: italic; }

.eyebrow {
  font-family: var(--font-ui); font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--c-text-2); font-weight: 400;
}
.btn {
  display: inline-block; font-family: var(--font-ui); font-size: var(--fs-label);
  letter-spacing: 0.25em; text-transform: uppercase; padding: 1.05rem 2.6rem;
  border: 1px solid var(--c-border); color: var(--c-text);
  transition: color var(--t-normal), border-color var(--t-normal);
}
.btn:hover { color: var(--c-accent); border-color: var(--c-accent); }

/* Header (shared) */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem clamp(1.5rem, 6vw, 4rem); color: var(--c-on-img);
  transition: all var(--t-normal); border-bottom: 1px solid transparent;
}
.header.solid { background: var(--c-bg); color: var(--c-text); border-bottom-color: var(--c-border); padding-top: 1rem; padding-bottom: 1rem; }
.brand { display: flex; align-items: center; gap: 0.7rem; font-family: var(--font-heading); font-size: 1.35rem; letter-spacing: 0.04em; }
.brand .emblem { width: 30px; height: 30px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; font-family: var(--font-ui); font-size: 0.62rem; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.3rem); }
.nav a { font-family: var(--font-ui); font-size: var(--fs-label); letter-spacing: 0.22em; text-transform: uppercase; position: relative; padding-bottom: 3px; }
.nav a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: currentColor; transition: width var(--t-normal); }
.nav a:hover::after { width: 100%; }
.lang { font-family: var(--font-ui); font-size: var(--fs-label); letter-spacing: 0.16em; display: flex; gap: 0.4rem; }
.lang .off { opacity: 0.45; }

/* Hamburger — hidden on desktop; three lines drawn from the <span> (color follows header state) */
.nav-toggle { display: none; width: 44px; height: 44px; padding: 0; background: none; border: none; cursor: pointer; align-items: center; justify-content: center; color: currentColor; }
.nav-toggle span { position: relative; display: block; width: 22px; height: 1.5px; background: currentColor; transition: background var(--t-normal); }
.nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 0; width: 22px; height: 1.5px; background: currentColor; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }

@media (max-width: 860px) {
  .nav a, .lang { display: none; }
  .nav-toggle { display: inline-flex; }
}