/* sora.garden — a small sky garden of ideas
   Fonts: Playfair Display, Nunito, Caveat (Google Fonts) */

:root {
    --earth: #f5ede0;
    --foliage: #4a7c59;
    --petal: #e8a0b8;
    --sky: #a8c8e8;
    --bark: #6a4a30;
    --sunlight: #f0d060;
    --autumn: #d08040;
    --winter-cool: #8090a0;

    --foliage-soft: rgba(74, 124, 89, 0.08);
    --foliage-line: rgba(74, 124, 89, 0.2);
    --bark-soft: rgba(106, 74, 48, 0.1);
    --bark-line: rgba(106, 74, 48, 0.25);

    --plot-radius: 14px;
    --max-w: 1180px;

    --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-body: "Nunito", "Helvetica Neue", Arial, sans-serif;
    --font-label: "Caveat", "Bradley Hand", cursive;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--bark);
    background: var(--earth);
    line-height: 1.7;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    background-image:
        radial-gradient(1200px 600px at 10% -10%, rgba(168, 200, 232, 0.35), transparent 60%),
        radial-gradient(900px 500px at 90% 5%, rgba(240, 208, 96, 0.18), transparent 65%),
        radial-gradient(700px 400px at 50% 100%, rgba(74, 124, 89, 0.12), transparent 60%);
}

/* ---------- Sky backdrop ---------- */
.sky-backdrop {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.cloud {
    position: absolute;
    display: block;
    background: rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    filter: blur(6px);
    opacity: 0.85;
    will-change: transform;
}

.cloud::before,
.cloud::after {
    content: "";
    position: absolute;
    background: inherit;
    border-radius: 50%;
}

.cloud-1 {
    width: 220px;
    height: 60px;
    top: 8%;
    left: -25%;
    animation: drift 70s linear infinite;
}

.cloud-1::before {
    width: 110px;
    height: 110px;
    top: -55px;
    left: 30px;
}

.cloud-1::after {
    width: 90px;
    height: 90px;
    top: -40px;
    right: 20px;
}

.cloud-2 {
    width: 180px;
    height: 48px;
    top: 24%;
    left: -30%;
    animation: drift 95s linear infinite;
    animation-delay: -30s;
    opacity: 0.6;
}

.cloud-2::before {
    width: 90px;
    height: 90px;
    top: -45px;
    left: 22px;
}

.cloud-2::after {
    width: 70px;
    height: 70px;
    top: -32px;
    right: 16px;
}

.cloud-3 {
    width: 260px;
    height: 70px;
    top: 60%;
    left: -35%;
    animation: drift 120s linear infinite;
    animation-delay: -60s;
    opacity: 0.5;
}

.cloud-3::before {
    width: 130px;
    height: 130px;
    top: -65px;
    left: 36px;
}

.cloud-3::after {
    width: 100px;
    height: 100px;
    top: -45px;
    right: 24px;
}

@keyframes drift {
    0% { transform: translateX(0); }
    100% { transform: translateX(140vw); }
}

/* ---------- Header / trellis nav ---------- */
.garden-header {
    position: relative;
    z-index: 5;
    padding: 1.4rem 1.5rem 0.9rem;
    border-bottom: 1px solid var(--bark-line);
    background:
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(106,74,48,0.10) 10px, rgba(106,74,48,0.10) 11px),
        repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(106,74,48,0.07) 10px, rgba(106,74,48,0.07) 11px),
        rgba(245, 237, 224, 0.85);
    backdrop-filter: blur(4px);
}

.header-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.brand-mark {
    display: block;
    flex-shrink: 0;
    transform-origin: 50% 90%;
    animation: sway 6s ease-in-out infinite;
}

@keyframes sway {
    0%, 100% { transform: rotate(-2deg); }
    50%      { transform: rotate(2deg); }
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.brand-title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--foliage);
    margin: 0;
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    letter-spacing: 0.01em;
}

.brand-tag {
    font-family: var(--font-label);
    color: var(--bark);
    margin: 0.15rem 0 0;
    font-size: 1.05rem;
    opacity: 0.75;
}

.trellis-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.4rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--bark-line);
    background:
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(106,74,48,0.10) 10px, rgba(106,74,48,0.10) 11px),
        repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(106,74,48,0.06) 10px, rgba(106,74,48,0.06) 11px),
        rgba(255, 252, 244, 0.6);
}

.trellis-link {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--bark);
    text-decoration: none;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
    position: relative;
}

.trellis-link:hover {
    background: rgba(255, 255, 255, 0.7);
    color: var(--foliage);
    transform: translateY(-1px);
}

