/* 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;
  grid-auto-rows: min-content;
  gap: .35rem;
  justify-content: start;
  padding: 0;
  width: 6.5rem;
}

/* ---------- 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; }

.char--tama { left: 2rem;  bottom: 1.5rem; width: 60px;  height: 75px; }
.char--dino { right: 2rem; bottom: 1.5rem; width: 104px; height: 94px; }

/* ---------- 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;
  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; }

/* ---------- 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%;
    bottom: 1rem;
    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: 1.5rem;
    margin: 0 0 .8rem;
    overflow: visible;
  }
  .char { position: static; }
  .char--tama { width: 46px; height: 58px; }
  .char--dino { width: 72px; height: 65px; }

  .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); }

  .js .desktop__icons {
    inset: .6rem .6rem auto .6rem;
    width: auto;
    /* seven icons: narrow enough that a 320px screen still gets four across,
       so the grid stays two rows 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); }
}

/* Below this the desktop is full: icons, wordmark, tagline and counter already
   fill it, and there is genuinely nowhere for the two of them 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;
  }
}