/* Teachvara site: forest theme. Motion starts quick and ends slowly. */
@property --c1{syntax:"<color>";inherits:true;initial-value:#2E7D4F}
@property --c2{syntax:"<color>";inherits:true;initial-value:#C2452D}
@property --c3{syntax:"<color>";inherits:true;initial-value:#D9A23B}
@property --c4{syntax:"<color>";inherits:true;initial-value:#3B7EA1}
@property --navy{syntax:"<color>";inherits:true;initial-value:#1F3B2C}
@property --primary{syntax:"<color>";inherits:true;initial-value:#1E5631}

:root{
  --forest:#1F3B2C;--pine:#1E5631;--fern:#2E7D4F;--moss:#7A9A3A;--lichen:#A4B94F;--bark:#4A3426;--gold:#B8892B;
  --parchment:#F6F0E1;--mist:#EEF2E4;--heading:#1F3B2C;
  --c1:#2E7D4F;--c2:#C2452D;--c3:#D9A23B;--c4:#3B7EA1;--navy:#1F3B2C;--primary:#1E5631;
  --bg:#F7F5EE;--surface:#FFFFFF;--surface2:#F1F4EA;--line:#DDE3D2;--text:#1D2A22;--muted:#5D6B60;
  --shadow:0 28px 50px -30px rgba(31,59,44,.45);
  --ease:cubic-bezier(.16,.84,.3,1);
  --radius:18px;
  color-scheme:light;
}
:root[data-theme="dark"]{--bg:#0E1813;--surface:#15231B;--surface2:#1A2B21;--line:#28402F;--text:#E7EDE3;--muted:#A3B2A6;--mist:#16261C;--parchment:#1B2A20;--heading:#E9E2CF;--shadow:0 28px 50px -30px rgba(0,0,0,.7);color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0E1813;--surface:#15231B;--surface2:#1A2B21;--line:#28402F;--text:#E7EDE3;--muted:#A3B2A6;--mist:#16261C;--parchment:#1B2A20;--heading:#E9E2CF;--shadow:0 28px 50px -30px rgba(0,0,0,.7);color-scheme:dark}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font-family:"Public Sans",system-ui,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,svg{max-width:100%}
a{color:inherit}
[hidden]{display:none!important}
h1,h2,h3{line-height:1.15;margin:0}
.serif{font-family:"Cinzel",serif;letter-spacing:.04em}
.ital{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:600}
.eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.muted{color:var(--muted)}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
@media (max-width:600px){.wrap{padding:0 16px}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;border:1px solid transparent;border-radius:12px;padding:12px 20px;font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;text-decoration:none;
  transition:transform .7s var(--ease),box-shadow .7s var(--ease),background-color .5s var(--ease),color .5s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,button:focus-visible{outline:3px solid var(--lichen);outline-offset:2px}
.btn-primary{background:var(--pine);color:#fff;box-shadow:0 14px 26px -16px rgba(30,86,49,.9)}
.btn-primary:hover{box-shadow:0 20px 34px -16px rgba(30,86,49,.9)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--text)}
.btn-ghost:hover{background:var(--surface)}
.btn-light{background:var(--parchment);color:var(--forest)}
.btn-sm{padding:8px 14px;font-size:.86rem;border-radius:10px}
/* press feedback: quick down on press, eases back on release */
.btn:active{transform:translateY(1px) scale(.985);transition-duration:.08s}
/* disabled and busy: dimmed and not clickable; busy also shows a spinner */
.btn:disabled,.btn[disabled],.btn.is-busy{pointer-events:none}
.btn:disabled,.btn[disabled]{opacity:.55}
.btn.is-busy{opacity:.8}
.btn.is-busy::before{content:"";width:1em;height:1em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:btnspin .6s linear infinite}
@keyframes btnspin{to{transform:rotate(360deg)}}

/* logo */
.tvl{overflow:visible;display:block}
.tvl .br{fill:none;stroke:#4A3426;stroke-linecap:round;stroke-dasharray:1;animation:tvdraw 1.2s var(--ease) backwards;animation-delay:var(--dl)}
.tvl .lf{transform-box:fill-box;transform-origin:left center;animation:tvpop .9s var(--ease) backwards;animation-delay:var(--dl)}
.tvl .fl{transform-box:fill-box;transform-origin:center;animation:tvdrift 5.5s var(--ease) infinite;animation-delay:var(--dl)}
.tvl .l1{fill:#1E5631}.tvl .l2{fill:#7A9A3A}.tvl .l3{fill:#2E7D4F}.tvl .l4{fill:#A4B94F}
.tvl .k{fill:#1F3B2C}.tvl .sp{fill:none;stroke:#F6F0E1}.tvl .sg{fill:none;stroke:#B8892B}
.tvl .motto{font-family:"Cinzel",serif;font-weight:900;fill:#1F3B2C}
.tvl.still .br,.tvl.still .lf{animation:none}.tvl.still .fl{display:none}
.tvl.sway .crown{transform-box:view-box;transform-origin:60px 88px;animation:tvsway 7s ease-in-out infinite alternate}
/* reversed: on deep forest green */
.tvl.rev .br{stroke:#C9A27A}.tvl.rev .k{fill:#F6F0E1}.tvl.rev .sp{stroke:#1F3B2C}.tvl.rev .motto{fill:#F6F0E1}
.tvl.rev .l1{fill:#6FBF8A}.tvl.rev .l3{fill:#3E9A62}
:root[data-theme="dark"] .tvl:not(.fixed) .br{stroke:#C9A27A}
:root[data-theme="dark"] .tvl:not(.fixed) .k{fill:#E9E2CF}:root[data-theme="dark"] .tvl:not(.fixed) .sp{stroke:#15231B}:root[data-theme="dark"] .tvl:not(.fixed) .motto{fill:#E9E2CF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tvl:not(.fixed) .br{stroke:#C9A27A}
  :root:not([data-theme="light"]) .tvl:not(.fixed) .k{fill:#E9E2CF}:root:not([data-theme="light"]) .tvl:not(.fixed) .sp{stroke:#15231B}:root:not([data-theme="light"]) .tvl:not(.fixed) .motto{fill:#E9E2CF}}
@keyframes tvdraw{from{stroke-dashoffset:1}}
@keyframes tvpop{from{transform:scale(0);opacity:0}}
@keyframes tvdrift{0%{opacity:0;transform:translate(0,0) rotate(0)}12%{opacity:1}70%{opacity:.9}100%{opacity:0;transform:translate(26px,-16px) rotate(120deg)}}
@keyframes tvsway{from{transform:rotate(-1.4deg)}to{transform:rotate(1.4deg)}}

.wordmark{font-family:"Cinzel",serif;font-weight:700;letter-spacing:.14em;color:var(--heading);line-height:1}

/* shared motion */
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.reveal.in{opacity:1;transform:none}

/* inputs */
.field{display:flex;flex-direction:column;gap:6px}
.field label,.field .lab{font-size:.82rem;font-weight:700}
.input,select.input{width:100%;font:inherit;font-size:.96rem;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--text);transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
.input:focus{outline:none;border-color:var(--fern);box-shadow:0 0 0 4px rgba(46,125,79,.16)}
.hint{font-size:.8rem;color:var(--muted)}

.theme-toggle{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;width:38px;height:38px;display:inline-grid;place-items:center;cursor:pointer}
.theme-toggle svg{width:18px;height:18px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.tvl .fl{display:none}.reveal{opacity:1;transform:none}}