/* patrikbreeck.com. Three looks, picked in the header (static/js/theme.js sets data-theme on <html>; dark is the
   default, also without JavaScript):
   light and dark are the Ares apps' look (Aresium's website, empire-ios Shared/Design): a light-grey or near-black
   wall, glass cards with a bright edge, Space Grotesk, ink accents, a faint red and blue light. "red" is red and gold:
   a deep wine-black wall lit crimson from the top, gold-edged glass and the name in polished gold (the Empire's gold
   text), kept quiet so it stays professional. Each app brings its own accent on the apps page (apps.css). */

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/SpaceGrotesk-Variable.ttf") format("truetype");
  font-weight: 300 700; font-style: normal; font-display: swap;
}

/* ---------- the looks ---------- */
:root {
  color-scheme: light;
  --sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-card: 18px; --r-row: 12px;
  --gutter: clamp(16px, 4vw, 40px);

  --bg: #ecedf2;
  --card: rgba(255,255,255,0.74); --card-2: rgba(247,248,251,0.94);
  --line: rgba(15,20,40,0.10); --edge: rgba(255,255,255,0.85);
  --ink: #0a0c12; --ink-2: #4a5160; --ink-3: #646c7b;
  --hover: rgba(15,20,40,0.05);
  --shadow: 0 24px 50px -24px rgba(15,22,40,0.26);
  --tab-shadow: 0 14px 28px -18px rgba(15,22,40,0.28);   /* the apps page's small cards */
  --glass-edge: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.4) 35%, rgba(15,20,40,0.07) 74%, rgba(255,255,255,0.3));
  --spec: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,0.6), transparent 46%);
  --glow1: radial-gradient(72% 52% at 50% -12%, rgba(196,58,44,0.11), transparent 60%);
  --glow2: radial-gradient(58% 50% at 92% 118%, rgba(52,96,170,0.10), transparent 56%);
  --building: #2a62e0; --available: #12784a;
  /* The line drifting behind the page (static/js/flow.js): its colours from tail to head, and how strong it is. */
  --flow-a: #3a62d8; --flow-b: #8a4fd0; --flow-c: #d6403a; --flow-alpha: 0.36;
  --eyebrow: var(--ink-3); --icon: var(--ink); --icon-bg: rgba(15,20,40,0.05); --ring: #f3f4f7; --focus: var(--ink);
  --shot-shadow: rgba(15,22,40,0.22);
  --accent: var(--ink);
}
:root[data-theme="dark"], :root:not([data-theme]) {
  color-scheme: dark;
  --bg: #050507;
  --card: rgba(15,16,21,0.55); --card-2: rgba(22,24,30,0.94);
  --line: rgba(255,255,255,0.08); --edge: rgba(255,255,255,0.10);
  --ink: #f6f7fb; --ink-2: #b3b9c6; --ink-3: #848b99;
  --hover: rgba(255,255,255,0.06);
  --shadow: 0 30px 70px -26px rgba(0,0,0,0.92);
  --tab-shadow: 0 16px 34px -20px rgba(0,0,0,0.85);
  --glass-edge: linear-gradient(135deg, rgba(255,255,255,0.24), rgba(255,255,255,0.04) 30%, rgba(120,150,210,0.07) 68%, rgba(255,255,255,0.03));
  --spec: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,0.07), transparent 46%);
  --glow1: radial-gradient(72% 52% at 50% -12%, rgba(196,48,36,0.24), transparent 60%);
  --glow2: radial-gradient(58% 50% at 92% 118%, rgba(52,92,170,0.22), transparent 56%);
  --building: #6aa8ff; --available: #6fcf9b;
  --flow-a: #7c5cff; --flow-b: #d9465a; --flow-c: #e9c86b; --flow-alpha: 0.55;
  --icon-bg: rgba(255,255,255,0.06); --ring: #121318;
  --shot-shadow: rgba(0,0,0,0.6);
}
:root[data-theme="red"] {
  color-scheme: dark;
  --bg: #16040a;
  --card: rgba(42,8,15,0.50); --card-2: rgba(30,6,11,0.96);
  --line: rgba(233,200,107,0.16); --edge: rgba(255,225,200,0.10);
  --ink: #fbf3ea; --ink-2: rgba(250,232,222,0.82); --ink-3: rgba(236,206,192,0.64);
  --hover: rgba(233,200,107,0.08);
  --shadow: 0 34px 80px -30px rgba(8,0,2,0.9);
  --tab-shadow: 0 18px 36px -22px rgba(8,0,2,0.9);
  --glass-edge: linear-gradient(135deg, rgba(244,221,146,0.55), rgba(233,200,107,0.10) 32%, rgba(190,40,52,0.14) 68%, rgba(244,221,146,0.26));
  --spec: radial-gradient(130% 90% at 0% 0%, rgba(255,230,200,0.07), transparent 46%);
  --glow1: radial-gradient(85% 62% at 50% -16%, rgba(196,24,46,0.55), rgba(120,10,28,0.20) 48%, transparent 72%),
           linear-gradient(180deg, rgba(58,8,20,0.55), transparent 55%);
  --glow2: radial-gradient(55% 45% at 96% 112%, rgba(214,164,64,0.16), transparent 60%);
  --gold: #e9c86b;
  --gold-text: linear-gradient(180deg, #fff7da 0%, #f4dd92 28%, #e4c264 52%, #bd9239 78%, #8c6620 100%);
  --building: #e9c86b; --available: #fff1d6;
  --flow-a: #8c6620; --flow-b: #e4c264; --flow-c: #fff7da; --flow-alpha: 0.50;
  --eyebrow: #d8b462; --icon: #e9c86b; --icon-bg: rgba(233,200,107,0.10); --ring: #2a0a11; --focus: #e9c86b;
  --shot-shadow: rgba(8,0,2,0.7);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  font-family: var(--sans); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; }
body::before { background: var(--glow1); }
body::after { background: var(--glow2); }
body > :is(header, main, footer) { position: relative; z-index: 1; }   /* not the menu dialog: it must stay fixed */
.flow { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; }
p { margin: 0; }

/* The name in polished gold, with one shine across it when the red look starts. */
:root[data-theme="red"] :is(.intro h1, .page-head h1, .prose h1) {
  background: linear-gradient(100deg, transparent 38%, rgba(255,250,235,0.85) 50%, transparent 62%) no-repeat, var(--gold-text);
  background-size: 260% 100%, 100% 100%;
  background-position: 160% 0, 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 2.2s .3s cubic-bezier(.3,.6,.3,1) both;
}
@keyframes shine { from { background-position: 160% 0, 0 0; } to { background-position: -60% 0, 0 0; } }

/* ---------- glass ---------- */
.card {
  position: relative; border: 1px solid transparent; border-radius: var(--r-card);
  background: linear-gradient(var(--card), var(--card)) padding-box, var(--glass-edge) border-box;
  -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
  box-shadow: var(--shadow), inset 0 1px 0 var(--edge);
}
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: var(--spec); }
.card > * { position: relative; }

