/* sqwidge.app: the app's pixel kit (docs/design/PIXEL_KIT.md) on the web.
   Cream by day, deep plum in dark mode; ink outlines, stepped corners, a lit top row, two
   shaded rows and a one-pixel drop shadow; berry pink for the one main thing. */

/* Nunito (SIL Open Font License, fonts/OFL.txt): the rounded face for devices without
   Apple's rounded system font. Apple devices use their own and never download it. */
@font-face {
  font-family: "Sqwidge Rounded";
  src: url("fonts/nunito-latin-wght.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;
  --p: 3px;              /* one pixel of the kit */
  --ip: 3px;             /* one pixel of an icon */
  --gutter: 16px;
  --font: ui-rounded, "SF Pro Rounded", "Sqwidge Rounded", system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;

  --bg: #F5EFE6;
  --text: #2B2A45;
  --text-2: #6B6278;
  --berry-text: #B03650;
  --edge: #2E2A3A;
  --drop: rgba(46, 42, 58, 0.35);
  --line: #E4D8C6;

  --cream-f: #FBF3E4; --cream-s: #E3D3BB; --cream-h: #FFFDF7;
  --panel-f: #FFFBF4; --panel-s: #E9DFD0; --panel-h: #FFFFFF; --panel-e: #3B3346;
  --berry-f: #EE6C84; --berry-s: #D4526B; --berry-h: #FF9DAF; --on-berry: #2B2A45;
  --soft-f: #FCE7EA; --soft-s: #F4D2D8; --soft-h: #FFFFFF;
  --mint-f: #DDF0D5; --mint-s: #C7E3BC; --mint-h: #FFFFFF;
  --bezel-f: #3B3346; --bezel-s: #2F283A; --bezel-h: #5A4F6E; --bezel-e: #2E2A3A;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1D1922;
    --text: #F4EDE3;
    --text-2: #A99FB4;
    --berry-text: #FF8FA3;
    --edge: #0E0B12;
    --drop: rgba(0, 0, 0, 0.5);
    --line: #3E3546;

    --cream-f: #2B2532; --cream-s: #231E29; --cream-h: #3A3342;
    --panel-f: #2B2532; --panel-s: #231E29; --panel-h: #3A3342; --panel-e: #0E0B12;
    --on-berry: #1D1922;
    --soft-f: #3B2A33; --soft-s: #33242C; --soft-h: #4A4452;
    --mint-f: #27392B; --mint-s: #1F2E22; --mint-h: #4A4452;
    --bezel-f: #3A3240; --bezel-s: #2E2735; --bezel-h: #4A4152; --bezel-e: #0E0B12;
  }
}

/* ---------------------------------------------------------------- base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

h1, h2, h3 {
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-color: var(--berry-f);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { color: var(--berry-text); }

:focus-visible {
  outline: 3px solid var(--berry-text);
  outline-offset: 3px;
}

.wrap {
  width: min(100% - 2 * var(--gutter), 1120px);
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - 2 * var(--gutter), 780px); }

@media (min-width: 640px) {
  :root { --gutter: 28px; }
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -80px;
  z-index: 10;
  padding: 8px 14px;
  background: var(--text);
  color: var(--bg);
  font-weight: 800;
  text-decoration: none;
}
.skip-link:focus { top: 10px; }

/* ---------------------------------------------------------------- the pixel tile
   PixelPainter.tile, as backgrounds and shadows: the element's box is the inside of the
   outline. Four corner pixels, the lit top row and the two shaded rows are background
   layers; the outline (short of each corner) and the drop shadow are box shadows. */

