/* ============================================================
   SILICA WORKS - work, one by one
   ------------------------------------------------------------
   The page opens straight onto the work, on paper: the title,
   the line about the studio with its one mark of accent, the hand
   looping down into the first project, and then a project to a
   row.

   ONE SYSTEM, SIX LAYOUTS. Every row carries the same parts in the
   same order - the title, what it was, two pills for the kind of
   work and the year, the way in - so the list reads as one
   piece. What changes from row to row is the placement: the
   picture changes side every row, and its size and shape with
   it, and the words sit at its foot, its middle or its top.
   Consistent to read, never the same twice.

   NOTHING OVERLAPS, NOTHING MOVES. Each row has its own lane down
   the page, and the pictures hold still: no drift, no zoom, no
   hover. The variety is in the layout, not in the motion.

   THE ACCENT IS EARNED, NOT SPREAD. Ink and paper everywhere; the
   green only as a ground under ink - "same two people", the
   marker pass under each paragraph, the buttons on hover, the tag.
   ============================================================ */

/* ------------------------------------------------------------
   The opening
   ------------------------------------------------------------ */
/* Paper, like every sheet on home. Its foot is still the lifted
   sheet (css/pages.css, .pg-foot-lift): the bottom corners cut and
   a shadow cast onto the footer as it slides up over it. */
.wt-table {
  --sheet-ground: var(--sw-paper);
  --soft: var(--pg-soft);
  --body: var(--pg-body);
  --hair: var(--pg-line);
  z-index: 2;
  display: block;
  min-height: 0;
  color: var(--sw-ink);
  /* The home page's sheet rhythm (the spacing tokens in
     css/styles.css): its sheet top over the title, and a foot that
     clears the nav once it parks. */
  padding: var(--sw-sheet-top) 2.5rem calc(var(--sw-park-off) + var(--sw-bar-h, 60px) + var(--sw-park-air));
  scroll-margin-top: 0;
  /* A safety net, not a layout: nothing may push the page
     sideways. Only the horizontal axis, so the lifted foot's
     shadow still falls onto the footer. */
  overflow-x: clip;
}

/* The opening's start state - only while html.wt-anim is set, and
   hidden rather than moved, for the reason css/contact.css gives:
   GSAP would read a CSS offset back as pixels. */
.wt-anim .wt-head .sw-featured-title,
.wt-anim .wt-statement {
  visibility: hidden;
}

/* The way in: the statement, and a hand pointing into the first
   row. */
.wt-intro {
  margin-top: var(--sw-title-gap);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
  align-items: start;
}

/* The lead paragraph, at the size home's "Who we are" and the FAQ's
   statement both set (1.25rem / 1.55). Its lead-in is set in the
   medium cut, as home's hero blurb sets its own. */
.wt-statement {
  grid-column: 1 / span 6;
  max-width: 40ch;
  margin: 0;
  font-family: "sohne-normal", "Inter Tight", sans-serif;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--pg-body);
  text-wrap: pretty;
}

.wt-statement b {
  font-family: "sohne-medium", "Inter Tight", sans-serif;
  font-weight: 500;
  color: var(--sw-ink);
}

/* ------------------------------------------------------------
   The list
   ------------------------------------------------------------ */
/* The first row starts below the loop, not under it: room for the
   arrow's full drop (its box is 1.4 times its width) and a little
   air, so the head lands just above the first picture rather than
   on it. */
.wt-list {
  display: grid;
  row-gap: clamp(7rem, 22vh, 14rem);
  margin-top: calc(clamp(5rem, 6.2vw, 7rem) * 1.4 + 1.5rem);
}

/* A row: twelve columns, the picture and the words on one line.
   The variants below only say where each part goes. */
.wt-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
  align-items: start;
}

.wt-row > * {
  grid-row: 1;
  min-width: 0;
}

/* One system, six layouts. The picture changes side on every row,
   and its size and shape change with it; the words take the
   columns right beside it - no empty columns between - and sit at
   its foot, its middle or its top. Picture and words never share a
   column.

   The first picture sits on the right, straight under the hand in
   the intro, so its arrow lands on it. */
.wt-row--a .wt-media { grid-column: 8 / span 5; --ar: 4 / 5; }
.wt-row--a .wt-info { grid-column: 1 / span 7; align-self: end; }

.wt-row--b .wt-media { grid-column: 1 / span 6; --ar: 5 / 4; }
.wt-row--b .wt-info { grid-column: 7 / span 6; align-self: center; }

.wt-row--c .wt-media { grid-column: 7 / span 4; --ar: 4 / 5; }
.wt-row--c .wt-info { grid-column: 1 / span 6; align-self: start; padding-top: clamp(1rem, 4vh, 3rem); }

