/* The artist app's own styles, on top of the core's tokens (/design/tokens.css,
   served from the core, never copied). Every colour below reads the core's
   variable first and falls back to the same value the core publishes, so the
   page looks right before the core serves the file and follows it after.
   The home is the sleeve: deep blue ground, the title set huge, a white sheet
   with the work printed on it. Every other page is white: bold black
   headlines, deep blue as the house colour, red only for what needs the person
   now, square corners. Phone first: 16px gutter, 44px targets, 56px primary
   button. The ban list holds: no emoji, pills, gradients, left-border cards,
   cream, italics, numbered labels, monospace labels, and never colour as the
   only difference between two states.
   This file is shared by every screen. A rule only one journey uses goes in
   that journey's own stylesheet, public/journeys/<journey>.css, which the
   page shell loads after this one. */

:root {
  --a-ink: var(--ink, #111111);
  --a-muted: var(--muted, #666677);
  --a-line: var(--line, #E6E9EC);
  --a-blue: var(--blue, #0F2B46);
  --a-red: var(--red, #B3301B);
  --a-ok: var(--ok, #1D6B3A);
  --a-ground: #FFFFFF;
  --a-field: #F4F6F8;
  --a-on-blue: #FFFFFF;
  --a-on-blue-2: var(--on-blue-2, #B9C7D6);
  --a-line-blue: var(--line-blue, #2B4663);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.2, 0.9, 0.3, 1.3);
  --gutter: 16px;
  --menu-h: 64px;
  --top-h: 48px;
  --col: 560px;
  --cover: 280px;
}

* { box-sizing: border-box; }
/* The ground paints before anything returns: blue for the home, white for every other page (body.white, set from the hash at once). */
html { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; background: var(--a-blue); }
body {
  margin: 0;
  font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 26px;
  color: var(--a-on-blue);
  background: var(--a-blue);
  font-variant-numeric: tabular-nums;
  padding-bottom: calc(var(--menu-h) + env(safe-area-inset-bottom));
  min-height: 100vh;
}
body.white { color: var(--a-ink); background: var(--a-ground); }
h1, h2, h3 { margin: 0; letter-spacing: -0.03em; }
h1 { font-size: clamp(36px, 10vw, 56px); line-height: 0.98; font-weight: 800; }
h2 { font-size: 24px; line-height: 1.1; font-weight: 800; }
h3 { font-size: 17px; line-height: 24px; font-weight: 700; }
p { margin: 0; }
a { color: var(--a-blue); }
button { font: inherit; color: inherit; }
.wrap { max-width: var(--col); margin: 0 auto; padding: 24px var(--gutter) 40px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--a-ink); color: #fff; padding: 12px 16px; z-index: 10; }
.skip:focus { left: 8px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kicker { font-size: 13px; line-height: 20px; font-weight: 600; color: var(--a-muted); }
.lede { font-size: 17px; line-height: 26px; color: var(--a-ink); margin-top: 16px; }
.muted { color: var(--a-muted); }
.small { font-size: 15px; line-height: 22px; }
.notice { margin-top: 16px; padding: 12px 16px; background: var(--a-field); border: 2px solid var(--a-red); color: var(--a-ink); font-size: 15px; line-height: 22px; }
.notice::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--a-red); margin-right: 10px; vertical-align: 1px; }
body:not(.white) > .wrap > .notice + .quiet { color: var(--a-on-blue); }

/* The one primary action: 56px, full width, square */
.big {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 56px; padding: 0 20px;
  background: var(--a-blue); color: #fff; border: 2px solid var(--a-blue); border-radius: 0;
  font-size: 17px; font-weight: 700; text-decoration: none; cursor: pointer; text-align: center;
  transition: transform 0.12s var(--ease-out);
}
.big:active { transform: scale(0.98); }
.big.red { background: var(--a-red); border-color: var(--a-red); }
.big[disabled] { opacity: 0.45; cursor: default; }
.quiet {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  background: transparent; border: 0; color: var(--a-blue); font-size: 15px; font-weight: 600; text-decoration: underline; cursor: pointer; text-align: left;
}
.quiet[disabled] { opacity: 0.45; cursor: default; }
:focus-visible { outline: 3px solid var(--a-ink); outline-offset: 2px; }
/* On the blue the ring is white. The menu is named apart: on a phone it is a white bar, from 760px it sits on the blue top bar (below). */
body:not(.white) .top .act:focus-visible, body:not(.white) .top .who :focus-visible, .home > .sleeve :focus-visible, .proj :focus-visible, .home > .add:focus-visible, body:not(.white) > .wrap > .quiet:focus-visible { outline-color: var(--a-on-blue); }

/* Fields: a label above, a box with a line around it */
label { display: block; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--a-muted); margin: 24px 0 6px; }
input[type=email], input[type=text], textarea {
  width: 100%; min-height: 56px; padding: 12px 16px; font: inherit; color: var(--a-ink);
  background: var(--a-ground); border: 2px solid var(--a-ink); border-radius: 0;
}

/* The top row: the act left (a choice with two or more), the menu between (in the bar from 760px, along the bottom on a phone), Help and the person right.
   White on the blue home, ink on a white page. A long act name gives way first and ends in an ellipsis; its title attribute has the whole of it. */
.top {
  height: var(--top-h); display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--gutter); max-width: var(--col); margin: 0 auto;
  font-size: 15px; line-height: 20px; color: var(--a-on-blue);
}
body.white .top { color: var(--a-ink); }
.top .act { display: block; min-width: 0; min-height: 44px; line-height: 44px; font-weight: 800; letter-spacing: -0.01em; color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .act-pick { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.top select.act { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0 20px 0 0; font: inherit; font-weight: 800; letter-spacing: -0.01em; color: inherit; cursor: pointer; max-width: 60vw; }
.top .act-pick::after { content: ""; position: absolute; right: 4px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none; }
.top .who { display: flex; gap: 16px; flex: none; }
.top .who a { display: inline-flex; align-items: center; min-height: 44px; color: var(--a-on-blue-2); font-weight: 600; text-decoration: none; }
body.white .top .who a { color: var(--a-muted); }

/* The menu: Hjem and the parts, as many columns as the person has. A white bar along the bottom on a phone;
   the word and the square tell the active item apart: filled square and 700 weight. Five words fit at 320px, wrapping. */
.menu {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: grid; grid-template-columns: repeat(3, 1fr);
  height: calc(var(--menu-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--a-ground); border-top: 2px solid var(--a-ink);
}
.menu a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 44px; padding: 0 2px; color: var(--a-muted); text-decoration: none; font-size: 13px; line-height: 16px; font-weight: 600; text-align: center; overflow-wrap: anywhere;
}
.menu a .sq { width: 10px; height: 10px; border: 2px solid currentColor; background: transparent; flex: none; }
.menu a[aria-current=page] { color: var(--a-ink); font-weight: 700; }
.menu a[aria-current=page] .sq { background: currentColor; }

/* State shapes: a square whose fill tells the state, next to a word that says it.
   Not started: hollow. In progress: half filled. Waiting: hollow with a dot. Done: filled with a check. Yours: red, with the word for it. */
.g { position: relative; display: inline-block; width: 12px; height: 12px; border: 2px solid var(--a-ink); flex: none; }
.g.in_progress::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: var(--a-ink); }
.g.waiting::before { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; background: var(--a-ink); }
.g.done { background: var(--a-ink); }
.g.done::before { content: ""; position: absolute; left: 2px; top: -1px; width: 3px; height: 6px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.g.yours { border-color: var(--a-red); }
.g.yours::before { background: var(--a-red); }
.yw { color: var(--a-red); font-weight: 700; }
.status { display: flex; gap: 12px; align-items: baseline; font-size: 17px; line-height: 26px; }
.status .g { position: relative; top: 1px; }

/* The home: the sleeve on top, the sheet, the further sleeves, Andet, Tilføj en ny */
.home { display: block; }
.sleeve { display: grid; grid-template-columns: minmax(0, 1fr); padding: 12px 0 24px; }
.sleeve .art, .sleeve .by { display: none; }
.sleeve.has-cover { grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; align-items: end; }
.sleeve.has-cover .art { display: block; grid-column: 1; grid-row: 1 / span 2; width: 72px; height: 72px; background: var(--a-on-blue-2); overflow: hidden; }
.sleeve.has-cover .tt, .sleeve.has-cover .mm { grid-column: 2; }
/* Beside a cover the title has less room, so it steps down a size */
.sleeve.has-cover .tt { font-size: 40px; line-height: 0.95; letter-spacing: -0.03em; }
.sleeve.has-cover.size-m .tt, .sleeve.has-cover.size-s .tt { font-size: 30px; line-height: 1; letter-spacing: -0.025em; }
.sleeve .art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sleeve .tt { margin: 0; font-size: 56px; line-height: 0.92; font-weight: 800; letter-spacing: -0.035em; overflow-wrap: anywhere; hyphens: auto; }
.sleeve.size-m .tt { font-size: 40px; line-height: 0.95; letter-spacing: -0.03em; }
.sleeve.size-s .tt { font-size: 30px; line-height: 1; letter-spacing: -0.025em; }
.sleeve.first .tt { font-size: 44px; line-height: 0.96; letter-spacing: -0.03em; }
.sleeve .mm { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; margin-top: 12px; font-size: 15px; line-height: 21px; color: var(--a-on-blue-2); }
.sleeve .mm b { color: var(--a-on-blue); font-weight: 700; }
.sleeve .mm .edit { color: var(--a-on-blue); padding: 0; min-height: 32px; }

.sheet { position: relative; background: var(--a-ground); color: var(--a-ink); padding: 20px var(--gutter) 24px; margin: 0 calc(-1 * var(--gutter)); box-shadow: 0 18px 40px rgba(5, 15, 26, 0.35); }
.sheet .kick { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; font-weight: 700; color: var(--a-red); }
.sheet .kick::before { content: ""; width: 8px; height: 8px; background: var(--a-red); flex: none; }
.sheet .next.calm .kick { color: var(--a-muted); }
.sheet .next.calm .kick::before { background: transparent; border: 2px solid var(--a-muted); width: 6px; height: 6px; }
.sheet h2, .sheet .next h1 { margin-top: 10px; font-size: clamp(30px, 9vw, 40px); line-height: 0.98; font-weight: 800; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.sheet .edit-form h2 { font-size: 24px; }
.next .about { margin-top: 10px; font-size: 17px; line-height: 23px; font-weight: 600; }
.next .why { margin-top: 10px; }
.next .big { margin-top: 20px; }
.more { margin-top: 8px; }
.more .quiet { padding: 0; }
.more-list { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--a-line); }
.more-list li { padding: 10px 0; border-bottom: 1px solid var(--a-line); font-size: 15px; line-height: 21px; }
.more-list li a { display: inline-flex; align-items: center; min-height: 32px; color: var(--a-blue); font-weight: 600; }
.sheet h3, .proj h3 { margin-top: 28px; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--a-muted); letter-spacing: 0; }
.proj .small-h { font-size: 13px; line-height: 20px; font-weight: 600; color: var(--a-on-blue-2); letter-spacing: 0; }

/* The rows: a shape, the part's word, the line; a link where the part has a screen. */
.rows { margin-top: 12px; border-top: 2px solid var(--a-ink); }
.row { display: grid; grid-template-columns: 12px minmax(0, 1fr) 10px; gap: 2px 12px; align-items: baseline; padding: 14px 0; min-height: 56px; border-bottom: 1px solid var(--a-line); color: inherit; text-decoration: none; }
.row .g { position: relative; top: 1px; }
.row b.w { font-size: 17px; line-height: 24px; font-weight: 700; overflow-wrap: anywhere; }
.row .l { grid-column: 2; font-size: 15px; line-height: 21px; color: var(--a-muted); }
.row .l b { color: var(--a-ink); font-weight: 700; }
.row .l .yw { color: var(--a-red); }
.row .chev { grid-column: 3; grid-row: 1 / span 2; align-self: center; width: 8px; height: 8px; border: solid var(--a-muted); border-width: 2px 2px 0 0; transform: rotate(45deg); }
a.row:hover { background: var(--a-field); }
a.row:focus-visible { outline-offset: -3px; }

/* A further sleeve and its rows, and Andet, on the blue */
.proj { margin-top: 28px; }
.proj .sleeve { padding: 0; }
.proj .sleeve .tt { font-size: 40px; line-height: 0.95; letter-spacing: -0.03em; }
.proj .sleeve.size-s .tt { font-size: 30px; }
.proj .sleeve .mm { margin-top: 8px; }
.proj .rows { border-top-color: var(--a-on-blue); }
.proj .row { border-bottom-color: var(--a-line-blue); color: var(--a-on-blue); }
.proj .row .l { color: var(--a-on-blue-2); }
.proj .row .l b, .proj .row .l .yw { color: var(--a-on-blue); }
.proj .row .chev { border-color: var(--a-on-blue-2); }
.proj a.row:hover { background: var(--a-line-blue); }
.proj .g { border-color: var(--a-on-blue); }
.proj .g.in_progress::before, .proj .g.waiting::before, .proj .g.done { background: var(--a-on-blue); }
.proj .g.done::before { border-color: var(--a-blue); }
/* On the blue the shape of your turn is white like every other, since red fails there (2.31:1); the word "Din tur." carries it. */
.home > .add { margin-top: 24px; color: var(--a-on-blue); font-weight: 700; padding: 0; }

/* Adding what someone works on, and Ret */
.sheet .q { font-size: 22px; line-height: 28px; font-weight: 700; color: var(--a-ink); letter-spacing: -0.01em; margin-top: 0; }
.add-form label:first-child, .edit-form h2 + label { margin-top: 0; }
.edit-form h2 + label { margin-top: 16px; }
.hint { margin-top: 6px; }
.choices { display: grid; gap: 8px; margin-top: 8px; }
.choices button { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; background: var(--a-ground); border: 2px solid var(--a-ink); color: var(--a-ink); font-weight: 600; cursor: pointer; text-align: left; }
.choices button::before { content: ""; width: 16px; height: 16px; border: 2px solid var(--a-ink); flex: none; }
.choices button[aria-pressed=true] { background: var(--a-ink); color: #fff; font-weight: 700; }
.choices button[aria-pressed=true]::before { background: #fff; border-color: #fff; }
.sheet .big { margin-top: 20px; }
.sheet .what { margin-top: 18px; font-size: 15px; line-height: 22px; }
.sheet .what b { display: block; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--a-muted); }
.sheet form > .quiet { margin-top: 8px; padding: 0; }
.quiet-row { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 12px; }
.quiet-row .quiet { padding: 0; }
.sure { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--a-line); font-size: 15px; line-height: 22px; }
.sure .big { margin-top: 12px; }

/* The band of a part's overview (116px) and the thin row on one thing at a time (72px), for the parts on the shell.
   The blue runs the width of the window; the words keep to the column. */
.band { background: var(--a-blue); color: var(--a-on-blue); margin: -24px calc(-1 * var(--gutter)) 24px; padding: 0 var(--gutter) 14px; min-height: 116px; box-shadow: 0 0 0 100vmax var(--a-blue); clip-path: inset(0 -100vmax); }
.band .jt, .thing-row .row1 { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; font-weight: 700; }
.band a, .thing-row a { color: var(--a-on-blue); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; margin: 0 -6px; }
.band .bk i, .thing-row .bk i { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(45deg); }
.band h1 { font-size: 32px; line-height: 1; }
.band .pj { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--a-on-blue-2); }
.band .pj b { color: var(--a-on-blue); font-weight: 700; }
.band .pj-pick { position: relative; display: inline-flex; align-items: center; max-width: 100%; margin-top: 6px; }
.band .pj-pick::after { content: ""; position: absolute; right: 2px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border: solid var(--a-on-blue); border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none; }
.band select.pj { appearance: none; -webkit-appearance: none; max-width: calc(100% + 6px); margin: 0 0 0 -6px; background: transparent; border: 0; padding: 0 20px 0 6px; min-height: 44px; font: inherit; font-size: 15px; font-weight: 700; color: var(--a-on-blue); cursor: pointer; text-overflow: ellipsis; }
.band select.pj option { color: var(--a-ink); background: var(--a-ground); }
.thing-row { background: var(--a-blue); color: var(--a-on-blue); margin: -24px calc(-1 * var(--gutter)) 24px; padding: 0 var(--gutter); min-height: 72px; box-shadow: 0 0 0 100vmax var(--a-blue); clip-path: inset(0 -100vmax); }
/* The ring sits inside the links on the blue, so the clip at the band's top edge cannot cut it */
.band :focus-visible, .thing-row :focus-visible { outline-color: var(--a-on-blue); outline-offset: -3px; }
.thing-row .row1 span { display: inline-flex; gap: 16px; }
.thing-row .where { padding-bottom: 10px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--a-on-blue-2); }

/* A part: the overview under the band, and one thing at a time under the thin row with its heading on white */
.flow h1.onehead { margin: 0; font-size: 32px; line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; overflow-wrap: anywhere; hyphens: auto; }
.flow .body { margin-top: 16px; }
.flow .onehead + .content { margin-top: 16px; }
.flow .big { margin-top: 32px; }
.flow .what { margin-top: 24px; font-size: 15px; line-height: 22px; }
.flow .what b { display: block; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--a-muted); }
.flow .stop { margin-top: 24px; font-size: 15px; line-height: 22px; color: var(--a-muted); }
/* The completion moment: the button pressed fills with ink and a check springs into it, whatever kind of button it was and though it is held while the moment runs */
.big.big.moment { background: var(--a-ink); border-color: var(--a-ink); color: #fff; opacity: 1; transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out; }
.big.big.moment.checked::before { content: ""; flex: none; width: 6px; height: 12px; margin: -4px 12px 0 0; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); animation: check 0.3s var(--spring) both; }
@keyframes check { from { transform: rotate(45deg) scale(0); } 60% { transform: rotate(45deg) scale(1.2); } to { transform: rotate(45deg) scale(1); } }
/* The next thing on a part's overview, on white: the kicker, the headline, the name on its own line, the one button */
.part .next { padding: 4px 0 8px; }
.part .next .kick { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; font-weight: 700; color: var(--a-red); }
.part .next .kick::before { content: ""; width: 8px; height: 8px; background: var(--a-red); flex: none; }
.part .next.calm .kick { color: var(--a-muted); }
.part .next.calm .kick::before { background: transparent; border: 2px solid var(--a-muted); width: 6px; height: 6px; }
.part .next h2 { margin-top: 6px; font-size: 28px; line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.part .next .about { margin-top: 8px; font-size: 17px; line-height: 23px; font-weight: 600; overflow-wrap: anywhere; }
.part .next .why { margin-top: 8px; }
.part .next .big { margin-top: 20px; }
.part > h3 { margin-top: 32px; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--a-muted); letter-spacing: 0; }
.part > .rows { margin-top: 8px; }
.part > .quiet { display: flex; margin-top: 8px; padding: 0; }
.statement { font-size: clamp(28px, 7vw, 40px); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; }
.fact { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: 12px 0; border-top: 1px solid var(--a-line); }
.fact:last-child { border-bottom: 1px solid var(--a-line); }
.fact small { display: block; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--a-muted); }
.fact span { font-size: 17px; font-weight: 600; }

/* Help, You */
.qa { margin-top: 32px; }
.qa h2 { font-size: 20px; }
.qa p { margin-top: 8px; }
.pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.pick button { min-height: 48px; background: var(--a-ground); border: 2px solid var(--a-ink); color: var(--a-ink); font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.pick button[aria-pressed=true] { background: var(--a-ink); color: #fff; font-weight: 700; }
.pick button[aria-pressed=true]::before { content: ""; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -3px; }
.you .big { margin-top: 40px; }

/* The sign-in page the Worker renders */
body.login { padding-bottom: 0; color: var(--a-ink); background: var(--a-ground); }
.login-wrap { padding-top: 40px; }
.login-wrap h1 { margin-top: 16px; }
.login-form .big { margin-top: 24px; }
.login-wrap .small { margin-top: 32px; }

/* A short phone (a small iPhone in Safari): the title steps down and the reason waits behind the button, so the button stays on screen */
@media (max-height: 700px) and (max-width: 759px) {
  :root { --top-h: 40px; --menu-h: 56px; }
  .sleeve { padding: 2px 0 12px; }
  /* Every top title, the first screen's and the one beside a cover too (named, so their own rules do not win) */
  .sleeve .tt, .sleeve.size-m .tt, .sleeve.first .tt, .sleeve.has-cover .tt, .sleeve.has-cover.size-m .tt { font-size: 36px; line-height: 0.95; }
  .sleeve.size-s .tt, .sleeve.has-cover.size-s .tt { font-size: 26px; }
  .sleeve .mm { margin-top: 6px; font-size: 13px; line-height: 18px; }
  .sheet { padding: 14px var(--gutter) 20px; }
  .sheet .next h2, .sheet .next h1 { margin-top: 4px; font-size: 30px; }
  .next .about { margin-top: 6px; font-size: 15px; line-height: 20px; }
  .sheet .next .why { display: none; }
  .next .big { margin-top: 12px; }
}

/* Desktop: a solid top bar with the menu in it between the act and the person, so nothing scrolls under it; the cover beside the sheet.
   From 760 to 1100px the bar and the home keep a 24px edge and the menu's words sit closer, so five English words, a long act name and the person fit on an iPad held upright. */
@media (min-width: 760px) {
  :root { --top-h: 64px; }
  body { padding-bottom: 0; padding-top: var(--top-h); }
  .wrap { padding-top: 40px; padding-bottom: 104px; }
  body:not(.white) .wrap { max-width: 1100px; padding-left: 24px; padding-right: 24px; }
  .top { position: fixed; top: 0; left: 0; right: 0; z-index: 5; max-width: none; padding: 0 24px; background: var(--a-blue); border-bottom: 1px solid var(--a-line-blue); }
  body.white .top { background: var(--a-ground); border-bottom-color: var(--a-line); }
  .top > .act, .top > .act-pick { flex: 0 1 auto; min-width: 72px; }
  .menu {
    position: static; flex: none;
    display: flex; width: auto; height: var(--top-h); gap: 2px; padding-bottom: 0;
    border-top: 0; background: transparent;
  }
  .menu a { flex-direction: row; gap: 6px; padding: 0 6px; font-size: 15px; color: var(--a-on-blue-2); white-space: nowrap; }
  .menu a[aria-current=page] { color: var(--a-on-blue); }
  body.white .menu a { color: var(--a-muted); }
  body.white .menu a[aria-current=page] { color: var(--a-ink); }
  body:not(.white) .menu :focus-visible { outline-color: var(--a-on-blue); }
  .big { width: auto; }
  .sheet .big { width: auto; }
  /* In a part the button keeps its 280 px from the first desktop width; the home's narrow sheet takes it from 1100 px */
  .flow .big { min-width: 280px; }
  .flow > .band, .flow > .thing-row { margin-top: -40px; }

  .home { display: grid; grid-template-columns: var(--cover) minmax(0, 1fr); column-gap: 48px; align-items: start; }
  .home > .sleeve { grid-column: 1; grid-row: 1 / span 40; position: sticky; top: calc(var(--top-h) + 40px); padding: 0; grid-template-columns: var(--cover); align-items: stretch; }
  .home > .sleeve .art, .home > .sleeve .by { display: block; }
  .home > .sleeve .art { grid-column: 1; grid-row: 1; width: var(--cover); height: var(--cover); background: var(--a-ground); box-shadow: 0 30px 60px rgba(5, 15, 26, 0.45); }
  .home > .sleeve .by { grid-column: 1; grid-row: 1; align-self: start; padding: 24px; font-size: 15px; line-height: 21px; font-weight: 700; color: var(--a-ink); z-index: 1; }
  .home > .sleeve .tt { grid-column: 1; grid-row: 1; align-self: end; padding: 24px; font-size: 40px; line-height: 0.92; letter-spacing: -0.035em; z-index: 1; }
  /* Ink only on the white square; the first screen has no square, so its title stays white on the blue */
  .home > .sleeve .art ~ .tt { color: var(--a-ink); }
  .home > .sleeve.size-m .tt { font-size: 32px; }
  .home > .sleeve.size-s .tt { font-size: 26px; }
  .home > .sleeve.first .tt { font-size: 40px; }
  .home > .sleeve.has-cover .by { display: none; }
  .home > .sleeve.has-cover .tt { grid-row: 2; padding: 20px 0 0; color: var(--a-on-blue); font-size: 40px; }
  .home > .sleeve.has-cover.size-s .tt { font-size: 30px; }
  .home > .sleeve .mm { grid-column: 1; grid-row: 3; margin-top: 20px; font-size: 15px; line-height: 22px; }
  .home > .sheet, .home > .proj, .home > .add { grid-column: 2; }
  .sheet { margin: 0; padding: 40px 48px 48px; }
  .next .why { font-size: 20px; line-height: 30px; }
  .proj .sleeve { padding: 0; }
  .band, .thing-row { margin-left: 0; margin-right: 0; }
}
@media (min-width: 1100px) {
  :root { --cover: 440px; }
  body:not(.white) .wrap { padding-left: 40px; padding-right: 40px; }
  .top { padding: 0 40px; }
  .menu { gap: 4px; }
  .menu a { gap: 8px; padding: 0 12px; }
  .big { min-width: 280px; }
  .sheet .next h2, .sheet .next h1 { font-size: 56px; }
  .home { column-gap: 56px; }
  .home > .sleeve .art { height: 440px; }
  .home > .sleeve .by { padding: 32px; }
  .home > .sleeve .tt { padding: 32px; font-size: 64px; }
  .home > .sleeve.size-m .tt { font-size: 48px; }
  .home > .sleeve.size-s .tt { font-size: 36px; }
  .home > .sleeve.first .tt { font-size: 56px; }
  .home > .sleeve.has-cover .tt { font-size: 48px; }
}

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