@charset "utf-8";

/* ===========================================================================
   THE SWEET & SIP LIMITED — counter board stylesheet
   Two-colour chalk-and-cobalt printing on a warm stock, screened in halftone.
   Everything is a plate, a sheet or a strip, the way a small kitchen labels
   itself: laminated cards, stencil numerals, dotted leaders, snipped corners.
   =========================================================================== */

/* -- reset: exactly two properties, exactly two selectors, zero specificity -- */
:where(*, ::after) {
  box-sizing: border-box;
  margin: 0;
}

/* --------------------------------------------------------------- variables */
:root {
  --sws-bg: #f8f5ec;
  --sws-ink: #262a35;
  --sws-cobalt: #2f58b8;
  --sws-caramel: #9a6134;
  --sws-surface: #fffef9;

  --sws-ink-80: rgba(38, 42, 53, .8);
  /* .6 of the ink over the warm stock lands at 3.9:1 against the page — under
     the 4.5:1 that the captions, field labels and ledger terms set at it need.
     Measured, not eyeballed: .7 puts the same grey at 5.1:1. */
  --sws-ink-60: rgba(38, 42, 53, .7);
  --sws-ink-28: rgba(38, 42, 53, .28);
  --sws-ink-14: rgba(38, 42, 53, .14);
  --sws-ink-07: rgba(38, 42, 53, .07);
  --sws-cob-40: rgba(47, 88, 184, .4);
  --sws-cob-18: rgba(47, 88, 184, .18);
  --sws-cob-08: rgba(47, 88, 184, .08);
  --sws-car-30: rgba(154, 97, 52, .3);
  --sws-paper: rgba(255, 254, 249, .92);

  /* halftone screen: pitch, dot radius and both inks are re-declared per station,
     so the one screen can print cobalt-on-chalk or cream-on-ink without a second rule */
  --sws-pitch: 9px;
  --sws-dotr: 1.1px;
  --sws-dota: .16;
  --sws-dot1: 47, 88, 184;
  --sws-dot2: 154, 97, 52;

  --sws-chalk: #dfe6f3;
  --sws-chalk-deep: #cdd8ee;

  --sws-gut: clamp(1rem, 4.6vw, 2.6rem);
  --sws-measure: 34rem;
  --sws-board: 68rem;
  --sws-rule: 1px solid var(--sws-ink-28);
  --sws-hair: 1px solid var(--sws-ink-14);
  --sws-snip: 15px;
  --sws-ease: cubic-bezier(.22, .68, .28, 1);
}

/* ------------------------------------------------------------ halftone mix */
.sws-screen {
  background-image:
    radial-gradient(circle at 50% 50%,
      rgba(var(--sws-dot1), var(--sws-dota)) var(--sws-dotr),
      rgba(var(--sws-dot1), 0) calc(var(--sws-dotr) + .4px)),
    radial-gradient(circle at 50% 50%,
      rgba(var(--sws-dot2), calc(var(--sws-dota) * .55)) var(--sws-dotr),
      rgba(var(--sws-dot2), 0) calc(var(--sws-dotr) + .4px));
  background-size: var(--sws-pitch) var(--sws-pitch), var(--sws-pitch) var(--sws-pitch);
  background-position: 0 0, calc(var(--sws-pitch) / 2) calc(var(--sws-pitch) / 2);
}

/* ------------------------------------------------------------------- page */
html {
  scroll-snap-type: y proximity;
  scroll-padding-top: 0;
  scroll-behavior: smooth;
  background: var(--sws-bg);
}

body {
  overflow-x: clip;
  background:
    linear-gradient(180deg, rgba(47, 88, 184, .05), rgba(47, 88, 184, 0) 38vh),
    var(--sws-bg);
  color: var(--sws-ink);
  font: 400 1rem/1.62 "Rethink Sans", "Segoe UI", system-ui, sans-serif;
  font-synthesis-weight: none;
  letter-spacing: .005em;
  -webkit-text-size-adjust: 100%;
}

::selection {
  background: var(--sws-cob-40);
  color: var(--sws-ink);
}

/* --------------------------------------------------------------- skip link */
.sws-skip {
  position: absolute;
  left: .5rem;
  top: -4.5rem;
  z-index: 9;
  padding: .55rem .9rem;
  background: var(--sws-cobalt);
  color: var(--sws-surface);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 180ms var(--sws-ease);
}

.sws-skip:focus-visible {
  top: .5rem;
  outline: 2px solid var(--sws-ink);
  outline-offset: 2px;
}

/* ------------------------------------------------------- chapters / stations */
.sws-track {
  display: block;
}

.sws-chapter {
  position: relative;
  display: grid;
  /* a station holds its own height so the page can snap to one at a time; the
     content sits in the middle of it rather than stranded at the top edge.
     `safe` hands the alignment back to the start when a station outgrows the
     viewport, so nothing is ever scrolled off the top of the screen. */
  align-content: safe center;
  /* a station is screen-scale so the snap has something to land on, but not a
     full viewport: at 100svh every chapter carried 200-350 px of slack that
     read as emptiness rather than as air around a figure. */
  min-height: 86vh;
  min-height: 86svh;
  padding: clamp(2rem, 6vw, 3.6rem) var(--sws-gut) clamp(2.2rem, 6.4vw, 4rem);
  border-bottom: var(--sws-rule);
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  transition: background-color 420ms var(--sws-ease), box-shadow 300ms var(--sws-ease);
}

.sws-chapter__inner {
  display: grid;
  gap: clamp(1.4rem, 4vw, 2.3rem);
  max-width: var(--sws-board);
  margin-inline: auto;
}

/* a station lands with a cobalt edge when it is the anchor target */
.sws-chapter:target {
  background-color: rgba(47, 88, 184, .045);
  box-shadow: inset 5px 0 0 var(--sws-cobalt);
}

.sws-chapter:target .sws-head {
  border-left-color: var(--sws-caramel);
}

#station-bake  { --sws-pitch: 13px; --sws-dotr: 1.8px; --sws-dota: .15; }
#station-pour  { --sws-pitch: 7px;  --sws-dotr: .95px; --sws-dota: .2; }
#station-pass  { --sws-pitch: 10px; --sws-dotr: 1.3px; --sws-dota: .13; }
#tool-yield    { --sws-pitch: 16px; --sws-dotr: 2.1px; --sws-dota: .09; }
#tool-allergen { --sws-pitch: 5px;  --sws-dotr: .8px;  --sws-dota: .12; }
#register      { --sws-pitch: 11px; --sws-dotr: 1.5px; --sws-dota: .11; }
#dateline .sws-bandbody { --sws-pitch: 8px; --sws-dotr: 1.2px; --sws-dota: .22; }