.trellis-link.is-active {
    background: var(--foliage);
    color: #fff;
    box-shadow: 0 4px 14px -8px rgba(74, 124, 89, 0.7);
}

.trellis-link[data-season="spring"].is-active { background: var(--foliage); }
.trellis-link[data-season="summer"].is-active { background: var(--sunlight); color: var(--bark); }
.trellis-link[data-season="autumn"].is-active { background: var(--autumn); color: #fff; }
.trellis-link[data-season="winter"].is-active { background: var(--winter-cool); color: #fff; }
.trellis-link[data-season="shed"].is-active   { background: var(--bark); color: var(--earth); }

/* ---------- Main / hero ---------- */
.garden-main {
    position: relative;
    z-index: 2;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}

.hero-bed {
    position: relative;
    padding: 3rem 2rem 4rem;
    margin-bottom: 3rem;
    border-radius: 28px;
    background:
        radial-gradient(600px 320px at 20% 0%, rgba(232, 160, 184, 0.18), transparent 65%),
        radial-gradient(500px 280px at 90% 100%, rgba(240, 208, 96, 0.18), transparent 60%),
        rgba(255, 252, 244, 0.55);
    border: 1px solid var(--foliage-line);
    box-shadow: 0 30px 60px -45px rgba(74, 124, 89, 0.45);
    overflow: hidden;
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

.hero-overline {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: rgba(232, 160, 184, 0.25);
    color: var(--bark);
    margin-bottom: 1.1rem;
    letter-spacing: 0.04em;
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--foliage);
    margin: 0 0 1rem;
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    line-height: 1.12;
}

.hero-lead {
    font-size: 1.08rem;
    color: var(--bark);
    max-width: 60ch;
    margin: 0 0 1.5rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.6rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.7rem 1.3rem;
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.btn-primary {
    background: var(--foliage);
    color: #fff;
    box-shadow: 0 10px 22px -16px rgba(74, 124, 89, 0.85);
}

.btn-primary:hover {
    background: #3f6d4d;
    transform: translateY(-2px);
}

.btn-ghost {
    background: transparent;
    color: var(--bark);
    border-color: var(--bark-line);
}

.btn-ghost:hover {
    background: rgba(106, 74, 48, 0.08);
    transform: translateY(-2px);
    border-color: var(--bark);
}

.hero-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    align-items: center;
    margin-top: 0.4rem;
    padding-top: 1.2rem;
    border-top: 1px dashed var(--foliage-line);
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--bark);
}

.legend-item .caveat-label {
    font-size: 1.05rem;
    color: var(--bark);
    opacity: 0.85;
}

.hero-vine {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    pointer-events: none;
    opacity: 0.7;
}

.hero-vine svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ---------- Caveat label utility ---------- */
.caveat-label {
    font-family: var(--font-label);
    font-weight: 400;
    font-size: 1.05rem;
    color: var(--bark);
    letter-spacing: 0.01em;
}

/* ---------- Growth icons ---------- */
.growth-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
}

.growth-icon[data-stage="sprout"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 22 V14' stroke='%236a4a30' stroke-width='1.4' fill='none'/><path d='M12 14 C8 13 6 10 6 7 C9 7 11 9 12 12 Z' fill='%234a7c59'/><path d='M12 14 C16 13 18 10 18 7 C15 7 13 9 12 12 Z' fill='%234a7c59'/></svg>");
}

.growth-icon[data-stage="seedling"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 22 V8' stroke='%236a4a30' stroke-width='1.4' fill='none'/><path d='M12 13 C8 12 6 9 6 6 C9 6 11 8 12 11 Z' fill='%234a7c59'/><path d='M12 10 C15 9 17 6 17 4 C14 4 12 6 12 8 Z' fill='%234a7c59'/><path d='M12 8 Q14 7 16 8' stroke='%234a7c59' stroke-width='1' fill='none'/></svg>");
}

.growth-icon[data-stage="bloom"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 22 V12' stroke='%236a4a30' stroke-width='1.4' fill='none'/><path d='M9 18 Q11 16 12 18' stroke='%234a7c59' stroke-width='1' fill='none'/><path d='M15 16 Q13 14 12 16' stroke='%234a7c59' stroke-width='1' fill='none'/><circle cx='12' cy='8' r='2' fill='%23f0d060'/><path d='M12 8 m -5 0 a 2 3 0 1 0 4 0 a 2 3 0 1 0 -4 0' fill='%23e8a0b8'/><path d='M12 8 m 1 0 a 2 3 0 1 0 4 0 a 2 3 0 1 0 -4 0' fill='%23e8a0b8'/><path d='M12 8 m -2 -3 a 3 2 0 1 0 4 0 a 3 2 0 1 0 -4 0' fill='%23e8a0b8'/><path d='M12 8 m -2 3 a 3 2 0 1 0 4 0 a 3 2 0 1 0 -4 0' fill='%23e8a0b8'/><circle cx='12' cy='8' r='1.6' fill='%23f0d060'/></svg>");
}

