/* tea.villas — watercolor travel-postcard aesthetic */

:root {
  --bg: #F4F5DE;
  --bg-soft: #ECEDD0;
  --paper: #FAFBE8;
  --ink: #27331F;
  --ink-2: rgba(39, 51, 31, 0.66);
  --ink-3: rgba(39, 51, 31, 0.42);
  --hair: rgba(39, 51, 31, 0.14);
  --hair-soft: rgba(39, 51, 31, 0.08);
  --leaf: #80C071;
  --matcha: #C2DA8E;
  --hills: #9AD68A;
  --sky: #89D5E0;
  --air: #9CE0EA;
  --sun: #D7C449;
  --sunset: #FB8721;
  --primary: #27331F;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.005em;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(1200px 800px at 80% -10%, rgba(215, 196, 73, 0.08), transparent 60%),
    radial-gradient(900px 700px at -10% 110%, rgba(154, 214, 138, 0.08), transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='340'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.15  0 0 0 0 0.2  0 0 0 0 0.12  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.display { font-family: "Newsreader", Georgia, serif; font-weight: 300; letter-spacing: -0.02em; line-height: 1.02; }
.display em { font-style: italic; font-weight: 300; }
.hand { font-family: "Caveat", cursive; font-weight: 500; letter-spacing: 0; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-feature-settings: "tnum"; letter-spacing: -0.01em; }
.pinyin { font-style: italic; }

.hair { border: 0; border-top: 1px solid var(--hair); height: 0; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--hair);
  font-size: 12.5px; color: var(--ink-2);
  backdrop-filter: blur(8px);
}
.chip.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip.leaf { background: var(--leaf); color: var(--ink); border-color: transparent; }

button { font-family: inherit; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(39,51,31,0.18); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

.photo-slot {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg,
      rgba(39,51,31,0.05) 0 1px,
      transparent 1px 9px),
    var(--bg-soft);
  color: var(--ink-3);
  border: 1px solid var(--hair);
}
.photo-slot::after {
  content: attr(data-slot);
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--paper);
  padding: 4px 8px; border-radius: 4px;
  border: 1px solid var(--hair);
  white-space: nowrap;
  max-width: calc(100% - 24px);
  overflow: hidden; text-overflow: ellipsis;
}
.photo-slot.tone-leaf { background: linear-gradient(180deg, rgba(154,214,138,0.5), rgba(128,192,113,0.6)); }
.photo-slot.tone-sky  { background: linear-gradient(180deg, rgba(156,224,234,0.45), rgba(137,213,224,0.55)); }
.photo-slot.tone-sun  { background: linear-gradient(180deg, rgba(215,196,73,0.35), rgba(251,135,33,0.35)); }
.photo-slot.tone-ink  { background: linear-gradient(180deg, rgba(39,51,31,0.85), rgba(39,51,31,0.7)); color: rgba(244,245,222,0.6); }
.photo-slot.tone-ink::after { background: rgba(39,51,31,0.85); color: rgba(244,245,222,0.7); border-color: rgba(244,245,222,0.15); }
.photo-slot.tone-matcha { background: linear-gradient(180deg, rgba(194,218,142,0.6), rgba(154,214,138,0.5)); }

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

.cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  border: 0; cursor: pointer;
  font-size: 14px; font-weight: 500; letter-spacing: 0.01em;
}
.cta:hover { background: #1a221a; }
.cta.ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink);
}
.cta.ghost:hover { background: rgba(39,51,31,0.06); }
.cta.warm { background: var(--sunset); color: #fff; }
.cta.warm:hover { background: #e87815; }

.route-fade { animation: rf 280ms cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes rf { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.wash-postcard {
  position: relative; overflow: hidden;
  border-radius: 18px;
  background: var(--paper);
  border: 1px solid var(--hair);
}

/* Layout helpers */
.tv-shell { max-width: 1280px; margin: 0 auto; }
.tv-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.tv-grid-2-tea { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: stretch; }
.tv-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.tv-grid-7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }

@media (max-width: 1080px) {
  .tv-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .tv-grid-2-tea { grid-template-columns: 1fr; }
  .tv-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .tv-grid-5 { grid-template-columns: 1fr 1fr; }
  .tv-grid-7 { grid-template-columns: repeat(4, 1fr); }
}