/* ----------------------------------------------------------- boxed dateline */
.sws-dateline {
  position: relative;
  padding: .85rem 1rem .9rem;
  border: 2px solid var(--sws-ink);
  box-shadow: 0 0 0 1px var(--sws-bg) inset, 0 0 0 4px var(--sws-ink-07);
  background: var(--sws-paper);
}

.sws-dateline__row {
  display: flex;
  flex-wrap: wrap;
  gap: .18rem .62rem;
  font-size: .68rem;
  line-height: 1.9;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--sws-ink-80);
}

/* the separator rides on its own span: a leading space inside the content
   string is a break opportunity, and at 390 px it dropped a lone middot onto
   a line of its own between two facts. */
.sws-dateline__row > span:not(:last-child)::after {
  content: "·";
  color: var(--sws-cobalt);
  padding-left: .5em;
}

.sws-dateline__tab {
  position: absolute;
  right: -2px;
  top: -2px;
  padding: .2rem .5rem .22rem;
  background: var(--sws-cobalt);
  color: var(--sws-surface);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- display type */
.sws-title {
  max-width: 24ch;
  font: 400 clamp(2.1rem, 9.4vw, 4.1rem)/.98 "Gloock", "Iowan Old Style", Georgia, serif;
  letter-spacing: -.012em;
  text-transform: uppercase;
  text-wrap: balance;
}

.sws-title em {
  display: block;
  color: var(--sws-cobalt);
  font-style: normal;
}

.sws-stand {
  max-width: var(--sws-measure);
  font-size: clamp(1.02rem, 2.6vw, 1.16rem);
  line-height: 1.58;
}

.sws-stand strong {
  font-weight: 700;
  box-shadow: inset 0 -.45em 0 var(--sws-cob-18);
}

/* ------------------------------------------- heads: caps inset into a plate */
.sws-head {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding: .62rem .9rem .68rem;
  border-left: 5px solid var(--sws-cobalt);
  background: linear-gradient(180deg, var(--sws-ink-07), rgba(38, 42, 53, 0) 70%), var(--sws-surface);
  box-shadow:
    inset 0 2px 0 var(--sws-ink-14),
    inset 0 -1px 0 rgba(255, 255, 255, .95),
    inset -1px 0 0 var(--sws-ink-07);
  clip-path: polygon(0 0, calc(100% - var(--sws-snip)) 0, 100% var(--sws-snip), 100% 100%, 0 100%);
  font: 400 clamp(1.18rem, 4.4vw, 1.62rem)/1.12 "Gloock", Georgia, serif;
  letter-spacing: .035em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .92);
  transition: border-left-color 260ms var(--sws-ease), box-shadow 260ms var(--sws-ease);
}

.sws-head__num {
  flex: none;
  color: transparent;
  font-size: 1.5em;
  line-height: .8;
  letter-spacing: 0;
  -webkit-text-stroke: 1.4px var(--sws-cobalt);
  text-shadow: none;
}

.sws-head--plain {
  border-left-color: var(--sws-caramel);
}

.sws-sub {
  font: 400 1.04rem/1.3 "Gloock", Georgia, serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--sws-caramel);
}

/* -------------------------------------------------------------------- prose */
.sws-prose {
  max-width: var(--sws-measure);
  display: grid;
  gap: .85rem;
}

.sws-prose p {
  text-wrap: pretty;
}

.sws-prose b {
  font-weight: 700;
  letter-spacing: .01em;
}

.sws-prose a,
.sws-foot a,
.sws-note a {
  color: var(--sws-cobalt);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color 170ms linear, text-decoration-color 170ms linear;
}

.sws-prose a:hover,
.sws-foot a:hover {
  color: var(--sws-caramel);
}

:focus-visible {
  outline: 2px solid var(--sws-cobalt);
  outline-offset: 2px;
}

/* ------------------------------------------------- inline contents (nav) */
.sws-contents {
  border-top: 2px solid var(--sws-ink);
  border-bottom: 2px solid var(--sws-ink);
  padding-block: .55rem .7rem;
}

.sws-contents__cap {
  display: block;
  padding-bottom: .4rem;
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sws-ink-60);
}

.sws-contents__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: .1rem;
  counter-reset: sws-toc;
}

.sws-contents__item {
  counter-increment: sws-toc;
  border-bottom: var(--sws-hair);
}

.sws-contents__item:last-child {
  border-bottom: 0;
}

.sws-contents__link {
  display: grid;
  grid-template-columns: 2.2rem 1fr auto;
  align-items: end;
  gap: 0 .3rem;
  padding: .46rem .2rem .44rem 0;
  color: inherit;
  text-decoration: none;
  transition: background-color 160ms linear, padding-left 160ms var(--sws-ease), color 160ms linear;
}

.sws-contents__link::before {
  content: counter(sws-toc, decimal-leading-zero);
  color: var(--sws-cobalt);
  font-size: .76rem;
  letter-spacing: .08em;
}

.sws-contents__link:hover,
.sws-contents__link:focus-visible {
  background-color: var(--sws-cob-08);
  padding-left: .35rem;
}

.sws-contents__link[aria-current="page"] {
  color: var(--sws-caramel);
}

.sws-contents__link[aria-current="page"]::before {
  -webkit-text-stroke: .8px var(--sws-caramel);
  color: transparent;
}

.sws-contents__name {
  font-size: .95rem;
  /* dotted leader, drawn with the same screen as the page */
  background-image: radial-gradient(circle, var(--sws-ink-28) .9px, rgba(38, 42, 53, 0) 1px);
  background-position: 0 100%;
  background-size: 6px 6px;
  background-repeat: repeat-x;
}

.sws-contents__name > span {
  background: var(--sws-bg);
  padding-right: .35rem;
}

.sws-contents__gloss {
  grid-column: 2 / -1;
  padding-top: .05rem;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--sws-ink-60);
}

.sws-contents__where {
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sws-caramel);
  white-space: nowrap;
}

