/* ══════════════════════════════════════════════════════════════════════
   edit office — the desk.

   The private layer: account, campaign desk, ledger. Loaded only by those
   pages, on top of eo.css, and deliberately NOT part of it — eo.css is
   carried by twenty public pages and none of them should pay for this.

   ── The idea ──────────────────────────────────────────────────────────
   The public site is paper. This is the same paper, after hours, in a dark
   room. Not "a dark theme": ink AROUND paper.

   That single relationship is the whole system, and it is what replaced the
   terminal layer. Hierarchy here is not a border, a card or a panel. It is
   whether a thing is PAPER or whether it is the ROOM:

     · the ROOM holds navigation, labels, totals, empty space;
     · the PAPER holds records — the file, the note, the ledger.

   So there is almost nothing with a box around it. A sheet's edge is the
   place the colour changes, which is how an edge works on a desk. Where two
   objects relate, one overlaps the other: a note is placed ON the file, a
   tab rides ABOVE the sheet it names, the tray is cut INTO the surface.

   Nothing in here is skeuomorphic. There is no wood, no paperclip, no
   texture, no grain. Just material, light and stacking order.
   ══════════════════════════════════════════════════════════════════════ */

/* The tokens and the shell are available to any private surface; the reset
   and the body styling below are not. The operator tools (admin, review,
   lead desk) are dense, self-contained layouts with their own resets, so
   they take .dk-shell — the palette, the spacing scale and the internal
   masthead — and keep their own internals. Only the three editor-facing
   surfaces take the whole thing with `.dk`. */
.dk, .dk-shell {
  /* Room */
  --room:     #100C07;
  --room-in:  #0B0805;   /* cut into the surface — the tray */
  --room-up:  #181209;   /* raised off it — rare */
  --on-room:  #ECE6DA;
  /* The two supporting tiers are set by CONTRAST, not by eye. Measured on
     #100C07: the old dim tier at 0.38 came out at 3.08:1, which fails AA for
     normal text and was carrying every label, every inactive nav item and
     the word "Sign out". 0.55 measures 5.26:1; the secondary tier moves up
     with it to 0.78 (9.6:1) so the ramp keeps three distinguishable steps
     instead of collapsing into two. */
  --on-room-2: rgba(236, 230, 218, 0.78);
  --on-room-3: rgba(236, 230, 218, 0.55);
  --rule-room: rgba(236, 230, 218, 0.13);

  /* Paper */
  --paper:    #E9E3D6;
  --sheet:    #F1ECE1;
  --desk:     #DDD5C4;
  --on-paper: #17130C;
  /* Same measurement on the sheet: 0.42 was 2.67:1. 0.62 is 4.95:1. */
  --on-paper-2: rgba(23, 19, 12, 0.78);
  --on-paper-3: rgba(23, 19, 12, 0.62);
  --rule-paper: rgba(23, 19, 12, 0.15);

  /* Functional inks. Two, and only where something is actually true. */
  --ok:        #2F6A46;
  --ok-room:   #79C096;
  --bad:       #A6322A;
  --bad-room:  #E0776B;

  /* 4pt scale, named by relationship */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --lift: cubic-bezier(0.16, 1, 0.3, 1);
  --col: 1080px;
}