.tile, .btn {
  --tf: var(--cream-f); --ts: var(--cream-s); --th: var(--cream-h); --te: var(--edge);
  background:
    linear-gradient(var(--te) 0 0) 0 0 / var(--p) var(--p) no-repeat,
    linear-gradient(var(--te) 0 0) 100% 0 / var(--p) var(--p) no-repeat,
    linear-gradient(var(--te) 0 0) 0 100% / var(--p) var(--p) no-repeat,
    linear-gradient(var(--te) 0 0) 100% 100% / var(--p) var(--p) no-repeat,
    linear-gradient(var(--th) 0 0) 50% 0 / calc(100% - 2 * var(--p)) var(--p) no-repeat,
    linear-gradient(var(--ts) 0 0) 50% 100% / calc(100% - 2 * var(--p)) var(--p) no-repeat,
    linear-gradient(var(--ts) 0 0) 0 calc(100% - var(--p)) / 100% var(--p) no-repeat,
    var(--tf);
  box-shadow:
    0 calc(-2 * var(--p)) 0 calc(-1 * var(--p)) var(--te),
    0 calc(2 * var(--p)) 0 calc(-1 * var(--p)) var(--te),
    calc(-2 * var(--p)) 0 0 calc(-1 * var(--p)) var(--te),
    calc(2 * var(--p)) 0 0 calc(-1 * var(--p)) var(--te),
    0 calc(3 * var(--p)) 0 calc(-1 * var(--p)) var(--drop);
}

.tile--panel { --tf: var(--panel-f); --ts: var(--panel-s); --th: var(--panel-h); --te: var(--panel-e); }
.tile--soft { --tf: var(--soft-f); --ts: var(--soft-s); --th: var(--soft-h); }
.tile--mint { --tf: var(--mint-f); --ts: var(--mint-s); --th: var(--mint-h); }
.tile--berry, .btn--berry { --tf: var(--berry-f); --ts: var(--berry-s); --th: var(--berry-h); }
.tile--bezel { --tf: var(--bezel-f); --ts: var(--bezel-s); --th: var(--bezel-h); --te: var(--bezel-e); }

/* Buttons sink a pixel when pressed, as KitPressStyle does. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 18px 11px;
  color: var(--text);
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  margin: var(--p) var(--p) calc(2 * var(--p));
}
.btn:hover { color: var(--text); --tf: var(--th); }
.btn:active {
  transform: translateY(var(--p));
  box-shadow:
    0 calc(-2 * var(--p)) 0 calc(-1 * var(--p)) var(--te),
    0 calc(2 * var(--p)) 0 calc(-1 * var(--p)) var(--te),
    calc(-2 * var(--p)) 0 0 calc(-1 * var(--p)) var(--te),
    calc(2 * var(--p)) 0 0 calc(-1 * var(--p)) var(--te);
}
.btn:focus-visible { outline-offset: calc(3 * var(--p)); }
.btn--small { --p: 2px; min-height: 40px; padding: 6px 14px 9px; font-size: 0.9375rem; }
.btn--berry, .btn--berry:hover { color: var(--on-berry); }
.btn--berry:hover { --tf: #F57F95; }
.btn[aria-current="page"] { --tf: var(--berry-f); --ts: var(--berry-s); --th: var(--berry-h); color: var(--on-berry); }

/* ---------------------------------------------------------------- pixel icons */

.kit {
  display: inline-block;
  flex: none;
  width: calc(var(--kw, 11) * var(--ip));
  height: calc(var(--kh, 11) * var(--ip));
  background: center / 100% 100% no-repeat;
  image-rendering: pixelated;
  vertical-align: middle;
}
.kit--big { --ip: 6px; }
/* Icons in a list share one 11 x 11 box, so the text beside them lines up. */
.kit--boxed, .faq summary .kit, .kind-card .kit {
  width: calc(11 * var(--ip));
  height: calc(11 * var(--ip));
  background-size: calc(var(--kw, 11) * var(--ip)) calc(var(--kh, 11) * var(--ip));
}

/* build:kit */
/* Generated by build.py from scripts/ui/kitart.py: the app's own pixel icons. */
.kit--feed { --kw: 11; --kh: 11; background-image: url("kit/feed.svg"); }
.kit--tidy { --kw: 11; --kh: 11; background-image: url("kit/tidy.svg"); }
.kit--home { --kw: 11; --kh: 11; background-image: url("kit/home.svg"); }
.kit--wardrobe { --kw: 11; --kh: 11; background-image: url("kit/wardrobe.svg"); }
.kit--basket { --kw: 11; --kh: 11; background-image: url("kit/basket.svg"); }
.kit--journey { --kw: 11; --kh: 11; background-image: url("kit/journey.svg"); }
.kit--friends { --kw: 11; --kh: 11; background-image: url("kit/friends.svg"); }
.kit--shop { --kw: 11; --kh: 11; background-image: url("kit/shop.svg"); }
.kit--heart { --kw: 7; --kh: 6; background-image: url("kit/heart.svg"); }
.kit--settings { --kw: 11; --kh: 11; background-image: url("kit/settings.svg"); }
.kit--explore { --kw: 11; --kh: 11; background-image: url("kit/explore.svg"); }
.kit--collection { --kw: 11; --kh: 11; background-image: url("kit/collection.svg"); }
.kit--egg { --kw: 12; --kh: 13; background-image: url("kit/egg.svg"); }
.kit--sparkle { --kw: 7; --kh: 7; background-image: url("kit/sparkle.svg"); }
.kit--sparkleBerry { --kw: 5; --kh: 5; background-image: url("kit/sparkleBerry.svg"); }
/* /build:kit */