/* ------------------------------------------------------------- spec sheets */
.sws-sheet {
  --sws-sheet-key: var(--sws-cobalt);
  position: relative;
  background: var(--sws-surface);
  border: var(--sws-rule);
  box-shadow: 3px 3px 0 var(--sws-ink-07);
  transition: box-shadow 220ms var(--sws-ease), transform 220ms var(--sws-ease);
}

.sws-sheet:hover {
  box-shadow: 5px 5px 0 var(--sws-cob-18);
  transform: translate(-1px, -1px);
}

.sws-sheet--caramel {
  --sws-sheet-key: var(--sws-caramel);
}

.sws-sheet__cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .42rem .7rem .44rem;
  border-bottom: var(--sws-rule);
  background: var(--sws-sheet-key);
  color: var(--sws-surface);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.sws-sheet__no {
  font-family: "Gloock", Georgia, serif;
  font-size: 1.1rem;
  letter-spacing: .04em;
  opacity: .85;
}

.sws-sheet__rows {
  display: grid;
  padding: .3rem .7rem .55rem;
}

.sws-sheet__rows > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 .6rem;
  padding: .42rem 0 .46rem;
  border-bottom: var(--sws-hair);
}

.sws-sheet__rows > div:last-child {
  border-bottom: 0;
}

.sws-sheet__rows dt {
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--sws-ink-60);
}

.sws-sheet__rows dd {
  font-size: .93rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.sws-sheet__rows dd b {
  font-weight: 700;
  color: var(--sws-cobalt);
}

.sws-sheet__foot {
  padding: .5rem .7rem .6rem;
  border-top: 2px solid var(--sws-ink);
  font-size: .82rem;
}

/* ----------------------------------------------- "leaves in" container strip */
.sws-leaves {
  display: grid;
  gap: .22rem;
  padding: .6rem .8rem .7rem;
  background-color: var(--sws-ink);
  color: var(--sws-bg);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 72%, rgba(0, 0, 0, .86));
}

.sws-leaves__cap {
  font-size: .64rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(248, 245, 236, .66);
}

.sws-leaves__what {
  font: 400 1.02rem/1.35 "Gloock", Georgia, serif;
  letter-spacing: .02em;
}

/* ------------------------------------------------------------- the pour svg */
.sws-pour {
  display: grid;
  gap: .9rem;
  justify-items: start;
}

.sws-cup {
  display: block;
  width: min(100%, 15rem);
  height: auto;
  overflow: visible;
}

.sws-cup__body,
.sws-cup__seam {
  fill: none;
  stroke: var(--sws-ink);
  stroke-width: 2.2;
  stroke-linejoin: round;
}

.sws-cup__seam {
  stroke-width: 1.2;
  stroke-dasharray: 3 4;
  opacity: .5;
}

.sws-cup__wall {
  fill: var(--sws-surface);
}

.sws-pour__rise {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: translateY(0);
  animation: sws-rise 2100ms var(--sws-ease) 240ms both;
}

.sws-pour__liquid {
  fill: var(--sws-caramel);
}

.sws-pour__grain {
  fill: url(#sws-screen);
}

.sws-pour__surface {
  fill: var(--sws-caramel);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: sws-slosh 1500ms var(--sws-ease) 1900ms both;
}

.sws-pour__stream {
  fill: var(--sws-caramel);
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: sws-stream 2600ms linear 60ms both;
}

.sws-pour__foam {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sws-foam 1400ms var(--sws-ease) 2250ms both;
}

.sws-pour__foam ellipse {
  fill: var(--sws-surface);
  stroke: var(--sws-car-30);
  stroke-width: 1;
}

.sws-pour__crema {
  fill: var(--sws-surface);
  opacity: 0;
  animation: sws-crema 700ms linear 3200ms both;
}

.sws-pour__lid {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sws-lid 900ms cubic-bezier(.34, 1.42, .64, 1) 3450ms both;
}

.sws-pour__lid path {
  fill: var(--sws-surface);
  stroke: var(--sws-ink);
  stroke-width: 2.2;
  stroke-linejoin: round;
}

.sws-pour__lid .sws-pour__lid-key {
  fill: var(--sws-cobalt);
  stroke: none;
}

@keyframes sws-stream {
  0%        { transform: scaleY(0); opacity: 1; }
  10%       { transform: scaleY(1); opacity: 1; }
  78%       { transform: scaleY(1); opacity: 1; }
  88%       { transform: scaleY(.12) translateY(-4px); opacity: .8; }
  100%      { transform: scaleY(0); opacity: 0; }
}

@keyframes sws-rise {
  0%   { transform: translateY(152px); }
  100% { transform: translateY(0); }
}

@keyframes sws-slosh {
  0%   { transform: rotate(0deg) translateY(0); }
  14%  { transform: rotate(5.5deg) translateY(-2px); }
  38%  { transform: rotate(-3.6deg) translateY(1px); }
  60%  { transform: rotate(2deg) translateY(0); }
  80%  { transform: rotate(-.8deg); }
  100% { transform: rotate(0deg); }
}

@keyframes sws-foam {
  0%   { transform: translateY(14px) scaleY(.1); opacity: 0; }
  35%  { transform: translateY(-3px) scaleY(1.18); opacity: 1; }
  70%  { transform: translateY(0) scaleY(.92); opacity: 1; }
  100% { transform: translateY(1px) scaleY(.34); opacity: 1; }
}

@keyframes sws-crema {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes sws-lid {
  0%   { transform: translateY(-74px); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ------------------------------------------------------------ controls */
.sws-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .52rem 1rem .56rem;
  border: 2px solid var(--sws-ink);
  background: var(--sws-surface);
  color: var(--sws-ink);
  font: 400 .74rem/1 "Rethink Sans", system-ui, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--sws-ink);
  transition: box-shadow 130ms var(--sws-ease), transform 130ms var(--sws-ease),
              background-color 130ms linear;
}

.sws-btn:hover {
  background-color: var(--sws-cob-08);
}

.sws-btn:focus-visible {
  outline: 2px solid var(--sws-cobalt);
  outline-offset: 3px;
}

.sws-btn:active {
  box-shadow: 0 0 0 var(--sws-ink);
  transform: translate(3px, 3px);
}

.sws-btn[hidden] {
  display: none;
}

.sws-btn__dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--sws-cobalt);
}