.dk {
  background: var(--room);
  color: var(--on-room);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.dk *, .dk *::before, .dk *::after { box-sizing: border-box; }
.dk h1, .dk h2, .dk h3, .dk p, .dk ul, .dk figure { margin: 0; }
/* `hidden` is only a UA `display:none`, so any display declaration of ours
   outranks it — which is how the account page ended up showing a broken
   portrait AND the initials that replace it, side by side, with the name
   pushed into the next grid row. State attributes have to win. */
.dk [hidden] { display: none !important; }
.dk a { color: inherit; text-decoration: none; }
.dk :focus-visible { outline: 2px solid var(--on-room); outline-offset: 3px; }

/* ── Type roles ────────────────────────────────────────────────────────
   Four faces, four jobs, and the mono one is the strict one. IBM Plex Mono
   appears here ONLY on data the system recorded: a file reference, a date,
   an amount, a follower count, a verification code. Not on headings, not on
   buttons, not on prose. Mono has to keep meaning "this was recorded" or it
   goes back to meaning "this website is technical", which is what the old
   terminal layer meant and why it had to go. */
.dk-rec {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
/* Every label on these pages — section names, field keys, the room name in
   the masthead — shares one role, and it is set in INTER, not mono.

   That is the correction that mattered most. The first pass had the labels
   in Plex too, and twenty-six elements on the account page came back
   monospaced: the field keys, the eyebrows, the note's heading. At that
   density mono stops meaning "this was recorded" and goes back to meaning
   "this website is technical", which is the tell the terminal layer was
   removed for. Uppercase and letterspaced does the labelling; mono is spent
   only on the values. */
.dk-of, .dk-key {
  font-family: var(--f-body); font-weight: 500;
  font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--on-room-3);
}
.sheet .dk-of, .sheet .dk-key { color: var(--on-paper-3); }

/* ── The internal masthead ─────────────────────────────────────────────
   Not the public header repeated over a dashboard. Two quiet rows: who and
   where on the first, the rooms on the second. It does not tuck, condense
   or animate — a working surface should not move its own navigation. */
.dk-top { position: sticky; top: 0; z-index: 20; background: var(--room); }
.dk-top::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--rule-room);
}
.dk-top__in { max-width: var(--col); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.dk-top__id {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); padding: var(--s5) 0 var(--s4);
}
/* The wordmark, the way out and a detach control are all small by design.
   Small to look at is fine; small to hit is not, so each gets a hit area
   grown around it rather than padding that would move it. */
.dk-mark { position: relative; display: inline-flex; align-items: center; color: var(--on-room); }
.dk-mark::before { content: ''; position: absolute; inset: -14px -10px; }
/* The wordmark is a mask sized in em off its own font-size, so setting only
   the height would stretch it. Both, from one number. */
.dk-mark .eo-wordmark { height: 17px; width: calc(17px * var(--wm-ratio)); }
.dk-where { text-align: right; }
.dk-where__room {
  font-family: var(--f-body); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--on-room-3); display: block;
}
.dk-where__who {
  font-size: 0.86rem; color: var(--on-room-2); margin-top: 3px;
  display: flex; align-items: baseline; gap: var(--s3); justify-content: flex-end;
}
.dk-out {
  position: relative;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--on-room-3);
  font-family: var(--f-body); font-size: 0.8rem; line-height: 1.4;
  border-bottom: 1px solid transparent; transition: color 0.16s, border-color 0.16s;
}
.dk-out::before { content: ''; position: absolute; inset: -14px -8px; }
.dk-out:hover { color: var(--on-room); border-bottom-color: var(--rule-room); }

.dk-rooms { display: flex; gap: clamp(20px, 3vw, 34px); padding-bottom: var(--s4); flex-wrap: wrap; }
.dk-rooms a {
  position: relative; padding-bottom: 7px; color: var(--on-room-3);
  font-size: 0.88rem; letter-spacing: 0.01em; transition: color 0.18s;
}
.dk-rooms a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform 0.36s var(--lift);
}
.dk-rooms a:hover, .dk-rooms a:focus-visible { color: var(--on-room); }
.dk-rooms a:hover::after, .dk-rooms a:focus-visible::after { transform: scaleX(1); }
/* The room you are standing in keeps its rule drawn — same grammar the
   public masthead uses for the page you are on. */
.dk-rooms a[aria-current='page'] { color: var(--on-room); }
.dk-rooms a[aria-current='page']::after { transform: scaleX(1); }
/* A comfortable target without moving the rule off the words. */
.dk-rooms a::before { content: ''; position: absolute; inset: -12px -6px -8px; }

@media (max-width: 560px) {
  .dk-top__id { padding-top: var(--s4); align-items: flex-start; }
  .dk-where__who { font-size: 0.8rem; }
  .dk-rooms { gap: var(--s4) var(--s5); }
  .dk-rooms a { font-size: 0.84rem; }
}

/* ── The room ──────────────────────────────────────────────────────────
   Generous, mostly empty, and it stays empty. Nothing gets added to fill it. */
