/* HyperPrior, the hybrid build: the footer every page shares, and the pages in the papers' register.
   1. The footer in one plain flow (every page: index.html and calibrate/ link this sheet too)
   2. The 404, reflection only
   3. /positions/: three roles as workshop job tags, the terms, how to apply, the calibrator as the filter
   4. /manual/: the operating manual, its exploded views, the troubleshooting table and the specifications
   5. The data sheet: the home page as one typeset sheet (print.css prints it; without JavaScript it is the page)
   Sizes, gaps, durations and easings come from shell.css :root. The job tag and the card stock are printed
   matter and keep their own few colours, set on the component. */

/* ================================================================== 1. the footer, one flow
   The chrome HYPERPRIOR nameplate first, as a block of its own; then the row right at the bottom underneath it (the
   registration line, the place, the links: HYBRID-4 item 16). The chrome canvas reaches 40px past its text on
   every side (chrome-type.js, pad), so the plate's block holds that reach as padding above and below: the metal can
   never stand over the row, at any width. Nothing here is absolutely placed. */
.foot { --chrome-reach: 40px; padding-top: var(--s3); padding-bottom: var(--s5); }
.foot-plate { position: relative; padding-block: var(--chrome-reach) calc(var(--chrome-reach) + 2px); }
.foot-plate > .nameplate { margin-top: 0; padding-bottom: 0; }
.foot-row { justify-content: flex-start; column-gap: var(--s5); }
.foot-place { color: inherit; }
.foot-links { margin-left: auto; }
@media (max-width: 1100px) {
  .foot-row { row-gap: var(--s1); }
  .foot-links { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 600px) {
  .foot { padding-top: var(--s2); padding-bottom: var(--s4); }
  .foot-row { flex-direction: column; align-items: flex-start; row-gap: var(--s2); }
  .foot-links { margin-top: var(--s1); }
}

/* ================================================================== 2. the 404: the pool, and only the reflection
   hero.js hides the upright headline (reflection "only") and keeps it in the document; without JavaScript this does
   the same, and the still reflection (.headline-echo--nojs) is drawn a little stronger, as echo.js draws it. The
   waterline sits higher than on the home page, so the reflection has the middle of the screen. */
.nf[data-reflection="only"] { --horizon: 48%; --measure: 0.6; }
.nf[data-reflection="only"] .hero-sky .headline { opacity: 0; user-select: none; }
html:not(.js) .nf[data-reflection="only"] .headline-echo--nojs { opacity: 0.52; filter: blur(0.4px); }
@media (max-width: 820px) { .nf[data-reflection="only"] { --horizon: 40%; --measure: 0.84; } }
@media (max-width: 700px) { .nf[data-reflection="only"] { --horizon: 38%; --measure: 0.9; } }

/* the copy over the pool: from a tablet down it can land on the dark band the pool reflects, so it stands in a soft
   glow of the footer's silver (as the hero's text stands on its ramp), the eyebrow in graphite */
@media (max-width: 820px) {
  .nf-copy { isolation: isolate; }
  .nf-copy::before {
    content: ""; position: absolute; z-index: -1; inset: -36px -28px -24px; pointer-events: none;
    background: radial-gradient(closest-side, rgb(238 240 242 / 0.92), rgb(238 240 242 / 0.78) 62%, rgb(238 240 242 / 0));
  }
  .nf-copy .nf-k { color: var(--graphite); }
  .nf-copy .nf-p { color: var(--ink); }
}

/* ================================================================== 3. /positions/ */
.pos-intro { margin-top: var(--space-head); }
.pos-intro-in p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--graphite); }
.pos-intro-in p + p { margin-top: var(--s3); }

.pos-roles { margin-top: var(--space-block); }

/* the job tag: buff manila card stock, the eyelet end chamfered, a reinforcing ring round the eyelet, a cotton
   string through it, the job's number on a perforated stub at the far end */