/* ------------------------------------------------------------------- tools */
.sws-tool {
  display: grid;
  gap: 1.1rem;
  padding: 0;
}

.sws-field {
  display: grid;
  gap: .28rem;
}

.sws-field > span {
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--sws-ink-80);
}

.sws-field small {
  display: block;
  font-size: .76rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sws-ink-60);
}

.sws-field input[type="text"],
.sws-field input[type="number"] {
  width: 100%;
  padding: .46rem .55rem;
  border: 1px solid var(--sws-ink-28);
  border-bottom-width: 2px;
  background: var(--sws-bg);
  color: var(--sws-ink);
  font: 400 1.04rem/1.3 "Rethink Sans", system-ui, sans-serif;
  transition: border-color 150ms linear, background-color 150ms linear, box-shadow 150ms linear;
}

.sws-field input:focus-visible {
  border-color: var(--sws-cobalt);
  background-color: var(--sws-surface);
  box-shadow: inset 0 -2px 0 var(--sws-cobalt);
  outline: 2px solid var(--sws-cobalt);
  outline-offset: 1px;
}

.sws-field input:invalid {
  border-bottom-color: var(--sws-caramel);
}

/* ------------------------------------------------------- allergen chip grid */
.sws-comp {
  border: var(--sws-rule);
  background: var(--sws-surface);
  padding: .6rem .7rem .75rem;
  transition: border-color 180ms linear;
}

.sws-comp:focus-within {
  border-color: var(--sws-cobalt);
}

.sws-comp > legend {
  padding-inline: .3rem;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sws-cobalt);
}

.sws-comp__name {
  display: grid;
  gap: .25rem;
  padding-bottom: .55rem;
}

.sws-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}

.sws-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .24rem .52rem .28rem .4rem;
  border: 1px solid var(--sws-ink-28);
  background: var(--sws-bg);
  font-size: .76rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 140ms linear, border-color 140ms linear, color 140ms linear;
}

.sws-chip:hover {
  border-color: var(--sws-cobalt);
}

.sws-chip input {
  width: .92rem;
  height: .92rem;
  accent-color: var(--sws-cobalt);
  margin: 0;
}

.sws-chip:has(input:checked) {
  background-color: var(--sws-cobalt);
  border-color: var(--sws-cobalt);
  color: var(--sws-surface);
}

.sws-chip:has(input:focus-visible) {
  outline: 2px solid var(--sws-caramel);
  outline-offset: 1px;
}

/* ------------------------------------------------------------- tool output */
.sws-out {
  border: 2px solid var(--sws-ink);
  background: var(--sws-surface);
}

.sws-out__cap {
  padding: .4rem .7rem .44rem;
  background: var(--sws-ink);
  color: var(--sws-bg);
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.sws-out__body {
  display: grid;
  gap: .5rem;
  padding: .7rem .7rem .85rem;
}

.sws-out__line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem;
  align-items: baseline;
  padding-bottom: .34rem;
  border-bottom: var(--sws-hair);
  font-size: .9rem;
}

.sws-out__line > span:first-child {
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sws-ink-60);
}

.sws-out__val {
  font: 400 1.22rem/1 "Gloock", Georgia, serif;
  letter-spacing: .01em;
}

.sws-out__val--key {
  color: var(--sws-cobalt);
}

.sws-sum {
  padding: .5rem .6rem .55rem;
  background: var(--sws-cob-08);
  border-left: 3px solid var(--sws-cobalt);
  font-size: .86rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.sws-sum b {
  font-weight: 700;
}

.sws-decl {
  font-size: .95rem;
  line-height: 1.6;
}

.sws-decl strong {
  font-weight: 700;
}

.sws-decl ul {
  margin: .45rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .18rem;
  font-size: .87rem;
}

.sws-decl li em {
  font-style: normal;
  color: var(--sws-caramel);
}

.sws-note {
  padding: .45rem .6rem .5rem;
  border-top: var(--sws-hair);
  font-size: .78rem;
  line-height: 1.55;
  color: var(--sws-ink-60);
}

.sws-note--guide {
  border: 1px dashed var(--sws-car-30);
  border-top: 1px dashed var(--sws-car-30);
  background: rgba(154, 97, 52, .05);
  color: var(--sws-ink-80);
}

/* ---------------------------------------------------------------- drawings */
.sws-draw {
  display: block;
  width: 100%;
  height: auto;
  background: var(--sws-surface);
  border: var(--sws-rule);
}

.sws-draw text {
  font: 400 7px/1 "Rethink Sans", system-ui, sans-serif;
  letter-spacing: .12em;
  fill: var(--sws-ink);
  text-transform: uppercase;
}

.sws-draw .sws-draw__num {
  font-family: "Gloock", Georgia, serif;
  font-size: 13px;
  letter-spacing: 0;
  fill: var(--sws-cobalt);
}

.sws-draw .sws-draw__line {
  fill: none;
  stroke: var(--sws-ink);
  stroke-width: 1.4;
}

.sws-draw .sws-draw__thin {
  fill: none;
  stroke: var(--sws-ink-28);
  stroke-width: .8;
}

.sws-draw .sws-draw__dash {
  fill: none;
  stroke: var(--sws-cobalt);
  stroke-width: 1.2;
  stroke-dasharray: 5 3;
}

.sws-draw .sws-draw__fill {
  fill: var(--sws-cob-18);
  stroke: none;
}

.sws-draw .sws-draw__warm {
  fill: rgba(154, 97, 52, .22);
  stroke: none;
}

.sws-figure {
  display: grid;
  gap: .4rem;
}

.sws-figure figcaption {
  font-size: .76rem;
  line-height: 1.5;
  color: var(--sws-ink-60);
}

/* ----------------------------------------------------- sub-page furniture */
.sws-sheetpage {
  display: grid;
  gap: clamp(1.5rem, 5vw, 2.4rem);
  max-width: var(--sws-board);
  margin-inline: auto;
  padding: clamp(1.6rem, 6vw, 3rem) var(--sws-gut) clamp(2.2rem, 7vw, 3.6rem);
}

.sws-sheetpage > section {
  display: grid;
  gap: clamp(.9rem, 3vw, 1.4rem);
  scroll-snap-align: none;
}

.sws-stack {
  display: grid;
  gap: .9rem;
}

.sws-list {
  display: grid;
  gap: .42rem;
  margin: 0;
  padding-left: 1.15rem;
  max-width: var(--sws-measure);
  font-size: .95rem;
}

.sws-list--plain {
  list-style: none;
  padding-left: 0;
}

.sws-list--plain > li {
  padding-left: 1.5rem;
  position: relative;
}

.sws-list--plain > li::before {
  content: "";
  position: absolute;
  left: .2rem;
  top: .62em;
  width: .45rem;
  height: .45rem;
  background: var(--sws-cobalt);
}

.sws-list b {
  font-weight: 700;
}

.sws-tablewrap {
  overflow-x: auto;
  border: var(--sws-rule);
  background: var(--sws-surface);
}

.sws-table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: .86rem;
}

