:root {
  /* warm theme — default */
  --c-bg:        #FBF6EC;
  --c-bg-alt:    #F4ECDB;
  --c-paper:     #FFFFFF;
  --c-ink:       #2A1F18;
  --c-ink-soft:  #6B5C4F;
  --c-line:      #E5DAC4;
  --c-orange:    #DA5A1E;
  --c-orange-d:  #B84612;
  --c-gold:      #C99216;
  --c-olive:     #7C7A35;
  --c-brown:     #6B3E14;
  --c-leaf:      #5E7A2C;
}
[data-theme="premium"] {
  --c-bg:        #1F140C;
  --c-bg-alt:    #2A1B11;
  --c-paper:     #2F1E13;
  --c-ink:       #F4E9D4;
  --c-ink-soft:  #C9B696;
  --c-line:      #4A3320;
  --c-orange:    #E5732B;
  --c-orange-d:  #C9591A;
  --c-gold:      #E6B544;
  --c-olive:     #A39A5A;
  --c-brown:     #8B5A2B;
  --c-leaf:      #88A655;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--c-bg);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.55;
}
.serif {
  font-family: 'Fraunces', 'Cormorant Garamond', serif;
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 50, 'WONK' 0;
}
.italic { font-style: italic; }
.eyebrow {
  font-family: 'DM Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  font-weight: 500;
  color: var(--c-orange);
}

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px;
  border-radius: 999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, color .15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--c-orange); color: #fff;
}
.btn-primary:hover { background: var(--c-orange-d); }
.btn-ghost {
  background: transparent; color: var(--c-ink); border-color: var(--c-ink);
}
.btn-ghost:hover { background: var(--c-ink); color: var(--c-bg); }
.btn-gold {
  background: var(--c-gold); color: #fff;
}

/* placeholder image — branded subtle stripe */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in oklch, var(--c-orange) 12%, var(--c-bg-alt)),
      color-mix(in oklch, var(--c-orange) 12%, var(--c-bg-alt)) 14px,
      var(--c-bg-alt) 14px,
      var(--c-bg-alt) 28px);
  overflow: hidden;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  color: var(--c-ink-soft);
  text-align: center;
  padding: 12px;
}
.ph-warm {
  background:
    repeating-linear-gradient(135deg,
      color-mix(in oklch, var(--c-gold) 14%, var(--c-bg-alt)),
      color-mix(in oklch, var(--c-gold) 14%, var(--c-bg-alt)) 14px,
      var(--c-bg-alt) 14px,
      var(--c-bg-alt) 28px);
}
.ph-leaf {
  background:
    repeating-linear-gradient(135deg,
      color-mix(in oklch, var(--c-leaf) 14%, var(--c-bg-alt)),
      color-mix(in oklch, var(--c-leaf) 14%, var(--c-bg-alt)) 14px,
      var(--c-bg-alt) 14px,
      var(--c-bg-alt) 28px);
}
.ph-label {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  padding: 4px 10px;
  border-radius: 4px;
}

/* mobile shell */
.shell {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}
.container {
  padding: 0 20px;
}
@media (min-width: 900px) {
  .container { padding: 0 48px; }
}

/* card */
.card {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  overflow: hidden;
}

/* divider */
.rule {
  height: 1px;
  background: var(--c-line);
  width: 100%;
}

/* simple chip */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--c-line);
  background: var(--c-paper);
  font-size: 13px; color: var(--c-ink);
  cursor: pointer;
  white-space: nowrap;
}
.chip-active {
  background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink);
}

/* fade-in scroll  */
.fade-in {
  opacity: 0; transform: translateY(8px);
  animation: fade-up .6s ease forwards;
}
@keyframes fade-up {
  to { opacity: 1; transform: none; }
}

/* underline link */
.ulink {
  color: var(--c-ink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.ulink:hover { color: var(--c-orange); }

/* hide scrollbar on horizontal rails */
.rail {
  display: flex; gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none; scrollbar-width: none;
  padding-bottom: 8px;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; flex: 0 0 auto; }

/* utility */
.hide-mobile { display: none; }
@media (min-width: 900px) {
  .hide-mobile { display: revert; }
  .hide-desktop { display: none !important; }
}