/* ============================================================
   Garamont — the shop, in Resonance OS (Greenhouse register).
   One stylesheet for the shelf, the landing pages and the estate.
   Tokens live here and nowhere else.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Manrope:wght@300;400;500;600&display=swap');

:root {
  /* Ground */
  --green-900: #0A1C14;
  --green-800: #122E21;
  --green-700: #1B402E;
  --green-200: #D1E0D7;

  /* Bloom — the only reward colour */
  --gold-primary: #C5A059;
  --gold-light:   #E6D0A1;
  --gold-dark:    #9A7A3A;

  /* Periphery */
  --text-main:  #122E21;
  --text-muted: #5C7065;
  --text-light: #8A9C91;
  --border-light: #E5EBE7;

  /* Atmosphere */
  --bg-base:    #FAFAF8;
  --bg-surface: #FFFFFF;
  --bg-glass:   rgba(255, 255, 255, 0.7);

  /* Energy — sparingly, never an alert */
  --energy-deep: #D87050;

  --font-serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-sans:  'Manrope', system-ui, sans-serif;

  --display-xl: 64px;
  --display-m:  40px;
  --serif-l:    24px;
  --serif-m:    20px;
  --body:       16px;
  --body-s:     14px;
  --label:      12px;
  --label-s:    10px;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px;

  --r-l: 20px; --r-xl: 24px; --r-2xl: 30px; --r-pill: 999px;

  --shadow-rest: 0 1px 2px rgba(10, 28, 20, 0.04);
  --shadow-soft: 0 8px 24px rgba(10, 28, 20, 0.06);
  --shadow-glow: 0 0 24px rgba(197, 160, 89, 0.25);

  --ease-organic: cubic-bezier(0.165, 0.84, 0.44, 1);
  --dur-hover: 400ms;
  --dur-fade: 700ms;
  --dur-breathe: 15s;

  --measure: 54ch;
  --pad-x: clamp(var(--space-5), 6vw, var(--space-9));
}

/* Deep Rest — the night modifier, only ever a deepening */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-base:      #05100B;
    --bg-surface:   #0A1C14;
    --bg-glass:     rgba(10, 28, 20, 0.75);
    --text-main:    #FAFAF8;
    --text-muted:   #8A9C91;
    --text-light:   #5C7065;
    --border-light: #1B402E;
    --shadow-soft:  0 8px 24px rgba(0, 0, 0, 0.4);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg-base);
  color: var(--text-main);
  font: 400 var(--body)/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* ---- Atmosphere: two blobs on a breath, and paper under everything ---- */
.atmos { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.blob {
  position: absolute; width: 400px; height: 400px; border-radius: var(--r-pill);
  filter: blur(60px); opacity: 0.5;
  animation: breathe var(--dur-breathe) ease-in-out infinite alternate;
}
.blob.cool { top: -120px; left: -100px; background: var(--green-200); }
.blob.warm { bottom: -140px; right: -110px; background: var(--gold-light); animation-delay: -7s; }
@media (prefers-color-scheme: dark) { .blob { opacity: 0.15; } }
@keyframes breathe {
  from { transform: scale(1)    translateY(0); }
  to   { transform: scale(1.12) translateY(-16px); }
}
.noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
  * { transition-duration: 1ms !important; } /* resonance-ok — the person asked for stillness */
}

/* ---- The page ---- */
.wrap {
  position: relative; z-index: 2;
  max-width: 1080px; margin: 0 auto;
  padding: var(--pad-x) var(--pad-x) var(--space-9);
}
.wrap.narrow { max-width: 820px; }

/* ---- The trellis: caps labels that hold structure ---- */
.trellis {
  font-family: var(--font-sans);
  font-size: var(--label-s); font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-light);
}

header.page { padding: clamp(var(--space-7), 10vw, 120px) 0 var(--space-7); }
h1 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(var(--display-m), 7vw, var(--display-xl));
  line-height: 1.02; letter-spacing: -0.02em;
  margin: var(--space-5) 0 var(--space-4);
}
.lede {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: var(--serif-l); line-height: 1.5;
  color: var(--text-muted); max-width: var(--measure);
}

/* ---- Section break: one hairline with a caps label sitting on it ---- */
section { padding: var(--space-8) 0 0; }
.rule {
  display: flex; align-items: center; gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.rule::before, .rule::after {
  content: ""; flex: 1; height: 1px; background: var(--border-light);
}

/* ---- Cards on cream ---- */
.grid { display: grid; gap: var(--space-4); }
@media (min-width: 660px)  { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .grid { grid-template-columns: 1fr 1fr 1fr; } }

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-rest);
  padding: var(--space-5) var(--space-5) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
  min-height: 230px;
  transition: border-color var(--dur-hover) var(--ease-organic),
              box-shadow  var(--dur-hover) var(--ease-organic);
}
.card:hover { border-color: var(--gold-primary); box-shadow: var(--shadow-soft); }

