/* An illustrated woodland surrounds every section, with quiet surfaces for reading. */
:root{
  color-scheme:dark;
  --paper:#15271f;
  --ink:#f0efdc;
  --muted:#c3cdb8;
  --line:rgba(213,228,193,.22);
  --green:#c5d2a1;
  --surface:rgba(24,47,34,.76);
}
body{position:relative;isolation:isolate;background:#15271f}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(7,23,16,.72),rgba(13,33,22,.37) 55%,rgba(9,27,18,.26)),url('assets/fairytale-forest.jpg');
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
body::before{opacity:.025}
::selection{background:#bdc68d;color:#18291d}
.header{height:88px;margin-top:18px;padding-inline:25px;background:rgba(13,32,21,.56);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 12px 40px #06160d18}
.brand,.hero h1,.section-head h2,.letter-section h2{color:var(--ink);text-shadow:0 2px 18px #04120b55}
.brand-star,.brand-dot,.heading-star,.section-head h2 span,.letter-star,.orbit-star{color:#cbd6a7}
nav a{color:#d1dbc4}nav .active,nav a:hover{color:#f1eacb}
nav .active:after{background:#e2d49b}
.theme-button{color:#ece8c9;background:#132e2344;border-color:var(--line)}
.hero{padding-top:70px;padding-bottom:72px}
.hero-copy{position:relative;text-shadow:0 1px 15px #03120b99}
.eyebrow{color:#c1ceb2;letter-spacing:2.2px}
.tiny-line{background:#c5d2a1}
h1{font-weight:500}
.fantasy{color:#d2ddae}.fantasy svg{stroke:#c2cc97}
.intro{color:#d8decc;font-size:14px;line-height:2.2}
.primary{background:#cbd5ac;border-color:#d7dfbd;color:#203626;box-shadow:0 5px 24px #0b1d1655}
.primary:hover{background:#e0e5c7;color:#203626}
.text-link{color:#e1e6d2;border-color:#c9d5b077}
.hero-footnote,.small-spark{color:#c0cda9}
.status-dot{background:#d2d78f;box-shadow:0 0 10px #d2d78f77}
.hero-art{background:rgba(23,44,31,.76);border-color:#cad4ac66;box-shadow:0 20px 65px #04180d55}
.hero-art:before{border-color:#c8d0a63b}
.hero-art img{filter:saturate(.8) brightness(.9)}
.art-top,.art-bottom{color:#c7d2b5}
.art-label{background:#d9dcc1;color:#344733;border-color:#e3e5ce;box-shadow:0 5px 15px #0b1d1633;text-shadow:none}
.quote-strip{background:rgba(22,43,29,.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.quote-strip p{color:#d8dfc3}.quote-strip>span{color:#c3d29d}
.section-head>p{color:#d1dac3}
.hobby-grid{background:rgba(15,36,24,.65);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 12px 35px #061b1022}
.hobby:hover{background:rgba(125,151,98,.2)}
.hobby-icon{color:#c5d1aa}.hobby-heading{color:#eeeeda}
.hobby-description{color:#d0dbc4}.hobby-bottom{color:#bfcca9}
.hobby-heading small,.section-note{color:#c4d0af}
.works,.night .works{background:rgba(9,27,18,.66);border-color:var(--line);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.works-toolbar,.work-end,.night .work-end,.night .works-toolbar{border-color:var(--line)}
.filters button{color:#d6dfc7}.filters .selected{color:#233828;background:#d1d9b4}
.demo-note{color:#bdcbaa}
.work-card{padding:12px 12px 17px;border:1px solid #c8d6b326;background:rgba(27,49,34,.76);box-shadow:0 12px 30px #06180d22;transition:background .2s,border-color .2s}
.work-card:hover{background:rgba(38,65,43,.9);border-color:#d2d9ae66}
.work-meta{color:#b5c5a5}.work-title{color:#ecebd5}.work-description{color:#ced9bf}
.work-end{color:#d7dfbd}.work-end>span{color:#bfccae}.work-end i{color:#e3e6c5}
.image-tag{background:#edf0d9ed;color:#3b5138}
.letter-section{margin-block:36px;background:linear-gradient(120deg,rgba(20,43,28,.6),rgba(17,37,25,.38));border:1px solid var(--line);box-shadow:0 15px 40px #061b1022;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.letter-section>p:not(.eyebrow):not(.bookmark-note){color:#d1ddc3}
.bookmark-note{color:#bfceab}.letter-drawing{color:#ced69c;opacity:.32}
footer{background:rgba(12,32,20,.55);border:1px solid var(--line);padding-inline:24px;margin-bottom:24px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
footer>span,.back-top{color:#c8d3b7}
dialog{background:#1b3023;color:#efeeda;border-color:#bdc9a14d;box-shadow:0 25px 100px #020d07b3}
dialog p,.dialog-close{color:#ced9c0}
dialog::backdrop{background:#03130bc4;backdrop-filter:blur(7px)}
.game-options button{background:#2c4630;color:#e5e9d1}
.game-options button:hover{background:#cdd6ae;color:#213726}
.game-star{color:#d4d6a1}
.skip{background:#cbd5ac;color:#203626}
.night{--paper:#0f2018;--ink:#e7ecd9;--muted:#c0ceb5;--line:rgba(201,219,180,.2);--green:#b8c995;--surface:rgba(13,31,20,.85)}
.night::after{background-image:linear-gradient(90deg,rgba(3,16,10,.85),rgba(7,23,16,.65) 55%,rgba(4,18,12,.55)),url('assets/fairytale-forest.jpg')}
.night .hero-art{background:rgba(12,30,20,.88);border-color:#c5d0a64d}
.night .art-label{background:#b6c29d;color:#243b29;border-color:#cfdbb4}
.night .primary{background:#bccd9d;color:#142c1b}
.night .primary:hover{background:#d6dfbf;color:#142c1b}
.night .hero-art img{filter:saturate(.65) brightness(.78)}
@media(max-width:1050px){.header{padding-inline:18px}.intro{font-size:13px}.work-title{font-size:18px}.work-card{padding:10px 10px 15px}}
@media(max-width:740px){
  body::after{background-image:linear-gradient(rgba(6,24,14,.65),rgba(10,28,18,.55)),url('assets/fairytale-forest.jpg');background-position:57% center}
  .night::after{background-image:linear-gradient(rgba(3,15,9,.8),rgba(6,20,12,.72)),url('assets/fairytale-forest.jpg')}
  .header{height:88px;margin-top:12px;padding:8px 14px 28px}
  nav{padding-inline:12px;gap:24px;padding-bottom:4px}
  .hero{padding-block:40px 48px}.intro{font-size:13px;line-height:2.15}
  .hero .eyebrow{font-size:8px}.hobby{padding-inline:18px}
  .work-title{font-size:23px}.work-card{padding:12px 12px 18px}
  .letter-section{margin-block:24px;padding-inline:13px}
  footer{padding-inline:16px;margin-bottom:14px}
}