/* ─────────────────────────────────────────────────────────────────────────
   The Artist Prompt Creator.

   Written to be reused unchanged by the three sibling pages (fashion,
   photographer, illustrator), so nothing here names an artist or a field
   that only the artist formula has.

   Colours come from the tokens in folio.css. The spec quoted slightly
   different hex values (#0a0a0a, #d4a843); the site's own tokens win, since
   "match the existing project pages" is the actual requirement.
   ───────────────────────────────────────────────────────────────────────── */

/* ---------- the two faces ----------------------------------------------- */

/* This page uses the site's own faces and no others.
   
   It briefly had EB Garamond and IBM Plex Mono, which made it the only page on
   dukeofai.org not set in the house face - and worse, only half of it did, so
   the same artist's name appeared in two different faces depending on which
   panel it landed in. Consistency across the site wins over one page having
   its own voice.
   
   The mono is kept for the prompt text alone, and it is the system mono rather
   than a webfont: a prompt is a string to be scanned for a phrase and copied
   whole, not prose, and a proportional face gives the eye nothing to count by.
   That is a function, not a style, which is why it survives. */
:root{
  --apc-serif:var(--display);
  --apc-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --red:#9e3328; --red-hi:#b8402f;
}

/* A spelled-out number above each heading. The four zones are a sequence -
   you cannot read the set before you have picked an artist - so numbering
   them says something true rather than decorating them. */
.apc-eyebrow{
  font-family:var(--apc-mono); font-size:10px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:10px;
}

/* ---------- zone 1 ----------------------------------------------------- */

.apc-intro{ max-width:62ch; }
.apc-subline{ color:var(--muted); }

.apc-lead{
  font-family:var(--display); font-weight:500;
  font-size:clamp(21px,2.4vw,26px); letter-spacing:-.01em;
  color:var(--paper); margin-bottom:clamp(18px,2.2vw,24px);
}

.apc-h2{
  font-family:var(--display); font-weight:500;
  font-size:clamp(19px,2.1vw,23px); letter-spacing:-.01em;
  color:var(--paper); margin-bottom:clamp(14px,1.8vw,20px);
}
.apc-h2:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

/* ---------- the top half ------------------------------------------------- */

/* An eyebrow with a rule beside it, for the two editorial bands. The four
   working sections keep their spelled-out numbers - those count the steps of
   using the tool, and "why it exists" is not a step. */
.apc-rule-eyebrow{
  display:flex; align-items:center; gap:14px;
  margin-bottom:clamp(18px,2.4vw,26px);
}
.apc-rule-eyebrow::before{ content:""; width:44px; height:1px; background:var(--gold); flex:none; }
.apc-rule-eyebrow span{
  font-family:var(--apc-mono); font-size:10px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
}

.apc-back{
  display:inline-block; margin-bottom:clamp(28px,4vw,46px);
  font-family:var(--apc-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); text-decoration:none;
  border:1px solid var(--gold-line); padding:11px 20px;
}
.apc-back:hover{ border-color:var(--gold); background:var(--gold-soft); }
.apc-back:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.apc-hero{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(26px,4vw,58px); align-items:center;
}
/* The name set as three lines and allowed to run large. It is the one place on
   the page with nothing to compete with, and at 17px it was reading as a
   caption on its own project page. */
.apc-hero-title{
  margin:0; font-family:var(--apc-serif); font-weight:600; color:var(--paper);
  font-size:clamp(42px,6.2vw,76px); line-height:.98; letter-spacing:-.022em;
}
.apc-hero-lede{
  margin:clamp(20px,2.8vw,32px) 0 0; font-family:var(--apc-serif);
  font-size:clamp(17px,1.6vw,19px); line-height:1.55;
  color:var(--secondary); max-width:34ch; text-wrap:pretty;
}
.apc-hero-pull{
  margin:clamp(18px,2.4vw,28px) 0 0; font-family:var(--apc-serif); font-style:italic;
  font-size:clamp(18px,1.8vw,21px); color:var(--gold);
}
.apc-hero-cta{ margin-top:clamp(22px,3vw,34px); }
.apc-hero-figure{ margin:0; }
.apc-hero-figure img{ display:block; width:100%; height:auto; }

.apc-why{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.7fr);
  gap:clamp(28px,5vw,68px); align-items:start;
}
.apc-why-text p{
  margin:0 0 1.1em; font-family:var(--apc-serif);
  font-size:17px; line-height:1.66; color:var(--secondary);
}
.apc-why-text p:first-child{ font-size:19px; line-height:1.55; color:var(--paper); }
.apc-why-text p:last-child{ margin-bottom:0; }

.apc-stats{ display:flex; flex-direction:column; }
.apc-stat{ padding:20px 0; border-top:1px solid var(--hairline); }
.apc-stat:first-child{ border-top:0; padding-top:0; }
/* The three numbers are derived from the code, not asserted: the count menu
   offers 6, 12 and 24, the artist formula has twelve pools, and platforms.js
   names three platforms. The design said fifteen parts; the code says twelve. */
