/* =========================================================================
   plugbloom — Studio / About page
   Page-specific styles only. All scoped under .page-studio.
   Reuses the shared design system in plugbloom.css (container, section,
   eyebrow, btn, lead, serif, link-arrow, subscribe, reveal, section--ink…).
   ========================================================================= */

/* ------------------------------------------------------------------- hero */
.page-studio .studio-hero { padding-top: clamp(1.5rem, 4vw, 3.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.page-studio .studio-hero__inner { max-width: 56rem; }
.page-studio .studio-hero h1 { font-size: var(--fs-hero); margin-top: 1.2rem; max-width: none; }
.page-studio .studio-hero .lead { max-width: 56ch; margin-top: 1.4rem; }
.page-studio .studio-hero__actions {
  display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.2rem;
}

/* ------------------------------------------------------------------ credo */
.page-studio .credo {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid; gap: 0;
  border-top: 1px solid var(--line);
}
.page-studio .credo__item {
  display: grid; grid-template-columns: 4rem 1fr; gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding-block: clamp(1.4rem, 3vw, 2.1rem);
  border-bottom: 1px solid var(--line);
}
.page-studio .credo__n {
  font-family: var(--font-mono); font-size: var(--fs-mono);
  letter-spacing: .14em; color: var(--mint-ink); padding-top: .35em;
}
.page-studio .credo__line {
  font-size: clamp(1.45rem, 2.9vw, 2.35rem);
  line-height: 1.16; letter-spacing: -0.015em; color: var(--ink);
  max-width: 26ch; font-weight: 400;
}

/* ----------------------------------------------------------------- rules */
.page-studio .studio-rules .section__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.page-studio .rules {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.6rem, 3.5vw, 2.75rem) clamp(2rem, 5vw, 4rem);
}
.page-studio .rule {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 1.4rem;
}
.page-studio .rule__n {
  font-family: var(--font-mono); font-size: var(--fs-mono);
  letter-spacing: .16em; color: var(--mint);
}
.page-studio .rule h3 {
  font-size: var(--fs-h3); margin-top: .7rem; color: var(--paper);
}
.page-studio .rule p {
  margin-top: .85rem; color: rgba(243,245,241,.72); font-size: var(--fs-body);
}
.page-studio .rule code {
  font-family: var(--font-mono); font-size: .85em;
  color: var(--mint); background: rgba(255,255,255,.06);
  padding: .08em .4em; border-radius: 5px;
}

/* --------------------------------------------------------------- process */
.page-studio .studio-process .section__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.page-studio .process {
  display: grid; gap: 0;
  max-width: 720px;
}
.page-studio .step {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 2rem);
  padding-bottom: clamp(1.8rem, 3.5vw, 2.6rem);
  position: relative;
}
.page-studio .step:not(:last-child) { padding-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }
.page-studio .step__n {
  position: relative; z-index: 1;
  flex: none; width: 3rem; height: 3rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .9rem; font-weight: 500;
  color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--mint-ink);
}
/* the stem connecting the steps */
.page-studio .step:not(:last-child)::before {
  content: ""; position: absolute; left: calc(1.5rem - 1px); top: 3rem; bottom: 0;
  width: 1.5px; background: var(--line-2);
}
.page-studio .step__body { padding-top: .35rem; }
.page-studio .step__body h3 { font-size: var(--fs-h3); }
.page-studio .step__body p { margin-top: .55rem; color: var(--ink-2); max-width: 52ch; }

/* ----------------------------------------------------------- growing now */
.page-studio .now {
  display: grid; grid-template-columns: 1fr auto; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.page-studio .now__copy h2 { font-size: var(--fs-h2); margin-top: 1.1rem; }
.page-studio .now__copy .lead { margin-top: 1.1rem; max-width: 52ch; }
.page-studio .now__copy .link-arrow { margin-top: 1.4rem; }
.page-studio .now__mark .bloom {
  width: clamp(108px, 16vw, 168px); height: clamp(108px, 16vw, 168px);
  color: var(--paper-4);
}

/* --------------------------------------------------------------- updates */
.page-studio .studio-updates {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.8rem, 4vw, 3.5rem); align-items: center;
}
.page-studio .studio-updates h2 { font-size: var(--fs-h2); margin-top: 1.1rem; }
.page-studio .studio-updates .lead { margin-top: 1.1rem; }

/* -------------------------------------------------- typography polish */
/* Generic editorial polish (text-wrap balance/pretty + the italic mint accent
   on heading <em>) is now global in plugbloom.css. Page-specific tuning only: */

/* hero: a touch tighter display leading (italic accent comes from the global rule) */
.page-studio .studio-hero h1 { line-height: 1.0; letter-spacing: -0.025em; }

/* the credo is the centerpiece — more leading so the serif breathes, softer tracking */
.page-studio .credo__line { line-height: 1.24; letter-spacing: -0.008em; max-width: 28ch; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 860px) {
  .page-studio .rules { grid-template-columns: 1fr; }
  .page-studio .studio-updates { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .page-studio .credo__item { grid-template-columns: 1fr; gap: .4rem; }
  .page-studio .credo__n { padding-top: 0; }
  .page-studio .now { grid-template-columns: 1fr; }
  .page-studio .now__mark { order: -1; }
}