/* ============================================================
   SILVA · 林 — 原始森林影像
   moss-green ground · silver butterflies · YouTube-style grid
   ============================================================ */

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/cormorant-garamond-normal-500.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/cormorant-garamond-normal-600.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/cormorant-garamond-normal-700.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('../fonts/cormorant-garamond-italic-500.woff2') format('woff2');}

:root{
  --bg0:#132017;          /* 苔藓墨绿 — moss ground */
  --bg1:#16271a;
  --panel:#19291c;        /* 卡片 */
  --panel-2:#1f3324;
  --line:rgba(206,224,196,.12);
  --line-strong:rgba(206,224,196,.24);
  --mist:#e9f0e1;         /* 雾白 */
  --mist-dim:#bccdb0;     /* 地衣 */
  --faint:#86987a;        /* 苔灰 */
  --moss-0:#16241a;--moss-1:#233a29;--moss-2:#33523a;--moss-3:#4d764f;
  --sun:#cdc37e;          /* 穿过林冠的光 */
  --sun-hi:#e8df9f;
  --fern:#a6c08f;
  --silver:#dfe6ea;
  --serif:'Cormorant Garamond','Songti SC','STSong','SimSun','Noto Serif CJK SC','Source Han Serif SC',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Noto Sans SC',sans-serif;
  --mono:'SF Mono','JetBrains Mono','Menlo',ui-monospace,'Courier New',monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg0);color:var(--mist);font-family:var(--serif);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:rgba(77,118,79,.55);color:#f3f8ed}
a{color:var(--sun-hi);text-decoration:none}
img{display:block;max-width:100%}

