/* Little Yesterday Vintage — the desktop.
   Windows 98 idiom: silver bevels, teal ground, system type. See BRAND.md.
   No webfonts, no dependencies, no build step.

   Layout model:
     no JS  -> an ordinary stacked document, readable and crawlable
     .js    -> a fixed desktop, absolutely positioned windows, a taskbar
   Everything desktop-shaped is scoped under .js so a script failure degrades
   to a page rather than to a blank teal rectangle. */

/* ---------- tokens ---------- */

:root {
  --desktop:      #008080;
  --chrome:       #c0c0c0;
  --chrome-lit:   #dfdfdf;
  --bevel-hi:     #ffffff;
  --bevel-lo:     #808080;
  --bevel-deep:   #000000;
  --paper:        #ffffff;
  --ink:          #000000;
  --ink-soft:     #4a4a4a;

  --titlebar:     #000080;
  --titlebar-2:   #1084d0;
  --titlebar-off: #565656;
  --titlebar-off2:#707070;

  --link:         #0000ee;
  --visited:      #551a8b;

  /* the pastel layer, sampled straight out of the wordmark artwork */
  --periwinkle: #c8dcfd;
  --grid:       #fcd6f8;
  --mint:       #7dd3c1;
  --bubblegum:  #f691d2;
  --lilac:      #a591f1;
  --butter:     #feec84;
  --orchid:     #bc5acd;
  --strip:      #9889d6;

  /* seasonal — the Halloween drop only */
  --pumpkin:      #ff6600;
  --grape:        #663399;
  --grape-2:      #9a6fd0;
  --slime:        #33cc33;

  --display: "Arial Black", "Arial Bold", Gadget, sans-serif;
  --body:    Verdana, Geneva, Tahoma, sans-serif;
  --data:    "Courier New", Courier, monospace;
  --ui:      Tahoma, Verdana, Geneva, sans-serif;

  --taskbar-h: 40px;
  --bar-h:     26px;
}

/* ---------- reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--desktop);
  color: var(--ink);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0 0 .9em; }
h1, h2, h3 { line-height: 1.15; }
ul, ol { padding-left: 1.4em; }
img, svg { max-width: 100%; }

a { color: var(--link); }
a:visited { color: var(--visited); }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- bevels ----------
   The canonical Windows 98 recipe: two 1px rings. Outer is light-grey over
   black, inner is white over dark-grey. Sunken inverts both. */

.bevel-out {
  border: 2px solid;
  border-color: var(--chrome-lit) var(--bevel-deep) var(--bevel-deep) var(--chrome-lit);
  box-shadow: inset 1px 1px 0 var(--bevel-hi), inset -1px -1px 0 var(--bevel-lo);
}

.bevel-in {
  border: 2px solid;
  border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  box-shadow: inset 1px 1px 0 var(--bevel-deep), inset -1px -1px 0 var(--chrome-lit);
}

/* ---------- stacked document, the no-JS default ---------- */

.wallpaper {
  padding: 2.5rem 1.25rem 1.5rem;
  text-align: center;
  color: var(--paper);
}
.wallpaper__mark { margin: 0 0 .9rem; }
.wallpaper__mark img {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .45);
}
.wallpaper__line {
  margin: 0;
  font-family: var(--data);
  font-size: .9rem;
  line-height: 1.4;
}

/* The visitor counter. A real count out of D1, not decoration pretending to
   be one, so it starts at zero and climbs. */
.counter {
  display: inline-grid;
  justify-items: center;
  gap: .3rem;
  margin: 1rem 0 0;
}
.counter[hidden] { display: none; }
.counter__label {
  padding: .25rem .6rem;
  background: var(--periwinkle);
  border: 2px solid;
  border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  box-shadow: inset 1px 1px 0 var(--bevel-deep), inset -1px -1px 0 var(--chrome-lit);
  color: var(--ink);
  font-family: var(--data);
  font-size: .66rem;
  line-height: 1.35;
  text-align: center;
}
.counter__digits {
  padding: .2rem .5rem;
  background: #1a1a1a;
  border: 2px solid var(--ink);
  color: var(--mint);
  font-family: var(--data);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .34em;
  text-indent: .34em;
}