.apc-stat b{
  display:block; font-family:var(--apc-serif); font-weight:400;
  font-size:clamp(27px,3.2vw,37px); line-height:1; color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.apc-stat span{
  display:block; margin-top:9px; font-family:var(--apc-mono); font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}

.apc-notes-cards{
  display:grid; gap:clamp(14px,1.8vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.apc-note-card{
  border:1px solid var(--hairline); background:var(--canvas);
  padding:clamp(18px,2.2vw,26px);
}
.apc-note-card h3{
  margin:0 0 12px; display:flex; align-items:baseline; gap:11px;
  font-family:var(--apc-serif); font-weight:600; font-size:19px; color:var(--paper);
}
.apc-note-card h3 i{
  font-family:var(--apc-mono); font-style:normal; font-size:11px;
  letter-spacing:.14em; color:var(--gold);
}
.apc-note-card p{ margin:0; font-family:var(--apc-serif); font-size:16px; line-height:1.6; }
.apc-note-card code{ font-family:var(--apc-mono); font-size:13px; color:var(--gold); }
.apc-note-card a{ color:var(--gold); }

@media (max-width:860px){
  .apc-hero{ grid-template-columns:1fr; }
  .apc-hero-figure{ order:-1; max-width:300px; }
  .apc-why{ grid-template-columns:1fr; }
}

/* Materials as chips in the on-file panel. */
.apc-onfile-mats{ display:flex; flex-wrap:wrap; gap:7px; }
/* No border. A 1px hairline round a word is what says "button" on this page -
   the artist quick-picks two hundred pixels above are exactly that, and they
   are clickable. These are facts, so they are filled rather than outlined and
   nobody is invited to press them. */
.apc-onfile-mat{
  font-family:var(--apc-mono); font-size:10.5px; letter-spacing:.06em;
  color:var(--secondary); background:var(--gold-soft); border:0;
  border-radius:3px; padding:6px 10px;
}

/* The artist field carries the whole page: it is the one control everything
   else waits on, so it is filled rather than outlined. Dark type on gold,
   which is the same pairing as the primary button - deliberate, and the
   reason the Generate button had to leave gold to stay findable. */
.apc-field input#apc-artist{
  background:var(--gold); border-color:var(--gold);
  color:var(--canvas); font-family:var(--apc-serif); font-size:19px;
  padding-top:13px; padding-bottom:13px;
}
.apc-field input#apc-artist::placeholder{ color:rgba(10,10,11,.55); }
.apc-field input#apc-artist:hover{ border-color:var(--gold-hi); background:var(--gold-hi); }
.apc-field input#apc-artist:focus-visible{
  outline:2px solid var(--gold-hi); outline-offset:2px; border-color:var(--gold-hi);
}

/* The longest option was clipping in the closed select. */
.apc-field select#apc-ratio{ font-size:15px; }

/* The platform chips. Same shape as the artist quick-picks, with a selected
   state the quick-picks do not need - one of the three is always the answer,
   so it has to be visible without clicking anything. */
.apc-field-label{
  display:block; font-size:11px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--muted); margin-bottom:8px;
}
.apc-platform-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.apc-platform-chip[aria-pressed="true"]{
  color:var(--gold); border-color:var(--gold); background:var(--gold-soft);
}

/* ---------- panels ----------------------------------------------------- */

.apc-panel{
  background:var(--surface);
  /* Gold rather than grey, on all four panels that carry this class - the
     form, the profile, the hand-off and the noscript notice. A grey hairline
     on a dark ground reads as an edge that happens to be there; the gold one
     reads as a frame somebody drew. */
  border:1px solid var(--gold-line);
  border-radius:12px;
  padding:clamp(20px,2.8vw,30px);
}
/* on the grey bands the panel would vanish, so it recesses instead */
.section.alt .apc-panel{ background:var(--canvas); }

/* ---------- zone 2, the form ------------------------------------------- */

.apc-form{
  display:grid; gap:clamp(16px,2vw,22px);
  grid-template-columns:1fr;
}
/* Platform and Artist are the two required controls and they lead, each on
   its own row. The four optional refinements pair off below. Putting
   Platform in a half-width cell left a hole beside it. */
@media (min-width:768px){
  .apc-form{ grid-template-columns:1fr 1fr; }
  .apc-field-platform, .apc-field-artist, .apc-actions{ grid-column:1 / -1; }
  .apc-field-platform select{ max-width:340px; }
}

.apc-field{ display:flex; flex-direction:column; gap:7px; min-width:0; }

/* ---------- what the library holds --------------------------------------- */

/* Answers "will this artist give me anything?" while the name is still being
   typed, rather than after twelve prompts have been generated. Sits directly
   under the Artist field and spans the grid, so it reads in the order the
   question is asked: name the artist, see what is held, then refine. */
