@layer components {
.masthead {
  padding: 0 clamp(1rem, 4vw, 3rem) 1.25rem;
  border-bottom: 1px solid var(--ink);
}

.issue-line {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  gap: 1.5rem;
  align-items: center;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.masthead__hero {
  position: relative;
  padding: clamp(2rem, 5vw, 3.8rem) 0 clamp(1.2rem, 3vw, 2rem);
  isolation: isolate;
}

.masthead__wordmark h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(5rem, 10.5vw, 7.25rem);
  font-weight: 560;
  letter-spacing: -0.085em;
  line-height: 0.78;
  white-space: nowrap;
}

.masthead__wordmark {
  position: relative;
  z-index: 2;
}

.masthead__byline {
  max-width: 38rem;
  margin: 1rem 0 0 0.25rem;
  font-family: var(--display);
  font-size: clamp(1rem, 1.65vw, 1.22rem);
  font-style: italic;
  line-height: 1.22;
}

.masthead__byline strong {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-style: normal;
  letter-spacing: .02em;
}

.anchor-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin: 0;
  background: var(--ink);
  border: 1px solid var(--ink);
}

.anchor-nav a {
  min-width: 0;
  padding: 0.6rem 0.45rem;
  color: var(--paper-bright);
  border-right: 1px solid var(--paper-deep);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-align: center;
  text-decoration: none;
  transition: color 130ms ease, background 130ms ease;
}

.anchor-nav a:last-child {
  border-right: 0;
}

.anchor-nav a:hover,
.anchor-nav a[aria-current="location"] {
  color: var(--ink);
  background: var(--glass);
}

.section {
  position: relative;
  padding: var(--section-pad) clamp(1.25rem, 6vw, 4.75rem);
  border-bottom: 1px solid var(--ink);
}

.introduction {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr);
  gap: clamp(2rem, 7vw, 6rem);
  background: linear-gradient(90deg, transparent 49.9%, var(--home-divider-pattern) 50%, transparent 50.1%);
}

.introduction h2,
.section-heading h2,
.dispatch-preview h2,
.contact h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.35rem, 7vw, 6.5rem);
  font-weight: 470;
  letter-spacing: -0.055em;
  line-height: 0.87;
}

.introduction__copy {
  align-self: end;
}

.introduction__copy p {
  max-width: 34rem;
}

.introduction__copy .lede {
  margin-top: 0;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(15rem, 0.55fr);
  gap: 3rem;
  align-items: end;
  margin-bottom: 5rem;
}

.section-heading > p {
  max-width: 25rem;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--ink);
  font-family: var(--display);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.3;
}

.about .section-heading h2 {
  font-size: clamp(3.25rem, 4.6vw, 4.2rem);
  letter-spacing: -0.045em;
  line-height: 0.97;
}

.project {
  position: relative;
  display: grid;
  grid-template-columns: minmax(16rem, 0.8fr) minmax(20rem, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding: 4rem 0;
  border-top: 1px solid var(--ink);
}

.project:nth-of-type(even) {
  grid-template-columns: minmax(20rem, 1.2fr) minmax(16rem, 0.8fr);
}

.project:nth-of-type(even) .project__copy {
  grid-column: 2;
  grid-row: 1;
}

.project:nth-of-type(even) .project__visual {
  grid-column: 1;
  grid-row: 1;
}

.project__index {
  position: absolute;
  top: 1rem;
  left: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
}

.project__copy h3 {
  margin: 0.1rem 0 1rem;
  font-family: var(--display);
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  font-weight: 520;
  letter-spacing: -0.045em;
  line-height: 0.9;
}

.project__kind,
.project__note {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: .02em;
}

.project__note {
  color: var(--ink-soft);
  text-transform: none;
}

.project__facts {
  padding: 0;
  margin: 1.5rem 0;
  list-style: none;
  border-top: 1px solid var(--rule-faint);
}

.project__facts li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.25rem;
  border-bottom: 1px solid var(--rule-faint);
  font-size: 0.82rem;
}

.project__facts li::before {
  /* Participate in the first text line so the marker follows its baseline.
     The negative margin occupies the existing hanging-indent gutter. */
  display: inline-block;
  width: 1.25rem;
  margin-inline-start: -1.25rem;
  color: var(--rust);
  content: "◆";
  font-size: 0.6rem;
}

