:root {
  --ink: #13262b;
  --ink-soft: #1e353b;
  --paper: #eee8dc;
  --accent: #3e7372;
  --accent-dark: #285e5d;
  --line: rgba(32, 52, 59, .26);
  --glass: rgba(239, 233, 221, .16);
  --glass-strong: rgba(239, 233, 221, .34);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #1f211e; color: var(--ink); }
body { font-family: Arial, Helvetica, sans-serif; }
button, textarea, input { font: inherit; }
button { cursor: pointer; position: relative; z-index: 5; }
button:focus-visible, a:focus-visible, textarea:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #e4b860; outline-offset: 3px; }

.experience {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 100svh;
  overflow: auto;
  isolation: isolate;
}

.ambient-image { position: fixed; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: var(--image-focus, center center); filter: saturate(.88) contrast(.98) brightness(.9); animation: image-in 480ms ease both; pointer-events: none; user-select: none; }
.ambient-wash { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(180deg, rgba(12, 14, 13, .22), rgba(12, 14, 13, .06) 22%, rgba(12, 14, 13, .04) 70%, rgba(12, 14, 13, .28)); }
@keyframes image-in { from { opacity: .5; transform: scale(1.01); } to { opacity: 1; transform: scale(1); } }

.topbar, .site-footer { position: relative; z-index: 4; display: flex; justify-content: space-between; gap: 1rem; padding-inline: clamp(1rem, 2.8vw, 2.8rem); }
.topbar { align-items: center; padding-top: 1rem; }
.nav-cluster, .footer-links { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }
.nav-button, .site-footer button, .site-footer a { border: 0; border-bottom: 1px solid rgba(255, 250, 239, .56); border-radius: 0; padding: .28rem 0; color: #fffaf0; background: transparent; text-decoration: none; cursor: pointer; font-size: .83rem; font-weight: 500; }
.site-footer { align-items: flex-end; padding-top: .65rem; padding-bottom: 1rem; }
.site-footer button, .site-footer a { font-size: .73rem; }
.footer-secondary { justify-content: flex-end; }

.story-area { position: relative; z-index: 6; display: flex; min-height: 0; align-items: center; padding: clamp(1rem, 3vw, 3rem); pointer-events: none; }
.content-card {
  position: relative;
  z-index: 1;
  width: min(38rem, 47vw);
  padding: clamp(1.35rem, 2.4vw, 2.35rem);
  background: linear-gradient(105deg, rgba(245, 240, 230, .86) 0%, rgba(245, 240, 230, .78) 62%, rgba(245, 240, 230, .72) 100%);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  pointer-events: auto;
  animation: card-in 180ms ease both;
}
@keyframes card-in { from { opacity: 0; } to { opacity: 1; } }
.layout-photo-safe .story-area {
  position: fixed;
  z-index: 6;
  left: var(--safe-left, 18px);
  top: var(--safe-top, 72px);
  display: block;
  width: var(--safe-width, min(38rem, calc(100vw - 36px)));
  height: var(--safe-height, calc(100svh - 132px));
  min-height: 0;
  padding: 0;
  overflow: visible;
  pointer-events: none;
}
.layout-photo-safe .content-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  max-height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  pointer-events: auto;
  container-type: inline-size;
  background: linear-gradient(105deg, rgba(245, 240, 230, .69) 0%, rgba(245, 240, 230, .57) 58%, rgba(245, 240, 230, .45) 100%);
}
.layout-photo-safe h1 { font-size: clamp(2.25rem, 9.5cqw, 4.75rem); }
.layout-photo-safe h2 { font-size: clamp(1.95rem, 8.8cqw, 3.9rem); }
.layout-upper-left .story-area, .layout-upper-center .story-area, .layout-upper-right .story-area { align-items: flex-start; padding-top: clamp(2rem, 8vh, 5.5rem); }
.layout-center .story-area, .layout-upper-center .story-area { justify-content: center; }
.layout-center-left .story-area, .layout-upper-left .story-area { justify-content: flex-start; padding-left: clamp(2rem, 8vw, 10rem); }
.layout-center-right .story-area, .layout-upper-right .story-area { justify-content: flex-end; padding-right: clamp(2rem, 8vw, 10rem); }
.layout-home-wall .story-area { justify-content: center; padding-left: clamp(11rem, 23vw, 29rem); padding-right: clamp(6rem, 12vw, 15rem); }
.layout-about-wall .story-area { align-items: flex-start; justify-content: flex-end; padding: clamp(2rem, 5vw, 5rem) clamp(11rem, 18vw, 23rem) 3rem 2rem; }
.layout-browse-wall .story-area { justify-content: center; padding-left: clamp(9rem, 20vw, 25rem); padding-right: clamp(5rem, 10vw, 13rem); }
.view-first .first-card, .view-leave .content-card, .view-return .content-card, .view-notyet .content-card { width: 100%; }
.view-share .share-card { width: 100%; }

.view-browse .story-area, .view-category .story-area, .view-matches .story-area, .view-guide .story-area, .view-yours .story-area, .view-community .story-area, .view-member .story-area { align-items: center; }
.browse-card, .history-card { width: 100%; }
.member-card { width: 100%; }
.view-about { overflow: auto; }
.view-about .story-area { align-items: flex-start; justify-content: flex-end; }
.about-card { width: 100%; }
.view-inside { overflow: auto; }
.view-inside .story-area { display: block; min-height: 0; padding: clamp(4.5rem, 8vw, 7rem) clamp(1rem, 5vw, 4rem) 4rem; pointer-events: auto; }
.inside-page { width: min(70rem, 100%); margin: 0 auto; padding: clamp(1.5rem, 5vw, 4.5rem); color: var(--ink); background: rgba(239, 233, 221, .92); }
.inside-header h1, .inside-section h2 { max-width: 17ch; }
.inside-lead { font-size: clamp(1.05rem, 2vw, 1.35rem); }
.inside-index { display: flex; flex-wrap: wrap; gap: .65rem 1rem; margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.inside-index a { color: var(--accent-dark); text-underline-offset: .22em; }
.inside-section { margin-top: clamp(2.6rem, 7vw, 5.5rem); border-top: 1px solid var(--line); padding-top: clamp(1.4rem, 3vw, 2.4rem); scroll-margin-top: 1rem; }
.inside-section h2 { font-size: clamp(2rem, 5vw, 3.7rem); }
.inside-section > p { max-width: 68ch; }
.inside-steps { display: grid; gap: 1rem; max-width: 58rem; margin: 1.4rem 0 0; padding: 0; list-style: none; counter-reset: inside-step; }
.inside-steps li { display: grid; grid-template-columns: auto 1fr; gap: .75rem 1rem; border-top: 1px solid var(--line); padding-top: 1rem; counter-increment: inside-step; }
.inside-steps li::before { content: counter(inside-step); display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--accent-dark); border-radius: 50%; color: var(--accent-dark); }
.inside-steps strong, .inside-steps span { grid-column: 2; }
.inside-steps span { color: var(--ink-soft); line-height: 1.55; }
.principle-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; margin-top: 1.5rem; }
.principle-entry { border-top: 1px solid var(--line); padding: 1.15rem 0; }
.principle-entry h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; font-weight: 400; }
.principle-entry p { margin-top: .45rem; }
.inside-feedback { display: inline-block; text-decoration: none; }
.view-milestone .content-card, .view-room .content-card { width: 100%; }