.growth-icon[data-stage="tree"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='10.6' y='14' width='2.8' height='8' fill='%236a4a30'/><circle cx='12' cy='10' r='6' fill='%234a7c59'/><circle cx='8' cy='8' r='3' fill='%234a7c59'/><circle cx='16' cy='8' r='3' fill='%234a7c59'/><circle cx='12' cy='5' r='3' fill='%234a7c59'/><circle cx='10' cy='10' r='0.8' fill='%23f0d060'/><circle cx='14' cy='8' r='0.8' fill='%23e8a0b8'/></svg>");
}

/* ---------- Season sections ---------- */
.season-section {
    position: relative;
    padding: 2.2rem 1.6rem 2.6rem;
    margin-bottom: 2.4rem;
    border-radius: 22px;
    border: 1px solid var(--foliage-line);
    background: rgba(255, 252, 244, 0.55);
    overflow: hidden;
    transition: transform 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
}

.season-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.65;
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 240px auto;
}

.season-section.is-visible {
    transform: translateY(0);
    box-shadow: 0 30px 60px -45px rgba(74, 124, 89, 0.5);
}

.season-spring {
    background:
        radial-gradient(500px 260px at 10% 0%, rgba(232, 160, 184, 0.22), transparent 60%),
        rgba(255, 252, 244, 0.55);
    border-color: rgba(232, 160, 184, 0.45);
}

.season-summer {
    background:
        radial-gradient(500px 260px at 90% 0%, rgba(240, 208, 96, 0.28), transparent 60%),
        radial-gradient(400px 200px at 5% 100%, rgba(168, 200, 232, 0.2), transparent 65%),
        rgba(255, 252, 244, 0.55);
    border-color: rgba(240, 208, 96, 0.55);
}

.season-autumn {
    background:
        radial-gradient(520px 280px at 100% 0%, rgba(208, 128, 64, 0.22), transparent 60%),
        radial-gradient(360px 200px at 0% 100%, rgba(106, 74, 48, 0.12), transparent 70%),
        rgba(255, 248, 236, 0.55);
    border-color: rgba(208, 128, 64, 0.5);
}

.season-winter {
    background:
        radial-gradient(540px 280px at 50% 0%, rgba(168, 200, 232, 0.32), transparent 65%),
        radial-gradient(360px 200px at 100% 100%, rgba(128, 144, 160, 0.2), transparent 70%),
        rgba(248, 250, 252, 0.55);
    border-color: rgba(128, 144, 160, 0.5);
}

.season-heading {
    margin-bottom: 1.4rem;
    max-width: 60ch;
}

.season-marker {
    display: inline-block;
    margin-bottom: 0.4rem;
    padding: 0.1rem 0.6rem;
    background: rgba(106, 74, 48, 0.08);
    border-radius: 999px;
}

.season-spring .season-marker { background: rgba(232, 160, 184, 0.28); }
.season-summer .season-marker { background: rgba(240, 208, 96, 0.32); }
.season-autumn .season-marker { background: rgba(208, 128, 64, 0.25); }
.season-winter .season-marker { background: rgba(128, 144, 160, 0.25); }

.season-title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--foliage);
    margin: 0 0 0.5rem;
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    line-height: 1.15;
}

.season-spring .season-title { color: var(--foliage); }
.season-summer .season-title { color: #6b5a14; }
.season-autumn .season-title { color: var(--autumn); }
.season-winter .season-title { color: var(--winter-cool); }

.season-blurb {
    margin: 0;
    color: var(--bark);
    opacity: 0.88;
}

/* ---------- Plot grid ---------- */
.plot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.plot-card {
    position: relative;
    background: var(--foliage-soft);
    border: 1px solid var(--foliage-line);
    border-radius: 8px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
    overflow: hidden;
}

.plot-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--foliage);
    opacity: 0.55;
    transform: scaleX(0.2);
    transform-origin: left center;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.plot-card[data-stage="seedling"]::after { transform: scaleX(0.45); }
.plot-card[data-stage="bloom"]::after    { transform: scaleX(0.75); background: var(--petal); opacity: 0.8; }
.plot-card[data-stage="tree"]::after     { transform: scaleX(1); background: var(--bark); opacity: 0.7; }