.project__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.project__visual {
  min-width: 0;
}

.protocol-visual {
  background: var(--paper-bright);
  border: 1px solid var(--ink);
  box-shadow: 8px 8px 0 var(--glass-deep), 9px 9px 0 var(--ink);
  transform: rotate(1.2deg);
}

.protocol-visual__label {
  display: flex;
  justify-content: space-between;
  padding: 0.55rem 0.75rem;
  color: var(--paper-bright);
  background: var(--ink);
  font-family: var(--mono);
  font-size: 0.62rem;
}

.protocol-visual pre {
  min-height: 15rem;
  margin: 0;
  padding: 2.2rem clamp(1rem, 4vw, 2.2rem);
  overflow: auto;
  font-family: var(--mono);
  font-size: clamp(0.65rem, 1.4vw, 0.83rem);
  line-height: 1.7;
}

.protocol-visual pre b {
  color: var(--rust);
}

.protocol-visual pre i {
  color: var(--moss-dark);
  font-weight: 700;
  font-style: normal;
}

.protocol-visual__pulse {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.55rem 0.75rem;
  background: var(--paper-deep);
  border-top: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 0.58rem;
}

.protocol-visual__pulse i {
  width: 0.42rem;
  aspect-ratio: 1;
  background: var(--moss-dark);
  border: 1px solid var(--ink);
  border-radius: 50%;
}

.protocol-visual__pulse span {
  margin-left: auto;
}

.project-shot {
  margin: 0;
  padding: 0.65rem;
  background: var(--ink);
  border: 1px solid var(--ink);
  box-shadow: 7px 7px 0 var(--moss);
}

.project-shot img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--project-image-border);
}

.image-viewer-trigger,
.image-viewer-trigger img {
  cursor: var(--cursor-zoom-in, zoom-in);
}

.image-viewer-trigger {
  display: block;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  text-decoration: none;
}

.image-viewer-trigger img {
  transition: filter 140ms ease, opacity 140ms ease;
}

.image-viewer-trigger:hover img,
.image-viewer-trigger:focus-visible img {
  filter: contrast(1.06) brightness(1.06);
  opacity: 0.92;
}

.revdict-shot {
  padding: 0.45rem;
  background: var(--project-image-background);
}

.revdict-shot img {
  aspect-ratio: 1600 / 844;
}

.project-shot--wide img {
  aspect-ratio: 16 / 9;
}

.project-shot figcaption,
.sao-shots figcaption {
  padding: 0.55rem 0.25rem 0.05rem;
  color: var(--paper-bright);
  font-family: var(--mono);
  font-size: 0.56rem;
  text-align: center;
}

.revdict-shot figcaption { color: var(--project-caption-foreground); }

.sao-shots {
  position: relative;
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: flex-start;
  margin: 0;
  padding: 2.5rem 1rem 3.5rem;
  background:
    radial-gradient(circle at 30% 35%, var(--project-image-glow), transparent 17rem),
    var(--glass);
  border: 1px solid var(--ink);
  box-shadow: 8px 8px 0 var(--rust);
}

.sao-shots .image-viewer-trigger {
  width: min(43%, 12rem);
}

.sao-shots img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border: 5px solid var(--ink);
  border-radius: 1rem;
  box-shadow: 5px 6px 0 var(--project-image-shadow);
}

.image-lightbox-open {
  overflow: hidden;
}

.image-lightbox {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: clamp(1rem, 3vw, 2.5rem);
  color: var(--paper-bright);
  background: var(--image-viewer-background);
  border: 0;
}

.image-lightbox::backdrop {
  background: var(--image-viewer-backdrop);
}

