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

:root {
  --cream: #fcfcfa;
  --ink: #111111;
  --ink-soft: #1a1a1a;
  --muted: #9a958d;
  --rule: #dcdad4;
  --orange: #e03c19;
  --pad: 32px;
}

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
  text-decoration: none;
}

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

.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  background: var(--cream);
}

.page main,
.page main > section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.shell {
  padding: 0 var(--pad);
}

.mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- masthead ---------- */

/* Anchors the mobile nav drawer, which hangs off the bottom of the header. */
header {
  position: relative;
  z-index: 50; /* above the entry log (z 40) so the menu covers it */
}

.masthead {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 26px var(--pad) 24px;
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.wordmark__mark {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.wordmark:hover .wordmark__mark {
  transform: scale(1.06);
}

.wordmark .bolt__badge {
  transition: fill 0.2s ease;
}

.wordmark:hover .bolt__badge {
  fill: #d94f4f;
}

@media (prefers-reduced-motion: reduce) {
  .wordmark:hover .wordmark__mark {
    transform: none;
  }
}

.wordmark sup {
  font-size: 0.45em;
  font-weight: 700;
  top: -0.85em;
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
  font-size: 14px;
  color: #3d3a35;
}

.nav a {
  position: relative;
  padding-bottom: 2px;
}

.nav a[aria-current] {
  font-weight: 700;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav a:hover::after,
.nav a:focus-visible::after {
  transform: scaleX(1);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 28px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  height: 1.5px;
  background: #3d3a35;
}

.nav-drawer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px var(--pad) 18px;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  color: #3d3a35;
}

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

.nav-drawer a {
  padding: 8px 0;
  border-bottom: 1px solid rgba(205, 198, 184, 0.6);
}

/* Entries swap the whole page, so fade the new one in. The red plate itself
   stays solid the whole time — only its artwork fades. */
.log,
.feature,
.portfolio {
  animation: enter 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* The artwork arrives after the words have settled. */
.plate__stage {
  animation: enter 700ms cubic-bezier(0.22, 0.61, 0.36, 1) 340ms both;
}

@media (prefers-reduced-motion: reduce) {
  .log,
  .feature,
  .portfolio,
  .plate__stage {
    animation: none;
  }
}

/* ---------- entry log ---------- */

/* A thin index above the entries so you can jump back through the journal. */
.log {
  position: relative;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 28px;
  padding: 14px var(--pad);
  border-bottom: 1px solid var(--rule);
  font-size: 11.5px;
}

.log__label {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The archive hangs off "Latest" as a disclosure, so the row stays a single
   date no matter how many entries pile up behind it. */
.log__archive {
  position: relative;
}

.log__archive > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
}

.log__archive > summary::-webkit-details-marker {
  display: none;
}

.log__archive > summary::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
}

.log__archive > summary:hover,
.log__archive[open] > summary {
  color: var(--ink);
}

.log__panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 190px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  background: var(--cream);
  list-style: none;
}

.log__panel a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--muted);
}

.log__panel a:hover,
.log__panel a[aria-current] {
  color: var(--ink);
}

.log__date {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

.log__title {
  font-size: 11px;
  white-space: nowrap;
}

.log__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  margin-left: auto;
}

.log__list a {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.log__list a:hover {
  color: var(--ink);
}

.log__list a[aria-current] {
  color: var(--ink);
}

/* Portfolio reuses the tag-pill treatment for its project jump links. */
/* Portfolio reuses the tag-pill treatment for its project jump links. The
   heading keeps the rule the other logs have, and the pills hang below it. */
.log--pills {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 14px 0 0;
  border-bottom: 0;
}

.log--pills .log__label {
  padding: 0 var(--pad) 14px;
  border-bottom: 1px solid var(--rule);
}

.log--pills .log__list {
  gap: 6px;
  margin-left: 0;
  padding: 16px var(--pad) 0;
}

.log--pills .log__list a {
  display: inline-block;
  padding: 4px 9px 5px;
  border: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.35);
  font-size: 9.5px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.log--pills .log__list a:hover,
.log--pills .log__list a:focus-visible {
  border-color: var(--ink);
  color: var(--ink);
}

.log--pills .log__list a[aria-current] {
  border-color: var(--ink);
  color: var(--ink);
  font-weight: 700;
}

/* ---------- feature ---------- */

/* Reserved so the orange edge lands in the same place on every entry,
   however long or short that entry's blurb runs. */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  /* Reserves enough height that the plate starts at the same Y on every
     entry, so switching between them doesn't shift the page. The longest
     quote today runs six lines (Hypercube Shimmy); 331px fits it with
     the controls one line closer to the quote. Raise this, don't set a
     fixed height, or a longer quote would push the plate down. */
  min-height: 331px;
  padding: 46px var(--pad) 22px;
}

