/* Self-hosted latin subset of Inter, OFL-1.1 (see fonts/OFL-inter.txt).
   Family and file come from the OpenDesign brand package. */

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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;
}

/* Self-hosted latin subset of Bricolage Grotesque (variable: opsz 12–96,
   wght 400–800), OFL-1.1 (see fonts/OFL-bricolage-grotesque.txt). Display face
   only — h1–h3. Body copy and every wordmark stay on Inter. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  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;
}

:root {
  /* Brand tokens — source of truth: OpenDesign project "Tegiva Jaya Sejahtera"
     (brand-neutral-modern-6f0544), system/tokens.default.json. Change the brand
     in OpenDesign, then re-map here; do not invent colors. */
  --primary: #111111;        /* colorText / foreground */
  --secondary: #6b6b6b;      /* muted */
  --tertiary: #2f6feb;       /* accent: fills, focus, graphics */
  --tertiary-hover: #1d51c4; /* colorPrimaryActive */
  --accent-text: #1d51c4;    /* accent as text on light: 6.65:1 */
  --accent-text-hover: #062178; /* palette-9 */
  --accent-tint: #f0f7ff;    /* colorPrimaryBg */
  --neutral: #fafafa;        /* background */
  --surface: #ffffff;        /* surface */
  --surface-inverted: #111111; /* foreground as dark surface */
  --text-inverted: #ffffff;  /* surface as text on dark */
  --band-body: #e5e5e5;      /* border, secondary text on dark (15:1) */
  --hairline: #e5e5e5;       /* border */
  --fill-tertiary: #f1f1f1;  /* colorFillTertiary */
  /* Hero swirl ramp: palette-7 / palette-6 / palette-2, read by script.js. */
  --shader-deep: #1d51c4;
  --shader-mid: #2f6feb;
  --shader-light: #d6eaff;
  --radius-full: 980px;
  --container-max: 1200px;
  --font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--neutral);
  color: var(--primary);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 768px) {
  .container {
    padding: 0 clamp(48px, 4vw, 96px);
  }
}

img {
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--tertiary);
  outline-offset: 3px;
  border-radius: 2px;
}

main:focus {
  outline: none;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--neutral);
  color: var(--primary);
  padding: 12px 20px;
  z-index: 100;
}

.skip:focus {
  left: 12px;
  top: 12px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

section[id] {
  scroll-margin-top: 88px;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  /* The bar takes the tone of the section standing under it: the neutral page,
     the tint band, or the inverted closing band. */
  background: var(--header-bg, var(--neutral));
  color: var(--header-fg, var(--primary));
  transition: background-color 0.25s ease, color 0.25s ease;
  z-index: 50;
}

.site-header[data-tone="tint"] {
  --header-bg: var(--accent-tint);
}

.site-header[data-tone="dark"] {
  --header-bg: var(--surface-inverted);
  --header-fg: var(--text-inverted);
}

.nav-row {
  display: flex;
  align-items: center;
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

/* The domain suffix steps back to regular weight so the name, not the TLD,
   carries the lockup. */
.brand-domain {
  font-weight: 400;
}

.brand-mark {
  width: 30px;
  height: 30px;
  flex: none;
  will-change: transform;
}

.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: inherit;
}

.nav-menu li a:hover {
  color: var(--accent-text);
}

.site-header[data-tone="dark"] .nav-menu li a:hover {
  color: var(--accent-tint);
}

/* One item, so the row is always visible: no toggle, no dropdown. The nav
   takes the right edge at every width, not only once a toggle is gone. */
.site-header nav {
  margin-left: auto;
}

/* Hero */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  padding: 96px 0 96px;
}

.hero > .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.page-glow {
  display: none;
}

.page-glow.is-enabled {
  display: block;
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* Above the sticky header (50), below the cursor ring (90): the light has to
     cross the bar as well as the page, or it disappears at the top edge. */
  z-index: 60;
  mix-blend-mode: multiply;
  overflow: hidden;
}

