<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

  <meta name="theme-color" content="#1b2618">

  <meta name="description" content="When The Weeping Ceases (WWC) — an enchanted woodland apothecary, sanctuary, and journal.">

  <title>When The Weeping Ceases (WWC)</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">

  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">

  <style>

    :root {

      --forest: #172016;

      --forest-deep: #0d140d;

      --moss: #66764b;

      --ivory: #f4ecd7;

      --parchment: #eee2c3;

      --gold: #cbb173;

      --gold-light: #ead8a5;

      --ink: #263122;

      --glass: rgba(19, 30, 19, 0.92);

      --serif: "Cormorant Garamond", Georgia, serif;

      --sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    }

    * { box-sizing: border-box; }

    html, body {

      width: 100%;

      height: 100%;

      margin: 0;

    }

    html {

      background: var(--forest-deep);

      color-scheme: dark;

    }

    body {

      overflow: hidden;

      background: var(--forest-deep);

      color: var(--ivory);

      font-family: var(--serif);

      -webkit-font-smoothing: antialiased;

      text-rendering: optimizeLegibility;

    }

    button, input, select, textarea { font: inherit; }

    button, a { -webkit-tap-highlight-color: transparent; }

    button { color: inherit; }

    .sr-only {

      position: absolute !important;

      width: 1px !important;

      height: 1px !important;

      padding: 0 !important;

      margin: -1px !important;

      overflow: hidden !important;

      clip: rect(0, 0, 0, 0) !important;

      white-space: nowrap !important;

      border: 0 !important;

    }

    .skip-link {

      position: fixed;

      z-index: 100;

      top: 12px;

      left: 12px;

      transform: translateY(-160%);

      padding: 10px 16px;

      border: 1px solid var(--gold);

      border-radius: 999px;

      background: var(--forest-deep);

      color: var(--ivory);

      font: 600 12px/1 var(--sans);

      letter-spacing: 0.08em;

      text-decoration: none;

      text-transform: uppercase;

      transition: transform 180ms ease;

    }

    .skip-link:focus { transform: translateY(0); }

    .site-shell {

      position: relative;

      width: 100%;

      height: 100vh;

      height: 100svh;

      overflow: hidden;

      isolation: isolate;

      background: #1b2618;

    }

    .scene-image {

      position: absolute;

      z-index: 0;

      inset: 0;

      display: block;

      width: 100%;

      height: 100%;

      object-fit: cover;

      object-position: center;

      pointer-events: none;

      user-select: none;

      -webkit-user-drag: none;

    }

    .scene-wash {

      position: absolute;

      z-index: 1;

      inset: 0;

      pointer-events: none;

      background: linear-gradient(180deg, rgba(10, 17, 10, 0.22), transparent 28%, transparent 74%, rgba(8, 13, 8, 0.34));

      opacity: 0;

    }

    .desktop-ui {

      position: absolute;

      z-index: 3;

      inset: 0;

      pointer-events: none;

    }

    .hit {

      position: absolute;

      display: block;

      margin: 0;

      padding: 0;

      border: 0;

      border-radius: 999px;

      outline: 0;

      background: transparent;

      color: transparent;

      cursor: pointer;

      pointer-events: auto;

      text-decoration: none;

      -webkit-appearance: none;

      appearance: none;

    }

    .hit:focus-visible {

      outline: 2px solid rgba(239, 216, 162, 0.95);

      outline-offset: 3px;

    }

    .brand-hit { left: 4.15%; top: 2.7%; width: 5.5%; height: 8.6%; }

    .nav-hit { top: 3.15%; height: 7.4%; }

    .nav-hit::before {

      position: absolute;

      right: 12%;

      bottom: 8px;

      left: 12%;

      height: 1px;

      background: var(--gold-light);

      box-shadow: 0 0 8px rgba(233, 213, 165, 0.45);

      content: "";

      opacity: 0;

      transform: scaleX(0.5);

      transition: opacity 180ms ease, transform 180ms ease;

    }

    .nav-hit:hover::before, .nav-hit:focus-visible::before {

      opacity: 0.78;

      transform: scaleX(1);

    }

    .nav-sanctuary { left: 31.45%; width: 6.8%; }

    .nav-offerings { left: 39.55%; width: 6.8%; }

    .nav-apothecary { left: 47.55%; width: 6.9%; }

    .nav-journal { left: 56.1%; width: 6.2%; }

    .nav-contact { left: 62.9%; width: 6.4%; }

    .portal-hit { border-radius: 28px; }

    .portal-hit::before {

      position: absolute;

      inset: -18px;

      border-radius: inherit;

      background: radial-gradient(ellipse at center, rgba(255, 246, 214, 0.15), rgba(225, 205, 149, 0.05) 45%, transparent 72%);

      content: "";

      opacity: 0;

      pointer-events: none;

      transform: scale(0.94);

      transition: opacity 220ms ease, transform 220ms ease;

    }

    .portal-hit:hover::before, .portal-hit:focus-visible::before {

      opacity: 1;

      transform: scale(1);

    }

    .portal-sanctuary-top { left: 11.2%; top: 18.1%; width: 14.6%; height: 15.5%; }

    .portal-offerings-top { left: 29.5%; top: 18.2%; width: 14.2%; height: 15.2%; }

    .portal-journal-top { left: 49.1%; top: 19.8%; width: 13.1%; height: 16.5%; }

    .portal-sanctuary-bottom { left: 10.4%; top: 51.7%; width: 13.8%; height: 11.3%; }

    .portal-offerings-bottom { left: 30.9%; top: 51.8%; width: 12.8%; height: 11.1%; }

    .portal-journal-bottom { left: 49.6%; top: 52%; width: 11.8%; height: 11.2%; }

    .control-hit { border-radius: 999px; }

    .control-hit:focus-visible { outline-offset: 4px; }

    .previous-hit { left: 5.05%; top: 89.9%; width: 3.2%; height: 5.5%; }

    .next-hit { left: 8.35%; top: 89.9%; width: 3.1%; height: 5.5%; }

    .quick-hit { left: 48.65%; top: 88.25%; width: 2.75%; height: 7.4%; }

    .enter-hit { left: 85.75%; top: 89.55%; width: 9.1%; height: 5.6%; }

    .quick-menu, .chapter-panel {

      position: fixed;

      z-index: 20;

      border: 1px solid rgba(214, 194, 143, 0.36);

      background: radial-gradient(circle at 10% 0%, rgba(153, 169, 105, 0.12), transparent 40%), var(--glass);

      box-shadow: 0 22px 70px rgba(0, 0, 0, 0.44);

      color: var(--ivory);

      opacity: 0;

      pointer-events: none;

      visibility: hidden;

      transform: translate(-50%, 12px);

      transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;

      backdrop-filter: blur(12px);

    }

    .quick-menu.is-open, .chapter-panel.is-open {

      opacity: 1;

      pointer-events: auto;

      visibility: visible;

      transform: translate(-50%, 0);

    }

    .quick-menu {

      left: 50%;

      bottom: max(72px, 9vh);

      width: min(292px, calc(100vw - 32px));

      padding: 13px;

      border-radius: 18px;

    }

    .quick-menu-title {

      position: relative;

      margin: 2px 8px 10px;

      color: var(--gold-light);

      font: 500 10px/1.2 var(--sans);

      letter-spacing: 0.18em;

      text-transform: uppercase;

    }

    .quick-list {

      position: relative;

      display: grid;

      gap: 2px;

      margin: 0;

      padding: 0;

      list-style: none;

    }

    .quick-item {

      width: 100%;

      padding: 10px 12px;

      border: 0;

      border-radius: 999px;

      background: transparent;

      color: var(--ivory);

      cursor: pointer;

      font: 500 18px/1.1 var(--serif);

      text-align: left;

      transition: background 160ms ease, color 160ms ease, padding-left 160ms ease;

    }

    .quick-item:hover, .quick-item:focus-visible {

      padding-left: 17px;

      outline: 0;

      background: rgba(225, 207, 157, 0.1);

      color: #fff8e9;

    }

    .chapter-panel {

      left: 50%;

      bottom: max(76px, 9.5vh);

      display: grid;

      width: min(330px, calc(100vw - 32px));

      padding: 20px 21px 17px;

      border-radius: 18px;

      text-align: center;

    }

    .chapter-kicker {

      margin: 0 0 3px;

      color: var(--gold);

      font: 500 9px/1.2 var(--sans);

      letter-spacing: 0.19em;

      text-transform: uppercase;

    }

    .chapter-title { margin: 0; font: 500 28px/1.05 var(--serif); }

    .chapter-copy {

      margin: 7px auto 14px;

      max-width: 260px;

      color: rgba(244, 236, 215, 0.72);

      font: 400 12px/1.55 var(--sans);

    }

    .chapter-enter {

      justify-self: center;

      padding: 8px 24px;

      border: 1px solid rgba(222, 202, 151, 0.65);

      border-radius: 999px;

      background: transparent;

      color: var(--ivory);

      cursor: pointer;

      font: 500 10px/1 var(--sans);

      letter-spacing: 0.16em;

      text-transform: uppercase;

      transition: background 160ms ease, color 160ms ease;

    }

    .chapter-enter:hover, .chapter-enter:focus-visible {

      outline: 0;

      background: var(--gold);

      color: var(--forest-deep);

    }

    .panel-close {

      position: absolute;

      z-index: 2;

      top: 8px;

      right: 9px;

      width: 28px;

      height: 28px;

      padding: 0;

      border: 0;

      border-radius: 50%;

      background: transparent;

      color: rgba(244, 236, 215, 0.7);

      cursor: pointer;

      font: 300 20px/1 var(--sans);

    }

    .toast {

      position: fixed;

      z-index: 70;

      left: 50%;

      bottom: max(24px, env(safe-area-inset-bottom));

      max-width: min(430px, calc(100vw - 32px));

      padding: 11px 18px;

      border: 1px solid rgba(222, 202, 151, 0.44);

      border-radius: 999px;

      background: rgba(16, 26, 16, 0.95);

      box-shadow: 0 16px 50px rgba(0, 0, 0, 0.4);

      color: var(--ivory);

      font: 500 12px/1.4 var(--sans);

      text-align: center;

      opacity: 0;

      pointer-events: none;

      transform: translate(-50%, 16px);

      transition: opacity 180ms ease, transform 180ms ease;

      backdrop-filter: blur(10px);

    }

    .toast.is-visible {

      opacity: 1;

      transform: translate(-50%, 0);

    }

    .modal {

      position: fixed;

      z-index: 40;

      inset: 0;

      display: grid;

      place-items: center;

      padding: 24px;

      visibility: hidden;

      opacity: 0;

      pointer-events: none;

      transition: opacity 220ms ease, visibility 220ms ease;

    }

    .modal.is-open {

      visibility: visible;

      opacity: 1;

      pointer-events: auto;

    }

    .modal-backdrop {

      position: absolute;

      inset: 0;

      background: rgba(7, 12, 7, 0.76);

      backdrop-filter: blur(8px) saturate(0.8);

    }

    .modal-panel {

      position: relative;

      width: min(900px, 100%);

      max-height: min(88vh, 850px);

      overflow: auto;

      border: 1px solid rgba(115, 91, 48, 0.56);

      border-radius: 26px;

      background: radial-gradient(circle at 12% 5%, rgba(110, 129, 72, 0.16), transparent 28%), linear-gradient(135deg, #f3ead2, #e5d7b5);

      box-shadow: 0 35px 100px rgba(0, 0, 0, 0.58);

      color: var(--ink);

      transform: translateY(18px) scale(0.985);

      transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);

    }

    .modal.is-open .modal-panel { transform: translateY(0) scale(1); }

    .modal-close {

      position: absolute;

      z-index: 5;

      top: 20px;

      right: 20px;

      width: 40px;

      height: 40px;

      border: 1px solid rgba(59, 77, 42, 0.25);

      border-radius: 50%;

      background: rgba(255, 252, 240, 0.46);

      color: var(--ink);

      cursor: pointer;

      font: 300 24px/1 var(--sans);

    }

    .modal-heading {

      position: relative;

      z-index: 1;

      padding: 39px 76px 25px 48px;

      border-bottom: 1px solid rgba(76, 91, 52, 0.15);

    }

    .modal-eyebrow {

      margin: 0 0 5px;

      color: #788258;

      font: 600 10px/1.2 var(--sans);

      letter-spacing: 0.2em;

      text-transform: uppercase;

    }

    .modal-title {

      margin: 0;

      color: #25321f;

      font: 500 clamp(30px, 4vw, 44px)/0.98 var(--serif);

    }

    .modal-body {

      position: relative;

      z-index: 1;

      padding: 31px 48px 36px;

    }

    .modal-grid {

      display: grid;

      grid-template-columns: minmax(0, 1.12fr) minmax(260px, 0.88fr);

      gap: 34px;

      align-items: center;

    }

    .modal-grid h3 { margin: 0 0 12px; color: #293523; font: 500 30px/1.05 var(--serif); }

    .modal-prose { color: #4c5842; font: 400 15px/1.7 var(--sans); }

    .primary-action {

      display: inline-flex;

      align-items: center;

      justify-content: center;

      min-height: 43px;

      margin-top: 12px;

      padding: 10px 23px;

      border: 1px solid #4d6138;

      border-radius: 999px;

      background: #34472a;

      color: #f9f2df;

      cursor: pointer;

      font: 600 10px/1 var(--sans);

      letter-spacing: 0.14em;

      text-transform: uppercase;

    }

    .modal-footer {

      display: flex;

      gap