/* Impractical Instruments site styles (2026-09 redesign).
 *
 * Desktop (>= 900px) reproduces the Photoshop mockups in
 * SiteRedesign_2026_09/. The mockups are drawn at 2x on a 2200px canvas, so
 * every number here is the PSD pixel value divided by 2. Positions are
 * unitless numbers multiplied by --u, which is 1px at 1100px and wider and
 * shrinks with the viewport below that, so the layout scales as one piece.
 *
 * Mobile (< 900px) drops the absolute positions and stacks everything in
 * reading order.
 *
 * Type is Chainprinter (Adobe Fonts kit prp4ysc). Its lowercase letters are
 * drawn as capitals, so copy keeps its natural case in the HTML ("reuben"
 * stays lowercase) and still renders in caps.
 */

:root {
  --ink: #000;
  --rust: #bc4c26;
  --yellow: #fff200;
  --blue: #2076a3;
  --band: #719aad;
  --wash: rgba(117, 155, 174, 0.16);
  --font: "chainprinter", "Courier New", monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Photoshop tracking -20. Declared on every element, not inherited from
   body, because an inherited em value is frozen at the body's font size. */
* {
  letter-spacing: -0.02em;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #fff url("/images/site/paper.jpg") top center / 1173px auto repeat;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.2;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

p,
h1,
h2,
h3,
ul,
figure {
  margin: 0;
  padding: 0;
  font-weight: inherit;
  font-size: inherit;
}

ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--rust);
}