.image-lightbox__panel {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.image-lightbox figure {
  display: grid;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  place-items: center;
}

.image-lightbox img {
  width: auto;
  max-width: min(94vw, 1600px);
  height: auto;
  max-height: calc(100dvh - 8.5rem);
  object-fit: contain;
  border: 1px solid var(--image-viewer-border);
  box-shadow: 0 1rem 4rem var(--image-viewer-shadow);
  cursor: var(--cursor-zoom-out, zoom-out);
}

.image-lightbox figcaption {
  max-width: 54rem;
  margin-top: 0.8rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: .02em;
  text-align: center;
}

.image-lightbox__close,
.image-lightbox__original {
  position: absolute;
  z-index: 2;
  color: var(--paper-bright);
  background: var(--ink);
  border: 1px solid var(--image-viewer-border);
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.image-lightbox__close {
  top: 0;
  right: 0;
  padding: 0.55rem 0.7rem;
  cursor: var(--cursor-link, pointer);
}

.image-lightbox__close span {
  color: var(--rust);
  font-size: 1rem;
}

.image-lightbox__original {
  right: 0;
  bottom: 0;
  padding: 0.4rem 0.55rem;
}

.sao-shots figcaption {
  position: absolute;
  right: 1rem;
  bottom: 0.75rem;
  left: 1rem;
  color: var(--ink);
}

.archive-callout {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  padding: 1rem;
  color: var(--paper-bright);
  background: var(--rust);
  border: 1px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 0.75rem;
  text-decoration: none;
}

.archive-callout:hover {
  color: var(--ink);
  background: var(--glass);
}

.work {
  color: var(--paper-bright);
  background:
    linear-gradient(90deg, var(--work-pattern) 1px, transparent 1px) 0 0 / 5rem 100%,
    var(--work-background);
}

.section-heading--inverse > p {
  border-color: var(--work-subtle-border);
}

.work .eyebrow {
  color: var(--moss);
}

.work__feature {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 4rem;
  padding: 4rem 0;
  border-block: 1px solid var(--work-border);
}

.big-number {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  color: var(--glass);
}

.big-number strong {
  font-family: var(--display);
  font-size: clamp(8rem, 17vw, 13rem);
  font-weight: 420;
  letter-spacing: -0.09em;
  line-height: 0.65;
}

.big-number > span {
  font-family: var(--display);
  font-size: 3rem;
  line-height: 0.9;
}

.big-number small {
  grid-column: 1 / -1;
  max-width: 18rem;
  margin-top: 2rem;
  color: var(--paper-bright);
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.5;
}

.work__details {
  display: grid;
  gap: 2rem;
}

.work__details article {
  display: grid;
  align-items: first baseline;
  grid-template-columns: 2rem 1fr;
  column-gap: 1rem;
}

.work__details article > span {
  color: var(--rust);
  font-family: var(--mono);
  font-size: 0.7rem;
}

.work__details h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.65rem;
  font-weight: 520;
}

.work__details p {
  grid-column: 2;
  margin: 0.4rem 0 0;
  color: var(--work-secondary-foreground);
  font-size: 0.85rem;
}

.work-chapters {
  display: grid;
  grid-template-columns: minmax(14rem, 0.65fr) minmax(20rem, 1.35fr);
  gap: clamp(2rem, 6vw, 5rem);
  padding: 4rem 0;
  border-bottom: 1px solid var(--work-border);
}

.work-chapters__intro h3 {
  max-width: 23rem;
  margin: 0 0 1rem;
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 520;
  line-height: 0.98;
}

.work-chapters__intro > p:not(.eyebrow) {
  max-width: 27rem;
  color: var(--work-secondary-foreground);
  font-size: 0.82rem;
}

.button--work {
  margin-top: 1.25rem;
  color: var(--ink);
  background: var(--moss);
  border-color: var(--paper-bright);
  box-shadow: 3px 3px 0 var(--paper-bright);
}

.work-chapters ol {
  padding: 0;
  margin: 0;
  list-style: none;
  border-top: 1px solid var(--work-border);
}

.work-chapters li {
  border-bottom: 1px solid var(--work-border);
}

.work-chapters li a {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.2rem 1rem;
  padding: 1rem 0.75rem;
  text-decoration: none;
  transition: color 130ms ease, background 130ms ease, padding 130ms ease;
}

.work-chapters li a:hover {
  padding-inline: 1rem 0.5rem;
  color: var(--ink);
  background: var(--glass);
}

.work-chapters li span {
  grid-row: 1 / 3;
  color: var(--rust);
  font-family: var(--mono);
  font-size: 0.62rem;
}

.work-chapters li a:hover span {
  color: var(--rust-dark);
}

.work-chapters li strong {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 520;
  line-height: 1;
}

.work-chapters li small {
  color: var(--work-muted-foreground);
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: .02em;
}

.work-chapters li a:hover small {
  color: var(--ink-soft);
}

.ledger {
  margin-top: 3rem;
  border: 1px solid var(--work-border);
}

.ledger > div {
  display: grid;
  grid-template-columns: minmax(9rem, 0.28fr) 1fr;
  border-bottom: 1px solid var(--work-border);
}

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

.ledger span,
.ledger strong {
  padding: 0.8rem 1rem;
}

.ledger span {
  color: var(--ink);
  background: var(--moss);
  font-family: var(--mono);
  font-size: 0.65rem;
}

.ledger strong {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 400;
}

.dispatch-preview {
  display: grid;
  grid-template-columns: 0.35fr 1fr 0.45fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  background: linear-gradient(135deg, transparent 0 49.5%, var(--dispatch-pattern) 49.5% 50.5%, transparent 50.5%) 0 0 / 28px 28px;
}

.dispatch-preview__stamp {
  width: min(100%, 10rem);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  color: var(--rust);
  border: 8px double var(--rust);
  border-radius: 50%;
  font-family: var(--mono);
  text-align: center;
  transform: rotate(-11deg);
}

.dispatch-preview__stamp span {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

.dispatch-preview__stamp i {
  font-size: 0.8rem;
  font-style: normal;
}

.dispatch-preview__copy > p:not(.eyebrow) {
  max-width: 35rem;
}

.dispatch-preview__frequency {
  position: relative;
  height: 17rem;
  overflow: hidden;
  color: var(--paper-bright);
  background: var(--moss-dark);
  border: 1px solid var(--ink);
  box-shadow: var(--shadow-hard);
}

.dispatch-preview__frequency span {
  position: absolute;
  left: 50%;
  width: 1px;
  height: 150%;
  background: var(--glass);
  transform-origin: bottom;
}

.dispatch-preview__frequency span:nth-child(1) { transform: translate(-50%, -30%) rotate(0deg); }
.dispatch-preview__frequency span:nth-child(2) { transform: translate(-50%, -30%) rotate(22.5deg); }
.dispatch-preview__frequency span:nth-child(3) { transform: translate(-50%, -30%) rotate(45deg); }
.dispatch-preview__frequency span:nth-child(4) { transform: translate(-50%, -30%) rotate(67.5deg); }
.dispatch-preview__frequency span:nth-child(5) { transform: translate(-50%, -30%) rotate(90deg); }
.dispatch-preview__frequency span:nth-child(6) { transform: translate(-50%, -30%) rotate(112.5deg); }
.dispatch-preview__frequency span:nth-child(7) { transform: translate(-50%, -30%) rotate(135deg); }
.dispatch-preview__frequency span:nth-child(8) { transform: translate(-50%, -30%) rotate(157.5deg); }

.dispatch-preview__frequency strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: .02em;
  text-align: center;
}

.about__lead-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.about__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.about-note {
  position: relative;
  min-height: 15rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--paper-bright);
  border: 1px solid var(--ink);
  box-shadow: 4px 4px 0 var(--rule-faint);
}