.wt-row--d .wt-media { grid-column: 1 / span 8; --ar: 16 / 10; }
.wt-row--d .wt-info { grid-column: 9 / span 4; align-self: start; }
/* The hand goes on its own line under the words, never beside
   them: in a narrow column the words can run as tall as the
   picture, and a hand pinned to the row's foot would meet them. */
.wt-row--d .wt-hand { grid-column: 9 / span 4; grid-row: 2; margin-top: clamp(1.5rem, 4vh, 2.5rem); }

.wt-row--e .wt-media { grid-column: 6 / span 7; --ar: 16 / 10; }
.wt-row--e .wt-info { grid-column: 1 / span 5; align-self: end; }

.wt-row--f .wt-media { grid-column: 1 / span 5; --ar: 3 / 4; }
.wt-row--f .wt-info { grid-column: 6 / span 7; align-self: center; }

/* The words hug the picture: on its left they are pushed over to
   it, on its right they start at it, and either way a set gap
   keeps them from touching. */
.wt-row--a .wt-info,
.wt-row--c .wt-info,
.wt-row--e .wt-info {
  justify-self: end;
  padding-right: clamp(1rem, 2vw, 2.5rem);
}

.wt-row--b .wt-info,
.wt-row--d .wt-info,
.wt-row--f .wt-info {
  justify-self: start;
  padding-left: clamp(1rem, 2vw, 2.5rem);
}

.wt-media {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* The picture: cut at all four corners, the home page's plate
   (.ap-plate, home.html) at the same notch. Still, on purpose - no
   drift, no zoom, no hover; the work is the thing to look at.
   Never taller than most of a screen, so a whole row can always be
   seen at once. */
.wt-frame {
  --notch: 16px;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--ar, 4 / 5);
  max-height: 82vh;
  overflow: hidden;
  background: #22221d;
  clip-path: polygon(var(--notch) 0, calc(100% - var(--notch)) 0, 100% var(--notch),
    100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%,
    var(--notch) 100%, 0 calc(100% - var(--notch)), 0 var(--notch));
}

.wt-frame img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The words: the title, what it was, two pills, the way in - the
   same four things in the same order on every row. */
.wt-info {
  max-width: 30rem;
}

/* The FAQ's display names (.tm-name in css/team.css), value for
   value - the one size the site sets a thing's name in. */
.wt-title {
  margin: 0;
  font-family: "sohne-bold", "Inter Tight", sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 4.2vw, 4.4rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--sw-ink);
}

/* The FAQ's bios (.tm-bio), value for value, rising line by line
   on the marker pass like every body paragraph on home. */
.wt-para {
  max-width: 38ch;
  margin: 1.25rem 0 0;
  font-family: "sohne-normal", "Inter Tight", sans-serif;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--body);
  text-wrap: pretty;
}

/* The kind of work and the year - contact's copy chip, a size up,
   cut at all four corners like the picture beside them. */
.wt-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 1.75rem;
  padding: 0;
  list-style: none;
}

.wt-pill {
  --n: 5px;
  padding: 0.55rem 0.8rem;
  font: 600 0.66rem/1 "Inter Tight", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sw-ink);
  background: rgba(20, 20, 15, 0.07);
  clip-path: polygon(var(--n) 0, calc(100% - var(--n)) 0, 100% var(--n),
    100% calc(100% - var(--n)), calc(100% - var(--n)) 100%,
    var(--n) 100%, 0 calc(100% - var(--n)), 0 var(--n));
}

/* The way in - the footer's "Get in Touch" arrow, so every button
   that leads somewhere on the site points the same way. Two copies
   of the arrow in a clipped box (css/footer-panel.css); on hover or
   focus the first leaves off the top right and the second follows
   it in from the bottom left, exactly as the footer's does. */
.wt-open:hover .footer-btn-arrow svg:first-child,
.wt-open:focus-visible .footer-btn-arrow svg:first-child {
  transform: translate(110%, -110%);
}

.wt-open:hover .footer-btn-arrow svg + svg,
.wt-open:focus-visible .footer-btn-arrow svg + svg {
  transform: none;
}

/* ------------------------------------------------------------
   The hands
   ------------------------------------------------------------
   Each note on the page draws its own arrow, shaped for where it
   points: looping down into the first row, back at a picture, and
   down to the footer. */
.wt-hand {
  color: #4a4a44;
}

/* The loop: out of the note, once round, and straight down onto
   the first picture under it. */
