/* Thanksgiving 2026: laid over every page. Loaded after each page's own <style>,
   so :root:root wins over the page's :root while an executor page's own theme
   (set inline by applyTheme) still wins over this. Delete the <link> and
   <script> tags for thanksgiving.* to take it off again. */
:root:root{
  --bg:#120b07; --surface:#1b110b; --hover:#25170e; --line:#36241a;
  --text:#f7ecdd; --dim:#bba592; --faint:#7f6c5c;
  --up:#8bdc7c; --down:#ff6a5c; --dev:#f0a93b; --unk:#85766a;
  --accent:#f2a03d;
  --harvest:#f2a03d; --gold:#ffd28a; --rust:#d2561b; --cranberry:#c8374a;
}

html:not([data-theme]) body{
  background:
    radial-gradient(70% 45% at 88% -8%,rgba(242,160,61,.15),transparent 70%),
    radial-gradient(60% 40% at 0% 105%,rgba(200,55,74,.09),transparent 70%),
    var(--bg) fixed;
  background-attachment:fixed;
}
::selection{background:rgba(242,160,61,.34); color:#fff}

.wrap{position:relative; z-index:1}

/* The logo: harvest gold on the second word, a small maple leaf before it. */
header .mark>span,header .brand>span{
  background:linear-gradient(180deg,var(--gold),var(--harvest) 55%,var(--rust));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
html[data-light] header .mark>span{background:none; color:#b4500f}
header .mark::before,header .brand::before{
  content:""; display:inline-block; width:.95em; height:.95em; margin-right:.38em; vertical-align:-.12em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2l2.5 6 3.5-1.5-.5 6 6-2-2.5 6 4.5 2-7 3 1 4-6.6-1.500v6h-1.800v-6L8.500 25.500l1-4-7-3 4.500-2-2.500-6 6 2-.5-6L13.500 8z' fill='%23e8731f'/%3E%3Cpath d='M16 28V9M16 21l-6-6M16 21l6-6M16 16l-3.500-4.500M16 16l3.500-4.500' stroke='%23ffd28a' stroke-width='1.100' fill='none' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Home hero: a low harvest sun instead of the green aurora. */
.hero{background:radial-gradient(120% 140% at 0% 0%,rgba(242,160,61,.11),transparent 55%),var(--surface)}
.hero::before{background:
  radial-gradient(30% 40% at 30% 40%,rgba(242,160,61,.12),transparent 70%),
  radial-gradient(28% 36% at 75% 60%,rgba(200,55,74,.11),transparent 70%)}
.up .dot{box-shadow:0 0 0 3px rgba(139,220,124,.16)}

/* Cards and lists get a faint ember edge on hover. */
.list,.card,.term,.tile{box-shadow:0 1px 0 rgba(255,235,200,.025) inset}
a.card:hover{border-color:color-mix(in srgb,var(--harvest) 42%,var(--line))}

/* The fixed decoration layer (built by thanksgiving.js). */
#harvest{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none}
#harvest>*{position:absolute; display:block}
#harvest .sun{right:6vw; top:5vh; width:96px; height:96px; border-radius:50%;
  background:radial-gradient(circle at 40% 38%,#fff1cf,#ffc566 52%,#e8872a);
  box-shadow:0 0 56px 14px rgba(255,170,70,.20),0 0 150px 46px rgba(210,86,27,.12); opacity:.72}
#harvest .branch{left:0; top:0; width:230px; height:170px; opacity:.5}
#harvest .haze{left:-20%; right:-20%; bottom:-6vh; height:28vh;
  background:radial-gradient(50% 60% at 30% 100%,rgba(255,170,80,.10),transparent 70%),
             radial-gradient(45% 55% at 75% 100%,rgba(200,55,74,.08),transparent 70%);
  animation:haze 26s ease-in-out infinite alternate}

/* Falling leaves: the outer element falls, the inner svg flutters. */
#harvest .leaf{top:-12vh; left:var(--x); width:calc(var(--s,1)*28px); color:var(--c); opacity:.82;
  animation:drop var(--d,24s) linear infinite; animation-delay:var(--w,0s); will-change:transform}
#harvest .leaf svg{display:block; width:100%; transform-origin:50% 50%;
  animation:flutter var(--t,5s) ease-in-out infinite alternate; animation-delay:var(--w,0s)}
@keyframes drop{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(var(--dx,6vw),122vh,0)}
}
@keyframes flutter{
  from{transform:translateX(-20px) rotate(-38deg) scaleX(1)}
  to{transform:translateX(20px) rotate(42deg) scaleX(.55)}
}
@keyframes haze{from{transform:translateX(-4%)} to{transform:translateX(4%)}}

/* Executor pages keep their own look; only the sun and haze step aside for their scene. */
html[data-theme] #harvest .sun,html[data-theme] #harvest .haze{display:none}
html[data-light] #harvest .leaf{opacity:.6}

/* Only where there is room beside the content column, so it never sits behind the header. */
@media (max-width:1080px){ #harvest .sun{display:none} }
header .mark,header .brand{white-space:nowrap}
@media (max-width:440px){ header .mark::before,header .brand::before{display:none} }
@media (max-width:560px){
  #harvest .branch{width:110px; height:82px; opacity:.3}
  #harvest .leaf{width:calc(var(--s,1)*20px)}
  #harvest .leaf:nth-of-type(n+9){display:none}
}
@media (prefers-reduced-motion:reduce){
  #harvest .leaf{display:none} #harvest .haze{animation:none}
}