.desktop__icons {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  padding: 0 1rem 1.5rem;
  margin: 0;
  list-style: none;
}

.win {
  background: var(--chrome);
  max-width: 62rem;
  margin: 0 auto 1.25rem;
  padding: 3px;
}

.taskbar { display: none; }

/* ---------- desktop, once the script has run ---------- */

.js body { overflow: hidden; height: 100%; }
.js html { height: 100%; }

.js .desktop {
  position: fixed;
  inset: 0 0 var(--taskbar-h) 0;
  overflow: hidden;
}

.js .wallpaper {
  position: absolute;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(36rem, 60vw);
  max-width: none;
  padding: 0;
  text-align: center;
  pointer-events: none;
}
.js .wallpaper__line { font-size: .85rem; }

.js .desktop__icons {
  position: absolute;
  /* height of its contents, not of the desktop: a full-height box here sits
     invisibly on top of anything in the bottom-left corner */
  inset: .75rem auto auto .75rem;
  display: grid;
  /* Ten icons no longer fit one column, so they fill six rows and wrap into a
     second, which is what a real desktop of this era does. Six is fixed rather
     than auto-fill: auto-fill needs a definite height, and this box is
     deliberately only as tall as its contents. */
  grid-auto-flow: column;
  grid-template-rows: repeat(6, min-content);
  grid-auto-columns: 6.5rem;
  gap: .35rem;
  justify-content: start;
  padding: 0;
  width: auto;
}

/* ---------- sparkles ----------
   Lifted from the wordmark artwork and set drifting on the desktop. First
   painted, so they sit under the wallpaper, the icons and every window: they
   are weather, not furniture. */

.sparkles { display: none; }

.js .sparkles {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.sparkle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  /* the slow wander */
  animation: sparkle-drift var(--d, 19s) ease-in-out var(--t, 0s) infinite;
  will-change: transform;
}

.sparkle__star {
  display: block;
  width: 100%;
  height: 100%;
  /* the glint, on its own clock so the pair never visibly repeats */
  animation: sparkle-twinkle var(--tw, 6.5s) ease-in-out var(--tt, 0s) infinite;
  will-change: transform, opacity;
}

@keyframes sparkle-drift {
  0%   { transform: translate3d(0, 0, 0)      rotate(0deg); }
  25%  { transform: translate3d(11px, -19px, 0) rotate(7deg); }
  50%  { transform: translate3d(-8px, -31px, 0) rotate(-6deg); }
  75%  { transform: translate3d(-14px, -13px, 0) rotate(5deg); }
  100% { transform: translate3d(0, 0, 0)      rotate(0deg); }
}

/* Steady for most of the cycle, then one quick glint: a star that pulsed
   evenly would read as a throb rather than a sparkle. */
@keyframes sparkle-twinkle {
  0%, 45%, 100% { transform: scale(1)    rotate(0deg);   opacity: .80; }
  56%           { transform: scale(.20)  rotate(45deg);  opacity: .30; }
  68%           { transform: scale(1.18) rotate(-14deg); opacity: 1; }
  80%           { transform: scale(.95)  rotate(0deg);   opacity: .88; }
}

/* ---------- the two characters from the mockup ---------- */

.characters { display: none; }

/* The wrapper only exists for phones. display:contents takes it out of the box
   tree here, so the two layers position against .desktop as siblings. */
.stage { display: contents; }

.js .characters {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.char { position: absolute; }


/* The drop's three, one to a free corner so they frame the wordmark rather
   than crowding one edge. Top-left belongs to the icon grid, so the witch
   stands just clear of it. */
.char--witch   { left: 16rem;  top: 2rem;      width: 56px; height: 70px; }
.char--spider  { right: 4rem;  top: 2.5rem;    width: 56px; height: 42px; }
.char--lantern { right: 5rem;  bottom: 2.5rem; width: 66px; height: 66px; }

/* ---------- the drop's banner ---------- */

.banner {
  /* Its own line: .counter is inline-grid and would otherwise sit beside it. */
  display: block;
  width: fit-content;
  /* .js .wallpaper is pointer-events:none as decoration; this is a control. */
  pointer-events: auto;
  margin: .9rem auto 0;
  padding: .55rem 1.1rem;
  background: var(--pumpkin);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--data);
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.banner:hover,
.banner:focus-visible { background: var(--butter); }

/* Pressed, like every other bevelled control in the shop. */
.banner:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}