.eyebrow { margin: 0 0 .6rem; color: var(--accent-dark); font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
h1, h2 { margin: 0; max-width: 15ch; color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-weight: 400; line-height: 1.04; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 5.2vw, 5rem); }
h2 { font-size: clamp(2.2rem, 4.3vw, 4.2rem); }
h3 { color: var(--ink); }
p { max-width: 55ch; margin: .8rem 0 0; color: var(--ink-soft); line-height: 1.56; text-shadow: 0 1px 0 rgba(246, 240, 229, .18); }
.prompt, .leave-line { color: var(--ink); font-size: clamp(1.03rem, 1.55vw, 1.22rem); font-weight: 500; }
.leave-line { margin-top: .35rem; }
.date-line, .status-line, .privacy-choice { font-size: .82rem; }

.first-visit-copy { margin-top: 1.1rem; }
.first-visit-copy p + p { margin-top: .35rem; }
.text-link, .inline-link { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: .2rem 0; color: var(--ink); background: transparent; cursor: pointer; }
.text-link { margin-top: .7rem; }

.primary-choices, .answer-grid, .actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.4rem; }
.primary-choices { margin-top: 1.9rem; }
.button { min-height: 2.85rem; border: 1px solid rgba(32, 52, 59, .42); border-radius: .38rem; padding: .72rem 1rem; color: var(--ink); background: rgba(249, 246, 239, .44); cursor: pointer; transition: background 140ms ease, border-color 140ms ease, transform 140ms ease; }
.button:hover { transform: translateY(-1px); border-color: var(--accent-dark); background: rgba(249, 246, 239, .72); }
.button.primary { border-color: var(--accent-dark); color: white; background: var(--accent-dark); }
.button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: 1.25rem; }
.category-button { min-height: 2.85rem; border: 1px solid rgba(255, 255, 255, .48); border-radius: .3rem; padding: .7rem .9rem; color: var(--ink); background: rgba(246, 242, 233, .22); cursor: pointer; text-align: left; }
.category-button:hover { background: rgba(246, 242, 233, .42); }

