/* The switch occupies the existing light hint; the shop keeps it in its footer. */
/* The candle and the sun share one place, so a change crossfades them. */
#theme-toggle{display:none;position:relative;justify-items:center;row-gap:.6em;padding:0;margin:0;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;pointer-events:auto;touch-action:manipulation}
.js #theme-toggle{display:grid}
#theme-toggle::before{content:"";position:absolute;inset:-6px -10px}
#theme-toggle:focus-visible{outline:1px dotted currentColor;outline-offset:6px}
#theme-toggle svg{display:block;grid-area:1/1;width:2.2em;height:2.2em;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
#theme-toggle span{grid-area:2/1}
#theme-toggle .icon-sun,[data-theme=light] #theme-toggle .icon-candle{opacity:0}
[data-theme=light] #theme-toggle .icon-sun{opacity:1}
/* Light and dark: while a change is under way (theme.js), every colour on the
   page eases together over --theme-fade, in step with the art's crossfade.
   Backgrounds, borders, outlines and opacity ease wherever they are set. The
   inherited colours (text, fill, stroke, accent) ease only where an element
   sets its own; the wordmark, menu, bag and everything else that inherits
   follows its parent with no transition of its own. WebKit holds an inherited
   colour's own transition at the old colour until the parent's has ended, then
   catches up a second late; Chromium drags a link's. Every rule in theme.css,
   index.html or shop/style.css that sets color, stroke or accent-color to a
   value of its own is named here, for that property only. */
.theme-fading,.theme-fading *,.theme-fading ::before,.theme-fading ::after,.theme-fading ::placeholder{transition-property:background-color,border-color,outline-color,text-decoration-color,opacity!important;transition-duration:var(--theme-fade)!important;transition-timing-function:ease-in-out!important;transition-delay:0s!important}
.theme-fading,.theme-fading :is(body,#key,.used #key .light-control,.shop #theme-toggle,.primary,.skip,.muted,.eyebrow,.caption,.back,.notice,.text-button,.shop-note,.status,.empty,.empty .button,.page-intro p,.product-meta p,.product-description,.bag-item p,.amounts dt,.object-number,.object-label,.prose p,.prose li,.draft-tag,.admin-toolbar p,.order-heading p,.order-grid h4,.order-parcel p,.order-parcel summary,footer nav a),.theme-fading ::placeholder{transition-property:color,background-color,border-color,outline-color,text-decoration-color,opacity!important}
.theme-fading .object-frame svg{transition-property:stroke,background-color,border-color,outline-color,text-decoration-color,opacity!important}
.theme-fading input[type=checkbox]{transition-property:accent-color,background-color,border-color,outline-color,text-decoration-color,opacity!important}
/* An instant change (reduced motion) is instant for the key too; its own fade is for being used. */
.theme-changing #key{transition:none}
.shop #theme-toggle{font-size:clamp(.625rem,.9vw,.75rem);letter-spacing:.22em;line-height:normal;color:var(--muted)}
.shop .theme-control{flex-basis:100%;margin:0 0 12px}
.no-webgl #key{display:block}
.no-webgl #key li:not(.light-control){visibility:hidden}
html[data-theme=light],html[data-theme=light] body{background:#f1eee7;color:#211f1b}
html[data-theme=light]{--muted:#68635a;--line:#c9c4ba;--faint:#ece8df;color-scheme:light}
[data-theme=light] #menu-panel{background:#f1eee7}
[data-theme=light] #key{color:#68635a}
[data-theme=light].used #key{color:#68635a}
[data-theme=light].used #key li:not(.light-control){opacity:.65}
.used #key .light-control{color:rgba(255,255,255,.6)}
[data-theme=light].used #key .light-control{color:#68635a}
.still.light{color:#191715}
[data-theme=light] #key li::before{background-color:#f1eee7;opacity:0}
[data-theme=light] #menu-button:focus-visible{outline-color:#211f1b}
[data-theme=light] button,[data-theme=light] input,[data-theme=light] select,[data-theme=light] textarea{background:#f1eee7;border-color:#68635a}
[data-theme=light] #menu-button,[data-theme=light] #theme-toggle{background:transparent}
[data-theme=light] .primary,[data-theme=light] .skip{background:#211f1b;color:#f1eee7;border-color:#211f1b}
[data-theme=light] :focus-visible{outline-color:#211f1b}
[data-theme=light] button:hover:not(:disabled),[data-theme=light] .button:hover,[data-theme=light] .image-thumbnails button[aria-pressed=true]{border-color:#211f1b}
[data-theme=light] .object-frame{background:#ece8df}
[data-theme=light] .object-frame svg{stroke:#68635a}
[data-theme=light] .object-number,[data-theme=light] .object-label,[data-theme=light] .prose p,[data-theme=light] .prose li,[data-theme=light] .draft-tag,[data-theme=light] footer nav a,[data-theme=light] .order-parcel summary{color:#68635a}
[data-theme=light] .status,[data-theme=light] .empty .button,[data-theme=light] .amounts .total dt{color:#211f1b}
[data-theme=light] .status.error{border-color:#211f1b}
[data-theme=light] input[type=checkbox]{accent-color:#211f1b}
[data-theme=light] ::placeholder{color:#68635a;opacity:1}
html:not([data-theme=light]) .still.light,[data-theme=light] .still.dark{display:none!important}
/* Without JavaScript there is no remembered override, but the still and menu
   can still follow the system preference. */
@media(prefers-color-scheme:light){
 html:not(.js){--muted:#68635a;--line:#c9c4ba;--faint:#ece8df;color-scheme:light}
 html:not(.js),html:not(.js) body,html:not(.js) #menu-panel{background:#f1eee7;color:#211f1b}
 html:not(.js) footer nav a{color:#68635a}
 html:not(.js) .still.dark{display:none!important}
 @media(orientation:portrait){html:not(.js) .still.light.tall{display:block!important}}
 @media(orientation:landscape){html:not(.js) .still.light.wide{display:block!important}}
}