/* ── Component imports ── */
@import url('components/links.css');
@import url('components/buttons.css');
@import url('components/cards.css');
@import url('components/dialog.css');
@import url('components/toggle.css');

@layer components {

  /* ── Logo ── */
  .site-logo {
    display: flex;
    align-items: center;
    gap: .25rem;
  }

  /* Cursor absent by default - no animation means no cursor.
     Only shown when the user's OS permits motion. */
  .site-logo > .cursor { display: none; }

  @media (prefers-reduced-motion: no-preference) {
    .site-logo > .cursor {
      display: inline-block;
      inline-size: .55em;
      block-size: 1.1em;
      background: var(--colour-glow-primary);
      box-shadow: var(--glow-primary-sm);
      border-radius: 1px;
      vertical-align: middle;
      animation: cursor-blink 1.1s step-end infinite;
    }

    @media (prefers-color-scheme: light) {
      :root:not([data-theme="dark"]) .site-logo > .cursor {
        background: var(--colour-accent);
        box-shadow: var(--glow-accent-sm);
      }
    }

    :root[data-theme="light"] .site-logo > .cursor {
      background: var(--colour-accent);
      box-shadow: var(--glow-accent-sm);
    }
  }

  /* ── Hero ── */

  /* overflow: hidden lives here, not at base - it exists solely to contain
     the decorative pseudo-elements and must not clip content on mobile. */
  @media (hover: hover) {
    .hero-section { overflow: hidden; }

    .hero-section::before,
    .hero-section::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    .hero-section::before {
      inset-block-start: -20%;
      inset-inline-end: -10%;
      inline-size: min(55vw, 700px);
      block-size: min(55vw, 700px);
      background: radial-gradient(circle, var(--colour-hero-orb-cyan) 0%, transparent 70%);
    }

    .hero-section::after {
      inset-block-end: -10%;
      inset-inline-start: -5%;
      inline-size: min(35vw, 500px);
      block-size: min(35vw, 500px);
      background: radial-gradient(circle, var(--colour-hero-orb-green) 0%, transparent 70%);
    }
  }

  .hero-section > .label {
    position: relative;
    margin-block-end: 1.25rem;
    display: flex;
    align-items: center;
    gap: .75rem;
  }

  .hero-section > .label::before {
    content: '';
    display: block;
    inline-size: 1.5rem;
    block-size: 1px;
    background: var(--colour-glow-primary);
    box-shadow: var(--glow-primary-sm);
  }

  .hero-section > .title {
    position: relative;
    margin-block-end: 1.5rem;
  }

  .hero-section > .bio {
    position: relative;
    max-inline-size: 72ch;
  }

  .hero-section > .verify {
    margin-block-end: 2.5rem;
  }

  .hero-section > .cta {
    position: relative;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }

  /* ── Contact ── */
  .contact-section > .heading small {
    display: block;
    color: var(--colour-text-secondary);
    margin-block-start: .25rem;
  }

  /**
   * @section Article Page Structure
   * Owns article layout, spacing, and component surface styles.
   * Matching typography for these selectors lives in styles/typography.css.
   */
  /* ── Article page ── */
  main > article {
    padding-block: clamp(1.25rem, 3vw, 2.5rem);
    padding-inline: var(--gutter);
    max-inline-size: 72ch;
    margin-inline: auto;
  }

  main > article:has(> header > .meta) {
    position: relative;
  }

  main > article > .back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--colour-text-secondary);
    margin-block-end: .65rem;
    transition: color var(--dur-fast);
  }

  :root[data-embed="pen"] main > article > .back {
    display: none;
  }

  main > article > header { margin-block-end: 1rem; }

  main > article > header > .meta {
    position: absolute;
    inset-block-start: clamp(1.25rem, 3vw, 2.5rem);
    inset-inline-end: var(--gutter);
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: 0;
    color: var(--colour-text-secondary);
    margin-block-end: 0;
  }

  :root[data-embed="pen"] main > article > header > .meta,
  :root[data-embed="pen"] main > article > header > .title {
    display: none;
  }

  :root[data-embed="pen"] main > article > header {
    margin-block-end: .6rem;
  }

  main > article > header > .meta > span:last-child {
    opacity: .9;
  }

  main > article > header > baseline-status {
    margin-block-start: 1rem;
    padding: 1rem 1.5rem;
    --baseline-status-color-outline: var(--colour-accent);
  }

  @media (max-width: 36rem) {
    main > article {
      padding-block: 1.1rem 1.75rem;
    }

    main > article > header > .meta {
      position: static;
      justify-content: flex-start;
      gap: .75rem;
      flex-wrap: wrap;
      margin-block-end: .85rem;
    }
  }

  main > article > .title {
    margin-block-end: 1.25rem;
  }

  /* Article body - readable prose */
  main > article > .body > * + * { margin-block-start: 1.5rem; }

  main > article > .body h2 {
    margin-block-start: 4.5rem;
    color: var(--colour-text-primary);
  }

  main > article > .body h3 {
    margin-block-start: 3rem;
    color: var(--colour-glow-primary);
  }

  main > article > .body p { color: var(--colour-text-secondary); }

  main > article > .body a {
    color: var(--colour-accent);
  }

  main > article > .body strong { color: var(--colour-text-primary); }

  main > article > .body pre {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: 4px;
    padding: 1.25rem;
    overflow-x: auto;
  }

  main > article > .body code {
    color: var(--colour-glow-primary);
    background: var(--colour-surface);
    padding-block: .1em;
    padding-inline: .35em;
    border-radius: 3px;
  }

  main > article > .body pre code {
    color: inherit;
    background: none;
    padding: 0;
  }

  main > article > .body blockquote {
    border-inline-start: 2px solid var(--colour-accent);
    padding-inline-start: 1.25rem;
    color: var(--colour-text-secondary);
  }
}