<!-- PROVOLTA · part 3 -->
y-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; transform: scale(1.02); }
    .sanctuary-copy h2 { margin: 1rem 0 1.4rem; font-size: clamp(2.8rem, 6vw, 5rem); line-height: .9; font-weight: 500; }
    .sanctuary-copy p { color: var(--muted); max-width: 34rem; }
    .status-line {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: .7rem 1rem;
      margin: 2rem 0 0;
      padding-top: 1.5rem;
      border-top: 1px solid var(--line);
    }
    .pulse { width: .7rem; height: .7rem; margin-top: .35rem; border-radius: 50%; background: var(--teal-bright); box-shadow: 0 0 0 .35rem color-mix(in srgb, var(--teal) 16%, transparent), 0 0 18px var(--teal); }
    .status-line strong { display: block; }
    .status-line span { color: var(--muted); font-size: .9rem; }

    .closing {
      width: min(820px, calc(100% - 2.5rem));
      margin: 0 auto;
      padding: 1rem 0 clamp(5rem, 10vw, 9rem);
      text-align: center;
    }
    .closing p { margin: 0 auto; font-family: "Cormorant Garamond", serif; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.05; }
    .closing span { display: block; margin-top: 1.3rem; color: var(--teal); font: 700 .73rem/1.4 Manrope, sans-serif; letter-spacing: .15em; text-transform: uppercase; }

    .toast {
      position: fixed;
      z-index: 8;
      left: 50%;
      bottom: max(1rem, env(safe-area-inset-bottom));
      width: min(34rem, calc(100% - 2rem));
      padding: 1rem 1.2rem;
      transform: translate(-50%, 150%);
      opacity: 0;
      border: 1px solid rgba(113, 247, 217, .45);
      background: #06231e;
      color: #eafff9;
      box-shadow: 0 18px 45px rgba(0,0,0,.45);
      transition: transform .3s ease, opacity .3s ease;
    }
    .toast.show { transform: translate(-50%, 0); opacity: 1; }
    .toast strong { color: #71f7d9; }

    @media (max-width: 760px) {
      body { background: linear-gradient(180deg, var(--deep) 0 37rem, var(--bg) 37rem 100%); }
      .hero { min-height: 47rem; display: block; }
      .portrait { inset: 0; width: 100%; height: 100%; object-position: 58% 20%; }
      .hero::before { background: linear-gradient(0deg, rgba(2,13,11,.98) 0%, rgba(2,13,11,.78) 42%, rgba(2,13,11,.08) 75%), linear-gradient(90deg, rgba(2,13,11,.28), transparent); }
      .hero-copy { position: absolute; inset: auto 0 0; padding: 2rem 1.25rem 4.5rem; }
      h1 { font-size: clamp(4rem, 19vw, 6rem); }
      .hero-copy > p:not(.sigil) { font-size: .95rem; margin: 1.15rem 0 1.45rem; }
      .coordinates { right: 1rem; bottom: .8rem; }
      .coordinates span:first-child { display: none; }
      .content { width: min(100% - 2rem, 42rem); }
      .declaration, .oracle, .sanctuary { grid-template-columns: 1fr; }
      .principles { grid-template-columns: 1fr; }
      .principle { padding: 1.6rem 0; }
      .principle + .principle { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
      .lens-controls { border-right: 0; border-bottom: 1px solid var(--line); }
      .reading { min-height: 23rem; }
      .sanctuary { gap: 2.5rem; }
      .sanctuary-visual { aspect-ratio: 5 / 6; }
    }

    /* added for the live site: links into the city, safe areas, the narrowest phones */
    .pv-links { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin: 1.1rem 0 0; font-size: .86rem; }
    .pv-links a { display: inline-flex; align-items: center; min-height: 44px; color: #9ff7e4; text-decoration: none; border-bottom: 1px solid rgba(113,247,217,.35); }
    .pv-links a:hover, .pv-links a:focus-visible { color: #eafff9; border-color: #71f7d9; outline: none; }
    .hero-copy { padding-left: max(clamp(1.25rem, 6vw, 6.5rem), env(safe-area-inset-left)); padding-right: max(clamp(1.25rem, 6vw, 6.5rem), env(safe-area-inset-right)); }
    h2, blockquote, .closing p { overflow-wrap: break-word; }
    @media (max-width: 760px) { .hero-copy { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); } .approach { min-height: 3rem; } }
    @media (max-width: 360px) { h1 { font-size: 3.6rem; } .declaration h2, .sanctuary-copy h2 { font-size: 2.5rem; } blockquote { font-size: 2rem; } .coordinates { font-size: .64rem; gap: .5rem; } }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    }
  </style>
</head>
<body>
  <header class="hero" aria-labelledby="hero-title">
    <img class="portrait" src="/provolta/oracle.webp" srcset="/provolta/oracle-640.webp 640w, /provolta/oracle.webp 1120w" width="1120" height="2240" sizes="(max-width: 760px) 100vw, 66vw" fetchpriority="high" decoding="async" alt="PROVOLTA, the Oracle, with teal-fire eyes and cosmic robes overlooking the city from her cliff sanctuary" />
    <div class="hero-copy">
      <p class="sigil">Sanctuary signal established</p>
      <h1 id="hero-title">PROVOLTA <span>The Oracle</span></h1>
      <p