/* Editorial system. Opt in with .editorial; Aeonik remains the only typeface.
   Reference and component contracts: project/design-system/DESIGN.md. */
.editorial {
  --background: #fdfdfe;
  --surface: #ffffff;
  --ed-frame: #eaecee;
  --ed-ink: #121417;
  --ed-muted: #51565e;
  --ed-line: #d8dce1;
  --ed-canvas: #fdfdfe;
  --ed-blue-wash: #e9f0ff;
  /* Side margins, Hulusi 15 Sept: the 1200px column at a 3rem gutter read as
     squeezed against the edges. Gutter scales with the viewport and the column
     is capped a step narrower, so every page breathes at the sides. */
  --ed-gutter: clamp(1.5rem, 6vw, 5rem);
  --ed-container: 72rem;
  --ed-section: clamp(4rem, 8vw, 7rem);
  --ed-display: clamp(2.5rem, 4.9vw, 4rem);
  --ed-title: clamp(2.25rem, 4.2vw, 3.25rem);
  --ed-heading-line: 1.08;
  --ed-tracking: -0.04em;
  --ed-label: 0.875rem;
  --ed-body: 1rem;
  --ed-lede: 1.125rem;
  --ed-card-title: 1.5rem;
  --ed-stat: clamp(3.5rem, 5.7vw, 5rem);
  --ed-radius-sm: .75rem;
  --ed-radius-md: 1rem;
  --ed-radius-lg: 1.5rem;
  --ed-radius-xl: 2rem;
  --ed-radius-pill: 999px;
  --ed-duration: 180ms;
  --ed-ease: cubic-bezier(.2,.7,.2,1);
  color: var(--ed-ink);
  background: var(--ed-canvas);
}
.editorial :where(a, button, summary, input, textarea):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 5px;
}
.editorial :where(section[id]) { scroll-margin-top: 6rem; }
.ed-container { width: min(100% - var(--ed-gutter) * 2, var(--ed-container)); margin-inline: auto; }
.ed-section { padding-block: var(--ed-section); }
.ed-heading { margin-bottom: 3rem; max-width: 42rem; }
.ed-heading--center { text-align: center; margin-inline: auto; }
.ed-heading h2, .ed-title {
  font-size: var(--ed-title); line-height: var(--ed-heading-line);
  letter-spacing: var(--ed-tracking); font-weight: 500; text-wrap: balance;
}
.ed-heading h2 span, .ed-title span { color: var(--ed-muted); }
.ed-heading > p:last-child {
  margin-top: 1.25rem; color: var(--ed-muted); max-width: 36rem;
  font-size: var(--ed-lede); line-height: 1.5;
}
.ed-heading--center > p:last-child { margin-inline: auto; }
/* Pill with a label, Hulusi 14 Sept: text only by default, on the primary
   and every other variant. An icon is an opt-in variant, added case by case
   when Hulusi asks for it: include an .ed-button__icon span before the label
   and it renders inline in the text colour. The old contrasting circular cell
   is gone for good. */
.ed-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  padding: 0 1.375rem; border-radius: var(--ed-radius-pill); min-height: 3.125rem; border: 1px solid var(--ed-ink);
  background: var(--ed-ink); color: var(--surface); font-size: var(--ed-body);
  line-height: 1.3; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: background var(--ed-duration) var(--ed-ease), border-color var(--ed-duration) var(--ed-ease), color var(--ed-duration) var(--ed-ease), transform var(--ed-duration) var(--ed-ease);
}
.ed-button__icon { display: inline-grid; place-items: center; flex: 0 0 auto; }
.ed-button__icon svg { display: block; width: 1.125rem; height: 1.125rem; transition: transform var(--ed-duration) var(--ed-ease); }
.ed-button--brand { background: var(--brand); border-color: var(--brand); }
.ed-button--secondary { background: transparent; color: var(--ed-ink); border-color: var(--ed-line); }
.ed-button:active:not(:disabled) { transform: scale(.98); }
.ed-button[disabled] { opacity: .45; cursor: not-allowed; }
.ed-text-link { display: inline-flex; align-items: center; gap: .75rem; min-height: 2.75rem; font-weight: 500; }
.ed-text-link svg { width: 1.125rem; height: 1.125rem; }
.ed-text-link:hover { color: var(--brand); }
.ed-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.ed-frame { background: var(--ed-frame); padding: .75rem; border-radius: var(--ed-radius-xl); }
.ed-card { padding: 2rem; background: var(--surface); min-width: 0; border-radius: calc(var(--ed-radius-xl) - .75rem); }
.ed-card h3 { font-size: var(--ed-card-title); line-height: 1.2; letter-spacing: -.025em; font-weight: 500; }
.ed-card p { color: var(--ed-muted); }
.ed-number { font-size: var(--ed-stat); line-height: 1; letter-spacing: -.055em; font-weight: 400; font-variant-numeric: tabular-nums; }
.ed-tag { display: inline-block; padding: .375rem .75rem; border-radius: var(--ed-radius-pill); background: var(--ed-frame); font-size: var(--ed-label); line-height: 1.4; }
.ed-image { border-radius: var(--ed-radius-lg); }
/* Image geometry has its own sharper language; controls retain soft radii.
   The same image supplies every fragment, so texture and composition align. */