/* ---------- desktop icons ---------- */

.icon {
  display: grid;
  text-decoration: none;
  justify-items: center;
  gap: .3rem;
  width: 6.5rem;
  padding: .4rem .25rem;
  background: none;
  border: 0;
  color: var(--paper);
  font-family: var(--ui);
  font-size: .72rem;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
}
.icon__glyph {
  display: block;
  width: 32px;
  height: 32px;
}
.icon__label {
  display: inline-block;
  padding: 1px 3px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .6);
}
.icon:hover .icon__label,
.icon.is-selected .icon__label {
  background: var(--titlebar);
  text-shadow: none;
}
/* The one nudge on the desktop: which icon to open first. It is removed the
   moment that window has been opened. */
.icon__badge {
  display: inline-block;
  margin-top: .1rem;
  padding: 1px 5px;
  background: var(--pumpkin);
  color: var(--ink);
  border: 1px solid var(--ink);
  font-family: var(--ui);
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-shadow: none;
}
.icon.is-used .icon__badge { display: none; }

.icon:focus-visible { outline: none; }
.icon:focus-visible .icon__label {
  background: var(--titlebar);
  text-shadow: none;
  outline: 2px dotted var(--paper);
  outline-offset: 1px;
}

/* ---------- windows ---------- */

.js .win {
  position: absolute;
  top: 3rem;
  left: 9rem;
  width: min(54rem, calc(100vw - 11rem));
  max-width: none;
  max-height: calc(100% - 4rem);
  margin: 0;
  display: none;
  flex-direction: column;
  z-index: 10;
}
.js .win.is-open { display: flex; }
.js .win.is-min  { display: none; }

.js .win--max {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100%;
  max-height: 100%;
}

.win__bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-height: var(--bar-h);
  padding: 2px 2px 2px 4px;
  background: var(--titlebar-off);
  background: linear-gradient(90deg, var(--titlebar-off), var(--titlebar-off2));
  color: var(--paper);
  flex: 0 0 auto;
}
.win--active > .win__bar {
  background: var(--titlebar);
  background: linear-gradient(90deg, var(--titlebar), var(--titlebar-2));
}
/* seasonal: the drop wears grape, the rest of the shop stays navy */
.win--season.win--active > .win__bar {
  background: linear-gradient(90deg, var(--grape), var(--grape-2));
}
.js .win__bar { cursor: move; touch-action: none; }

.win__icon { flex: 0 0 auto; width: 16px; height: 16px; display: block; }

.win__title {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--ui);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win__controls { display: flex; gap: 2px; flex: 0 0 auto; }

.winbtn {
  position: relative;
  width: 20px;
  height: 18px;
  padding: 0;
  background: var(--chrome);
  border: 2px solid;
  border-color: var(--chrome-lit) var(--bevel-deep) var(--bevel-deep) var(--chrome-lit);
  box-shadow: inset 1px 1px 0 var(--bevel-hi), inset -1px -1px 0 var(--bevel-lo);
  cursor: pointer;
  color: var(--ink);
}
.winbtn:active {
  border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  box-shadow: inset 1px 1px 0 var(--bevel-deep), inset -1px -1px 0 var(--chrome-lit);
}
.winbtn:focus-visible { outline: 2px dotted var(--ink); outline-offset: -5px; }

/* glyphs drawn rather than typed, so they stay crisp at any size */
.winbtn--min::before {
  content: ""; position: absolute; left: 4px; bottom: 3px;
  width: 8px; height: 2px; background: var(--ink);
}
.winbtn--max::before {
  content: ""; position: absolute; left: 4px; top: 3px;
  width: 8px; height: 8px;
  border: 1px solid var(--ink); border-top-width: 2px;
}
.winbtn--close::before,
.winbtn--close::after {
  content: ""; position: absolute; left: 7px; top: 3px;
  width: 2px; height: 9px; background: var(--ink);
}
.winbtn--close::before { transform: rotate(45deg); }
.winbtn--close::after  { transform: rotate(-45deg); }