.dk-room {
  max-width: var(--col); margin: 0 auto;
  padding: clamp(32px, 6vw, 64px) clamp(20px, 4vw, 40px) clamp(64px, 12vw, 140px);
}
.dk-head { margin-bottom: clamp(28px, 4.5vw, 48px); max-width: 52ch; }
.dk-title {
  font-family: var(--f-disp); font-weight: 800; letter-spacing: -0.022em;
  line-height: 1.04; font-size: clamp(1.7rem, 3.4vw, 2.4rem); color: var(--on-room);
}
.dk-say { color: var(--on-room-2); font-size: 1rem; line-height: 1.65; margin-top: var(--s3); }
.dk-sec { margin-top: clamp(40px, 7vw, 80px); }
.dk-sec > .dk-of { display: block; margin-bottom: var(--s4); }

/* ── Paper ─────────────────────────────────────────────────────────────
   A sheet is the only object on these pages with a fill of its own. The
   shadow is not elevation: it is the room's light failing at the sheet's
   edge, so it is almost entirely below and almost entirely invisible. A
   shadow you can see is too strong. */
.sheet {
  position: relative;
  /* A file is an object with a size, not a container that fills the room.
     Left aside, with the room still visible past its right edge — which is
     what makes it read as something lying on a surface. */
  max-width: 720px;
  background: var(--sheet);
  color: var(--on-paper);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 22px 44px -30px rgba(0, 0, 0, 0.95);
}
/* The ledger is the exception: five columns of record need the room's full
   width, and a ledger being wide is what a ledger looks like. */
.sheet--wide { max-width: 100%; }
.sheet__body { padding: clamp(22px, 3.4vw, 40px); }
.sheet__body + .sheet__body { border-top: 1px solid var(--rule-paper); }
/* The tab rides above the sheet's top edge and carries what the file is
   called. It is the one place a reference number belongs. */
.sheet__tab {
  display: inline-flex; align-items: baseline; gap: var(--s3);
  background: var(--desk); color: var(--on-paper-2);
  padding: 7px clamp(14px, 2vw, 20px) 6px;
  font-family: var(--f-body); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.15em;
  text-transform: uppercase;
}
.sheet__tab b { font-family: var(--f-mono); color: var(--on-paper); font-weight: 500;
  letter-spacing: 0.06em; text-transform: none; font-size: 0.72rem; }
.dk a.sheet-link { color: var(--on-paper); }

/* A note is a smaller sheet placed ON the file. It straddles the file's
   bottom-right corner: inset from the left so the file is still underneath
   it, and running PAST the file's right edge so one object visibly overlaps
   another. That corner is the only depth cue in the system and it does not
   need a shadow to be read.

   It is also where the room's emptiness earns its keep — the note reaches
   into it instead of the page ending in a straight line. */
.note {
  position: relative; z-index: 2;
  max-width: 620px;
  background: var(--paper); color: var(--on-paper);
  margin: -18px 0 0 clamp(20px, 14vw, 190px);
  padding: var(--s4) clamp(18px, 2.6vw, 26px) calc(var(--s4) + 2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45), 0 16px 30px -22px rgba(0, 0, 0, 0.9);
  display: flex; gap: var(--s3) var(--s5); align-items: baseline;
  justify-content: space-between; flex-wrap: wrap;
}
@media (max-width: 720px) {
  .note { margin-left: clamp(16px, 7vw, 36px); margin-top: -14px; }
}
.note__k {
  font-family: var(--f-body); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--on-paper-3); display: block; margin-bottom: 7px;
}
.note--act .note__k { color: var(--bad); }
.note__t { font-size: 0.98rem; line-height: 1.5; max-width: 46ch; }
.note__due { font-family: var(--f-mono); font-size: 0.72rem; color: var(--on-paper-2); margin-top: 6px; }

/* ── The tray ──────────────────────────────────────────────────────────
   Cut into the surface rather than raised off it: darker than the room, a
   single highlight along the top lip where the light catches, nothing along
   the bottom. It is the one place on the Campaign Desk that is allowed to
   be empty, and it is supposed to look that way. */