.ed-cut-image { --cut-unit: 2rem; border-radius: 6px; }
@supports (mask-image: url("")) {
  .ed-cut-image--bottom-right {
    mask: linear-gradient(#000 0 0) top left / 100% calc(100% - var(--cut-unit) * 3 + 1px) no-repeat,
      linear-gradient(#000 0 0) bottom left / calc(100% - var(--cut-unit) * 4 + 1px) calc(var(--cut-unit) * 3) no-repeat,
      url("../img/ui/pixel-cut-bottom-right.svg") bottom right / calc(var(--cut-unit) * 4) calc(var(--cut-unit) * 3) no-repeat;
  }
  .ed-cut-image--top-left {
    mask: linear-gradient(#000 0 0) bottom left / 100% calc(100% - var(--cut-unit) * 3 + 1px) no-repeat,
      linear-gradient(#000 0 0) top right / calc(100% - var(--cut-unit) * 4 + 1px) calc(var(--cut-unit) * 3) no-repeat,
      url("../img/ui/pixel-cut-top-left.svg") top left / calc(var(--cut-unit) * 4) calc(var(--cut-unit) * 3) no-repeat;
  }
}
.ed-faq { border-top: 1px solid var(--ed-line); }
.ed-faq details { border-bottom: 1px solid var(--ed-line); }
.ed-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 5rem; padding: 1.25rem 0; cursor: pointer; font-size: var(--ed-lede); font-weight: 500; list-style: none; }
.ed-faq summary::-webkit-details-marker { display: none; }
.ed-faq summary::after { content: "+"; font-size: var(--ed-card-title); font-weight: 400; }
.ed-faq details[open] summary::after { content: "−"; }
.ed-faq details p { padding: 0 2rem 1.5rem 0; color: var(--ed-muted); max-width: 60ch; }
.ed-field { display: grid; gap: .5rem; font-size: var(--ed-label); }
.ed-field input, .ed-field textarea { padding: .875rem 1rem; border: 1px solid var(--ed-line); background: var(--surface); min-height: 3rem; border-radius: var(--ed-radius-sm); font-size: var(--ed-body); }
.ed-field input[aria-invalid="true"] { border-color: var(--destructive); }
.ed-field__error { color: var(--destructive-foreground); }
@media (hover:hover) and (pointer:fine) {
  .ed-button:hover:not(:disabled) { background: var(--brand); border-color: var(--brand); color: var(--surface); }
  .ed-button--brand:hover:not(:disabled) { background: var(--brand-hover); border-color: var(--brand-hover); }
  .ed-button:hover .ed-button__icon svg { transform: none; }
}
@media (max-width:639px) {
  .editorial { --ed-radius-xl: 1.5rem; }
  .ed-heading { margin-bottom: 2rem; }
  .ed-card { padding: 1.5rem; }
}
@media (prefers-reduced-motion:reduce) {
  .editorial *, .editorial *::before, .editorial *::after { scroll-behavior: auto; }
  .ed-button, .ed-button__icon svg { transition: none; }
  .ed-button:active, .ed-button:hover .ed-button__icon svg { transform: none; }
}


/* The right-hand column of a split section heading: supporting line, then the
   link onward. Without this the lede alone sat against the headline.
   The paragraph repeats the .ed-heading lede treatment because it is no longer
   a direct child of .ed-heading, so that selector no longer reaches it. */
.ed-heading__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.ed-heading__aside > p {
  margin: 0; color: var(--ed-muted); max-width: 36rem;
  font-size: var(--ed-lede); line-height: 1.5;
}