.apc-onfile{
  grid-column:1 / -1;
  background:var(--surface);
  border:1px solid var(--hairline); border-left:2px solid var(--gold-line);
  border-radius:10px;
  padding:clamp(14px,1.8vw,18px) clamp(16px,2vw,22px);
}
.apc-onfile[hidden]{ display:none; }

/* AND THE SAME RULE FOR EVERY OTHER ELEMENT THIS PAGE HIDES BY PROPERTY.
   `[hidden]{display:none}` is a USER-AGENT rule, so any class rule setting
   `display` outranks it and the element stays on screen with its hidden
   attribute set - the code is correct, the CSS wins, and a probe that reads
   `.hidden` sees `true`.

   That shipped on 29 Sep 2026: the rule-32 panel said "which is why there is
   no request button here" and rendered one underneath it, primary-styled,
   130x44, href="#". The code set `hidden`. `.apc-actions` sets `display:flex`.
   I checked the property and not the geometry, so my own verification agreed
   with the bug. Found by the Cowork session reading the live DOM.

   This is a general rule rather than a fifth per-class line on purpose. Two
   classes were already guarded above, which means somebody met this before and
   fixed the instances in front of them; a sweep then found four more unguarded
   - .apc-note, .apc-portrait, .apc-actions and .apc-sift. The per-class idiom
   is what let the gap persist, so the guard is now on the attribute. css/family.css
   carries the same finding for .fam-item and reached the same conclusion one
   file over. */
[hidden]{ display:none !important; }

/* With a picture on file the panel becomes two columns: the facts read down
   the left, the face sits top-right at thumbnail size. Only the four fact
   rows sit beside it - the tier line runs the full width underneath, as it
   did before. The column only exists when there is a picture for it, so the
   200 artists without one are laid out exactly as they were. */
.apc-onfile[data-has-portrait]{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(124px,18%,178px);
  column-gap:clamp(16px,2.2vw,26px);
  align-items:start;
  align-content:start;      /* the picture must not push the rows apart */
}
/* :not() is doing real work here - a bare `> *` is (0,2,0) and outranks
   .apc-onfile-portrait at (0,1,0), which put the picture back in column one
   where it stretched to 78% of the panel. */
.apc-onfile[data-has-portrait] > *:not(.apc-onfile-portrait){ grid-column:1; }
/* An explicit span, not `1 / -2`. Negative line numbers resolve against the
   explicit grid, and this grid declares no rows at all - every row here is
   implicit - so `-2` did not mean "up to the last row", it opened rows that
   were not there and drove the label and the name apart. Four is the count of
   things the picture sits beside: label, name, dates line, facts. */
.apc-onfile-portrait{
  grid-column:2; grid-row:1 / span 4; align-self:start;
  display:block; width:100%; aspect-ratio:1/1; object-fit:cover;
  border:1px solid var(--gold); border-radius:6px;
}
.apc-onfile-portrait[hidden]{ display:none; }
.apc-onfile[data-has-portrait] .apc-onfile-tier{ grid-column:1 / -1; }

@media (max-width:520px){
  .apc-onfile[data-has-portrait]{ grid-template-columns:minmax(0,1fr) 100px; }
}
/* This names the whole panel, and it was set identically to the row labels
   inside it - same size, same colour, same tracking - so nothing said which
   was the container and which the contents. It now takes the gold rule the
   page already uses for a section heading. */
.apc-onfile-label{
  display:flex; align-items:center; gap:11px;
  margin:0 0 12px; font-size:10px; font-weight:500; text-transform:uppercase;
  letter-spacing:.22em; color:var(--gold);
}
.apc-onfile-label::before{
  content:""; width:26px; height:1px; background:var(--gold); flex:none;
}
.apc-onfile-name{
  margin:0; font-family:var(--display); font-weight:500;
  font-size:clamp(17px,1.9vw,20px); letter-spacing:-.01em; color:var(--gold);
}
/* The same three facts the profile sets under the artist's name, and now the
   same treatment. It was 13px grey while the detail beneath it was 14px and
   brighter - the line telling you who this is was the quietest thing here. */
.apc-onfile-line{
  margin:7px 0 0; font-family:var(--apc-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
}
.apc-onfile-rows{
  display:grid; grid-template-columns:max-content minmax(0,1fr);
  column-gap:clamp(14px,2vw,26px); row-gap:7px;
  margin:14px 0 0;
}
.apc-onfile-rows dt{
  font-size:11px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--faint); padding-top:.15em; white-space:nowrap;
}
.apc-onfile-rows dd{
  margin:0; font-size:14px; color:var(--secondary);
  /* the palettes arrive newline-separated - one per line, as a list you can
     scan down rather than a paragraph of commas */
  white-space:pre-line;
}
/* The tier said before you commit, not after. A built record and a style-layer
   answer are different things, and knowing which you are about to get is the
   whole point of showing this early. */
