/* Studio print edition.
   This layer sits on top of skin-graza.css and gives Studio a journal and
   print-shop character: book typography, flat inks, square plates, captioned
   figures, and the 2014 logotype as a masthead. Each rule reuses the selector
   it overrides, so it wins on source order alone. Lab is untouched. */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/newsreader-latin-opsz-wght.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/newsreader-latin-opsz-wght-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Tokens ------------------------------------------------------------ */

/* Book serif for reading and display; a typewriter mono for labels only.
   Offset shadows go flat, so every Lab selector that reads them prints flat. */
:root[data-skin="graza"] {
  --graza-font-display: 'Newsreader', Georgia, serif;
  --graza-font-body: 'Newsreader', Georgia, serif;
  --graza-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --graza-type-label: 0.8125rem;
  --graza-type-ui: 0.8125rem;
  --print-radius: 3px;
  --shadow: none;
  --shadow-coral: none;
}

/* ---- Type -------------------------------------------------------------- */

/* Newsreader sets its own display spacing at large optical sizes, so the
   Georgia-era negative tracking would crush it. */
html[data-skin="graza"] body {
  font-size: 1.0625rem;
  font-optical-sizing: auto;
}

html[data-skin="graza"] h1,
html[data-skin="graza"] h2,
html[data-skin="graza"] .page-hero h1,
html[data-skin="graza"] .work-heading,
html[data-skin="graza"] .home-page .hero h1,
html[data-skin="graza"] .work-card h2,
html[data-skin="graza"] .work-card h3,
html[data-skin="graza"] .publications h2,
html[data-skin="graza"] .blog-post h1,
html[data-skin="graza"] .featured-post__content h2,
html[data-skin="graza"] .editor-note h2,
html[data-skin="graza"] .home-page [data-home-section="process"] .process-card h3,
html[data-skin="graza"] .home-page [data-home-section="contact"] .contact > h2 {
  letter-spacing: -0.022em;
}

html[data-skin="graza"] main h3,
html[data-skin="graza"] .nav-brand,
html[data-skin="graza"] .nav-brand span,
html[data-skin="graza"] .home-page [data-home-section="talks"] .blog-card h3,
html[data-skin="graza"] .home-page [data-home-section="testimonials"] .testimonial p {
  letter-spacing: -0.012em;
}

/* Labels set in mono read as a typewritten slug, not a startup chip. */
html[data-skin="graza"] .nav-links {
  font-size: var(--graza-type-ui);
  letter-spacing: 0.04em;
}

/* ---- Buttons ----------------------------------------------------------- */

html[data-skin="graza"] .button,
html[data-skin="graza"] .home-page .button {
  border-radius: var(--print-radius);
  box-shadow: none;
  font-weight: 500;
  letter-spacing: 0.06em;
}

html[data-skin="graza"] .button:is(:hover, :focus-visible),
html[data-skin="graza"] .home-page .button:is(:hover, :focus-visible) {
  box-shadow: none;
  transform: none;
}

html[data-skin="graza"] .button.secondary {
  background: transparent;
}

html[data-skin="graza"] .button.secondary:is(:hover, :focus-visible) {
  background: var(--graza-ink);
  color: var(--graza-cream);
}

html[data-skin="graza"] .button.primary:is(:hover, :focus-visible) {
  background: var(--graza-coral);
  color: var(--graza-ink);
}

