/* pwp-authored-additional-v1-20261028: technical foundation only */
@layer pwp-runtime-foundation {
  :root {
    --bg:#101010; --text:#f8fafc;
    --surface:#14151b; --text-muted:#94a3b8;
    --primary:#e4f222; --primary-fg:#08090a;
    --border:#26282e;
  }
  *, *::before, *::after { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { margin:0; background:var(--bg); color:var(--text); }
  img, video { max-inline-size:100%; block-size:auto; }
  button, input, select, textarea { font:inherit; }
  button, summary { cursor:pointer; }
  :where(a,button,input,select,textarea,summary):focus-visible { outline:2px solid currentColor; outline-offset:4px; }
  .skip { position:fixed; inset-block-start:-10rem; inset-inline-start:1rem; z-index:10000; padding:.75rem; background:var(--bg); color:var(--text); }
  .skip:focus { inset-block-start:1rem; }
  /* Legal prose is a separate utility; never constrain the author's main site. */
  .legal-container { max-inline-size:76ch; margin-inline:auto; padding:clamp(1rem,4vw,3rem); }
  .legal-body { line-height:1.7; overflow-wrap:anywhere; }
  .legal-body p + p, .legal-body section + section { margin-block-start:1.25em; }
  .legal-body table { display:block; overflow-x:auto; max-inline-size:100%; }
  .legal-body h1, .legal-body h2, .legal-body h3, .legal-title { line-height:1.2; }
  .cookie-banner { position:fixed; inset-inline:1rem; inset-block-end:1rem; z-index:9999; max-inline-size:34rem; padding:1rem; border:1px solid var(--border); background:var(--bg); color:var(--text); }
  .cookie-text { font:14px/1.5 system-ui,sans-serif; }
  .cookie-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-block-start:.75rem; }
  .cookie-actions button { min-block-size:44px; padding:.6rem 1rem; border:1px solid var(--border); background:var(--surface); color:var(--text); }
  .cookie-actions [data-action="accept-cookie"] { background:var(--primary); color:var(--primary-fg); }
}
/* Required state, not a visual layout. Expanded pages may be grid/flex/block. */
[hidden], .cookie-banner.hidden { display:none !important; }
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* === AUTHOR-OWNED SITE STYLES === */
:root {
    --canvas: #101010;
    --surface: #14151b;
    --surface-elevated: #1c1d24;
    --border: #26282e;
    --border-soft: #1a1b20;
    --text: #f8fafc;
    --muted: #94a3b8;
    --lime: #e4f222;
    --lime-ink: #08090a;
    --warm: #d5a85a;
    --max: 1240px;
    --measure: 720px;
    --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
    --display: "Space Grotesk", "Inter", sans-serif;
    --mono: "JetBrains Mono", monospace;
  }

  * { box-sizing: border-box; }

  html {
    background: var(--canvas);
    color-scheme: dark;
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    background: var(--canvas);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }

  a {
    color: inherit;
    text-decoration-color: rgba(228, 242, 34, .55);
    text-underline-offset: .22em;
  }

  a:hover { text-decoration-color: var(--lime); }

  :focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 4px;
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(16, 16, 16, .96);
    border-bottom: 1px solid var(--border);
  }

  .nav-inner {
    width: min(100% - 40px, var(--max));
    min-height: 78px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
  }

  .wordmark {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -.04em;
    white-space: nowrap;
  }

  .wordmark-mark {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid var(--lime);
    color: var(--lime);
  }

  .wordmark-mark svg { width: 18px; height: 18px; }

  .wordmark-name {
    font: 700 17px/1 var(--display);
  }

  .wordmark-name span { color: var(--lime); }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .nav-links a,
  .language-link {
    color: var(--muted);
    font-size: 13px;
    text-decoration: none;
  }

  .nav-links a:hover,
  .language-link:hover { color: var(--text); }

  .nav-links .nav-action {
    color: var(--lime-ink);
    background: var(--lime);
    padding: 10px 15px;
    font-weight: 700;
  }

  .page {
    width: min(100% - 40px, var(--max));
    margin: 0 auto;
    padding: 76px 0 110px;
  }

  .page[hidden] { display: none; }

  .page-intro {
    max-width: 900px;
    padding-bottom: 58px;
    border-bottom: 1px solid var(--border);
  }

  .eyebrow {
    margin: 0 0 18px;
    color: var(--lime);
    font: 11px/1.2 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  h1, h2, h3 {
    margin: 0;
    color: var(--text);
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: -.045em;
  }

  h1 {
    max-width: 920px;
    font-size: clamp(2.8rem, 7vw, 6.8rem);
    line-height: .94;
  }

  h2 {
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 1;
  }

  h3 {
    font-size: 1.35rem;
    line-height: 1.15;
  }

  .lede {
    max-width: 650px;
    margin: 28px 0 0;
    color: var(--muted);
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1.55;
  }

  .hero {
    min-height: 540px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    align-items: end;
    gap: 50px;
    padding: 80px 0 76px;
    border-bottom: 1px solid var(--border);
  }

  .hero-copy { padding-bottom: 12px; }

  .hero-copy h1 { max-width: 700px; }

  .hero-visual {
    min-height: 390px;
    position: relative;
    border: 1px solid var(--border);
    background:
      linear-gradient(90deg, transparent 49.7%, var(--border) 50%, transparent 50.3%),
      linear-gradient(0deg, transparent 49.7%, var(--border) 50%, transparent 50.3%),
      var(--surface);
    overflow: hidden;
  }

  .hero-visual::before,
  .hero-visual::after {
    content: "";
    position: absolute;
    inset: 12%;
    border: 1px solid var(--border);
    transform: rotate(15deg);
  }

  .hero-visual::after {
    inset: 24%;
    transform: rotate(-23deg);
    border-color: rgba(213, 168, 90, .55);
  }

  .sun-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 112px;
    height: 112px;
    transform: translate(-50%, -50%);
    color: var(--lime);
  }

  .visual-caption {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font: 10px var(--mono);
    text-transform: uppercase;
    letter-spacing: .08em;
  }

  .button {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    margin-top: 32px;
    padding: 0 18px;
    background: var(--lime);
    color: var(--lime-ink);
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--lime);
  }

  .button:hover {
    background: transparent;
    color: var(--lime);
  }

  .section {
    padding: 84px 0;
    border-bottom: 1px solid var(--border);
  }

  .section-heading {
    display: grid;
    grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
    gap: 40px;
    margin-bottom: 42px;
  }

  .section-heading p {
    max-width: var(--measure);
    margin: 0;
    color: var(--muted);
  }

  .topic-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
  }

  .topic-link {
    min-height: 220px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    text-decoration: none;
  }

  .topic-link:hover { background: var(--surface-elevated); }

  .topic-index {
    color: var(--warm);
    font: 11px var(--mono);
  }

  .topic-link p {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: .94rem;
  }

  .topic-arrow {
    align-self: flex-end;
    color: var(--lime);
    font-size: 1.5rem;
  }

  .fact-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .fact {
    padding: 26px 22px;
    border-right: 1px solid var(--border);
  }

  .fact:last-child { border-right: 0; }

  .fact strong {
    display: block;
    margin-bottom: 8px;
    font: 700 1.05rem var(--display);
  }

  .fact span {
    color: var(--muted);
    font-size: .9rem;
  }

  .article-layout {
    display: grid;
    grid-template-columns: minmax(190px, .35fr) minmax(0, 1fr);
    gap: 70px;
  }

  .article-body {
    max-width: 760px;
  }

  .article-body p,
  .article-body li {
    color: #c2cad6;
    font-size: 1.04rem;
  }

  .article-body p { margin: 0 0 22px; }

  .article-body h2 {
    margin: 54px 0 20px;
    font-size: 2rem;
  }

  .article-body h3 {
    margin: 34px 0 12px;
  }

  .article-body ul,
  .article-body ol {
    padding-left: 22px;
    margin: 0 0 26px;
  }

  .article-body li { margin-bottom: 10px; }

  .side-note {
    align-self: start;
    padding: 20px;
    border-left: 2px solid var(--lime);
    background: var(--surface);
  }

  .side-note p {
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
  }

  .source-note {
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: .88rem;
  }

  .source-note a { color: var(--text); }

  .comparison {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    font-size: .94rem;
  }

  .comparison th,
  .comparison td {
    padding: 15px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
  }

  .comparison th {
    color: var(--text);
    font: 600 .9rem var(--display);
    background: var(--surface);
  }

  .comparison td { color: var(--muted); }

  .contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .75fr);
    gap: 70px;
    margin-top: 58px;
  }

  .contact-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--border);
  }

  .contact-list li {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
  }

  .contact-list strong {
    color: var(--muted);
    font: 11px var(--mono);
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .contact-list span,
  .contact-list a { color: var(--text); }

  .faq { border-top: 1px solid var(--border); }

  details {
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
  }

  summary {
    cursor: pointer;
    color: var(--text);
    font-family: var(--display);
    font-size: 1.08rem;
    font-weight: 600;
    padding-right: 24px;
  }

  details p {
    max-width: 650px;
    margin: 15px 0 0;
    color: var(--muted);
  }

  .site-footer {
    width: min(100% - 40px, var(--max));
    margin: 0 auto;
    padding: 52px 0 38px;
    border-top: 1px solid var(--border);
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr .8fr;
    gap: 44px;
  }

  .footer-grid h2 {
    margin-bottom: 14px;
    font-size: 1.2rem;
  }

  .footer-grid p,
  .footer-grid address,
  .footer-grid li {
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
    font-style: normal;
  }

  .footer-grid ul {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 48px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font: 11px var(--mono);
  }

  @media (max-width: 820px) {
    .nav-inner { width: min(100% - 28px, var(--max)); min-height: 70px; }
    .nav-links { gap: 12px; }
    .nav-links a:not(.nav-action) { display: none; }
    .page, .site-footer { width: min(100% - 28px, var(--max)); }
    .hero,
    .contact-grid,
    .article-layout { grid-template-columns: 1fr; gap: 38px; }
    .hero { padding-top: 52px; }
    .hero-visual { min-height: 300px; }
    .section-heading { grid-template-columns: 1fr; gap: 18px; }
    .topic-list,
    .fact-strip { grid-template-columns: 1fr; }
    .fact { border-right: 0; border-bottom: 1px solid var(--border); }
    .fact:last-child { border-bottom: 0; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  }

  @media (max-width: 520px) {
    .wordmark-name { font-size: 15px; }
    h1 { font-size: clamp(2.55rem, 14vw, 4.5rem); }
    .page { padding-top: 52px; }
    .contact-list li { grid-template-columns: 1fr; gap: 5px; }
    .comparison { display: block; overflow-x: auto; white-space: normal; }
    .footer-bottom { display: block; line-height: 1.8; }
  }

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

/* === OPEN NAVIGATION SURFACE SAFETY === */
/* Position, shadows, borders and scroll treatment belong to the author.
   Only an OPEN mobile menu gets a mandatory opaque readable surface. */
header.site-header[data-pwp-nav-open] {
  background-color: var(--bg, #ffffff) !important;
  isolation: isolate;
}
[data-pwp-mobile-menu][data-pwp-menu-open] {
  background-color: var(--bg, #ffffff);
  color: var(--text, #0f172a);
  max-block-size: var(--pwp-nav-available-height, calc(100dvh - 6rem));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pwp-source-note {
  margin-block-start: 1rem;
  font-size: .875em;
  line-height: 1.5;
}
.pwp-source-note a { text-decoration: underline; text-underline-offset: .2em; }