.apc-onfile-tier{
  margin:14px 0 0; padding-top:12px;
  border-top:1px solid var(--hairline);
  font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted);
}
.apc-onfile[data-tier="record"] .apc-onfile-tier{ color:var(--gold-dim); }
@media (max-width:560px){
  .apc-onfile-rows{ grid-template-columns:1fr; row-gap:2px; }
  .apc-onfile-rows dt{ margin-top:11px; }
}

.apc-field label{
  font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.08em;
  color:var(--secondary);
}
.apc-opt{ text-transform:none; letter-spacing:0; color:var(--muted); font-weight:400; }

.apc-field input,
.apc-field select{
  width:100%;
  font-family:var(--text); font-size:16px;   /* 16px stops iOS zooming on focus */
  /* The value a person has chosen or typed, in the accent. 7.9:1 on the
     input's own background, so it reads as clearly as the ivory it replaces. */
  color:var(--gold);
  background-color:var(--surface);   /* not the shorthand - it would wipe the
                                        combobox caret's background-image */
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:11px 13px;
  transition:border-color .15s ease;
}
.section.alt .apc-panel input,
.section.alt .apc-panel select{ background-color:var(--surface); }
/* Placeholders take the same gold stepped back to 75%. Full gold would make
   an empty field look filled, which is the one thing a placeholder must not
   do. At 4.91:1 it still passes contrast; below about 70% it stops. */
.apc-field input::placeholder{ color:var(--gold-dim); }
.apc-field input:hover,
.apc-field select:hover{ border-color:var(--gold-line); }
.apc-field input:focus-visible,
.apc-field select:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-color:var(--gold); }

.apc-field select{
  appearance:none; cursor:pointer; padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold-dim) 50%),
                   linear-gradient(135deg,var(--gold-dim) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}

.apc-help{ font-size:13px; color:var(--muted); line-height:1.45; }
/* The note under the house-era select describes the chapter you just chose,
   rather than telling you what the control does, so it is set apart from the
   help text above it. */
.apc-period-note{ font-style:italic; color:var(--gold); opacity:.85; }
.apc-error{ font-size:13px; color:var(--gold-hi); }

/* ---------- autocomplete ------------------------------------------------ */

.apc-combo{ position:relative; }

/* A caret, so the field reads as something you can open rather than only type
   into. Same chevron the selects use. */
.apc-combo input{
  padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold-dim) 50%),
                   linear-gradient(135deg,var(--gold-dim) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  cursor:pointer;
}
.apc-combo input:focus{ cursor:text; }

.apc-suggest{
  position:absolute; z-index:20; left:0; right:0; top:calc(100% + 4px);
  list-style:none; margin:0; padding:4px;
  background:var(--surface);
  border:1px solid var(--gold-line);
  border-radius:8px;
  box-shadow:0 12px 28px rgba(0,0,0,.55);
  /* Tall enough to browse, short enough not to run off a phone - and short
     enough to clear the Generate button beneath it. At 340px the list ran two
     rows past the top of the button and sat over it; seven rows is still
     plenty to browse by. The floor matters: in a context where vh resolves to
     zero the list would otherwise collapse to nothing rather than merely
     being cramped. */
  max-height:max(150px,min(264px,40vh)); overflow-y:auto;
}
.apc-suggest li{
  padding:9px 11px; border-radius:6px; cursor:pointer;
  font-size:15px; color:var(--secondary);
}
.apc-suggest li .apc-sug-meta{ color:var(--muted); font-size:13px; margin-left:.5em; }
.apc-suggest li[aria-selected="true"],
.apc-suggest li:hover{ background:var(--gold-soft); color:var(--paper); }

/* ---------- quick-pick chips -------------------------------------------- */

.apc-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.apc-chips:empty{ display:none; }

.apc-chip{
  font-family:var(--text); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--secondary); background:transparent;
  border:1px solid var(--hairline); border-radius:999px;
  padding:6px 13px; cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.apc-chip:hover{ border-color:var(--gold); color:var(--gold); background:var(--gold-soft); }
.apc-chip:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* ---------- buttons ------------------------------------------------------ */

/* A clear break before the one button that acts. The grid gap alone read as
   just another field. */
.apc-actions{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  /* Two blank lines' worth on top of the grid gap - about 102px all told
     against the 22px between the fields themselves. The button is the one
     control that acts, and at the same spacing as everything else it read as
     just another field in the stack. The second line is clearance: the open
     artist list hangs over this row, and one line was not enough to keep it
     off the top of the button. */
  margin-top:clamp(52px,6.4vw,80px);
}

.apc-btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--text); font-size:15px; font-weight:400; line-height:1;
  color:var(--gold); background:transparent;
  border:1px solid var(--gold-line); border-radius:999px;
  padding:11px 22px; cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.apc-btn:hover{ background:var(--gold); border-color:var(--gold); color:var(--canvas); }
.apc-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
/* Solid gold, near-black type - the one action on the page that does the
   thing. Matches .pill-fill on the homepage rather than inventing a second
   filled-button treatment. 8.3:1, the same ratio as gold type on the canvas,
   read the other way round. */