.tags { display: grid; row-gap: 64px; margin-top: 16px; }
.tag-item { position: relative; --rot: -0.45deg; padding-left: 132px; }
.tag-item:nth-child(2) { --rot: 0.35deg; }
.tag-item:nth-child(3) { --rot: -0.2deg; }
.tag {
  --tag-paper: #f0e5c8;
  --tag-paper-2: #e9dcba;
  --tag-ink: #221f19;              /* 14:1 on the stock */
  --tag-text: #36322a;             /* 11:1 */
  --tag-quiet: #5c5240;            /* 6.4:1 */
  --tag-rule: rgba(70, 54, 24, 0.3);
  --tag-eye: 52px;                 /* the eyelet's centre, from the chamfered end */
  position: relative; display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 76px;
  grid-template-areas: "eye head stub" "eye fields stub" "eye act stub";
  color: var(--tag-ink);
  rotate: var(--rot); transform-origin: var(--tag-eye) 50%;
  filter: drop-shadow(0 1px 0.5px rgba(40, 30, 10, 0.18)) drop-shadow(0 16px 18px rgba(40, 30, 10, 0.16));
  transition: rotate 900ms var(--spring), translate var(--t-move) var(--ease);
}
/* the stock: a tag's outline, its fibres and a little wear at the edges */
.tag::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255, 252, 240, 0.55), transparent 60%),
    repeating-linear-gradient(91deg, rgba(120, 96, 52, 0.035) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-3deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, var(--tag-paper), var(--tag-paper-2));
  clip-path: polygon(0 26%, 34px 0, 100% 0, 100% 100%, 34px 100%, 0 74%);
  box-shadow: inset 0 0 0 1px rgba(90, 70, 30, 0.12);
}
.tag > * { position: relative; z-index: 1; }
.tag-eyelet {
  grid-area: eye; justify-self: start; align-self: center; margin-left: calc(var(--tag-eye) - 21px);
  width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle, var(--paper) 0 9.5px, rgba(60, 45, 15, 0.45) 9.5px 10.5px, #e2d2a6 11px 19px, rgba(90, 70, 30, 0.25) 19.5px 20.5px, transparent 21px);
  box-shadow: inset 0 0 0 0.5px rgba(90, 70, 30, 0.1);
}
.tag-string {
  position: absolute; z-index: 2; pointer-events: none;
  right: calc(100% - var(--tag-eye)); top: calc(50% - 62px); width: 200px; height: 120px;
  color: #a69777; overflow: visible;
  filter: drop-shadow(0 6px 4px rgba(40, 30, 10, 0.18));
}
.tag-head { grid-area: head; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s4); align-items: baseline; padding: 34px var(--s5) 0 0; border-bottom: 1px solid var(--tag-rule); padding-bottom: var(--s4); }
.tag-no { grid-row: 1 / span 2; font-family: var(--display); font-size: var(--d4); line-height: 1; color: var(--tag-ink); font-variant-numeric: lining-nums; }
.tag-name { font-family: var(--display); font-size: var(--d4); line-height: var(--d4-lh); letter-spacing: var(--d4-ls); text-wrap: balance; }
.tag-line { margin-top: var(--s1); color: var(--tag-quiet); }
.tag-fields { grid-area: fields; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; padding: var(--s4) var(--s5) 0 0; }
.tag-label { padding-bottom: 6px; margin-bottom: var(--s2); border-bottom: 1px dotted var(--tag-rule); color: var(--tag-quiet); }
.tag-field p { font-size: var(--fs-meta); line-height: 1.62; color: var(--tag-text); text-wrap: pretty; }
.tag-act { grid-area: act; padding: var(--s4) var(--s5) 30px 0; }
.tag-link { display: inline-flex; align-items: center; gap: 10px; color: var(--tag-ink); font-size: var(--fs-ui); }
.tag-link .pp-arrow { transition: translate var(--t-move) var(--ease); }
.tag-link:hover .pp-arrow, .tag-link:focus-visible .pp-arrow { translate: var(--nudge-arrow) 0; }
/* the stub, behind a perforation */
.tag-stub {
  grid-area: stub; position: relative; display: grid; place-items: center;
  background-image: radial-gradient(circle, rgba(60, 45, 15, 0.42) 1.3px, transparent 1.6px);
  background-size: 4px 9px; background-repeat: repeat-y; background-position: 0 0;
}
.tag-stub-no { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--display); font-size: 40px; line-height: 1; color: rgba(34, 31, 25, 0.82); letter-spacing: 0.02em; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tag-item:hover .tag { rotate: 0deg; }
}
@media (prefers-reduced-motion: no-preference) {
  .tag-item:focus-within .tag { rotate: 0deg; }
}
.tag a:focus-visible { outline: 2px solid var(--tag-ink); outline-offset: 4px; }