/* The lede fills the reserved block so the controls can sit against the
   bottom edge, right above the plate. */
.feature__lede {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.feature__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.feature__date {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
}

.feature__name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
}

.feature__dek {
  margin: 0 0 30px;
  max-width: 42ch;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #24211d;
}

.feature__dek p {
  margin: 0;
}

/* ---------- about ---------- */

.about {
  display: grid;
  grid-template-columns: 192px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.about__frame {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0;
}


.about__portrait {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Spins while hovered. site.js lets the turn finish before it stops. */
.about__portrait.is-spinning {
  animation: spin 2.4s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.about__bio {
  max-width: 54ch;
  margin: 0 0 40px;
  font-size: 14px;
  line-height: 1.65;
  color: #24211d;
}

.about__bio a {
  border-bottom: 1px solid var(--rule);
}

.about__bio a:hover {
  border-bottom-color: currentColor;
}

.about__heading {
  margin: 0 0 4px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.about__links {
  max-width: 54ch;
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}

.about__links li {
  padding: 4px 0;
}

.about__links a {
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule);
}

.about__links a:hover {
  text-decoration-color: currentColor;
}

@media (max-width: 720px) {
  .about {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .about__frame {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about__portrait.is-spinning {
    animation: none;
  }
}

.feature__dek a {
  border-bottom: 1px solid var(--rule);
}

.feature__dek a:hover {
  border-bottom-color: currentColor;
}

.feature__cite {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-style: normal;
}

.feature__cite::before {
  content: "— ";
}

a.feature__name:hover {
  color: var(--orange);
}

.feature__out {
  width: 10px;
  height: 10px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.45;
  transition: opacity 0.2s ease;
}

a.feature__name:hover .feature__out {
  opacity: 1;
}

/* ---------- social ---------- */

/* Reads as the tail of the nav row rather than a separate cluster. */
.social {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  padding-left: 28px;
  border-left: 1px solid var(--rule);
  list-style: none;
}

.social li {
  display: flex;
}

.social a {
  display: flex;
  align-items: center;
  color: var(--muted);
}

.social a:hover {
  color: var(--orange);
}

.social svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Out of the masthead and into the about column, so it loses the divider
   it only needed when it sat beside the nav. */
/* The heading only leaves 4px, which the Fun links absorb through their own
   list padding. The icon row has no such padding, so it needs the gap. */
.social--about {
  gap: 18px;
  margin-top: 24px;
  padding-left: 0;
  border-left: 0;
}

.social--about svg {
  width: 18px;
  height: 18px;
}

.about__heading--spaced {
  margin-top: 26px;
}

/* ---------- portfolio ---------- */

/* Single wide column with generous rhythm, like the original site. */
.portfolio {
  padding: 32px var(--pad) 120px;
  max-width: 980px;
}

/* One margin owns the drop to the first project. The dek carries its own
   30px for the journal, which stacked into a 94px gap here. */
.portfolio__lede {
  margin-bottom: 40px;
}

.portfolio__lede .feature__title {
  margin-bottom: 26px;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.portfolio__lede .feature__date {
  font-size: 11px;
  letter-spacing: 0.08em;
}

.portfolio__lede .feature__dek {
  margin-bottom: 0;
  max-width: none;
}

.portfolio__lede .feature__dek p {
  max-width: 46ch;
}

.work {
  margin-bottom: 28px;
}

.work__meta {
  margin-bottom: 30px;
}

/* The live portfolio sets its media on a 720px column, but our type is
   much smaller, so a narrower column keeps the images in proportion. */
.work__body {
  max-width: 560px;
}

.work__name {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.work__dates {
  margin: 6px 0 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.work__blurb {
  margin: 0 0 22px;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.5;
  color: #24211d;
}

.work__blurb a {
  border-bottom: 1px solid var(--rule);
}

.work__blurb a:hover {
  color: var(--orange);
  border-bottom-color: currentColor;
}

.work__figure {
  margin: 0 0 40px;
}

/* ---------- slideshow ---------- */

/* Mirrors the live site: a fixed window with a translate3d track, the
   caption centered above circular arrows and dot indicators. */
.slideshow {
  margin-bottom: 16px;
  outline: none;
}

.slideshow:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 8px;
}

.slideshow__window {
  overflow: hidden;
  transition: height 460ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.slideshow__track {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  transition: transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.slideshow .work__figure {
  flex: 0 0 100%;
  margin: 0;
}

.slideshow .work__figure figcaption {
  text-align: center;
}

.slideshow__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 14px;
}

.slideshow__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  padding: 0;
  border: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.35);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.slideshow__nav:hover:not(:disabled) {
  border-color: var(--ink);
}

.slideshow__nav:disabled {
  color: var(--rule);
  cursor: default;
}

.slideshow__nav svg {
  width: 9px;
  height: 9px;
}

.slideshow__dots {
  display: flex;
  align-items: center;
  gap: 2px;
}

.slideshow__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 29px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.slideshow__dot::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--rule);
  transition: background 0.2s ease;
}

.slideshow__dot.is-on::before {
  background: var(--ink);
}

.slideshow__dot:hover::before {
  background: var(--muted);
}

.slideshow__dot.is-on:hover::before {
  background: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .slideshow__track {
    transition: none;
  }
}

/* The live portfolio runs every slide on a fixed 16:9 stage and letterboxes
   the image inside it, so the viewer never changes height between slides.
   The bars are always the page colour. Sampling a tint from each image used
   to blend the bars into the artwork, which left two different apparent
   edges in one picture and read as off-centre. One flat cream keeps the
   image's real boundary visible. */
.work__figure img,
.work__figure video,
.work__figure iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--cream);
  border: 1px solid var(--rule);
  /* A touch of lift just under the frame's bottom edge, above the caption.
     The negative spread cancels the blur at the sides, so the slideshow
     window (which clips to exactly one figure) has nothing to slice off. */
  box-shadow: 0 4px 4px -4px rgba(17, 17, 17, 0.22);
}

/* Very wide, short strips get stretched to the full 560px by width: 100%,
   which reads as a banner rather than a screenshot. Padding the stage (it's
   border-box, so the outer 16:9 box is unchanged) shrinks the painted image
   and object-fit keeps it centred. */
.work__figure img.work__shot--inset {
  padding: 0 24%;
}

.work__figure img.work__shot--snug {
  padding: 4%;
}

/* Most artwork sits comfortably on the cream stage, but a few assets are
   drawn on their own flat background and need the stage to match, or the
   letterbox bars read as a frame around them. These are hand-picked per
   slide — sampling the colour automatically is what caused the slides to
   show two different apparent edges at once. */
.work__figure img.work__shot--white,
.work__figure video.work__shot--white {
  background: #fff;
}

/* Matches the flat grey the G brand animations are rendered on. */
.work__figure img.work__shot--grey,
.work__figure video.work__shot--grey {
  background: #f5f5f5;
}

/* For artwork drawn on black, where a light stage would halo it. */
.work__figure img.work__shot--black,
.work__figure video.work__shot--black {
  background: #000;
}

/* Some slides are photographs or illustrations with no flat edge colour, so
   no stage tint can match them. Padding shrinks the painted picture while
   the 16:9 box stays put, so it reads as an object sitting on the stage.
   No shadow of its own: the stage background is opaque, so a drop-shadow
   traces the whole box (not the picture) and the slideshow window clips it
   flat at the sides. The frame's shadow underneath is enough. */
.work__figure img.work__shot--pad,
.work__figure video.work__shot--pad {
  padding: 30px;
}

/* The Island Def Jam sites are browser screenshots, so they want to sit on
   the page as objects rather than fill a framed stage — hence the
   no-shadow-* source files. Padding insets them; the frame border comes off
   so the screenshot's own browser chrome is the only edge. They're 4:3 in a
   16:9 stage, so height is the limit — keep the vertical margin small or
   they read much smaller than the other slides. The element is sized to the
   4:3 artwork itself (stage height − 24px, × 4/3) rather than padded inside a
   16:9 box: WebKit clips object-fit painting — drop-shadow included — to the
   content box, which sliced the shadow off the bottom edge. Outer height
   still matches the 16:9 stage. */
.work--cards .work__figure {
  padding-top: 12px; /* a top margin on the img would collapse out of the figure */
}

.work--cards .work__figure img {
  width: calc(75% - 32px);
  aspect-ratio: 4 / 3;
  margin: 0 auto 24px; /* 12px under the art + the caption's 12px, which this collapses with */
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 3px 3px rgba(17, 17, 17, 0.18));
}

.work__figure figcaption {
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
}

.portfolio__updated {
  margin: 48px 0 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

@media (max-width: 820px) {
  .portfolio {
    padding-top: 40px;
  }

  .portfolio__lede,
  .work {
    margin-bottom: 72px;
  }
}

/* ---------- orange plate ---------- */

.plate {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1;
  width: 100vw;
  margin-left: 0;
  /* The plate takes the leftover viewport height through flex: 1. The floor
     is only here so it still reads as a panel on very short windows — keep
     it low enough that a normal laptop fits the whole entry without
     scrolling, since the art scales to whatever it's given. */
  min-height: 280px;
  background: var(--orange);
  overflow: hidden;
}

/* A faint vignette so the plate settles at its edges. */
.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(60, 12, 0, 0.16) 100%);
}

.plate__stage {
  position: absolute;
  inset: 0;
}

.plate__art {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.feature__actions {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 22px;
}

.feature__controls {
  display: flex;
  flex: 1;
  min-width: 0;
}

.plate__controls {
  display: flex;
  gap: 28px;
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 500;
}

.plate__control {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 180px;
  min-width: 0;
}

.plate__control-value {
  min-width: 3ch;
  text-align: right;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* The input is a tall, invisible hit area so a finger can grab it; the
   1px line is drawn by the track, and the negative margins keep the layout
   as if the input were 1px tall. */
.plate__control input[type="range"] {
  --thumb: 9px;
  flex: 1;
  min-width: 0;
  height: 28px;
  margin: -11.5px 2px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.plate__control input[type="range"]::-webkit-slider-runnable-track {
  height: 1px;
  background: var(--rule);
}

.plate__control input[type="range"]::-moz-range-track {
  height: 1px;
  background: var(--rule);
}

.plate__control input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: var(--thumb);
  height: var(--thumb);
  margin-top: calc((1px - var(--thumb)) / 2);
  border: 0;
  border-radius: 50%;
  background: currentColor;
}

.plate__control input[type="range"]::-moz-range-thumb {
  width: var(--thumb);
  height: var(--thumb);
  border: 0;
  border-radius: 50%;
  background: currentColor;
}

.plate__control input[type="range"]:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 6px;
}


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

@media (max-width: 820px) {
  .page {
    margin: 0;
  }

  .nav {
    display: none;
  }

  /* 44px tap target; the negative margin keeps the bars on the page edge. */
  .nav-toggle {
    display: flex;
    /* The primary nav is hidden here, so without this the button would sit
       tucked against the wordmark instead of out at the edge. */
    margin: -10px -10px -10px auto;
    align-items: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    -webkit-tap-highlight-color: transparent;
  }

  .nav-toggle__bar {
    width: 24px;
    height: 2px;
    transition: transform 0.2s ease;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    transform: translateY(4px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-4px) rotate(-45deg);
  }

  /* Drops down full width from under the header as a panel rather than
     pushing the page down, so opening the menu doesn't reflow what you were
     looking at. Rules run edge to edge; text lines up with the wordmark. */
  .nav-drawer {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    gap: 0;
    padding: 0;
    border-bottom: 1px solid var(--rule);
    background: var(--cream);
    box-shadow: 0 12px 28px rgba(17, 17, 17, 0.12);
    font-size: 17px;
    text-align: left;
  }

  .nav-drawer a {
    padding: 15px var(--pad);
    border-bottom: 1px solid var(--rule);
  }

  .nav-drawer a:last-child {
    border-bottom: 0;
  }

  .feature {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    padding-top: 28px;
  }

  .feature__dek {
    margin-bottom: 18px;
  }
}

@media (max-width: 520px) {
  :root {
    --pad: 20px;
  }

  .masthead {
    gap: 16px;
    padding-top: 20px;
    padding-bottom: 18px;
  }

  .wordmark {
    font-size: 20px;
    gap: 9px;
  }

  .wordmark__mark {
    width: 26px;
    height: 26px;
  }

  .social {
    gap: 14px;
  }

  /* The reserve exists to stop the plate jumping between entries on
     desktop; at phone width it only opens a dead gap. */
  .feature {
    min-height: 0;
  }

  .log {
    padding-top: 11px;
    padding-bottom: 11px;
  }

  .log__date {
    font-size: 10px;
  }

  .feature__title {
    gap: 10px;
    font-size: 15px;
  }

  .feature__date,
  .plate__controls {
    font-size: 10.5px;
  }

  .feature__dek {
    font-size: 13px;
  }

  .feature__actions {
    padding-top: 26px;
  }

  /* Three controls side by side leaves each slider a few pixels wide. */
  .plate__controls {
    flex-direction: column;
    gap: 14px;
  }

  .plate__control {
    flex: 1 1 auto;
    width: 100%;
  }

  .plate__control-label {
    flex: 0 0 5.5em;
  }

  .plate {
    min-height: 340px;
  }

}

@media (min-width: 821px) {
  .nav-drawer {
    display: none !important;
  }
}