.tray {
  max-width: 760px;
  background: var(--room-in);
  /* The lip where the light catches along the top, and nothing along the
     bottom, because that edge is in shadow. Two lines, one recess. */
  box-shadow: inset 0 1px 0 rgba(236, 230, 218, 0.09), inset 0 -1px 0 rgba(0, 0, 0, 0.5);
  padding: clamp(30px, 5vw, 52px) clamp(22px, 4vw, 44px) clamp(44px, 8vw, 84px);
}
.tray__empty { max-width: 40ch; }
.tray__line { font-size: 1.06rem; line-height: 1.5; color: var(--on-room); }
.tray__sub { color: var(--on-room-3); font-size: 0.92rem; line-height: 1.6; margin-top: var(--s4); max-width: 46ch; }

/* ── Records ───────────────────────────────────────────────────────────
   A key in the margin and the thing it names beside it. No borders: the
   label column does the separating. */
.rec { display: grid; gap: var(--s5) clamp(18px, 3vw, 36px); }
.rec__row { display: grid; grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--s3) var(--s5); align-items: baseline; }
.rec__k { font-family: var(--f-body); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--on-paper-3); }
.rec__v { font-size: 0.95rem; color: var(--on-paper); }
@media (max-width: 620px) {
  .rec__row { grid-template-columns: 1fr; gap: 3px; }
}

/* A mark is a word plus a block of functional ink. Never the ink alone:
   colour is never the only carrier here. */
.mark {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; white-space: nowrap;
}
.mark::before { content: ''; width: 7px; height: 7px; flex: none; background: currentColor; }
.mark--none { color: var(--on-paper-3); }
.mark--none::before { background: none; box-shadow: inset 0 0 0 1px currentColor; }
.mark--ok  { color: var(--ok); }
.mark--bad { color: var(--bad); }
.dk-room > .mark--ok, .tray .mark--ok, .dk-sec .mark--ok { color: var(--ok-room); }
.dk-room > .mark--bad, .tray .mark--bad, .dk-sec .mark--bad { color: var(--bad-room); }
.dk-sec .mark--none, .tray .mark--none { color: var(--on-room-3); }

/* ── Money ─────────────────────────────────────────────────────────────
   One number allowed to be large, because it is the only one anybody looks
   for. Archivo, not mono: at this size mono reads as a countdown clock. */
.money { font-family: var(--f-disp); font-weight: 700; letter-spacing: -0.03em;
  line-height: 1; font-size: clamp(2.6rem, 6vw, 4rem); color: var(--on-room);
  font-variant-numeric: tabular-nums; }
.money__k { color: var(--on-room-3); font-size: 0.86rem; margin-top: var(--s3); }

/* The facts under it, in a row, recorded. */
.facts { display: grid; gap: var(--s3) clamp(20px, 4vw, 48px); margin-top: clamp(24px, 4vw, 36px); }
.facts__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4);
  align-items: baseline; padding-bottom: var(--s3); border-bottom: 1px solid var(--rule-room); }
.facts__k { font-family: var(--f-body); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--on-room-3); }
.facts__v { font-family: var(--f-mono); font-size: 0.86rem; color: var(--on-room);
  font-variant-numeric: tabular-nums; }

/* ── The ledger ────────────────────────────────────────────────────────
   Rows on paper with a real horizontal rhythm. The rule under the head is
   the only heavy line in the private system, because a ledger has one. */
.led { width: 100%; border-collapse: collapse; }
.led th {
  font-family: var(--f-body); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--on-paper-3); text-align: left;
  padding: 0 var(--s4) var(--s3) 0; white-space: nowrap;
}
.led thead tr { border-bottom: 2px solid var(--on-paper); }
.led td { padding: var(--s3) var(--s4) var(--s3) 0; font-size: 0.9rem; vertical-align: baseline;
  border-bottom: 1px solid var(--rule-paper); color: var(--on-paper); }
.led .num { text-align: right; padding-right: 0; font-family: var(--f-mono);
  font-variant-numeric: tabular-nums; }
.led__none { padding: clamp(28px, 5vw, 48px) 0 var(--s3); max-width: 44ch; }

/* ── Controls ──────────────────────────────────────────────────────────
   Four jobs, four shapes. They should not all look the same, which is what
   a row of identical outlined rectangles was doing. */