.pos-terms-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); border-top: 1px solid var(--ink); }
.pos-term { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); column-gap: var(--s3); padding: 14px 0 15px; border-bottom: 1px solid var(--hair); }
.pos-term dt { font-style: italic; color: var(--quiet); font-size: var(--fs-meta); line-height: var(--lh-meta); }
.pos-term dd { margin: 0; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink); }

.pos-how-text { font-family: var(--display); font-size: var(--d3); line-height: var(--d3-lh); letter-spacing: var(--d3-ls); max-width: 22em; text-wrap: pretty; }
.pos-how-act { margin-top: var(--s5); }

/* the filter: the last thing on the page, a ruled strip with the calibrator's line and the way to it */
.pos-filter { margin-top: var(--space-block); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair); }
.pos-filter-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s4) var(--s5); flex-wrap: wrap; padding: var(--s5) 0; }
.pos-filter-text { font-family: var(--display); font-size: var(--d2); line-height: var(--d2-lh); letter-spacing: var(--d2-ls); max-width: 24em; }
/* a secondary action, so the black pill (shell.css, buttons: one rule); platinum only ever means current or chosen,
   and the page's primary action stays the jelly 'Go to the communicator' above */
.pos-filter-link { display: inline-flex; align-items: center; gap: 12px; }
.pos-filter-link .pp-arrow { transition: translate var(--t-move) var(--ease); }
.pos-filter-link:hover .pp-arrow, .pos-filter-link:focus-visible .pp-arrow { translate: var(--nudge-arrow) 0; }
.pos-foot { margin-top: var(--s5); }

@media (max-width: 1100px) {
  .tag-item { padding-left: 84px; }
  .tag-string { width: 150px; }
  .tag-fields { column-gap: var(--s5); }
}
/* a tablet and a phone: the tag hangs from its string, the eyelet at the top */
@media (max-width: 820px) {
  .tags { row-gap: 56px; margin-top: 88px; }
  .tag-item { padding-left: 0; --rot: 0deg !important; }
  .tag {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "eye" "head" "fields" "act" "stub";
    transform-origin: 50% 40px;
  }
  .tag::before { clip-path: polygon(0 34px, 24% 0, 76% 0, 100% 34px, 100% 100%, 0 100%); }
  .tag-eyelet { justify-self: center; margin: 18px 0 0; }
  .tag-string { right: auto; left: calc(50% - 6px); top: auto; bottom: calc(100% - 39px); width: 12px; height: 88px; }
  .tag-string path { d: path("M110 120 C 70 84, 160 40, 110 0"); }
  .tag-string path:first-child { d: path("M118 120 C 150 90, 60 50, 112 0"); }
  .tag-string ellipse { display: none; }
  .tag-head, .tag-fields, .tag-act { padding-inline: var(--s4); }
  .tag-head { padding-top: var(--s3); }
  .tag-fields { grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); }
  .tag-stub {
    min-height: 58px; margin: 0 var(--s4); padding-top: 8px;
    background-size: 9px 4px; background-repeat: repeat-x; background-position: 0 0;
  }
  .tag-stub-no { writing-mode: horizontal-tb; transform: none; font-size: 32px; }
  .pos-terms-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .pos-term { grid-template-columns: 8em minmax(0, 1fr); }
  .tag-head { grid-template-columns: minmax(0, 1fr); }
  .tag-no { grid-row: auto; font-size: 30px; margin-bottom: var(--s1); }
  .tag-name { font-size: 34px; }
}

/* ================================================================== 4. /manual/
   The register of a device manual: numbered sections under an ink rule, each device's exploded view with its
   parts called out in the manual's type, then the parts, the steps and the care, two columns on a wide screen. */
.man-kicker { margin-bottom: var(--s3); }
.man-toc ol { display: grid; row-gap: 2px; }
.man-toc a { display: grid; grid-template-columns: 2em auto 1fr; column-gap: 0; align-items: baseline; padding: 4px 0; color: var(--graphite); text-decoration: none; font-size: var(--fs-meta); line-height: 1.35; }
.man-toc a .num { color: var(--quiet); }
.man-toc a:hover, .man-toc a:focus-visible { color: var(--ink); }
.toc-part { margin-right: 0.5em; color: var(--ink); }

