/* Sand in light mode and Varmgrå in dark mode, including without JavaScript. */
:root{color-scheme:light;--bg:#f3eee5;--text:#2b2824;--muted:#625c54;--quiet:#625c54;--orange-light:#934528;--surface:#e6dfd4;--surface-hover:#dbd1c4;--surface-alt:#eddbc9;--header-surface:#eee6dbee;--line:#a99b89;--note-bg:#fffbf3;--note-text:#342b25;--note-muted:#6a594c;--ambient:#e3d8c8;--game-bg:#ded6c9;--game-halo:#c8bbae;--edge:#624c2922}
@media(prefers-color-scheme:dark){
  :root:not([data-palette]){color-scheme:dark;--bg:#201c1a;--text:#f7f0e7;--muted:#c5b9b0;--quiet:#c5b9b0;--orange-light:#f8b58e;--surface:#302924;--surface-hover:#40352f;--surface-alt:#382a24;--header-surface:#302924ee;--line:#918073;--note-bg:#eee3d5;--note-text:#342b25;--note-muted:#6a594c;--ambient:#40342c;--game-bg:#1a1614;--game-halo:#493b31;--edge:#ffffff12}
}
:root[data-palette="sand"]{color-scheme:light;--bg:#f3eee5;--text:#2b2824;--muted:#625c54;--quiet:#625c54;--orange-light:#934528;--surface:#e6dfd4;--surface-hover:#dbd1c4;--surface-alt:#eddbc9;--header-surface:#eee6dbee;--line:#a99b89;--note-bg:#fffbf3;--note-text:#342b25;--note-muted:#6a594c;--ambient:#e3d8c8;--game-bg:#ded6c9;--game-halo:#c8bbae;--edge:#624c2922}
:root[data-palette="taupe"]{color-scheme:dark;--bg:#201c1a;--text:#f7f0e7;--muted:#c5b9b0;--quiet:#c5b9b0;--orange-light:#f8b58e;--surface:#302924;--surface-hover:#40352f;--surface-alt:#382a24;--header-surface:#302924ee;--line:#918073;--note-bg:#eee3d5;--note-text:#342b25;--note-muted:#6a594c;--ambient:#40342c;--game-bg:#1a1614;--game-halo:#493b31;--edge:#ffffff12}

/* Compact icon-only controls. Accessible names and native tooltips stay on each button. */
.theme-picker[hidden]{display:none!important}
.theme-picker{display:flex;align-items:center;flex:none;width:max-content}
/* One quiet closing section: identity and contact, then a shared utility rail. */
.footer.footer{display:block;padding-block:36px 28px}
.footer-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);align-items:start;gap:36px 64px;padding-block:32px;border-top:1px solid var(--edge)}
.footer-identity{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.footer-identity .brand{display:inline-flex;align-items:center;min-height:44px;width:auto}
.footer-identity .brand img{width:164px}
.footer-identity p{font-size:12px;line-height:1.8;color:var(--muted)}
.footer-reach{min-width:0}
.footer-label{margin-bottom:8px;color:var(--muted);font-size:11px;font-weight:550;letter-spacing:.075em;text-transform:uppercase}
.footer-contact{display:flex;flex-direction:column;gap:2px;min-width:0;font-style:normal}
.footer-contact>a{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:44px;padding-block:7px;background:transparent;border:0;border-radius:4px;color:var(--text);text-decoration:none;transition:color .2s}
.footer-contact-copy{min-width:0;font-size:22px;font-weight:500;line-height:1.35;letter-spacing:-.025em}
.footer-contact-value{display:flex;align-items:center;gap:12px;min-width:0}
.footer-contact-value>span{min-width:0;overflow-wrap:anywhere;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-color .2s}
.footer-contact-value>.contact-method-icon{width:19px;height:19px;flex:none;color:var(--orange-light)}
.footer-contact-arrow{display:grid;place-items:center;flex:none;width:24px;height:24px;color:var(--orange-light)}
.footer-contact-arrow .ui-icon{width:19px;height:19px}
.footer-contact>a:hover,.footer-contact>a:focus-visible{color:var(--orange-light)}
.footer-contact>a:hover .footer-contact-value>span,.footer-contact>a:focus-visible .footer-contact-value>span{text-decoration-color:currentColor}
.footer-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px 28px;width:100%;padding-top:20px;border-top:1px solid var(--edge)}
.footer .footer-actions{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px 22px;width:auto;margin:0}
.footer-actions>a{min-height:44px;display:inline-flex;align-items:center;font-size:12px}
.footer .back-top{gap:7px;margin:0;white-space:nowrap}
.footer .back-top>span{width:20px;height:20px}
.footer .back-top .ui-icon{width:18px;height:18px}
.footer-preferences{display:flex;align-items:center;flex-wrap:wrap;gap:12px;min-width:0}
.footer-credit{display:inline-flex;justify-self:end;align-items:center;gap:4px;min-height:44px;color:var(--muted);font-size:11px;line-height:1.5;white-space:nowrap}
.footer-credit-name{font-weight:600;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}
.footer-credit:hover,.footer-credit:focus-visible{color:var(--text)}
.footer-credit:hover .footer-credit-name,.footer-credit:focus-visible .footer-credit-name{text-decoration-color:currentColor}
.theme-options{display:flex;width:max-content;gap:2px;padding:2px;border:1px solid var(--edge);border-radius:26px;background:var(--bg)}
.theme-option{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.theme-option .ui-icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8}
.theme-option:hover{background:var(--surface-hover);color:var(--text)}
.theme-option[aria-pressed="true"]{border-color:var(--orange-light);background:var(--surface);color:var(--text)}
.theme-option:focus-visible{outline:2px solid var(--orange-light);outline-offset:3px}
.navigation>.theme-picker{display:none}
@media(max-width:650px){
  .navigation>.theme-picker{display:flex;align-self:flex-start;margin-top:0;padding-top:4px;opacity:0;transform:translateY(-6px);transition:opacity .15s ease,transform .22s ease}
  .navigation.open>.theme-picker{opacity:1;transform:translateY(0);transition:opacity .28s ease .19s,transform .38s cubic-bezier(.16,1,.3,1) .19s}
}
@media(prefers-reduced-motion:reduce){html:not(.motion-enabled) :is(.theme-option,.navigation>.theme-picker,.navigation.open>.theme-picker){transition:none;transform:none}}
html.motion-paused .theme-option,html.motion-paused .navigation>.theme-picker{transition:none;transform:none}

/* Shared semantic surfaces and text across hero, navigation, content and footer. */
html:root :is(h2>span,.hero-bottom,.hero-bottom a,.intro-replay,.signature>span,.footer,.privacy-link,.privacy-link:hover){color:var(--quiet)}
html:root :is(.hero h1 .hero-promise,.about h2>span,.contact h2>span,.privacy-intro h1 span,.note-top>span){color:var(--orange-light)}
html:root .header.is-scrolled{background:var(--header-surface);border-color:var(--edge);box-shadow:0 8px 28px #00000018}
html:root .navigation>a:not(.nav-contact){color:var(--muted)}
html:root .navigation>a:not(.nav-contact):hover{color:var(--orange-light)}
html:root :is(.button-soft,.scroll-orb,.back-top>span,.step-number,.motion-toggle){background:var(--surface);color:var(--text);border-color:var(--line)}
html:root .footer .back-top>span{background:transparent;color:var(--muted)}
html:root .footer .motion-toggle{min-height:44px;padding:8px 10px;background:transparent;border:1px solid transparent;border-radius:22px;color:var(--muted)}
html:root .footer .motion-toggle:hover{background:var(--surface);color:var(--text)}
html:root .footer .footer-actions>a:hover{color:var(--orange-light)}
.footer-preferences .motion-icon .ui-icon{width:17px;height:17px}
@media(max-width:950px){
  .footer-bottom{grid-template-columns:minmax(0,1fr) auto;gap:8px 24px}
  .footer-credit{grid-column:1/-1;justify-self:start}
}
@media(max-width:650px){
  .footer.footer{padding-block:24px}
  .footer-main{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:28px}
  .footer-identity .brand img{width:154px}
  .footer-reach{width:100%;max-width:360px}
  .footer-contact-copy{font-size:21px}
  .footer-bottom{grid-template-columns:minmax(0,1fr);gap:12px;padding-top:16px}
  .footer .footer-actions{justify-content:space-between;gap:4px 20px}
  .footer-preferences{gap:10px}
  .footer-credit{grid-column:auto;justify-self:start}
}
html:root .button-soft:hover{background:var(--surface-hover)}
html:root .button-dark{background:#2b2824;color:#f4f2e9}
html:root .button-dark:hover{background:#443b33}
html:root :is(.button-orange,.nav-contact,.receipt-game-start,.receipt-game-resume,.receipt-game-cta):hover{background:#f9aa7f;color:#241d16}
html:root :is(.hello-note,.personal-seal){background:var(--note-bg);color:var(--note-text)}
html:root .hello-note small{color:var(--note-muted)}
html:root .portrait-grain{background:linear-gradient(0deg,#00000030,transparent 60%)}
html:root .ribbon-shadow{stroke:#000;opacity:.35}
html:root .floating-note{background:var(--surface);color:var(--text);border-color:var(--edge)}
html:root :is(.service-card,.icon-island,.form-panel){background:var(--surface)}
html:root :is(.outsourcing,.scope-item:nth-child(even) .icon-island){background:var(--surface-alt)}
html:root :is(.service-card:hover,.icon-island:hover,.scope-item:hover .icon-island){background:var(--surface-hover)}
html:root .service-card::after{border-color:var(--line);opacity:.15}
html:root :is(.service-card p,.about-copy>p,.form-person,.preview-note){color:var(--muted)}
html:root .pill{background:var(--bg);color:var(--text)}
html:root .circle-arrow{border-color:var(--line)}
html:root .about{background:radial-gradient(ellipse at 0% 60%,var(--ambient),var(--bg) 79%)}
html:root .about-orbit{border-color:var(--line);opacity:.25}
html:root .step.is-reached .step-number{background:var(--surface-hover);color:var(--text)}
html:root .step.is-current .step-number{background:var(--orange);color:#2b251a}
@media(max-width:650px){
  html:root .header,html:root .header.is-scrolled{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  html:root .header.is-scrolled::before{background:var(--header-surface);border-color:var(--edge);box-shadow:0 8px 28px #00000018;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  html:root .header.menu-open::before{background:var(--surface);border-color:var(--edge);box-shadow:0 14px 32px #00000025}
}

/* The game follows the same theme; copper folder and paper artwork stay intact. */
html:root .receipt-game-card{background:radial-gradient(ellipse at 100% 0%,var(--ambient),transparent 70%),var(--surface);border-color:var(--edge)}
html:root :is(.receipt-game-board,.receipt-game[data-game-phase="finished"] .receipt-game-board){background:radial-gradient(ellipse at 50% 110%,var(--game-halo),transparent 70%),var(--game-bg)}
html:root :is(.receipt-game-replay,.receipt-game-soft,.receipt-game-arrow){background:var(--surface);border-color:var(--line);color:var(--text)}
html:root :is(.receipt-game-replay,.receipt-game-soft,.receipt-game-arrow):hover{background:var(--surface-hover);border-color:var(--line)}
html:root :is(.receipt-game-note,.receipt-game-instructions,.receipt-game-hud>span,.receipt-game-overlay p,.receipt-game[data-game-phase="finished"] [data-game-close]){color:var(--muted)}
html:root :is(.receipt-game-hud strong,.receipt-game-overlay .receipt-game-result-count){color:var(--text)}
html:root .receipt-game-speech{background:var(--note-bg)}
html:root .receipt-game-speech::before{background:var(--note-bg)}
html:root .receipt-game-speech p{color:var(--note-text)}
html:root .receipt-game-speech>span{color:var(--note-muted)}
html:root :is(.receipt-game-overlay,.receipt-game[data-game-phase="finished"] .receipt-game-overlay){background:var(--game-bg)}
html:root .receipt-game-motion-note{color:var(--orange-light)}

/* Secondary pages use the same themes and switch. */
html:root :is(.privacy-lead,.privacy-date,.privacy-content p,.privacy-toc a){color:var(--muted)}
html:root :is(.privacy-content strong,.privacy-toc a:hover){color:var(--text)}
html:root .privacy-review{background:var(--surface);color:var(--text)}
html:root :is(.privacy-review strong,.privacy-toc p,.privacy-content p a){color:var(--orange-light)}
@media print{.theme-picker{display:none!important}html:root :is(.privacy-content p,.privacy-content strong,.privacy-content p a,.privacy-intro h1 span,.privacy-lead,.privacy-date){color:#111}}