.sws-table caption {
  padding: .45rem .7rem .5rem;
  background: var(--sws-ink);
  color: var(--sws-bg);
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: left;
}

.sws-table th,
.sws-table td {
  padding: .45rem .7rem .48rem;
  border-bottom: var(--sws-hair);
  text-align: left;
  vertical-align: top;
}

.sws-table th {
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sws-ink-60);
  font-weight: 400;
}

.sws-table tbody tr {
  transition: background-color 150ms linear;
}

.sws-table tbody tr:hover {
  background-color: var(--sws-cob-08);
}

.sws-table td b {
  font-weight: 700;
  color: var(--sws-caramel);
}

/* ------------------------------------------------------------------ footer */
.sws-foot {
  padding: clamp(1.8rem, 6vw, 3rem) var(--sws-gut) clamp(2.2rem, 7vw, 3.2rem);
  border-top: 4px double var(--sws-ink);
  background-color: var(--sws-bg);
  scroll-snap-align: start;
}

.sws-foot__inner {
  display: grid;
  gap: clamp(1.3rem, 4vw, 2rem);
  max-width: var(--sws-board);
  margin-inline: auto;
}

.sws-foot__reg {
  display: grid;
  gap: .3rem;
  font-size: .86rem;
  line-height: 1.5;
}

.sws-foot__name {
  font: 400 1.1rem/1.2 "Gloock", Georgia, serif;
  letter-spacing: .03em;
}

.sws-foot__addr {
  display: grid;
  gap: 0;
  font-style: normal;
  color: var(--sws-ink-80);
}

.sws-foot__meta {
  padding-top: .35rem;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--sws-ink-60);
}

.sws-foot__meta span {
  display: block;
}

/* ------------------------------------------------------- wider boards */
@media (min-width: 46rem) {
  .sws-sheet__rows > div {
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
    align-items: baseline;
  }

  .sws-contents__list {
    grid-template-columns: 1fr 1fr;
    gap: .1rem 1.6rem;
  }

  .sws-foot__inner--split {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  }

  .sws-dateline__row {
    font-size: .7rem;
  }
}

@media (min-width: 64rem) {
  .sws-sheet__rows > div {
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  }

  .sws-chapter {
    padding-inline: clamp(2.6rem, 6vw, 5rem);
  }

  .sws-title {
    font-size: clamp(3rem, 5.4vw, 4.4rem);
  }

  .sws-comps {
    grid-template-columns: 1fr 1fr;
  }
}

.sws-comps {
  display: grid;
  gap: .7rem;
}