.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eyebrow); }

/* ---------- top and bottom ---------- */
.top, .foot { display: flex; align-items: center; gap: 18px; padding: 18px var(--gutter); }
.top { padding-top: max(18px, env(safe-area-inset-top)); }
.top .brand { font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; }
.top-end { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.looks { display: flex; gap: 6px; padding: 5px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); }
.look {
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(127,127,127,0.45); transition: box-shadow .15s;
}
.look-light { background: #f4f5f8; }
.look-dark { background: #0b0c10; }
.look-red { background: linear-gradient(135deg, #b8162f 0 50%, #e4c264 50% 100%); }
.look[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--focus); }
.top .lang {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-decoration: none; color: var(--ink-2);
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card);
}
.top .lang:hover { color: var(--ink); background: var(--hover); }
.foot { margin-top: auto; font-size: 13px; color: var(--ink-3); flex-wrap: wrap; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover, .linkish:hover { color: var(--ink); }
.linkish { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 20px; border-radius: 999px;
  font: 600 15px/1 var(--sans); text-decoration: none; color: var(--ink); white-space: nowrap; cursor: pointer;
  border: 1px solid var(--line); background: var(--card);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background-color .15s, transform .15s, opacity .15s;
}
.btn:hover { background: var(--hover); }
.btn:active { transform: translateY(1px); }
.btn.accent { background: var(--accent); color: #fff; border-color: transparent; }
.btn.accent:hover { opacity: .88; }
:root:not([data-theme="light"]) .btn.accent { color: #141617; }
.icon { width: 18px; height: 18px; flex: none; }

/* ---------- home: name and intro, the three links, what's being built ---------- */
.home { flex: 1; display: flex; padding: clamp(4px, 2vh, 20px) var(--gutter) 96px; }   /* 96px: a clear strip at the window's bottom on the first screen */
.home-inner {
  flex: 1; width: 100%; max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-rows: 1fr auto; gap: clamp(28px, 6vh, 64px);
}
.first { display: grid; grid-template-rows: auto 1fr; gap: clamp(28px, 6vh, 64px); }
.lead-short { display: none; }
.intro { max-width: 700px; margin-top: clamp(4px, 3vh, 36px); }
.intro h1 { font-size: clamp(44px, 6.2vw, 76px); line-height: 1; letter-spacing: -0.045em; }
.lead { margin-top: 20px; max-width: 54ch; font-size: clamp(17px, 1.6vw, 19.5px); line-height: 1.55; color: var(--ink-2); }

.tiles { align-self: center; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 172px; padding: 22px;
  text-decoration: none; color: var(--ink); transition: transform .2s cubic-bezier(.22,.7,.25,1);
}
.tile:hover { transform: translateY(-3px); }
.tile > .icon { position: absolute; top: 22px; right: 22px; width: 20px; height: 20px; color: var(--ink-3); transition: color .15s, transform .2s; }
.tile:hover > .icon { color: var(--ink); transform: translate(2px, -2px); }
.tile-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--icon-bg); color: var(--icon); }
.tile-icon .icon { width: 23px; height: 23px; }
.tile-icon:has(.stack) { width: auto; background: none; justify-content: start; }
.stack { display: flex; }
.stack img { width: 38px; height: 38px; border-radius: 10px; box-shadow: 0 0 0 2px var(--ring), 0 6px 14px -8px rgba(0,0,0,.6); }
.stack img + img { margin-left: -11px; }
.tile-text { display: flex; flex-direction: column; gap: 4px; }
.tile-title { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.tile-sub { font-size: 14px; color: var(--ink-3); }

.current { padding-top: 18px; border-top: 1px solid var(--line); }
.current .eyebrow { margin-bottom: 14px; }
.projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.projects p { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.projects .project-name { margin-bottom: 4px; }
.project-name strong { font-size: 15px; font-weight: 600; color: var(--ink); margin-right: 8px; }
.status {
  display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); vertical-align: 1px; white-space: nowrap;
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.building { color: var(--building); }
.status.available { color: var(--available); }

/* ---------- apps ---------- */
.apps, .legal { width: 100%; max-width: 1120px; margin: 0 auto; padding: 8px var(--gutter) 32px; }
.page-head { max-width: 680px; margin: 18px 0 34px; }
/* As wide as its words: in the red look its gold is a background, and a full-width box would take the room above the
   lead, where the apps page's companions start. */
.page-head h1 { width: fit-content; font-size: clamp(38px, 5.4vw, 60px); line-height: 1.02; letter-spacing: -0.04em; }
/* Below the lead, room for the companions starting on the app cards (site.json companions.pages.apps: the snail,
   68 px tall, and the hamster). */
.apps .page-head { max-width: none; margin-bottom: 72px; }
.page-head .lead { max-width: none; font-size: 18px; }
/* The apps' description, two sentences, on one line wherever it fits (Patrik, 2026-10-26). */
@media (min-width: 1080px) { .apps .page-head .lead { white-space: nowrap; } }

/* A row of small cards, one per app, and below it the chosen app's details in one glass frame (build.py page_apps,
   static/js/apps.js; Patrik, 2026-11-01). With scripts (html.js, set by theme.js) the details are stacked in one
   place and only the chosen app's show: the frame keeps the tallest one's height, so nothing below it moves when the
   choice changes. Without scripts the row is hidden and the frame holds every app's details, one below another. */
.app-tabs { display: none; }
.js .app-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 16px; }
.app-tab {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 13px 15px 14px; border-radius: 16px;
  font: inherit; text-align: left; color: var(--ink); cursor: pointer;
  box-shadow: var(--tab-shadow), inset 0 1px 0 var(--edge);
}
.app-tab:hover { background: linear-gradient(var(--hover), var(--hover)) padding-box, linear-gradient(var(--card), var(--card)) padding-box, var(--glass-edge) border-box; }
.app-tab-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.app-tab-head img { width: 34px; height: 34px; border-radius: 22.5%; flex: none; box-shadow: 0 0 0 1px var(--line); }
.app-tab-name { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--accent); }
.app-tab-tagline { font-size: 13px; line-height: 1.4; color: var(--ink-3); }
/* The chosen card: its edge and a faint wash in the app's accent, and a short accent bar pointing at the details.
   (Browsers without color-mix get the accent edge alone.) */
.app-tab.is-current { background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(var(--accent), var(--accent)) border-box; }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .app-tab.is-current {
    --wash: color-mix(in srgb, var(--accent) 8%, transparent);
    background: linear-gradient(var(--wash), var(--wash)) padding-box, linear-gradient(var(--card), var(--card)) padding-box,
      linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 22%, transparent) 55%,
      color-mix(in srgb, var(--accent) 70%, transparent)) border-box;
    box-shadow: 0 18px 36px -22px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 1px 0 var(--edge);
  }
}
.app-tab.is-current .app-tab-tagline { color: var(--ink-2); }
.app-tab::after {
  content: ""; position: absolute; left: 50%; bottom: -1px; width: 34px; height: 3px; margin-left: -17px;
  border-radius: 3px 3px 0 0; background: var(--accent); opacity: 0; transition: opacity .25s;
}
.app-tab.is-current::after { opacity: 1; }
.app-tab:focus-visible { outline-offset: -3px; border-radius: 16px; }