.plot-card:hover {
    transform: translateY(-4px);
    background: rgba(74, 124, 89, 0.13);
    border-color: rgba(74, 124, 89, 0.35);
    box-shadow: 0 18px 40px -28px rgba(74, 124, 89, 0.7);
}

.plot-card:hover::after {
    opacity: 0.95;
    transform: scaleX(1);
}

.season-summer .plot-card { background: rgba(240, 208, 96, 0.10); border-color: rgba(208, 168, 64, 0.35); }
.season-summer .plot-card:hover { background: rgba(240, 208, 96, 0.20); border-color: rgba(208, 168, 64, 0.55); }
.season-autumn .plot-card { background: rgba(208, 128, 64, 0.10); border-color: rgba(208, 128, 64, 0.32); }
.season-autumn .plot-card:hover { background: rgba(208, 128, 64, 0.18); border-color: rgba(208, 128, 64, 0.55); }
.season-winter .plot-card { background: rgba(128, 144, 160, 0.10); border-color: rgba(128, 144, 160, 0.32); }
.season-winter .plot-card:hover { background: rgba(128, 144, 160, 0.18); border-color: rgba(128, 144, 160, 0.55); }

.plot-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.plot-title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--foliage);
    font-size: 1.18rem;
    margin: 0;
    line-height: 1.25;
}

.season-summer .plot-title { color: #6b5a14; }
.season-autumn .plot-title { color: var(--autumn); }
.season-winter .plot-title { color: #50606e; }

.plot-body {
    margin: 0;
    color: var(--bark);
    font-size: 0.97rem;
    line-height: 1.6;
}

.plot-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding-top: 0.4rem;
    margin-top: auto;
    border-top: 1px dashed var(--foliage-line);
}

.plot-tag {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--foliage);
    background: rgba(74, 124, 89, 0.14);
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
}

.season-summer .plot-tag { color: #6b5a14; background: rgba(240, 208, 96, 0.32); }
.season-autumn .plot-tag { color: var(--autumn); background: rgba(208, 128, 64, 0.18); }
.season-winter .plot-tag { color: #50606e; background: rgba(128, 144, 160, 0.22); }

/* ---------- Shed section ---------- */
.shed-section {
    position: relative;
    padding: 2.2rem 1.6rem;
    border-radius: 22px;
    border: 1px solid var(--bark-line);
    background:
        repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(106,74,48,0.06) 14px, rgba(106,74,48,0.06) 15px),
        rgba(255, 252, 244, 0.7);
    overflow: hidden;
}

.shed-inner {
    display: grid;
    gap: 1.6rem;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}

.shed-card,
.shed-aside > * {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--bark-line);
    border-radius: 14px;
    padding: 1.4rem 1.5rem;
}

.shed-aside {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.shed-title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--bark);
    margin: 0.2rem 0 0.8rem;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

.shed-body {
    margin: 0 0 0.8rem;
    color: var(--bark);
}

.shed-list {
    list-style: none;
    margin: 0.5rem 0 1.2rem;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.shed-list li {
    padding-left: 0.2rem;
    color: var(--bark);
    font-size: 0.97rem;
}

.shed-list .caveat-label {
    color: var(--foliage);
    margin-right: 0.45rem;
    font-size: 1.1rem;
}

.seed-form {
    margin-top: 0.5rem;
    border-top: 1px dashed var(--bark-line);
    padding-top: 1rem;
}

.seed-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.3rem;
    flex-wrap: wrap;
}

.seed-row input[type="email"] {
    flex: 1 1 220px;
    min-width: 0;
    font: inherit;
    font-family: var(--font-body);
    color: var(--bark);
    background: var(--earth);
    border: 1px solid var(--bark-line);
    border-radius: 999px;
    padding: 0.7rem 1.1rem;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.seed-row input[type="email"]:hover,
.seed-row input[type="email"]:focus {
    border-color: var(--foliage);
    background: #fff;
    outline: none;
}

.seed-message {
    margin: 0.6rem 0 0;
    min-height: 1.3rem;
    color: var(--foliage);
    font-family: var(--font-label);
    font-size: 1.1rem;
}

.seed-message.is-error {
    color: var(--autumn);
}

/* watering can / weather */
.watering-can {
    position: relative;
}

.weather-line {
    margin: 0.2rem 0 0.9rem;
    font-size: 1rem;
    color: var(--bark);
}

.weather-line #weatherEmoji {
    font-size: 1.3rem;
    margin-right: 0.3rem;
}

.moon-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--bark-line);
}

.moon-phase {
    font-size: 1.4rem;
}

