@layer sop.base {
  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    background: var(--sop-ink);
    color: #fff;
    font-family: var(--sop-font);
    font-size: 1rem;
    line-height: 1.58;
    text-rendering: optimizeLegibility;
  }

  body,
  button,
  input,
  select,
  textarea {
    font-family: var(--sop-font);
  }

  *,
  *::before,
  *::after { box-sizing: border-box; }

  img,
  svg,
  video,
  iframe { max-width: 100%; height: auto; }

  img { display: block; }

  a {
    color: inherit;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
  }

  a:hover { color: var(--sop-gold-hover); }

  ::selection { background: var(--sop-gold); color: var(--sop-ink); }

  :focus-visible {
    outline: 3px solid var(--sop-gold);
    outline-offset: 3px;
  }

  .screen-reader-text:focus {
    background: var(--sop-cream);
    color: var(--sop-ink);
  }

  .sop-site-main { overflow: clip; }

  .sop-container {
    width: var(--sop-content);
    margin-inline: auto;
  }

  .sop-container--wide {
    width: var(--sop-wide);
    margin-inline: auto;
  }

  .sop-reading {
    width: var(--sop-reading);
    margin-inline: auto;
  }

  .sop-section { padding-block: var(--sop-space-8); }

  .sop-section--cream {
    background: linear-gradient(180deg, #f7f3eb, var(--sop-cream-deep));
    color: var(--sop-ink);
  }

  .sop-section--surface {
    background:
      radial-gradient(circle at 50% 0%, rgb(208 171 117 / 10%), transparent 44%),
      linear-gradient(145deg, var(--sop-surface-raised), var(--sop-navy-deep));
  }

  .sop-section--ink {
    background: linear-gradient(180deg, var(--sop-ink-soft), var(--sop-ink));
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    color: #fff;
    font-family: var(--sop-font);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.1;
    text-wrap: balance;
  }

  h1 { font-size: clamp(2.55rem, 5.3vw, 4.25rem); }
  h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
  h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.2; }
  h4 { font-size: 1.125rem; letter-spacing: -0.02em; }

  p,
  ul,
  ol,
  blockquote,
  figure,
  pre { margin: 0; }

  p,
  li { color: var(--sop-copy); }

  p + p { margin-top: var(--sop-space-4); }

  strong { color: currentColor; font-weight: 700; }

  ul,
  ol { padding-left: 1.25em; }

  li + li { margin-top: 0.5rem; }

  blockquote {
    padding: var(--sop-space-5);
    border-left: 2px solid var(--sop-gold);
    background: rgb(255 255 255 / 4%);
    color: #fff;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    line-height: 1.45;
  }

  blockquote p { color: inherit; }

  code,
  pre { font-family: var(--sop-font-mono); }

  code {
    padding: 0.12em 0.35em;
    border-radius: 0.3rem;
    background: rgb(255 255 255 / 8%);
    color: var(--sop-cream);
  }

  pre {
    overflow-x: auto;
    padding: var(--sop-space-4);
    border: 1px solid var(--sop-line);
    border-radius: var(--sop-radius);
    background: #06080c;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    color: var(--sop-copy);
  }

  th,
  td {
    padding: 0.9rem;
    border-bottom: 1px solid var(--sop-line);
    text-align: left;
    vertical-align: top;
  }

  th { color: #fff; font-weight: 700; }

  input,
  select,
  textarea {
    width: 100%;
    min-height: 2.9rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--sop-line);
    border-radius: var(--sop-radius-sm);
    background: var(--sop-surface);
    color: #fff;
  }

  input:focus,
  select:focus,
  textarea:focus {
    border-color: var(--sop-gold);
    outline: none;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  }

  @media (max-width: 767px) {
    h1 { font-size: clamp(2.35rem, 11vw, 2.9rem); }
    h2 { font-size: clamp(1.9rem, 9vw, 2.35rem); }
    h3 { font-size: 1.35rem; }
  }
}