:root {
        color-scheme: light;
        --page: #f6f8f6;
        --surface: #ffffff;
        --ink: #1d2925;
        --muted: #596761;
        --green: #2e5d51;
        --green-dark: #234b40;
        --green-soft: #e5eee8;
        --line: #d8e2dc;
        --gold: #9c8052;
        --content-width: 1120px;
        --shadow-soft: 0 18px 52px rgba(35, 75, 64, 0.09), 0 3px 10px rgba(29, 41, 37, 0.05);
        --shadow-raised: 0 28px 68px rgba(35, 75, 64, 0.15), 0 8px 20px rgba(29, 41, 37, 0.08);
        --space-1: 8px;
        --space-2: 16px;
        --space-3: 24px;
        --space-4: 32px;
        --space-5: 48px;
        --space-6: 64px;
        --space-7: 88px;
        --radius-control: 12px;
        --radius-panel: 22px;
        --focus-ring: 0 0 0 3px rgba(46, 93, 81, 0.25);
      }

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

      html {
        scroll-behavior: smooth;
        scroll-padding-top: 24px;
      }

      body {
        min-width: 0;
        margin: 0;
        isolation: isolate;
        background: var(--page);
        color: var(--ink);
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: 16px;
        line-height: 1.65;
        text-rendering: optimizeLegibility;
      }

      .ambient-background {
        position: fixed;
        z-index: 0;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
      }

      .ambient-background::before {
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(46, 93, 81, 0.055) 1px, transparent 1px),
          linear-gradient(90deg, rgba(46, 93, 81, 0.055) 1px, transparent 1px);
        background-size: 46px 46px;
        content: "";
        opacity: 0.55;
        -webkit-mask-image: radial-gradient(ellipse 92% 76% at 50% 18%, #000 12%, transparent 100%);
        mask-image: radial-gradient(ellipse 92% 76% at 50% 18%, #000 12%, transparent 100%);
      }

      .ambient-spot {
        position: absolute;
        display: block;
        border-radius: 50%;
        will-change: transform;
      }

      .ambient-spot-sage {
        top: -17%;
        left: -10%;
        width: clamp(300px, 42vw, 590px);
        aspect-ratio: 1;
        background: radial-gradient(circle, rgba(185, 216, 197, 0.52) 0%, rgba(185, 216, 197, 0.2) 42%, transparent 72%);
        animation: drift-sage 25s cubic-bezier(0.42, 0, 0.58, 1) -6s infinite alternate;
      }

      .ambient-spot-gold {
        top: 25%;
        right: -13%;
        width: clamp(250px, 34vw, 470px);
        aspect-ratio: 1;
        background: radial-gradient(circle, rgba(221, 204, 163, 0.4) 0%, rgba(221, 204, 163, 0.14) 46%, transparent 72%);
        animation: drift-gold 31s cubic-bezier(0.45, 0, 0.55, 1) -13s infinite alternate;
      }

      .ambient-spot-leaf {
        bottom: -29%;
        left: 29%;
        width: clamp(320px, 46vw, 620px);
        aspect-ratio: 1;
        background: radial-gradient(circle, rgba(175, 207, 190, 0.35) 0%, rgba(175, 207, 190, 0.12) 48%, transparent 73%);
        animation: drift-leaf 36s cubic-bezier(0.4, 0, 0.6, 1) -19s infinite alternate;
      }

      .site-header,
      main,
      .site-footer {
        position: relative;
        z-index: 1;
      }

      a {
        color: inherit;
      }

      .address-link {
        text-decoration-color: rgba(46, 93, 81, 0.48);
        text-decoration-thickness: 1px;
        text-underline-offset: 4px;
        transition: color 160ms ease, text-decoration-color 160ms ease;
      }

      a:focus-visible,
      button:focus-visible,
      input:focus-visible,
      textarea:focus-visible {
        outline: 3px solid var(--green);
        outline-offset: 3px;
      }

      .container {
        width: min(var(--content-width), calc(100% - 48px));
        margin-inline: auto;
      }

      .site-header {
        border-bottom: 1px solid var(--line);
      }

      .header-inner {
        display: flex;
        min-height: 84px;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
      }

      .brand {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        color: var(--ink);
        font-size: 15px;
        font-weight: 650;
        line-height: 1.25;
        text-decoration: none;
      }

      .brand-mark {
        position: relative;
        display: block;
        width: 30px;
        height: 30px;
        flex: 0 0 auto;
        border: 1px solid var(--line);
        border-radius: 50%;
        animation: mark-breathe 7.2s ease-in-out -2.1s infinite;
      }

      .brand-mark::before,
      .brand-mark::after {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        background: var(--green);
        content: "";
        transform: translate(-50%, -50%);
      }

      .brand-mark::before {
        width: 12px;
        height: 1.5px;
      }

      .brand-mark::after {
        width: 1.5px;
        height: 12px;
      }

      .button-link {
        display: inline-flex;
        min-height: 48px;
        align-items: center;
        justify-content: center;
        padding: 11px 20px;
        border: 1px solid var(--green);
        border-radius: 999px;
        background: var(--green);
        color: var(--surface);
        font-size: 15px;
        font-weight: 650;
        line-height: 1.2;
        text-decoration: none;
        transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
      }

      .button-link:active {
        transform: translateY(0);
        animation-play-state: paused;
      }

      .hero {
        display: grid;
        grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
        align-items: center;
        gap: clamp(40px, 7vw, 96px);
        padding-block: clamp(56px, 8vw, 104px) var(--space-7);
        animation: hero-in 460ms cubic-bezier(0.2, 0.7, 0.25, 1) both;
      }


      .event-date {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 var(--space-3);
        color: var(--green);
        font-size: 15px;
        font-weight: 700;
      }

      .event-date::before {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--gold);
        content: "";
        animation: dot-pulse 5.6s ease-in-out -1.8s infinite;
      }

      h1,
      h2,
      p,
      figure,
      blockquote {
        margin-top: 0;
      }

      h1 {
        max-width: 10.5ch;
        margin-bottom: var(--space-3);
        font-size: clamp(44px, 5.6vw, 76px);
        font-weight: 640;
        letter-spacing: -0.055em;
        line-height: 0.99;
      }

      .hero-intro {
        max-width: 52ch;
        margin-bottom: var(--space-4);
        color: var(--muted);
        font-size: 18px;
        line-height: 1.65;
      }

      .event-details {
        display: grid;
        gap: 18px;
        margin: 0 0 var(--space-4);
      }

      .event-detail {
        display: grid;
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 12px;
        align-items: baseline;
      }

      .event-detail dt {
        color: var(--muted);
        font-size: 14px;
      }

      .event-detail dd {
        margin: 0;
        font-weight: 600;
        line-height: 1.5;
        overflow-wrap: anywhere;
      }

      .hero-portrait {
        position: relative;
        margin: 0;
        transform-style: preserve-3d;
        animation: portrait-float 9.5s ease-in-out -2s infinite;
      }

      .portrait-frame {
        overflow: hidden;
        aspect-ratio: 0.91;
        border-radius: var(--radius-panel);
        background: var(--green-soft);
        box-shadow: var(--shadow-soft);
        transition: box-shadow 320ms cubic-bezier(0.2, 0.7, 0.25, 1), transform 320ms cubic-bezier(0.2, 0.7, 0.25, 1);
        animation: frame-breathe 8.8s ease-in-out -4.4s infinite;
      }

      .portrait-frame img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 24%;
      }

      .portrait-caption {
        display: grid;
        gap: 2px;
        padding: 18px 2px 0;
      }

      .portrait-caption small {
        color: var(--muted);
        font-size: 13px;
      }

      .portrait-caption strong {
        font-size: 18px;
        font-weight: 680;
        line-height: 1.4;
      }

      .portrait-caption span {
        color: var(--muted);
        font-size: 15px;
      }

      .section {
        padding-block: var(--space-7);
        border-top: 1px solid var(--line);
      }

      .section-heading {
        max-width: 13ch;
        margin-bottom: var(--space-3);
        font-size: clamp(30px, 3.3vw, 42px);
        font-weight: 620;
        letter-spacing: -0.04em;
        line-height: 1.1;
      }

      .audience-layout {
        display: grid;
        grid-template-columns: minmax(190px, 0.8fr) minmax(0, 1.2fr);
        gap: clamp(32px, 8vw, 120px);
      }

      .audience-copy {
        max-width: 58ch;
        margin: 0;
        color: var(--muted);
        font-size: 19px;
        line-height: 1.7;
      }

      .verse-panel {
        position: relative;
        isolation: isolate;
        padding: clamp(32px, 6vw, 64px);
        border-radius: var(--radius-panel);
        background: var(--green-soft);
        box-shadow: var(--shadow-soft);
        transition: box-shadow 320ms cubic-bezier(0.2, 0.7, 0.25, 1), transform 320ms cubic-bezier(0.2, 0.7, 0.25, 1);
      }

      .verse-panel::after {
        position: absolute;
        z-index: -1;
        inset: 0;
        border-radius: inherit;
        box-shadow: 0 18px 40px rgba(35, 75, 64, 0.18);
        content: "";
        opacity: 0.12;
        pointer-events: none;
        animation: shadow-breathe 7.6s ease-in-out -2.7s infinite;
      }

      .verse-panel::before {
        position: absolute;
        top: 32px;
        bottom: 32px;
        left: 0;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--gold);
        content: "";
      }

      .verse-panel blockquote {
        max-width: 32ch;
        margin-bottom: 20px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(25px, 3.5vw, 38px);
        line-height: 1.35;
      }

      .verse-panel cite {
        color: var(--muted);
        font-size: 15px;
        font-style: normal;
        font-weight: 650;
      }

      .topics-layout {
        display: grid;
        grid-template-columns: minmax(190px, 0.8fr) minmax(0, 1.2fr);
        gap: clamp(32px, 8vw, 120px);
      }

      .topic-list {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .topic-list li {
        padding: 18px 0;
        border-bottom: 1px solid var(--line);
        font-size: clamp(20px, 2.5vw, 26px);
        font-weight: 560;
        line-height: 1.35;
        transition: border-color 220ms ease, color 220ms ease, padding-left 220ms ease;
      }

      .topic-list li:nth-child(2) {
        animation-delay: -4.1s;
      }

      .topic-list li:nth-child(3) {
        animation-delay: -6.6s;
      }

      .topic-list li:first-child {
        padding-top: 0;
      }

      .registration-section {
        padding-block: var(--space-7);
        border-top: 1px solid var(--line);
      }

      .registration-content {
        max-width: 840px;
        margin-inline: auto;
      }

      .registration-heading-row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--space-4);
        margin-bottom: var(--space-2);
      }

      .registration-heading-row .section-heading {
        margin-bottom: 0;
      }

      .deadline {
        flex: 0 1 auto;
        max-width: 100%;
        margin: 0 0 4px;
        color: var(--green);
        font-weight: 700;
      }

      .registration-intro {
        max-width: 64ch;
        margin-bottom: var(--space-4);
        color: var(--muted);
      }

      [hidden] {
        display: none !important;
      }

      .registration-form {
        padding: clamp(24px, 4vw, 40px);
        border: 1px solid var(--line);
        border-radius: var(--radius-panel);
        background: var(--surface);
        box-shadow: var(--shadow-soft);
        text-align: left;
      }

      .form-fields, .radio-field {
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
      }

      .form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 24px;
      }

      .form-field { min-width: 0; }
      .form-field-wide { grid-column: 1 / -1; }
      .form-field > label, .radio-field > legend {
        display: block;
        width: 100%;
        margin-bottom: 9px;
        font-size: 14px;
        font-weight: 650;
        line-height: 1.5;
      }

      .required-mark { color: var(--green); }
      .text-control {
        display: block;
        width: 100%;
        min-height: 52px;
        padding: 12px 14px;
        border: 1px solid #b9c9bf;
        border-radius: var(--radius-control);
        background: var(--surface);
        color: var(--ink);
        font: inherit;
        font-size: 16px;
        line-height: 1.5;
        transition: border-color 160ms ease, box-shadow 160ms ease;
      }

      textarea.text-control { min-height: 108px; resize: vertical; }
      .text-control:focus { border-color: var(--green); box-shadow: var(--focus-ring); }
      .text-control[aria-invalid="true"] { border-color: #a33838; }
      .text-control:disabled { background: var(--page); color: var(--muted); }
      .field-hint { margin: -2px 0 10px; color: var(--muted); font-size: 13px; line-height: 1.5; }
      .field-error { margin: 8px 0 0; color: #963030; font-size: 13px; line-height: 1.5; }
      .radio-options { display: flex; gap: 12px; }
      .radio-option {
        display: flex;
        min-height: 52px;
        max-width: 160px;
        flex: 1;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 10px 16px;
        border: 1px solid #b9c9bf;
        border-radius: var(--radius-control);
        cursor: pointer;
        transition: border-color 160ms ease, background 160ms ease;
      }
      .radio-option:has(input:checked) { border-color: var(--green); background: var(--green-soft); }
      .radio-option:focus-within { outline: 3px solid var(--green); outline-offset: 3px; }
      .radio-option input { width: 20px; height: 20px; margin: 0; accent-color: var(--green); }
      .radio-option input:focus-visible { outline: none; }
      .form-actions { display: flex; align-items: center; gap: 24px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
      .submit-button { flex: 0 0 auto; min-height: 48px; font: inherit; font-weight: 650; cursor: pointer; }
      .submit-button:disabled { cursor: wait; opacity: 0.7; }
      .submit-spinner { width: 17px; height: 17px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spinner-turn 800ms linear infinite; }
      @keyframes spinner-turn { to { transform: rotate(360deg); } }
      .form-privacy { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
      .form-privacy span { display: block; margin-top: 4px; }
      .form-notice { margin: 24px 0 0; padding: 14px 16px; border: 1px solid #dfb6b6; border-radius: 12px; background: #fff5f5; color: #813232; font-size: 14px; line-height: 1.6; }
      .form-notice:focus { outline: 2px solid #813232; outline-offset: 3px; }
      .form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
      .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
      .registration-closed { padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); }
      .registration-closed p { margin-bottom: 0; color: var(--muted); }
      .success-address { display: inline-block; margin-top: 18px; font-size: 15px; line-height: 1.6; }

      .registration-success {
        position: relative;
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        align-items: center;
        gap: 24px;
        width: min(100%, 760px);
        min-height: 236px;
        margin-inline: auto;
        padding: clamp(28px, 5vw, 48px);
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: var(--radius-panel);
        background: linear-gradient(135deg, var(--surface), rgba(229, 238, 232, 0.84));
        box-shadow: var(--shadow-soft);
        animation: confirmation-enter 560ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
      }

      .success-mark {
        display: grid;
        width: 72px;
        aspect-ratio: 1;
        place-items: center;
        border: 1px solid var(--green);
        border-radius: 50%;
        background: var(--green);
        box-shadow: 0 10px 24px rgba(35, 75, 64, 0.2);
        color: #fff;
      }

      .success-mark svg {
        width: 36px;
        height: 36px;
      }

      .success-title {
        width: fit-content;
        max-width: 100%;
        border-radius: 4px;
      }

      .success-title:focus-visible {
        outline: 2px solid var(--green);
        outline-offset: 5px;
      }

      @media (prefers-reduced-motion: no-preference) {
        .registration-success:not([hidden]) .success-mark path {
          stroke-dasharray: 28;
          stroke-dashoffset: 28;
          animation: check-draw 520ms 140ms ease-out forwards;
        }
      }

      .success-kicker {
        margin: 0 0 8px;
        color: var(--green);
        font-size: 13px;
        font-weight: 750;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .success-title {
        margin: 0 0 12px;
        font-size: clamp(26px, 3.3vw, 36px);
        letter-spacing: -0.04em;
        line-height: 1.12;
      }

      .success-text {
        max-width: 48ch;
        margin: 0;
        color: var(--muted);
        line-height: 1.7;
      }

      .success-schedule {
        display: block;
        margin-top: 10px;
        color: var(--ink);
        font-weight: 650;
      }

      @keyframes confirmation-enter {
        from {
          opacity: 0;
          transform: translateY(18px) scale(0.985);
        }

        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      @keyframes check-draw {
        to {
          stroke-dashoffset: 0;
        }
      }

      .site-footer {
        padding-block: 28px 40px;
        border-top: 1px solid var(--line);
      }

      .site-footer .footer-inner {
        transition: color 240ms ease;
      }

      .footer-inner {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px;
        color: var(--muted);
        font-size: 14px;
      }

      .footer-inner p {
        margin: 0;
      }

      .footer-title {
        color: var(--ink);
        font-weight: 650;
      }

      @keyframes hero-in {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes portrait-float {
        0%,
        100% {
          transform: translate3d(0, 0, 0) rotateZ(-0.25deg);
        }
        38% {
          transform: translate3d(0, -4px, 0) rotateZ(0.16deg);
        }
        72% {
          transform: translate3d(0, -1.5px, 0) rotateZ(-0.06deg);
        }
      }

      @keyframes gentle-levitate {
        0%,
        100% {
          translate: 0 0;
        }
        50% {
          translate: 0 -1.25px;
        }
      }

      @keyframes gentle-pulse {
        0%,
        100% {
          scale: 1;
        }
        50% {
          scale: 1.003;
        }
      }

      @keyframes button-breathe {
        0%,
        100% {
          translate: 0 0;
          box-shadow: 0 4px 12px rgba(35, 75, 64, 0.08);
        }
        50% {
          translate: 0 -1.25px;
          box-shadow: 0 8px 20px rgba(35, 75, 64, 0.15);
        }
      }

      @keyframes mark-breathe {
        0%,
        100% {
          scale: 1;
        }
        50% {
          scale: 1.035;
        }
      }

      @keyframes frame-breathe {
        0%,
        100% {
          scale: 1;
        }
        50% {
          scale: 1.004;
        }
      }

      @keyframes dot-pulse {
        0%,
        100% {
          transform: scale(1);
          box-shadow: 0 0 0 0 rgba(156, 128, 82, 0.12);
        }
        50% {
          transform: scale(1.16);
          box-shadow: 0 0 0 4px rgba(156, 128, 82, 0.08);
        }
      }

      @keyframes shadow-breathe {
        0%,
        100% {
          opacity: 0.12;
        }
        50% {
          opacity: 0.42;
        }
      }

      @keyframes drift-sage {
        0% {
          transform: translate3d(0, 0, 0) scale(0.96);
        }
        43% {
          transform: translate3d(3vw, 2vh, 0) scale(1.035);
        }
        100% {
          transform: translate3d(-1vw, 5vh, 0) scale(1);
        }
      }

      @keyframes drift-gold {
        0% {
          transform: translate3d(0, 0, 0) scale(1);
        }
        56% {
          transform: translate3d(-3vw, -2vh, 0) scale(1.06);
        }
        100% {
          transform: translate3d(-1vw, 3vh, 0) scale(0.97);
        }
      }

      @keyframes drift-leaf {
        0% {
          transform: translate3d(0, 0, 0) scale(0.97);
        }
        48% {
          transform: translate3d(2vw, -3vh, 0) scale(1.04);
        }
        100% {
          transform: translate3d(-2vw, -1vh, 0) scale(1);
        }
      }

      .motion-ready [data-reveal] {
        opacity: 0;
        transform: translate3d(0, 16px, 0);
        transition: opacity 620ms cubic-bezier(0.2, 0.7, 0.25, 1), transform 620ms cubic-bezier(0.2, 0.7, 0.25, 1);
      }

      .motion-ready [data-reveal].is-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }

      .hero-copy:focus-within,
      .button-link:focus-visible {
        animation-play-state: paused;
      }

      @media (hover: hover) and (pointer: fine) {
        .button-link:hover {
          border-color: var(--green-dark);
          background: var(--green-dark);
          transform: translateY(-1px);
          animation-play-state: paused;
        }

        .address-link:hover {
          color: var(--green);
          text-decoration-color: currentColor;
        }

        .text-control:hover {
          border-color: #9fb5aa;
        }

        .radio-option:hover {
          border-color: #9fb5aa;
          background: var(--page);
        }

        .topic-list li:hover {
          padding-left: 8px;
          border-color: rgba(46, 93, 81, 0.45);
          color: var(--green);
          animation-play-state: paused;
        }

        .portrait-frame:hover {
          box-shadow: var(--shadow-raised);
          transform: perspective(1000px) rotateY(-1deg) rotateX(0.5deg) translateY(-2px);
          animation-play-state: paused;
        }

        .verse-panel:hover {
          box-shadow: var(--shadow-raised);
          transform: perspective(1200px) rotateX(0.3deg) translateY(-3px);
          animation-play-state: paused;
        }

        .verse-panel:hover::after {
          animation-play-state: paused;
        }

        .motion-ready .verse-panel.is-visible:hover {
          box-shadow: var(--shadow-raised);
          transform: perspective(1200px) rotateX(0.3deg) translateY(-3px);
        }
      }

      @media (max-width: 900px) and (min-width: 761px) {
        .hero {
          grid-template-columns: minmax(0, 1.06fr) minmax(280px, 0.94fr);
          gap: clamp(26px, 4vw, 38px);
          padding-block: 72px 72px;
        }

        h1 {
          font-size: clamp(44px, 5.1vw, 58px);
        }

        .portrait-frame {
          aspect-ratio: 0.88;
        }

        .ambient-background::before {
          background-size: 40px 40px;
        }
      }

      @media (max-width: 760px) {
        .container {
          width: min(var(--content-width), calc(100% - 40px));
        }

        .header-inner {
          min-height: 72px;
        }

        .hero {
          grid-template-columns: 1fr;
          gap: 40px;
          padding-block: 56px 64px;
        }

        .hero-copy {
          max-width: 620px;
        }

        .hero-portrait {
          width: min(100%, 520px);
        }

        .portrait-frame {
          aspect-ratio: 1.02;
        }

        .audience-layout,
        .topics-layout {
          grid-template-columns: 1fr;
          gap: 18px;
        }

        .section,
        .registration-section {
          padding-block: 64px;
        }

        .ambient-background::before {
          background-size: 38px 38px;
          opacity: 0.34;
        }

        .ambient-spot {
          will-change: auto;
        }

        .ambient-spot-sage {
          top: -6%;
          left: -23%;
          width: 78vw;
          opacity: 0.68;
          animation-duration: 34s;
        }

        .ambient-spot-gold {
          top: 30%;
          right: -32%;
          width: 68vw;
          opacity: 0.58;
          animation-duration: 40s;
        }

        .ambient-spot-leaf {
          bottom: -16%;
          left: 16%;
          width: 82vw;
          opacity: 0.55;
          animation-duration: 44s;
        }

        .hero-portrait {
          animation-duration: 12s;
        }

        .portrait-frame,
        .verse-panel {
          box-shadow: 0 14px 36px rgba(35, 75, 64, 0.09), 0 3px 8px rgba(29, 41, 37, 0.045);
        }
      }

      @media (max-width: 700px) {
        .registration-heading-row { display: grid; justify-items: center; gap: 10px; text-align: center; }
        .registration-heading-row .section-heading { max-width: none; }
        .deadline { margin: 0; text-wrap: balance; }
        .registration-intro { margin-inline: auto; text-align: center; }
        .form-grid { grid-template-columns: 1fr; }
        .form-field > label, .radio-field > legend, .field-hint { text-align: center; }
        .radio-options { justify-content: center; }
        .form-actions { flex-direction: column; gap: 16px; align-items: center; text-align: center; }
      }

      @media (max-width: 520px) {
        .container {
          width: min(var(--content-width), calc(100% - 32px));
        }

        .brand {
          max-width: none;
          justify-content: center;
          font-size: 14px;
          text-align: center;
        }

        .brand-mark {
          width: 28px;
          height: 28px;
        }

        .header-inner {
          flex-direction: column;
          justify-content: center;
          gap: 14px;
          padding-block: 16px;
        }

        .button-link {
          min-height: 44px;
          padding-inline: 14px;
          font-size: 14px;
          white-space: nowrap;
        }

        .hero {
          gap: 32px;
          padding-block: 44px 52px;
        }

        .hero-copy {
          margin-inline: auto;
          text-align: center;
        }

        h1 {
          width: min(100%, 13ch);
          max-width: none;
          margin-inline: auto;
          font-size: clamp(36px, 10.5vw, 56px);
          text-align: center;
          text-wrap: balance;
        }

        .hero-intro {
          margin-inline: auto;
          font-size: 17px;
        }

        .event-details {
          justify-items: center;
        }

        .event-detail {
          grid-template-columns: 1fr;
          justify-items: center;
          gap: 2px;
          text-align: center;
        }

        .hero-copy > .button-link {
          display: flex;
          width: fit-content;
          margin-inline: auto;
        }

        .hero-portrait {
          margin-inline: auto;
          text-align: center;
        }

        .portrait-caption {
          text-align: center;
        }

        .portrait-frame {
          aspect-ratio: 0.98;
          border-radius: 18px;
        }

        .section,
        .registration-section {
          padding-block: 52px;
        }

        .section-heading {
          margin-inline: auto;
          text-align: center;
        }

        .audience-layout,
        .topics-layout {
          justify-items: center;
          text-align: center;
        }

        .audience-copy {
          margin-inline: auto;
        }

        .topic-list {
          width: min(100%, 460px);
          text-align: center;
        }

        .verse-panel {
          padding: 30px 24px;
          border-radius: 18px;
          text-align: center;
        }

        .verse-panel::before {
          top: 0;
          bottom: auto;
          left: calc(50% - 24px);
          width: 48px;
          height: 3px;
          border-radius: 0 0 3px 3px;
        }

        .verse-panel blockquote {
          margin-inline: auto;
        }

        .verse-panel cite {
          display: block;
          text-align: center;
        }

        .registration-content {
          text-align: center;
        }

        .registration-heading-row {
          width: 100%;
          display: grid;
          justify-items: center;
          gap: 10px;
          text-align: center;
        }

        .registration-heading-row .section-heading,
        .registration-heading-row .deadline {
          width: 100%;
        }

        .registration-heading-row .section-heading {
          max-width: none;
        }

        .registration-intro {
          margin-inline: auto;
        }

        .registration-form { padding: 24px 20px; border-radius: 18px; }
        .form-grid { grid-template-columns: 1fr; gap: 22px; }
        .form-field > label, .radio-field > legend, .field-hint { text-align: center; }
        .radio-options { justify-content: center; }
        .registration-closed { text-align: center; }

        .registration-success {
          grid-template-columns: 1fr;
          justify-items: center;
          gap: 18px;
          padding: 30px 24px;
          text-align: center;
        }

        .success-title {
          margin-inline: auto;
        }

        .footer-inner {
          align-items: center;
          flex-direction: column;
          gap: 12px;
          text-align: center;
        }

        .ambient-background::before {
          background-size: 32px 32px;
          opacity: 0.28;
        }

        .hero-portrait {
          animation-duration: 13s;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
          scroll-behavior: auto !important;
          animation: none !important;
          transition: none !important;
        }

        .motion-ready [data-reveal] {
          opacity: 1;
          transform: none;
        }
      }