@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light;
  --paper: #f5f2e8;
  --paper-light: #fffdf7;
  --paper-shade: #e8e5d7;
  --ink: #30392e;
  --muted: #687061;
  --forest: #344c35;
  --olive: #64794e;
  --sage: #9ba989;
  --sage-pale: #dce3d2;
  --line: rgba(63, 82, 55, .22);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --content: 1120px;
  --ease: 220ms ease;
}
* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body {
  min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--ink);
  font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  background:
    radial-gradient(ellipse at 50% 12%, rgba(255,255,250,.96), transparent 42rem),
    radial-gradient(ellipse at 4% 40%, rgba(211,220,194,.48), transparent 32rem),
    radial-gradient(ellipse at 96% 70%, rgba(220,224,204,.38), transparent 34rem),
    repeating-linear-gradient(0deg, rgba(90,83,58,.018) 0 1px, transparent 1px 5px),
    var(--paper);
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }
::selection { color: #fffdf7; background: var(--forest); }
.skip-link { position:absolute; z-index:30; top:12px; left:12px; padding:12px 16px; color:white; background:var(--forest); transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.site-header, main, .site-footer { position:relative; z-index:1; }
.site-header {
  width:min(var(--content), calc(100% - 64px)); height:82px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line);
}
.brand { display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.brand-mark { width:34px; height:34px; color:var(--olive); }
.brand-mark svg { display:block; width:100%; height:100%; }
.brand-name { font-family:var(--serif); font-size:25px; line-height:1; letter-spacing:-.5px; }
.brand-name span { color:var(--olive); font-style:italic; }
.header-nav { display:flex; align-items:center; gap:30px; }
.header-nav a { color:var(--muted); font-size:12px; text-decoration:none; transition:color var(--ease); }
.header-nav a:hover { color:var(--forest); text-decoration:underline; text-underline-offset:5px; }
.hero {
  position:relative; isolation:isolate; width:min(var(--content), calc(100% - 64px)); margin:0 auto;
  padding:75px 0 68px; display:flex; flex-direction:column; align-items:center; text-align:center;
}
.hero-copy { position:relative; z-index:1; max-width:700px; }
.eyebrow { display:flex; align-items:center; justify-content:center; gap:13px; color:var(--olive); font-size:10px; font-weight:600; letter-spacing:.19em; }
.eyebrow-line { width:27px; height:1px; background:var(--sage); }
h1, h2, blockquote, .brand-name { font-family:var(--serif); font-weight:400; }
h1 { margin:23px 0 14px; font-size:clamp(54px, 6.2vw, 82px); line-height:.91; letter-spacing:-2.2px; }
h1 em, h2 em { color:var(--olive); font-weight:400; }
.intro { margin:0 auto; color:var(--muted); font-size:14px; line-height:1.9; }
.foliage { position:absolute; z-index:-1; pointer-events:none; overflow:visible; }
.foliage svg { display:block; width:100%; height:auto; overflow:visible; }
.foliage-left { width:clamp(230px, 29vw, 390px); left:clamp(-265px, -18vw, -115px); top:35px; opacity:.88; }
.foliage-right { width:clamp(245px, 31vw, 420px); right:clamp(-295px, -20vw, -135px); top:145px; opacity:.78; transform:scaleX(-1) rotate(-4deg); }
.leaf-stem { fill:none; stroke:#596e46; stroke-width:2.2; stroke-linecap:round; }
.leaf-vein { fill:none; stroke:#76865d; stroke-width:1.2; stroke-linecap:round; opacity:.78; }
.leaf { stroke:#536944; stroke-width:1.5; stroke-linejoin:round; }
.leaf-light { fill:#aeb998; } .leaf-mid { fill:#83966e; } .leaf-dark { fill:#586f4d; }
.message-shell {
  position:relative; z-index:2; width:min(710px, calc(100% - 80px)); margin:42px auto 0; padding:9px;
  text-align:left; border:1px solid rgba(101,113,80,.38); background:rgba(232,229,215,.86);
  box-shadow:0 24px 65px rgba(43,57,39,.12), 0 4px 12px rgba(43,57,39,.055);
}
.message-shell::before { content:""; position:absolute; inset:5px; border:1px solid rgba(101,113,80,.2); pointer-events:none; }
.message-shell::after { content:""; position:absolute; z-index:-1; inset:14px -13px -13px 14px; border:1px solid rgba(75,93,60,.3); background:rgba(208,214,187,.28); }
.message-topline { min-height:54px; padding:0 24px; display:flex; align-items:center; gap:11px; border-bottom:1px solid rgba(101,113,80,.2); color:var(--muted); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.message-symbol { width:20px; height:20px; color:var(--olive); }
.message-symbol svg { width:100%; height:100%; }
.message-number { margin-left:auto; color:var(--olive); font-family:var(--serif); font-size:18px; font-style:italic; }
.message-content {
  position:relative; min-height:270px; padding:36px 64px 34px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; background:
    radial-gradient(ellipse at 88% 0%, rgba(225,229,206,.58), transparent 48%),
    radial-gradient(ellipse at 12% 100%, rgba(237,234,216,.55), transparent 50%),
    var(--paper-light);
}
.quote-mark { height:43px; color:#88966e; font-family:var(--serif); font-size:76px; line-height:.85; opacity:.7; }
blockquote { max-width:570px; margin:5px 0 22px; color:var(--forest); font-size:clamp(30px, 3.5vw, 43px); line-height:1.16; letter-spacing:-.7px; text-wrap:pretty; transition:opacity var(--ease), transform var(--ease); }
.message-category { max-width:100%; margin:0; padding:7px 13px; border:1px solid rgba(100,121,78,.25); border-radius:2px; color:#596a49; background:rgba(222,227,207,.45); font-size:9px; font-weight:600; line-height:1.4; letter-spacing:.13em; }
.message-footer { min-height:49px; padding:10px 20px; display:flex; justify-content:center; align-items:center; gap:11px; border-top:1px solid rgba(101,113,80,.2); color:var(--muted); font-family:var(--serif); font-size:15px; font-style:italic; background:rgba(250,248,239,.82); }
.tiny-star { color:var(--olive); font-size:10px; }
.actions { display:flex; justify-content:center; gap:12px; margin:29px auto 0; }
.button { min-height:49px; padding:0 22px; border:1px solid transparent; border-radius:2px; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-size:12px; font-weight:600; cursor:pointer; transition:background var(--ease), border-color var(--ease), transform var(--ease); }
.button svg { width:17px; height:17px; }
.button:hover { transform:translateY(-1px); }
.button:active { transform:translateY(0); }
.button:focus-visible, a:focus-visible { outline:3px solid #87986e; outline-offset:4px; }
.button-primary { color:#fffdf5; background:var(--forest); }
.button-primary:hover { background:#466348; }
.button-secondary { color:var(--forest); border-color:#899677; background:rgba(255,253,245,.65); }
.button-secondary:hover { border-color:var(--forest); background:#e4e8d7; }
.action-status { min-height:18px; margin:9px 0 0; color:var(--forest); font-size:11px; text-align:center; }
.gentle-reminder { display:flex; align-items:center; justify-content:center; gap:10px; max-width:480px; margin:23px auto 0; color:var(--muted); font-family:var(--serif); font-size:17px; font-style:italic; line-height:1.5; }
.gentle-reminder p { margin:0; }
.reminder-icon { color:var(--olive); font-size:18px; font-style:normal; }
.intention { position:relative; padding:51px 20px 61px; text-align:center; overflow:hidden; border-top:1px solid rgba(74,91,59,.17); background:linear-gradient(105deg,rgba(218,224,201,.48),rgba(248,246,235,.82) 50%,rgba(217,224,199,.4)); }
.intention::before, .intention::after { content:""; position:absolute; width:320px; height:320px; border:1px solid rgba(80,100,62,.13); border-radius:50%; }
.intention::before { left:-245px; top:-230px; } .intention::after { right:-230px; bottom:-250px; }
.intention-rule { width:39px; height:1px; margin:0 auto 19px; background:var(--olive); }
.intention-kicker { margin:0 0 11px; color:var(--olive); font-size:9px; font-weight:600; letter-spacing:.2em; }
h2 { margin:0; font-size:clamp(36px, 4vw, 49px); line-height:1.08; letter-spacing:-.8px; }
.intention-copy { max-width:460px; margin:14px auto 0; color:var(--muted); font-size:13px; line-height:1.85; }
.closing-symbol { display:flex; align-items:center; justify-content:center; gap:13px; margin-top:22px; color:var(--olive); }
.closing-symbol span { width:32px; height:1px; background:#9ba787; }
.closing-symbol svg { width:24px; height:24px; }
.site-footer { padding:25px 20px 29px; border-top:1px solid var(--line); text-align:center; background:rgba(249,247,238,.82); }
.footer-brand { color:var(--forest); font-family:var(--serif); font-size:20px; text-decoration:none; }
.site-footer p { margin:8px 0 0; color:var(--muted); font-size:11px; line-height:1.7; }
.site-footer .disclaimer { max-width:620px; margin:12px auto 0; color:#555d51; font-size:11px; }
.site-footer .copyright { margin-top:15px; }
.copyright span { color:var(--olive); padding-left:3px; }

@media (min-width:1500px) { .foliage-left { left:-190px; } .foliage-right { right:-205px; } }
@media (max-width:900px) {
  .site-header { width:calc(100% - 48px); }
  .hero { width:calc(100% - 48px); padding-top:65px; }
  .foliage-left { left:-155px; opacity:.55; }
  .foliage-right { right:-175px; opacity:.48; }
  .message-shell { width:min(710px, calc(100% - 42px)); }
}
@media (max-width:620px) {
  .site-header { width:calc(100% - 32px); height:70px; }
  .brand { gap:8px; } .brand-mark { width:29px; height:29px; } .brand-name { font-size:21px; }
  .header-nav { gap:13px; } .header-nav a { font-size:10px; }
  .hero { width:calc(100% - 32px); padding:52px 0 43px; }
  .eyebrow { gap:8px; font-size:8px; letter-spacing:.14em; } .eyebrow-line { width:18px; }
  h1 { margin:20px 0 13px; font-size:clamp(49px, 13vw, 66px); letter-spacing:-1.5px; line-height:.94; }
  .intro { max-width:340px; font-size:13px; line-height:1.8; }
  .desktop-break { display:none; }
  .foliage-left { width:205px; left:-123px; top:20px; opacity:.4; }
  .foliage-right { width:215px; right:-142px; top:250px; opacity:.36; }
  .message-shell { width:calc(100% - 13px); margin-top:31px; padding:7px; }
  .message-shell::after { inset:10px -9px -10px 10px; }
  .message-topline { min-height:46px; padding:0 13px; gap:8px; font-size:9px; }
  .message-content { min-height:235px; padding:25px 18px 24px; }
  .quote-mark { height:34px; font-size:63px; }
  blockquote { margin:4px 0 18px; font-size:clamp(27px, 7.4vw, 34px); line-height:1.2; }
  .message-category { padding:6px 9px; font-size:8px; letter-spacing:.1em; }
  .message-footer { min-height:44px; padding:8px 9px; gap:8px; font-size:13px; }
  .actions { width:calc(100% - 13px); flex-direction:column; gap:8px; margin-top:23px; }
  .button { width:100%; min-height:49px; }
  .action-status { margin-top:7px; }
  .gentle-reminder { max-width:330px; margin-top:18px; font-size:15px; line-height:1.5; text-align:left; }
  .intention { padding:39px 20px 46px; }
  h2 { font-size:38px; }
}
@media (max-width:380px) {
  .header-nav { gap:9px; } .header-nav a { font-size:9px; }
  .brand-name { font-size:19px; }
  .hero { width:calc(100% - 26px); }
  .eyebrow { font-size:7px; gap:6px; }
  .message-topline { font-size:8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}