:focus-visible {
  outline: 2px dashed var(--blue);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Page scaffold ─────────────────────────────────────────────── */

.page {
  container-type: inline-size;
  position: relative;
  overflow-x: clip;
}

.nowrap {
  white-space: nowrap;
}

.canvas {
  --u: min(1px, 100cqw / 1100);
  display: flow-root; /* keeps the first flow block's top margin inside */
  position: relative;
  width: calc(1100 * var(--u));
  margin: 0 auto;
}

/* Generic placement: elements set --x/--y/--w and optionally --h, --fs and
   --r as plain numbers in mockup CSS pixels. When an optional one is unset,
   its declaration is invalid at computed-value time and falls back to the
   initial value (auto height, inherited size, no rotation). */
.at {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  font-size: calc(var(--fs) * var(--u));
  transform: rotate(calc(var(--r) * 1deg));
}

/* ── Bands (halftone header/footer, blue wash) ─────────────────── */

.band {
  position: absolute;
  left: calc(50% - 50cqw);
  width: 100cqw;
  background: var(--band) url("/images/site/halftone.webp") center top / calc(1100 * var(--u)) calc(360 * var(--u)) repeat;
}

/* Torn edges are alpha masks, mirrored so they repeat without a seam.
   One mask layer is the edge; the other is a solid block for the rest. */
.band--head {
  top: 0;
  height: calc(136.5 * var(--u));
  -webkit-mask:
    url("/images/site/edge-bottom.png") center bottom / calc(2200 * var(--u)) calc(30 * var(--u)) repeat-x,
    linear-gradient(#000, #000) center top / 100% calc(100% - 29 * var(--u)) no-repeat;
  mask:
    url("/images/site/edge-bottom.png") center bottom / calc(2200 * var(--u)) calc(30 * var(--u)) repeat-x,
    linear-gradient(#000, #000) center top / 100% calc(100% - 29 * var(--u)) no-repeat;
}

.band--foot,
.band--wash {
  -webkit-mask:
    url("/images/site/edge-top.png") center top / calc(2200 * var(--u)) calc(30 * var(--u)) repeat-x,
    linear-gradient(#000, #000) center bottom / 100% calc(100% - 29 * var(--u)) no-repeat;
  mask:
    url("/images/site/edge-top.png") center top / calc(2200 * var(--u)) calc(30 * var(--u)) repeat-x,
    linear-gradient(#000, #000) center bottom / 100% calc(100% - 29 * var(--u)) no-repeat;
}

.band--wash {
  background: var(--wash);
  -webkit-mask-image: url("/images/site/edge-wash.png"), linear-gradient(#000, #000);
  mask-image: url("/images/site/edge-wash.png"), linear-gradient(#000, #000);
  -webkit-mask-size: calc(2200 * var(--u)) calc(20 * var(--u)), 100% calc(100% - 19 * var(--u));
  mask-size: calc(2200 * var(--u)) calc(20 * var(--u)), 100% calc(100% - 19 * var(--u));
}

/* ── Shared pieces ─────────────────────────────────────────────── */

.tape {
  z-index: 1;
  background: center / 100% 100% no-repeat;
  text-align: center;
  text-transform: none;
}

.tape--studio { background-image: url("/images/site/tape-studio.webp"); }
.tape--why { background-image: url("/images/site/tape-why.webp"); }
.tape--tagline { background-image: url("/images/site/tape-tagline.webp"); }

.tape__line {
  position: absolute;
  left: 0;
  right: 0;
  white-space: nowrap;
}

.label {
  font-size: calc(12.5 * var(--u));
  letter-spacing: 0.5em;
  white-space: nowrap;
}

.squiggle {
  display: block;
  background: url("/images/site/squiggle.svg") center / 100% 100% no-repeat;
  height: calc(7 * var(--u));
}

.title {
  color: var(--rust);
  white-space: nowrap;
}

.bolt {
  background: url("/images/site/bolt.svg") center / 100% 100% no-repeat;
  height: calc(4 * var(--u));
}

.circled {
  position: relative;
  white-space: nowrap;
}

.circled::after {
  content: "";
  position: absolute;
  inset: -0.45em -0.55em -0.3em -0.6em;
  background: url("/images/site/circle-1.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.circled--2::after {
  background-image: url("/images/site/circle-2.svg");
  inset: -0.3em -0.75em -0.25em -0.6em;
}

.circled a {
  text-decoration: none;
}

/* Hand-inked frames are 9-slice border images cut from the mockup. */
.btn,
.field {
  display: block;
  border-style: solid;
  border-width: calc(4 * var(--u));
  border-image: url("/images/site/frame-button.png") 8 fill / calc(4 * var(--u)) stretch;
  color: var(--ink);
  font-family: var(--font);
  font-size: calc(19.87 * var(--u));
  letter-spacing: -0.02em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(2.5 * var(--u)) calc(5 * var(--u)) 0 0;
  cursor: pointer;
}

.btn:hover {
  color: var(--ink);
  filter: brightness(0.94);
}

.btn--booking {
  border-image-source: url("/images/site/frame-booking.png");
  font-size: calc(19.87 * var(--u));
}

.field {
  border-image-source: url("/images/site/frame-input.png");
  background: transparent;
  font-size: calc(13.29 * var(--u));
  text-align: left;
  padding: 0 calc(12 * var(--u));
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.field::placeholder {
  color: var(--ink);
  opacity: 0.3;
}

.social {
  display: flex;
  gap: calc(7 * var(--u));
}

.social a {
  display: block;
  width: calc(27 * var(--u));
  height: calc(27 * var(--u));
}

.social a:hover {
  transform: translate(-1px, -1px);
}

.social img {
  width: 100%;
  height: 100%;
}

.logo {
  position: absolute;
  display: block;
}

.logo__halo {
  position: absolute;
  left: calc(-121.5 * var(--u));
  top: calc(-31.5 * var(--u));
  width: calc(453 * var(--u));
  max-width: none;
  opacity: 0.3;
  pointer-events: none;
}

.logo__disc {
  position: relative;
  width: 100%;
}

/* ── Header (shared) ───────────────────────────────────────────── */

.head .social--top { --x: 992; --y: 11.5; --w: 95; }
.head .logo { --x: 445; --y: 31.5; --w: 210.5; }
.head .tape--studio { --x: 73; --y: 100.5; --w: 290; --h: 58; }
.head .tape--studio .tape__line { font-size: calc(14.58 * var(--u)); }
.head .tape--studio .tape__line:first-child { top: calc(10.2 * var(--u)); left: calc(-4 * var(--u)); transform: rotate(0.22deg); }
.head .tape--studio .tape__line:last-child { top: calc(29.7 * var(--u)); left: calc(-4.5 * var(--u)); transform: rotate(1.4deg); }
.head .tape--why { --x: 709; --y: 99; --w: 295; --h: 61; }
.head .tape--why .tape__line { top: calc(16.3 * var(--u)); font-size: calc(22.92 * var(--u)); left: calc(7.5 * var(--u)); right: 0; transform: rotate(1.49deg); }

/* ── Footer (shared; --y0 offsets the content from the band top) ── */

.foot { --y0: 0; }

.foot .band--foot { top: calc(var(--y0) * var(--u)); bottom: 0; }
.foot .follow { --x: 264.4; --y: calc(var(--y0) + 11.7); --w: 566.8; --fs: 14.58; --r: -0.68; text-align: center; }
.foot .subscribe { position: absolute; left: calc(355.5 * var(--u)); top: calc((var(--y0) + 70.5) * var(--u)); display: flex; gap: calc(13.5 * var(--u)); }
.foot .field { width: calc(242.5 * var(--u)); height: calc(41 * var(--u)); }
.foot .btn--subscribe { width: calc(129.5 * var(--u)); height: calc(41 * var(--u)); padding-right: 0; padding-left: calc(2 * var(--u)); }
.foot .social--foot { --x: 503; --y: calc(var(--y0) + 131.5); --w: 95; }
.foot .squiggle { --x: 432.5; --y: calc(var(--y0) + 176); --w: 246.5; }
.foot .credits { --x: 264.4; --y: calc(var(--y0) + 195.1); --w: 566.8; --fs: 12.5; --r: -0.68; text-align: center; }
.foot .logo--foot { --x: 508.5; --y: calc(var(--y0) + 289.5); --w: 80; }

/* ══ Desktop ═════════════════════════════════════════════════════ */

@media (min-width: 900px) {
  /* The footer, and on the Community Garden page the sections from
     "Where it's been" down, are in normal flow so they grow with their
     copy. Everything above them is absolutely placed and takes no space,
     so each flow block's top margin is its distance from the canvas top
     or from the block before it. */
  .foot { position: relative; height: calc(383.5 * var(--u)); }
  .foot .band--foot { top: 0; }
  .home .foot { margin-top: calc(1216.5 * var(--u)); }
  .cg .foot { --y0: 2.5; margin-top: calc(42.5 * var(--u)); }

  .head-copy { font-size: calc(14.58 * var(--u)); text-align: center; }
  .head-copy--left { --x: 40; --y: 182.9; --w: 375.9; --r: 0.36; }
  .head-copy--right { --x: 674.8; --y: 173.2; --w: 359.4; --r: -0.68; }
  .bolt--left { --x: 203; --y: 245; --w: 26; }
  .bolt--right { --x: 847.5; --y: 253; --w: 26; }
  .bolt { height: calc(8 * var(--u)); }

  /* Centered stacks on the home page: label, squiggle, title, tape. */
  .feature .label { --x: 0; --w: 1100; --r: -1.52; text-align: center; padding-left: 0.5em; }
  .feature .squiggle { --x: 432.5; --w: 246.5; }
  .feature .title { --x: 0; --w: 1101.2; --fs: 53.07; --r: -0.75; text-align: center; }
  .feature .tape--tagline { --x: 393; --w: 328.5; --h: 40; }
  .feature .tape__line { font-size: calc(18.3 * var(--u)); top: calc(10.8 * var(--u)); left: calc(-7.7 * var(--u)); right: 0; transform: rotate(-0.73deg); }
  .feature .summary { --x: 526.7; --w: 242.5; --fs: 14.58; --r: -0.68; text-align: center; }
  .feature .btn { --x: 527; --w: 242.5; --h: 41; }

  .feature--garden .label { --y: 297.65; }
  .feature--garden .squiggle { --y: 317.5; }
  .feature--garden .title { --y: 325.4; }
  .feature--garden .art { --x: 248; --y: 373; --w: 272.5; }
  .feature--garden .tape--tagline { --y: 390; }
  .feature--garden .summary { --y: 464.7; }
  .feature--garden .btn { --y: 594; }

  .feature--reuben .label { --y: 787.15; }
  .feature--reuben .squiggle { --y: 806.5; }
  .feature--reuben .title { --y: 814.9; }
  .feature--reuben .tape--tagline { --y: 879; }
  .feature--reuben .summary { --y: 941.2; }
  .feature--reuben .btn { --y: 1083; }
  .collage img { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); max-width: none; }
  .collage .lightboard { --x: 252.5; --y: 813; --w: 110.5; }
  .collage .theraphone { --x: 372; --y: 879; --w: 137; }
  .collage .geoteller { --x: 255; --y: 997; --w: 131.5; }
  .collage .pretztar { --x: 350; --y: 1054; --w: 163.5; }
  .collage { position: absolute; inset: 0; pointer-events: none; }

  /* ── Community Garden page ── */
  .cg-hero .art { --x: 58; --y: 184.5; --w: 355.5; }
  .cg-hero .label { --x: 436.1; --y: 292.15; --w: 600; --r: -1.52; line-height: calc(15 * var(--u)); white-space: normal; }
  .cg-hero .squiggle { --x: 436; --y: 337.5; --w: 246.5; }
  .cg-hero .title { --x: 431.7; --y: 355.7; --w: 600; --fs: 53.07; --r: -0.75; line-height: calc(50 * var(--u)); white-space: normal; }
  .cg-hero .tape--tagline { --x: 430.5; --y: 483.5; --w: 328.5; --h: 40; }
  .cg-hero .tape__line { font-size: calc(18.3 * var(--u)); top: calc(10.8 * var(--u)); left: calc(-9 * var(--u)); right: 0; transform: rotate(-0.73deg); }
  .cg-hero .summary { --x: 465.7; --y: 551.2; --w: 242.5; --fs: 14.58; --r: -0.68; }

  .cg .label--section { --x: 110.6; --w: 500; --r: -1.52; }
  .cg .squiggle--section { --x: 96; --w: 246.5; }

  .about .label--section { --y: 687.15; }
  .about .squiggle--section { --y: 711.5; }
  .about .lede { --x: 106.7; --y: 733.6; --w: 837.2; --fs: 25; line-height: calc(33.33 * var(--u)); }
  .about .body { --x: 109.3; --y: 811.7; --w: 830.2; --fs: 14.58; }
  .about .body p + p { margin-top: 1.2em; }

  .elements .label--section { --y: 971.65; }
  .elements .squiggle--section { --y: 995; --w: 288; }
  .elements .grid { position: absolute; left: calc(104 * var(--u)); top: calc(1021 * var(--u)); display: grid; grid-template-columns: repeat(4, calc(209 * var(--u))); column-gap: calc(22.67 * var(--u)); }

  .where { position: relative; margin-top: calc(1412 * var(--u)); padding: calc(63.6 * var(--u)) 0 calc(33.5 * var(--u)); }
  .where .band--wash { top: 0; bottom: 0; }
  .where .label--section { --y: 15.65; }
  .where .squiggle--section { --y: 39; --w: 288; }
  .where .story { position: relative; --x: 106.7; --y: 0; --w: 837.2; --fs: 25; line-height: calc(33.33 * var(--u)); }
  .where .cbf { width: calc(239 * var(--u)); margin: calc(12.5 * var(--u)) 0 calc(18.9 * var(--u)) calc(319.3 * var(--u)); }
  .where .story .note { font-size: calc(20.83 * var(--u)); line-height: calc(25 * var(--u)); }
  .where .happenings { columns: 2; column-gap: calc(40 * var(--u)); margin: calc(14 * var(--u)) 0 calc(6 * var(--u)); font-size: calc(14.58 * var(--u)); line-height: 1.2; }
  .where .happenings li { padding: 0 0 calc(8 * var(--u)) calc(30 * var(--u)); text-indent: calc(-30 * var(--u)); break-inside: avoid; }
  .where .press { margin-bottom: calc(30 * var(--u)); font-size: calc(14.58 * var(--u)); }

  /* Per-card nudges, from each text layer's anchor in the mockup. */
  .card:nth-child(3) .card__name { padding-left: 0; margin-left: calc(-4.9 * var(--u)); }
  .card:nth-child(4) .card__name { padding-left: calc(0.6 * var(--u)); }
  .card:nth-child(2) .card__kicker { padding-left: calc(4.2 * var(--u)); }
  .card:nth-child(3) .card__kicker { padding-left: 0; margin-left: calc(-4.8 * var(--u)); }
  .card:nth-child(4) .card__kicker { padding-left: 0; margin-left: calc(-1.8 * var(--u)); }
  .card:nth-child(3) .card__sum,
  .card:nth-child(4) .card__sum { padding-left: 0; margin-left: calc(-2.7 * var(--u)); width: calc(190.3 * var(--u)); }
  .card:nth-child(n + 3) .card__kicker { margin-top: calc(10.6 * var(--u)); }
  .card:nth-child(3) .card__sum { margin-top: calc(9 * var(--u)); }
  .card:nth-child(4) .card__sum { margin-top: calc(3 * var(--u)); }

  .book { padding-top: calc(33 * var(--u)); }
  .book .frame { position: relative; --x: 232; --y: 0; --w: 635.5; --h: 280.5; }
  .book .title { position: absolute; left: calc(9 * var(--u)); right: 0; top: calc(30.9 * var(--u)); font-size: calc(41.34 * var(--u)); line-height: calc(38.95 * var(--u)); text-align: center; transform: rotate(-0.75deg); }
  .book .summary { position: absolute; left: calc(37.8 * var(--u)); width: calc(539.8 * var(--u)); top: calc(83.3 * var(--u)); font-size: calc(19.47 * var(--u)); line-height: calc(25.96 * var(--u)); text-align: center; }
  .book .btn { position: absolute; left: calc(65 * var(--u)); top: calc(201 * var(--u)); width: calc(461.5 * var(--u)); height: calc(40.5 * var(--u)); }
}

/* Element cards (both layouts). */
.card__photo {
  border-style: solid;
  border-width: calc(7 * var(--u, 1px));
  border-image: url("/images/site/frame-photo.png") 14 / calc(7 * var(--u, 1px)) stretch;
  aspect-ratio: 209 / 164;
  padding: calc(0.5 * var(--u, 1px));
}

.card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__name {
  margin-top: calc(11.5 * var(--u, 1px));
  padding-left: calc(3 * var(--u, 1px));
  color: var(--rust);
  font-size: calc(28.58 * var(--u, 1px));
  line-height: calc(26.93 * var(--u, 1px));
  transform: rotate(0.14deg);
}

.card__kicker {
  margin-top: calc(13 * var(--u, 1px));
  padding-left: calc(3 * var(--u, 1px));
  font-size: calc(20.83 * var(--u, 1px));
  line-height: calc(20.83 * var(--u, 1px));
  white-space: nowrap;
}

.card__sum {
  margin-top: calc(14 * var(--u, 1px));
  padding-left: calc(4 * var(--u, 1px));
  width: calc(194.3 * var(--u, 1px));
  font-size: calc(14.58 * var(--u, 1px));
}

.frame {
  border-style: solid;
  border-width: calc(5.5 * var(--u));
  border-image: url("/images/site/frame-book.png") 12 / calc(5.5 * var(--u)) stretch;
}

/* "Where it's been" events, each marked with the bolt. */
.happenings li::before {
  content: "";
  display: inline-block;
  width: calc(20 * var(--u, 1px));
  height: calc(6 * var(--u, 1px));
  margin-right: calc(10 * var(--u, 1px));
  vertical-align: 0.2em;
  background: url("/images/site/bolt.svg") center / 100% 100% no-repeat;
}

.story em,
.body em {
  font-style: italic;
}

.body b {
  font-weight: 700;
  letter-spacing: 0.01em; /* Photoshop's faux bold widens each glyph */
}

/* ══ Mobile ══════════════════════════════════════════════════════ */

@media (max-width: 899.98px) {
  .canvas {
    --u: 1px;
    width: auto;
    max-width: 592px;
    padding: 0 16px;
    text-align: center;
  }

  .head,
  .foot,
  .where,
  .feature,
  .section {
    position: relative;
  }

  .at,
  .logo,
  .collage img,
  .elements .grid,
  .foot .subscribe {
    position: static;
    width: auto;
  }

  .at {
    left: auto;
    top: auto;
    height: auto;
    transform: none;
  }

  .label {
    letter-spacing: 0.35em;
    padding-left: 0.35em;
  }

  .squiggle {
    width: 210px;
    height: 7px;
    margin: 6px auto 0;
  }

  .title {
    white-space: normal;
    font-size: 40px;
    line-height: 1;
    margin-top: 10px;
  }

  .tape {
    position: relative;
    width: min(330px, 100%);
    height: 40px;
    margin: 12px auto 0;
  }

  .tape__line {
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-46%) !important;
  }

  /* Header: band strip, icons, logo, then the two tapes and intro copy. */
  .band--head {
    height: 96px;
  }

  .head {
    padding-top: 12px;
  }

  .head .social--top {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
  }

  .head .logo {
    width: 168px;
    margin: 16px auto 0;
    position: relative;
  }

  .logo__halo {
    left: -97px;
    top: -25px;
    width: 362px;
  }

  .head .tape--studio,
  .head .tape--why {
    width: 290px;
    height: 58px;
    margin: 18px auto 0;
  }

  .head .tape--studio .tape__line {
    position: static;
    transform: none !important;
    font-size: 14.58px;
  }

  .head .tape--studio .tape__line:first-child {
    padding-top: 11px;
  }

  .head .tape--why .tape__line {
    font-size: 22px;
  }

  .head-copy {
    font-size: 14.58px;
    max-width: 380px;
    margin: 22px auto 0;
  }

  .bolt {
    display: block;
    width: 26px;
    height: 8px;
    margin: 12px auto 0;
  }

  /* Features stack: label, squiggle, title, tape, art, copy, button. */
  .feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 56px;
  }

  .feature .art,
  .cg-hero .art {
    order: 5;
    width: 240px;
    margin-top: 20px;
  }

  .feature .summary,
  .cg-hero .summary {
    order: 6;
    font-size: 14.58px;
    max-width: 260px;
    margin-top: 18px;
  }

  .feature .btn {
    order: 7;
    width: 242px;
    height: 41px;
    margin-top: 22px;
    font-size: 19.87px;
  }

  .collage {
    order: 5;
    display: grid;
    grid-template-columns: 110px 137px;
    align-items: end;
    gap: 6px 14px;
    margin-top: 20px;
  }

  .collage img {
    width: 100%;
  }

  /* Footer. */
  .foot {
    position: relative;
    margin-top: 64px;
    padding: 44px 0 28px;
  }

  .foot .band--foot {
    top: 0;
  }

  .foot > :not(.band) {
    position: relative;
  }

  .foot .follow {
    font-size: 14.58px;
  }

  .foot .subscribe {
    left: auto;
    top: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
  }

  .foot .field {
    width: min(242px, 100%);
    height: 41px;
  }

  .foot .btn--subscribe {
    width: 130px;
    height: 41px;
  }

  .foot .social--foot {
    justify-content: center;
    margin-top: 22px;
  }

  .foot .squiggle {
    margin-top: 22px;
  }

  .foot .credits {
    font-size: 12.5px;
    margin-top: 14px;
    overflow-wrap: anywhere;
  }

  .foot .logo--foot {
    display: block;
    width: 80px;
    margin: 20px auto 0;
  }

  /* Community Garden page. */
  .cg-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
  }

  .cg-hero .label {
    order: 1;
    white-space: normal;
    line-height: 1.5;
  }

  .cg-hero .squiggle { order: 2; }
  .cg-hero .title { order: 3; }
  .cg-hero .tape--tagline { order: 4; }

  .cg .canvas {
    text-align: left;
  }

  .cg .head,
  .cg .cg-hero,
  .cg .foot,
  .cg .book {
    text-align: center;
  }

  .cg .section {
    margin-top: 52px;
  }

  .cg .squiggle--section {
    margin: 6px 0 0 -8px;
  }

  .about .lede {
    font-size: 20px;
    line-height: 1.3;
    margin-top: 18px;
  }

  .about .body {
    font-size: 14.58px;
    margin-top: 16px;
  }

  .about .body p + p {
    margin-top: 1.2em;
  }

  .elements .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 209px), 1fr));
    gap: 32px 20px;
    margin-top: 20px;
  }

  .card__sum {
    width: auto;
  }

  .card__kicker {
    white-space: normal;
  }

  .where {
    position: relative;
    padding: 36px 0 30px;
  }

  .where .band--wash {
    top: 0;
    bottom: 0;
  }

  .where > :not(.band) {
    position: relative;
  }

  .where .story {
    font-size: 20px;
    line-height: 1.3;
    margin-top: 18px;
  }

  .where .story .note {
    font-size: 17px;
  }

  .where .happenings {
    margin: 14px 0 6px;
    font-size: 14.58px;
    line-height: 1.2;
  }

  .where .happenings li {
    padding: 0 0 8px 30px;
    text-indent: -30px;
  }

  .where .press {
    margin-bottom: 24px;
    font-size: 14.58px;
  }

  .where .cbf {
    width: 220px;
    margin: 22px auto 26px;
  }

  .book .frame {
    position: relative;
    margin-top: 48px;
    padding: 28px 18px 30px;
  }

  .book .title {
    font-size: 34px;
  }

  .book .summary {
    font-size: 17px;
    line-height: 1.33;
    margin-top: 14px;
  }

  .book .btn {
    height: 41px;
    margin-top: 22px;
    font-size: clamp(12px, 3.6vw, 19.87px);
    padding: 0 10px;
  }
}