.about__grid .about-note:nth-child(2) {
  background: var(--glass);
  transform: rotate(0.3deg);
}

.about-note--large {
  min-height: 30rem;
  background: var(--moss);
  transform: rotate(-0.35deg);
}

.about-note--wide {
  grid-column: 1 / -1;
  min-height: auto;
}

.about-note__pin {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  width: 4rem;
  aspect-ratio: 1;
  background: var(--rust);
  border: 1px solid var(--ink);
  border-radius: 50%;
  box-shadow: 2px 3px 0 var(--ink);
}

.about-note h3 {
  margin: 0.2rem 0 1rem;
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 500;
  line-height: 0.95;
}

.about-note--large > p:not(.eyebrow) {
  max-width: 42rem;
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  line-height: 1.25;
}

.about-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding: 0;
  margin: 2.5rem 0 0;
  list-style: none;
}

.about-principles li {
  display: grid;
  min-height: 9rem;
  align-content: start;
  padding: 0.85rem;
  background: var(--about-principle-background);
  border: 1px solid var(--ink);
}

/* Five items: three across the top, two wider cards beneath. */
@media (min-width: 601px) {
  .about-principles:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(6, 1fr); }
  .about-principles:has(> li:nth-child(5):last-child) > li { grid-column: span 2; }
  .about-principles:has(> li:nth-child(5):last-child) > li:nth-child(n + 4) { grid-column: span 3; }
}