.win__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: var(--periwinkle);
  background-image:
    repeating-linear-gradient(0deg,  var(--grid) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 26px);
  padding: 1.1rem 1.25rem 1.4rem;
  margin-top: 3px;
  border: 2px solid;
  border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  box-shadow: inset 1px 1px 0 var(--bevel-deep), inset -1px -1px 0 var(--chrome-lit);
}
.win__body > :last-child { margin-bottom: 0; }

.win__body h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.25rem, 3.4vw, 1.9rem);
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin: 0 0 .5rem;
}
.win__body h3 {
  font-family: var(--ui);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 1.5rem 0 .5rem;
}
.win__body p, .win__body li { max-width: 42rem; }

.lede { font-size: .95rem; }
.note { font-size: .8rem; color: var(--ink-soft); }

/* a Notepad-ish window for the read-me */
.win--text .win__body { font-family: var(--data); font-size: .88rem; }
.win--text .win__body h2 { font-family: var(--display); }

/* ---------- controls ---------- */

.btn {
  display: inline-block;
  min-width: 9rem;
  padding: .55rem 1.1rem;
  background: var(--chrome);
  border: 2px solid;
  border-color: var(--chrome-lit) var(--bevel-deep) var(--bevel-deep) var(--chrome-lit);
  box-shadow: inset 1px 1px 0 var(--bevel-hi), inset -1px -1px 0 var(--bevel-lo);
  color: var(--ink);
  font-family: var(--ui);
  font-size: .82rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
a.btn, a.btn:visited { color: var(--ink); }
.btn:active {
  border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  box-shadow: inset 1px 1px 0 var(--bevel-deep), inset -1px -1px 0 var(--chrome-lit);
  padding: calc(.55rem + 1px) calc(1.1rem - 1px) calc(.55rem - 1px) calc(1.1rem + 1px);
}
.btn:focus-visible { outline: 2px dotted var(--ink); outline-offset: -6px; }
.btn[disabled] { color: var(--bevel-lo); text-shadow: 1px 1px 0 var(--bevel-hi); cursor: progress; }

.btn--go { background: var(--pumpkin); }

/* ---------- the order form ---------- */

.order {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 1.75rem;
  align-items: start;
}

.form { display: grid; gap: 1.25rem; }

.field {
  display: grid;
  gap: .45rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.field--pair { grid-template-columns: 1fr 1fr; gap: 1rem; }
.field--pair > div { display: grid; gap: .45rem; min-width: 0; }

.form label, .form legend {
  padding: 0;
  font-family: var(--ui);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.hint { margin: 0; font-size: .76rem; color: var(--ink-soft); }

/* 16px minimum, or iOS zooms the whole layout on focus */
.form input, .form textarea {
  width: 100%;
  padding: .5rem .55rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  border: 2px solid;
  border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  box-shadow: inset 1px 1px 0 var(--bevel-deep), inset -1px -1px 0 var(--chrome-lit);
  border-radius: 0;
}
.form textarea { resize: vertical; }
.form input:focus-visible, .form textarea:focus-visible {
  outline: 2px solid var(--titlebar);
  outline-offset: 1px;
}
.form ::placeholder { color: #6f6f6f; }

.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: .5rem; }
.tiers label, .chips label { cursor: pointer; }
.tiers input, .chips input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
}

.tiers span {
  display: grid;
  gap: .1rem;
  justify-items: center;
  padding: .7rem .4rem;
  background: var(--chrome);
  border: 2px solid;
  border-color: var(--chrome-lit) var(--bevel-deep) var(--bevel-deep) var(--chrome-lit);
  box-shadow: inset 1px 1px 0 var(--bevel-hi), inset -1px -1px 0 var(--bevel-lo);
  font-family: var(--ui);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.tiers span b { font-family: var(--display); font-weight: 900; font-size: 1.35rem; letter-spacing: -.01em; }
.tiers input:checked + span,
.chips input:checked + span {
  background: var(--pumpkin);
  border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  box-shadow: inset 1px 1px 0 var(--bevel-deep), inset -1px -1px 0 var(--chrome-lit);
}
.tiers input:focus-visible + span,
.chips input:focus-visible + span { outline: 2px dotted var(--ink); outline-offset: -6px; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips span {
  display: inline-block;
  padding: .45rem .8rem;
  background: var(--chrome);
  border: 2px solid;
  border-color: var(--chrome-lit) var(--bevel-deep) var(--bevel-deep) var(--chrome-lit);
  box-shadow: inset 1px 1px 0 var(--bevel-hi), inset -1px -1px 0 var(--bevel-lo);
  font-family: var(--ui);
  font-size: .76rem;
}

.form-status {
  margin: 0;
  min-height: 1.4em;
  font-family: var(--ui);
  font-size: .8rem;
  font-weight: 700;
}
.form-status[data-tone="ok"]  { color: #1a6b1a; }
.form-status[data-tone="bad"] { color: #a01414; }

/* ---------- the VHS label ---------- */

.summary { display: grid; gap: .6rem; }

.label {
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 0;
  font-family: var(--data);
  font-size: .8rem;
}
.label__head {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .6rem;
  border-bottom: 2px solid var(--ink);
  background: var(--chrome);
  font-family: var(--ui);
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.label__dot { width: 8px; height: 8px; background: var(--slime); flex: 0 0 auto; }

.label__title {
  margin: 0;
  font-weight: 900;
  padding: .55rem .6rem .5rem;
  border-bottom: 1px solid var(--ink);
  font-family: var(--display);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: -.01em;
  min-height: 2.6rem;
}

.label__rows { margin: 0; padding: 0; }
.label__rows div {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: .5rem;
  padding: .3rem .6rem;
  border-bottom: 1px solid #cfcfcf;
}
.label__rows dt {
  font-family: var(--ui);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-soft);
  align-self: center;
}
.label__rows dd { margin: 0; overflow-wrap: anywhere; }

.label__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem .6rem .55rem;
  border-top: 2px solid var(--ink);
  font-family: var(--ui);
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.label__total b { font-family: var(--display); font-weight: 900; font-size: 1.2rem; letter-spacing: 0; }

/* ---------- panels: the mockup's about-us / features boxes ---------- */

.panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.panel {
  background: #d5d4d4;
  border: 2px solid;
  border-color: var(--chrome-lit) var(--bevel-deep) var(--bevel-deep) var(--chrome-lit);
  box-shadow: inset 1px 1px 0 var(--bevel-hi), inset -1px -1px 0 var(--bevel-lo);
  padding: 3px;
}
/* beats .win__body h2, which would otherwise make this a display heading */
.panel .panel__bar {
  margin: 0;
  padding: .3rem .55rem;
  background: linear-gradient(90deg, var(--titlebar), var(--titlebar-2));
  color: var(--paper);
  font-family: var(--ui);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
}
.panel__body, .panel__list { margin: 0; padding: .75rem .8rem; font-family: var(--data); font-size: .82rem; }
.panel__body p { margin: 0 0 .7rem; max-width: none; }
.panel__body p:last-child { margin-bottom: 0; }
.panel__list { list-style: none; display: grid; gap: .45rem; }

.panel__links {
  list-style: none;
  margin: 0;
  padding: .75rem .8rem;
  display: grid;
  gap: .55rem;
  font-family: var(--data);
  font-size: .82rem;
}
.panel__links li { display: flex; align-items: center; gap: .55rem; max-width: none; }
.panel__links svg { flex: 0 0 auto; width: 20px; height: 20px; }
.panel__list li { max-width: none; }
.panel__list li::before { content: "\2665"; color: var(--bubblegum); margin-right: .5ch; }

/* beside the VHS label the strip is the last thing read, so it loses the
   top margin it needs when it follows body copy */
.strip--summary { margin-top: 0; }

/* the announcement bar along the foot of a window */
.strip {
  margin: 1.5rem 0 0;
  padding: .6rem .8rem;
  background: var(--strip);
  border: 2px solid var(--ink);
  color: var(--ink);
  font-family: var(--data);
  font-size: .8rem;
  font-weight: 700;
  text-align: center;
  max-width: none;
}

/* ---------- taskbar ---------- */

.js .taskbar {
  position: fixed;
  inset: auto 0 0 0;
  height: var(--taskbar-h);
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: 3px 4px;
  background: var(--chrome);
  border-top: 2px solid;
  border-color: var(--bevel-hi);
  box-shadow: inset 0 1px 0 var(--chrome-lit);
  z-index: 100;
}

.start {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
  padding: .3rem .7rem .3rem .5rem;
  background: var(--chrome);
  border: 2px solid;
  border-color: var(--chrome-lit) var(--bevel-deep) var(--bevel-deep) var(--chrome-lit);
  box-shadow: inset 1px 1px 0 var(--bevel-hi), inset -1px -1px 0 var(--bevel-lo);
  font-family: var(--ui);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink);
}
.start[aria-expanded="true"] {
  border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  box-shadow: inset 1px 1px 0 var(--bevel-deep), inset -1px -1px 0 var(--chrome-lit);
}
.start:focus-visible { outline: 2px dotted var(--ink); outline-offset: -6px; }
.start__glyph { width: 18px; height: 18px; display: block; flex: 0 0 auto; }

.tasks {
  flex: 1 1 auto;
  display: flex;
  gap: .25rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.task {
  flex: 0 1 12rem;
  min-width: 5rem;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .5rem;
  background: var(--chrome);
  border: 2px solid;
  border-color: var(--chrome-lit) var(--bevel-deep) var(--bevel-deep) var(--chrome-lit);
  box-shadow: inset 1px 1px 0 var(--bevel-hi), inset -1px -1px 0 var(--bevel-lo);
  font-family: var(--ui);
  font-size: .74rem;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  color: var(--ink);
}
.task span { overflow: hidden; text-overflow: ellipsis; }
.task svg { flex: 0 0 auto; }
.task[aria-pressed="true"] {
  border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  box-shadow: inset 1px 1px 0 var(--bevel-deep), inset -1px -1px 0 var(--chrome-lit);
  font-weight: 700;
}
.task:focus-visible { outline: 2px dotted var(--ink); outline-offset: -6px; }

.tray {
  flex: 0 0 auto;
  padding: .3rem .7rem;
  border: 2px solid;
  border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  box-shadow: inset 1px 1px 0 var(--bevel-deep), inset -1px -1px 0 var(--chrome-lit);
  font-family: var(--ui);
  font-size: .74rem;
  white-space: nowrap;
}

/* ---------- start menu ---------- */

.startmenu {
  position: fixed;
  left: 4px;
  bottom: var(--taskbar-h);
  z-index: 110;
  display: flex;
  width: 17rem;
  padding: 3px;
  background: var(--chrome);
  border: 2px solid;
  border-color: var(--chrome-lit) var(--bevel-deep) var(--bevel-deep) var(--chrome-lit);
  box-shadow: inset 1px 1px 0 var(--bevel-hi), inset -1px -1px 0 var(--bevel-lo);
}
.startmenu[hidden] { display: none; }

.startmenu__spine {
  flex: 0 0 1.9rem;
  font-weight: 900;
  background: linear-gradient(180deg, var(--titlebar-2), var(--titlebar));
  color: var(--paper);
  font-family: var(--display);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: right;
  padding: .7rem .3rem;
}

.startmenu__list { flex: 1 1 auto; margin: 0; padding: 0; list-style: none; }
.startmenu__list li + li.is-split { border-top: 2px groove var(--bevel-hi); margin-top: .25rem; padding-top: .25rem; }

.startmenu__item {
  display: flex;
  text-decoration: none;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .5rem .7rem;
  background: none;
  border: 0;
  font-family: var(--ui);
  font-size: .82rem;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.startmenu__item:hover,
.startmenu__item:focus-visible {
  background: var(--titlebar);
  color: var(--paper);
  outline: none;
}
.startmenu__item svg { flex: 0 0 auto; width: 20px; height: 20px; }

/* ---------- dialogs: shut down, 404 ---------- */

.dialog {
  position: fixed;
  z-index: 200;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(26rem, calc(100vw - 2rem));
  padding: 3px;
  background: var(--chrome);
  border: 2px solid;
  border-color: var(--chrome-lit) var(--bevel-deep) var(--bevel-deep) var(--chrome-lit);
  box-shadow: inset 1px 1px 0 var(--bevel-hi), inset -1px -1px 0 var(--bevel-lo);
}
.dialog[hidden] { display: none; }
.dialog__body { display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem .9rem; }
.dialog__body p { margin: 0; font-size: .86rem; }
.dialog__links {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: 0 .9rem;
}
.dialog__links .btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}
.dialog__links svg { flex: 0 0 auto; width: 16px; height: 16px; }

.btn--sm { min-width: 0; padding: .45rem .55rem; font-size: .72rem; }
.btn--sm:active { padding: calc(.45rem + 1px) calc(.55rem - 1px) calc(.45rem - 1px) calc(.55rem + 1px); }

.dialog__actions { display: flex; justify-content: flex-end; gap: .5rem; padding: .9rem .9rem .9rem; }
.dialog .btn { min-width: 6rem; }

.dialog__glyph { flex: 0 0 auto; }

.glyph-warn {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  background: var(--pumpkin);
  border: 2px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 1.2rem;
  color: var(--ink);
}

/* the 404 sits alone on the desktop */
.page404 { position: fixed; inset: 0; background: var(--desktop); }

/* ---------- boot ---------- */

#boot {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bevel-deep);
  color: #d8d8d8;
  font-family: var(--data);
  font-size: clamp(.72rem, 2.4vw, .85rem);
}
#boot[hidden] { display: none; }

.boot__post { padding: 1.4rem 1.2rem; }
.boot__post p { margin: 0 0 .25rem; }
.boot__post p:last-child { margin-top: .9rem; }
.boot__cursor {
  display: inline-block;
  width: .55em; height: 1em;
  background: #d8d8d8;
  vertical-align: -.14em;
}

.boot__splash {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.6rem;
  padding: 1.5rem;
  background: var(--desktop);
  text-align: center;
}
.boot__logo {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.8rem, 8vw, 3.4rem);
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: .95;
  color: var(--paper);
  text-shadow: 3px 3px 0 rgba(0, 0, 0, .45);
}
.boot__logo small {
  display: block;
  font-family: var(--ui);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-shadow: none;
  margin-top: .5rem;
}
.boot__bar {
  width: min(20rem, 70vw);
  height: 20px;
  padding: 3px;
  background: var(--chrome);
  border: 2px solid;
  border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  box-shadow: inset 1px 1px 0 var(--bevel-deep), inset -1px -1px 0 var(--chrome-lit);
}
.boot__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: repeating-linear-gradient(90deg,
    var(--titlebar) 0 8px, transparent 8px 10px);
}
#boot[data-phase="splash"] .boot__bar i { animation: boot-fill 1.3s linear forwards; }
@keyframes boot-fill { from { width: 0; } to { width: 100%; } }
.boot__hint {
  margin: 0;
  font-family: var(--ui);
  font-size: .72rem;
  color: var(--paper);
}

#boot[data-phase="post"]   .boot__splash { display: none; }
#boot[data-phase="splash"] .boot__post   { display: none; }

/* ---------- responsive: maximised-window mode ---------- */

@media (max-width: 700px) {
  :root { --taskbar-h: 44px; }

  /* a phone screen is small enough that seven is clutter */
  .sparkle--few { display: none; }
  .sparkle { --s: 26px !important; }

  /* The gap between the icons and the wordmark is 23px on a small phone and
     343px on a large one, so nothing anchored to a percentage can sit in it.
     Put the pair in normal flow above the wordmark and let layout place them. */
  .js .stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 50%;
    /* Tight against the taskbar: with ten icons the band above is short. */
    bottom: .5rem;
    transform: translateX(-50%);
    width: calc(100% - 1.5rem);
    max-width: 24rem;
  }
  .js .characters {
    position: static;
    inset: auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: .5rem;
    margin: 0 0 .8rem;
    overflow: visible;
  }
  .char { position: static; inset: auto; }
  /* Ten icons take three rows on a phone where seven took two, so the band
     left for the characters is shorter than it was. Decoration gives way to
     navigation: all five still appear, just smaller. */
  .char--witch   { width: 30px; height: 38px; }
  .char--lantern { width: 32px; height: 32px; }
  .char--spider  { width: 32px; height: 24px; }

  .js .wallpaper {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    text-align: center;
    padding: 0;
  }
  .js .wallpaper__mark img { border-width: 2px; box-shadow: 3px 3px 0 rgba(0, 0, 0, .45); }

  /* The four outbound shortcuts come off the phone desktop. Ten icons take
     three rows here, which leaves no band for the wordmark and the drop's
     characters. Nothing is lost: every social is still in About us and in the
     shut-down dialog, and the six that remain are the shop's own sections. */
  .shortcut { display: none; }

  .js .desktop__icons {
    inset: .6rem .6rem auto .6rem;
    width: auto;
    /* Back to rows: the desktop wraps into columns, which on a phone would
       make one very tall column instead of a shallow grid. */
    grid-auto-flow: row;
    grid-template-rows: none;
    /* narrow enough that a 320px screen still gets four across, so the grid
       stays shallow and the wordmark keeps its room */
    grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr));
    justify-content: stretch;
  }
  /* seven icons in two rows leaves the wordmark very little room, so trim the
     vertical cost of each one */
  .icon {
    width: auto;
    padding: .3rem .15rem;
    gap: .2rem;
    font-size: .64rem;
    line-height: 1.25;
  }
  .icon__glyph { width: 26px; height: 26px; }

  /* every window opens maximised; the taskbar is the navigation */
  .js .win {
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
  }
  .js .win__bar { cursor: default; }

  .win__body { padding: .9rem .8rem 1.2rem; }
  .order { grid-template-columns: 1fr; gap: 1.5rem; }
  .field--pair { grid-template-columns: 1fr; }
  .task { flex: 0 0 auto; max-width: 11rem; }
  .startmenu { width: calc(100vw - 8px); }
}