/* --------------------------------------------- print: the board as a docket */
@media print {
  html { scroll-snap-type: none; }
  .sws-chapter { min-height: 0; border-bottom: 1px solid #262a35; page-break-inside: avoid; }
  .sws-btn, .sws-skip { display: none; }
  body { background: #fffef9; }
}

/* ----------------------------------------------------------- reduced motion
   The pour lands finished: cup full, surface flat, foam levelled, lid seated.
   Nothing merely runs faster, and nothing is left mid-stroke.                */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  :where(*, ::after) {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .sws-pour__rise {
    animation: none !important;
    transform: translateY(0) !important;
  }

  .sws-pour__surface {
    animation: none !important;
    transform: rotate(0deg) !important;
  }

  .sws-pour__stream {
    animation: none !important;
    transform: scaleY(0) !important;
    opacity: 0 !important;
  }

  .sws-pour__foam {
    animation: none !important;
    transform: translateY(1px) scaleY(.34) !important;
    opacity: 1 !important;
  }

  .sws-pour__crema {
    animation: none !important;
    opacity: 1 !important;
  }

  .sws-pour__lid {
    animation: none !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
  }

  .sws-sheet:hover,
  .sws-card:hover {
    transform: none;
  }

  .sws-btn:active {
    transform: none;
  }
}

/* ------------------------------------------------------- forced colours */
@media (forced-colors: active) {
  .sws-sheet,
  .sws-out,
  .sws-comp,
  .sws-dateline {
    border: 1px solid CanvasText;
  }

  .sws-chip:has(input:checked) {
    forced-color-adjust: none;
    background-color: Highlight;
    color: HighlightText;
  }
}

/* --------------------------------------------- sheet pages (02 through 06)
   The snap track is the index's idea alone. A sheet page has no snap
   targets at all, so it scrolls the way a page of notes should.          */
.sws-foot--plain {
  scroll-snap-align: none;
}

.sws-dateline--slim {
  padding: .62rem .8rem .66rem;
  border-width: 1px;
  box-shadow: none;
}

.sws-dateline--slim .sws-dateline__row {
  font-size: .64rem;
  line-height: 1.8;
}

.sws-sheetpage .sws-title {
  font-size: clamp(1.9rem, 7.4vw, 3rem);
}

.sws-sheetpage > section + section {
  padding-top: clamp(.6rem, 2vw, 1rem);
  border-top: var(--sws-hair);
}

.sws-pair {
  display: grid;
  gap: .8rem;
}

@media (min-width: 46rem) {
  .sws-pair {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .sws-pair--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sws-callout {
  padding: .7rem .8rem .8rem;
  border-left: 5px solid var(--sws-caramel);
  background: rgba(154, 97, 52, .07);
  font-size: .95rem;
  line-height: 1.6;
  max-width: 44rem;
}

.sws-callout b {
  font-weight: 700;
}

.sws-ladder {
  display: grid;
  gap: .9rem;
}

@media (min-width: 46rem) {
  .sws-ladder {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    align-items: start;
  }
}

/* The ladder is a tall narrow drawing: at the width its column gets, 7px type
   downscales below reading size, so this one drawing sets its own. */
.sws-ladder .sws-draw text {
  font-size: 9px;
  letter-spacing: .07em;
}

/* ===========================================================================
   THE SEVEN FIGURES OF THE COUNTER SHEET
   One shape per station, and no shape twice. In reading order:
     01 dateline     full-bleed band   plate, chalk ground, contents, rail
     02 bake-off     wide figure       the deck run at full width, caption under
     03 pour         offset split      two plates on the narrow side, one hung
                                       over the gutter, the cup alongside
     04 the pass     pull quote        one rule set large, the body in columns
     05 yield        card grid         four counts, one fact per card
     06 allergens    dark inversion    cream on ink, the declaration a bright sheet
     07 register     ledger rows       ruled entry, an inset plate wrapped past
   =========================================================================== */

/* ---------------------------------------------------- 01 · full-bleed band */
.sws-chapter--band {
  align-content: stretch;
  grid-template-rows: auto 1fr auto;
  padding: 0;
  border-bottom: 0;
  background-color: var(--sws-chalk);
}

.sws-plateband {
  position: relative;
  border-bottom: 2px solid var(--sws-ink);
  background: var(--sws-ink);
}

.sws-plateband img {
  display: block;
  width: 100%;
  height: clamp(188px, 35svh, 400px);
  object-fit: cover;
  object-position: 50% 56%;
}

/* the chalk plate the headline is printed on, screened over at a tight pitch */
.sws-bandbody {
  padding: clamp(1.5rem, 4.6vw, 2.6rem) var(--sws-gut) clamp(1.6rem, 5vw, 2.8rem);
  background-color: var(--sws-chalk);
  box-shadow: inset 0 14px 20px -18px rgba(38, 42, 53, .55);
}

.sws-bandbody__inner {
  display: grid;
  gap: clamp(1rem, 3vw, 1.6rem);
  max-width: var(--sws-board);
  margin-inline: auto;
}

/* the dateline is a label stuck across the join, half on the plate, half on the
   chalk. It keeps the full column width: shrink-to-fit let the flex row of
   registered facts run straight out of its own box at 1440. */
.sws-chapter--band .sws-dateline {
  margin-top: calc(clamp(1.5rem, 4.6vw, 2.6rem) * -1 - 1.5rem);
  background: var(--sws-surface);
  box-shadow: 0 0 0 1px var(--sws-surface) inset, 4px 4px 0 rgba(38, 42, 53, .22);
}

@media (min-width: 46rem) {
  /* one line at this width, so it must stop short of the SIC tab */
  .sws-chapter--band .sws-dateline__row {
    padding-right: 5.5rem;
  }
}

.sws-chapter--band .sws-contents__name > span {
  background: var(--sws-chalk);
}

.sws-bandfoot {
  display: grid;
  gap: .75rem;
  align-content: start;
}

.sws-bandnote {
  font-size: .85rem;
  line-height: 1.6;
  color: var(--sws-ink-80);
}

.sws-bandnote a {
  color: var(--sws-cobalt);
  text-underline-offset: .18em;
  transition: color 170ms linear;
}

.sws-bandnote a:hover {
  color: var(--sws-caramel);
}

/* the rail: service direction, drawn once, carrying no words */
.sws-rail {
  display: block;
  width: 100%;
  height: auto;
  border-top: 2px solid var(--sws-ink);
  background: var(--sws-chalk-deep);
}

.sws-rail__edge {
  fill: none;
  stroke: var(--sws-ink);
  stroke-width: 2.4;
}

.sws-rail__way {
  fill: none;
  stroke: var(--sws-cobalt);
  stroke-width: 1.6;
  stroke-dasharray: 9 7;
}

.sws-rail__plinth rect {
  fill: rgba(47, 88, 184, .16);
  stroke: var(--sws-cobalt);
  stroke-width: 1.2;
}

.sws-rail__num text {
  font: 400 30px/1 "Gloock", Georgia, serif;
  fill: none;
  stroke: var(--sws-caramel);
  stroke-width: 1.1;
}

.sws-rail__chev path {
  fill: none;
  stroke: var(--sws-ink-28);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sws-rail__tick path {
  fill: none;
  stroke: var(--sws-ink-28);
  stroke-width: 1.4;
}

@media (min-width: 64rem) {
  .sws-bandbody__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    column-gap: clamp(1.8rem, 4vw, 3.2rem);
    align-items: start;
  }

  .sws-chapter--band .sws-dateline,
  .sws-chapter--band .sws-title {
    grid-column: 1 / -1;
  }

  .sws-chapter--band .sws-stand,
  .sws-bandnote {
    grid-column: 1;
    align-self: start;
  }

  .sws-bandfoot {
    grid-column: 2;
    grid-row: 3 / span 2;
  }

  /* the contents are already in a column here; splitting them again left six
     two-line entries in 250 px each */
  .sws-bandfoot .sws-contents__list {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------ 02 · wide figure */
.sws-widefig {
  display: grid;
  margin: 0;
}

/* the head plate is a tab stuck on the figure rather than a line above it */
.sws-head--onfig {
  justify-self: start;
  position: relative;
  z-index: 2;
  margin-bottom: -1px;
  border-bottom: var(--sws-rule);
}

/* Below about 40rem the run chart is wider than its column and the frame
   scrolls. The two radial layers are pinned to the frame while the two flat
   ones scroll with the drawing, so a shadow shows on whichever edge still has
   chart behind it — otherwise the cut-off reads as a broken image. */
.sws-widefig__frame {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: var(--sws-rule);
  box-shadow: 4px 4px 0 var(--sws-ink-07);
  background:
    linear-gradient(to right, var(--sws-surface) 40%, rgba(255, 254, 249, 0)) left center / 2.6rem 100% no-repeat local,
    linear-gradient(to left, var(--sws-surface) 40%, rgba(255, 254, 249, 0)) right center / 2.6rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(38, 42, 53, .2), rgba(38, 42, 53, 0)) left center / .95rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(38, 42, 53, .2), rgba(38, 42, 53, 0)) right center / .95rem 100% no-repeat scroll,
    var(--sws-surface);
}

.sws-run {
  min-width: 40rem;
  border: 0;
  background: transparent;
}

.sws-run text {
  font-size: 9px;
  letter-spacing: .1em;
}

.sws-run .sws-run__tag {
  fill: var(--sws-caramel);
  letter-spacing: .14em;
}

.sws-run .sws-run__axis text,
.sws-run .sws-run__side {
  fill: var(--sws-ink-60);
}

.sws-run .sws-run__stage text {
  fill: var(--sws-ink-80);
}

.sws-run__trace {
  fill: none;
  stroke: var(--sws-cobalt);
  stroke-width: 2.6;
  stroke-linecap: round;
}

.sws-run__guide {
  fill: none;
  stroke: var(--sws-ink-28);
  stroke-width: .8;
  stroke-dasharray: 4 4;
}

.sws-run__window {
  fill: rgba(154, 97, 52, .09);
  stroke: none;
}

.sws-run__stages {
  fill: var(--sws-ink-07);
  stroke: var(--sws-ink-28);
  stroke-width: .8;
}

.sws-run__hold,
.sws-run__dim,
.sws-run__needle {
  fill: none;
  stroke: var(--sws-caramel);
  stroke-width: 1.3;
}

.sws-run__dot {
  fill: var(--sws-cobalt);
  stroke: var(--sws-surface);
  stroke-width: 1.6;
}

.sws-widefig__cap {
  padding: .7rem .85rem .9rem;
  border: var(--sws-rule);
  border-top: 0;
  border-left: 5px solid var(--sws-caramel);
  background: var(--sws-surface);
}

.sws-widefig__lead {
  padding-bottom: .55rem;
  margin-bottom: .6rem;
  border-bottom: var(--sws-hair);
  font-size: .72rem;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sws-caramel);
}

.sws-widefig__cols {
  display: grid;
  gap: .8rem;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--sws-ink-80);
}

.sws-widefig__cols b {
  font-weight: 700;
  color: var(--sws-ink);
}

.sws-leaves--wide {
  margin-top: .9rem;
}

@media (min-width: 46rem) {
  .sws-widefig__cols {
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
  }

  .sws-leaves--wide {
    display: flex;
    align-items: baseline;
    gap: 1.2rem;
  }

  .sws-leaves--wide .sws-leaves__cap {
    flex: none;
  }
}

/* ----------------------------------------------------- 03 · offset split */
.sws-offset {
  display: grid;
  gap: 1.3rem;
}

.sws-plates {
  display: grid;
  gap: .9rem;
  margin: 0;
}

.sws-plates img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--sws-ink-28);
  background: var(--sws-surface);
  box-shadow: 5px 5px 0 var(--sws-ink-07);
}