.wt-hand--into {
  grid-column: 9 / span 3;
  width: 11rem;
  margin-top: 0.5rem;
  transform: rotate(-3deg);
}

.wt-arrow--into {
  --aw: clamp(5rem, 6.2vw, 7rem);
  left: 14%;
  top: 100%;
  width: var(--aw);
  margin-top: 0.35rem;
}

.wt-hand--left {
  width: 9.5rem;
  margin-left: clamp(4.5rem, 5.5vw, 6.5rem);
  transform: rotate(3deg);
}

.wt-arrow--left {
  right: 100%;
  top: 30%;
  width: clamp(4.25rem, 5vw, 6rem);
  margin-right: 0.3rem;
}

/* The closing hand, centred over the bar it points at.
   ------------------------------------------------------------
   The nav bar parks at the foot of the screen, centred, and the
   last thing on the page is the bar giving way to the footer - so
   the note sits on the same centre line and its arrow runs straight
   down at the bar, rather than off to one side at nothing in
   particular. Same on a phone, where the bar is full width.

   The padding is the room under the arrow and the air above the
   bar, which parks just below it - the arrow points at the bar, it
   must never touch it. */
.wt-end {
  justify-self: center;
  margin-right: 0;
  padding-bottom: clamp(5.5rem, 12vh, 8rem);
}

.wt-hand--down {
  width: 12rem;
  text-align: center;
  transform: rotate(-2deg);
}

/* Centred under the text; translate in the same property as the
   centring so nothing else can overwrite one half of it. */
.wt-arrow--down {
  left: 50%;
  top: 100%;
  width: clamp(3.25rem, 4vw, 4.5rem);
  margin-top: 0.5rem;
  transform: translateX(-50%);
}

/* ------------------------------------------------------------
   The cases, in the page
   ------------------------------------------------------------
   Where the notes live without the script: in the flow, after the
   table. With it, they wait here unseen until the sheet asks for
   one - display: none rather than hidden, so each article's own
   styles stay intact for when it is moved. */
.wt-cases {
  position: relative;
  z-index: 2;
  padding: clamp(5rem, 12vh, 8rem) 2.5rem calc(2rem + var(--sw-bar-h, 60px) + 6rem);
  background: var(--sw-paper);
}

.wt-js .wt-cases {
  display: none;
}

.wt-case + .wt-case {
  margin-top: clamp(6rem, 16vh, 10rem);
}

.wt-case:focus {
  outline: none;
}

/* The case's type is the site's type, value for value. The name,
   the lede and the running text are set by css/page-type.css (home's
   hero title, its "Silica Works is..." paragraph and its "Small by
   choice." aside), which loads last; every label here is the caption
   strip (.pg-cap, 0.7rem) and every fact home's body size
   (1.0625rem). Nothing in a case is sized on its own. */
.wt-case {
  --wt-gap: clamp(2.5rem, 6vh, 4rem);
}

/* The name across the sheet, what it was under it. */
.wt-case-head {
  display: grid;
  gap: clamp(1.25rem, 3vh, 2rem);
}

.wt-case-title {
  margin: 0;
  text-wrap: balance;
  color: var(--sw-ink);
}

.wt-case-lede {
  max-width: 40ch;
  margin: 0;
}

.wt-case-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin: var(--wt-gap) 0;
}

.wt-case-meta div {
  display: grid;
  align-content: start;
  gap: 0.7rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--pg-line);
}

.wt-case-meta dt {
  font: 500 0.7rem/1 "Inter Tight", sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pg-soft);
}

.wt-case-meta dd {
  margin: 0;
  font-family: "sohne-medium", "Inter Tight", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--sw-ink);
}

/* Every picture in a case: the row's plate, cut at all four
   corners at the same notch, the image laid in edge to edge. */
.wt-plate {
  --notch: 16px;
  position: relative;
  overflow: hidden;
  background: #22221d;
  clip-path: polygon(var(--notch) 0, calc(100% - var(--notch)) 0, 100% var(--notch),
    100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%,
    var(--notch) 100%, 0 calc(100% - var(--notch)), 0 var(--notch));
}

.wt-plate img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wt-case-hero {
  aspect-ratio: 16 / 9;
}

/* The story, told the way a case study is: one row per chapter,
   its number and name on the left, the words on the right, a rule
   over each. The pictures come between the chapters, not after
   them all. */
.wt-case-body {
  margin: var(--wt-gap) 0;
}

.wt-case-block {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: 1rem;
  align-items: start;
  padding: clamp(1.25rem, 3vh, 1.75rem) 0 clamp(2.5rem, 6vh, 4rem);
  border-top: 1px solid var(--sw-ink);
}