.page-glow__halo,
.page-glow__core {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.7s ease;
  will-change: transform, opacity;
  transform: translate3d(-2200px, -2200px, 0);
}

.page-glow.is-live .page-glow__halo,
.page-glow.is-live .page-glow__core {
  opacity: 1;
}

.page-glow__halo {
  width: 1150px;
  height: 1150px;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--tertiary) 10%, transparent) 0%,
    color-mix(in srgb, var(--tertiary) 5.8%, transparent) 34%,
    color-mix(in srgb, var(--tertiary) 2.2%, transparent) 58%,
    transparent 74%);
  filter: blur(18px);
}

.page-glow__core {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--tertiary) 8%, transparent) 0%,
    color-mix(in srgb, var(--tertiary) 4%, transparent) 46%,
    transparent 72%);
  filter: blur(6px);
}

/* On the inverted band the same gradient flips from multiply to screen: over
   #111111 multiply has nothing left to darken, so the light has to be added
   instead. The alphas are higher because screen at 8-10% is imperceptible. */
.page-glow.is-inverted {
  mix-blend-mode: screen;
}

.page-glow.is-inverted .page-glow__halo {
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--tertiary) 26%, transparent) 0%,
    color-mix(in srgb, var(--tertiary) 15%, transparent) 34%,
    color-mix(in srgb, var(--tertiary) 6%, transparent) 58%,
    transparent 74%);
}

.page-glow.is-inverted .page-glow__core {
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--tertiary) 20%, transparent) 0%,
    color-mix(in srgb, var(--tertiary) 10%, transparent) 46%,
    transparent 72%);
}

.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 90;
  will-change: transform;
  transform: translate3d(-100px, -100px, 0);
}

.cursor-ring__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border: 2px solid var(--tertiary);
  border-radius: 50%;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--neutral) 55%, transparent);
  opacity: 0;
  scale: 1;
  transition: opacity 0.25s ease, scale 0.18s ease, border-width 0.18s ease, background-color 0.18s ease;
}

.cursor-ring.is-visible .cursor-ring__dot {
  opacity: 1;
}

.cursor-ring.is-pressed .cursor-ring__dot {
  scale: 0.55;
  border-width: 3px;
  border-color: var(--tertiary-hover);
  background-color: color-mix(in srgb, var(--tertiary) 16%, transparent);
}

.cursor-ring.is-inverted .cursor-ring__dot {
  border-color: var(--accent-tint);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--surface-inverted) 45%, transparent);
}