.apc-btn-primary{
  background:var(--gold); border-color:var(--gold); color:var(--canvas);
  font-size:16px; padding:13px 28px;
}

/* Placed after .apc-btn deliberately. Both are single classes, so at equal
   specificity the later rule wins - defined earlier in the file this lost its
   background to .apc-btn's transparent and the button came out unstyled. */
/* The one saturated colour on the site, and the only place it appears. The
   button is what the whole page is for, and gold on gold gave it nothing to
   stand out from once the hero call to action was gold too. */
.apc-btn-generate{
  background:var(--red); border-color:var(--red); color:#f7f0e4;
  font-size:16px; padding:13px 28px;
}
.apc-btn-generate:hover{ background:var(--red-hi); border-color:var(--red-hi); color:#f7f0e4; }
.apc-btn-generate:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* Reset was underlined text standing beside a solid button - the one control
   that throws your set-up away, styled as the weakest thing on the page. It
   takes the outline pill, so it reads as an action and still defers. */
.apc-btn-quiet{
  color:var(--muted); border-color:var(--hairline);
  font-size:15px; padding:13px 24px;
}
.apc-btn-quiet:hover{ color:var(--paper); border-color:var(--gold-line); background:transparent; }

.apc-btn-primary:hover{ background:var(--gold-hi); border-color:var(--gold-hi); color:var(--canvas); }

.apc-btn[disabled]{ opacity:.55; cursor:default; }
/* An outline button must not fill on hover while disabled; a filled one must
   not empty. Same intent, opposite correction. */
.apc-btn[disabled]:not(.apc-btn-primary):hover{
  background:transparent; color:var(--gold); border-color:var(--gold-line);
}
.apc-btn-primary[disabled]:hover{
  background:var(--gold); border-color:var(--gold); color:var(--canvas);
}

.apc-btn-text{
  font-family:var(--text); font-size:15px;
  color:var(--muted); background:none; border:0; padding:4px 2px; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}
.apc-btn-text:hover{ color:var(--paper); }
.apc-btn-text:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* ---------- zone 3, the profile ------------------------------------------ */

.apc-focused{
  font-size:12px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--gold); margin-bottom:12px;
}
/* Hyphenated, and still ragged. At a 70ch measure the right edge swung about
   90px between the longest and shortest line, which reads as untidy rather
   than as a deliberate rag. Breaking long words at their syllables closes it
   to roughly 30px without justifying, so the word spacing stays even and no
   rivers open down the column. `lang="en"` on <html> is what makes this work;
   without it the browser has no dictionary and does nothing. */
/* 62 characters rather than 70, and 20px rather than 17. A five-paragraph
   life story is the one piece of sustained reading on the page and it was
   being set at the same size as the interface around it. */
.apc-profile .prose{
  max-width:62ch;
  -webkit-hyphens:auto; hyphens:auto;
}
/* The name and the line beneath it are <p> inside .prose too, so they have to
   be excluded by name. A plain `.prose p` here outranks `.apc-resolved` on
   specificity and silently flattened the artist's name to body size and took
   the gold off the line under it. */
.apc-profile .prose p:not(.apc-resolved):not(.apc-resolved-line){
  font-family:var(--apc-serif); font-weight:400;
  font-size:18px; line-height:1.68; color:var(--secondary);
}

/* ---- the portrait ------------------------------------------------------ */

/* Two columns only when there is a picture to put in the second one. With no
   portrait on disk the panel keeps its ordinary block flow and renders
   exactly as it did before any of this existed. */
/* The portrait reaches 440px only when the panel is at its full width, and
   backs off steeply below that. A flat percentage cannot do this: 44% of a
   full 1012px panel is the 440 we want, but 44% of the 754px panel at a
   1000px window would leave the prose at 40 characters. The slope is taken
   from two measured points - 196px at a 754px panel, which already reads
   well, and 440px at 1012px.

   Bigger is better here up to a point, which is not obvious. The panel is a
   fixed width, so every pixel the picture gains the prose gives up - but at
   263px the text was running at 73 characters a line, the long end of what
   is comfortable. At 440 it reads 55, nearer the optimum. The picture got
   half again as big and the prose got easier to read.

   440 was tried and was too much. It passed both the checks that were made -
   the prose stayed at 55 characters and the 900px source stayed sharp - but
   neither of those is the one that mattered. At 440 the picture takes 43% of
   the panel, so a bright photograph and a column of text carry almost equal
   weight and nothing leads. At 340 it is 34%, near enough a third, which is
   where a supporting element sits; and the prose reads 65 characters, within
   one of the optimum. The hierarchy and the measure both improve.

   The old ceiling still stands if it is ever wanted: 900px of source over a
   2x screen puts the hard limit at 440. */
.apc-profile[data-has-portrait]{
  display:grid; align-items:start;
  grid-template-columns:minmax(0,1fr) clamp(190px,calc(73% - 399px),340px);
  grid-template-areas:"text portrait" "facts portrait";
  column-gap:clamp(20px,3vw,38px);
}
.apc-profile[data-has-portrait] .prose{ grid-area:text; }
.apc-profile[data-has-portrait] .apc-facts{ grid-area:facts; }