.wt-case-block:last-child {
  padding-bottom: 0;
}

.wt-case-block h3 {
  grid-column: 1 / span 4;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0;
  padding-top: 0.45em;
  font-family: "sohne-bold", "Inter Tight", sans-serif;
  font-weight: 800;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sw-ink);
}

.wt-case-block h3 span {
  font: 500 0.7rem/1 "Inter Tight", sans-serif;
  letter-spacing: 0.09em;
  color: var(--pg-soft);
}

.wt-case-block p {
  grid-column: 6 / span 7;
  max-width: 46ch;
  margin: 0;
}

.wt-case-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.wt-case-pair .wt-plate {
  aspect-ratio: 4 / 5;
}

.wt-case-back {
  display: inline-block;
  margin-top: 2.5rem;
  font: 600 0.72rem/1 "Inter Tight", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sw-ink);
}

.wt-sheet .wt-case-back,
.wt-sheet .wt-case-head .pg-cap {
  display: none;
}

/* ------------------------------------------------------------
   The case sheet
   ------------------------------------------------------------ */
.wt-drawer {
  position: fixed;
  inset: 0;
  z-index: 9000;
}

.wt-drawer[hidden] {
  display: none;
}

.wt-scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 8, 0.62);
  cursor: pointer;
}

/* Paper, the brand chamfer cut from its top corners, a sliver of
   the page left showing above it so it reads as laid on top rather
   than as a new page. It scrolls on its own. */
.wt-sheet {
  --c: var(--pg-chamfer);
  --wt-top: clamp(0.75rem, 3.5vh, 2rem);
  position: absolute;
  inset: var(--wt-top) 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--sw-paper);
  color: var(--sw-ink);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%, 0 var(--c));
  scrollbar-width: none;
  outline: none;
}

.wt-sheet::-webkit-scrollbar {
  display: none;
}

/* The bar: one slim line. Where this case sits in the six and its
   kind of work on the left - the only caption in the sheet, so the
   case under it opens straight on its name - and three icons on the
   right: back a case, on a case, close. Its hairline only shows
   once the case has scrolled up under it. */
.wt-sheet-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem calc(2.5rem + var(--c) * 0.25) 0.75rem 2.5rem;
  background: var(--sw-paper);
}

.wt-sheet-bar::after {
  content: "";
  position: absolute;
  left: 2.5rem;
  right: 2.5rem;
  bottom: 0;
  height: 1px;
  background: var(--pg-line);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.wt-sheet.is-scrolled .wt-sheet-bar::after {
  opacity: 1;
}

.wt-sheet-ctrl {
  display: flex;
  gap: 0.5rem;
}

/* The site's button (.pg-btn) cut down to a square around an icon:
   the same ink edge, notch and accent fill on hover. */
.pg-btn.wt-icon {
  --btn-notch: 9px;
  justify-content: center;
  gap: 0;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
}

.wt-icon span,
.wt-icon svg {
  display: block;
  width: 1rem;
  height: 1rem;
}

.wt-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.wt-sheet-body {
  padding: clamp(1.25rem, 4vh, 2.5rem) 2.5rem 0;
}

.wt-sheet .wt-case + .wt-case {
  margin-top: 0;
}

/* In the sheet every picture fits in the window under the sticky
   bar, with air above and below it: the plate takes the full width
   of the text column, so its edges line up with the words, and only
   its height gives way - the image is cropped to fit, never squeezed
   and never run past the fold. --wt-room is the window left under
   the sheet's top and the bar. */
.wt-sheet {
  --wt-room: calc(100vh - var(--wt-top) - 7.5rem);
  --wt-room: calc(100svh - var(--wt-top) - 7.5rem);
}

.wt-sheet .wt-case-hero,
.wt-sheet .wt-case-pair .wt-plate {
  width: 100%;
  max-height: var(--wt-room);
}

/* The next case, laid out the way every case opens: a caption line
   with the way on at its end, the name at the case title's size,
   and the top of its lead picture running off the foot of the sheet
   - the end of this case is the start of the next one. The name and
   the picture take the pointer, the button takes the keyboard, and
   the button answers a hover anywhere on them. */
.wt-sheet-foot {
  margin: calc(var(--wt-gap, 4rem) * 1.75) 2.5rem 0;
}

.wt-next-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-top: clamp(1.25rem, 3vh, 1.75rem);
  border-top: 1px solid var(--sw-ink);
}

.wt-next-btn {
  flex: none;
  white-space: nowrap;
}

.wt-next {
  display: grid;
  gap: var(--wt-gap, 4rem);
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  cursor: pointer;
}

