/* The same northern light opens the garden and settles at its roots. */
.folio { --g-ash-accent: #bac3a4; --g-ash-rule: rgba(184, 204, 172, .19); }
.folio-cover .norse-aureole {
  background: radial-gradient(ellipse at 50% 42%, rgba(156, 184, 151, .23), transparent 66%);
}
.norse-horizon { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.norse-horizon i, .norse-horizon b {
  position: absolute; left: 14%; top: 16%; width: 75%; height: 24%; border-radius: 50%;
  background: linear-gradient(175deg, transparent 33%, rgba(139, 174, 155, .08) 47%, rgba(134, 176, 151, .025) 65%, transparent 80%);
  transform: rotate(-14deg); animation: ash-northern-light 18s ease-in-out infinite;
}
.norse-horizon b { top: 20%; left: 31%; opacity: .55; animation-delay: -8s; }
.norse-edition { position: absolute; top: 23%; left: max(42px, calc(50% - 390px)); z-index: 4; display: flex; align-items: center; gap: 12px; color: var(--g-norse-ink); font: 8px/1.5 var(--mono); letter-spacing: .24em; opacity: .7; }
.norse-edition i { width: 27px; height: 1px; background: currentColor; }
.norse-invocation { gap: 13px; }
.norse-actions { display: flex; align-items: center; gap: 22px; }
.norse-path { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--g-norse-ink); font: 9px/1.5 var(--mono); letter-spacing: .08em; }
.norse-path:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.norse-awaken { border-radius: 3px; background: color-mix(in srgb, var(--void) 66%, transparent); }
.norse-awaken:active { transform: scale(.97); }
.norse-invocation-label { letter-spacing: .18em; }
.folio-explore, .folio-articles { border-top: 1px solid var(--g-ash-rule); }
.folio-directory > a { border-color: var(--g-ash-rule); }
.folio-articles-list { border-color: var(--g-ash-rule); }
.ash-sanctuary {
  position: relative; z-index: 2; width: min(1180px, calc(100% - 84px)); margin: 0 auto;
  padding: 100px 0 34px; color: #dae1d1; scroll-margin-top: 72px;
  --g-ash-muted: #95a18f; --g-ash-text: #dae1d1; --g-ash-panel: #0f1b17;
}
.ash-chapter { display: flex; align-items: center; gap: 24px; color: var(--g-ash-muted); font: 8px/1.7 var(--mono); letter-spacing: .17em; }
.ash-chapter i { flex: 1; height: 1px; background: var(--g-ash-rule); }
.ash-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding: 34px 0 36px; }
.ash-eyebrow { margin: 0 0 14px; color: var(--g-ash-muted); font: 9px/1 var(--mono); letter-spacing: .42em; }
.ash-heading h2 { margin: 0; color: var(--g-ash-text); font: 400 clamp(28px, 3.6vw, 48px)/1.3 var(--serif); letter-spacing: -.025em; }
.ash-heading h2 span { color: var(--g-ash-muted); }
.ash-intro { margin: 0 0 3px; color: var(--g-ash-muted); font: 11px/2.1 var(--sans); }
.ash-landscape { position: relative; isolation: isolate; aspect-ratio: 1200 / 660; overflow: hidden; border: 1px solid var(--g-ash-rule); border-radius: 4px 4px 0 0; background: #10221c; }
.ash-art { display: block; width: 100%; height: 100%; }
.ash-art [data-ash-layer] { transform-box: view-box; transform-origin: 50% 65%; }
.ash-sky-ring { opacity: .14; }
.ash-awake-halo, .ash-sap { opacity: 0; transition: opacity 1100ms ease; }
.ash-leaf-mass { opacity: .77; }
.ash-roots { opacity: .26; transition: opacity 900ms ease; }
.ash-stone-body { fill: #24372c; stroke: #475941; stroke-width: .7; }
.ash-stone-edge { stroke: #a7b98f; opacity: .22; }
.ash-stone-mark { stroke: #b9caa0; stroke-width: 1.2; opacity: .22; transition: opacity 560ms ease; }
.ash-stone-light { fill: #cfcc93; opacity: 0; transition: opacity 560ms ease; }
.ash-landscape[data-awake="true"] .ash-stone-mark, .ash-landscape[data-awake="true"] .ash-stone-light { opacity: .85; transition-delay: calc(var(--realm) * 80ms); }
.ash-landscape[data-awake="true"] .ash-awake-halo { opacity: 1; }
.ash-landscape[data-awake="true"] .ash-sap { opacity: .74; }
.ash-landscape[data-awake="true"] .ash-roots { opacity: .85; }
.ash-landscape[data-awake="true"] .ash-leaf-mass { opacity: 1; }
.ash-landscape[data-awake="true"] .ash-water-light { opacity: .42; }
.ash-landscape[data-awake="false"] .ash-stone-mark, .ash-landscape[data-awake="false"] .ash-stone-light { transition-delay: 0ms; }
.ash-aurora, .ash-mist, .ash-landscape-grain { position: absolute; inset: 0; pointer-events: none; }
.ash-aurora { z-index: 1; opacity: .55; mix-blend-mode: screen; transition: opacity 900ms ease; }
.ash-aurora i, .ash-aurora b { position: absolute; top: 2%; left: 4%; width: 76%; height: 34%; border-radius: 50%; background: linear-gradient(174deg, transparent 35%, rgba(127, 177, 149, .14) 52%, transparent 72%); transform: rotate(-15deg); animation: ash-northern-light 18s ease-in-out infinite; }
.ash-aurora b { left: 40%; top: 4%; opacity: .6; animation-delay: -9s; }
.ash-landscape[data-awake="true"] .ash-aurora { opacity: 1; }
.ash-mist { z-index: 2; opacity: .7; transition: opacity 700ms ease; }
.ash-mist i, .ash-mist b { position: absolute; top: 48%; left: -15%; width: 125%; height: 19%; background: radial-gradient(ellipse, rgba(162, 187, 170, .13), transparent 67%); animation: ash-mist-drift 24s ease-in-out infinite; }
.ash-mist b { top: 63%; left: 10%; width: 80%; opacity: .8; animation-delay: -11s; }
.ash-landscape[data-weather="clear"] .ash-mist { opacity: 0; }
.ash-landscape[data-weather="mist"] .ash-stars { opacity: .42; }
.ash-landscape-grain { z-index: 3; opacity: .1; 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='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.45' d='M0 0h150v150H0z'/%3E%3C/svg%3E"); }
.ash-scene-label { position: absolute; z-index: 4; top: 24px; left: 26px; display: flex; align-items: center; gap: 8px; color: #b1c2a7; font: 7px/1 var(--mono); letter-spacing: .22em; }
.ash-scene-label i { width: 3px; height: 3px; border: 1px solid currentColor; transform: rotate(45deg); }
.ash-scene-coordinate { position: absolute; z-index: 4; right: 26px; top: 23px; color: #9dab95; text-align: right; font: 7px/1.9 var(--mono); letter-spacing: .1em; }
.ash-scene-name { position: absolute; z-index: 4; bottom: 18px; left: 26px; display: grid; gap: 8px; margin: 0; color: #b8c6b0; }
.ash-scene-name span { font: 7px/1 var(--mono); letter-spacing: .2em; }
.ash-scene-name b { font: 400 17px/1.4 var(--serif); letter-spacing: .16em; }
.ash-heart { position: absolute; z-index: 5; left: 50%; top: 56.36%; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #dce0b5; transform: translate(-50%, -50%); cursor: pointer; touch-action: manipulation; }
.ash-heart span { position: absolute; inset: 8px; border: 1px solid rgba(205, 220, 169, .32); border-radius: 50%; transition: transform 200ms ease, opacity 200ms ease; }
.ash-heart span::after { content: ''; position: absolute; inset: 5px; border: 1px dotted rgba(205, 220, 169, .22); border-radius: 50%; }
.ash-heart[aria-pressed="true"] span { transform: scale(1.18); opacity: .75; }
.ash-observatory { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 17px 22px; border: 1px solid var(--g-ash-rule); border-top: 0; border-radius: 0 0 4px 4px; background: var(--g-ash-panel); }
.ash-state { display: flex; align-items: center; gap: 10px; min-width: 0; font: 10px/1.7 var(--mono); color: var(--g-ash-muted); }
.ash-state > i { width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: #879574; }
.ash-state b { margin-left: 10px; font: 9px/1 var(--mono); white-space: nowrap; color: var(--g-ash-text); }
.ash-controls { display: flex; gap: 12px; flex-shrink: 0; }
.ash-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 42px; padding: 0 16px; border: 1px solid var(--g-ash-rule); border-radius: 3px; color: var(--g-ash-text); background: transparent; font: 10px/1 var(--sans); cursor: pointer; touch-action: manipulation; transition: background 180ms ease, transform 160ms ease-out; }
.ash-controls .ash-awaken { background: #c2cbaa; border-color: #c2cbaa; color: #1a2a1f; }
.ash-controls .ash-weather { border-color: transparent; color: var(--g-ash-muted); }
.ash-controls button:active { transform: scale(.97); }
.ash-heart:focus-visible, .ash-controls button:focus-visible, .ash-colophon a:focus-visible { outline: 2px solid var(--g-ash-accent); outline-offset: 4px; }
.ash-colophon { display: flex; justify-content: space-between; gap: 20px; padding-top: 24px; color: var(--g-ash-muted); font: 8px/1.6 var(--mono); letter-spacing: .13em; }
.ash-colophon a { display: flex; gap: 19px; padding: 8px 0; color: var(--g-ash-text); }
.ash-colophon > span { padding-top: 8px; }
.ash-heart[hidden], .ash-controls[hidden] { display: none; }
.ash-fireflies circle { opacity: 0; animation: ash-firefly 8s ease-in-out infinite; animation-delay: calc(var(--fly) * -.63s); }
@keyframes ash-northern-light { 0%, 100% { transform: translateX(-2%) rotate(-15deg); opacity: .55; } 50% { transform: translateX(3%) rotate(-11deg); opacity: 1; } }
@keyframes ash-mist-drift { 0%, 100% { transform: translateX(-4%); } 50% { transform: translateX(4%); } }
@keyframes ash-firefly { 0%, 100% { opacity: 0; transform: translate(0, 5px); } 40% { opacity: .7; } 85% { opacity: 0; transform: translate(5px, -12px); } }
@media (hover: hover) and (pointer: fine) {
  .ash-heart:hover span { transform: scale(1.18); }
  .ash-controls .ash-awaken:hover { background: #d6dcc2; }
  .ash-controls .ash-weather:hover { background: var(--g-ash-rule); }
  .ash-colophon a:hover { color: var(--g-ash-accent); }
}
:root[data-resolved-theme="light"] .ash-sanctuary { --g-ash-muted: #52634e; --g-ash-text: #263827; --g-ash-panel: #cdd5c5; --g-ash-rule: rgba(59, 83, 52, .22); --g-ash-accent: #496344; }
:root[data-resolved-theme="light"] .folio { --g-ash-rule: rgba(59, 83, 52, .18); }
:root[data-resolved-theme="light"] .norse-horizon { mix-blend-mode: multiply; }
.ash-landscape[data-paused="true"] *,
.folio-cover[data-norse-paused="true"] .norse-horizon *,
html.garden-page-hidden .ash-landscape *, html.garden-page-hidden .norse-horizon *,
html.garden-overrun .ash-landscape *, html.garden-overrun .norse-horizon * { animation-play-state: paused !important; }
html[data-render-quality="economy"] .ash-landscape *, html[data-render-quality="economy"] .norse-horizon * { animation: none !important; }
html[data-render-quality="economy"] .ash-landscape-grain { display: none; }
html.garden-lite-motion .ash-sanctuary *, html.garden-lite-motion .norse-horizon * { animation: none !important; transition: none !important; }
.ash-sanctuary[data-instant="true"] * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .ash-sanctuary *, .norse-horizon * { animation: none !important; transition: none !important; } }
@media (max-width: 1023px) {
  .ash-sanctuary { width: calc(100% - 56px); padding-top: 72px; }
  .ash-heading-row { gap: 20px; }
  .ash-intro { font-size: 10px; }
  .ash-observatory { padding: 14px; gap: 12px; }
  .ash-state { font-size: 9px; }
  .ash-controls { gap: 4px; }
  .ash-controls button { padding: 0 12px; }
}
@media (max-width: 768px) {
  .norse-edition { top: 15%; left: 22px; font-size: 7px; }
  .norse-horizon i { top: 18%; height: 30%; }
  .ash-sanctuary { width: calc(100% - 36px); padding-top: 60px; }
  .ash-chapter { font-size: 7px; gap: 14px; }
  .ash-chapter > span:last-child { display: none; }
  .ash-heading-row { display: block; padding: 26px 0; }
  .ash-heading h2 { font-size: 30px; }
  .ash-intro { margin-top: 18px; font-size: 11px; }
  .ash-landscape { aspect-ratio: 4 / 3; }
  .ash-art { position: absolute; width: 136.36%; max-width: none; left: -18.18%; }
  .ash-scene-coordinate { display: none; }
  .ash-scene-label { top: 16px; left: 16px; font-size: 6px; }
  .ash-scene-name { left: 16px; bottom: 14px; gap: 6px; }
  .ash-scene-name b { font-size: 14px; }
  .ash-scene-name span { font-size: 6px; }
  .ash-observatory { display: block; padding: 16px; }
  .ash-state { justify-content: flex-start; font-size: 9px; }
  .ash-state b { margin-left: auto; }
  .ash-controls { margin-top: 14px; gap: 8px; }
  .ash-controls button { flex: 1; }
  .ash-colophon { font-size: 7px; letter-spacing: .04em; }
}
@media (max-width: 480px) {
  .ash-sanctuary { width: calc(100% - 28px); }
  .ash-heading h2 { font-size: 28px; }
  .ash-fireflies circle:nth-child(even) { display: none; }
}