@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=EB+Garamond:wght@500;600&family=Great+Vibes&family=Inter:wght@300;400;500;600&display=swap');

:root{
  --gold:#d8ad63;
  --gold2:#f3d89c;
  --ink:#090807;
  --text:#f7f2e9;
  --muted:#cfc5b8;
  --line:rgba(216,173,99,.32);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--text);font-family:Inter,Arial,sans-serif}
a{text-decoration:none;color:inherit}

.topbar{
  position:fixed;z-index:20;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:16px clamp(14px,4vw,52px);
  background:linear-gradient(180deg,rgba(0,0,0,.72),transparent)
}
.brand{letter-spacing:.25em;color:var(--gold2);font-size:13px}
.season-switch{
  display:flex;gap:4px;padding:4px;border:1px solid var(--line);
  border-radius:999px;background:rgba(0,0,0,.42);
  backdrop-filter:blur(12px);overflow:auto
}
.season-switch button{
  border:0;background:transparent;color:#d1c4b1;border-radius:999px;
  padding:8px 13px;cursor:pointer;white-space:nowrap
}
.season-switch button.active{background:rgba(216,173,99,.22);color:var(--gold2)}

.hero{position:relative;min-height:100vh;display:grid;place-items:center;overflow:hidden}
.hero-image{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  transition:opacity .5s ease,transform 8s ease
}
.hero:hover .hero-image{transform:scale(1.025)}
.shade{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.28) 55%,rgba(0,0,0,.72)),
    linear-gradient(90deg,rgba(0,0,0,.52),transparent 60%)
}
.hero-content{
  position:relative;z-index:2;width:min(760px,92vw);text-align:center;
  padding:28px clamp(18px,4vw,42px) 34px;border:1px solid var(--line);
  border-radius:30px;background:rgba(8,8,8,.38);backdrop-filter:blur(16px);
  box-shadow:0 30px 100px rgba(0,0,0,.48)
}
.logo{display:block;width:min(430px,92%);margin:0 auto 24px;border-radius:18px}
.eyebrow{color:var(--gold2);text-transform:uppercase;letter-spacing:.2em;font-size:12px}
h1,h2{font-family:'Cormorant Garamond',serif}
h1{font-size:clamp(50px,8vw,92px);line-height:.95;margin:12px 0 18px}
h2{font-size:clamp(42px,6vw,72px);line-height:1;margin:12px 0 20px}
.subtitle{font-size:clamp(18px,2.2vw,24px);line-height:1.55;color:var(--muted);max-width:650px;margin:0 auto 30px}
.actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{border-radius:999px;padding:15px 24px;font-weight:600;transition:.25s}
.btn:hover{transform:translateY(-2px)}
.primary{background:linear-gradient(135deg,#f3d89c,#b77a28);color:#17120b;box-shadow:0 15px 36px rgba(183,122,40,.24)}
.secondary{border:1px solid rgba(255,255,255,.52);background:rgba(0,0,0,.28)}
.scroll{position:absolute;z-index:3;bottom:18px;font-size:34px;color:var(--gold2);animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(7px)}}

.discover{
  padding:100px 22px;
  background:
    radial-gradient(circle at 50% 0,rgba(106,78,37,.18),transparent 35%),
    linear-gradient(180deg,#0a0908,#11100f 65%,#090807)
}
.intro{max-width:820px;margin:0 auto 55px;text-align:center}
.intro span{color:var(--gold2);letter-spacing:.18em;text-transform:uppercase;font-size:12px}
.intro p{color:var(--muted);font-size:20px;line-height:1.65}
.cards{max-width:1120px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards article{border:1px solid var(--line);border-radius:26px;padding:30px;background:rgba(255,255,255,.025);min-height:245px}
.icon{width:54px;height:54px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--gold2);font-size:24px}
.cards h3{font-family:'Cormorant Garamond',serif;color:var(--gold2);font-size:28px;letter-spacing:.1em}
.cards p{color:var(--muted);line-height:1.7}

.closing{text-align:center;margin-top:70px}
.closing p{font-family:'Cormorant Garamond',serif;color:var(--gold2);font-size:44px}
footer{text-align:center;padding:24px;background:#090807;color:#7f766a;font-size:12px}

/* POVESTEA TEASCULT — PAPIRUS LUNG, CU ZONĂ DE CITIRE LARGĂ */

.teascult-story{
  width:min(930px,calc(100% - 24px));
  margin:80px auto 66px;
  filter:drop-shadow(0 28px 40px rgba(0,0,0,.74))
}

.story-parchment{
  position:relative;
  padding:245px 132px 225px;
  background:url("/assets/img/Papirus.png?v=16") center/100% 100% no-repeat
}

.teascult-story h2{
  margin:0 0 22px;
  text-align:center;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(2.8rem,5vw,4.25rem);
  line-height:1;
  color:#c98e2f;
  -webkit-text-stroke:.65px #241004;
  text-shadow:
    0 1px 0 #ffe6ad,
    0 3px 5px rgba(0,0,0,.34)
}

.story-divider{
  width:min(390px,72%);
  margin:18px auto 34px;
  display:flex;align-items:center;gap:12px;color:#70400e
}
.story-divider span{flex:1;height:1px;background:linear-gradient(90deg,transparent,#70400e,transparent)}
.story-divider b{font-size:18px;font-weight:400}

.story-content{
  color:#170a02;
  font-family:"EB Garamond",Georgia,"Times New Roman",serif;
  font-size:clamp(1.03rem,1.20vw,1.12rem);
  line-height:1.58;
  font-weight:600;
  text-align:left;
  text-shadow:0 1px 0 rgba(255,244,215,.42)
}
.story-content p{margin:0 0 16px}

.story-signature{
  margin:38px 0 0;
  text-align:center;
  color:#a96817;
  font-family:"Great Vibes","Brush Script MT","Segoe Script",cursive;
  font-size:clamp(2.5rem,5vw,3.7rem);
  text-shadow:
    0 1px 0 #ffe6ad,
    0 2px 4px rgba(0,0,0,.30)
}
.story-signature::before,.story-signature::after{
  content:"";display:inline-block;width:clamp(24px,6vw,74px);height:1px;
  margin:0 11px 10px;background:linear-gradient(90deg,transparent,#70400e,transparent)
}

@media(max-width:760px){
  .topbar{padding:11px 10px;align-items:flex-start;gap:8px}
  .brand{padding-top:10px}
  .season-switch{max-width:75vw}
  .season-switch button{padding:8px 11px;font-size:12px}
  .hero{min-height:100svh}
  .hero-content{margin-top:60px;border-radius:24px}
  .logo{width:min(370px,96%)}
  .cards{grid-template-columns:1fr}
  .actions a{width:100%}
}

@media(max-width:720px){
  .discover{padding-left:7px;padding-right:7px}
  .teascult-story{width:100%;margin:52px auto 44px}
  .story-parchment{padding:190px 56px 168px}
  .teascult-story h2{font-size:2.35rem;margin-bottom:13px}
  .story-divider{width:64%;margin:13px auto 23px}
  .story-content{font-size:.89rem;line-height:1.48}
  .story-content p{margin-bottom:11px}
  .story-signature{margin-top:30px;font-size:2.25rem}
  .closing{margin-top:50px}
}

@media(max-width:430px){
  .story-parchment{padding:176px 52px 154px}
  .teascult-story h2{font-size:2.08rem}
  .story-content{font-size:.82rem;line-height:1.44}
  .story-content p{margin-bottom:10px}
  .story-signature{font-size:2.03rem}
  .closing p{font-size:36px}
}
.top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.about-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border:1px solid rgba(216,173,99,.28);
  border-radius:999px;
  background:rgba(0,0,0,.28);
  color:#d8c8ad;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
  backdrop-filter:blur(10px);
}

.about-link:hover{
  background:rgba(216,173,99,.16);
  color:#f3d89c;
}

@media(max-width:760px){
  .top-actions{
    gap:6px;
  }

  .about-link{
    padding:7px 9px;
    font-size:11px;
  }
}