/* tanso.bar — Cottagecore farmhouse laboratory for carbon */

:root {
  --meadow-cream: #e8d4b4;
  --harvest-gold: #d4a850;
  --carbon-dark: #3a3228;
  --sage-green: #6a8a5a;
  --petal-pink: #c4887a;
  --paper-light: #f4ede0;
  --charcoal: #4a4038;
}

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

html, body {
  background: var(--paper-light);
  color: var(--carbon-dark);
  font-family: "Lora", Georgia, serif;
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.8;
  overflow-x: hidden;
}

@keyframes drawIn {
  to { stroke-dashoffset: 0; }
}

@keyframes bloomIn {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.draw-stroke {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: drawIn 2.4s ease-out forwards;
}

.bloom {
  transform-origin: center;
  transform-box: fill-box;
  animation: bloomIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
  animation-delay: 1.6s;
}

/* HERO */
.hero {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--meadow-cream) 0%, #d4c4a4 60%, #c4b494 100%);
  padding: clamp(48px, 8vw, 120px) clamp(24px, 6vw, 96px);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hex-pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.4;
}

.molecule {
  position: absolute;
  width: clamp(140px, 18vw, 240px);
  height: clamp(140px, 18vw, 240px);
  pointer-events: none;
}

.molecule-tl { top: 4%; left: 4%; opacity: 0.55; }
.molecule-br { bottom: 8%; right: 4%; opacity: 0.55; }

.wildflower {
  position: absolute;
  width: 64px;
  height: 64px;
  pointer-events: none;
}

.wf-tl { top: 28px; left: clamp(20px, 4vw, 60px); }
.wf-tr { top: 28px; right: clamp(20px, 4vw, 60px); }
.wf-bl { bottom: 28px; left: clamp(20px, 4vw, 60px); }

.hero-content {
  position: relative;
  z-index: 5;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  opacity: 0;
  animation: fadeUp 1s ease-out 0.6s forwards;
}

.hero-overline {
  font-family: "Caveat", cursive;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--charcoal);
  letter-spacing: 0.1em;
  margin-bottom: 18px;
}

.hero-title {
  font-family: "Bebas Neue", "Lora", sans-serif;
  font-weight: 400;
  font-size: clamp(80px, 16vw, 200px);
  line-height: 0.9;
  letter-spacing: 0.08em;
  color: var(--carbon-dark);
  margin-bottom: 28px;
  text-shadow: 2px 2px 0 var(--harvest-gold);
}

.hero-tagline,
.hero-tagline2 {
  font-family: "Lora", serif;
  font-style: italic;
  font-size: clamp(17px, 1.7vw, 22px);
  color: var(--charcoal);
  margin-bottom: 6px;
}

.hero-meta {
  font-family: "Caveat", cursive;
  font-size: clamp(20px, 2.2vw, 28px);
  color: var(--sage-green);
  margin-top: 28px;
}

/* DASHBOARD */
.dashboard {
  background: var(--paper-light);
  padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 72px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: clamp(18px, 2.4vw, 28px);
  position: relative;
}

.dashboard::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 8% 12%, rgba(212, 168, 80, 0.06) 0, transparent 30%),
    radial-gradient(circle at 92% 80%, rgba(106, 138, 90, 0.06) 0, transparent 30%);
  pointer-events: none;
}

.panel {
  position: relative;
  background: var(--paper-light);
  border: 1.5px solid var(--charcoal);
  padding: clamp(20px, 2.4vw, 32px);
  cursor: default;
  transition: transform 220ms ease, filter 220ms ease, box-shadow 220ms ease;
  box-shadow: 4px 4px 0 rgba(74, 64, 56, 0.18);
}

.panel:hover {
  transform: scale(1.03);
  filter: brightness(1.05);
  box-shadow: 6px 6px 0 rgba(74, 64, 56, 0.32);
  z-index: 3;
}

