/* 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: none;
  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);
}

/* Below 860px the bar folds to a burger even with two links: the row keeps the
   brand and one control, and the menu drops under it. */
.nav-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  min-height: 44px;
  padding: 10px 16px;
  background: none;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: var(--radius-full);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: inherit;
  cursor: pointer;
}

.nav-toggle-line {
  display: inline-block;
  width: 16px;
  height: 2px;
  background: currentColor;
  position: relative;
}

.nav-toggle-line::before,
.nav-toggle-line::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background: currentColor;
}

.nav-toggle-line::before {
  top: -5px;
}

.nav-toggle-line::after {
  top: 5px;
}

.site-header.open .nav-menu {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--header-bg, var(--neutral));
  border-bottom: 1px solid var(--hairline);
  padding: 8px 0 16px;
}

@media (min-width: 860px) {
  .nav-toggle {
    display: none;
  }

  .site-header nav {
    margin-left: auto;
  }

  .nav-menu {
    display: flex;
  }
}

/* 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. The base divisor is the stacked (mobile) case and
     carries extra slack so the ink never reaches the container edge. */
  --footer-shell: min(100vw, var(--container-max));
  --footer-gutter: clamp(20px, 4vw, 96px);
  --footer-band: calc((100vw - 2 * var(--footer-gutter)) / 3.4);
  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;
    /* Same slice as desktop: the drawn tops start ~0.15em below the box, so
       0.15em + half the ink (0.415em) shows exactly the top half and clips the
       rest instead of letting the descender sit on the page edge. */
    height: 0.565em;
    overflow: hidden;
  }
}

/* Mobile rhythm: the 160px desktop bands read as dead air on a phone, so every
   full-width section drops to one shared padding. This is the rule for stacked
   layout, not a per-section exception. */
@media (max-width: 859px) {
  .services,
  .why,
  .flow,
  .cta {
    padding: 88px 0;
  }

  .page {
    padding: 96px 0 104px;
  }

  .site-footer {
    padding-top: 80px;
  }
}

/* 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 {
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page-lede {
  margin-top: 28px;
  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:not(.post-meta):not(.post-more) {
  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;
}

/* Careers */

.job-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 24px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}

.job-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--secondary);
}

.job-field select {
  min-height: 44px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font: inherit;
  font-size: 0.9375rem;
  color: inherit;
}

.job-count {
  margin: 0 0 2px auto;
  font-size: 0.875rem;
  color: var(--secondary);
}

.job-list {
  margin-top: 40px;
  border-top: 1px solid var(--hairline);
}

.job {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--hairline);
}

.job[hidden] {
  display: none;
}

.job-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

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

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

.job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 10px 0 0;
  font-size: 0.875rem;
  color: var(--secondary);
}

.job-summary {
  margin: 12px 0 0;
}

.job-apply {
  align-self: start;
}

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

@media (max-width: 720px) {
  .job {
    grid-template-columns: 1fr;
  }

  .job-apply {
    justify-self: start;
  }

  .job-count {
    margin-left: 0;
  }
}

/* Article body: the generated pages run the container, so the title, lede and
   body share one left and right edge. */
.article-body {
  margin-top: 64px;
}

.crumbs span {
  margin: 0 8px;
  color: var(--hairline);
}

.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,
.cover video {
  display: block;
  width: 100%;
  height: auto;
}

/* The loop is 1440 by 900. Reserving the box keeps the poster and the first
   decoded frame from shifting the article once metadata lands. */
.cover video {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* Warm reading surface for /blog and its posts: a paper tint instead of the
   neutral canvas, which is easier on the eyes for long sessions. */
body.theme-warm {
  background: #faf7f2;
}

body.theme-warm .site-header {
  --header-bg: #faf7f2;
}

.crumbs span[aria-current="page"] {
  margin: 0;
  color: var(--secondary);
}

.post-category {
  color: var(--accent-text);
  text-decoration: none;
}

.post-category:hover {
  text-decoration: underline;
}

.post-more {
  margin-top: 4px;
}

/* Prev and next read as a pair: the entry before and after in the same order
   the list shows. */
.pager {
  display: flex;
  gap: 24px;
  justify-content: space-between;
}

.pager-link {
  display: grid;
  gap: 4px;
  max-width: 46%;
  color: inherit;
  text-decoration: none;
}

.pager-next {
  margin-left: auto;
  text-align: right;
}

.pager-label {
  font-size: 0.8125rem;
  color: var(--secondary);
}

.pager-title {
  font-weight: 600;
  letter-spacing: -0.01em;
}

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

.pager-empty {
  margin: 0;
  color: var(--secondary);
}

.group-link {
  color: inherit;
  text-decoration: none;
}

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

/* /tentang reads as a justified column. Justification only helps at a wide
   measure, so it steps back to ragged-left on phones. */
.article-body--justify p,
.article-body--justify li {
  text-align: justify;
  hyphens: auto;
}

@media (max-width: 640px) {
  .article-body--justify p,
  .article-body--justify li {
    text-align: left;
    hyphens: none;
  }
}