/* Reference-led editorial hero. All rules are scoped; nav and news stay intact.
   The raster is a layout grid, and the network is an illustrative animation. */
@font-face {
  font-family: '51 Instrument Serif';
  src: url('/images/fonts/instrument-serif-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html[data-theme]:not(#legacy-typeface) body.home-editorial.home-refined.home-openai-clean {
  .editorial-hero {
    --hero-bg: #f6f7f9;
    --hero-text: #17202b;
    --hero-muted: #5c6470;
    --hero-grid: rgba(0, 102, 204, .06);
    --hero-glow: rgba(0, 163, 204, .1);
    --hero-blue: #254fc0;
    --hero-code: #778392;
    --hero-cell: 28px;
    background-color: var(--hero-bg) !important;
    background-image:
      linear-gradient(var(--hero-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px),
      radial-gradient(ellipse at 85% 45%, var(--hero-glow), transparent 72%) !important;
    background-size: var(--hero-cell) var(--hero-cell), var(--hero-cell) var(--hero-cell), 100% 100% !important;
    background-position: 0 0 !important;
    border-bottom: 1px solid var(--hero-grid);
    isolation: isolate;
  }
  .editorial-hero-grid {
    max-width: 1280px;
    min-height: 163px;
    grid-template-columns: minmax(0, 1fr) 380px;
    column-gap: 32px;
    align-items: center;
  }
  .editorial-hero-copy { padding: 8px 0 !important; align-items: flex-start !important; }
  .editorial-hero-kicker {
    margin: 0 0 6px !important;
    font: 600 11px/1.55 var(--font-mono) !important;
    letter-spacing: .13em !important;
    color: var(--editorial-blue);
  }
  .editorial-hero-copy h1,
  .editorial-hero-copy h1 span {
    font-family: '51 Instrument Serif', Georgia, 'Times New Roman', serif !important;
    font-size: clamp(44px, 4.5vw, 60px) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-synthesis: none;
    line-height: 1.02 !important;
    letter-spacing: -.025em !important;
    color: var(--hero-text) !important;
    -webkit-text-fill-color: currentColor;
    background: none !important;
  }
  .editorial-hero-copy h1 { margin: 0 !important; max-width: 100%; }
  .hero-title-line { display: inline; white-space: nowrap; }
  .editorial-hero-copy h1 .hero-title-dot { color: var(--hero-blue) !important; }
  .editorial-hero-conversion { display: flex; flex-wrap: wrap; align-items: center; width: 100%; margin-top: 10px !important; gap: 6px 18px; }
  .editorial-latest-issue { font-size: 14px; line-height: 24px; color: var(--hero-text); }
  .hero-signup { flex: 0 1 360px; width: 100%; max-width: 360px; margin: 0; }
  .hero-signup .signup-form {
    position: relative; display: flex; padding: 0; min-height: 44px;
    background: var(--bg); border: 0; border-radius: 100px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hero-text) 19%, transparent);
    transition: box-shadow .18s ease;
  }
  .hero-signup .signup-form:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hero-text) 32%, transparent); }
  .hero-signup .signup-form:focus-within { box-shadow: inset 0 0 0 1.5px var(--hero-blue), 0 0 0 3px color-mix(in srgb, var(--hero-blue) 10%, transparent); }
  .hero-signup .signup-form.has-error { box-shadow: inset 0 0 0 2px var(--error, #dc2626); }
  .hero-signup .signup-form input[type='email'] {
    width: 100%; min-width: 0; height: 44px; padding: 0 110px 0 42px;
    font-size: 16px; font-weight: 400; line-height: 1.25; color: var(--hero-text); border-radius: 100px;
  }
  .hero-signup .signup-form input[type='email']::placeholder { color: var(--hero-muted); opacity: 1; }
  .hero-signup-icon {
    position: absolute; left: 15px; top: 13px; width: 18px; height: 18px;
    color: var(--hero-muted); fill: none; stroke: currentColor; stroke-width: 1.2;
    stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
  }
  .hero-signup .signup-form:focus-within .hero-signup-icon { color: var(--hero-blue); }
  .hero-signup .hero-signup-submit {
    position: absolute; inset: 0 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 100px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 100px;
    background: #090909; color: #fff; font: 700 13px/1 'DM Sans', sans-serif;
    cursor: pointer; box-shadow: none;
  }
  .hero-signup .hero-signup-submit:hover { background: #303030; }
  .hero-signup .hero-signup-submit:focus-visible { outline: 2px solid var(--hero-blue); outline-offset: 3px; }
  .hero-signup .hero-signup-submit:disabled { cursor: wait; }
  .hero-signup .button-loader {
    position: absolute; left: calc(50% - 9px); top: calc(50% - 9px); margin: 0;
    color: #fff; border-color: currentColor; border-right-color: transparent; pointer-events: none;
  }
  .hero-signup .form-status {
    justify-content: center; padding: 8px 16px; font-size: 13px; line-height: 1.4;
    color: var(--hero-text); background: var(--bg); box-shadow: inset 0 0 0 1px var(--hero-blue);
  }
  .hero-signup .form-error { color: var(--error, #dc2626); font-size: 12px; line-height: 1.5; }
  .editorial-hero-earth {
    display: block;
    position: relative;
    inset: auto;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: 160px;
    justify-self: stretch;
    border-radius: 0;
    overflow: visible;
    opacity: 1;
    contain: layout style;
  }
  .editorial-hero-earth::after { display: none; }
  .editorial-hero-earth > img { display: none; }
  .editorial-earth-frame { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
  .editorial-earth-frame > .editorial-earth-canvas,
  .editorial-earth-frame > .editorial-earth-light { transform: scale(2.15); transform-origin: 50% 50%; }
  .editorial-earth-light {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    inset: -2% 0 auto;
    color: var(--hero-code);
    opacity: .7;
  }
  .editorial-earth-light > circle { fill: var(--hero-bg); }
  .editorial-earth-canvas { display: block; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
  [data-globe-ready] .editorial-earth-canvas { opacity: 1; }
  [data-globe-ready] .editorial-earth-light { display: none; }
  .hero-matrix { position: absolute; inset: 0; pointer-events: none; }
  .hero-matrix-cell {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 120px;
    white-space: nowrap;
  }
  .hero-matrix-cell span {
    font: 400 9px/1.4 'SFMono-Regular', Consolas, 'Liberation Mono', monospace !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
    color: var(--hero-code);
  }
  .hero-matrix-cell [data-matrix-number] { opacity: .75; }
  .hero-matrix-cell [data-matrix-name] {
    color: var(--hero-blue);
    opacity: 0;
    transform: translateY(3px);
    transition: opacity .7s ease, transform .7s ease;
  }
  .hero-matrix-cell[data-active] [data-matrix-name] { opacity: 1; transform: translateY(0); }
  [data-matrix-cell='0'] { top: 16px; left: 0; }
  [data-matrix-cell='1'] { top: 16px; right: 0; text-align: right; }
  [data-matrix-cell='2'], [data-matrix-cell='3'] { display: none; }
  [data-matrix-cell='4'] { bottom: 44px; left: 0; }
  [data-matrix-cell='5'] { bottom: 44px; right: 0; text-align: right; }
  .editorial-globe-toggle { display: none; }
  .editorial-globe-toggle:not([hidden]) {
    display: grid;
    place-items: center;
    position: absolute;
    right: -8px;
    bottom: 2px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--hero-muted);
    pointer-events: auto;
    cursor: pointer;
  }
  .editorial-globe-toggle:hover { background: var(--hero-grid); color: var(--hero-text); }
  .editorial-globe-toggle:focus-visible { outline: 2px solid var(--hero-blue); outline-offset: 1px; }
  .editorial-globe-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .editorial-globe-toggle .globe-play-icon { display: none; }
  [data-globe-paused] .globe-pause-icon { display: none; }
  [data-globe-paused] .globe-play-icon { display: block; }
  [data-globe-paused] [data-matrix-name] { transition: none; }

  @media (max-width: 1000px) {
    .editorial-hero-grid { grid-template-columns: minmax(0, 1fr) 180px; gap: 24px; }
    .hero-signup { flex-basis: 360px; max-width: 360px; }
    .editorial-hero-earth { height: 156px; }
    .editorial-earth-frame > .editorial-earth-canvas,
    .editorial-earth-frame > .editorial-earth-light { transform: scale(1.65); }
    .hero-matrix-cell { width: 100px; }
    [data-matrix-cell='4'], [data-matrix-cell='5'] { display: none; }
  }
  @media (max-width: 760px) {
    .editorial-hero-grid { display: grid; padding-inline: 24px; grid-template-columns: minmax(0, 1fr) 140px; gap: 20px; }
    .editorial-hero-copy h1, .editorial-hero-copy h1 span { font-size: 40px !important; }
    .editorial-hero-earth { height: 140px; }
    .editorial-hero-conversion { column-gap: 14px; }
    .hero-signup { flex-basis: 360px; max-width: 360px; }
    .editorial-latest-issue { font-size: 12px; }
    .hero-matrix-cell { width: 90px; }
  }
  @media (max-width: 640px) {
    .editorial-hero-grid { display: flex; flex-direction: column; align-items: stretch; justify-content: center; min-height: 204px; padding-inline: 20px; }
    .editorial-hero-copy { padding-block: 8px !important; }
    .editorial-hero-copy h1, .editorial-hero-copy h1 span { font-size: 44px !important; }
    .editorial-hero-conversion { margin-top: 8px !important; }
    .hero-signup { flex-basis: 100%; max-width: 360px; }
    .editorial-latest-issue { font-size: 13px; line-height: 20px; }
    .editorial-hero-earth { display: none; }
  }
  @media (min-width: 481px) and (max-width: 640px) {
    .editorial-hero-grid { min-height: 163px; }
    .editorial-hero-copy { padding-block: 8px !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-matrix-cell [data-matrix-name] { transition: none; }
    .hero-signup .signup-form { transition: none; }
  }
}

html[data-theme='dark']:not(#legacy-typeface) body.home-editorial.home-refined.home-openai-clean .editorial-hero {
  --hero-bg: #12110f;
  --hero-text: #eeece6;
  --hero-muted: #aaa79f;
  --hero-grid: rgba(85, 164, 255, .08);
  --hero-glow: rgba(0, 163, 204, .12);
  --hero-blue: #82a8ff;
  --hero-code: #8d939e;
}

/* One email-field treatment for both homepage signup placements. */
html[data-theme]:not(#legacy-typeface) body.home-editorial.home-refined.home-openai-clean {
  --home-field-ink: #17202b;
  --home-field-muted: #5c6470;
  --home-field-bg: #fff;
  --home-field-height: 44px;
  :is(.hero-signup .signup-form, .homepage-email-field) {
    position: relative; display: flex; align-items: center;
    min-width: 0; height: var(--home-field-height); min-height: var(--home-field-height);
    padding: 0; border: 0 !important; border-radius: 100px !important;
    background: var(--home-field-bg) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--home-field-ink) 19%, transparent) !important;
  }
  .homepage-email-field { flex: 1 1 0; width: 100%; }
  :is(.hero-signup .signup-form, .homepage-email-field):focus-within {
    box-shadow: inset 0 0 0 1.5px var(--subscriber-focus-line), 0 0 0 3px var(--subscriber-focus-halo) !important;
  }
  :is(#homepageHeroEmail, #homepageFinalEmail) {
    box-sizing: border-box; width: 100%; min-width: 0;
    height: var(--home-field-height) !important; min-height: var(--home-field-height) !important;
    padding: 0 16px 0 42px !important; border: 0 !important; border-radius: 100px !important;
    background: transparent !important; color: var(--home-field-ink) !important;
    font: 400 16px/1.25 'DM Sans', sans-serif !important;
    outline: 0 !important; box-shadow: none !important;
  }
  #homepageHeroEmail { padding-right: 110px !important; }
  :is(#homepageHeroEmail, #homepageFinalEmail)::placeholder { color: var(--home-field-muted); opacity: 1; }
  .hero-signup-icon { top: 50%; transform: translateY(-50%); color: var(--home-field-muted); }
  .hero-signup .signup-form { --home-field-height: 44px; }
  .hero-signup .signup-form:focus-within .hero-signup-icon { color: var(--home-field-muted); }
  .editorial-newsletter .signup-form { flex-direction: row; align-items: center; min-height: var(--home-field-height); gap: 8px; }
  .editorial-newsletter .idx-signup-button { width: auto; height: 44px; min-height: 44px; }
  .signup-form.has-error .homepage-email-field,
  .hero-signup .signup-form.has-error {
    box-shadow: inset 0 0 0 2px var(--subscriber-error) !important;
  }
  @media (max-width: 640px) {
    --home-field-height: 40px;
    .editorial-hero-grid { min-height: 192px; }
    .editorial-hero-copy { padding-block: 4px !important; }
    .hero-signup .signup-form { margin-block: 0; }
    .editorial-newsletter .idx-signup-button { padding-inline: 16px; }
  }
  @media (max-width: 360px) {
    .editorial-newsletter .signup-form { flex-wrap: wrap; }
    .editorial-newsletter .homepage-email-field { flex-basis: 100%; }
  }
}
html[data-theme='dark']:not(#legacy-typeface) body.home-editorial.home-refined.home-openai-clean {
  --home-field-ink: #eeece6;
  --home-field-muted: #aaa79f;
  --home-field-bg: #171717;
}