html[data-skin="graza"] .nav-cta,
html[data-skin="graza"] .nav-cta:is(:hover, :focus-visible) {
  border-radius: var(--print-radius);
  box-shadow: none;
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* ---- Hero: a masthead on paper ----------------------------------------- */

html[data-skin="graza"] .home-page .hero {
  min-height: 0;
  padding: clamp(1.5rem, 2.5vw, 2.25rem) 0 clamp(3rem, 6vw, 5.5rem);
  color: var(--graza-ink);
  background: var(--graza-cream);
  border-bottom: 1px solid var(--graza-ink);
}

@media (min-width: 48rem) and (max-width: 1100px) {
  html[data-skin="graza"] .home-page .hero {
    min-height: 0;
  }
}

html[data-skin="graza"] .home-page .hero::after {
  display: none;
}

html[data-skin="graza"] .home-page .hero :focus-visible {
  outline-color: var(--graza-ink);
}

/* The dots print at full strength around the masthead and fade behind the
   copy, so no trail crosses the headline or the list at full ink. The
   fallback keeps its own contour mask. */
@media (prefers-reduced-motion: no-preference) {
  html[data-skin="graza"] .home-page .attractor-background:not(.attractor-background--fallback) {
    -webkit-mask-image: linear-gradient(#000 0 14rem, rgb(0 0 0 / 0.3) 22rem);
    mask-image: linear-gradient(#000 0 14rem, rgb(0 0 0 / 0.3) 22rem);
  }
}

/* The static contours were cream for the dark hero; print them in faint ink. */
html[data-skin="graza"] .home-page .attractor-background.attractor-background--fallback {
  opacity: 0.14;
  background-color: var(--graza-ink);
}

@media (prefers-reduced-motion: reduce) {
  html[data-skin="graza"] .home-page .attractor-background {
    opacity: 0.14;
    background-color: var(--graza-ink);
  }
}

html[data-skin="graza"] .home-page .hero-masthead {
  display: block;
  position: relative;
  z-index: 2;
  margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
  text-align: center;
}

html[data-skin="graza"] .home-page .hero-masthead img {
  display: block;
  width: min(100%, 22rem);
  height: auto;
  margin: 0 auto clamp(0.75rem, 1.5vw, 1.1rem);
}

/* A newspaper nameplate: double rule over the dateline, single rule under. */
:root[data-skin="graza"] body.home-page .hero p.hero-dateline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
  max-width: none;
  margin: 0;
  padding: 0.6rem 0.25rem;
  color: var(--graza-ink);
  border-top: 4px double var(--graza-ink);
  border-bottom: 1px solid var(--graza-ink);
  font-family: var(--graza-font-mono);
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

html[data-skin="graza"] .home-page .hero-grid {
  min-height: 0;
  align-items: start;
  align-content: start;
}

html[data-skin="graza"] .home-page .hero h1 {
  max-width: 15ch;
  color: var(--graza-ink);
  /* A step under the base hero size so the buttons clear the first screen
     below the masthead. */
  font-size: clamp(3.25rem, calc(2rem + 4vw), 5.75rem);
  font-weight: 400;
  line-height: 0.98;
}

html[data-skin="graza"] .home-page .hero h1 em {
  color: var(--coral);
  font-style: italic;
}

html[data-skin="graza"] .home-page .hero p {
  color: var(--muted);
}

html[data-skin="graza"] .home-page .hero .hero-sub {
  color: var(--graza-ink);
  font-size: clamp(1.25rem, calc(1.1rem + 0.45vw), 1.5rem);
  font-weight: 400;
  line-height: 1.4;
}

/* "What you get" becomes a numbered contents column with a hairline. */
html[data-skin="graza"] .home-page .hero-card {
  align-self: start;
  margin: 0;
  padding: 0 0 0 clamp(1.25rem, 2.5vw, 2.25rem);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--graza-ink);
  border-radius: 0;
  box-shadow: none;
  counter-reset: deliverable;
}

html[data-skin="graza"] .home-page .hero-card__title {
  margin: 0 0 0.5rem;
  padding: 0;
  color: var(--coral);
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}

html[data-skin="graza"] .home-page .hero-card li {
  align-items: baseline;
  gap: 0.85rem;
  padding: 0.85rem 0;
  font-family: var(--graza-font-body);
  font-size: clamp(1.125rem, calc(1rem + 0.35vw), 1.3125rem);
  line-height: 1.42;
  counter-increment: deliverable;
}

html[data-skin="graza"] .home-page .hero-card li::before {
  min-width: 1.1em;
  color: var(--coral);
  content: counter(deliverable);
  font-family: var(--graza-font-display);
  font-size: 1.5em;
  font-style: italic;
  line-height: 0.8;
}

/* ---- What we do: the one dark green panel with neon accents ------------- */

/* The paper hero gave up the dark green and lime pairing, so this section
   keeps it, right under the lime client strip. */
html[data-skin="graza"] .home-page [data-home-section="services"] {
  color: var(--graza-cream);
  background-color: var(--graza-ink);
}

html[data-skin="graza"] .home-page [data-home-section="services"] :focus-visible {
  outline-color: var(--graza-lime);
}

html[data-skin="graza"] .home-page [data-home-section="services"] .section-heading h2 {
  color: var(--graza-lime);
}

html[data-skin="graza"] .home-page [data-home-section="services"] .card-grid,
html[data-skin="graza"] .home-page [data-home-section="services"] .card {
  border-color: var(--graza-rule-on-dark);
}

html[data-skin="graza"] .home-page [data-home-section="services"] .card h3,
html[data-skin="graza"] .home-page [data-home-section="services"] .card p {
  color: var(--graza-cream);
}

/* Every marker glows lime; the mixed accents muddied on the dark ground. */
html[data-skin="graza"] .home-page [data-home-section="services"] .card h3::before {
  background: var(--graza-lime);
  border-color: var(--graza-lime);
}

html[data-skin="graza"] .home-page [data-home-section="services"] .card a {
  color: var(--graza-cream);
  text-decoration-color: var(--graza-lime);
}

html[data-skin="graza"] .home-page [data-home-section="services"] .card a:hover {
  color: var(--graza-lime);
}

/* ---- How we work: three inks in one strip ------------------------------ */

html[data-skin="graza"] .home-page [data-home-section="process"] .process-grid {
  gap: 0;
  border: 1px solid var(--graza-ink);
}

html[data-skin="graza"] .home-page [data-home-section="process"] .process-card,
html[data-skin="graza"] .home-page [data-home-section="contact"] .contact form {
  border-radius: 0;
}

html[data-skin="graza"] .home-page [data-home-section="process"] .process-card {
  border: 0;
}

html[data-skin="graza"] .home-page [data-home-section="process"] .process-card + .process-card {
  border-top: 1px solid var(--graza-ink);
}

html[data-skin="graza"] .home-page [data-home-section="process"] .process-step {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: var(--graza-type-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  html[data-skin="graza"] .home-page [data-home-section="process"] .process-card,
  html[data-skin="graza"] .home-page [data-home-section="contact"] .contact form {
    border-radius: 0;
  }
}

html[data-skin="graza"] .home-page [data-home-section="process"] .process-card li {
  font-family: var(--graza-font-body);
  font-size: 1.0625rem;
}

/* ---- Talks and contact ------------------------------------------------- */

html[data-skin="graza"] .home-page #talks[data-home-section="talks"] .blog-meta {
  font-family: var(--graza-font-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* Newsreader runs wider than tracked Georgia; give the question room so it
   breaks between words instead of stranding the question mark. */
html[data-skin="graza"] .home-page [data-home-section="contact"] .contact > h2 {
  max-width: 11ch;
  font-size: clamp(2.75rem, calc(2rem + 3vw), 5.25rem);
  line-height: 0.98;
  overflow-wrap: normal;
  text-wrap: balance;
}

/* Newsreader runs wider than the base face, so the 12ch cap broke this one. */
html[data-skin="graza"] .home-page [data-home-section="talks"] .section-heading h2 {
  max-width: none;
}

/* A flat lime box in mono read like another field; ink with lime type
   reads as the action. */
html[data-skin="graza"] .home-page [data-home-section="contact"] .contact button {
  color: var(--graza-lime);
  background: var(--graza-ink);
  border-color: var(--graza-ink);
}

html[data-skin="graza"] .home-page [data-home-section="contact"] .contact button:is(:hover, :focus-visible) {
  color: var(--graza-ink);
  background: var(--graza-lime);
}

html[data-skin="graza"] .home-page [data-home-section="contact"] .contact input,
html[data-skin="graza"] .home-page [data-home-section="contact"] .contact textarea {
  border-radius: var(--print-radius);
}

/* ---- Testimonials: hanging quotation marks ----------------------------- */

html[data-skin="graza"] .home-page [data-home-section="testimonials"] .testimonial p:first-child {
  position: relative;
}

/* An absolutely placed mark keeps its inline spot, so shifting it by its own
   width hangs it in the margin and keeps the text edge straight. */
html[data-skin="graza"] .home-page [data-home-section="testimonials"] .testimonial p:first-child::before {
  position: absolute;
  content: '\201C';
  color: var(--coral);
  transform: translateX(-100%);
}

/* ---- Square plates ----------------------------------------------------- */

html[data-skin="graza"] .home-page [data-home-section="blog"] .blog-card,
html[data-skin="graza"] .featured-post,
html[data-skin="graza"] .editor-note,
html[data-skin="graza"] .card-grid--editorial .blog-card,
html[data-skin="graza"] .home-page [data-home-section="team"] .team-card img,
html[data-skin="graza"] .blog-post .hero-image,
html[data-skin="graza"] .blog-post .content img,
html[data-skin="graza"] .work-card img,
html[data-skin="graza"] .work-card > a img {
  border-radius: var(--print-radius);
}

@media (max-width: 760px) {
  html[data-skin="graza"] .home-page [data-home-section="team"] .team-card img {
    border-radius: var(--print-radius);
  }
}

/* ---- Figures: real plots printed in one ink on the card's color -------- */

html[data-skin="graza"] .card-figure {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--figure-paper, var(--graza-coral-tint));
  border-bottom: 1px solid var(--graza-ink);
}

/* Grayscale plus multiply turns each matplotlib palette into one ink, so
   four different charting styles read as one printed set. */
html[data-skin="graza"] .home-page [data-home-section="blog"] .blog-card .card-figure img,
html[data-skin="graza"] .card-grid--editorial .blog-card .card-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  padding: 1.25rem 1.25rem 0.5rem;
  object-fit: scale-down;
  background: transparent;
  border: 0;
  filter: grayscale(1) contrast(1.2);
  mix-blend-mode: multiply;
}

/* The A/B histogram's pastel bars sit near white, so contrast alone bleaches
   them. Dimming first, then a steep contrast, keeps white paper white and
   prints the bars mid-grey. The card selectors repeat to outrank the shared
   figure filter. */
html[data-skin="graza"] .home-page [data-home-section="blog"] .blog-card .card-figure--faint img,
html[data-skin="graza"] .card-grid--editorial .blog-card .card-figure--faint img {
  filter: grayscale(1) brightness(0.62) contrast(4);
}

/* The featured post prints its figure like the cards, at full width. */
html[data-skin="graza"] .featured-post__media.card-figure {
  aspect-ratio: auto;
  background: var(--graza-coral-tint);
  border-bottom: 1px solid var(--graza-ink);
}

html[data-skin="graza"] .featured-post__media.card-figure img {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: 32rem;
  padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem) 0.75rem;
  object-fit: contain;
  background: transparent;
  filter: grayscale(1) contrast(1.2);
  mix-blend-mode: multiply;
}

html[data-skin="graza"] .card-figure figcaption {
  padding: 0 1.25rem 0.9rem;
  color: var(--graza-ink);
  font-family: var(--graza-font-mono);
  font-size: var(--graza-type-label);
  line-height: 1.45;
}

html[data-skin="graza"] .card-figure figcaption span {
  margin-right: 0.4em;
  color: var(--coral);
  font-weight: 500;
}

html[data-skin="graza"] .home-page [data-home-section="blog"] .blog-card:nth-child(2) {
  --figure-paper: var(--graza-yellow);
}

html[data-skin="graza"] .home-page [data-home-section="blog"] .blog-card:nth-child(3) {
  --figure-paper: var(--graza-sky);
}

html[data-skin="graza"] .card-grid--editorial .blog-card:nth-child(1) {
  --figure-paper: var(--graza-sky);
}

html[data-skin="graza"] .card-grid--editorial .blog-card:nth-child(3) {
  --figure-paper: var(--graza-yellow);
}

/* The three remaining post covers were decorative gradients. */
html[data-skin="graza"] .blog-post .hero-image--decorative {
  display: none;
}

/* Newsreader sets small for its size; 19px in a 42rem column keeps lines
   near 75 characters instead of 100. */
html[data-skin="graza"] .blog-post {
  width: min(42rem, calc(100vw - 40px));
}

html[data-skin="graza"] .blog-post .content {
  font-size: clamp(1.0625rem, calc(0.98rem + 0.4vw), 1.1875rem);
  line-height: 1.65;
}

/* The narrower column split long words like "Underspecification" mid-letter
   at the old 6rem; a smaller title hyphenates only when it must. */
html[data-skin="graza"] .blog-post h1 {
  font-size: clamp(2.5rem, calc(1.75rem + 2.6vw), 4.25rem);
  hyphens: auto;
}

@media (max-width: 760px) {
  html[data-skin="graza"] .blog-post {
    width: min(42rem, calc(100vw - 28px));
  }
}

/* ---- Labels: typed slugs instead of pills ------------------------------ */

html[data-skin="graza"] .meta-chip,
html[data-skin="graza"] .blog-topic,
html[data-skin="graza"] .meta-chip--accent,
html[data-skin="graza"] .blog-post > .article-meta .meta-chip--accent {
  padding: 0;
  color: var(--graza-ink);
  background: none;
  border: 0;
  border-radius: 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[data-skin="graza"] .meta-chip--accent,
html[data-skin="graza"] .blog-post > .article-meta .meta-chip--accent,
html[data-skin="graza"] .blog-topic {
  color: var(--coral);
  font-weight: 500;
}

html[data-skin="graza"] .blog-post > .article-meta {
  background: transparent;
  border-top-width: 4px;
  border-top-style: double;
}

/* ---- Work: logo, client, and years in one left column ------------------ */

/* The body spans every row, so the left column stacks the logo, the client,
   and the years at their natural heights while the last row takes the rest. */
html[data-skin="graza"] .work-card {
  --work-mark-height: 4.75rem;
  grid-template-columns: minmax(170px, 0.21fr) minmax(0, 0.79fr);
  grid-template-rows: auto auto 1fr;
  gap: 1rem clamp(2rem, 5vw, 5.5rem);
  align-content: start;
}

/* The link hugs its mark instead of stretching across the column. */
html[data-skin="graza"] .work-card > a {
  width: auto;
  justify-self: start;
}

html[data-skin="graza"] .work-card > div {
  grid-column: 2;
  grid-row: 1 / -1;
}

/* Client and years share one size; only style and color separate them, so
   the years read as a note on the client instead of outshouting it. */
html[data-skin="graza"] .work-card > .work-meta {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  color: var(--graza-ink);
  font-family: var(--graza-font-display);
  font-size: clamp(1.25rem, calc(1.05rem + 0.45vw), 1.5rem);
  font-weight: 400;
  line-height: 1.2;
}

/* The homepage's coral italic. It clears the 3:1 large-text contrast floor on
   every card fill (lowest: 3.97 on coral tint), and the years never drop
   below 24px. */
html[data-skin="graza"] .work-card .work-dates {
  display: block;
  margin-top: 0.15rem;
  color: var(--coral);
  font-size: inherit;
  font-style: italic;
}

/* An acquisition note wrapped mid-phrase in the narrow column, so it gets
   its own smaller line under the client name. */
html[data-skin="graza"] .work-card .work-note {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.72em;
  line-height: 1.3;
}

/* The years sit on their own line here, so the inline separator would dangle. */
html[data-skin="graza"] .work-card .work-sep {
  display: none;
}

/* A heading sized for one card among nineteen, not for a page title. */
html[data-skin="graza"] .work-card h2,
html[data-skin="graza"] .work-card h3 {
  font-size: clamp(1.875rem, calc(1.35rem + 1.6vw), 3rem);
  line-height: 1.04;
}

/* Every mark sits on a cream plate that hugs it, at one height and on the
   text's left edge. Bare marks clashed or vanished on some card colors, and a
   fixed 2:1 plate wasted the column on wide and square marks alike. */
html[data-skin="graza"] .work-card img,
html[data-skin="graza"] .work-card > a img {
  display: block;
  width: auto;
  max-width: 100%;
  height: var(--work-mark-height);
  aspect-ratio: auto;
  padding: 0.6rem 0.8rem;
  object-fit: contain;
  object-position: center;
  background: var(--graza-cream);
  border: 0;
  border-radius: var(--print-radius);
}

/* Square marks read small at a wordmark's height, so they get more of it. */
html[data-skin="graza"] .work-card--square-mark {
  --work-mark-height: 6.5rem;
}

/* White wordmarks need an ink plate instead of the cream one. */
html[data-skin="graza"] .work-card.work-card--dark-logo img {
  background: var(--graza-ink);
}

/* Dense link lists turn blotchy in semibold; book-weight links with a thin,
   low underline keep the paragraph even. */
html[data-skin="graza"] .work-card > div a,
html[data-skin="graza"] .blog-post .content a,
html[data-skin="graza"] .team-card .content > p a {
  font-weight: 400;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

@media (max-width: 900px) {
  html[data-skin="graza"] .work-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  html[data-skin="graza"] .work-card > div,
  html[data-skin="graza"] .work-card > .work-meta {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ---- Slug separators and phone nameplate ------------------------------- */

/* Without pill outlines the slugs need a typed separator between them. */
html[data-skin="graza"] .meta-chip + .meta-chip::before,
html[data-skin="graza"] .blog-topic + .blog-meta::before {
  content: '\00B7';
  margin-right: 0.6em;
  color: var(--muted);
}

@media (max-width: 640px) {
  :root[data-skin="graza"] body.home-page .hero p.hero-dateline {
    flex-direction: column;
    align-items: center;
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
    text-align: center;
  }

  /* A full-width logo pushed the headline halfway down a phone screen. */
  html[data-skin="graza"] .home-page .hero-masthead img {
    width: min(100%, 16rem);
  }
}

/* Separators sit in the gap before each slug. The row clips its left edge,
   so a slug that wraps to a new line drops its leading dot. */
html[data-skin="graza"] .blog-post > .article-meta {
  column-gap: 1.3em;
  padding-inline: 0;
  overflow: hidden;
}

html[data-skin="graza"] .blog-post > .article-meta .meta-chip + .meta-chip {
  position: relative;
}

html[data-skin="graza"] .blog-post > .article-meta .meta-chip + .meta-chip::before {
  position: absolute;
  right: 100%;
  margin-right: 0.45em;
}