.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: 1.25rem; }
.choice-card { display: flex; flex-direction: column; justify-content: center; min-height: 7.25rem; border: 1px solid rgba(255, 255, 255, .58); border-radius: .3rem; padding: 1rem; color: var(--ink); background: rgba(246, 242, 233, .18); cursor: pointer; text-align: left; }
.choice-card:hover { background: rgba(246, 242, 233, .39); }
.choice-card strong { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.05rem, 1.65vw, 1.4rem); font-weight: 400; line-height: 1.18; }
.choice-card small, .history-link small { margin-top: .48rem; color: var(--ink-soft); font-size: .72rem; }

.room-note { margin-top: 1.2rem; border-left: 2px solid rgba(40, 94, 93, .55); padding: .35rem 0 .35rem .8rem; color: var(--ink-soft); font-size: .88rem; line-height: 1.48; }
.response-label { display: block; margin-top: 1.2rem; color: var(--ink); font-size: .82rem; font-weight: 700; }
textarea { width: 100%; min-height: 8rem; margin-top: .45rem; resize: vertical; border: 1px solid var(--line); border-radius: .25rem; padding: .85rem; color: var(--ink); background: rgba(255, 255, 255, .82); line-height: 1.5; }
.consent-row { display: grid; grid-template-columns: auto 1fr; gap: .65rem; align-items: start; margin-top: .85rem; color: var(--ink-soft); font-size: .8rem; line-height: 1.43; cursor: pointer; }
.consent-row input { width: 1.05rem; height: 1.05rem; margin-top: .15rem; accent-color: var(--accent-dark); }
blockquote { margin: 1.2rem 0 0; border-top: 1px solid var(--line); padding: .9rem 0 0; color: var(--ink); line-height: 1.55; }
blockquote span { display: block; margin-bottom: .3rem; color: var(--accent-dark); font-size: .68rem; font-weight: 700; letter-spacing: .1em; }
.room-heading { margin: 1.5rem 0 0; border-top: 1px solid var(--line); padding-top: 1rem; font-family: Georgia, "Times New Roman", serif; font-size: 1.4rem; font-weight: 400; }
.locked-room { border-top: 1px solid var(--line); padding-top: 1rem; }