/* ---------------------------------------------------------------- the app icon
   Drawn on a 32-pixel grid; shown at whole multiples of it with a stepped pixel corner. */

.app-icon, .brand-icon {
  --a: calc(var(--size) / 32);
  display: block;
  width: var(--size);
  height: var(--size);
  image-rendering: pixelated;
  clip-path: polygon(0 calc(5 * var(--a)), var(--a) calc(5 * var(--a)), var(--a) calc(3 * var(--a)), calc(2 * var(--a)) calc(3 * var(--a)), calc(2 * var(--a)) calc(2 * var(--a)), calc(3 * var(--a)) calc(2 * var(--a)), calc(3 * var(--a)) var(--a), calc(5 * var(--a)) var(--a), calc(5 * var(--a)) 0, calc(100% - 5 * var(--a)) 0, calc(100% - 5 * var(--a)) var(--a), calc(100% - 3 * var(--a)) var(--a), calc(100% - 3 * var(--a)) calc(2 * var(--a)), calc(100% - 2 * var(--a)) calc(2 * var(--a)), calc(100% - 2 * var(--a)) calc(3 * var(--a)), calc(100% - var(--a)) calc(3 * var(--a)), calc(100% - var(--a)) calc(5 * var(--a)), 100% calc(5 * var(--a)), 100% calc(100% - 5 * var(--a)), calc(100% - var(--a)) calc(100% - 5 * var(--a)), calc(100% - var(--a)) calc(100% - 3 * var(--a)), calc(100% - 2 * var(--a)) calc(100% - 3 * var(--a)), calc(100% - 2 * var(--a)) calc(100% - 2 * var(--a)), calc(100% - 3 * var(--a)) calc(100% - 2 * var(--a)), calc(100% - 3 * var(--a)) calc(100% - var(--a)), calc(100% - 5 * var(--a)) calc(100% - var(--a)), calc(100% - 5 * var(--a)) 100%, calc(5 * var(--a)) 100%, calc(5 * var(--a)) calc(100% - var(--a)), calc(3 * var(--a)) calc(100% - var(--a)), calc(3 * var(--a)) calc(100% - 2 * var(--a)), calc(2 * var(--a)) calc(100% - 2 * var(--a)), calc(2 * var(--a)) calc(100% - 3 * var(--a)), var(--a) calc(100% - 3 * var(--a)), var(--a) calc(100% - 5 * var(--a)), 0 calc(100% - 5 * var(--a)));
}
.brand-icon {
  --size: 32px;
  background: url("img/app-icon.png") center / 100% 100% no-repeat;
}
.app-icon { --size: 128px; }
.icon-shadow { display: inline-block; filter: drop-shadow(0 6px 0 var(--drop)); }

/* ---------------------------------------------------------------- header */

.site-header { padding-block: 16px; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--text);
}
.brand:hover { color: var(--text); }
.site-nav ul {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------------------------------------------------------------- hero */

.hero { padding-block: 20px 32px; }
.hero-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(3.25rem, 2.2rem + 5vw, 5.75rem);
  line-height: 0.95;
  margin: 22px 0 10px;
}
.tagline {
  margin: 0 0 18px;
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.75rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--berry-text);
}
.pitch {
  margin: 0;
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  max-width: 34ch;
}
.store {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
}
/* "Coming soon" is a label, not a button: flat, no drop shadow, and a dashed outline,
   like a spot saved for something on its way. */
