/* ==========================================================================
   L'Ami Studios — the studio itself.
   Warm paper under cold light: the aurora palette from the intro, cooled down
   and set on a page you can actually read.
   ========================================================================== */

:root {
  --paper: #f2efe7;
  --paper-warm: #f7f4ec;
  --paper-cool: #eaeef1;
  --ink: #16202e;
  --ink-soft: #3b4a5c;
  --muted: #667689;
  --line: rgba(22, 32, 46, 0.13);
  --teal: #2b8b77;
  --teal-deep: #1d6555;
  --violet: #675795;
  --night: #0c1226;
  --night-2: #131b3a;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

h1, h2, p { margin-top: 0; }

h1, h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 0 clamp(18px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
  background: rgba(242, 239, 231, 0.9);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

/* Same track as .section-inner, so the wordmark lines up with the headings. */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(1160px, 100%);
  margin: 0 auto;
  padding: 14px 0;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
}

.brand-mark { display: block; width: 34px; height: 34px; }
.brand-mark svg { display: block; width: 100%; height: 100%; }

.brand-name {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 26px);
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.005em;
}

.nav-links a { transition: color 0.2s; }
.nav-links a:hover { color: var(--teal-deep); }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding: clamp(72px, 14vh, 148px) clamp(18px, 4vw, 56px) clamp(180px, 26vh, 290px);
  overflow: hidden;
  background:
    radial-gradient(78% 52% at 50% -8%, rgba(43, 139, 119, 0.14), transparent 66%),
    radial-gradient(62% 44% at 88% 4%, rgba(103, 87, 149, 0.13), transparent 70%),
    linear-gradient(180deg, var(--paper-warm), var(--paper));
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: min(1160px, 100%);
  margin: 0 auto;
}

