@layer reset, tokens, layout, type, home;

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

        html {
          hanging-punctuation: first last;
          text-size-adjust: 100%;
        }

        body {
          margin: 0;
        }

        img,
        svg {
          display: block;
          max-inline-size: 100%;
        }

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

        h1,
        h2,
        p,
        ol,
        dl,
        figure {
          margin: 0;
        }
      }

      @layer tokens {
        :root {
          --paper: #ecebe8;
          --ink: #171717;
          --ink-soft: #3f3e3b;
          --mute: #73716c;
          --silver: #9c9a95;
          --rule: #c9c7c2;
          --plate: #e3e2de;
          --gutter: clamp(1.05rem, 4.5vw, 4.25rem);
          --measure: 38.5rem;
          --rule-span: 9rem;
          --font-ui: "Roboto Flex", "Segoe UI", sans-serif;
          --font-serif: "Source Serif 4", Cambria, Georgia, serif;
        }
      }

      @layer layout {
        body {
          background: var(--paper);
          color: var(--ink);
          font-family: var(--font-serif);
        }

        .page {
          padding-block: 0 max(4.5rem, env(safe-area-inset-bottom));
          padding-left: max(var(--gutter), env(safe-area-inset-left));
          padding-right: max(var(--gutter), env(safe-area-inset-right));
        }

        .folio,
        .masthead,
        .issue-end {
          font-family: var(--font-ui);
        }

        .spread {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          grid-template-areas:
            "body"
            "index"
            "rail";
          row-gap: 0;
          align-items: start;
          padding-block-start: 1.35rem;
          background-image: linear-gradient(var(--rule), var(--rule));
          background-repeat: no-repeat;
          background-position: 0 0;
          background-size: var(--rule-span) 1px;
        }

        .spread__body {
          display: grid;
          grid-area: body;
          gap: 1.45em;
          min-inline-size: 0;
        }

        .spread > .index {
          grid-area: index;
        }

        .rail,
        .rail-slot {
          grid-area: rail;
        }

        @media (min-width: 64rem) {
          .spread {
            grid-template-columns: minmax(0, var(--measure)) 30rem;
            grid-template-areas:
              "body rail"
              "index index";
            justify-content: start;
            column-gap: clamp(2rem, 5vw, 3.5rem);
            padding-block-start: 1.7rem;
          }

          .spread__body {
            gap: 1.55em;
          }
        }
      }

      @layer type {
        .folio {
          display: grid;
          grid-template-columns: 1fr auto;
          align-items: baseline;
          column-gap: 1rem;
          row-gap: 0.35rem;
          padding-block: 0.95rem 0.85rem;
          border-block-end: 1px solid var(--ink);
          color: var(--ink);
          font-size: 0.68rem;
          font-weight: 500;
          letter-spacing: 0.12em;
          text-transform: uppercase;
        }

        .folio .wordmark {
          grid-column: 1 / -1;
        }

        .folio a {
          text-decoration: none;
        }

        @media (min-width: 40rem) {
          .folio {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 0.65rem 1.5rem;
            padding-block: 1.1rem 1rem;
            letter-spacing: 0.14em;
          }

          .folio .wordmark {
            grid-column: auto;
          }
        }

        .wordmark {
          font-stretch: 92%;
          font-weight: 620;
          letter-spacing: 0.02em;
          text-transform: none;
        }

        .wordmark i {
          font-style: normal;
          font-weight: 500;
        }

        .hero {
          max-inline-size: min(var(--measure), 100%);
          margin-block: 0.15rem 0.85rem;
        }

        .hero__frame {
          overflow: hidden;
          background: #111;
          aspect-ratio: 4 / 3;
        }

        .hero img {
          display: block;
          width: 100%;
          height: 100%;
          max-inline-size: none;
          object-fit: cover;
          object-position: 50% 50%;
        }

        .hero figcaption {
          padding-block-start: 0.55rem;
          color: var(--mute);
          font-family: var(--font-ui);
          font-size: 0.68rem;
          font-stretch: 95%;
          font-weight: 450;
          letter-spacing: 0.08em;
          text-transform: uppercase;
        }

        .article-open {
          padding-block: 1.6rem 1.35rem;
          max-inline-size: 54rem;
        }

        @media (min-width: 40rem) {
          .article-open {
            padding-block: 2.2rem 1.6rem;
          }
        }

        .kicker {
          margin-block-end: 1.1rem;
          color: var(--mute);
          font-family: var(--font-ui);
          font-size: 0.68rem;
          font-stretch: 90%;
          font-weight: 500;
          letter-spacing: 0.16em;
          text-transform: uppercase;
        }

        .headline {
          font-family: var(--font-serif);
          font-optical-sizing: auto;
          font-size: clamp(1.7rem, 1.05rem + 4.6vw, 3.15rem);
          font-weight: 600;
          letter-spacing: -0.028em;
          line-height: 1.14;
          overflow-wrap: break-word;
          text-wrap: pretty;
        }

        .dek {
          max-inline-size: 44rem;
          margin-block-start: 1.15rem;
          color: var(--ink-soft);
          font-optical-sizing: auto;
          font-size: clamp(1.05rem, 0.92rem + 0.7vw, 1.32rem);
          font-weight: 400;
          line-height: 1.5;
          overflow-wrap: break-word;
        }

        @media (min-width: 40rem) {
          .dek {
            margin-block-start: 1.6rem;
            line-height: 1.45;
          }
        }

        .byline {
          display: flex;
          flex-wrap: wrap;
          gap: 0.35rem 1.35rem;
          margin-block-start: 1.7rem;
          color: var(--mute);
          font-family: var(--font-ui);
          font-size: 0.78rem;
          font-stretch: 95%;
          font-weight: 450;
          letter-spacing: 0.04em;
        }

        .byline__author {
          color: var(--ink);
          font-weight: 550;
        }

        .body {
          font-optical-sizing: auto;
          font-size: 1.05rem;
          font-weight: 400;
          line-height: 1.7;
          overflow-wrap: break-word;
        }

        @media (min-width: 40rem) {
          .body {
            font-size: 1.0625rem;
            line-height: 1.8;
          }
        }

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

        .body strong {
          font-weight: 600;
        }

        .body a {
          text-decoration: underline;
          text-decoration-thickness: from-font;
          text-underline-offset: 0.18em;
          text-underline-position: under;
        }

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

        .rail h2,
        .index h2,
        .contributor h2 {
          margin-block-end: 0.85rem;
          color: var(--mute);
          font-family: var(--font-ui);
          font-size: 0.66rem;
          font-stretch: 92%;
          font-weight: 550;
          letter-spacing: 0.16em;
          text-transform: uppercase;
        }

        .specimen {
          margin-block: 0.15rem;
          padding: 1.2rem 0 1.05rem;
          background-image:
            linear-gradient(var(--ink), var(--ink)),
            linear-gradient(var(--rule), var(--rule));
          background-repeat: no-repeat;
          background-position: 0 0, 0 100%;
          background-size: var(--rule-span) 2px, var(--rule-span) 1px;
        }

        .specimen__kicker {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          gap: 0.35rem 1rem;
          color: var(--mute);
          font-family: var(--font-ui);
          font-size: 0.66rem;
          font-stretch: 90%;
          font-weight: 500;
          letter-spacing: 0.16em;
          text-transform: uppercase;
        }

        .specimen__name {
          margin-block: 0.45rem 0.15rem;
          font-family: var(--font-serif);
          font-optical-sizing: auto;
          font-size: clamp(1.7rem, 1.25rem + 1.8vw, 2.35rem);
          font-weight: 600;
          letter-spacing: -0.035em;
          line-height: 1.12;
          text-wrap: balance;
          overflow-wrap: break-word;
          hyphens: none;
        }

        .specimen__name i {
          display: block;
          margin-block-start: 0.18rem;
          font-size: clamp(0.92rem, 0.82rem + 0.35vw, 1.05rem);
          font-style: italic;
          font-weight: 450;
          letter-spacing: -0.02em;
          line-height: 1.25;
          white-space: normal;
        }

        .specimen__stats {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          gap: 0.85rem;
          margin: 1rem 0 0.95rem;
          padding: 0.95rem 0;
          background-image:
            linear-gradient(var(--rule), var(--rule)),
            linear-gradient(var(--rule), var(--rule));
          background-repeat: no-repeat;
          background-position: 0 0, 0 100%;
          background-size: var(--rule-span) 1px, var(--rule-span) 1px;
          list-style: none;
        }

        @media (min-width: 28rem) {
          .specimen__stats {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 1.1rem 1.6rem;
          }

          .specimen__stats li + li {
            padding-inline-start: 1.6rem;
            border-inline-start: 1px solid var(--rule);
          }
        }

        .specimen__stats strong {
          display: block;
          font-family: var(--font-serif);
          font-optical-sizing: auto;
          font-size: clamp(1.85rem, 1.2rem + 2.4vw, 2.55rem);
          font-weight: 600;
          letter-spacing: -0.045em;
          line-height: 0.95;
        }

        .specimen__stats span {
          display: block;
          margin-block-start: 0.4rem;
          color: var(--mute);
          font-family: var(--font-ui);
          font-size: 0.68rem;
          font-stretch: 95%;
          font-weight: 450;
          letter-spacing: 0.1em;
          text-transform: uppercase;
        }

        .specimen__note,
        .specimen__credit,
        .specimen__when {
          max-inline-size: 34rem;
          color: var(--ink-soft);
          font-size: 0.95rem;
          line-height: 1.4;
        }

        .specimen__credit,
        .specimen__when {
          margin-block-start: 0.35rem;
          color: var(--mute);
          font-family: var(--font-ui);
          font-size: 0.72rem;
          font-stretch: 95%;
          font-weight: 450;
          letter-spacing: 0.04em;
        }

        .pull {
          margin-block: 0.2rem;
          padding-inline-start: 0.9rem;
          border-inline-start: 1px solid var(--silver);
          font-optical-sizing: auto;
          font-size: clamp(1.2rem, 1rem + 1.2vw, 1.45rem);
          font-style: italic;
          font-weight: 400;
          letter-spacing: -0.02em;
          line-height: 1.35;
        }

        .endmark {
          display: inline-block;
          margin-inline-start: 0.35em;
          inline-size: 0.42em;
          block-size: 0.42em;
          background: var(--ink);
          vertical-align: 0.15em;
        }

        .rail {
          padding-block-start: 1.2rem;
          background-image: linear-gradient(var(--rule), var(--rule));
          background-repeat: no-repeat;
          background-position: 0 0;
          background-size: var(--rule-span) 1px;
        }

        @media (min-width: 64rem) {
          .rail-slot {
            align-self: stretch;
          }

          .spread > .rail,
          .rail-slot > .rail {
            position: sticky;
            inset-block-start: 1.4rem;
            align-self: start;
            padding-block-start: 0.2rem;
            background-image: none;
          }
        }

        .rail ol {
          padding: 0;
          list-style: none;
        }

        .rail li + li {
          margin-block-start: 1rem;
          padding-block-start: 1rem;
          background-image: linear-gradient(var(--rule), var(--rule));
          background-repeat: no-repeat;
          background-position: 0 0;
          background-size: var(--rule-span) 1px;
        }

        .rail a {
          display: grid;
          grid-template-columns: 2.2rem minmax(0, 1fr);
          gap: 0.55rem 0.7rem;
          padding-block: 0.15rem;
          text-decoration: none;
        }

        .rail__n {
          color: var(--silver);
          font-family: var(--font-ui);
          font-size: 0.72rem;
          font-weight: 500;
          letter-spacing: 0.08em;
          padding-block-start: 0.2rem;
        }

        .rail__body {
          display: grid;
          gap: 0.28rem;
          min-inline-size: 0;
        }

        .rail__sec {
          display: inline-block;
          justify-self: start;
          padding: 0.14rem 0.4rem 0.12rem;
          border: 1px solid var(--ink);
          color: var(--ink);
          font-family: var(--font-ui);
          font-size: 0.62rem;
          font-stretch: 92%;
          font-weight: 500;
          letter-spacing: 0.14em;
          line-height: 1.2;
          text-transform: uppercase;
        }

        .rail__t {
          font-family: var(--font-serif);
          font-size: 1.02rem;
          font-weight: 600;
          letter-spacing: -0.02em;
          line-height: 1.25;
          overflow-wrap: break-word;
        }

        .rail__d {
          color: var(--mute);
          font-family: var(--font-serif);
          font-size: 0.88rem;
          font-weight: 400;
          line-height: 1.35;
        }

        .index {
          margin-block-start: 2.4rem;
          padding-block-start: 1.1rem;
          background-image: linear-gradient(var(--ink), var(--ink));
          background-repeat: no-repeat;
          background-position: 0 0;
          background-size: var(--rule-span) 1px;
        }

        @media (min-width: 40rem) {
          .index {
            margin-block-start: 3.4rem;
            padding-block-start: 1.3rem;
          }
        }

        .index ol {
          padding: 0;
          list-style: none;
        }

        .index li + li {
          background-image: linear-gradient(var(--rule), var(--rule));
          background-repeat: no-repeat;
          background-position: 0 0;
          background-size: var(--rule-span) 1px;
        }

        .index a {
          display: grid;
          grid-template-columns: 2.2rem minmax(0, 1fr);
          gap: 0.8rem;
          padding-block: 0.95rem;
          text-decoration: none;
        }

        .index__n {
          color: var(--silver);
          font-family: var(--font-ui);
          font-size: 0.72rem;
          font-weight: 500;
          letter-spacing: 0.08em;
          padding-block-start: 0.35rem;
        }

        .index__t {
          font-size: 1.2rem;
          font-weight: 600;
          letter-spacing: -0.02em;
          line-height: 1.25;
        }

        .index__d {
          display: block;
          margin-block-start: 0.3rem;
          color: var(--mute);
          font-size: 0.95rem;
          font-weight: 400;
          line-height: 1.4;
        }

        .contributor {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          gap: 0.45rem;
          margin-block-start: 1.8rem;
          padding-block-start: 1.1rem;
          background-image: linear-gradient(var(--rule), var(--rule));
          background-repeat: no-repeat;
          background-position: 0 0;
          background-size: var(--rule-span) 1px;
          font-size: 0.95rem;
          line-height: 1.45;
        }

        @media (min-width: 32rem) {
          .contributor {
            grid-template-columns: auto 1fr;
            gap: 0.9rem 1.1rem;
            margin-block-start: 2.2rem;
            padding-block-start: 1.2rem;
          }
        }

        .contributor p {
          color: var(--ink-soft);
        }

        .issue-end {
          margin-block-start: 3.5rem;
          padding-block-start: 0.9rem;
          background-image: linear-gradient(var(--rule), var(--rule));
          background-repeat: no-repeat;
          background-position: 0 0;
          background-size: var(--rule-span) 1px;
          color: var(--mute);
          font-size: 0.68rem;
          font-weight: 450;
          letter-spacing: 0.12em;
          text-transform: uppercase;
        }
      }

        .hero img[style] {
          /* per-plate crop from IR; fallback 50% 50% above */
        }

        .rail ol,
        .index ol {
          counter-reset: island;
        }

        .rail li:not([hidden]),
        .index li:not([hidden]) {
          counter-increment: island;
        }

        .rail__n::before,
        .index__n::before {
          content: counter(island, decimal-leading-zero);
        }

        .home-lead {
          max-inline-size: 54rem;
          padding-block: 1.6rem 1.2rem;
        }

        .home-lead a {
          text-decoration: none;
        }

        .home-lead .headline {
          max-inline-size: 54rem;
        }

        .home-issue,
        .home-latest {
          margin-block-start: 2.4rem;
        }

      @layer home {
        .page--home {
          box-sizing: border-box;
          max-inline-size: 74rem;
          margin-inline: auto;
        }

        .page--home ul {
          margin: 0;
          padding: 0;
          list-style: none;
        }

        .page--home .masthead {
          display: grid;
          grid-template-columns: 1fr auto;
          align-items: baseline;
          column-gap: 1rem;
          row-gap: 0.3rem;
          padding-block: 0.75rem 0.7rem;
          border-block-end: 1px solid var(--ink);
        }

        .page--home .masthead .wordmark {
          grid-column: 1 / -1;
          font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
          text-decoration: none;
        }

        .page--home .masthead__meta {
          display: flex;
          flex-wrap: wrap;
          align-items: baseline;
          gap: 0.45rem 1.35rem;
          grid-column: 1 / -1;
          color: var(--ink);
          font-size: 0.68rem;
          font-weight: 500;
          letter-spacing: 0.14em;
          text-transform: uppercase;
        }

        .page--home .masthead__lang {
          display: flex;
          gap: 0.45rem;
        }

        .page--home .masthead__lang a {
          color: var(--mute);
          text-decoration: none;
        }

        .page--home .masthead__lang a[aria-current="page"] {
          color: var(--ink);
        }

        .page--home .masthead__lang a:hover {
          color: var(--ink);
        }

        @media (min-width: 40rem) {
          .page--home .masthead {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: baseline;
            gap: 0.7rem 1.6rem;
            padding-block: 0.8rem 0.7rem;
          }

          .page--home .masthead .wordmark {
            grid-column: auto;
          }

          .page--home .masthead__meta {
            grid-column: auto;
            margin-inline-start: auto;
          }
        }

        .page--home .home-cover {
          display: grid;
          gap: 1.35rem;
          padding-block: 1.6rem 0.35rem;
        }

        .page--home .home-cover__open {
          max-inline-size: 46rem;
        }

        .page--home .home-cover__open > a {
          display: grid;
          text-decoration: none;
        }

        .page--home .home-cover__open .kicker {
          margin-block-end: 0.85rem;
        }

        .page--home .dek--cover {
          max-inline-size: none;
        }

        @media (min-width: 40rem) {
          .page--home .home-cover {
            padding-block: 2.2rem 0.4rem;
          }
        }

        .page--home .plate--still {
          max-inline-size: none;
          margin: 0 0 0.7rem;
        }

        .page--home .plate--still .hero__frame {
          aspect-ratio: 4 / 3;
        }

        .page--home .plate--thumb {
          max-inline-size: 5.4rem;
          margin: 0;
        }

        .page--home .plate--thumb .hero__frame {
          aspect-ratio: 1 / 1;
        }

        .page--home .plate--thumb figcaption {
          display: none;
        }

        .page--home .home-secondary {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          gap: 0.55rem 0.9rem;
          padding-block: 0.85rem;
          text-decoration: none;
        }

        .page--home .home-secondary + .home-secondary {
          background-image: linear-gradient(var(--rule), var(--rule));
          background-repeat: no-repeat;
          background-position: 0 0;
          background-size: var(--rule-span) 1px;
        }

        .page--home .home-secondary:has(.plate--thumb) {
          grid-template-columns: 5.4rem minmax(0, 1fr);
          align-items: start;
        }

        .page--home .home-secondary > span {
          display: grid;
          align-content: start;
          row-gap: 0.55rem;
        }

        .page--home .home-secondary > span .hed--package {
          margin-block-start: -0.18em;
        }

        .page--home .home-secondary > span .dek--line {
          margin-block-start: 0.35rem;
        }

        .page--home .home-secondary .kicker {
          margin-block-end: 0.35rem;
        }

        .page--home .hed--package {
          font-family: var(--font-serif);
          font-size: 1.12rem;
          font-weight: 600;
          letter-spacing: -0.02em;
          line-height: 1.25;
          overflow-wrap: break-word;
        }

        .page--home .dek--line {
          max-inline-size: none;
          margin-block-start: 0.28rem;
          color: var(--mute);
          font-size: 0.92rem;
          line-height: 1.35;
        }

        @media (min-width: 48rem) {
          .page--home .home-cover__secondaries {
            display: grid;
            grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
            gap: 0 1.2rem;
          }

          .page--home .home-secondary {
            padding-block: 0.15rem 0;
          }

          .page--home .home-secondary + .home-secondary {
            padding-inline-start: 1.2rem;
            background-image: none;
            border-inline-start: 1px solid var(--rule);
          }

          .page--home .home-secondary:first-child {
            padding-block-start: 0.15rem;
          }
        }

        .page--home .home-issue.rail {
          position: static;
          max-inline-size: none;
          margin-block-start: 1.15rem;
          padding-block-start: 1.15rem;
          background-image: linear-gradient(var(--ink), var(--ink));
          background-repeat: no-repeat;
          background-position: 0 0;
          background-size: var(--rule-span) 1px;
        }

        .page--home .home-issue ol {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          column-gap: 2.4rem;
        }

        @media (min-width: 48rem) {
          .page--home .home-issue ol {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }

          .page--home .home-issue.rail li {
            margin-block-start: 0;
            padding-block: 1rem;
          }

          .page--home .home-issue.rail li:nth-child(-n + 2) {
            padding-block-start: 0.15rem;
            background-image: none;
          }
        }

        .page--home .home-feature {
          margin-block-start: 1.15rem;
          padding-block-start: 1.15rem;
          background-image: linear-gradient(var(--ink), var(--ink));
          background-repeat: no-repeat;
          background-position: 0 0;
          background-size: var(--rule-span) 1px;
        }

        .page--home .home-feature > h2 {
          margin-block-end: 1.05rem;
          color: var(--mute);
          font-family: var(--font-ui);
          font-size: 0.66rem;
          font-stretch: 92%;
          font-weight: 550;
          letter-spacing: 0.16em;
          text-transform: uppercase;
        }

        .page--home .home-feature__grid {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          gap: 1.6rem 1.8rem;
        }

        .page--home .home-card {
          display: grid;
          align-content: start;
          text-decoration: none;
        }

        .page--home .home-card .kicker {
          margin-block-end: 0.45rem;
        }

        .page--home .hed--card {
          font-family: var(--font-serif);
          font-size: clamp(1.12rem, 1rem + 0.4vw, 1.28rem);
          font-weight: 600;
          letter-spacing: -0.02em;
          line-height: 1.22;
          overflow-wrap: break-word;
        }

        @media (min-width: 48rem) {
          .page--home .home-feature {
            margin-block-start: 1.25rem;
          }

          .page--home .home-feature__grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }

          .page--home .home-latest ol {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            column-gap: 2.4rem;
          }

          .page--home .home-latest li + li {
            background-image: linear-gradient(var(--rule), var(--rule));
          }

          .page--home .home-latest li:nth-child(-n + 2) {
            background-image: none;
          }
        }

        .page--home .home-cover__open:hover .headline,
        .page--home .home-secondary:hover .hed--package,
        .page--home .home-card:hover .hed--card {
          color: var(--ink-soft);
        }

        .page--home .home-latest {
          max-inline-size: none;
          margin-block-start: 1.15rem;
          padding-block-start: 1.15rem;
        }
      }