.nm {
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--serif-l); line-height: 1.2;
  color: var(--text-main); text-decoration: none;
  transition: color var(--dur-hover) var(--ease-organic);
}
.nm:hover { color: var(--gold-dark); }
.ds {
  font-family: var(--font-serif); font-size: var(--serif-m);
  line-height: 1.45; color: var(--text-muted); flex: 1;
}
.pr {
  font-family: var(--font-sans); font-size: var(--body-s);
  font-variant-numeric: tabular-nums; color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ---- The way in ---- */
.buy, .ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: var(--body-s); font-weight: 500;
  letter-spacing: 0.06em; text-decoration: none; cursor: pointer;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--r-pill); border: 1px solid var(--green-900);
  background: var(--green-900); color: var(--bg-base);
  transition: background-color var(--dur-hover) var(--ease-organic),
              border-color     var(--dur-hover) var(--ease-organic),
              color            var(--dur-hover) var(--ease-organic),
              box-shadow       var(--dur-hover) var(--ease-organic);
}
.card .buy, .card .ghost { margin-top: var(--space-3); }
.buy:hover { background: var(--green-700); border-color: var(--gold-primary); box-shadow: var(--shadow-glow); }
.ghost { background: transparent; color: var(--text-main); border-color: var(--border-light); }
.ghost:hover { border-color: var(--gold-primary); color: var(--gold-dark); }

/* Already yours — an outline and a single gold dot. The dot, not the badge. */
.buy.owned {
  background: transparent; color: var(--text-muted);
  border-color: var(--border-light); cursor: default;
}
.buy.owned:hover { box-shadow: none; border-color: var(--border-light); }
.buy.owned::before {
  content: ""; width: var(--space-3); height: var(--space-3);
  border-radius: var(--r-pill); background: var(--gold-primary); opacity: 0.5;
  transition: opacity var(--dur-hover) var(--ease-organic);
}
.card:hover .buy.owned::before { opacity: 1; }

/* Not yet for sale — present, unhurried, not a locked door. */
.buy.soon {
  background: transparent; color: var(--text-light);
  border-color: var(--border-light); border-style: dashed; cursor: default;
}
.buy.soon:hover { box-shadow: none; border-color: var(--border-light); }

.tag {
  font-family: var(--font-sans); font-size: var(--label-s); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-light);
  border: 1px solid var(--border-light); border-radius: var(--r-pill);
  padding: var(--space-1) var(--space-3);
}

/* ---- Whispers: empty states and quiet notes ---- */
.whisper {
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--serif-m); color: var(--text-light);
  padding: var(--space-6) 0;
}
.note {
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--body); color: var(--text-light);
  margin-top: var(--space-5); max-width: var(--measure);
}

/* ---- A word that arrives without knocking ---- */
.flash {
  position: fixed; left: 50%; bottom: var(--space-7); transform: translateX(-50%);
  z-index: 3;
  background: var(--bg-glass); backdrop-filter: blur(12px);
  border: 1px solid var(--gold-primary); border-radius: var(--r-pill);
  box-shadow: var(--shadow-soft);
  color: var(--text-main);
  font-family: var(--font-serif); font-style: italic; font-size: var(--serif-m);
  padding: var(--space-3) var(--space-6);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fade) var(--ease-organic);
}
.flash.on { opacity: 1; }

a { color: var(--text-main); }
:focus-visible { outline: 1px solid var(--gold-primary); outline-offset: 3px; }

.back {
  font-family: var(--font-sans); font-size: var(--label-s); font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-light); text-decoration: none;
  transition: color var(--dur-hover) var(--ease-organic);
}
.back:hover { color: var(--gold-dark); }

.foot {
  margin-top: var(--space-9); padding-top: var(--space-5);
  border-top: 1px solid var(--border-light);
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--body); color: var(--text-light);
}
.foot a { color: var(--text-muted); text-decoration: none; }
.foot a:hover { color: var(--gold-dark); }

/* A row nobody has written a line for yet — present, not empty. */
.ds.quiet { font-style: italic; color: var(--text-light); }

/* The second way in: quieter than the first, and only when there is one. */
.card .ghost.look { margin-top: var(--space-2); }