:root{
  --ink:#1e271d;
  --muted:#66705f;
  --paper:#f2eee3;
  --paper-2:#e7e0d0;
  --green:#315b3d;
  --green-soft:#d8e0cf;
  --rust:#a84b32;
  --gold:#c89d43;
  --line:rgba(30,39,29,.16);
  --white:#fffdf7;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6}
a{color:inherit}
.site-header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(20px,4vw,64px);background:rgba(242,238,227,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;font-weight:700}.brand-mark{color:var(--rust)}
nav{display:flex;gap:24px}nav a{text-decoration:none;font-size:.92rem;color:var(--muted)}nav a:hover{color:var(--ink)}
.hero{min-height:80vh;display:grid;grid-template-columns:1.05fr .95fr;gap:7vw;align-items:center;padding:clamp(56px,8vw,110px) clamp(20px,7vw,108px)}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;font-weight:700;color:var(--green);margin:0 0 14px}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:400;line-height:1.08;margin-top:0}h1{font-size:clamp(3.3rem,7vw,7.4rem);max-width:10ch;margin-bottom:26px}h2{font-size:clamp(2.3rem,4vw,4.5rem)}h3{font-size:clamp(1.65rem,2.4vw,2.35rem);margin-bottom:4px}h3 em{display:block;font-size:.48em;color:var(--muted);margin-top:8px}.lede{font-size:clamp(1.08rem,1.4vw,1.28rem);max-width:62ch;color:#46503f}.hero-actions{display:flex;gap:18px;align-items:center;margin-top:28px}.button,.text-button{font:inherit}.button{display:inline-block;background:var(--ink);color:var(--white);padding:13px 18px;border-radius:999px;text-decoration:none}.text-button{background:none;border:0;border-bottom:1px solid var(--ink);padding:4px 0;cursor:pointer;color:var(--ink)}
.hero-illustration{max-width:560px;margin:auto}.hero-illustration svg{width:100%;height:auto;display:block}.sun{fill:#d4c08d}.trunk,.branch{fill:none;stroke:#514131;stroke-linecap:round}.trunk{stroke-width:18}.branch{stroke-width:9}.leafs{fill:#466b45}.blossoms{fill:#b24f36}.illustration-note{font-family:Georgia,"Times New Roman",serif;font-style:italic;color:var(--muted);max-width:34ch;margin:12px auto 0;text-align:center}
.context-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px clamp(20px,7vw,108px);background:var(--paper-2)}.context-strip p{max-width:1040px;margin:auto;font-size:1.05rem}
.guide-section{padding:90px clamp(20px,7vw,108px)}.section-heading{max-width:860px}.section-heading h2{max-width:14ch}.filter-row{display:flex;gap:9px;flex-wrap:wrap;margin:28px 0 36px}.chip{background:transparent;border:1px solid var(--line);border-radius:999px;padding:9px 14px;cursor:pointer;color:var(--ink)}.chip.active,.chip:hover{background:var(--ink);color:var(--white)}
.tree-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}.tree-card{grid-column:span 6;background:rgba(255,253,247,.62);border:1px solid var(--line);border-radius:24px;overflow:hidden;transition:transform .2s ease,opacity .2s ease}.tree-card:hover{transform:translateY(-3px)}.tree-card.hidden{display:none}.tree-card:nth-child(3){grid-column:span 12;display:grid;grid-template-columns:.78fr 1.22fr}.card-art{height:220px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}.tree-card:nth-child(3) .card-art{height:100%;min-height:360px;border-bottom:0;border-right:1px solid var(--line)}.card-art span{position:absolute;left:18px;top:14px;font-family:Georgia,"Times New Roman",serif;font-size:2rem;color:rgba(30,39,29,.65)}.card-art:before,.card-art:after{content:"";position:absolute;border-radius:50%}.art-karanj{background:linear-gradient(135deg,#d8d7a8,#8dac78)}.art-karanj:before{width:290px;height:120px;background:#41683f;right:-35px;top:44px;transform:rotate(-14deg)}.art-karanj:after{width:180px;height:70px;background:#d69aa5;left:90px;bottom:20px;transform:rotate(8deg)}.art-jalebi{background:linear-gradient(145deg,#e4c58e,#cda464)}.art-jalebi:before{width:270px;height:95px;border:23px solid #7b9a4d;right:10px;top:52px;transform:rotate(20deg)}.art-jalebi:after{width:180px;height:65px;border:18px solid #ca5b72;left:50px;bottom:22px;transform:rotate(-18deg)}.art-charcoal{background:linear-gradient(145deg,#c7d2b0,#708d70)}.art-charcoal:before{width:430px;height:135px;background:#354f36;left:-60px;top:84px;transform:rotate(-10deg)}.art-charcoal:after{width:120px;height:120px;background:radial-gradient(circle at 35% 35%,#6f4b34 0 9%,transparent 10%),radial-gradient(circle at 65% 45%,#6f4b34 0 8%,transparent 9%),radial-gradient(circle at 50% 70%,#6f4b34 0 7%,transparent 8%);right:40px;top:40px}.art-siris{background:linear-gradient(135deg,#d7d0a3,#8ea174)}.art-siris:before{width:370px;height:110px;background:#57704d;right:-70px;top:48px;transform:rotate(10deg)}.art-siris:after{width:260px;height:18px;background:#d4b777;left:80px;bottom:48px;box-shadow:0 22px 0 #d4b777,0 44px 0 #d4b777;transform:rotate(-8deg)}.art-gulmohar{background:linear-gradient(145deg,#e7c898,#b46c4e)}.art-gulmohar:before{width:360px;height:150px;background:#486d46;right:-20px;top:42px;transform:rotate(-12deg)}.art-gulmohar:after{width:240px;height:100px;background:radial-gradient(circle,#c7432f 0 34%,transparent 36%) 0 0/52px 52px;left:60px;bottom:24px}.card-body{padding:28px}.status-row{display:flex;justify-content:space-between;align-items:center;gap:14px;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em}.origin{padding:5px 9px;border-radius:999px;letter-spacing:.08em;font-weight:700}.origin.native{background:#d8e0cf;color:#315b3d}.origin.introduced{background:#ead8cc;color:#8d4b35}.local-name{margin:0 0 18px;color:var(--green);font-weight:600}details{border-top:1px solid var(--line);margin-top:24px;padding-top:16px}summary{cursor:pointer;font-weight:700}.notes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}.notes-grid h4{margin:0 0 4px;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--rust)}.notes-grid p{margin:0;color:#485245;font-size:.94rem}
.notebook{display:grid;grid-template-columns:1fr 1fr;gap:8vw;padding:100px clamp(20px,7vw,108px);background:var(--ink);color:var(--white)}.notebook .eyebrow{color:#c7d4bc}.notebook h2{max-width:12ch}.notebook-copy{font-size:1.14rem;color:#d9ddcf;align-self:end}.notebook-copy p:first-child{margin-top:0}
.sources{padding:56px clamp(20px,7vw,108px)}.sources details{max-width:900px;margin:auto}.source-list{color:var(--muted)}footer{display:flex;justify-content:space-between;gap:20px;padding:28px clamp(20px,7vw,108px);border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
@media(max-width:900px){nav{display:none}.hero{grid-template-columns:1fr;min-height:auto}.hero-copy{order:1}.hero-illustration{order:0;max-width:380px}.tree-card,.tree-card:nth-child(3){grid-column:span 12;display:block}.tree-card:nth-child(3) .card-art{height:220px;min-height:0;border-right:0;border-bottom:1px solid var(--line)}.notes-grid{grid-template-columns:1fr}.notebook{grid-template-columns:1fr}.section-heading h2{max-width:18ch}}
@media(max-width:560px){h1{font-size:3.4rem}.hero{padding-top:42px}.hero-actions{align-items:flex-start;flex-direction:column}.card-body{padding:22px}.context-strip{font-size:.95rem}footer{flex-direction:column}}


/* Botanical photographs */
.card-photo{margin:0;position:relative;height:260px;overflow:hidden;border-bottom:1px solid var(--line);background:var(--paper-2)}
.tree-card:nth-child(3) .card-photo{height:100%;min-height:390px;border-bottom:0;border-right:1px solid var(--line)}
.card-photo img,.card-photo svg{width:100%;height:100%;display:block;object-fit:cover;transition:transform .45s ease}
.tree-card:hover .card-photo img,.tree-card:hover .card-photo svg{transform:scale(1.025)}
.photo-number{position:absolute;left:16px;top:14px;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(242,238,227,.92);font-family:Georgia,"Times New Roman",serif;font-size:1.35rem;color:var(--ink);box-shadow:0 2px 12px rgba(30,39,29,.12)}
.card-photo figcaption{position:absolute;right:10px;bottom:9px;max-width:70%;padding:5px 8px;border-radius:7px;background:rgba(30,39,29,.72);color:#fffdf7;font-size:.66rem;line-height:1.25;backdrop-filter:blur(5px)}
.card-photo figcaption a{color:inherit;text-decoration:none}
.card-photo figcaption a:hover{text-decoration:underline}
@media(max-width:900px){.tree-card:nth-child(3) .card-photo{height:260px;min-height:0;border-right:0;border-bottom:1px solid var(--line)}}

.botanical-picture svg{background:var(--paper-2)}

/* User-uploaded tree photos */
.upload-photo{display:grid;place-items:center;background:rgba(231,224,208,.65)}
.upload-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;color:var(--muted);padding:28px}
.upload-empty strong{font-family:Georgia,"Times New Roman",serif;font-size:1.18rem;font-weight:400;color:var(--ink)}
.upload-empty span:last-child{font-size:.78rem}
.upload-icon{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;font-size:1.7rem;line-height:1;color:var(--green);margin-bottom:4px}
.uploaded-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.upload-button{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:3;background:rgba(30,39,29,.9);color:var(--white);padding:9px 14px;border-radius:999px;font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:0 3px 12px rgba(30,39,29,.14)}
.upload-button:hover{background:var(--green)}
.photo-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.upload-photo.has-photo .upload-empty{display:none}
.upload-photo.has-photo .upload-button{background:rgba(30,39,29,.78)}
.upload-photo .photo-number{z-index:3}
.tree-card:hover .upload-photo .uploaded-preview{transform:scale(1.025)}


/* Canopy upload slots */
.canopy-photo{position:relative;display:grid;place-items:center;min-height:190px;margin:22px 0 4px;border:1px dashed var(--line);border-radius:12px;overflow:hidden;background:rgba(231,224,208,.38)}
.canopy-photo .upload-empty{padding:22px}
.canopy-photo .upload-empty strong{font-size:1.05rem}
.canopy-photo .upload-button{bottom:12px}
.canopy-photo .uploaded-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.canopy-photo.has-photo{border-style:solid}
@media(max-width:700px){.canopy-photo{min-height:170px}}

/* Real canopy photograph in the hero */
.hero-illustration{max-width:680px;width:100%}
.hero-canopy-image{display:block;width:100%;height:clamp(360px,48vw,610px);object-fit:cover;border-radius:48% 48% 24px 24px;box-shadow:0 18px 50px rgba(30,39,29,.12)}
@media(max-width:900px){.hero-illustration{max-width:680px}.hero-canopy-image{height:min(68vw,480px);border-radius:24px}}