.js .app-stage { display: grid; }
.app-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(28px, 4vw, 56px);
  padding: clamp(22px, 2.4vw, 26px) clamp(24px, 4.6vw, 60px);
}
html:not(.js) .app-panel + .app-panel { border-top: 1px solid var(--line); }
/* Only the chosen app's details show; a new choice fades in and settles (instantly with reduced motion). */
.js .app-panel {
  grid-area: 1 / 1; align-content: center; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px);
}
.js .app-panel.is-current {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity .32s ease, transform .4s cubic-bezier(.22,.7,.25,1);
}
.app-panel:focus-visible { outline-offset: -4px; border-radius: var(--r-card); }
/* Beside the iPhones the text starts near their top, so its buttons are in view on a 720 px tall screen too. */
.app-body { max-width: 540px; align-self: start; padding-top: clamp(0px, 4vh, 44px); }
.app-head { display: flex; align-items: center; gap: 16px; }
.app-icon { width: 64px; height: 64px; border-radius: 22.5%; flex: none; box-shadow: 0 8px 22px -10px rgba(0,0,0,.5), 0 0 0 1px var(--line); }
.app-panel h2 { font-size: 30px; letter-spacing: -0.03em; color: var(--accent); }
.tagline { margin-top: 2px; font-size: 16px; color: var(--ink-2); }
.points { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.points li { position: relative; padding-left: 20px; font-size: 15px; color: var(--ink-2); }
.points li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
.app-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }
.apps-note { margin-top: 26px; font-size: 13px; color: var(--ink-3); max-width: 680px; }