.sws-offset__body {
  display: grid;
  gap: 1.05rem;
  align-content: start;
}

.sws-offset__split {
  display: grid;
  gap: 1.1rem;
  align-items: start;
}

/* the run list is three ruled lines, not another boxed card */
.sws-runlist {
  display: grid;
  border-top: 2px solid var(--sws-ink);
}

.sws-runlist > div {
  display: grid;
  gap: 0 .9rem;
  padding: .46rem .55rem .5rem;
  border-bottom: var(--sws-hair);
  border-left: 3px solid var(--sws-car-30);
}

.sws-runlist > div:last-child {
  border-bottom: 0;
}

.sws-runlist dt {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sws-caramel);
}

.sws-runlist dd {
  font-size: .91rem;
  line-height: 1.5;
}

.sws-runlist dd b {
  font-weight: 700;
  color: var(--sws-cobalt);
}

@media (min-width: 40rem) {
  .sws-runlist > div {
    grid-template-columns: minmax(0, 5.2rem) minmax(0, 1fr);
    align-items: baseline;
  }
}

@media (min-width: 58rem) {
  .sws-offset {
    grid-template-columns: minmax(0, .64fr) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3.4vw, 2.7rem);
    align-items: start;
  }

  /* the gutter is paid for here: the body keeps a left margin wide enough for
     the second plate to hang into it without ever reaching the text */
  .sws-offset__body {
    padding-left: clamp(1rem, 2.6vw, 2rem);
  }

  .sws-plates {
    padding-top: .6rem;
  }

  /* `.sws-plates img` is (0,1,1) and would otherwise hold this plate at 100%:
     measured at 1440, the overhang silently never happened. */
  .sws-plates .sws-plates__b {
    width: 113%;
    margin-left: 4%;
    margin-top: .2rem;
    position: relative;
    z-index: 2;
    border-color: var(--sws-ink);
    box-shadow: -6px 7px 0 var(--sws-cob-18);
  }

  /* the cup stands the height of the station and the two text blocks fill the
     column beside it, so the prose does not leave a hole under itself */
  .sws-offset__split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 12.4rem);
    column-gap: 1.3rem;
    row-gap: 1.2rem;
  }

  .sws-offset__split > .sws-prose {
    grid-area: 1 / 1 / 2 / 2;
  }

  .sws-offset__split > .sws-pour {
    grid-area: 1 / 2 / 3 / 3;
    justify-items: center;
    align-content: start;
  }

  .sws-offset__split > .sws-runlist {
    grid-area: 2 / 1 / 3 / 2;
    align-self: start;
  }
}

/* ------------------------------------------------------- 04 · pull quote */
.sws-passsec {
  gap: clamp(1rem, 3vw, 1.5rem);
}

.sws-pull {
  position: relative;
  max-width: 54rem;
  padding: clamp(1.1rem, 3vw, 1.8rem) 0 clamp(1.1rem, 3.2vw, 1.9rem);
  border-top: 3px solid var(--sws-cobalt);
  border-bottom: 1px solid var(--sws-ink-28);
  font: 400 clamp(1.42rem, 4.3vw, 2.6rem)/1.16 "Gloock", "Iowan Old Style", Georgia, serif;
  letter-spacing: -.006em;
  text-wrap: balance;
}

.sws-pull::before {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  width: 5.2rem;
  height: 3px;
  background: var(--sws-caramel);
}

/* the only passage on the sheet set in columns: the rail is read standing up */
.sws-passbody {
  font-size: .95rem;
  line-height: 1.68;
  color: var(--sws-ink-80);
}

.sws-passbody p + p {
  margin-top: .8rem;
}

@media (min-width: 46rem) {
  .sws-passbody {
    columns: 2;
    column-gap: 2.4rem;
    column-rule: 1px solid var(--sws-ink-14);
  }

  .sws-passbody p {
    break-inside: avoid;
  }

  .sws-passbody p + p {
    margin-top: .85rem;
  }
}