.cursor-ring.is-inverted.is-pressed .cursor-ring__dot {
  border-color: var(--text-inverted);
  background-color: color-mix(in srgb, var(--accent-tint) 18%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .has-custom-cursor,
  .has-custom-cursor * {
    cursor: none;
  }
}

.hero-swirl {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-title {
  font-size: clamp(2.75rem, 7.5vw, 5.25rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 18ch;
  text-wrap: balance;
}

.hero-lede {
  margin: 40px 0 48px;
  max-width: 34em;
  font-size: clamp(1.125rem, 2vw, 1.25rem);
  color: var(--primary);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 8px;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 18px 32px;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-primary {
  background: var(--tertiary);
  color: var(--text-inverted);
}

.btn-primary:hover {
  background: var(--tertiary-hover);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--surface);
  color: var(--primary);
  border: 1px solid var(--secondary);
}

.btn-secondary:hover {
  background: var(--fill-tertiary);
}

/* Section label */

.section-label {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent-text);
  margin-bottom: 20px;
}

/* Services */

.services {
  padding: 160px 0;
}

.services h2,
.why h2,
.flow h2 {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 700;
  max-width: 22ch;
}

.service-rows {
  margin-top: 56px;
  border-top: 1px solid var(--hairline);
}

.service-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 40px 0;
  border-bottom: 1px solid var(--hairline);
}

.service-row h3 {
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.service-row p {
  max-width: 38em;
  color: var(--primary);
}

@media (min-width: 860px) {
  .service-row {
    grid-template-columns: 5fr 6fr;
    gap: 64px;
    padding: 48px 0;
  }

  .service-row p {
    align-self: end;
  }
}

/* Why (tint band) */

.why {
  background: var(--accent-tint);
  padding: 160px 0;
}

.why-grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

.why-item h3 {
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.why-item p {
  max-width: 26em;
}

@media (min-width: 860px) {
  .why-grid {
    grid-template-columns: 5fr 3fr 4fr;
  }

  .why-item-lead h3 {
    font-size: clamp(1.625rem, 3vw, 2rem);
  }

  .why-item:nth-child(3) {
    padding-right: 8%;
  }
}

/* Flow */

.flow {
  padding: 160px 0;
}

.flow-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
}

.flow-intro {
  padding-top: 8px;
}

.flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.flow-steps li {
  display: flex;
  gap: 24px;
  padding: 36px 0;
  border-bottom: 1px solid var(--hairline);
}

.step-num {
  font-size: 0.875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--secondary);
  min-width: 2.5em;
  padding-top: 0.35em;
}

.flow-steps h3 {
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.flow-steps p {
  max-width: 40em;
}

@media (min-width: 860px) {
  .flow-grid {
    grid-template-columns: 5fr 7fr;
    gap: 96px;
  }

  .flow-intro {
    position: sticky;
    top: 120px;
    align-self: start;
  }
}

/* CTA (dark band) */

.cta {
  background: var(--surface-inverted);
  color: var(--text-inverted);
  padding: 160px 0;
}

.cta .container {
  color: var(--text-inverted);
}

.cta h2 {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--text-inverted);
  max-width: 24ch;
}

.cta p {
  margin: 24px 0 48px;
  max-width: 40em;
  color: var(--band-body);
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.link-underline {
  color: var(--accent-text);
  font-size: 1rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.link-underline:hover {
  color: var(--accent-text-hover);
}

.cta .link-underline {
  color: var(--accent-tint);
}

.cta .link-underline:hover {
  color: var(--text-inverted);
}

.cta :focus-visible {
  outline-color: var(--accent-tint);
}

/* Footer */

.site-footer {
  /* The wordmark is sized to fit rather than to fill: Bricolage Grotesque 400
     at -0.045em measures 3.017 x font-size wide, and the mark starts at the
     second column. These values mirror .container / .footer-grid so the fit is
     derived, not eyeballed. 3.26 leaves ~7% slack for the mobile gutter
     estimate. */
  --footer-shell: min(100vw, var(--container-max));
  --footer-gutter: clamp(20px, 4vw, 96px);
  --footer-band: calc((100vw - 2 * var(--footer-gutter)) / 3.26);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid var(--hairline);
  padding: 120px 0 0;
}

/* Both footer containers sit above the watermark band. */
.site-footer > .container {
  position: relative;
  z-index: 1;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

.footer-nav-title {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--secondary);
  margin: 0 0 14px;
}

.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  font-size: 1rem;
  color: var(--primary);
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--accent-text);
}

/* The wordmark closes the page as an outline in its own grid row: it starts at
   the second column, level with the copyright line, and runs past the
   container's right edge. The row is half the ink height, so exactly the top
   half of the letters shows and the rest bleeds off the bottom. Bricolage's
   glyphs carry overlapping contours (the `t` stem/crossbar, the `e` bowl/bar),
   and a plain text-stroke traces every one of them, which double-lines those
   joins; painting the stroke first and the fill second knocks the interiors
   out. The fit divisor (3.13/3.26) comes from the measured 3.017 width per
   font-size unit. */
.footer-mark {
  /* Absolute inside its grid area: a max-content item in flow would inflate
     the tracks and crush the legal column. The row height is set explicitly
     below, so nothing depends on this box. */
  position: absolute;
  grid-column: 2 / -1;
  grid-row: 2;
  left: 0;
  /* Aligning boxes is not enough: Bricolage's ascent box runs ~0.15em above the
     drawn letters, so the glyph tops sit that much lower than the box's. The
     small copy has the same effect at ~4px. Subtracting both puts the *drawn*
     tops — not the boxes — on one line. */
  top: calc(4px - 0.15em);
  width: max-content;
  max-width: none;
  height: auto;
  margin: 0;
  pointer-events: none;
  font-family: var(--font-display);
  font-size: var(--footer-band);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.045em;
  white-space: nowrap;
  color: var(--neutral);
  -webkit-text-stroke: 3px color-mix(in srgb, var(--primary) 45%, transparent);
  paint-order: stroke;
  user-select: none;
  /* Own stacking context so the shader fill can sit behind the glyphs but
     still inside the wordmark, above the footer band. */
  isolation: isolate;
}

/* The shader fill: a canvas behind the text, masked to the letterforms by
   script. Until script paints it (or where WebGL is unavailable) the wordmark
   keeps its flat fill and reads as the plain outline. */
.footer-mark__fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
}