.about-card h3, .privacy-callout h3, .member-columns h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.55rem; font-weight: 400; }
.about-section { margin-top: 1.65rem; border-top: 1px solid var(--line); padding-top: 1.15rem; }
.about-credit { margin-top: 1.8rem; }
.about-credit a { color: var(--accent-dark); }
.privacy-callout { margin-top: 1.5rem; border-left: 2px solid rgba(40, 94, 93, .55); padding: .15rem 0 .15rem .9rem; }
.milestone-copy p { max-width: 62ch; color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.58; }
.practical-pair { font-weight: 600; }
.impact-copy { margin-top: 1rem; }
.reflection-questions { margin-top: 1.25rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.reflection-questions h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; font-weight: 400; }
.milestone-principle-intro { margin-top: 1.25rem; }
.milestone-principles { margin-top: .25rem; color: var(--accent-dark) !important; font-size: clamp(1.15rem, 1.6vw, 1.4rem) !important; }
.principle-context { font-size: .9rem; }
.principle-link { border: 0; border-bottom: 1px solid currentColor; border-radius: 0; padding: 0; color: inherit; background: transparent; font: inherit; font-weight: 650; cursor: help; }
.definition-dialog { width: min(32rem, calc(100vw - 2rem)); border: 0; padding: clamp(1.35rem, 3vw, 2.25rem); color: var(--ink); background: #eee8dc; box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, .35); }
.definition-dialog::backdrop { background: rgba(18, 19, 17, .48); }
.definition-dialog h2 { font-size: clamp(2rem, 7vw, 3.2rem); }
.definition-close { position: absolute; top: .55rem; right: .7rem; border: 0; padding: .2rem .4rem; color: var(--ink); background: transparent; font-size: 1.45rem; }
.note-box { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.note-box summary { color: var(--accent-dark); cursor: pointer; font-size: .82rem; }
.note-box textarea { min-height: 6rem; }

.member-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.member-summary section { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: .7rem; }
.member-summary strong { font-family: Georgia, "Times New Roman", serif; font-size: 2.7rem; font-weight: 400; }
.member-summary span { color: var(--ink-soft); font-size: .78rem; }
.member-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; margin-top: 1.6rem; }
.history-link { display: flex; flex-direction: column; width: 100%; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: .7rem 0; color: var(--ink); background: transparent; cursor: pointer; text-align: left; }
.response-question { margin: 0 0 .5rem; color: var(--ink-soft); font-family: Georgia, "Times New Roman", serif; font-size: .96rem; font-style: italic; }

.review-tools { position: fixed; right: 1rem; bottom: 3.2rem; z-index: 8; width: min(22rem, calc(100vw - 2rem)); padding: 1rem; color: var(--ink); background: rgba(244, 240, 231, .94); border: 1px solid var(--line); }
.review-tools > div { display: flex; justify-content: space-between; gap: 1rem; }
.review-tools p { font-size: .8rem; }
.review-tools .button { width: 100%; margin-top: .6rem; }
.close-review { border: 0; color: var(--ink); background: transparent; cursor: pointer; font-size: 1.25rem; }

.splash { display: grid; place-items: center; width: 100%; height: 100%; }
.splash h1 { margin: 0; color: #8fa6a2; font-size: clamp(4rem, 16vw, 10rem); font-weight: 400; letter-spacing: .08em; animation: splash-fade 1.4s ease both; }
@keyframes splash-fade { 0% { opacity: 0; } 24% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: 0; } }
.loading-card { margin: auto; padding: 2rem; background: var(--paper); }

@media (max-width: 980px) {
  .content-card, .view-milestone .content-card, .view-room .content-card { width: min(57vw, 39rem); }
  .browse-card, .history-card, .member-card { width: min(69vw, 48rem); }
  .layout-home-wall .story-area { padding-left: 22vw; padding-right: 8vw; }
  .layout-about-wall .story-area { padding-right: 15vw; }
  .layout-browse-wall .story-area { padding-left: 18vw; padding-right: 6vw; }
  .about-card { width: min(64vw, 40rem); }
}

@media (max-width: 760px) {
  .experience { min-height: 100svh; overflow: auto; grid-template-rows: auto 1fr auto; }
  .ambient-image { position: fixed; object-position: var(--image-focus, center center); }
  .ambient-wash { background: linear-gradient(180deg, rgba(18, 20, 18, .26), rgba(18, 20, 18, .04) 34%, rgba(18, 20, 18, .2)); }
  .topbar { align-items: flex-start; padding: .75rem .9rem 0; }
  .nav-cluster { gap: .6rem; }
  .nav-button { font-size: .74rem; }
  .layout-photo-safe .story-area {
    position: fixed;
    z-index: 6;
    left: var(--safe-left, 12px);
    top: var(--safe-top, 58px);
    width: var(--safe-width, calc(100vw - 24px));
    height: var(--safe-height, calc(100svh - 118px));
    min-height: 0;
    display: block;
    padding: 0;
    overflow: visible;
    pointer-events: none;
  }
  .layout-photo-safe .content-card {
    width: 100%;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 1.15rem;
    background: linear-gradient(105deg, rgba(245, 240, 230, .82), rgba(245, 240, 230, .7));
  }
  .layout-photo-safe h1 { font-size: clamp(2.15rem, 10.5cqw, 3.8rem); }
  .layout-photo-safe h2 { font-size: clamp(1.9rem, 9.5cqw, 3.35rem); }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice-grid, .member-columns { grid-template-columns: 1fr; }
  .view-inside .story-area { padding: 4.5rem .75rem 3.5rem; }
  .inside-page { padding: 1.25rem; }
  .principle-list { grid-template-columns: 1fr; }
  .site-footer { align-items: flex-start; }
}

@media (max-width: 430px) {
  .category-grid, .member-summary { grid-template-columns: 1fr; }
  .primary-choices, .answer-grid { flex-direction: column; }
  .primary-choices .button, .answer-grid .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }


/* Soft left-edge emphasis so text stays readable on busy walls without a hard box */
.content-card {
  position: relative;
}
.content-card::before { content: none; }

.content-card h2, .content-card p, .content-card .eyebrow, .content-card label {
  color: var(--ink);
  text-shadow: 0 0 1px rgba(245, 240, 230, .4);
}
.content-card p, .content-card .eyebrow {
  color: var(--ink-soft);
}


/* Private notes */
.note-panel {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.note-label {
  margin: 0 0 .45rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.note-panel textarea {
  width: 100%;
  min-height: 6.5rem;
  margin-top: 0;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: .25rem;
  padding: .85rem;
  color: var(--ink);
  background: rgba(255, 255, 255, .84);
  line-height: 1.5;
}
.note-actions {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-top: .7rem;
}
.note-actions .status-line {
  margin: 0;
  font-size: .82rem;
  color: var(--accent-dark);
}
.notes-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  margin-top: 1.2rem;
}
.notes-sharing-copy {
  max-width: 48rem;
  margin: .35rem 0 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  line-height: 1.55;
}
@media (min-width: 760px) {
  .notes-columns { grid-template-columns: 1fr 1fr; }
}
.note-preview {
  margin: .35rem 0 0;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--ink-soft);
  white-space: pre-wrap;
}
.empty-notes {
  font-size: .92rem;
  color: var(--ink-soft);
}

.support-section {
  margin-top: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.support-actions {
  margin-top: 1rem;
}
.support-actions .button {
  display: inline-block;
  text-decoration: none;
  text-align: center;
}
.choice-card[data-completion] {
  cursor: pointer;
}