.apc-portrait{
  grid-area:portrait; margin:0;
  align-self:stretch;      /* so the picture has room to travel */
}
/* Sticky on the image, not the figure: the figure is stretched to the height
   of both rows, so the picture follows the reader down a long profile instead
   of stranding at the top, and simply sits still on a short one. The same
   arrangement as .split-figure on the Diabetes Coach page. */
.apc-portrait img{
  position:sticky; top:calc(var(--nav-h) + 22px);
  display:block; width:100%; aspect-ratio:1/1; object-fit:cover;
  background:var(--surface);
  /* Gold, not the grey hairline. The two portraits on this page are the same
     picture and now carry the same frame - the profile one had --hairline and
     the On file one a gold line at 42%, so neither matched the other and
     neither read as deliberate. */
  border:1px solid var(--gold); border-radius:10px;
}
@media (max-width:820px){
  /* One column, picture first. A sticky image in a single column would ride
     over the prose it belongs to. */
  .apc-profile[data-has-portrait]{
    grid-template-columns:1fr;
    grid-template-areas:"portrait" "text" "facts";
    row-gap:clamp(18px,3vw,24px);
  }
  .apc-portrait{ max-width:min(280px,64%); }
  .apc-portrait img{ position:static; }
}

/* The artist the tool resolved to, above their profile. */
/* Both of these have to out-specify `.prose p` in projects.css, which is
   (0,1,1) and would otherwise win on specificity no matter what order the
   sheets load in. A bare `.apc-resolved` lost that fight silently. */
.apc-profile .prose p.apc-resolved{
  font-family:var(--apc-serif); font-weight:500;
  font-size:clamp(28px,3.4vw,42px); line-height:1.1; letter-spacing:-.015em;
  color:var(--paper); margin-bottom:0; text-wrap:balance;
}
/* Dates, nationality and movement on one line under the name - the three
   facts that place an artist before you read a word about them. */
.apc-profile .prose p.apc-resolved-line{
  font-family:var(--apc-mono); font-size:11.5px; font-weight:500;
  line-height:1.5; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin:14px 0 1.1em;
}

/* A catalogue entry, not a row of chips. Every fact used to be a gold pill,
   which gave a life's dates and a list of materials the same weight and said
   which was which about neither. A label and its value, read down. */
.apc-facts{
  display:grid; grid-template-columns:max-content minmax(0,1fr);
  column-gap:clamp(18px,2.4vw,32px); row-gap:9px;
  margin:clamp(18px,2.2vw,24px) 0 0;
  padding-top:clamp(18px,2.2vw,24px);
  border-top:1px solid var(--hairline);
}
.apc-facts dt{
  font-size:11px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--muted); padding-top:.18em; white-space:nowrap;
}
.apc-facts dd{ margin:0; font-size:15px; color:var(--secondary); }
@media (max-width:560px){
  /* the label above its value, rather than a column of nowrap labels
     squeezing the values into two words a line */
  .apc-facts{ grid-template-columns:1fr; row-gap:2px; }
  .apc-facts dt{ margin-top:12px; }
}

.apc-note{
  display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap;
  margin-top:clamp(16px,2vw,22px);
  background:var(--gold-soft); border:1px solid var(--gold-line);
  border-radius:8px; padding:clamp(16px,2vw,22px);
}
.apc-note p{ flex:1 1 30ch; color:var(--paper); font-size:15px; line-height:1.6; }

/* ---------- zone 4, toolbar ---------------------------------------------- */

.apc-toolbar{
  position:sticky; top:var(--nav-h); z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  background:var(--canvas);
  border:1px solid var(--hairline); border-radius:12px;
  padding:14px clamp(14px,1.8vw,20px);
  margin-bottom:clamp(20px,2.6vw,28px);
}
.apc-count{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
}
/* the tier signal — gold where the artist has a hand-authored record */
.apc-count[data-tier="record"]{ color:var(--gold); }

/* How many prompts you got, marked the same way as the number on each card -
   gold ground, near-black type, the same pill. It keeps this line's uppercase
   and tracking rather than the card number's monospace, so it reads as part of
   the toolbar and not as something pasted in from elsewhere. Its own colour
   beats the tier rule above, which tints only the text beside it. */
.apc-count-badge{
  color:var(--canvas); background:var(--gold);
  border-radius:999px; padding:5px 10px 5px 12px;
  font-weight:600; line-height:1; white-space:nowrap;
}
.apc-toolbar-btns{ display:flex; gap:9px; flex-wrap:wrap; }
.apc-toolbar-btns .apc-btn{ font-size:13px; padding:8px 16px; }

.apc-quiet{
  font-size:14px; color:var(--muted); line-height:1.6;
  margin:-8px 0 clamp(18px,2.2vw,24px);
}