.dk .act {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-body); font-weight: 500; font-size: 0.88rem; line-height: 1;
  padding: 13px 20px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--on-room); color: var(--room);
  transition: background 0.16s, color 0.16s, transform 0.12s;
}
.dk .act:hover { background: #fff; }
.dk .act:active { transform: translateY(1px); }
.dk .act[disabled] { opacity: 0.45; cursor: default; }
.dk .act .ar { transition: transform 0.18s var(--lift); }
.dk .act:hover .ar { transform: translateX(3px); }
/* On paper the primary inverts: ink fill on the sheet. */
.sheet .act, .note .act { background: var(--on-paper); color: var(--sheet); }
.sheet .act:hover, .note .act:hover { background: #000; }

/* Quiet: a line of text with a rule under it. Reads as a way onward rather
   than a thing to press. */
.dk .act--quiet {
  position: relative;
  background: none; color: var(--on-room-2); padding: 6px 0;
  border-bottom: 1px solid var(--rule-room);
}
/* The rule under the words is the affordance, so the target is grown around
   it rather than by padding it away from them. */
.dk .act--quiet::before { content: ''; position: absolute; inset: -13px -6px; }
.dk .act--quiet:hover { background: none; color: var(--on-room); border-bottom-color: currentColor; }
.sheet .act--quiet, .note .act--quiet { background: none; color: var(--on-paper-2); border-bottom-color: var(--rule-paper); }
.sheet .act--quiet:hover, .note .act--quiet:hover { background: none; color: var(--on-paper); border-bottom-color: currentColor; }

/* Ghost: an outlined secondary, used once per surface at most. */
.dk .act--ghost { background: none; color: var(--on-room); box-shadow: inset 0 0 0 1px var(--rule-room); }
.dk .act--ghost:hover { background: rgba(236, 230, 218, 0.07); }
.sheet .act--ghost { background: none; color: var(--on-paper); box-shadow: inset 0 0 0 1px var(--rule-paper); }
.sheet .act--ghost:hover { background: rgba(23, 19, 12, 0.05); }

/* Destructive: never a filled red button. A word, in the ink that means
   something went or will go away. */
.dk .act--gone {
  position: relative;
  background: none; color: var(--on-paper-3); padding: 4px 0; font-size: 0.8rem;
  border-bottom: 1px solid transparent;
}
.dk .act--gone::before { content: ''; position: absolute; inset: -13px -8px; }
.dk .act--gone:hover { background: none; color: var(--bad); border-bottom-color: currentColor; }

.dk-acts { display: flex; gap: var(--s4) var(--s5); flex-wrap: wrap; align-items: center; }

/* ── Forms on paper ────────────────────────────────────────────────────
   The linking flow happens ON the file, which is why it is legible: dark
   text on a cream sheet, a real label above every field. */
.dk-field { display: block; }
.dk-field > span { display: block; font-family: var(--f-body); font-weight: 500;
  font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--on-paper-3); margin-bottom: 8px; }
.dk-input {
  width: 100%; max-width: 260px; background: #fff; color: var(--on-paper);
  border: 1px solid var(--rule-paper); border-radius: 0; padding: 11px 13px;
  font-family: var(--f-body); font-size: 0.95rem; outline: none;
  transition: border-color 0.16s;
}
.dk-input:focus { border-color: var(--on-paper); }
.dk-input::placeholder { color: var(--on-paper-3); }
.dk-code {
  font-family: var(--f-mono); font-size: 1.05rem; letter-spacing: 0.16em;
  background: var(--desk); color: var(--on-paper); padding: 10px 18px; display: inline-block;
}
.dk-err { color: var(--bad); font-size: 0.86rem; line-height: 1.5; margin-top: var(--s3); }

/* A step that opens inside the sheet. grid-template-rows so the sheet grows
   instead of the page jumping, and nothing is display:none while it moves. */
.dk-step { display: grid; grid-template-rows: 1fr; }
.dk-step > div { overflow: hidden; }
.dk-step.is-shut { grid-template-rows: 0fr; }
.dk-step.is-shut > div { visibility: hidden; }

/* ── Connected accounts ────────────────────────────────────────────────
   Attached records, not a list of chips. */
.acct { display: grid; gap: var(--s4); }
.acct__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3) var(--s5);
  align-items: start; padding-top: var(--s4); border-top: 1px solid var(--rule-paper); }
