:root {
  /* Design vocabulary: clay dials “L1 → L2” flip tape. Include custom illustrations possible: Space Mono** coordinates */
  --terracotta: #B86A3D;
  --brick: #6E3A24;
  --oat: #F4E7D0;
  --seed: #FFE8A8;
  --sage: #7E9B68;
  --moss: #28351F;
  --marigold: #DFAE42;
  --soil: #3F2A1D;
  --display: "Fraunces", Georgia, serif;
  --body: "Nunito Sans", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--moss);
  font-family: var(--body);
  background:
    radial-gradient(circle at 8% 15%, rgba(223, 174, 66, .28), transparent 28rem),
    radial-gradient(circle at 86% 22%, rgba(126, 155, 104, .22), transparent 24rem),
    linear-gradient(135deg, #F4E7D0 0%, #FFE8A8 52%, #E9C99B 100%);
  overflow-x: hidden;
}

.botanical-paper {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  opacity: .56;
  background-image:
    linear-gradient(90deg, rgba(62, 42, 29, .035) 1px, transparent 1px),
    linear-gradient(rgba(62, 42, 29, .035) 1px, transparent 1px),
    radial-gradient(circle at 22% 68%, rgba(110, 58, 36, .08) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 30%, rgba(40, 53, 31, .08) 0 2px, transparent 3px);
  background-size: 42px 42px, 42px 42px, 86px 86px, 110px 110px;
}

.field-guide { width: min(1540px, 96vw); margin: 0 auto; }

.tray {
  min-height: 100vh;
  padding: clamp(22px, 4vw, 64px) 0;
  display: grid;
  gap: clamp(14px, 1.6vw, 24px);
  position: relative;
}

.tray::before {
  content: "";
  position: absolute;
  inset: clamp(10px, 2vw, 32px) -1.2vw;
  border-radius: 42px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), transparent 20%),
    linear-gradient(315deg, rgba(63,42,29,.2), transparent 28%),
    rgba(184, 106, 61, .09);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.42), inset 0 -16px 36px rgba(63,42,29,.11);
  z-index: -1;
}

.tile {
  position: relative;
  border-radius: 28px;
  padding: clamp(18px, 2vw, 34px);
  background:
    linear-gradient(145deg, rgba(255,255,255,.34), transparent 32%),
    linear-gradient(315deg, rgba(110,58,36,.09), transparent 38%),
    var(--oat);
  border: 1px solid rgba(110, 58, 36, .24);
  box-shadow: 0 18px 28px rgba(63, 42, 29, .18), inset 2px 2px 0 rgba(255,255,255,.55), inset -6px -8px 15px rgba(110,58,36,.12);
  transition: transform .32s ease, box-shadow .32s ease, filter .32s ease;
  overflow: hidden;
}

.tile::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 22px;
  pointer-events: none;
  border: 1px dashed rgba(110, 58, 36, .18);
  opacity: .7;
}

.pressable:hover,
.pressable.pressed {
  transform: translateY(4px) rotate(var(--tilt, 0deg));
  box-shadow: 0 8px 15px rgba(63, 42, 29, .2), inset 3px 4px 13px rgba(63,42,29,.17), inset -2px -2px 0 rgba(255,255,255,.36);
}

h1, h2 { font-family: var(--display); margin: 0; color: var(--moss); line-height: .93; font-weight: 850; font-variation-settings: "SOFT" 80, "WONK" 1; }
p { margin: .8rem 0 0; font-size: clamp(1rem, 1.16vw, 1.22rem); line-height: 1.46; }

.coordinate, .mono-label, .clay-badge, .label-pin, .tab-hinge, .seed-note {
  font-family: var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .76rem;
}

.potting-bench {
  grid-template-columns: 1.15fr .78fr .58fr;
  grid-template-rows: auto 1.05fr .82fr .58fr;
}

