/* ============================================================================
   /commission.html

   A commission, not a checkout. Purdey's ceremony of named stages, set in
   Jamb's air. Tokens only: every colour and every face comes from site.css.
   ============================================================================ */

[hidden]{display:none !important}

/* ------------------------------------------------------------- the opening -- */

/* A blind critic: "the hero heading is not a display moment. It sets at about
   the size of a secondary section heading, then breaks into a four-line stair
   ending in two one-word lines." Three words should be one or two lines, at
   display size, on this of all pages: it is the page the rebuild exists for. */
.cm-open h1{
  margin-bottom:var(--s3);
  max-width:22ch;
  font-size:clamp(var(--t-2xl),7vw,var(--t-4xl));
  line-height:.98;
  letter-spacing:-.017em;
  text-wrap:balance;
}
.cm-open .lede{max-width:30ch}
.cm-open .prose{margin-top:var(--s4)}

/* A drafted term Robert has not yet agreed. Quiet, but impossible to miss,
   and it comes off the page the day he confirms the wording. */
.cm-draft{
  border:1px solid var(--patina);
  background:var(--ground);
  color:var(--ink-2);
  font-family:var(--sans);font-size:var(--t-sm);line-height:1.55;
  padding:var(--s3);max-width:64ch;
}
.cm-draft b{color:var(--ink);font-weight:600}
.cm-draft p{margin:0}
.cm-draft p+p{margin-top:.7em}
.night .cm-draft{border-color:#5A5F68;background:var(--night-2);color:#BEB8AA}
.night .cm-draft b{color:#F0EBE0}

.cm-lead-in{max-width:60ch}

/* ------------------------------------------------------------- the stages -- */

.cm-stages{margin-top:var(--s5)}

.cm-stage{
  display:grid;
  grid-template-columns:230px minmax(0,1fr) 220px;
  gap:var(--s4);
  align-items:start;
  padding-block:var(--s4);
  border-top:1px solid var(--ground-3);
}
.cm-stage:last-child{border-bottom:1px solid var(--ground-3)}

.cm-stage__name{font-size:var(--t-lg);line-height:1.18;text-wrap:balance}
.cm-stage__no{color:var(--ink-3)}

.cm-stage__body{color:var(--ink-2);max-width:56ch}
.cm-stage__body p{margin:0 0 .9em}
.cm-stage__body p:last-child{margin-bottom:0}
.cm-stage__body strong{color:var(--ink);font-weight:500}

/* The photograph sits on the page ground at the largest size its own pixels
   allow, flush with the right end of the rule above it. It is not put in a
   fixed box: a 4:5 box round a landscape photograph is mostly empty beige,
   and an empty container is worse than no container. */
.cm-stage__fig{
  margin:0;justify-self:end;
  width:100%;max-width:min(100%,var(--cap,220px));
}
.cm-stage__fig img{width:100%;height:auto}
.cm-stage__fig figcaption{margin-top:var(--s1);color:var(--ink-3);
  font-family:var(--sans);font-size:var(--t-xs);line-height:1.45}

/* ------------------------------------------------- the specification form -- */

.cm-spec{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:var(--s5) var(--s6);
  align-items:start;
  margin-top:var(--s5);
}

.cm-plate{position:sticky;top:88px}

/* The catalogue plate, square and cropped tight, filling its frame completely.
   --pw is that crop's TRUE pixel width, so the object is as large as it can
   honestly be and there is never a margin of dead ground inside the frame. */
.cm-plate__frame{
  display:block;width:100%;
  max-width:min(100%,var(--pw,250px));
  aspect-ratio:1/1;overflow:hidden;
  background:var(--ground-2);   /* seen only for the instant before load */
}
.cm-plate__frame img{width:100%;height:100%;object-fit:cover;display:block}
/* a piece with no square crop keeps its own shape rather than being stretched */
.cm-plate__frame.is-contain{aspect-ratio:auto;background:transparent}
.cm-plate__frame.is-contain img{height:auto;object-fit:contain}

.cm-plate__body{padding-top:var(--s2);display:flex;flex-direction:column;gap:4px;
  max-width:min(100%,var(--pw,250px))}
.cm-plate__name{font-size:var(--t-md);line-height:1.2}
.cm-plate__link{font-family:var(--sans);font-size:var(--t-xs);margin-top:2px;
  display:inline-flex;align-items:center;align-self:flex-start;min-height:44px}

.cm-right{min-width:0}
.cm-fields{display:grid;gap:var(--s4);max-width:620px;border:0;margin:0;padding:0}
.cm-sum{max-width:620px}

/* ---------------------------------------------------------- the controls --
   Nothing on this page is allowed to arrive in the browser's own clothes. The
   two long lists stay real <select> elements, keyboard driven and announced as
   selects, but the system border and the system chevron are replaced with the
   page's own: parchment ground, a hairline, a brass rule under the field and a
   brass chevron drawn from two strokes. */

.cm-sel{position:relative;display:block}

.cm-sel select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  font-family:var(--sans);font-size:16px;   /* 16 stops iOS zooming on focus */
  line-height:1.35;color:var(--ink);
  background:#F3EFE6;
  border:1px solid var(--ground-3);
  border-bottom:2px solid var(--brass);
  border-radius:0;
  padding:13px 48px 12px 14px;
  min-height:50px;width:100%;
  cursor:pointer;
  transition:border-color .18s,background-color .18s;
}
.cm-sel select::-ms-expand{display:none}
.cm-sel select:hover{border-color:var(--ink-3);border-bottom-color:var(--brass);background:#F7F3EB}

/* The chevron. Two brass strokes meeting, drawn here, never the system one. */
.cm-sel::after{
  content:"";position:absolute;pointer-events:none;
  right:19px;top:50%;width:9px;height:9px;margin-top:-8px;
  border-right:1.5px solid var(--brass);
  border-bottom:1.5px solid var(--brass);
  transform:rotate(45deg);
}

/* site.css clears the outline on :focus for every field, which would leave a
   keyboard user with only a faint shadow. Put it back, at a weight that wins. */
.cm-sel select:focus{border-color:var(--brass);box-shadow:none}
.cm-sel select:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

.cm-fields textarea{
  background:#F3EFE6;
  border:1px solid var(--ground-3);
  border-bottom:2px solid var(--brass);
  border-radius:0;
}
.cm-fields textarea:focus{border-color:var(--brass);border-bottom-color:var(--brass);box-shadow:none}
.cm-fields textarea:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* A stated fact, not a control. No box, no ground, no affordance: a ruled line
   in the specification with the answer written on it. */
.cm-fact{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:2px var(--s3);align-items:baseline;
  border-top:1px solid var(--ground-3);
  border-bottom:1px solid var(--ground-3);
  padding-block:13px;
}
.cm-fact__k{font-family:var(--sans);font-size:var(--t-sm);font-weight:500;color:var(--ink)}
.cm-fact__v{font-family:var(--serif);font-size:var(--t-md);line-height:1.35;
  color:var(--ink);text-align:right}
.cm-fact__n{grid-column:1 / -1;font-family:var(--sans);font-size:var(--t-xs);
  color:var(--ink-3);line-height:1.5;margin-top:4px}

.cm-group{border:0;margin:0;padding:0;min-width:0}
.cm-group legend{
  font-family:var(--sans);font-size:var(--t-sm);font-weight:500;color:var(--ink);
  padding:0;margin:0 0 var(--s2);
}
.cm-group .hint{font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-3);
  margin:0 0 var(--s2);line-height:1.5}
.cm-group .hint a{color:var(--ink-2)}

.cm-opts{display:grid;gap:8px}
.cm-opt{
  position:relative;
  display:flex;align-items:flex-start;gap:11px;
  font-family:var(--sans);font-size:var(--t-sm);font-weight:400;color:var(--ink);
  background:#F3EFE6;border:1px solid var(--ground-3);border-radius:1px;
  padding:11px 13px;min-height:48px;cursor:pointer;
  transition:border-color .18s,background-color .18s;
}
.cm-opt:hover{border-color:var(--ink-3);background:#F7F3EB}

/* The standard technique: the real radio is still there, still focusable,
   still driven by the arrow keys and still announced as a radio, but it is
   stretched invisibly across the whole row so the tap target is the row and
   not an 18px disc, and the mark itself is drawn by the label. A fine ring on
   parchment that fills with brass when the option is chosen. */
.cm-opt::before{
  content:"";flex:none;width:18px;height:18px;margin-top:2px;
  border:1px solid var(--ink-3);border-radius:50%;
  background-color:#F8F5EE;
  background-repeat:no-repeat;background-position:50% 50%;
}
.cm-opt input[type="radio"]{
  position:absolute;inset:0;
  width:100%;height:100%;min-height:0;
  margin:0;padding:0;border:0;background:none;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  opacity:0;cursor:pointer;
}

/* Chosen: brass on every edge, a warmer ground, and the words in full ink. */
.cm-opt:has(input:checked){
  border-color:var(--brass);background:#EFE9DA;
  box-shadow:inset 0 0 0 1px var(--brass);
}
.cm-opt:has(input:checked)::before{
  border-color:var(--brass);
  box-shadow:inset 0 0 0 1px var(--brass);
  background-image:radial-gradient(circle at 50% 50%,var(--brass) 0 3.6px,transparent 3.7px);
}
.cm-opt:has(input:checked) .cm-opt__t{font-weight:500}
.cm-opt:has(input:checked) .cm-opt__p{color:var(--ink)}

/* Keyboard focus is carried through to the row, which is what a sighted
   keyboard user is actually moving between. */
.cm-opt:has(input:focus-visible){
  border-color:var(--brass);
  outline:2px solid var(--brass);outline-offset:2px;
}

/* Windows high contrast: hand the controls straight back to the system, which
   knows how to draw them there and we do not. */
@media (forced-colors:active){
  .cm-opt::before{display:none}
  .cm-opt input[type="radio"]{
    position:static;inset:auto;width:auto;height:auto;
    margin-top:3px;opacity:1;
    -webkit-appearance:auto;appearance:auto;
  }
  .cm-sel select{-webkit-appearance:auto;appearance:auto;padding-right:14px}
  .cm-sel::after{display:none}
}

.cm-opt__t{display:block}
.cm-opt__m{display:block;font-size:var(--t-xs);color:var(--ink-3);margin-top:3px;line-height:1.45}
.cm-opt__p{margin-left:auto;padding-left:var(--s2);font-variant-numeric:tabular-nums;
  color:var(--ink-2);white-space:nowrap}
/* basis 0, never auto: with wrapping switched on at phone width an auto basis
   is the item's max-content width, which pushes the words off the disc's line */
.cm-opt__b{flex:1 1 0;min-width:0}

/* A hint that follows its control rather than introducing one. */
.cm-hint-after{margin:var(--s2) 0 0 !important}

/* The mottoes sheet, pulled out of the middle of a sentence so it is a real
   44px target on a phone instead of a 34px word inside a paragraph. */
.cm-hint-link{margin:0 0 var(--s1);font-family:var(--sans);font-size:var(--t-sm)}
/* brass underline, because a link standing on its own line with the site's
   default hairline underline does not read as a link at all */
.cm-hint-link a{display:inline-flex;align-items:center;min-height:44px;
  color:var(--ink-2);text-decoration-color:var(--brass)}
.cm-hint-link a:hover{color:var(--ink);text-decoration-color:var(--brass)}

.cm-insc-own{margin-top:var(--s2)}
.cm-insc-own .hint{margin:6px 0 0}

.cm-motto{font-family:var(--serif);font-style:italic;font-size:var(--t-base);
  color:var(--ink-2);display:block;margin-top:3px;line-height:1.4}

/* ---------------------------------------------------------- the summary -- */

.cm-sum{
  background:var(--ground-2);color:var(--ink);
  border:1px solid var(--ground-3);
  padding:var(--s4);margin-top:var(--s5);
  overflow-wrap:break-word;
}
.cm-sum h3{font-size:var(--t-md);margin-bottom:var(--s3)}

.cm-line{
  display:flex;flex-wrap:wrap;gap:4px var(--s3);
  align-items:baseline;justify-content:space-between;
  padding-block:10px;border-top:1px solid var(--ground-3);
}
.cm-line:first-of-type{border-top:0;padding-top:0}
.cm-line__t{font-family:var(--sans);font-size:var(--t-sm);color:var(--ink);flex:1 1 14ch;min-width:0}
.cm-line__m{display:block;font-size:var(--t-xs);color:var(--ink-3);margin-top:3px;line-height:1.45}
.cm-line__v{font-family:var(--sans);font-size:var(--t-sm);font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--ink);margin-left:auto;text-align:right}
.cm-line--total{border-top:1px solid var(--ink-3);margin-top:var(--s2);padding-top:var(--s3)}
.cm-line--total .cm-line__t,.cm-line--total .cm-line__v{font-size:var(--t-md)}
.cm-line--quiet .cm-line__t,.cm-line--quiet .cm-line__v{color:var(--ink-2)}

/* ------------------------------------------------------------ the deposit -- */

.cm-night-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:var(--s5) var(--s6);align-items:start}
.cm-night-in h2{margin-bottom:var(--s3)}
.cm-night-copy{max-width:56ch}
.cm-night-copy p{margin:0 0 1em}
.cm-night-copy p:last-child{margin-bottom:0}