/* A short phone is 45px short of holding the icons, the wordmark, the tagline,
   the drop's banner, the characters AND the counter stacked. The counter is
   what gives, but it does not have to disappear to do it: stacked it costs
   96px, and laid out in a row it costs about 43. So it stays, on one line.
   Only below 700px tall, and only at 360px and up, since narrower screens drop
   the characters anyway and have the room. */
@media (min-width: 360px) and (max-width: 700px) and (max-height: 700px) {
  .counter {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .5rem;
  }
  /* the label is two lines by a hard <br>, which is what makes it expensive */
  .counter__label br { display: none; }
  .counter__label { font-size: .58rem; padding: .2rem .45rem; line-height: 1.3; }
  /* a few px of slack, so a device with slightly larger text still clears */
  .banner { margin-top: .5rem; }
}

/* Below this the desktop is full: icons, wordmark, tagline, banner and counter
   already fill it, and there is genuinely nowhere for the characters to stand. */
@media (max-width: 359px) {
  .characters { display: none !important; }
}

/* Below this, four tiers auto-fit to three columns and orphan the fourth. */
@media (max-width: 460px) {
  .tiers { grid-template-columns: repeat(2, 1fr); }
}

/* period-sized buttons, finger-sized hit areas */
@media (pointer: coarse) {
  .winbtn { width: 30px; height: 28px; }
  .winbtn--min::before  { left: 9px; bottom: 6px; }
  .winbtn--max::before  { left: 9px; top: 7px; }
  .winbtn--close::before,
  .winbtn--close::after { left: 14px; top: 8px; }
  .win__bar { min-height: 34px; }
}

/* ---------- motion ----------
   Motion only where it models a physical action. See BRAND.md. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
  /* the sparkles stay, they just stop moving */
  .sparkle, .sparkle__star {
    animation: none !important;
    transform: none;
    opacity: .85;
  }
}