.footer-mark.has-shader-fill {
  color: transparent;
}

/* The brand lockup sits at the top of the first column; the legal copy starts
   row 2 under it, level with the wordmark. */
.footer-brandname {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.footer-logo {
  width: 24px;
  height: 24px;
  flex: none;
}

.footer-motto {
  margin: 12px 0 0;
  max-width: 24ch;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--secondary);
}

.footer-brand-legal {
  display: grid;
  gap: 0;
}

.footer-copy {
  margin: 0;
  font-size: 0.875rem;
  color: var(--secondary);
}

@media (min-width: 860px) {
  .footer-grid {
    position: relative;
    grid-template-columns: 5fr 3fr 3fr 3fr;
    /* Row 2 is the closing band: 4px of metric offset plus half the wordmark's
       ink height (0.83em), so exactly half the letters show and the footer
       ends on the clip line with no trailing space below. `minmax(auto, …)`
       lets the legal block win if it is taller than the slice. */
    grid-template-rows: auto
      minmax(min-content, calc(4px + 0.415 * var(--footer-band)));
    column-gap: 64px;
    row-gap: 64px;
    align-items: start;
  }

  .footer-brand-legal {
    grid-column: 1;
    grid-row: 2;
  }

  /* Perusahaan, Sumber Daya and Sosial fill the three 3fr tracks after the
     brand in DOM order, so none of them needs an explicit column: the last one
     still closes the right edge. */

  .site-footer {
    --footer-gutter: clamp(48px, 4vw, 96px);
    --footer-content: calc(var(--footer-shell) - 2 * var(--footer-gutter));
    --footer-brand: calc((var(--footer-content) - 192px) * 5 / 14);
    --footer-mark-left: calc(
      (100vw - var(--footer-shell)) / 2 + var(--footer-gutter) + var(--footer-brand) + 64px
    );
    --footer-band: calc((100vw - var(--footer-mark-left)) / 3.13);
    padding-top: 140px;
  }
}

/* Stacked, the footer already reads in DOM order: lockup, link groups, legal
   block, then the wordmark spanning the full width. */
@media (max-width: 859px) {
  .footer-mark {
    /* Relative, not static: it must stay in flow but still be the containing
       block for the shader fill canvas. */
    position: relative;
    grid-column: 1 / -1;
    grid-row: auto;
    width: auto;
    margin-top: 0.2em;
    /* Stacked, the wordmark is not clipped: keep the descender off the edge. */
    padding-bottom: 0.2em;
  }
}

/* Reveal on scroll */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .page-glow,
  .page-glow.is-enabled {
    display: none;
  }

  .cursor-ring {
    display: none;
  }

  .has-custom-cursor,
  .has-custom-cursor * {
    cursor: auto;
  }

  .hero-swirl {
    display: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn,
  .btn-primary,
  .btn-secondary {
    transition: none;
  }

  .btn-primary:hover {
    transform: none;
  }
}

/* Generated pages: /proyek and /blog share one shell. The front door keeps its
   own composition; these pages borrow its type scale and hairlines. */

.page {
  padding: 140px 0 160px;
}