.panel-large { grid-column: span 12; }
.panel-medium { grid-column: span 6; }
.panel-tall { grid-column: span 6; grid-row: span 2; }
.panel-small { grid-column: span 6; }

@media (min-width: 980px) {
  .panel-large { grid-column: span 7; grid-row: span 2; }
  .panel-medium { grid-column: span 5; }
  .panel-tall { grid-column: span 5; grid-row: span 2; }
  .panel-small { grid-column: span 7; }
  .panel-fact { grid-column: span 7; }
  .panel-allotrope { grid-column: span 5; }
  .panel-cycle { grid-column: span 7; }
  .panel-bloom { grid-column: span 5; }
}

@media (max-width: 720px) {
  .panel-large, .panel-medium, .panel-tall, .panel-small { grid-column: span 12; grid-row: auto; }
}

.panel-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--charcoal);
  background: var(--harvest-gold);
}

.corner-tl { top: -8px; left: -8px; transform: rotate(45deg); }
.corner-tr { top: -8px; right: -8px; transform: rotate(45deg); }
.corner-bl { bottom: -8px; left: -8px; transform: rotate(45deg); }
.corner-br { bottom: -8px; right: -8px; transform: rotate(45deg); }

.panel-handnote {
  font-family: "Caveat", cursive;
  font-size: clamp(16px, 1.7vw, 20px);
  color: var(--sage-green);
  margin-bottom: 8px;
}

.panel-title {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 48px);
  letter-spacing: 0.04em;
  color: var(--carbon-dark);
  margin-bottom: 16px;
  line-height: 1.05;
}

.panel-body {
  font-family: "Lora", serif;
  margin-bottom: 12px;
  color: var(--carbon-dark);
}

.panel-body.small { font-size: 14px; }

.panel-body em {
  color: var(--petal-pink);
  font-style: italic;
}

.panel-handsig {
  font-family: "Caveat", cursive;
  font-size: clamp(18px, 1.9vw, 22px);
  color: var(--charcoal);
  margin-top: 10px;
  text-align: right;
}

.diagram {
  width: 100%;
  height: auto;
  max-width: 280px;
  display: block;
  margin: 8px auto 16px;
}

.cycle-list {
  list-style: none;
  margin-top: 10px;
}

.cycle-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(74, 64, 56, 0.3);
  font-family: "Lora", serif;
  font-size: 16px;
}

.cycle-list li:last-child { border-bottom: none; }

.cycle-bullet {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: var(--harvest-gold);
  border: 1.5px solid var(--charcoal);
  border-radius: 50%;
  flex-shrink: 0;
}

.cycle-list li:nth-child(2) .cycle-bullet { background: var(--sage-green); }
.cycle-list li:nth-child(3) .cycle-bullet { background: var(--petal-pink); }
.cycle-list li:nth-child(4) .cycle-bullet { background: var(--carbon-dark); }

.bloom-quote {
  font-family: "Lora", serif;
  font-style: italic;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--carbon-dark);
  text-align: center;
  margin: 20px 0;
  line-height: 1.5;
}

.panel-bloom {
  background: linear-gradient(135deg, var(--paper-light) 0%, #f0e0c4 100%);
  text-align: center;
}

.panel-journal {
  background: linear-gradient(180deg, var(--paper-light) 0%, #ede1c8 100%);
  background-image:
    repeating-linear-gradient(0deg, transparent 0, transparent 28px, rgba(74, 64, 56, 0.07) 28px, rgba(74, 64, 56, 0.07) 29px);
}

/* FOOTER */
.site-footer {
  background: var(--carbon-dark);
  color: var(--meadow-cream);
  padding: clamp(40px, 6vw, 80px) clamp(24px, 6vw, 96px);
  text-align: center;
}

.footer-mark {
  font-family: "Caveat", cursive;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--harvest-gold);
  margin-bottom: 12px;
}

.footer-mark em { font-style: italic; color: var(--petal-pink); }

.footer-meta {
  font-family: "Lora", serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  opacity: 0.75;
}