/* ==========================================================================
   RESTORE WEBSITE — restorewalk.com
   One stylesheet for every page. Brand: warm cream, leaf green (the app icon),
   gold + peach fruit. Fonts are the app's own (Fraunces italic for headlines,
   Work Sans for body), served from this site, not from Google, so a visitor's
   browser never calls a third party just to draw the page.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/Fraunces_400Regular_Italic.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/Fraunces_600SemiBold_Italic.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/WorkSans_400Regular.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/WorkSans_500Medium.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/WorkSans_600SemiBold.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  --cream: #FFFCF6;
  --cream-2: #FAF3E4;
  --ink: #2B2218;
  --ink-soft: #5B4E3F;
  --line: #E8DCC4;
  --green: #467554;
  --green-deep: #305E46;
  --green-ink: #26503A;
  --gold: #D9A63F;
  --gold-deep: #8F6410;
  --peach: #F4B98C;
  --on-gold: #20180A;
  --radius: 16px;
  --measure: 40rem;
  --wide: 68rem;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: var(--green-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--green-deep); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
::selection { background: #F6E3B0; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--green-deep); color: #fff; padding: .6rem 1rem; border-radius: 8px; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

h1, h2, h3 { font-family: var(--serif); font-style: italic; font-weight: 600; line-height: 1.2; color: var(--green-ink); margin: 0; }
h1 { font-size: clamp(2.2rem, 5.5vw, 3.2rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1.1em; }

.wrap { width: min(100% - 2.5rem, var(--wide)); margin-inline: auto; }
.narrow { width: min(100% - 2.5rem, var(--measure)); margin-inline: auto; }
.eyebrow { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; margin-bottom: .9rem; }

/* ---------- Header ---------- */
.site-header { position: absolute; inset: 0 0 auto 0; z-index: 20; }
.site-header.solid { position: static; background: var(--cream); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; padding-block: 1.1rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--green-ink);
  font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.45rem; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.nav { display: flex; gap: 1.4rem; align-items: center; font-weight: 500; font-size: .95rem; }
.nav a { color: var(--green-ink); text-decoration: none; padding: .35rem 0; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--gold); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #FFF7E0 0%, #FFEBC5 42%, #FBD9AC 74%, #F6CB9B 100%); }
.hero::before { /* god-rays: soft light falling from the top centre */
  content: ""; position: absolute; inset: -20% -10% 30% -10%; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from 168deg at 50% -8%, rgba(255,255,255,.55) 0deg 4deg, rgba(255,255,255,0) 4deg 12deg);
  -webkit-mask-image: radial-gradient(60% 75% at 50% 0%, #000 0%, transparent 78%);
          mask-image: radial-gradient(60% 75% at 50% 0%, #000 0%, transparent 78%);
  opacity: .7; animation: rays 14s ease-in-out infinite alternate;
}
@keyframes rays { from { opacity: .45; } to { opacity: .85; } }
.hero-top { text-align: center; padding: clamp(6.5rem, 14vh, 9rem) 1.25rem 0; }
.hero .wordmark { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(3.6rem, 12vw, 6.4rem);
  color: var(--green-ink); line-height: 1; margin: 0; letter-spacing: -.01em; text-shadow: 0 2px 30px rgba(255,248,225,.9); }
.hero .tagline { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.2rem, 3.2vw, 1.75rem);
  color: var(--ink); margin: .9rem auto 0; max-width: 28ch; }