.soon {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 9px 18px 10px 12px;
  border: var(--p) dashed var(--text-2);
  background: var(--soft-f);
  font-weight: 900;
  font-size: 1rem;
  line-height: 1.2;
}
@media (min-width: 1000px) { .soon { font-size: 1.125rem; padding-right: 20px; } }
.store-note {
  margin: 14px 0 0;
  color: var(--text-2);
  font-size: 0.9375rem;
}

.hero-art { padding: 14px 0 6px; }
.hero-frame {
  position: relative;
  max-width: 540px;
  margin-inline: auto;
}
.sparkle {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
/* Kept inside the page's gutter on phones, so nothing pokes out sideways. */
.sparkle--a { --ip: 5px; top: -14px; left: -8px; }
.sparkle--b { --ip: 4px; top: 38%; right: -10px; }
.sparkle--c { --ip: 4px; bottom: -12px; left: 10%; }

@media (min-width: 800px) {
  .hero { padding-block: 36px 40px; }
  .hero-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 48px; }
  .hero-art { padding: 28px 24px 20px; }
  .sparkle--a { top: -26px; left: -26px; }
  .sparkle--b { right: -26px; }
  .sparkle--c { bottom: -22px; }
}

/* ---------------------------------------------------------------- screenshots */

/* A widget, cut out of its render: the frame sits 36 px in from each edge of a 3x render
   with corners of about 80 px, so the margins and radius below are those, as fractions. */
.widget {
  position: relative;
  overflow: hidden;
  width: 100%;
  filter: drop-shadow(0 6px 0 var(--drop));
}
.widget picture, .screen picture, .live picture { display: block; }
.widget img {
  display: block;
  max-width: none;
  width: calc(100% * var(--iw) / var(--cw));
  margin: calc(-100% * 36 / var(--cw)) 0 0 calc(-100% * 36 / var(--cw));
}
.widget--large { --iw: 1164; --cw: 1092; aspect-ratio: 1092 / 1146; border-radius: 7.3% / 6.95%; }
.widget--medium { --iw: 1164; --cw: 1092; aspect-ratio: 1092 / 510; border-radius: 7.3% / 15.6%; }
.widget--small { --iw: 582; --cw: 510; aspect-ratio: 1; border-radius: 15.6%; }
/* The Live Activity card sits 24 px in and 45 px down in its render. */
.live {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1131 / 240;
  border-radius: 6.6% / 31%;
}
.live img {
  display: block;
  max-width: none;
  width: calc(100% * 1179 / 1131);
  margin: calc(-100% * 45 / 1131) 0 0 calc(-100% * 24 / 1131);
}

/* A phone: a pixel bezel round a screenshot. */
.phone {
  --p: 4px;
  width: min(100%, 300px);
  margin: 0 auto calc(2 * var(--p));
  padding: calc(3 * var(--p)) calc(3 * var(--p)) calc(4 * var(--p));
}
.phone > * { display: block; width: 100%; }
.screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 804 / 1680;
  background: var(--bg);
}
.screen img {
  display: block;
  width: 100%;
  margin-top: calc(-100% * 68 / 804); /* the empty status-bar strip */
}
/* The wardrobe, from below its header (debug builds show a button there) to the bottom. */
.screen--wardrobe { aspect-ratio: 804 / 1512; }
.screen--wardrobe img { margin-top: calc(-100% * 236 / 804); }

/* ---------------------------------------------------------------- features */

.feature { padding-block: 40px; }
.feature-grid {
  display: grid;
  gap: 36px;
  align-items: center;
}
.feature-copy { max-width: 32rem; }
.feature h2 {
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.25rem);
  margin: 18px 0 14px;
}
.caption {
  margin: 0;
  font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  line-height: 1.45;
  color: var(--text-2);
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: var(--p) var(--p) calc(2 * var(--p));
  padding: 6px 14px 9px 10px;
  --p: 2px;
  --ip: 2px;
  font-weight: 800;
  font-size: 0.9375rem;
  color: var(--berry-text);
}
.feature-media { min-width: 0; }

@media (min-width: 800px) {
  .feature { padding-block: 48px; }
  .feature-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .phone { width: min(100%, 330px); }
  .feature--flip .feature-copy { order: 2; }
  .feature-copy { justify-self: start; }
  .feature--flip .feature-copy { justify-self: start; }
}

/* The small widget through the day. */
.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 3vw, 22px);
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.trio li { display: grid; gap: 10px; justify-items: center; }
.trio .when {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--text-2);
}