.man-dev, .man-trouble, .man-spec { margin-top: var(--space-block); padding-top: var(--s4); border-top: 1px solid var(--ink); outline: none; scroll-margin-top: calc(var(--bar-h) + var(--s3)); }
.man-dev-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; }
.man-sec { grid-column: 1 / span 1; font-family: var(--display); font-size: var(--d2); line-height: 1; color: var(--ink); }
.man-dev-t { grid-column: 2 / span 11; font-family: var(--display); font-size: var(--d5); line-height: var(--d5-lh); letter-spacing: var(--d5-ls); }
.man-part { display: inline-block; margin-right: 0.18em; }
.man-name { color: var(--quiet); }
.man-what { grid-column: 5 / span 8; margin-top: var(--s4); font-family: var(--display); font-size: var(--d3); line-height: var(--d3-lh); letter-spacing: var(--d3-ls); max-width: 22em; text-wrap: pretty; }

/* the exploded view: the render, the leader lines and the callouts in the image's own coordinates */
.fig { margin: var(--space-head) 0 0; }
.fig-art { position: relative; width: min(100%, 1180px); margin-inline: auto; aspect-ratio: var(--ar); }
.fig-art img { display: block; width: 100%; height: auto; }
.fig-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fig-lines path { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.7; transition: opacity var(--t-fast) var(--ease), stroke-width var(--t-fast) var(--ease); }
.fig-lines circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.fig-calls { position: absolute; inset: 0; pointer-events: none; }
.fig-call {
  position: absolute; left: var(--x); top: var(--y); translate: 0 -50%;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: var(--fs-meta); line-height: 1; color: var(--ink);
  transition: color var(--t-fast) var(--ease);
}
.fig-call--l { translate: -100% -50%; flex-direction: row-reverse; }
.fig-call b {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font-weight: 400; font-size: 13.5px; font-variant-numeric: tabular-nums;
  color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.fig-call--l b { margin-left: 2px; }
.fig-call--r b { margin-right: 2px; }
/* a part named in the list lights its callout, and the other way round (manual.js sets data-on) */
.fig[data-on] .fig-lines path { opacity: 0.22; }
.fig[data-on] .fig-call { color: var(--quiet); }
.fig .fig-lines path.is-on { opacity: 1; stroke-width: 1.6; }
.fig .fig-call.is-on { color: var(--ink); }
.fig .fig-call.is-on b { background: var(--teal); color: var(--teal-ink); box-shadow: inset 0 0 0 1px var(--teal); }
.fig-cap { margin-top: var(--s3); text-align: center; }

.man-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-top: var(--space-head); align-items: start; }
.man-parts { grid-column: 2 / span 5; }
.man-side { grid-column: 8 / span 5; display: grid; row-gap: var(--s5); }
.man-h { padding-bottom: var(--s2); margin-bottom: var(--s3); border-bottom: 1px solid var(--hair); }
.man-list { display: grid; row-gap: var(--s2); }
.man-list li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); align-items: baseline; font-size: var(--fs-meta); line-height: 1.55; color: var(--graphite); }
.man-list b { font-weight: 400; }
.man-list--parts li { padding: 2px 0; border-radius: 4px; transition: color var(--t-fast) var(--ease); }
.man-list--parts b {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; translate: 0 -1px;
  font-size: 13px; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink);
}
.man-dev--fig .man-list--parts li { cursor: default; }
.man-list--parts li.is-on { color: var(--ink); }
.man-list--parts li.is-on b { background: var(--teal); color: var(--teal-ink); box-shadow: inset 0 0 0 1px var(--teal); }
.man-list--ops b { font-family: var(--display); font-size: 20px; line-height: 1; color: var(--ink); }
.man-keys, .man-care p { font-size: var(--fs-meta); line-height: 1.55; color: var(--graphite); }

/* troubleshooting: three columns, ruled; on a phone each row is a short block */
.trouble-wrap { margin-top: var(--space-head); }
.trouble { width: 100%; border-collapse: collapse; font-size: var(--fs-meta); line-height: 1.45; }
.trouble th, .trouble td { text-align: left; vertical-align: baseline; padding: 13px var(--s4) 14px 0; border-bottom: 1px solid var(--hair); font-weight: 400; }
.trouble thead th { padding-top: 0; font-style: italic; color: var(--quiet); border-bottom: 1px solid var(--ink); }
.trouble tbody th { width: 34%; color: var(--ink); }
.trouble td { color: var(--graphite); }
.trouble td:last-child { width: 26%; color: var(--ink); padding-right: 0; }