/* the flash that says the content changed, since generation is instant and a
   spinner on an instant operation reads as theatre */
@keyframes apc-flash{ 0%{ border-color:var(--gold); } 100%{ border-color:var(--hairline); } }
.apc-flash{ animation:apc-flash .9s ease-out; }

/* ---------- sifting the set by material ----------------------------------- */

/* Twelve plates is a lot to hold at once, and the real question is "show me
   the ones on raw canvas". Set below the toolbar rather than inside it: the
   toolbar acts on the whole set, this changes what you are looking at. */
.apc-sift{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  margin:0 0 clamp(16px,2vw,22px);
}
.apc-sift-chips{ display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
.apc-sift-chip{
  display:inline-flex; align-items:center; gap:8px; max-width:100%;
  font-family:var(--text); font-size:11px;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); background:transparent;
  border:1px solid var(--hairline); border-radius:999px;
  padding:6px 12px; cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.apc-sift-chip:hover{ border-color:var(--gold-line); color:var(--gold); }
.apc-sift-chip:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
/* aria-pressed carries the state, so the styling follows it rather than a
   class that could disagree with what a screen reader is told */
.apc-sift-chip[aria-pressed="true"]{
  color:var(--gold); border-color:var(--gold); background:var(--gold-soft);
}
.apc-sift-n{ color:var(--faint); font-variant-numeric:tabular-nums; }
.apc-sift-chip[aria-pressed="true"] .apc-sift-n{ color:var(--gold-dim); }
.apc-sift-count{
  margin:0; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--faint); white-space:nowrap;
}

/* ---------- zone 4, the cards -------------------------------------------- */

/* Every plate the same height, whatever its prompt runs to.
   
   grid-auto-rows:1fr makes each row take the height of the tallest card in
   the set rather than of its own contents, so all twelve match - not just the
   pairs sitting side by side. The li is the grid item, so it has to stretch
   too, and the card has to fill it.
   
   Done here rather than by padding the prompts. The prompt is the product -
   it gets pasted into Midjourney - and adding filler words to square up a
   column would change the picture it makes. */
.apc-cards{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(14px,1.8vw,20px);
  grid-template-columns:1fr;
}
.apc-cards > li{ display:flex; }
.apc-card{ width:100%; }
/* Equal heights only where there are two columns to line up. In one column
   there is nothing beside a card to align to, and squaring them up costs
   1,056px of empty scrolling across the twelve on a phone - about a screen
   and a half of nothing. */
@media (min-width:1024px){
  .apc-cards{ grid-template-columns:1fr 1fr; grid-auto-rows:1fr; }
}

.apc-card{
  display:flex; flex-direction:column;
  background:var(--canvas);
  border:1px solid var(--hairline); border-radius:0;
  padding:clamp(18px,2.2vw,24px);
  transition:transform .15s ease, border-color .15s ease;
}
.apc-card:hover{ transform:translateY(-2px); border-color:var(--gold-line); }

.apc-card-head{
  display:flex; align-items:center; gap:12px;
  padding-bottom:12px; margin-bottom:14px;
  border-bottom:1px solid var(--hairline);
}
/* Solid gold, near-black type - the same treatment as .apc-btn-primary, so
   the prompt number reads as a marker you can find at a glance rather than a
   quiet label. Not a button: it does nothing, it only counts. */
/* The material, named at the head of the plate. It sits between the number
   and the copy button and takes the space that is left, because the authored
   material texts run to a dozen words. */
.apc-plate-material{
  flex:1 1 auto; min-width:0;
  font-family:var(--apc-mono);
  font-size:10px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--muted); line-height:1.4;
}

.apc-num{
  display:inline-block;
  font-family:var(--apc-mono);
  font-size:12px; font-weight:600; line-height:1; letter-spacing:.14em;
  color:var(--canvas); background:var(--gold);
  border-radius:999px; padding:6px 11px 6px 13px;
}
.apc-copy{ font-size:12px; padding:6px 15px; }
.apc-copy[data-state="done"]{ background:var(--gold); border-color:var(--gold); color:var(--canvas); }

/* The prompt itself in mono. It is not prose - it is a string to be scanned
   for a phrase and copied whole - and at 180 words a proportional face gives
   the eye nothing to count by. Sized down to 13px because a mono at 15 runs
   about a fifth wider and would push the two-column set back to one. */
.apc-text{
  font-family:var(--apc-mono); font-weight:400;
  font-size:13px; line-height:1.72; color:var(--secondary);
  overflow-wrap:anywhere;
}

/* The palette lifted out above the prompt. Twelve plates for one artist share
   their subject matter and their materials; the colour is where they part
   company, and it was buried mid-paragraph. */