/* The Lock Screen, drawn: the icon's window on its dotted wall as the wallpaper (build.py
   draws it on the screen's own 34 x 71 grid), the clock, the widgets and a Live Activity. */
.lock {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  aspect-ratio: 804 / 1680;
  padding: 10% 7% 6%;
  color: #FFFFFF;
  background: #3E3046 url("img/lock-wallpaper.png") center / 100% 100% no-repeat;
  image-rendering: pixelated;
  text-align: center;
  container-type: inline-size;
}
.lock img { image-rendering: auto; }
.lock-date {
  font-size: 5.6cqw;
  font-weight: 700;
  opacity: 0.9;
  letter-spacing: 0.01em;
}
.lock-time {
  font-size: 27cqw;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: 1%;
}
.lock-widgets {
  display: grid;
  grid-template-columns: 29fr 58fr;
  gap: 5%;
  width: 100%;
  margin-top: 6%;
  align-items: center;
}
.lock-widgets img {
  display: block;
  width: 100%;
  height: auto;
}
/* The Lock Screen tints its widgets with the wallpaper (iOS's "vibrant" look). The renders
   sit on the screenshot tests' indigo-to-purple backdrop, so keep only their lightness and
   take the colour from the wall behind. */
.lock-widgets img { mix-blend-mode: luminosity; }
.lock-circle { border-radius: 50%; }
.lock-rect { border-radius: 14% / 27%; }
.lock .live { width: 100%; margin-top: auto; }

/* ---------------------------------------------------------------- kind by design
   A band of the room's dotted plum wall (build.py draws one 5 x 10 repeat of it), with the
   icon's windowsill along the bottom. */

.kind {
  position: relative;
  margin-top: 40px;
  padding-block: 64px 96px;
  background: #3E3046 url("img/wall.png") 0 0 / 20px 40px repeat;
  image-rendering: pixelated;
  color: #F4EDE3;
}
.kind::before, .kind::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
}
.kind::before { top: 0; height: 4px; background: #2E2A3A; }
.kind::after {
  bottom: 0;
  height: 28px;
  background: linear-gradient(#B47A50 0 8px, #9C6844 8px 20px, #5E3E2C 20px 28px);
}
.kind h2 {
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.25rem);
  margin: 0 0 10px;
}
.kind-intro {
  margin: 0 0 36px;
  font-size: 1.1875rem;
  color: #D4C9DE;
  max-width: 40ch;
}
.kind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 30px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kind-card {
  margin: var(--p) var(--p) calc(2 * var(--p));
  padding: 20px 22px 24px;
}
.kind-card h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  font-size: 1.25rem;
}
.kind-card { color: var(--text); }
.kind-card p { margin: 0; color: var(--text-2); }

/* ---------------------------------------------------------------- closing */

.closing { padding-block: 64px 24px; }
.closing-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: var(--p) var(--p) calc(2 * var(--p));
  padding: 36px 24px 40px;
  text-align: center;
}
.closing-card h2 { margin: 6px 0 0; font-size: clamp(1.9rem, 1.5rem + 2vw, 2.6rem); }
.closing-card p { margin: 0; max-width: 40ch; font-size: 1.125rem; }

/* ---------------------------------------------------------------- pages: support, privacy, 404 */

.page { padding-block: 24px 40px; }
.page-head { margin-bottom: 34px; }
.page-head h1 {
  font-size: clamp(2.5rem, 1.8rem + 3.2vw, 3.75rem);
  margin: 12px 0 12px;
}
.page-head .lede {
  margin: 0;
  font-size: 1.1875rem;
  color: var(--text-2);
  max-width: 44ch;
}
.page-note {
  margin: 30px 4px 0;
  color: var(--text-2);
  font-size: 0.9375rem;
}

.contact {
  display: grid;
  gap: 14px;
  justify-items: start;
  margin: var(--p) var(--p) 40px;
  padding: 22px 24px 26px;
}
.contact h2 { margin: 0; font-size: 1.5rem; }
.contact p { margin: 0; }
.contact .hint { color: var(--text-2); font-size: 0.9375rem; }