@media (min-width: 64rem) {
  .sws-passbody {
    columns: 3;
    column-gap: 2.6rem;
  }

  .sws-passbody p + p {
    margin-top: 0;
  }
}

/* -------------------------------------------------------- 05 · card grid */
.sws-fieldrow {
  display: grid;
  gap: .85rem;
  padding: .85rem .85rem 1rem;
  border: var(--sws-rule);
  border-top: 5px solid var(--sws-caramel);
  background: var(--sws-surface);
}

.sws-cards {
  display: grid;
  gap: .7rem;
}

.sws-card {
  display: grid;
  align-content: start;
  gap: .32rem;
  padding: .85rem .8rem 1rem;
  border: 1px solid var(--sws-ink-28);
  border-top: 3px solid var(--sws-ink);
  background: var(--sws-surface);
  box-shadow: 3px 3px 0 var(--sws-ink-07);
  transition: box-shadow 200ms var(--sws-ease), transform 200ms var(--sws-ease);
}

.sws-card:hover {
  box-shadow: 5px 5px 0 var(--sws-cob-18);
  transform: translate(-1px, -1px);
}

.sws-card--key {
  border-top-color: var(--sws-cobalt);
  background: linear-gradient(180deg, var(--sws-cob-08), rgba(47, 88, 184, 0) 60%), var(--sws-surface);
}

.sws-card__val {
  font: 400 clamp(1.9rem, 5.4vw, 2.6rem)/1 "Gloock", Georgia, serif;
  letter-spacing: -.01em;
}

.sws-card--key .sws-card__val {
  color: var(--sws-cobalt);
}

.sws-card__cap {
  font-size: .66rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--sws-ink-60);
}

.sws-card__gloss {
  padding-top: .18rem;
  border-top: var(--sws-hair);
  font-size: .79rem;
  line-height: 1.45;
  color: var(--sws-ink-80);
}

@media (min-width: 34rem) {
  .sws-cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 46rem) {
  .sws-fieldrow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 1.3rem;
  }
}

@media (min-width: 58rem) {
  .sws-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------- 06 · dark inversion */
.sws-chapter--dark {
  --sws-dot1: 248, 245, 236;
  --sws-dot2: 201, 143, 82;
  --sws-dota: .14;
  --sws-panel: #2f3648;
  --sws-edge: rgba(248, 245, 236, .26);
  --sws-dim: rgba(248, 245, 236, .64);
  --sws-key: #a3bcef;
  background-color: var(--sws-ink);
  color: var(--sws-bg);
  border-bottom-color: var(--sws-edge);
}

.sws-chapter--dark .sws-head {
  border-left-color: var(--sws-key);
  background: linear-gradient(180deg, rgba(248, 245, 236, .1), rgba(248, 245, 236, 0) 70%), var(--sws-panel);
  box-shadow:
    inset 0 2px 0 rgba(248, 245, 236, .16),
    inset 0 -1px 0 rgba(38, 42, 53, .8),
    inset -1px 0 0 rgba(248, 245, 236, .08);
  color: var(--sws-bg);
  text-shadow: 0 1px 0 rgba(38, 42, 53, .9);
}

.sws-chapter--dark .sws-comp {
  border-color: var(--sws-edge);
  background: var(--sws-panel);
}

.sws-chapter--dark .sws-comp:focus-within {
  border-color: var(--sws-key);
}

.sws-chapter--dark .sws-comp > legend,
.sws-chapter--dark .sws-field > span {
  color: var(--sws-key);
}

.sws-chapter--dark .sws-field input[type="text"] {
  border-color: var(--sws-edge);
  background: rgba(38, 42, 53, .55);
  color: var(--sws-bg);
}

.sws-chapter--dark .sws-field input:focus-visible {
  border-color: var(--sws-key);
  background-color: rgba(38, 42, 53, .8);
  box-shadow: inset 0 -2px 0 var(--sws-key);
  outline-color: var(--sws-key);
}

.sws-chapter--dark .sws-chip {
  border-color: var(--sws-edge);
  background: rgba(38, 42, 53, .4);
  color: var(--sws-bg);
}

.sws-chapter--dark .sws-chip:hover {
  border-color: var(--sws-key);
}

.sws-chapter--dark .sws-chip input {
  accent-color: var(--sws-caramel);
}

.sws-chapter--dark .sws-chip:has(input:checked) {
  background-color: #c98f52;
  border-color: #c98f52;
  color: var(--sws-ink);
}

.sws-chapter--dark .sws-chip:has(input:focus-visible) {
  outline-color: var(--sws-key);
}

.sws-chapter--dark :focus-visible {
  outline-color: var(--sws-key);
}

/* the declaration inverts back: one bright sheet on the dark ground */
.sws-chapter--dark .sws-out {
  border-color: var(--sws-bg);
  color: var(--sws-ink);
  box-shadow: 6px 6px 0 rgba(38, 42, 53, .55);
}

/* ---------------------------------------------------- 07 · ledger rows */
.sws-regbody {
  max-width: 52rem;
  font-size: .97rem;
  line-height: 1.62;
}

.sws-regbody p + p {
  margin-top: .75rem;
}

.sws-inset {
  width: 100%;
  margin: 0 0 1rem;
}

.sws-inset img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--sws-ink-28);
  box-shadow: 5px 5px 0 var(--sws-car-30);
}

.sws-ledger {
  clear: both;
  border-top: 3px solid var(--sws-ink);
}

.sws-ledger__row {
  display: grid;
  gap: 0 1rem;
  padding: .48rem .6rem .52rem;
  margin-inline: -.6rem;
  border-bottom: var(--sws-hair);
  transition: background-color 160ms linear;
}

.sws-ledger__row:nth-child(odd) {
  background-color: rgba(47, 88, 184, .045);
}

.sws-ledger__row:hover {
  background-color: var(--sws-cob-08);
}

.sws-ledger dt {
  font-size: .67rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sws-ink-60);
}

.sws-ledger dd {
  font-size: .97rem;
  overflow-wrap: break-word;
}

@media (min-width: 34rem) {
  .sws-inset {
    float: inline-end;
    width: clamp(9.5rem, 34%, 17rem);
    margin: .2rem 0 .8rem 1.4rem;
  }
}

@media (min-width: 46rem) {
  .sws-ledger__row {
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    align-items: baseline;
  }
}