/* Concept 03: measured typesetting, ink rules and unhurried photographs. */
body.concept-03 {
  --c03-ease: cubic-bezier(.22, .7, .25, 1);
}

/* The light printed rules stay present underneath the animated ink. */
body.concept-03 :is(.editorial-body, .editorial-practice, .note-link, .footer) {
  position: relative;
}

body.concept-03 .c03-rule::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: 1px;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
  transform-origin: left center;
}

body.concept-03 .footer.c03-rule::before {
  top: -3px;
  height: 3px;
  background: none;
  border-top: 3px double var(--ink);
}

/* Underlines follow the reading direction; focus styling remains native. */
body.concept-03 :is(.editorial-practice li a, .editorial-rail nav > a) {
  position: relative;
}

body.concept-03 :is(.editorial-practice li a, .editorial-rail nav > a)::after {
  content: "";
  position: absolute;
  inset: auto 0 5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  pointer-events: none;
}

body.concept-03 :is(.editorial-practice li a, .editorial-rail nav > a):is(:hover, :focus-visible) {
  text-decoration: none;
}

body.concept-03 :is(.editorial-practice li a, .editorial-rail nav > a):is(:hover, :focus-visible)::after {
  transform: scaleX(1);
  transform-origin: left center;
}

body.concept-03 .note-link h3 {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: transparent;
}

body.concept-03 .note-link:is(:hover, :focus-visible) h3 {
  text-decoration-color: currentColor;
}

@media (prefers-reduced-motion: no-preference) {
  body.concept-03 :is(.editorial-practice li a, .editorial-rail nav > a)::after {
    transition: transform 320ms var(--c03-ease);
  }

  body.concept-03 .note-link h3 {
    transition: text-decoration-color 240ms ease;
  }

  body.concept-03.c03-motion .c03-rule.c03-rule-seen::before {
    opacity: .65;
    animation: c03-ink-rule 800ms var(--c03-ease) both;
  }

  body.concept-03.c03-motion .editorial-practice.c03-rule.c03-rule-seen > div > h3,
  body.concept-03.c03-motion .note-link.c03-rule.c03-rule-seen > h3 {
    animation: c03-heading-align 650ms var(--c03-ease) both;
  }

  body.concept-03.c03-intro .header::after {
    content: "";
    position: absolute;
    inset: auto 0 -3px;
    height: 3px;
    border-bottom: 3px double var(--ink);
    opacity: .5;
    pointer-events: none;
    transform-origin: left center;
    animation: c03-ink-rule 1000ms var(--c03-ease) both;
  }

  body.concept-03.c03-intro .editorial-title h1 {
    animation: c03-typeset 720ms 80ms var(--c03-ease) backwards;
  }

  body.concept-03.c03-intro .editorial-lead {
    animation: c03-lead 720ms 180ms var(--c03-ease) backwards;
  }

  body.concept-03.c03-intro .editorial-portrait img {
    animation: c03-photo-ink 950ms 100ms ease-out backwards;
  }

  @media (min-width: 901px) {
    body.concept-03.c03-motion :is(.editorial-portrait, .editorial-office) {
      transform: translate3d(0, var(--c03-depth, 0px), 0);
    }
  }
}

@keyframes c03-ink-rule {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes c03-heading-align {
  from { transform: translateX(12px); }
  to { transform: translateX(0); }
}

@keyframes c03-typeset {
  from { opacity: .82; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes c03-lead {
  from { opacity: .9; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes c03-photo-ink {
  from { filter: saturate(.92) brightness(1.025); }
  to { filter: saturate(1) brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.concept-03) { scroll-behavior: auto; }

  body.concept-03 :is(.editorial-portrait, .editorial-office) {
    transform: none;
  }
}