.page-title {
  max-width: 20ch;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page-lede {
  margin-top: 28px;
  max-width: 34em;
  font-size: clamp(1.0625rem, 1.8vw, 1.1875rem);
}

.crumbs {
  margin-bottom: 48px;
  font-size: 0.875rem;
}

.crumbs a {
  color: var(--secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.crumbs a:hover {
  color: var(--accent-text);
}

.page-actions {
  margin-top: 40px;
}

.page-foot {
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--hairline);
}

.empty {
  margin-top: 56px;
  color: var(--secondary);
}

/* Listing */

.group {
  margin-top: 72px;
}

.group-title {
  padding-bottom: 14px;
  font-family: var(--font-body);
  border-bottom: 1px solid var(--hairline);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--secondary);
}

.rows {
  display: grid;
}

.row {
  display: grid;
  gap: 16px;
  padding: 32px 0;
  border-bottom: 1px solid var(--hairline);
}

.row h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.row h3 a {
  color: inherit;
  text-decoration: none;
}

.row h3 a:hover {
  color: var(--accent-text);
}

.row p {
  margin-top: 10px;
  max-width: 38em;
}

.row-side {
  display: flex;
  align-items: baseline;
  gap: 24px;
}

.row-meta {
  margin: 0;
  font-size: 0.875rem;
  color: var(--secondary);
}

.row-cta {
  font-size: 0.875rem;
}

@media (min-width: 860px) {
  .row {
    grid-template-columns: 7fr 3fr;
    gap: 64px;
    align-items: start;
    padding: 40px 0;
  }

  .row-side {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* Blog listing */

.post-list {
  margin: 72px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}

.post-row {
  display: grid;
  gap: 12px;
  padding: 32px 0;
  border-bottom: 1px solid var(--hairline);
}

.post-row h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.post-row h2 a {
  color: inherit;
  text-decoration: none;
}

.post-row h2 a:hover {
  color: var(--accent-text);
}

.post-row > p:last-child {
  max-width: 40em;
  color: var(--secondary);
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin: 0;
  font-size: 0.875rem;
  color: var(--secondary);
}

/* In an article the meta line hangs under the title; in the listing the grid
   gap already separates it. */
.page-title + .post-meta {
  margin-top: 24px;
}

.post-draft {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--accent-tint);
  color: var(--accent-text);
  font-size: 0.75rem;
}

/* Case-study facts */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
  margin: 48px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}

.facts dt {
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--secondary);
}

.facts dd {
  margin: 6px 0 0;
}

/* Article body */

.article-body {
  margin-top: 64px;
  max-width: 62ch;
}

.article-body > * + * {
  margin-top: 20px;
}

.article-body p,
.article-body li {
  line-height: 1.75;
}

.article-body h2 {
  margin-top: 56px;
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  scroll-margin-top: 96px;
}

.article-body h3 {
  margin-top: 40px;
  font-size: 1.1875rem;
  font-weight: 600;
  scroll-margin-top: 96px;
}

.article-body ul,
.article-body ol {
  display: grid;
  gap: 8px;
  padding-left: 1.25em;
}

.article-body a {
  color: var(--accent-text);
}

.article-body blockquote {
  margin: 32px 0;
  padding-left: 24px;
  border-left: 2px solid var(--hairline);
  color: var(--secondary);
}

.article-body code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--fill-tertiary);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.875em;
}

.article-body pre {
  overflow-x: auto;
  padding: 20px;
  border-radius: 14px;
  background: var(--surface-inverted);
  color: var(--text-inverted);
  font-size: 0.875rem;
  line-height: 1.6;
}

.article-body pre code {
  padding: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}

.article-body img {
  display: block;
  width: 100%;
  border-radius: 14px;
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.article-body th,
.article-body td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
}

.article-body th {
  font-weight: 500;
  color: var(--secondary);
}

.article-body hr {
  border: 0;
  border-top: 1px solid var(--hairline);
}

.cover {
  margin: 56px 0 0;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
}

.cover img {
  display: block;
  width: 100%;
  height: auto;
}