.eyebrow,
.section-label {
  margin: 0 0 18px;
  color: var(--teal-deep);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Scoped to .site: the journey has its own h1 and must not inherit these. */
.site h1 {
  max-width: 16ch;
  margin-bottom: 26px;
  font-size: clamp(2.9rem, 8vw, 6rem);
  line-height: 1.02;
}

.site h1 em {
  display: block;
  color: var(--teal-deep);
  font-style: italic;
  font-weight: 300;
}

.site h1:focus { outline: none; }

.hero-lede {
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 1.7vw, 1.18rem);
  line-height: 1.8;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

/* The tree line from the intro, planted at three depths as the page descends:
   near under the hero, far behind the company note, and nearer again where
   the page meets the footer. */
.ridge {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  pointer-events: none;
}

.ridge svg { display: block; width: 100%; height: 100%; }

.ridge--near { height: clamp(80px, 12vh, 130px); }
.ridge--mid  { height: clamp(64px, 10vh, 108px); }

/* The hero ridge carries the whole view from the intro — the range standing
   behind the tree line — so the walk north and the site share one horizon.
   The ridge that closes the page stays trees alone, a quieter echo of this
   rather than a second copy of it. */
.ridge--range { height: clamp(148px, 22vh, 236px); }

.ridge--range svg { position: absolute; }
.ridge--range .ridge-range { inset: 0; }

/* The tree line stands taller here than it does on its own, reaching well up
   into the range so the two read as one illustration rather than as trees
   sitting beneath a backdrop. Qualified by the parent because the plain
   `.ridge svg` rule above sets height: 100% and would otherwise win on
   specificity. */
.ridge--range .ridge-trees {
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(106px, 16vh, 176px);
}

/* The aurora stays in the intro. On paper it only ever read as a stain, so the
   pages carry the theme through the forest and the palette instead. */

.site-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Buttons & links ────────────────────────────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 30px;
  border-radius: 3px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.button:hover { transform: translateY(-1px); }

.button.primary {
  background: var(--ink);
  color: var(--paper-warm);
}

.button.primary:hover { background: var(--teal-deep); }

.button.ghost {
  border: 1.5px solid rgba(22, 32, 46, 0.3);
  color: var(--ink);
}

.button.ghost:hover {
  border-color: var(--teal-deep);
  color: var(--teal-deep);
}

.text-link {
  display: inline-flex;
  margin-top: 8px;
  color: var(--teal-deep);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.text-link:hover { color: var(--ink); }

.inline-link {
  color: var(--teal-deep);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ── Sections ───────────────────────────────────────────────────────────── */

.section { padding: clamp(64px, 10vw, 118px) clamp(18px, 4vw, 56px); }

/* The header is sticky, so anything an in-page link targets has to stop
   short of it rather than sliding underneath. */
[id] { scroll-margin-top: 88px; }

.section-inner {
  width: min(1160px, 100%);
  margin: 0 auto;
}

h2 {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.1;
}

.about { border-bottom: 1px solid var(--line); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(280px, 0.78fr);
  gap: clamp(28px, 7vw, 82px);
  align-items: start;
}

.split p:last-child {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.85;
}

/* ── Our products ───────────────────────────────────────────────────────── */

/* Relative and deep-footed because this is now the last section on the page,
   and it carries the closing tree line. */
.products {
  position: relative;
  padding-bottom: clamp(120px, 16vw, 190px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(64% 40% at 50% 0%, rgba(43, 139, 119, 0.09), transparent 70%),
    radial-gradient(48% 32% at 82% 6%, rgba(103, 87, 149, 0.08), transparent 74%);
}

.products > .section-inner > h2 { margin-bottom: clamp(28px, 4vw, 44px); }

.product-panel {
  padding: clamp(28px, 4vw, 52px);
  border-radius: 6px;
}

.product-panel + .product-panel { margin-top: 20px; }

.product-name {
  margin: 0 0 16px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Monkkey: its own room, in its own colours, inside the studio's page. */
.monkkey-panel {
  --monkkey-bg: #f0eae0;
  --monkkey-card: #e8e0d4;
  --monkkey-text: #1a1410;
  --monkkey-mute: #6e5e4e;
  --monkkey-faint: #ae9e8e;
  --monkkey-accent: #b8882a;
  --monkkey-accent-dim: #8a6418;

  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(270px, 1fr);
  gap: clamp(28px, 6vw, 72px);
  align-items: center;
  border: 1px solid rgba(26, 20, 16, 0.1);
  background: var(--monkkey-bg);
  color: var(--monkkey-text);
}

.monkkey-panel .product-name { color: var(--monkkey-text); }

.product-desc {
  max-width: 480px;
  margin-bottom: 28px;
  color: var(--monkkey-mute);
  font-size: 1rem;
  line-height: 1.8;
}

.product-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}

/* The next one. Dashed, quiet, and centred — it reads as a held space. */
.upnext-panel {
  border: 1px dashed rgba(22, 32, 46, 0.24);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(43, 139, 119, 0.07), transparent 72%),
    var(--paper-warm);
  text-align: center;
}

.upnext-arc {
  display: block;
  width: clamp(140px, 22vw, 210px);
  margin: 0 auto 18px;
}

.upnext-label {
  margin: 0 0 10px;
  color: var(--teal-deep);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.upnext-panel .product-name { color: var(--ink); }

.upnext-copy {
  max-width: 48ch;
  margin: 0 auto;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.85;
}

.upnext-panel .text-link { margin-top: 20px; }

.button.monkkey-btn {
  background: var(--monkkey-accent);
  color: #fffdf7;
}

.button.monkkey-btn:hover { background: var(--monkkey-accent-dim); }

.monkkey-panel .text-link {
  margin-top: 0;
  color: var(--monkkey-accent-dim);
}

.monkkey-panel .text-link:hover { color: var(--monkkey-text); }

.monkkey-preview {
  display: block;
  border-radius: 10px;
}

.monkkey-card {
  padding: clamp(28px, 4vw, 40px);
  border: 1px solid rgba(26, 20, 16, 0.1);
  border-radius: 10px;
  background: var(--monkkey-card);
  box-shadow: 0 28px 70px rgba(80, 50, 15, 0.16);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.monkkey-preview:hover .monkkey-card {
  transform: translateY(-3px);
  box-shadow: 0 34px 80px rgba(80, 50, 15, 0.2);
}

.monkkey-card-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 30px;
  color: var(--monkkey-text);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.monkkey-mark { width: 20px; height: 20px; flex-shrink: 0; }

.monkkey-tagline {
  margin-bottom: 14px;
  color: var(--monkkey-text);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.01em;
}

.monkkey-tagline .dim { color: var(--monkkey-faint); font-weight: 300; }
.monkkey-tagline .amber { color: var(--monkkey-accent); }

.monkkey-sub {
  margin-bottom: 22px;
  color: var(--monkkey-mute);
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.6;
}

.monkkey-cta {
  display: inline-block;
  color: var(--monkkey-text);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* ── Standalone pages (support, privacy, contact) ───────────────────────── */

/* Same paper, same light, same forest as the home page — these read as rooms
   in the one building rather than as detached documents. */
.page-hero {
  position: relative;
  padding: clamp(56px, 10vh, 104px) clamp(18px, 4vw, 56px) clamp(180px, 26vh, 290px);
  overflow: hidden;
  background:
    radial-gradient(78% 52% at 50% -8%, rgba(43, 139, 119, 0.14), transparent 66%),
    radial-gradient(62% 44% at 88% 4%, rgba(103, 87, 149, 0.13), transparent 70%),
    linear-gradient(180deg, var(--paper-warm), var(--paper));
}

.page-inner {
  position: relative;
  z-index: 1;
  width: min(1160px, 100%);
  margin: 0 auto;
}

/* Narrower than the home page's display type: these pages are read, not
   glanced at, so the heading sits closer to the body it introduces. */
.site .page-hero h1 {
  max-width: 18ch;
  margin-bottom: 22px;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
}

.page-lede {
  max-width: 54ch;
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 1.7vw, 1.16rem);
  line-height: 1.85;
}

.page-body {
  padding: clamp(56px, 8vw, 92px) clamp(18px, 4vw, 56px) clamp(72px, 10vw, 118px);
}

.page-body .page-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
}

.page-card {
  padding: clamp(26px, 3.4vw, 36px);
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper-warm);
}

.page-card h2 {
  margin-bottom: 12px;
  font-size: 1.5rem;
}

.page-card p {
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.85;
}

.page-card p:last-of-type { margin-bottom: 22px; }

/* A plain back link home, sitting under the cards on the same track. */
.page-back { padding: 0 clamp(18px, 4vw, 56px) clamp(64px, 9vw, 104px); }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.site-footer {
  padding: 40px clamp(18px, 4vw, 56px);
  border-top: 1px solid var(--line);
  background: var(--paper-warm);
  color: var(--muted);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  font-size: 0.9rem;
}

.footer-inner p { margin: 0; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.005em;
}

.footer-links a { transition: color 0.2s; }
.footer-links a:hover { color: var(--teal-deep); }

/* The intro is a second visit, not a destination, so it lives in the footer
   alongside the other utility links — the place people look for secondary
   tasks once they have finished with the page. Inheriting the footer's type
   entirely is the point: it should read as one more quiet link, not a control.

   Only offered once journey.js is running — without it there is no intro. */
.replay-link {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: color 0.2s;
}

body.js-journey .replay-link { display: inline-flex; }

.replay-link:hover { color: var(--teal-deep); }

.replay-link svg {
  width: 15px;
  height: 15px;
  opacity: 0.85;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 840px) {
  .split,
  .monkkey-panel {
    grid-template-columns: 1fr;
  }

  .site-nav {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .nav-links { flex-wrap: wrap; }

  /* The nav wraps to two rows here, so anchors need more room to clear it. */
  [id] { scroll-margin-top: 140px; }
}

@media (max-width: 520px) {
  .nav-links { gap: 12px 18px; font-size: 0.8rem; }
  h1 { font-size: 2.9rem; }
  .button { width: 100%; }
  .page-card { padding: 24px 22px; }
  .product-panel { padding: 26px 22px; }

  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .button:hover,
  .monkkey-preview:hover .monkkey-card {
    transform: none;
  }
}