/* The case title's own size and cut (css/page-type.css). */
.wt-next-title {
  font-family: "sohne-bold", "Inter Tight", sans-serif;
  font-weight: 800;
  font-size: var(--pt-title, clamp(2.75rem, 7.6vw, 8.25rem));
  line-height: var(--pt-title-lh, 0.8);
  letter-spacing: -0.045em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--sw-ink);
}

/* Cut at its top corners only: it carries on past the sheet's
   foot, as the lead picture it is the top of. */
.wt-next-peek {
  display: block;
  height: clamp(9rem, 30vh, 18rem);
  clip-path: polygon(var(--notch) 0, calc(100% - var(--notch)) 0, 100% var(--notch),
    100% 100%, 0 100%, 0 var(--notch));
}

.wt-next-peek img {
  object-position: 50% 35%;
}

.wt-sheet-foot:has(.wt-next:hover) .wt-next-btn {
  color: var(--btn-fill-text);
}

.wt-sheet-foot:has(.wt-next:hover) .wt-next-btn::before {
  background-color: var(--btn-fill);
}

.wt-sheet-foot:has(.wt-next:hover) .wt-next-btn .footer-btn-arrow svg:first-child {
  transform: translate(110%, -110%);
}

.wt-sheet-foot:has(.wt-next:hover) .wt-next-btn .footer-btn-arrow svg + svg {
  transform: none;
}

/* While the sheet is up the page behind it holds still. */
html.wt-sheet-open,
html.wt-sheet-open body {
  overflow: hidden;
}

/* ------------------------------------------------------------
   Narrow screens
   ------------------------------------------------------------ */
@media (max-width: 1000px) {
  .wt-table {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .wt-intro {
    grid-template-columns: minmax(0, 1fr);
  }

  .wt-statement {
    grid-column: 1;
  }

  .wt-hand--into,
  .wt-hand--left {
    display: none;
  }

  /* A row stands up: the picture, then the words under it. The
     pictures keep their own shapes and alternate their edge across
     six columns, so the list still changes as it goes. */
  .wt-list {
    row-gap: clamp(4.5rem, 12vh, 6rem);
    margin-top: clamp(2.5rem, 6vh, 4rem);
  }

  .wt-row {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 0.75rem;
  }

  .wt-row .wt-info {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: start;
    justify-self: stretch;
    max-width: none;
    padding: 1.25rem 0 0;
  }

  .wt-row--a .wt-media,
  .wt-row--d .wt-media { grid-column: 1 / -1; }
  .wt-row--b .wt-media,
  .wt-row--e .wt-media { grid-column: 2 / -1; }
  .wt-row--c .wt-media,
  .wt-row--f .wt-media { grid-column: 1 / span 5; }

  .wt-end {
    justify-self: center;
    margin-right: 0;
  }

  .wt-title {
    font-size: clamp(2.1rem, 9.5vw, 2.75rem);
  }

  .wt-cases {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .wt-case-meta {
    grid-template-columns: 1fr 1fr;
    row-gap: 1.25rem;
  }

  /* A chapter stands up: its name over its words. */
  .wt-case-block {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 2.5rem;
  }

  .wt-case-block h3,
  .wt-case-block p {
    grid-column: 1;
  }

  .wt-case-pair {
    gap: 0.75rem;
  }

  .wt-sheet-bar::after {
    left: 1.25rem;
    right: 1.25rem;
  }

  .wt-sheet-bar {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .wt-sheet-bar .pg-cap b {
    display: none;
  }

  .wt-sheet-body {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .wt-sheet-foot {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }

  /* The way on stays on the caption line; the caption gives way. */
  .wt-next-bar {
    flex-wrap: nowrap;
  }

  .wt-next-bar .pg-cap {
    flex-wrap: wrap;
    row-gap: 0.4rem;
    min-width: 0;
  }

  /* pages.css's phone title, for this page's head - one row, spread
     edge to edge, at the size every other inner page sets it. */
  .wt-head .sw-section-title.sw-featured-title {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.35em;
    font-size: min(calc((100vw - 3rem) / 11.3), 4.25rem);
    line-height: 1;
    text-align: left;
  }

  .wt-head .sw-featured-title .sw-tag--title {
    font-size: clamp(0.9rem, 3.4vw, 1.2rem);
    --sw-tag-nose: 0.55rem;
  }

  .wt-head .sw-ft-word--b > .sw-tag--title {
    top: 92%;
    margin-top: 0;
  }
}

/* ------------------------------------------------------------
   Motion off
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .wt-sheet-bar::after {
    transition: none;
  }
}