.faq-title { font-size: 1.75rem; margin: 0 0 20px; }
.faq {
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.faq details { margin: var(--p) var(--p) calc(2 * var(--p)); }
.faq summary {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 16px 18px 19px;
  cursor: pointer;
  list-style: none;
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
/* A small pixel chevron, 7 x 5 pixels cut from a block of colour, flipped when open:
     K.....K
     KK...KK
     .KK.KK.
     ..KKK..
     ...K...   */
.faq summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 10px;
  margin-left: auto;
  background: var(--text-2);
  clip-path: polygon(0 0, calc(100% * 1 / 7) 0, calc(100% * 1 / 7) 20%, calc(100% * 2 / 7) 20%, calc(100% * 2 / 7) 40%, calc(100% * 3 / 7) 40%, calc(100% * 3 / 7) 60%, calc(100% * 4 / 7) 60%, calc(100% * 4 / 7) 40%, calc(100% * 5 / 7) 40%, calc(100% * 5 / 7) 20%, calc(100% * 6 / 7) 20%, calc(100% * 6 / 7) 0, 100% 0, 100% 40%, calc(100% * 6 / 7) 40%, calc(100% * 6 / 7) 60%, calc(100% * 5 / 7) 60%, calc(100% * 5 / 7) 80%, calc(100% * 4 / 7) 80%, calc(100% * 4 / 7) 100%, calc(100% * 3 / 7) 100%, calc(100% * 3 / 7) 80%, calc(100% * 2 / 7) 80%, calc(100% * 2 / 7) 60%, calc(100% * 1 / 7) 60%, calc(100% * 1 / 7) 40%, 0 40%);
}
.faq summary:hover::after { background: var(--berry-text); }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq summary:focus-visible { outline-offset: 6px; }
.faq .answer { padding: 0 20px 20px 20px; }
.faq .answer > :first-child { margin-top: 0; }
.faq .answer > :last-child { margin-bottom: 0; }
.faq .answer ol, .faq .answer ul { padding-left: 1.3em; }
.faq .answer li { margin: 0.3em 0; }
.faq .answer li::marker { color: var(--berry-text); font-weight: 800; }
.faq .answer ul { list-style: square; }
.faq .answer h3 { font-size: 1rem; margin: 1.1em 0 0.3em; }

.prose {
  margin: var(--p) var(--p) calc(2 * var(--p));
  padding: clamp(20px, 4vw, 44px) clamp(18px, 4vw, 48px) clamp(24px, 4vw, 48px);
  overflow-wrap: break-word;
}
.prose h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 2.9rem); margin: 0 0 8px; }
.prose h1 + p { margin-top: 0; color: var(--text-2); }
.prose h2 { font-size: 1.4rem; margin: 2em 0 0.5em; }
.prose p, .prose li { max-width: 68ch; }
.prose ul { padding-left: 1.3em; list-style: square; }
.prose li { margin: 0.55em 0; }
.prose li::marker { color: var(--berry-f); }
.prose a { color: var(--berry-text); }

.lost { text-align: center; padding-block: 40px 20px; }
.lost h1 { font-size: clamp(2.4rem, 1.8rem + 3vw, 3.5rem); margin: 18px 0 12px; }
.lost p { margin: 0 auto 26px; max-width: 36ch; font-size: 1.1875rem; color: var(--text-2); }

/* ---------------------------------------------------------------- footer */

.site-footer {
  position: relative;
  margin-top: 40px;
  padding-block: 34px 44px;
  color: var(--text-2);
  font-size: 0.9375rem;
  background:
    linear-gradient(90deg, var(--line) 50%, transparent 0) 0 0 / 12px 3px repeat-x;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
}
.brand--small { font-size: 1.125rem; }
.brand--small .brand-icon { --size: 32px; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 800;
}
.footer-links a { color: var(--text); display: inline-block; padding-block: 8px; }
.footer-links a:hover { color: var(--berry-text); }
.footer-note { margin: 16px 0 18px; }
.legal { font-size: 0.8125rem; line-height: 1.5; max-width: 76ch; }
.legal p { margin: 0 0 6px; }
.legal a { display: inline-block; padding-block: 4px; }
.maker-mark {
  display: block;
  width: 81px;
  height: 21px;
  margin: 26px 0 0 auto;
  background: url("kit/wordmark.svg") center / 100% 100% no-repeat;
  image-rendering: pixelated;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}