.apc-plate-palette{
  margin-bottom:14px; padding-bottom:14px;
  border-bottom:1px solid var(--hairline);
}
.apc-plate-label{
  display:block; margin-bottom:5px;
  font-family:var(--apc-mono); font-size:9.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.apc-plate-palette em{
  font-family:var(--apc-serif); font-style:italic; font-weight:400;
  font-size:16px; line-height:1.5; color:var(--paper);
}
.apc-params{ color:var(--gold); }

.apc-text{ margin-bottom:14px; }
/* margin-top:auto, so on a short prompt the spare height opens between the
   text and the footer rather than leaving the footer floating mid-card. */
.apc-meta{
  margin-top:auto; padding-top:12px;
  border-top:1px solid var(--hairline);
  font-family:var(--apc-mono);
  font-size:9.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--faint);
}

/* ---------- the vocabulary ------------------------------------------------ */

/* A reference list, not a card grid. Every line is the same kind of thing and
   the only question asked of it is "is the one I want in here", so it is set
   as rows to be run down, with the kind in the left column so the eye can
   skip a kind without reading it. */
.apc-vocab-note{
  font-family:var(--apc-serif); font-size:16.5px; line-height:1.62;
  color:var(--secondary); max-width:66ch; margin-bottom:clamp(18px,2.4vw,26px);
}
.apc-vocab-controls{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin-bottom:14px;
}
.apc-vocab-search-label{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.apc-vocab-search{
  flex:0 1 260px; min-width:0;
  background:var(--canvas); border:1px solid var(--hairline); border-radius:0;
  color:var(--paper); font-family:var(--apc-mono); font-size:12px;
  padding:10px 13px;
}
.apc-vocab-search::placeholder{ color:var(--faint); }
.apc-vocab-search:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.apc-vocab-kinds{ display:flex; flex-wrap:wrap; gap:8px; }
.apc-vocab-chip{
  background:transparent; border:1px solid var(--hairline); border-radius:0;
  color:var(--muted); cursor:pointer;
  font-family:var(--apc-mono); font-size:10px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; padding:9px 13px;
}
.apc-vocab-chip:hover{ border-color:var(--gold-line); color:var(--secondary); }
.apc-vocab-chip[aria-pressed="true"]{ border-color:var(--gold); color:var(--gold); }
.apc-vocab-chip:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.apc-vocab-count{
  font-family:var(--apc-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); margin-bottom:10px;
}

.apc-vocab-list{ border-top:1px solid var(--hairline); }
.apc-vocab-row{
  display:grid; grid-template-columns:104px minmax(0,1fr); gap:18px;
  align-items:baseline; width:100%; text-align:left;
  background:transparent; border:0; border-bottom:1px solid var(--hairline);
  border-radius:0; padding:12px 4px; cursor:pointer;
}
.apc-vocab-row:hover{ background:var(--gold-soft); }
.apc-vocab-row:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px; }
.apc-vocab-kind{
  font-family:var(--apc-mono); font-size:9.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.apc-vocab-text{
  font-family:var(--apc-serif); font-size:15.5px; line-height:1.55; color:var(--secondary);
}
@media (max-width:640px){
  .apc-vocab-row{ grid-template-columns:1fr; gap:4px; }
  .apc-vocab-search{ flex:1 1 100%; }
}

/* ---------- hand-off ------------------------------------------------------ */

.apc-handoff{ max-width:70ch; }
.apc-handoff p{ color:var(--secondary); font-size:16px; line-height:1.65; margin-bottom:1.2em; }
.apc-handoff .apc-actions{ margin-bottom:1.2em; }
.apc-handoff em{ color:var(--paper); font-style:normal; font-weight:500; }

.apc-noscript p{ color:var(--secondary); font-size:16px; line-height:1.65; }
.apc-noscript p + p{ margin-top:1em; }

/* The whole Super Prompt, for anyone without JavaScript. Long, so it scrolls
   in its own box rather than running the page to four screens. */
.apc-super{
  margin-top:1.4em; max-height:60vh; overflow:auto;
  background:var(--surface); border:1px solid var(--hairline); border-radius:8px;
  padding:clamp(16px,2vw,22px);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:13px; line-height:1.6; color:var(--paper);
  white-space:pre-wrap; overflow-wrap:anywhere;
  -webkit-user-select:all; user-select:all;
}

/* ---------- zone 5 --------------------------------------------------------- */

.apc-endnote{ max-width:70ch; }
.apc-endnote strong{ color:var(--paper); font-weight:500; }
.apc-endnote code{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.9em; color:var(--gold);
}

/* ---------- toast and live region ------------------------------------------ */

.apc-toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:60;
  background:var(--surface); border:1px solid var(--gold-line); border-radius:999px;
  padding:11px 24px; font-size:14px; color:var(--paper);
  box-shadow:0 12px 30px rgba(0,0,0,.6);
  animation:apc-rise .2s ease-out;
}
@keyframes apc-rise{ from{ opacity:0; transform:translate(-50%,10px); } }

.apc-sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

@media (prefers-reduced-motion:reduce){
  .apc-card, .apc-btn, .apc-chip, .apc-field input, .apc-field select{ transition:none; }
  .apc-card:hover{ transform:none; }
  .apc-toast, .apc-flash{ animation:none; }
}