/* Two iPhones per app (pictures from empire-ios/showcase, each already in a drawn iPhone): the look's front one
   and, behind it, another screen. build.py gives every picture a class per role: f-<look> or b-<look>. */
.shots { position: relative; width: 330px; height: 440px; flex: none; }
.shot { display: none; position: absolute; top: 0; left: 0; width: 228px; height: auto; filter: drop-shadow(0 22px 26px var(--shot-shadow)); }
:root[data-theme="light"] .shot.f-light, :root:not([data-theme]) .shot.f-dark,
:root[data-theme="dark"] .shot.f-dark, :root[data-theme="red"] .shot.f-red { display: block; z-index: 2; }
:root[data-theme="light"] .shot.b-light, :root:not([data-theme]) .shot.b-dark,
:root[data-theme="dark"] .shot.b-dark, :root[data-theme="red"] .shot.b-red { display: block; z-index: 1; left: 124px; top: 26px; width: 206px; opacity: .92; }

/* ---------- legal ---------- */
.legal { max-width: 820px; }
.prose { padding: clamp(24px, 4vw, 44px); color: var(--ink-2); }
.prose h1 { font-size: clamp(30px, 4vw, 40px); letter-spacing: -0.03em; color: var(--ink); margin-bottom: 10px; }
.prose h2 { font-size: 18px; color: var(--ink); margin: 30px 0 10px; letter-spacing: -0.01em; }
.prose p, .prose ul, .prose address { margin: 0 0 12px; font-size: 15.5px; line-height: 1.65; }
.prose address { font-style: normal; color: var(--ink); }
.prose .meta { font-size: 13px; color: var(--ink-3); margin-bottom: 22px; }
.prose ul { padding-left: 22px; }
.prose a { word-break: break-word; }