.about-principles span,
.about-principles small {
  font-family: var(--mono);
}

.about-principles span {
  margin-bottom: 1.1rem;
  color: var(--rust-dark);
  font-size: 0.6rem;
  font-weight: 700;
}

.about-principles strong {
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1.05;
}

.about-principles small {
  margin-top: 0.45rem;
  font-size: 0.55rem;
  line-height: 1.4;
}

.about-dossier {
  min-width: 0;
  color: var(--paper-bright);
  background:
    linear-gradient(var(--work-pattern) 50%, transparent 50%) 0 0 / 100% 4px,
    var(--ink);
  border: 6px ridge var(--prose-code-border);
  box-shadow: 6px 6px 0 var(--rust);
  font-family: var(--mono);
  transform: rotate(0.5deg);
}

.about-dossier header {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem;
  color: var(--ink);
  background: var(--glass);
  border-bottom: 1px solid var(--paper-bright);
  font-size: 0.62rem;
}

.about-dossier header span {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.about-dossier header i {
  width: 0.45rem;
  aspect-ratio: 1;
  background: var(--rust);
  border-radius: 50%;
  box-shadow: 0 0 0.6rem var(--rust);
}

.about-dossier dl {
  margin: 0;
  padding: 1.25rem;
}

.about-dossier dl div {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0.6rem;
  padding: 0.7rem 0;
  border-bottom: 1px dotted var(--work-subtle-border);
  font-size: 0.62rem;
}

.about-dossier dt {
  color: var(--moss);
}

.about-dossier dd {
  margin: 0;
}

.about-dossier > p {
  margin: 1rem 1.25rem 1.25rem;
  color: var(--glass);
  font-size: 0.67rem;
}

.about-dossier > p span {
  color: var(--rust);
}

.desk-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.desk-list span {
  padding: 0.35rem 0.65rem;
  color: var(--paper-bright);
  background: var(--ink);
  border: 1px solid var(--ink);
  box-shadow: 2px 2px 0 var(--rust);
  font-family: var(--mono);
  font-size: 0.65rem;
}

/* Desktop About: the working-style note is an L. A mask cuts a notch from its
   top-right corner, the profile sits in that notch outside the note, and the
   principles run the full width beneath both. The invisible notch span reserves
   the space inside the note and draws the notch's inner edges. Narrow screens
   keep the stacked layout. */
.about-note__notch { display: none; }

@media (min-width: 851px) {
  .about__lead-grid {
    --about-notch-w: 21rem;
    --about-notch-h: 26rem;
    --about-notch-gap: 1.5rem;
  }
  .about__lead-grid > * { grid-area: 1 / 1; }

  .about-note--large {
    min-height: 0;
    -webkit-mask:
      linear-gradient(#000 0 0) -12px -60px / calc(100% - var(--about-notch-w) + 12px) calc(100% + 72px) no-repeat,
      linear-gradient(#000 0 0) -12px var(--about-notch-h) / calc(100% + 24px) calc(100% - var(--about-notch-h) + 12px) no-repeat;
    mask:
      linear-gradient(#000 0 0) -12px -60px / calc(100% - var(--about-notch-w) + 12px) calc(100% + 72px) no-repeat,
      linear-gradient(#000 0 0) -12px var(--about-notch-h) / calc(100% + 24px) calc(100% - var(--about-notch-h) + 12px) no-repeat;
    mask-clip: no-clip;
  }
  .about-note--large > .about-note__pin { top: -1.25rem; right: calc(var(--about-notch-w) + 1.5rem); }
  .about-note__notch {
    display: block;
    float: right;
    width: var(--about-notch-w);
    height: var(--about-notch-h);
  }
  .about-note__notch::before {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: calc(var(--about-notch-w) + 1px);
    height: calc(var(--about-notch-h) + 1px);
    border-bottom: 1px solid currentColor;
    border-left: 1px solid currentColor;
    pointer-events: none;
  }
  .about-principles { clear: both; }
  .about-principles strong { font-size: 1.45rem; line-height: 1.1; }
  .about-principles small { margin-top: 0.65rem; font-size: 0.85rem; line-height: 1.6; }

  .about__lead-grid > .about-dossier {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-self: end;
    align-self: start;
    width: calc(var(--about-notch-w) - var(--about-notch-gap));
    min-height: calc(var(--about-notch-h) - var(--about-notch-gap));
  }
  .about__lead-grid > .about-dossier > p { margin-top: auto; }

  .about__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about__grid .about-note { min-height: 0; padding: 1.5rem; }
  .about__grid .about-note h3 { margin-bottom: 0.6rem; font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.1; }
  .about__grid .about-note p:not(.eyebrow) { margin: 0; font-size: 0.95rem; line-height: 1.55; }
}

@media (min-width: 1100px) {
  .about__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about__grid .about-note--wide { grid-column: auto; }
}

.contact {
  overflow: hidden;
  color: var(--paper-bright);
  background: var(--rust);
}

.contact::after {
  position: absolute;
  right: -5rem;
  bottom: -8rem;
  width: 26rem;
  aspect-ratio: 1;
  border: 5rem double var(--contact-pattern);
  border-radius: 50%;
  content: "";
}

.contact .eyebrow {
  color: var(--paper-bright);
}

.contact h2 {
  position: relative;
  z-index: 1;
  max-width: 55rem;
}

.contact__email {
  position: relative;
  z-index: 1;
  display: inline-grid;
  grid-template-columns: auto auto;
  column-gap: 1rem;
  align-items: center;
  margin-top: 3rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid currentColor;
  font-family: var(--display);
  font-size: clamp(1.35rem, 4vw, 3.4rem);
  font-style: italic;
  line-height: 1;
  text-decoration: none;
}

.contact__email small {
  grid-column: 1;
  margin-top: 0.45rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-style: normal;
  letter-spacing: .02em;
}

.contact__email b {
  grid-column: 2;
  grid-row: 1 / 3;
  font-weight: 400;
  transition: transform 140ms ease;
}

.contact__email:hover b {
  transform: translate(0.25rem, -0.25rem);
}

.contact__links {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-top: 4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
}

@media (max-width: 850px) {
  .introduction,
  .section-heading,
  .work__feature,
  .work-chapters,
  .about__lead-grid,
  .dispatch-preview {
    grid-template-columns: 1fr;
  }

  .introduction {
    background: transparent;
  }

  .section-heading {
    gap: 2rem;
    margin-bottom: 3rem;
  }

  .project,
  .project:nth-of-type(even) {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .project:nth-of-type(even) .project__copy,
  .project:nth-of-type(even) .project__visual {
    grid-column: 1;
    grid-row: auto;
  }

  .project:nth-of-type(even) .project__copy {
    grid-row: 1;
  }

  .work__feature {
    gap: 3rem;
  }

  .dispatch-preview__stamp {
    width: 7.5rem;
  }

  .dispatch-preview__frequency {
    max-width: 20rem;
  }
}

@media (max-width: 700px) {
  .masthead__hero {
    padding: 1.6rem 0 1.2rem;
  }
}

@media (max-width: 1000px) {
  .issue-line {
    grid-template-columns: 1fr auto auto;
    gap: .35rem .75rem;
  }
  .issue-line > span:nth-child(3),
  .issue-line > span:nth-child(4) {
    display: none;
  }
}

@media (max-width: 600px) {

  .masthead__hero {
    padding-top: 1.55rem;
  }

  .masthead__wordmark h1 {
    font-size: clamp(2.45rem, 12vw, 3rem);
  }

  .masthead__byline {
    margin-top: 0.85rem;
  }

  .anchor-nav {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border: 0;
    border-block: 1px solid var(--rule-faint);
    background: var(--paper);
  }

  .anchor-nav::-webkit-scrollbar {
    display: none;
  }

  .anchor-nav a {
    position: relative;
    flex: 1 0 auto;
    min-height: 2.75rem;
    padding: 0.8rem 0.3rem 0.65rem;
    border-right: 0;
    color: var(--ink-soft);
    font-size: 0.7rem;
    white-space: nowrap;
  }

  .anchor-nav a:hover,
  .anchor-nav a[aria-current="location"] {
    color: var(--ink);
    background: transparent;
  }

  .anchor-nav a[aria-current="location"]::after {
    position: absolute;
    right: 0.3rem;
    bottom: 0;
    left: 0.3rem;
    height: 2px;
    background: var(--rust);
    content: "";
  }

  .section-heading h2,
  .introduction h2,
  .dispatch-preview h2,
  .contact h2 {
    font-size: clamp(2.35rem, 11vw, 3rem);
    line-height: 0.94;
  }

  .project__copy h3 {
    font-size: clamp(2.25rem, 10vw, 2.75rem);
    line-height: 0.96;
  }

  .big-number strong {
    font-size: clamp(5rem, 24vw, 6.25rem);
  }

  .big-number > span {
    font-size: 2rem;
  }

  .archive-callout {
    align-items: flex-start;
    flex-direction: column;
  }

  .ledger > div {
    grid-template-columns: 1fr;
  }

  .about__grid {
    grid-template-columns: 1fr;
  }

  .about-note,
  .about-note--large,
  .about-note--wide {
    grid-column: 1;
  }

}

}

/* Mobile readability takes precedence over decorative skin recipes. Keep their
   fonts, surfaces and borders; give the same content a usable reading measure. */
@layer preferences {
  @media (max-width: 600px) {
    .about .section-heading h2 {
      font-size: clamp(1.9rem, 8vw, 2.2rem);
      line-height: 1.12;
    }
    .about-note { min-height: 0; padding: 1rem; }
    .about-note h3 { font-size: clamp(1.7rem, 7.5vw, 2rem); line-height: 1.12; }
    .about-note--large > .eyebrow { padding-right: 1.2rem; }
    .about-note--large > p:not(.eyebrow) { font-size: 1.125rem; line-height: 1.5; }
    .about-note__pin { width: .8rem; height: .8rem; top: 1.05rem; right: .8rem; box-shadow: none; }
    .about-principles { grid-template-columns: 1fr; gap: .6rem; margin-top: 1.25rem; }
    .about-principles li {
      grid-template-columns: 1.5rem minmax(0, 1fr);
      column-gap: .5rem; row-gap: .35rem;
      min-height: 0; padding: .85rem .65rem;
    }
    .about-principles span { grid-column: 1; grid-row: 1 / 3; margin: .15rem 0 0; font-size: .7rem; }
    .about-principles strong { grid-column: 2; font-size: 1.1rem; line-height: 1.25; }
    .about-principles small { grid-column: 2; margin: 0; font-size: .8125rem; line-height: 1.5; }

    .about-dossier {
      transform: none; border-width: 2px; box-shadow: 3px 3px 0 var(--rust);
      background-image: none;
    }
    .about-dossier header { padding: .7rem .8rem; font-size: .75rem; }
    .about-dossier dl { padding: .5rem .9rem; }
    .about-dossier dl div { grid-template-columns: 4rem minmax(0, 1fr); gap: .3rem .6rem; font-size: .8125rem; line-height: 1.5; }
    .about-dossier dt { font-size: .7rem; }
    .about-dossier dd { overflow-wrap: anywhere; }
    .about-dossier > p { margin: .8rem .9rem 1rem; font-size: .75rem; }

    .ledger span { padding: .45rem .8rem; font-size: .7rem; }
    .ledger strong { padding: .65rem .8rem; font-size: .8125rem; line-height: 1.7; }

    .dispatch-preview { grid-template-columns: 4rem minmax(0, 1fr); gap: 1.4rem 1rem; }
    .dispatch-preview__stamp { grid-area: 1 / 1; width: 4rem; border-width: 4px; }
    .dispatch-preview__stamp span { font-size: 1.4rem; }
    .dispatch-preview__stamp i { font-size: .6rem; }
    .dispatch-preview__frequency { grid-area: 1 / 2; height: 4rem; width: 100%; max-width: none; }
    .dispatch-preview__frequency strong { font-size: .65rem; }
    .dispatch-preview__copy { grid-area: 2 / 1 / auto / -1; min-width: 0; }
  }
  @media (max-width: 360px) {
    .about-dossier dl div { grid-template-columns: 1fr; gap: .15rem; }
  }
}