.tray-header { grid-column: 1 / 4; display: flex; justify-content: space-between; align-items: center; }
.seed-strip { background: var(--seed); border-radius: 999px; padding: 15px 24px; box-shadow: 0 10px 18px rgba(63,42,29,.14), inset 0 3px 0 rgba(255,255,255,.42); }
.title-slab { grid-column: 1 / 3; grid-row: 2 / 4; background: linear-gradient(145deg, #C97B4D, #B86A3D 60%, #9E5934); color: var(--seed); border-color: rgba(110,58,36,.5); }
.title-slab h1, .title-slab p { color: var(--seed); text-shadow: 0 2px 0 rgba(63,42,29,.16); }
.wordmark { font-size: clamp(4.5rem, 14vw, 13rem); letter-spacing: -.08em; display: flex; flex-direction: column; }
.rise-word { transform: translateY(-5px); animation: claySettle 1.2s cubic-bezier(.2,.8,.2,1) both; }
.clay-badge { display: inline-block; color: var(--soil); background: var(--marigold); padding: 9px 14px; border-radius: 999px; box-shadow: inset 0 -3px rgba(110,58,36,.16); }
.rollup-tag { grid-column: 3; grid-row: 2; background: var(--seed); transform: rotate(1deg); }
.validity { grid-column: 3; grid-row: 3; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 35% 25%, #FFE8A8, #DFAE42 70%); }
.ceramic-icon { font-family: var(--display); font-size: clamp(3.4rem, 8vw, 8rem); color: var(--brick); filter: drop-shadow(0 4px 0 rgba(255,255,255,.24)); }
.fraud-proof { grid-column: 1; grid-row: 4; background: linear-gradient(145deg, #F4E7D0, #E1C8A8); }
.bridge-panel { grid-column: 2 / 4; grid-row: 4; display: grid; grid-template-columns: .9fr 1fr; align-items: center; background: linear-gradient(145deg, #F4E7D0, #FFE8A8); }
.settlement-trough { grid-column: 1 / 4; min-height: 130px; background: linear-gradient(180deg, #6E3A24, #3F2A1D); color: var(--oat); }
.settlement-trough .mono-label, .settlement-trough p { color: var(--oat); }
.watering-can { width: 100%; color: var(--terracotta); overflow: visible; }
.water-drops { fill: var(--sage); animation: droplets 1.8s ease-in-out infinite; transform-origin: center; }

.label-pin, .tab-hinge {
  display: inline-block;
  color: var(--seed);
  background: var(--sage);
  padding: 8px 13px;
  border-radius: 8px 8px 14px 14px;
  transform-origin: 50% -18px;
  box-shadow: 0 6px 0 rgba(40,53,31,.12);
}
.pressable:hover .label-pin, .index-tab:hover { transform: rotate(-3deg); }

.trellis-layers { grid-template-columns: .76fr 1.12fr .72fr; grid-template-rows: auto .84fr .84fr; }
.paper-tab { grid-column: 1 / 4; background: var(--seed); }
.paper-tab h2, .drawer-title h2 { font-size: clamp(3rem, 7vw, 7rem); }
.base-trough { grid-column: 1; grid-row: 2 / 4; background: linear-gradient(180deg, #6E3A24, #3F2A1D); color: var(--oat); }
.base-trough .mono-label, .base-trough p { color: var(--oat); }
.upper-planter { grid-column: 2; grid-row: 2; background: #FFE8A8; }
.trellis-panel { grid-column: 2; grid-row: 3; background: #F4E7D0; }
.dial-tile { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background: radial-gradient(circle at 30% 20%, #FFE8A8, #B86A3D); color: var(--soil); }
.counter-card:first-of-type { grid-column: 3; grid-row: 2; }
.reverse { grid-column: 3; grid-row: 3; background: radial-gradient(circle at 30% 20%, #F4E7D0, #7E9B68); }
.counter { font-family: var(--mono); font-size: clamp(3rem, 7vw, 7rem); color: var(--soil); line-height: 1; }
.block-beads { position: absolute; inset: auto 28px 30px 28px; display: flex; gap: 10px; justify-content: center; transform: translateX(var(--bead-shift, 0px)); transition: transform .1s linear; }
.block-beads b { width: 38px; height: 28px; border-radius: 8px; background: var(--marigold); box-shadow: inset 0 3px rgba(255,255,255,.34), 0 8px 0 rgba(0,0,0,.12); }
.planter-illustration { min-height: 320px; position: relative; }
.planter { position: absolute; left: 5%; right: 5%; height: 70px; border-radius: 22px; display: grid; place-items: center; font-family: var(--mono); color: var(--seed); box-shadow: inset 0 4px rgba(255,255,255,.2), inset 0 -10px rgba(63,42,29,.2); }
.planter-top { top: 20px; background: var(--terracotta); transform: translateY(var(--stem-rise, 0px)); }
.planter-bottom { bottom: 20px; background: var(--soil); }
.stem { position: absolute; bottom: 87px; width: 12px; height: 150px; background: var(--sage); border-radius: 999px; transform-origin: bottom; transform: translateY(calc(var(--stem-rise, 0px) * -1)); }
.stem::before, .stem::after { content: ""; position: absolute; width: 36px; height: 20px; background: var(--sage); border-radius: 100% 0; opacity: .9; }
.stem::before { top: 42px; left: 6px; transform: rotate(-20deg); }
.stem::after { top: 82px; right: 6px; transform: rotate(205deg); }
.stem-a { left: 27%; transform: rotate(-8deg); }.stem-b { left: 49%; }.stem-c { left: 70%; transform: rotate(8deg); }
.trellis-svg { width: 100%; color: var(--sage); fill: var(--marigold); }
.trellis-line, .joint { fill: none; stroke: currentColor; stroke-width: 12; stroke-linecap: round; }
.joint { stroke-width: 7; opacity: .45; }
.pods { animation: podBob 3s ease-in-out infinite; }
.annotation-bubble { position: absolute; right: 24px; bottom: 22px; max-width: 260px; padding: 14px 18px; border-radius: 20px 20px 6px 20px; background: var(--seed); box-shadow: 0 10px 18px rgba(63,42,29,.16); font-weight: 800; }

.herbarium-index { grid-template-columns: 1fr 1fr .9fr; grid-template-rows: auto 1fr 1fr; }
.drawer-title { grid-column: 1 / 4; background: linear-gradient(145deg, #FFE8A8, #F4E7D0); }
.specimen-card { background: linear-gradient(145deg, #F8EBD4, #F4E7D0); }
.open-card { grid-column: 1; grid-row: 2 / 4; }
.pressed-flower { grid-column: 2; grid-row: 2; }
.index-stack { grid-column: 3; grid-row: 2 / 4; display: flex; flex-direction: column; gap: 12px; background: #D8B98D; }
.twine-map { grid-column: 2; grid-row: 3; }
.label-maker { margin-top: 42px; padding: 16px; font-family: var(--mono); background: var(--soil); color: var(--seed); border-radius: 12px; box-shadow: inset 0 0 0 4px rgba(255,232,168,.16); }
.flower-blocks { height: 180px; position: relative; margin: 18px auto; width: 180px; }
.flower-blocks i { position: absolute; left: 72px; top: 72px; width: 42px; height: 42px; border-radius: 14px 14px 22px 6px; background: var(--terracotta); transform-origin: 18px 75px; box-shadow: inset 3px 3px rgba(255,255,255,.2); }
.flower-blocks i:nth-child(1) { transform: rotate(0deg) translateY(-62px); }.flower-blocks i:nth-child(2) { transform: rotate(72deg) translateY(-62px); }.flower-blocks i:nth-child(3) { transform: rotate(144deg) translateY(-62px); }.flower-blocks i:nth-child(4) { transform: rotate(216deg) translateY(-62px); }.flower-blocks i:nth-child(5) { transform: rotate(288deg) translateY(-62px); }
.index-tab { align-self: flex-start; border: 0; font: 800 1rem var(--mono); text-transform: uppercase; padding: 13px 16px; border-radius: 10px 10px 18px 18px; background: var(--oat); color: var(--moss); box-shadow: 0 8px 0 rgba(63,42,29,.12); cursor: pointer; transition: transform .25s ease, background .25s ease; }
.index-tab.active { background: var(--marigold); color: var(--soil); }
.index-copy { margin-top: auto; border-radius: 22px; background: var(--seed); padding: 22px; font-size: 1.25rem; line-height: 1.45; box-shadow: inset 0 0 0 1px rgba(110,58,36,.18); }
.twine { position: relative; height: 130px; }
.twine i { position: absolute; height: 6px; background: var(--brick); border-radius: 999px; transform-origin: left; }
.twine i:nth-child(1) { width: 72%; top: 25px; left: 8%; transform: rotate(10deg); }.twine i:nth-child(2) { width: 62%; top: 70px; left: 20%; transform: rotate(-14deg); }.twine i:nth-child(3) { width: 48%; top: 103px; left: 33%; transform: rotate(18deg); }
.roots { position: absolute; inset: 38px 22px 8px; opacity: .8; }
.roots i { position: absolute; top: 0; width: 6px; height: 84px; border-radius: 999px; background: var(--sage); transform-origin: top; animation: rootReach 3s ease-in-out infinite alternate; }
.roots i:nth-child(1){left:25%;transform:rotate(20deg)}.roots i:nth-child(2){left:42%;transform:rotate(-9deg)}.roots i:nth-child(3){left:57%;transform:rotate(12deg)}.roots i:nth-child(4){left:72%;transform:rotate(-22deg)}

@keyframes claySettle { from { opacity: 0; transform: translateY(-34px) scale(1.06); filter: blur(4px); } to { opacity: 1; transform: translateY(-5px) scale(1); filter: blur(0); } }
@keyframes droplets { 0%,100% { transform: translateY(-3px); opacity: .45; } 50% { transform: translateY(7px); opacity: 1; } }
@keyframes podBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
@keyframes rootReach { from { height: 52px; } to { height: 108px; } }

@media (max-width: 900px) {
  .potting-bench, .trellis-layers, .herbarium-index { grid-template-columns: 1fr; grid-template-rows: auto; }
  .tray > *, .title-slab, .rollup-tag, .validity, .fraud-proof, .bridge-panel, .settlement-trough, .paper-tab, .base-trough, .upper-planter, .trellis-panel, .dial-tile, .drawer-title, .open-card, .pressed-flower, .index-stack, .twine-map { grid-column: 1 !important; grid-row: auto !important; }
  .bridge-panel { grid-template-columns: 1fr; }
  .wordmark { font-size: clamp(4rem, 22vw, 8rem); }
}