/* ---------- the companions ---------- */
/* The companions themselves are the embed's own layer over the page (vendor/companions/web). The "Customize us!"
   bubble is the site's: fixed, placed by static/js/companions.js over a companion's head, above the page. */
.companion-say {
  position: fixed; left: 0; top: 0; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); transition: opacity .18s, transform .18s; transform-origin: 50% 100%;
}
.companion-say[hidden] { display: block; opacity: 0; transform: scale(.85); pointer-events: none; }
.companion-say canvas { image-rendering: pixelated; }
.companion-say:focus-visible { outline-offset: 4px; }

dialog.cm {
  position: fixed; width: min(430px, 100vw); max-width: 100vw; height: 100%; max-height: 100%; margin: 0 0 0 auto; padding: 0;
  border: 0; border-left: 1px solid var(--line); color: var(--ink); background: var(--card-2);
  -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
  box-shadow: -30px 0 70px -30px rgba(0,0,0,.5); overflow: hidden;
}
dialog.cm[open] { display: flex; flex-direction: column; animation: cm-in .22s cubic-bezier(.22,.7,.25,1); }
dialog.cm::backdrop { background: rgba(5,5,7,.12); }
@keyframes cm-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.cm-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 6px; }
.cm-head h2 { font-size: 22px; letter-spacing: -0.02em; }
.cm-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 16px; cursor: pointer; }
.cm-x:hover { background: var(--hover); }
.cm-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 22px max(22px, env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.cm-intro { font-size: 14px; color: var(--ink-2); }
.cm-section { margin-top: 22px; }
.cm-section h3 { margin-bottom: 10px; }
.cm-here { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-chip, .cm-opt {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 6px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); font: 500 14px/1 var(--sans); cursor: pointer;
}
.cm-opt { padding: 0 12px; }
.cm-chip:hover, .cm-opt:hover { background: var(--hover); }
.cm-chip[aria-pressed="true"], .cm-opt[aria-pressed="true"] { border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
.cm-chip canvas { width: 26px; height: 26px; image-rendering: pixelated; }
.cm-empty { font-size: 14px; color: var(--ink-3); }
.cm-row { margin-top: 14px; }
.cm-row > span { display: block; margin-bottom: 8px; font-size: 13px; color: var(--ink-3); }
.cm-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-swatch {
  width: 30px; height: 30px; padding: 0; border-radius: 50%; cursor: pointer; border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(127,127,127,.35); background-clip: padding-box;
}
.cm-swatch[aria-pressed="true"] { border-color: var(--focus); }
.cm-hint { margin-top: 8px; font-size: 13px; color: var(--ink-3); }
.cm-remove { margin-top: 16px; }
.cm-group { margin-top: 16px; }
.cm-group h4 { margin: 0 0 8px; font-size: 13px; font-weight: 500; color: var(--ink-3); }
.cm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.cm-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 7px;
  border-radius: var(--r-row); border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: 500 12px/1.2 var(--sans); cursor: pointer; text-align: center;
}
.cm-tile:hover { background: var(--hover); }
.cm-tile canvas { width: 52px; height: 52px; image-rendering: pixelated; }
.cm-tile[aria-pressed="true"] { border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
.cm-tile[aria-pressed="true"]::after { content: ""; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: #34c77b; }
.cm-foot { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.cm-foot button { margin-top: 12px; }
.cm-fan { margin-top: 10px; }
.cm-foot .cm-link { margin-top: 0; }
.cm-link, .cm-credits a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.cm-link:hover, .cm-credits a:hover { color: var(--ink); }
/* The credits view: the companions' own credits, small and quiet, in place of the menu until Back. */
.cm-back { margin: 8px 0 6px; }
.cm-credits-text p, .cm-credits-text li { font-size: 13px; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; }
.cm-credits-text p { margin-top: 12px; }
.cm-credits-text .eyebrow { margin-top: 20px; }
.cm-credits-text ul { margin: 10px 0 0; padding-left: 18px; }
.cm-credits-text li + li { margin-top: 6px; }
.cm-credits-text strong { color: var(--ink); font-weight: 600; }
.cm-credits-text .cm-hint { color: var(--ink-3); font-style: italic; }

/* ---------- smaller screens ---------- */
/* The row scrolls sideways where the cards don't all fit, from edge to edge of the window, a card at a time; the
   next card peeks in. The details put the iPhones above the text. */
@media (max-width: 960px) {
  .apps .page-head { margin-bottom: 40px; }   /* nobody stands on a row that scrolls: no room needed above it */
  .js .app-tabs {
    grid-auto-columns: 164px; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--gutter)) -6px; padding: 0 var(--gutter) 22px; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .js .app-tabs::-webkit-scrollbar { display: none; }
  .app-tab { scroll-snap-align: start; }
}
@media (max-width: 860px) {
  .app-panel { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 28px; }
  .app-panel .shots { order: -1; }
  .app-body { width: 100%; max-width: none; padding-top: 0; }
}
@media (max-width: 760px) {
  /* The phone's first screen is the business card: name, one short line, the three buttons near the thumb at the
     bottom; the projects only after scrolling. */
  .first {
    display: flex; flex-direction: column; gap: 0;
    min-height: calc(100svh - 74px - env(safe-area-inset-top) - 20px);
  }
  .intro { margin-top: clamp(16px, 9vh, 88px); }
  .intro h1 { font-size: clamp(44px, 13vw, 56px); }
  .lead-full { display: none; }
  .lead-short { display: block; margin-top: 14px; font-size: 16px; letter-spacing: 0.01em; color: var(--ink-3); }
  .first .tiles { margin-top: auto; padding: 36px 0 8px; }
  .home { padding-bottom: 104px; }
  .tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tile { flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; min-height: 76px; padding: 16px 18px; }
  .tile > .icon { position: static; margin-left: auto; }
  .tile-icon { width: 44px; height: 44px; flex: none; }
  .stack img { width: 30px; height: 30px; border-radius: 8px; }
  .stack img + img { margin-left: -12px; }
  .tile-title { font-size: 18px; }
  .tile-sub { font-size: 13.5px; }
  .projects { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 600px) {
  .apps .page-head { margin-bottom: 30px; }
  .looks { gap: 5px; padding: 4px 5px; }
  .look { width: 18px; height: 18px; }
  .shots { width: 290px; height: 387px; }
  .shot { width: 200px; }
  :root[data-theme="light"] .shot.b-light, :root:not([data-theme]) .shot.b-dark,
  :root[data-theme="dark"] .shot.b-dark, :root[data-theme="red"] .shot.b-red { left: 108px; top: 24px; width: 182px; }
  .app-panel h2 { font-size: 27px; }
  /* A bottom sheet, pinned with top: auto; bottom: 0 (an auto top margin left it at the top in Chrome). */
  dialog.cm {
    width: 100vw; height: auto; max-height: 64svh; margin: 0; inset: auto 0 0 0; border-left: 0; border-top: 1px solid var(--line);
    border-radius: 20px 20px 0 0; box-shadow: 0 -30px 70px -30px rgba(0,0,0,.5);
  }
  @keyframes cm-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}