/* 苔藓质地 —— mottled moss ground behind everything */
body::before{content:"";position:fixed;inset:0;z-index:-5;pointer-events:none;
  background:
    radial-gradient(38% 30% at 12% 18%, rgba(46,74,48,.55), transparent 70%),
    radial-gradient(30% 26% at 82% 12%, rgba(30,52,34,.6), transparent 70%),
    radial-gradient(44% 34% at 68% 64%, rgba(40,66,44,.5), transparent 72%),
    radial-gradient(34% 30% at 24% 82%, rgba(26,44,30,.62), transparent 70%),
    radial-gradient(28% 24% at 50% 44%, rgba(52,82,58,.3), transparent 72%),
    linear-gradient(180deg,#15261a 0%,#101d14 55%,#0b160e 100%);}
/* moss grain */
body::after{content:"";position:fixed;inset:0;z-index:91;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ── 斑驳 · 破碎 · 神秘 —— weathered, broken, mysterious layers ── */
/* 1. 风化苔斑: broken organic blotches of light & shadow (soft-light over moss) */
.weather{position:fixed;inset:0;z-index:-4;pointer-events:none;opacity:.55;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.013' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  background-size:760px 760px}
/* 2. 破碎纹理: finer fractured grain, darkening (multiply) — 像风化的树皮 */
.weather::after{content:"";position:absolute;inset:0;opacity:.4;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.05 0.09' numOctaves='5' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size:420px 420px}
/* 3. 林叶碎影: dappled broken light (komorebi), slowly drifting */
.dapple{position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(7% 5% at 18% 22%, rgba(0,0,0,.34), transparent 70%),
    radial-gradient(5% 4% at 33% 12%, rgba(0,0,0,.28), transparent 70%),
    radial-gradient(9% 6% at 62% 30%, rgba(0,0,0,.3), transparent 72%),
    radial-gradient(6% 5% at 78% 18%, rgba(0,0,0,.26), transparent 70%),
    radial-gradient(8% 6% at 50% 56%, rgba(0,0,0,.28), transparent 72%),
    radial-gradient(5% 4% at 28% 68%, rgba(0,0,0,.26), transparent 70%),
    radial-gradient(7% 5% at 84% 62%, rgba(0,0,0,.3), transparent 72%),
    radial-gradient(6% 5% at 14% 88%, rgba(0,0,0,.26), transparent 70%),
    radial-gradient(9% 6% at 70% 86%, rgba(0,0,0,.3), transparent 72%),
    radial-gradient(5% 9% at 46% 4%, rgba(180,205,150,.06), transparent 70%);
  background-size:cover;mix-blend-mode:multiply;
  animation:drift 38s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-1.5%,-1%,0) scale(1.02)}to{transform:translate3d(2%,1.5%,0) scale(1.06)}}
/* 4. 漂移雾气: slow mist — mysterious */
.fog{position:fixed;inset:-10%;z-index:-3;pointer-events:none;opacity:.5;mix-blend-mode:screen;
  background:
    radial-gradient(40% 26% at 26% 30%, rgba(150,178,138,.16), transparent 70%),
    radial-gradient(46% 30% at 74% 66%, rgba(120,150,118,.14), transparent 72%),
    radial-gradient(34% 24% at 56% 18%, rgba(170,196,156,.1), transparent 70%);
  animation:mist 46s ease-in-out infinite alternate}
@keyframes mist{from{transform:translate3d(-3%,2%,0)}to{transform:translate3d(4%,-2%,0)}}
/* 5. 暗角: vignette — the mysterious dark beyond the light */
.vignette{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 36%, transparent 38%, rgba(6,11,7,.42) 78%, rgba(4,8,5,.72) 100%),
    linear-gradient(180deg, rgba(5,9,6,.4) 0%, transparent 18% 82%, rgba(4,8,5,.5) 100%)}

.wrap{max-width:1280px;margin:0 auto;padding:0 28px}

/* ---------------------------------- silver butterflies ---- */
.butterflies{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.bfly{position:absolute;width:60px;will-change:transform;filter:drop-shadow(0 5px 12px rgba(0,0,0,.4));
  animation:flit linear infinite}
.bfly .butterfly{width:100%;height:auto;display:block;overflow:visible}
.bf-wing-fill{fill:url(#silver);stroke:none}
.bf-hind{opacity:.82}
.bf-wing-line{fill:none;stroke:#eef3f6;stroke-width:1.4;opacity:.9}
.bf-vein{fill:none;stroke:#cdd7dd;stroke-width:.7;opacity:.5}
.bf-spot{fill:#f4f7f9;opacity:.85}
.bf-antenna{fill:none;stroke:#e6ecef;stroke-width:1.2;opacity:.85}
.bf-club{fill:#dbe2e7}
.bf-thorax,.bf-abdomen{fill:#c6cfd5}
.bf-wing{transform-box:view-box;transform-origin:50% 50%}
.bf-right{animation:flapR 7s ease-in-out infinite}
.bf-left{animation:flapL 7s ease-in-out infinite}
@keyframes flapR{0%,72%,100%{transform:scaleX(1)}76%{transform:scaleX(.4)}80%{transform:scaleX(.95)}84%{transform:scaleX(.55)}89%{transform:scaleX(1)}}
@keyframes flapL{0%,72%,100%{transform:scaleX(1)}76%{transform:scaleX(.4)}80%{transform:scaleX(.95)}84%{transform:scaleX(.55)}89%{transform:scaleX(1)}}
@keyframes flit{
  0%{transform:translate(-12vw,18vh) rotate(-8deg)}
  22%{transform:translate(22vw,6vh) rotate(7deg)}
  44%{transform:translate(48vw,30vh) rotate(-6deg)}
  66%{transform:translate(72vw,10vh) rotate(8deg)}
  88%{transform:translate(98vw,26vh) rotate(-5deg)}
  100%{transform:translate(114vw,16vh) rotate(-8deg)}}

/* ---------------------------- falling yellow leaves ---- */
.leaves{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.leaf-fall{position:absolute;top:-12%;will-change:transform;animation:leaffall 28s linear infinite}
.leaf-fall svg{display:block;width:100%;height:auto;overflow:visible;transform-origin:50% 0;
  animation:leafsway 4s ease-in-out infinite alternate;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
@keyframes leaffall{from{transform:translateY(-14vh) rotate(0deg)}to{transform:translateY(118vh) rotate(150deg)}}
@keyframes leafsway{from{transform:translateX(-15px) rotate(-20deg)}to{transform:translateX(17px) rotate(16deg)}}

/* ------------------------------------------------ nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(16,27,18,.66);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1280px;margin:0 auto;padding:13px 28px;display:flex;align-items:center;gap:14px}
.nav-mark{width:24px;height:38px;flex:none;opacity:.95}
.nav-mark svg{width:100%;height:100%;overflow:visible}
.nav-title{display:flex;flex-direction:column;line-height:1.15}
.nav-title .en{font-weight:600;font-size:15px;letter-spacing:.42em;text-transform:uppercase;color:var(--mist)}
.nav-title .cn{font-size:11.5px;letter-spacing:.62em;color:var(--faint)}
.nav-links{margin-left:auto;display:flex;gap:28px;align-items:center}
.nav-links a{font-size:14.5px;letter-spacing:.16em;color:var(--mist-dim);padding:4px 0;border-bottom:1px solid transparent;transition:.25s}
.nav-links a:hover{color:var(--sun-hi);border-bottom-color:var(--sun)}
.nav-links a.cta{border:1px solid var(--line-strong);border-radius:99px;padding:7px 18px;color:var(--mist)}
.nav-links a.cta:hover{border-color:var(--sun);background:rgba(205,195,126,.12);color:var(--sun-hi)}

/* ------------------------------------------- compact hero ---- */
.hero{position:relative;min-height:58vh;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;padding:84px 0 40px}
.shafts{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;mix-blend-mode:screen}
.shaft{position:absolute;top:-20%;height:150%;width:40vw;transform-origin:top center;
  background:linear-gradient(180deg,rgba(205,195,126,.18),rgba(159,185,138,.05) 45%,transparent 78%);
  filter:blur(16px);opacity:.55;animation:sway 17s ease-in-out infinite alternate}
.shaft.s1{left:-6%;transform:rotate(11deg);animation-delay:-2s}
.shaft.s2{left:38%;width:28vw;transform:rotate(7deg);opacity:.36;animation-delay:-7s}
.shaft.s3{left:72%;width:34vw;transform:rotate(13deg);animation-delay:-4s}
@keyframes sway{from{transform:translateX(-2%) rotate(8deg)}to{transform:translateX(3%) rotate(13deg)}}
.motes{position:absolute;inset:0;z-index:0}
.motes-svg{width:100%;height:100%}
.motes-a{animation:twk 6s ease-in-out infinite alternate}
.motes-b{animation:twk 4.2s ease-in-out -1.5s infinite alternate}
@keyframes twk{from{opacity:1}to{opacity:.3}}

.hero-inner{position:relative;z-index:3;max-width:1280px;margin:0 auto;width:100%;padding:0 28px;
  display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.hero-text{flex:1;min-width:300px}
.hero-kicker{display:flex;align-items:center;gap:16px;font-size:12.5px;letter-spacing:.44em;
  color:var(--sun);text-transform:uppercase;margin-bottom:1.6rem}
.hero-kicker::before{content:"";width:48px;height:1px;background:linear-gradient(90deg,var(--moss-3),var(--sun));opacity:.9}
.hero h1{font-weight:500;font-size:clamp(2.3rem,5vw,4rem);line-height:1.18;letter-spacing:.04em}
.hero h1 .en{display:block;font-style:italic;font-weight:500;font-size:clamp(1.1rem,2.2vw,1.6rem);
  letter-spacing:.1em;color:var(--sun-hi);margin-top:.9rem}
.hero-copy{margin-top:1.6rem;max-width:34em;color:var(--mist-dim);font-size:1.04rem}
.hero-plant{flex:none;width:120px;align-self:center;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.5));transform-origin:50% 100%;animation:breathe-sway 11s ease-in-out infinite}
@keyframes breathe-sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.8deg)}}
.plant{display:block;width:100%;height:auto;overflow:visible}

/* --------------------------------------------- sections ---- */
.sec{padding:2.5rem 0 6rem}
.sec-head{display:flex;align-items:baseline;gap:20px;margin-bottom:1.6rem;flex-wrap:wrap}
.sec-no{font-style:italic;font-weight:500;font-size:1.05rem;color:var(--sun);letter-spacing:.2em}
.sec-head h2{font-weight:600;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:.12em}
.sec-head .en{font-style:italic;font-weight:500;color:var(--faint);font-size:1rem;letter-spacing:.16em;margin-left:6px}
.sec-head .count{font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;color:var(--faint);margin-left:auto}
.sec-head .rule{flex-basis:100%;height:1px;background:linear-gradient(90deg,var(--line-strong),transparent);margin-top:.2rem}
.sec-lede{max-width:44em;color:var(--mist-dim);margin:-.6rem 0 2.4rem;font-size:1.02rem}

/* --------------------------------- YouTube-style grid ---- */
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:34px 22px}
.vcard{cursor:pointer;display:flex;flex-direction:column;gap:12px}
.vthumb{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--panel);
  border:1px solid var(--line);transition:border-color .3s,box-shadow .3s,transform .3s}
.vcard:hover .vthumb{border-color:var(--line-strong);transform:translateY(-3px);
  box-shadow:0 16px 38px -16px rgba(0,0,0,.7),0 0 0 1px rgba(77,118,79,.4)}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s,opacity .4s;opacity:.95}
.vcard:hover .vthumb img{transform:scale(1.05);opacity:1}
.vthumb .dur{position:absolute;right:8px;bottom:8px;background:rgba(10,16,11,.86);color:#eef3ea;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;padding:2px 7px;border-radius:5px;line-height:1.4}
.vthumb .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .35s;
  background:radial-gradient(closest-side,rgba(10,16,11,.45),transparent 75%)}
.vcard:hover .vthumb .play{opacity:1}
.vthumb .play span{width:56px;height:56px;border-radius:50%;background:rgba(205,195,126,.92);
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 22px rgba(0,0,0,.45)}
.vthumb .play svg{width:20px;height:20px;margin-left:3px;fill:#16241a}
.vmeta{display:flex;gap:12px;align-items:flex-start;padding:0 2px}
.vmeta .ava{flex:none;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#274029,#16241a);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:visible}
.vmeta .ava svg{width:22px;height:30px;overflow:visible}
.vtext{min-width:0}
.vtitle{font-size:1.16rem;font-weight:600;line-height:1.3;color:var(--mist);letter-spacing:.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .25s}
.vcard:hover .vtitle{color:var(--sun-hi)}
.vsub{margin-top:4px;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--faint);
  display:flex;gap:9px;flex-wrap:wrap}
.vsub .bin{font-family:var(--serif);font-style:italic;font-size:.92rem;letter-spacing:.01em;color:var(--fern)}

/* empty / loading */
.videos-empty{grid-column:1/-1;text-align:center;padding:84px 20px;border:1px dashed var(--line-strong);
  border-radius:14px;background:rgba(22,36,26,.4)}
.videos-empty .leaf{font-style:italic;font-size:1.5rem;color:var(--fern);margin-bottom:.5rem}
.videos-empty p{font-family:var(--mono);font-size:.74rem;letter-spacing:.22em;color:var(--faint);text-transform:uppercase}

/* --------------------------------------------- lightbox ---- */
.lightbox{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:32px;
  background:rgba(7,12,8,.94);backdrop-filter:blur(9px);opacity:0;transition:opacity .35s}
.lightbox.on{display:flex;opacity:1}
.lightbox .stage{width:min(1180px,100%);max-height:88vh}
.lightbox video{width:100%;max-height:78vh;border-radius:10px;background:#000;border:1px solid var(--line-strong);
  box-shadow:0 30px 90px -30px rgba(0,0,0,.9)}
.lightbox .cap{margin-top:16px;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.lightbox .cap h3{font-style:italic;font-weight:600;font-size:1.4rem;color:var(--mist)}
.lightbox .cap .sub{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;color:var(--faint);white-space:nowrap}
.lightbox .close{position:absolute;top:22px;right:26px;width:44px;height:44px;border:1px solid var(--line-strong);
  border-radius:50%;background:transparent;color:var(--mist-dim);font-size:20px;cursor:pointer;transition:.3s}
.lightbox .close:hover{border-color:var(--mist);color:var(--mist);transform:rotate(90deg)}

/* ---------------------------------------------- footer ---- */
footer{border-top:1px solid var(--line);background:rgba(16,29,20,.6)}
.foot{padding:3.4rem 0 2.2rem;display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start;color:var(--faint);font-size:.92rem}
.foot .brand{flex:1;min-width:240px}
.foot .brand .en{letter-spacing:.4em;color:var(--mist-dim);font-size:1rem}
.foot .brand .cn{letter-spacing:.5em;font-size:.8rem;margin-top:4px}
.foot .brand p{margin-top:14px;max-width:30em;line-height:1.8}
.foot .quote{flex:1;min-width:260px;font-style:italic;color:var(--mist-dim);font-size:1.04rem;line-height:1.7}
.foot .quote cite{display:block;font-style:normal;font-size:.74rem;letter-spacing:.28em;margin-top:10px;color:var(--faint)}
.foot-bar{border-top:1px solid var(--line);padding:16px 0;display:flex;justify-content:space-between;gap:20px;
  flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;color:var(--faint);letter-spacing:.06em}

/* --------------------------------- auth: nav chip + modal ---- */
.nav-auth{display:flex;align-items:center;gap:14px}
.auth-open{cursor:pointer;border:1px solid var(--line-strong);border-radius:99px;padding:7px 18px;
  color:var(--mist);font-size:14.5px;letter-spacing:.16em;transition:.25s}
.auth-open:hover{border-color:var(--sun);background:rgba(205,195,126,.12);color:var(--sun-hi)}
.nav-who{display:flex;align-items:center;gap:9px;font-size:13.5px;letter-spacing:.04em;color:var(--mist-dim)}
.nav-who .dot{width:7px;height:7px;border-radius:50%;background:var(--fern);box-shadow:0 0 8px rgba(166,192,143,.8)}
.nav-who .pend{color:var(--sun);font-style:italic}
.nav-logout{cursor:pointer;color:var(--faint);font-size:13px;letter-spacing:.12em;border-bottom:1px solid transparent;transition:.25s}
.nav-logout:hover{color:var(--mist);border-bottom-color:var(--line-strong)}

.authbox{position:fixed;inset:0;z-index:85;display:none;align-items:center;justify-content:center;padding:28px;
  background:rgba(7,12,8,.86);backdrop-filter:blur(10px);opacity:0;transition:opacity .3s}
.authbox.on{display:flex;opacity:1}
.auth-card{position:relative;width:min(404px,100%);
  background:radial-gradient(120% 80% at 50% -10%,#1c2e20 0%,#142017 70%);
  border:1px solid var(--line-strong);border-radius:14px;padding:30px 30px 26px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9),inset 0 0 50px rgba(40,66,44,.2)}
.auth-close{position:absolute;top:14px;right:16px;width:34px;height:34px;border:none;background:none;
  color:var(--faint);font-size:22px;cursor:pointer;transition:.25s}
.auth-close:hover{color:var(--mist);transform:rotate(90deg)}
.auth-mark{width:30px;margin:0 auto 10px}
.auth-mark svg{width:100%;height:auto;overflow:visible;display:block}
.auth-title{text-align:center;font-weight:600;font-size:1.5rem;letter-spacing:.1em;color:var(--mist)}
.auth-title .en{display:block;font-style:italic;font-weight:500;font-size:.82rem;letter-spacing:.24em;color:var(--sun);margin-top:3px}
.auth-tabs{display:flex;gap:6px;margin:22px 0 18px;background:rgba(10,16,11,.5);border:1px solid var(--line);border-radius:99px;padding:4px}
.auth-tab{flex:1;cursor:pointer;border:none;background:none;color:var(--mist-dim);font-family:var(--serif);
  font-size:1rem;letter-spacing:.18em;padding:8px 0;border-radius:99px;transition:.25s}
.auth-tab.on{background:rgba(205,195,126,.16);color:var(--sun-hi)}
.auth-form{display:none;flex-direction:column;gap:14px}
.auth-form.on{display:flex}
.auth-form label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;letter-spacing:.1em;color:var(--mist-dim)}
.auth-form label .opt{color:var(--faint);font-style:italic;letter-spacing:.04em;margin-left:6px;font-size:.74rem}
.auth-form input{font-family:var(--sans);font-size:1rem;color:var(--mist);
  background:rgba(10,16,11,.6);border:1px solid var(--line-strong);border-radius:8px;padding:11px 13px;transition:.25s}
.auth-form input::placeholder{color:#5e6e54}
.auth-form input:focus{outline:none;border-color:var(--sun);box-shadow:0 0 0 3px rgba(205,195,126,.14)}
.auth-submit{margin-top:6px;cursor:pointer;font-family:var(--serif);font-size:1.05rem;letter-spacing:.2em;
  color:#16241a;background:var(--sun);border:1px solid var(--sun);border-radius:8px;padding:12px;transition:.25s}
.auth-submit:hover{background:var(--sun-hi);border-color:var(--sun-hi)}
.auth-submit:disabled{opacity:.55;cursor:default}
.auth-note{font-size:.76rem;line-height:1.6;color:var(--faint);letter-spacing:.02em;text-align:center;margin-top:2px}
.auth-msg{margin-top:14px;min-height:1.2em;text-align:center;font-size:.86rem;letter-spacing:.02em}
.auth-msg.err{color:#e0a17a}
.auth-msg.ok{color:var(--fern)}

/* --------------------------------------------- responsive ---- */
@media (max-width:880px){
  .nav-links{gap:16px}
  .nav-links a[href="#videos"]{display:none}
  .hero{min-height:auto;padding-top:96px}
  .hero-plant{width:84px}
  .videos{grid-template-columns:repeat(auto-fill,minmax(100%,1fr));gap:26px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}