.spec { margin-top: var(--space-head); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); border-top: 1px solid var(--ink); }
.spec-row { display: grid; grid-template-columns: 13em minmax(0, 1fr); column-gap: var(--s3); padding: 13px 0 14px; border-bottom: 1px solid var(--hair); }
.spec-row dt { font-style: italic; color: var(--quiet); font-size: var(--fs-meta); line-height: var(--lh-meta); }
.spec-row dd { margin: 0; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink); }
.man-foot { margin-top: var(--s5); }

@media (max-width: 1100px) {
  .man-parts { grid-column: 1 / span 6; }
  .man-side { grid-column: 7 / span 6; }
  .spec-row { grid-template-columns: 11em minmax(0, 1fr); }
}
/* the callouts' names need a wide screen; below it the numbers stand alone, the list names them, and the drawing
   is cropped to itself and its numbers (the image runs past the figure's edges, clipped) */
@media (max-width: 1023px) {
  .fig-name { display: none; }
  .fig { overflow: clip; padding-inline: 14px; margin-inline: -14px; }
  .fig-art { width: calc(100% / var(--kk, 1)); max-width: none; margin-left: calc(-100% * var(--k0, 0) / var(--kk, 1)); }
}
@media (max-width: 820px) {
  .man-dev-head { grid-template-columns: 2.4em minmax(0, 1fr); column-gap: var(--s2); }
  .man-sec { grid-column: 1; }
  .man-dev-t { grid-column: 2; }
  .man-what { grid-column: 1 / -1; }
  .man-cols { grid-template-columns: minmax(0, 1fr); row-gap: var(--s5); }
  .man-parts, .man-side { grid-column: 1 / -1; }
  .spec { grid-template-columns: minmax(0, 1fr); }
  .trouble thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .trouble, .trouble tbody, .trouble tr, .trouble th, .trouble td { display: block; width: auto !important; }
  .trouble tr { padding: 14px 0 15px; border-bottom: 1px solid var(--hair); }
  .trouble tbody tr:first-child { border-top: 1px solid var(--ink); }
  .trouble th, .trouble td { padding: 0; border: 0; }
  .trouble td { margin-top: 6px; display: grid; grid-template-columns: 6em minmax(0, 1fr); }
  .trouble td::before { content: attr(data-col); font-style: italic; color: var(--quiet); }
}
@media (max-width: 600px) {
  .spec-row { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .fig-call b { width: 21px; height: 21px; font-size: 12px; }
}

/* ================================================================== 5. the data sheet
   With JavaScript it is only for print (print.css). Without it, the home page is the hero and then this sheet,
   in place of the black story whose devices need the script. */
.ds { display: none; }
html:not(.js) .home .story { display: none; }
html:not(.js) .home .ds { display: block; }
/* the hero's pool runs into the sheet's paper, not into the black it would meet with the script */
html:not(.js) .home .hero::after { background: var(--paper); }
.ds {
  position: relative; padding: var(--space-section) var(--frame);
  background: var(--paper); color: var(--ink);
}
.ds-sheet { max-width: var(--col); margin-inline: auto; }
.ds-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; padding-bottom: var(--s4); border-bottom: 2px solid var(--ink); }
.ds-mark { display: none; grid-column: 1 / span 4; font-family: var(--display); font-size: var(--fs-mark); letter-spacing: var(--ls-mark); line-height: 1; }
.ds-title { grid-column: 1 / span 9; font-family: var(--display); font-size: var(--d5); line-height: var(--d5-lh); letter-spacing: var(--d5-ls); }
.ds-sub { grid-column: 10 / span 3; justify-self: end; font-style: italic; color: var(--quiet); }
.ds-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s5); padding-top: var(--s5); }
.ds-sec { grid-column: span 6; }
.ds-def { grid-column: 1 / span 5; }
.ds-areas { grid-column: 7 / span 6; }
.ds-engs { grid-column: 1 / span 6; }
.ds-terms { grid-column: 7 / span 6; }
.ds-about { grid-column: 1 / span 8; }
.ds-devs { grid-column: 1 / span 5; }
.ds-reg { grid-column: 7 / span 6; }
.ds-contact { grid-column: 1 / span 8; }
.ds-h { margin-bottom: var(--s3); padding-bottom: var(--s1); border-bottom: 1px solid var(--hair); font-family: var(--text); font-style: italic; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--quiet); }
.ds-sec p { font-size: var(--fs-meta); line-height: 1.55; color: var(--graphite); }
.ds-sec p + p { margin-top: var(--s2); }
.ds-hw { font-family: var(--display); font-size: var(--d2) !important; line-height: 1.2 !important; color: var(--ink) !important; }
.ds-hw b { font-weight: 400; }
.ds-hw .ds-ipa, .ds-hw i, .ds-hw [lang="ja"] { font-family: var(--text); font-size: var(--fs-meta); color: var(--quiet); }
.ds-senses { margin-top: var(--s3); display: grid; row-gap: var(--s2); }
.ds-senses li { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); font-size: var(--fs-meta); line-height: 1.55; color: var(--graphite); }
.ds-senses i { color: var(--quiet); }
.ds-q { margin-top: var(--s4); font-family: var(--display); font-size: var(--d2) !important; line-height: 1.15 !important; color: var(--ink) !important; }
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--fs-meta); line-height: 1.4; }
.ds-table td, .ds-table th { padding: 7px 12px 7px 0; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: baseline; font-weight: 400; color: var(--graphite); }
.ds-table th { color: var(--ink); white-space: nowrap; }
.ds-table td.num { width: 3.2em; color: var(--quiet); white-space: nowrap; }
.ds-table td.ds-g { width: 1.6em; font-family: var(--display); font-size: 20px; color: var(--ink); }
.ds-table td:last-child { padding-right: 0; }
.ds-dl { display: grid; }
.ds-term { position: relative; display: grid; grid-template-columns: 8.5em minmax(0, 1fr); column-gap: var(--s3); padding: 7px 0; border-bottom: 1px solid var(--hair); font-size: var(--fs-meta); line-height: 1.4; }
.ds-term dt { font-style: italic; color: var(--quiet); }
.ds-term dd { margin: 0; color: var(--ink); }
.ds-term--seal { padding-right: 116px; }
.ds-seal { position: absolute; right: 0; top: 50%; width: 104px; height: auto; translate: 0 -50%; rotate: -4deg; color: var(--ink); }
.ds-seal text { font-family: var(--text); fill: currentColor; }
.ds-seal-k { font-size: 10px; font-style: italic; }
.ds-seal-v { font-family: var(--display) !important; font-size: 10.5px; }
.ds-seal-b { font-size: 9px; }
.ds-foot { max-width: none; margin-top: var(--s5); padding-top: var(--s3); border-top: 2px solid var(--ink); font-style: italic; font-size: var(--fs-meta); color: var(--quiet); }
/* the date is the day it is printed: on screen that sentence is left out */
.ds-printed { display: none; }
.ds-fig { display: none; }
@media (max-width: 820px) {
  .ds-head { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s2); }
  .ds-mark { grid-column: 1 / -1; }
  .ds-title { grid-column: 1; }
  .ds-sub { grid-column: 2; }
  .ds-grid > .ds-sec { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .ds-table, .ds-table tbody { display: block; }
  .ds-table tr { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); column-gap: 0; padding: 9px 0 10px; border-bottom: 1px solid var(--hair); }
  .ds-table td, .ds-table th { padding: 0; border: 0; width: auto !important; white-space: normal; }
  .ds-table td:last-child { grid-column: 2; margin-top: 3px; }
  .ds-areas .ds-table tr { grid-template-columns: 2.6em 1.8em minmax(0, 1fr); }
  .ds-areas .ds-table td:last-child { grid-column: 3; }
  .ds-term--seal { padding-right: 0; padding-bottom: 92px; }
  .ds-seal { top: auto; bottom: 8px; right: auto; left: 0; translate: none; }
}

/* ------------------------------------------------------------------ positions: what we have been wrong about (three lines
   in the founder's voice, before How to apply asks the same of an applicant) */
.pos-wrong-list { border-top: 1px solid var(--ink); counter-reset: wrong; }
.pos-wrong-list li {
  display: grid; grid-template-columns: 3em minmax(0, 1fr); align-items: baseline; padding: 16px 0 18px; border-bottom: 1px solid var(--hair);
  counter-increment: wrong; font-family: var(--display); font-size: var(--d2); line-height: 1.14; letter-spacing: var(--d2-ls); text-wrap: pretty;
}
.pos-wrong-list li::before { content: counter(wrong, decimal-leading-zero); font-family: var(--text); font-size: var(--fs-meta); line-height: 1; color: var(--quiet); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .pos-wrong-list li { grid-template-columns: 2.4em minmax(0, 1fr); } }