.cm-slot{border:1px solid #5A5F68;padding:var(--s4);display:grid;gap:6px}
.cm-slot__k{font-family:var(--sans);font-size:var(--t-xs);color:#8E8779}
.cm-slot__v{font-family:var(--sans);font-size:var(--t-xl);font-weight:500;color:#F0EBE0;
  font-variant-numeric:tabular-nums;line-height:1.1}
.cm-slot__n{font-family:var(--sans);font-size:var(--t-sm);color:#BEB8AA;line-height:1.5;margin:var(--s2) 0 0}
.cm-slot__n b{color:#F0EBE0;font-weight:600}

/* Both actions run the full width of the column, so their left and right edges
   land exactly on the edges of the deposit box above them. Content-width
   buttons in a flex row gave three different right edges in one block. */
.cm-actions{display:grid;gap:var(--s2);margin-top:var(--s3)}
.cm-actions .btn{width:100%}
.cm-status{font-family:var(--sans);font-size:var(--t-xs);color:#8E8779;margin:var(--s2) 0 0;min-height:1.4em}

/* -------------------------------------------------------------- the terms -- */

.cm-terms{display:grid;gap:0;margin-top:var(--s4);max-width:70ch}
.cm-term{display:grid;grid-template-columns:210px minmax(0,1fr);gap:var(--s3);
  padding-block:var(--s3);border-top:1px solid var(--ground-3)}
.cm-term:last-child{border-bottom:1px solid var(--ground-3)}
.cm-term__k{font-family:var(--sans);font-size:var(--t-sm);font-weight:500;color:var(--ink)}
.cm-term__v{color:var(--ink-2)}
.cm-term__v p{margin:0}

/* ------------------------------------------------------------- the routes -- */

.cm-routes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s4) var(--s4);margin-top:var(--s5)}
.cm-route{border-top:1px solid var(--ground-3);padding-top:var(--s3)}
.cm-route h3{font-size:var(--t-md);margin-bottom:var(--s2)}
.cm-route p{font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-2);
  line-height:1.55;margin:0 0 .7em}
.cm-route p:last-child{margin-bottom:0}
.cm-route a{color:var(--ink)}
/* On a phone these two are the page's most important targets, so they get a
   real 44px of height rather than the height of their own line box. */
.cm-route__tel{font-size:var(--t-md);display:inline-flex;align-items:center;min-height:44px}
.cm-route__mail{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere}
.cm-route .meta{display:block;margin-top:2px}
.cm-route .btn{margin-top:var(--s2)}

.cm-noscript{border:1px solid var(--ground-3);background:var(--ground-2);
  padding:var(--s3);font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-2);
  margin-top:var(--s4);max-width:64ch}

/* ----------------------------------------------------------- responsive -- */

@media (max-width:960px){
  .cm-stage{grid-template-columns:200px minmax(0,1fr);gap:var(--s3) var(--s4)}
  .cm-stage__fig{grid-column:2;justify-self:start}
  .cm-spec{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .cm-plate{position:static;max-width:300px}
  .cm-night-in{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .cm-routes{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  .cm-stage{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
  .cm-stage__body{margin-top:var(--s1)}
  .cm-stage__fig{grid-column:1;margin-top:var(--s2)}
  .cm-term{grid-template-columns:minmax(0,1fr);gap:6px}
  .cm-routes{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .cm-open .lede{max-width:none}
  .cm-sum{padding:var(--s3)}
  .cm-slot{padding:var(--s3)}
  /* the charge drops to its own line under the option, indented to the words,
     rather than being squeezed into a two-word column beside them */
  .cm-opt{flex-wrap:wrap}
  .cm-opt__p{flex:1 1 100%;margin:4px 0 0 29px;padding-left:0;
    text-align:left;white-space:normal;color:var(--ink-2)}
}

@media (prefers-reduced-motion:reduce){
  .cm-sel select,.cm-opt{transition:none}
}

@media print{
  .cm-slot,.cm-actions,.cm-noscript{display:none}
  .cm-sum{border:1px solid #666;background:#fff}
  .cm-stage__fig{display:none}
}