* { box-sizing: border-box; }

    :root {
      color-scheme: dark;
      --black: #000;
      --panel: rgba(4, 10, 18, 0.86);
      --line: rgba(103, 151, 198, 0.30);
      --line-strong: rgba(69, 217, 255, 0.42);
      --blue: #1477ff;
      --cyan: #45d9ff;
      --green: #4cff68;
      --pink: #ff4fd8;
      --violet: #9d5cff;
      --text: #f5f7fb;
      --muted: #a9b5c9;
      --soft: #ced7e6;
    }

    html { min-height: 100%; background: var(--black); }

    body {
      min-height: 100svh;
      margin: 0;
      overflow-x: hidden;
      color: var(--text);
      background:
        radial-gradient(circle at 16% 12%, rgba(69, 217, 255, 0.18), transparent 22rem),
        radial-gradient(circle at 82% 18%, rgba(157, 92, 255, 0.18), transparent 25rem),
        radial-gradient(circle at 42% 84%, rgba(76, 255, 104, 0.08), transparent 26rem),
        linear-gradient(180deg, #000 0%, #020611 34%, #050713 72%, #000 100%);
      font-family:
        Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0.24;
      background:
        linear-gradient(rgba(255,255,255,0.032) 1px, transparent 1px) 0 0 / 100% 3px,
        linear-gradient(90deg, rgba(69,217,255,0.04) 1px, transparent 1px) 0 0 / 6rem 100%,
        radial-gradient(circle at center, transparent 0, rgba(0,0,0,0.70) 78%);
      mix-blend-mode: screen;
    }

    .noah-shell {
      width: min(72rem, calc(100% - 2rem));
      min-height: 100svh;
      margin-inline: auto;
      padding:
        calc(env(safe-area-inset-top, 0px) + 0.7rem)
        0
        calc(env(safe-area-inset-bottom, 0px) + 2rem);
      display: grid;
      gap: clamp(0.95rem, 3vw, 1.65rem);
      position: relative;
      z-index: 1;
    }

    .nav-actions {
      position: absolute;
      top: calc(env(safe-area-inset-top, 0px) + 0.7rem);
      right: 0;
      z-index: 5;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 0.55rem;
    }

    .nav-link {
      width: fit-content;
      min-height: 2.55rem;
      padding: 0.68rem 0.95rem;
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      border: 1px solid rgba(91, 134, 171, 0.34);
      border-radius: 999px;
      color: #c4cede;
      background: rgba(3, 10, 18, 0.68);
      text-decoration: none;
      font-size: 0.72rem;
      font-weight: 760;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      box-shadow: inset 0 0 1rem rgba(20, 119, 255, 0.035);
    }

    .nav-link::before {
      content: "‹";
      color: var(--green);
      font-size: 1.1rem;
      line-height: 1;
      filter: drop-shadow(0 0 0.35rem rgba(76, 255, 104, 0.45));
    }

    .hero-panel,
    .context-panel,
    .image-slot,

    .image-slot.protected-image {
      min-height: clamp(28rem, 58vw, 42rem);
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
    }

    .image-slot.protected-image::before {
      z-index: -3;
      background:
        linear-gradient(180deg, rgba(2, 6, 13, 0.06), rgba(2, 6, 13, 0.50)),
        var(--image);
      background-size: cover;
      background-position: center;
      filter: blur(18px) saturate(1.02) brightness(0.92);
      transform: scale(1.08);
      opacity: 0.96;
    }

    .image-slot.protected-image::after {
      inset: 0;
      z-index: 1;
      border: 0;
      border-radius: inherit;
      background:
        linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.06) 48%, rgba(0,0,0,0.46) 100%),
        radial-gradient(circle at 50% 18%, rgba(255,255,255,0.08), transparent 26rem);
      opacity: 1;
    }

    .protected-art {
      position: absolute;
      inset: 0.95rem;
      z-index: 0;
      border: 1px solid rgba(255,255,255,0.13);
      border-radius: 1rem;
      background-image: var(--image);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      opacity: 1;
      box-shadow:
        inset 0 0 0 1px rgba(0,0,0,0.24),
        0 1rem 2.4rem rgba(0,0,0,0.28);
      pointer-events: none;
    }

    .image-slot.protected-image .slot-copy {
      width: min(100%, 17rem);
      padding: 0.55rem 0.62rem;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 0.75rem;
      background: rgba(2, 7, 14, 0.54);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }


    .note-card {
      border: 1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.035), transparent 20%),
        rgba(3, 10, 18, 0.82);
      box-shadow:
        0 1rem 2.3rem rgba(0, 0, 0, 0.30),
        inset 0 0 1.8rem rgba(20, 119, 255, 0.035);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .hero-panel {
      position: relative;
      overflow: hidden;
      min-height: min(68svh, 42rem);
      padding: clamp(1.15rem, 5vw, 3rem);
      padding-right: clamp(1.15rem, 18vw, 8rem);
      display: grid;
      align-content: end;
      border-radius: clamp(1.3rem, 4vw, 2.1rem);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.045), transparent 18%),
        radial-gradient(circle at 76% 18%, rgba(69,217,255,0.16), transparent 20rem),
        linear-gradient(120deg, rgba(20,119,255,0.12), transparent 38%, rgba(157,92,255,0.11)),
        rgba(2, 7, 14, 0.84);
      box-shadow:
        0 1.3rem 3.2rem rgba(0, 0, 0, 0.45),
        0 0 2.4rem rgba(20, 119, 255, 0.10),
        inset 0 0 3rem rgba(69, 217, 255, 0.035);
    }

    .hero-panel::before {
      content: "";
      position: absolute;
      inset: -10%;
      opacity: 0.27;
      background:
        radial-gradient(circle at 16% 16%, rgba(69,217,255,0.22), transparent 10rem),
        radial-gradient(circle at 78% 18%, rgba(255,79,216,0.18), transparent 12rem),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 5.8rem),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 6.6rem);
      transform: skewY(-4deg) scale(1.05);
      pointer-events: none;
    }

    .hero-panel::after {
      content: "";
      position: absolute;
      top: clamp(1rem, 4vw, 2rem);
      right: clamp(1rem, 5vw, 3rem);
      width: min(44vw, 20rem);
      aspect-ratio: 1;
      border: 1px solid rgba(69, 217, 255, 0.20);
      border-radius: 50%;
      background:
        radial-gradient(circle, rgba(76,255,104,0.12), transparent 32%),
        conic-gradient(from 0deg, rgba(69,217,255,0.02), rgba(69,217,255,0.34), rgba(157,92,255,0.20), rgba(76,255,104,0.28), rgba(69,217,255,0.02));
      opacity: 0.58;
      filter: blur(0.1px) drop-shadow(0 0 1.8rem rgba(69, 217, 255, 0.16));
      mask: radial-gradient(circle, transparent 0 42%, #000 43% 45%, transparent 46% 52%, #000 53% 54%, transparent 55%);
      -webkit-mask: radial-gradient(circle, transparent 0 42%, #000 43% 45%, transparent 46% 52%, #000 53% 54%, transparent 55%);
    }

    .hero-copy {
      position: relative;
      z-index: 2;
      max-width: 56rem;
    }

    .eyebrow,
    .section-label,
    .slot-label {
      margin: 0;
      color: #9ed8ff;
      font-size: 0.72rem;
      font-weight: 820;
      letter-spacing: 0.24em;
      text-transform: uppercase;
    }

    h1 {
      margin: 0;
      font-size: clamp(4rem, 18vw, 11rem);
      line-height: 0.82;
      letter-spacing: -0.095em;
      text-transform: uppercase;
      text-shadow:
        0 0 1rem rgba(255,255,255,0.12),
        0 0 2rem rgba(20,119,255,0.15),
        0 0 2.8rem rgba(157,92,255,0.12);
    }

    .tagline {
      max-width: 46rem;
      margin: clamp(1rem, 4vw, 1.7rem) 0 0;
      color: #c1c9d8;
      font-size: clamp(1.02rem, 3vw, 1.35rem);
      line-height: 1.65;
      text-wrap: balance;
    }

    .status-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
      margin-top: clamp(1rem, 3vw, 1.45rem);
    }

    .status-pill {
      width: fit-content;
      padding: 0.54rem 0.78rem;
      border: 1px solid rgba(69, 217, 255, 0.32);
      border-radius: 999px;
      color: #cff4ff;
      background: rgba(69, 217, 255, 0.07);
      font-size: 0.68rem;
      font-weight: 820;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .context-panel {
      padding: clamp(1.1rem, 4vw, 1.75rem);
      display: grid;
      gap: 0.8rem;
      border-radius: clamp(1rem, 3vw, 1.45rem);
    }

    h2 {
      margin: 0;
      font-size: clamp(2rem, 6vw, 4.5rem);
      line-height: 0.92;
      letter-spacing: -0.065em;
    }

    .context-panel p,
    .note-card p {
      max-width: 59rem;
      margin: 0;
      color: #c0c8d8;
      font-size: clamp(1rem, 2.4vw, 1.16rem);
      line-height: 1.72;
    }

    .image-grid,
    .note-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(0.75rem, 2vw, 1rem);
    }

    .image-slot {
      min-height: clamp(22rem, 52vw, 34rem);
      padding: clamp(1rem, 3vw, 1.35rem);
      display: grid;
      align-content: end;
      position: relative;
      overflow: hidden;
      border-radius: clamp(1rem, 3vw, 1.45rem);
      isolation: isolate;
    }

    .image-slot::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        radial-gradient(circle at 22% 18%, rgba(69,217,255,0.18), transparent 12rem),
        radial-gradient(circle at 82% 20%, rgba(157,92,255,0.18), transparent 12rem),
        linear-gradient(145deg, rgba(8, 17, 29, 0.94), rgba(3, 9, 17, 0.90));
    }

    .image-slot::after {
      content: "";
      position: absolute;
      inset: 1rem;
      z-index: -1;
      border: 1px dashed rgba(69,217,255,0.35);
      border-radius: 1rem;
      background:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px) 0 0 / 100% 3px,
        linear-gradient(135deg, transparent 0 46%, rgba(255,255,255,0.08) 47%, transparent 48%);
      opacity: 0.8;
    }

    .slot-copy {
      display: grid;
      gap: 0.28rem;
      position: relative;
      z-index: 2;
    }

    .slot-title {
      margin: 0;
      font-size: clamp(1.05rem, 3vw, 1.45rem);
      line-height: 1;
      letter-spacing: -0.04em;
    }

    .slot-copy p {
      margin: 0;
      color: #d4dae6;
      font-size: 0.8rem;
      line-height: 1.35;
    }

    .slot-copy .slot-label {
      font-size: 0.58rem;
      letter-spacing: 0.18em;
    }


    .image-slot.protected-image {
      min-height: clamp(28rem, 58vw, 42rem);
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
    }

    .image-slot.protected-image::before {
      z-index: -3;
      background:
        linear-gradient(180deg, rgba(2, 6, 13, 0.06), rgba(2, 6, 13, 0.50)),
        var(--image);
      background-size: cover;
      background-position: center;
      filter: blur(18px) saturate(1.02) brightness(0.92);
      transform: scale(1.08);
      opacity: 0.96;
    }

    .image-slot.protected-image::after {
      inset: 0;
      z-index: 1;
      border: 0;
      border-radius: inherit;
      background:
        linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.06) 48%, rgba(0,0,0,0.46) 100%),
        radial-gradient(circle at 50% 18%, rgba(255,255,255,0.08), transparent 26rem);
      opacity: 1;
    }

    .protected-art {
      position: absolute;
      inset: 0.95rem;
      z-index: 0;
      border: 1px solid rgba(255,255,255,0.13);
      border-radius: 1rem;
      background-image: var(--image);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      opacity: 1;
      box-shadow:
        inset 0 0 0 1px rgba(0,0,0,0.24),
        0 1rem 2.4rem rgba(0,0,0,0.28);
      pointer-events: none;
    }

    .image-slot.protected-image .slot-copy {
      width: min(100%, 17rem);
      padding: 0.55rem 0.62rem;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 0.75rem;
      background: rgba(2, 7, 14, 0.54);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }


    .note-card {
      padding: clamp(1rem, 3vw, 1.35rem);
      display: grid;
      gap: 0.75rem;
      border-radius: clamp(1rem, 3vw, 1.35rem);
    }

    .note-card h3 {
      margin: 0;
      font-size: clamp(1.2rem, 3.5vw, 1.8rem);
      line-height: 1.05;
      letter-spacing: -0.045em;
    }

    @media (max-width: 760px) {
      .noah-shell { width: min(100% - 1.1rem, 72rem); }
      .hero-panel { min-height: 34rem; padding-top: 4.5rem; }
      .image-grid,
      .note-grid { grid-template-columns: 1fr; }
      .nav-link { font-size: 0.68rem; }
    }
  
    .site-footer {
      position: relative;
      z-index: 10;
      padding: 1.5rem 1rem 2rem;
      color: rgba(245, 247, 251, 0.48);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-align: center;
      text-transform: lowercase;
    }

    .site-footer span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.45rem 0.75rem;
      border: 1px solid rgba(145, 196, 255, 0.14);
      border-radius: 999px;
      background: rgba(5, 12, 22, 0.34);
      backdrop-filter: blur(10px);
      box-shadow: 0 0 1rem rgba(20, 119, 255, 0.06);
    }

/* v103: former inline style attributes */
.v103-inline-style-1 { --image: url('assets/noah-primary.jpeg'); }
.v103-inline-style-2 { --image: url('assets/noah-creation-reference.jpeg'); }