.acct__row:first-child { padding-top: 0; border-top: 0; }
.acct__at { font-family: var(--f-mono); font-size: 1rem; color: var(--on-paper); }
.acct__n { font-family: var(--f-mono); font-size: 0.78rem; color: var(--on-paper-2); margin-top: 4px;
  font-variant-numeric: tabular-nums; }
.acct__by { font-size: 0.8rem; color: var(--on-paper-3); margin-top: 8px; }
.acct__side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2); }
@media (max-width: 560px) {
  .acct__row { grid-template-columns: 1fr; }
  .acct__side { align-items: flex-start; }
}

/* ── Identity ──────────────────────────────────────────────────────────
   A square portrait, not a social-media circle. The file has a person in
   it; it is not a profile. */
.who { display: grid; grid-template-columns: 84px minmax(0, 1fr);
  gap: clamp(18px, 3vw, 28px); align-items: center; margin-bottom: clamp(24px, 3.4vw, 34px); }
.who__img { width: 84px; height: 84px; object-fit: cover; display: block; background: var(--desk); }
.who__ini { width: 84px; height: 84px; background: var(--desk); color: var(--on-paper-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-disp); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.01em; }
.who__name { font-family: var(--f-disp); font-weight: 800; letter-spacing: -0.024em;
  line-height: 1.02; font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
.who__role { color: var(--on-paper-2); font-size: 0.95rem; margin-top: 7px; }
.who__at { font-family: var(--f-mono); font-size: 0.82rem; color: var(--on-paper-2); }
/* Review provenance is an annotation on the record, not a paragraph in it.
   No rule above it: a hairline that stops at the annotation's own measure
   reads as a line that ran out rather than a divider, and it collided with
   the record row above. Space and the dimmest ink on the sheet separate it. */
.who__note { font-size: 0.82rem; color: var(--on-paper-3); line-height: 1.5;
  margin-top: var(--s6); max-width: 46ch; }
@media (max-width: 480px) {
  .who { grid-template-columns: 64px minmax(0, 1fr); gap: var(--s4); }
  .who__img, .who__ini { width: 64px; height: 64px; }
  .who__ini { font-size: 1.15rem; }
}

/* ── The foot ──────────────────────────────────────────────────────────
   Not a footer: no second navigation, no channels, no calls to action. The
   operator and the two legal documents, quietly, because a working surface
   still has to be able to reach them. The rework removed the old public
   footer from these pages and this is the part of it that had to stay. */
.dk-foot {
  max-width: var(--col); margin: 0 auto;
  padding: var(--s5) clamp(20px, 4vw, 40px) var(--s7);
  border-top: 1px solid var(--rule-room);
  display: flex; gap: var(--s3) var(--s5); flex-wrap: wrap;
  align-items: baseline; justify-content: space-between;
  font-size: 0.78rem; color: var(--on-room-3);
}
.dk-foot nav { display: flex; gap: var(--s5); flex-wrap: wrap; }
.dk-foot a { position: relative; border-bottom: 1px solid transparent; transition: color 0.16s, border-color 0.16s; }
.dk-foot a::before { content: ''; position: absolute; inset: -13px -8px; }
.dk-foot a:hover { color: var(--on-room); border-bottom-color: var(--rule-room); }

/* ── Waiting ───────────────────────────────────────────────────────────
   No spinner and no skeleton pretending to be content. One line, in the
   room, that says what is happening. */
.dk-wait { color: var(--on-room-3); font-size: 0.92rem; padding: clamp(40px, 8vw, 90px) 0; }

/* ── Motion ────────────────────────────────────────────────────────────
   Everything below this line is authored so that the page is COMPLETE
   without it. assets/desk.js animates from a visible resting state, never
   into one, so a script that never runs leaves a working surface rather
   than a blank room. Nothing here is a pre-hide. */
@media (prefers-reduced-motion: reduce) {
  .dk *, .dk *::before, .dk *::after {
    transition-duration: 0.01ms !important; animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}