.tree-figure { position: relative; z-index: 3; width: min(80vw, 420px); margin: 1.6rem auto -3.2rem; filter: drop-shadow(0 18px 28px rgba(80,60,20,.18)); }
.tree-figure img { width: 100%; height: auto; }
.hero-ground { position: relative; z-index: 2; padding: 5.2rem 1.25rem clamp(3rem, 8vh, 4.5rem);
  background: linear-gradient(180deg, #8EB57F 0, #8EB57F 4.2rem, #6F9B68 60%, #5F8D5F 100%); }
.hero-ground::before { content: ""; position: absolute; left: -8%; right: -8%; top: -3.2rem; height: 7rem;
  background: #8EB57F; border-radius: 50% 50% 0 0 / 100% 100% 0 0; z-index: -1; }

/* ---------- Notify box ---------- */
.notify-card { width: min(100%, 30rem); margin-inline: auto; background: var(--cream); border-radius: var(--radius);
  padding: 1.5rem 1.4rem 1.3rem; box-shadow: 0 14px 40px rgba(34,56,40,.22); }
.notify-card h2 { font-size: 1.45rem; margin-bottom: .35rem; }
.notify-card p.lead { color: var(--ink-soft); font-size: .98rem; margin-bottom: 1rem; line-height: 1.55; }
.notify form { display: grid; gap: .7rem; }
.notify label { display: block; font-size: .85rem; font-weight: 500; color: var(--ink-soft); margin-bottom: .2rem; }
.notify input[type="text"], .notify input[type="email"] {
  width: 100%; font: inherit; font-size: 1rem; padding: .8rem .95rem; border: 1.5px solid #CDBE9F; border-radius: 12px;
  background: #fff; color: var(--ink); }
.notify input:focus { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--gold-deep); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: inherit; font-weight: 600;
  background: var(--gold); color: var(--on-gold); border: 0; border-radius: 999px; padding: .9rem 1.6rem; cursor: pointer; text-decoration: none; }
.btn:hover { background: #E3B24D; color: var(--on-gold); }
.btn.green { background: var(--green-deep); color: #fff; }
.btn.green:hover { background: var(--green-ink); color: #fff; }
.notify .fine { font-size: .82rem; color: var(--ink-soft); line-height: 1.5; margin: .25rem 0 0; }
.notify .done, .notify .soon { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--green-ink); margin: 0; padding: .4rem 0; }
.notify .soon { font-family: var(--sans); font-style: normal; font-size: .98rem; color: var(--ink-soft); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Sections ---------- */
section.block { padding: clamp(3.5rem, 9vw, 6rem) 0; }
section.band { background: var(--cream-2); border-block: 1px solid var(--line); }
.heart { text-align: center; }
.heart h2 { font-size: clamp(2rem, 5.5vw, 3.1rem); margin-bottom: 1.4rem; }
.heart p { font-size: 1.18rem; color: var(--ink-soft); }
.heart .accent { color: var(--green-ink); }
.rule { width: 3.5rem; height: 2px; background: var(--gold); margin: 1.8rem auto 0; border: 0; }
.section-title { text-align: center; margin-bottom: 2.6rem; }
.section-title p { color: var(--ink-soft); max-width: 36rem; margin: .8rem auto 0; }

.pillars { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
.pillar { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: var(--radius); padding: 1.6rem 1.5rem; }
.pillar h3 { margin-bottom: .55rem; }
.pillar p { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }

.glimpse { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.moment { padding: 1.4rem 1.2rem 1.5rem; border-radius: var(--radius); background: var(--cream); border: 1px solid var(--line); }
.moment svg { width: 34px; height: 34px; color: var(--green); margin-bottom: .8rem; }
.moment h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.moment p { margin: 0; font-size: .98rem; color: var(--ink-soft); line-height: 1.6; }

.closing { background: var(--green-deep); color: #F4EFE2; text-align: center; padding: clamp(3.5rem, 9vw, 5.5rem) 0; }
.closing h2 { color: #fff; font-size: clamp(1.9rem, 5vw, 2.8rem); margin-bottom: 1rem; }
.closing p { color: #E4E9DC; max-width: 34rem; margin-inline: auto; }
.closing .notify-card { margin-top: 2rem; text-align: left; }
.closing .notify-card h2 { color: var(--green-ink); font-size: 1.45rem; margin-bottom: .35rem; }
.closing .notify-card p { color: var(--ink-soft); max-width: none; }
.closing .notify-card .done, .closing .notify-card .soon { color: var(--green-ink); }

/* ---------- Document pages (About, Privacy, Terms, Support, Delete) ---------- */
.page-head { background: linear-gradient(180deg, #FFF3D6 0%, var(--cream) 100%); padding: clamp(3rem, 8vw, 5rem) 0 2rem; }
.page-head .narrow > p { color: var(--ink-soft); font-size: 1.15rem; margin: 1rem 0 0; }
.prose { padding: 1.5rem 0 clamp(3.5rem, 8vw, 5.5rem); }
.prose h2 { font-size: 1.55rem; margin: 2.6rem 0 .8rem; }
.prose h3 { font-size: 1.2rem; margin: 1.8rem 0 .5rem; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.2em; }
.prose li { margin-bottom: .45em; }
.prose .meta { color: var(--ink-soft); font-size: .95rem; }
.callout { background: var(--cream-2); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 12px; padding: 1.1rem 1.3rem; margin: 1.6rem 0; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.prose .contact-card { display: block; margin: 1.6rem 0; }

.table-scroll { overflow-x: auto; margin: 1.2rem 0 1.6rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; line-height: 1.5; min-width: 34rem; }
th, td { text-align: left; vertical-align: top; padding: .75rem .9rem; border-bottom: 1px solid var(--line); }
th { background: var(--cream-2); font-weight: 600; color: var(--green-ink); }
tr:last-child td { border-bottom: 0; }

.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li { counter-increment: step; position: relative; padding-left: 3rem; margin-bottom: 1.1rem; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: .05rem; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--green-deep); color: #fff; font-weight: 600; display: grid; place-items: center; font-size: .95rem; }

/* ---------- Footer ---------- */
.site-footer { background: #1F3D2D; color: #D6DFD0; padding: 3rem 0 2.2rem; font-size: .95rem; }
.site-footer a { color: #F3E6BD; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #fff; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 2rem 3rem; justify-content: space-between; align-items: flex-start; }
.footer-brand { max-width: 22rem; }
.footer-brand .brand { color: #fff; margin-bottom: .6rem; }
.footer-brand p { color: #BFCDB9; font-size: .92rem; line-height: 1.55; margin: 0; }
.footer-links { display: grid; gap: .5rem; }
.footer-links strong { color: #fff; font-weight: 600; margin-bottom: .2rem; }
.footer-bottom { margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .85rem; color: #A9BBA3; }
.footer-bottom button { background: none; border: 0; color: #F3E6BD; font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }

/* ---------- Entrance (the film). Dormant until a video is set in config.js ---------- */
.entrance { position: fixed; inset: 0; z-index: 200; background: #0f1a12; color: #fff; opacity: 1; transition: opacity 1.2s ease; }
.entrance.leaving { opacity: 0; pointer-events: none; }
.entrance video, .entrance .entrance-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.entrance-controls { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; align-items: center;
  padding: 1.2rem 1.4rem calc(1.2rem + env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(0,0,0,.45), transparent); }
.entrance button { font: inherit; font-weight: 500; font-size: .95rem; color: #fff; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px; padding: .6rem 1.2rem; cursor: pointer; backdrop-filter: blur(6px); }
.entrance button:hover { background: rgba(0,0,0,.55); }
html.entrance-open, html.entrance-open body { overflow: hidden; }

/* ---------- Motion + small screens ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero::before { animation: none; opacity: .6; }
  .entrance { transition: none; }
}
@media (max-width: 40rem) {
  .nav { gap: 1rem; font-size: .9rem; }
  .brand span { font-size: 1.25rem; }
  .brand img { width: 30px; height: 30px; }
}
@media print {
  .site-header, .site-footer, .hero::before { display: none; }
  body { background: #fff; }
}