/* seasonal clock */
.seasonal-clock {
    text-align: left;
}

.clock-season {
    margin: 0.15rem 0 0.6rem;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--foliage);
    font-size: 1.6rem;
    text-transform: capitalize;
}

.season-dial {
    position: relative;
    width: 100%;
    max-width: 220px;
    aspect-ratio: 1 / 1;
    margin: 0.6rem auto 0.2rem;
    border-radius: 50%;
    border: 1px dashed var(--bark-line);
    background:
        conic-gradient(
            from -45deg,
            rgba(232, 160, 184, 0.35) 0 25%,
            rgba(240, 208, 96, 0.35) 25% 50%,
            rgba(208, 128, 64, 0.35) 50% 75%,
            rgba(168, 200, 232, 0.4) 75% 100%
        );
}

.dial-tick {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 16px;
    margin: -8px 0 0 -3px;
    background: var(--bark);
    border-radius: 2px;
    transform-origin: 50% 60px;
    opacity: 0.7;
}

.dial-tick[data-season="spring"] { transform: rotate(45deg)  translate(0, -90px); }
.dial-tick[data-season="summer"] { transform: rotate(135deg) translate(0, -90px); }
.dial-tick[data-season="autumn"] { transform: rotate(225deg) translate(0, -90px); }
.dial-tick[data-season="winter"] { transform: rotate(315deg) translate(0, -90px); }

.dial-needle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 42%;
    margin-left: -2px;
    background: linear-gradient(to top, var(--bark) 0%, var(--bark) 70%, var(--foliage) 100%);
    border-radius: 2px;
    transform-origin: 50% 100%;
    transform: translate(0, -100%) rotate(0deg);
    transition: transform 1s cubic-bezier(.7,.1,.3,1);
    box-shadow: 0 4px 8px -4px rgba(106, 74, 48, 0.6);
}

.dial-needle::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    background: var(--sunlight);
    border: 2px solid var(--bark);
    border-radius: 50%;
}

/* ---------- Footer ---------- */
.garden-footer {
    position: relative;
    z-index: 2;
    margin-top: 1rem;
    border-top: 1px solid var(--bark-line);
    background: rgba(255, 252, 244, 0.7);
}

.footer-trellis {
    height: 14px;
    background:
        repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(106,74,48,0.18) 8px, rgba(106,74,48,0.18) 9px),
        repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(106,74,48,0.12) 8px, rgba(106,74,48,0.12) 9px);
}

.footer-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 1.2rem 1.5rem 1.6rem;
    text-align: center;
}

.footer-inner .caveat-label {
    color: var(--bark);
    font-size: 1.1rem;
}

.footer-fine {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: var(--bark);
    opacity: 0.75;
}

/* ---------- Animations on scroll ---------- */
.season-section,
.plot-card {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s ease, transform 0.7s ease, box-shadow 0.5s ease, border-color 0.5s ease, background 0.5s ease;
}

.season-section.is-visible,
.plot-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.plot-card.is-visible:hover {
    transform: translateY(-4px);
}

/* ---------- Petals (JS-spawned) ---------- */
.petal-fall {
    position: fixed;
    top: -20px;
    width: 12px;
    height: 12px;
    border-radius: 60% 40% 60% 40% / 50% 60% 40% 50%;
    background: var(--petal);
    opacity: 0.85;
    pointer-events: none;
    z-index: 1;
    animation: petal-drop linear forwards;
}

.petal-fall.summer { background: var(--sunlight); }
.petal-fall.autumn { background: var(--autumn); border-radius: 30% 70% 30% 70% / 60% 40% 60% 40%; }
.petal-fall.winter {
    background: #ffffff;
    border: 1px solid var(--sky);
    border-radius: 50%;
}

@keyframes petal-drop {
    0%   { transform: translate3d(0, -40px, 0) rotate(0deg);   opacity: 0; }
    10%  { opacity: 0.9; }
    100% { transform: translate3d(80px, 110vh, 0) rotate(360deg); opacity: 0; }
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
    .shed-inner {
        grid-template-columns: 1fr;
    }

    .header-inner {
        justify-content: flex-start;
    }

    .trellis-nav {
        order: 3;
        width: 100%;
        justify-content: flex-start;
    }

    .hero-bed {
        padding: 2.2rem 1.2rem 3rem;
    }
}

@media (max-width: 540px) {
    .hero-actions { flex-direction: column; align-items: stretch; }
    .btn { width: 100%; }
    .plot-grid { gap: 1.1rem; }
    .season-section { padding: 1.6rem 1rem 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .petal-fall { display: none; }
}