/* Sunday Notes AI — "Sunday morning print"
   Warm editorial: paper, ink, terracotta. Serif-led, quietly reverent. */

:root{
  color-scheme:light; /* light-only by decision: warm print aesthetic */
  --terracotta:#B44A26; --terracotta-dark:#943B1E; --terracotta-deep:#7C3117;
  --cream:#FBF7F0; --paper:#F5EEE2; --ink:#1E2A3A; --ink-deep:#16202D; --muted:#5A6473;
  --line:#E4D9C7; --line-strong:#D9CBB2; --gold:#B98A2E;
  --footer-text:#CDD5E0; --footer-link:#E9EDE3; --footer-fine:#9AA4B3;
  --shadow-soft:0 2px 6px rgba(30,42,58,.05), 0 14px 34px rgba(30,42,58,.10);
  --shadow-lift:0 4px 10px rgba(30,42,58,.08), 0 24px 54px rgba(30,42,58,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink); background:var(--cream); line-height:1.65; font-size:17px;
  position:relative;
}
/* skip link for keyboard users */
.skip{position:absolute; left:16px; top:-52px; z-index:200; background:var(--ink); color:#fff; padding:11px 18px; border-radius:0 0 10px 10px; font-weight:600; font-size:.95rem; transition:top .2s var(--ease)}
.skip:focus{top:0; text-decoration:none}
/* paper grain, barely there; kept BELOW the sticky header (z100) so no
   future overlay/modal has to clear it */
body::after{
  content:""; position:fixed; inset:0; z-index:50; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--terracotta); color:#fff}
h1,h2,h3{font-family:'Libre Baskerville',Georgia,serif; line-height:1.22; color:var(--ink)}
h1{font-size:clamp(2.1rem, 4.4vw, 3.1rem); margin-bottom:.7rem; letter-spacing:-.01em}
h2{font-size:clamp(1.5rem, 2.6vw, 1.9rem); margin:2.4rem 0 1rem}
h3{font-size:1.2rem; margin:1.6rem 0 .6rem}
p{margin:0 0 1.1rem}
a{color:var(--terracotta); text-decoration:none; transition:color .18s var(--ease)}
a:hover{text-decoration:underline; text-underline-offset:3px}
a:focus-visible,.btn:focus-visible,summary:focus-visible{outline:2px solid var(--terracotta); outline-offset:3px; border-radius:4px}
img{max-width:100%}
.wrap{max-width:1040px; margin:0 auto; padding:0 20px}
.narrow{max-width:760px}

/* ── header ─────────────────────────────────── */
header.site{border-bottom:1px solid var(--line); background:rgba(245,238,226,.88); /* .88 bg doubles as no-backdrop-filter fallback */ backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); position:sticky; top:0; z-index:100}
header.site .bar{display:flex; align-items:center; justify-content:space-between; padding:7px 20px; max-width:1040px; margin:0 auto}
header.site .brand{display:flex; align-items:center; gap:10px; font-family:'Libre Baskerville',serif; font-weight:700; color:var(--ink); font-size:1.02rem}
header.site .brand:hover{text-decoration:none}
header.site .brand img{width:36px; height:36px; border-radius:9px; box-shadow:0 2px 8px rgba(124,49,23,.25)}
header.site nav a{color:var(--ink); margin-left:12px; font-size:.93rem; font-weight:500; position:relative; display:inline-block; padding:13px 5px}
header.site nav a::after{content:""; position:absolute; left:5px; right:calc(100% - 5px); bottom:8px; height:2px; background:var(--terracotta); transition:right .22s var(--ease)}
header.site nav a:hover::after{right:5px}
header.site nav a:hover{text-decoration:none; color:var(--terracotta-dark)}

/* ── buttons ────────────────────────────────── */
.btn{display:inline-block; background:var(--terracotta); color:#fff; padding:14px 28px; border-radius:12px; font-weight:600; font-size:1rem; box-shadow:0 2px 4px rgba(124,49,23,.22), 0 10px 22px rgba(124,49,23,.18); transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease)}
.btn:hover{background:var(--terracotta-dark); text-decoration:none; transform:translateY(-2px); box-shadow:0 4px 8px rgba(124,49,23,.24), 0 16px 32px rgba(124,49,23,.22)}
.btn:active{transform:translateY(0)}
.btn.badge{background:var(--ink); box-shadow:0 2px 4px rgba(30,42,58,.22), 0 10px 22px rgba(30,42,58,.20)}
.btn.badge:hover{background:var(--ink-deep)}

/* ── hero ───────────────────────────────────── */
.hero{position:relative; padding:72px 0 56px; overflow:hidden;
  background:
    radial-gradient(58% 72% at 82% 18%, rgba(180,74,38,.10), transparent 62%),
    radial-gradient(40% 52% at 8% 88%, rgba(185,138,46,.08), transparent 60%),
    linear-gradient(180deg,var(--paper),var(--cream));
}
.hero::before{ /* faint oversized cross-waveform halo */
  content:""; position:absolute; right:-140px; top:-140px; width:520px; height:520px; border-radius:50%;
  border:1.5px solid rgba(180,74,38,.10); pointer-events:none;
}
.hero::after{
  content:""; position:absolute; right:-60px; top:-60px; width:360px; height:360px; border-radius:50%;
  border:1.5px solid rgba(180,74,38,.07); pointer-events:none;
}
.hero .grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; position:relative}
.hero .kicker{display:flex; align-items:center; gap:11px; margin-bottom:18px}
.hero .kicker img{width:46px; height:46px; border-radius:11px; box-shadow:0 3px 10px rgba(124,49,23,.28)}
.hero .kicker span{font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--terracotta); font-weight:700}
.hero h1 em{font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:600; color:var(--terracotta); font-size:1.08em; letter-spacing:0}
.hero p.lead{font-size:1.18rem; color:var(--muted); max-width:36ch}
.hero .cta-row{margin-top:26px; display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.hero .cta-row a:not(.btn){font-weight:600}
.hero-img{width:100%; height:auto; border-radius:18px; box-shadow:var(--shadow-lift); transform:rotate(1.2deg); transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.hero-img:hover{transform:rotate(0deg) scale(1.012)}
/* entrance */
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes rise-img{from{opacity:0; transform:rotate(2.4deg) translateY(18px)} to{opacity:1; transform:rotate(1.2deg)}}
.hero .kicker{animation:rise .6s var(--ease) both}
.hero h1{animation:rise .6s .08s var(--ease) both}
.hero p.lead{animation:rise .6s .16s var(--ease) both}
.hero .cta-row{animation:rise .6s .24s var(--ease) both}
.hero-img{animation:rise-img .7s .18s var(--ease) both}

/* ── section rhythm & ornaments ─────────────── */
section{padding:14px 0}
.benefits h2,.shots h2,.guides h2,#how h2,.faq h2{position:relative; padding-bottom:14px}
.benefits h2::after,.shots h2::after,.guides h2::after,#how h2::after,.faq h2::after{
  content:""; position:absolute; left:0; bottom:0; width:56px; height:3px; border-radius:2px;
  background:linear-gradient(90deg, var(--terracotta) 70%, var(--gold));
}

/* ── benefits ───────────────────────────────── */
.benefits{padding:48px 0}
.benefit-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px; margin-top:26px}
.benefit{background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px 22px; position:relative; overflow:hidden; transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease)}
.benefit::before{content:""; position:absolute; left:0; top:0; right:0; height:3px; background:linear-gradient(90deg,var(--terracotta),var(--gold)); opacity:0; transition:opacity .22s var(--ease)}
.benefit:hover{transform:translateY(-4px); box-shadow:var(--shadow-soft); border-color:var(--line-strong)}
.benefit:hover::before{opacity:1}
.benefit .tag{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--terracotta); font-weight:700}
.benefit h3{margin:.45rem 0 .5rem; font-size:1.14rem}
.benefit p{color:var(--muted); font-size:.97rem; margin:0}

/* ── screenshots: App Store-style strip ─────── */
.shots{padding:52px 0 58px; background:
  radial-gradient(60% 90% at 50% 0%, rgba(180,74,38,.05), transparent 70%),
  var(--paper)}
.shots-sub{color:var(--muted); max-width:52ch; margin:0}
.shot-strip{
  display:flex; gap:24px; margin-top:30px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  /* full-bleed strip whose first card aligns with the .wrap column */
  padding:8px max(20px, calc((100vw - 1040px)/2 + 20px)) 26px;
  scrollbar-width:none;
}
.shot-strip::-webkit-scrollbar{display:none}
.shot-strip:focus-visible{outline:2px solid var(--terracotta); outline-offset:-2px}
.shot{flex:0 0 auto; width:min(292px, 76vw); scroll-snap-align:center}
.shot img{width:100%; height:auto; border-radius:22px; box-shadow:var(--shadow-soft); transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.shot img:hover{transform:translateY(-6px) scale(1.015); box-shadow:var(--shadow-lift)}

/* ── how it works ───────────────────────────── */
#how{padding:34px 0 20px}
.steps{margin-top:26px; position:relative}
.step{display:flex; gap:20px; padding:22px 0; border-bottom:1px dashed var(--line); position:relative}
.step:last-child{border-bottom:none}
.step .num{flex:none; width:42px; height:42px; border-radius:50%; background:var(--terracotta); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-family:'Libre Baskerville',serif; box-shadow:0 3px 8px rgba(124,49,23,.30); position:relative; z-index:1}
.step:not(:last-child) .num::after{content:""; position:absolute; top:46px; left:50%; width:2px; height:calc(100% - 24px); background:linear-gradient(180deg, rgba(180,74,38,.35), rgba(180,74,38,.08)); transform:translateX(-50%)}
.step h3{margin:0 0 .3rem}
.step p{margin:0; color:var(--muted)}

/* ── deep-dive gallery ──────────────────────── */
.deep-dive{padding:10px 0 44px}
.dive{border:1px solid var(--line); border-radius:16px; background:#fff; transition:border-color .2s var(--ease), box-shadow .2s var(--ease)}
.dive:hover{border-color:var(--line-strong)}
.dive[open]{border-color:var(--terracotta); box-shadow:0 12px 30px rgba(180,74,38,.10)}
.dive summary{cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; padding:22px 26px}
.dive summary::-webkit-details-marker{display:none}
.dive summary::before{content:'+'; color:var(--terracotta); font-weight:700; font-size:1.4rem; line-height:1; font-family:'Libre Baskerville',serif}
.dive[open] summary::before{content:'–'}
.dive-title{font-family:'Libre Baskerville',Georgia,serif; font-weight:700; font-size:1.25rem; color:var(--ink)}
.dive-hint{font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:1.1rem; color:var(--muted)}
.dive-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:26px; padding:6px 26px 30px}
.dive-grid .shot{width:auto; text-align:center}
.dive-grid .shot img{max-width:280px}
.dive-grid .shot:nth-child(odd) img{transform:rotate(-.7deg)}
.dive-grid .shot:nth-child(even) img{transform:rotate(.7deg)}
.dive-grid .shot img:hover{transform:rotate(0deg) translateY(-6px) scale(1.02)}

/* ── guides grid ────────────────────────────── */
.guides{padding:48px 0}
.guide-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:26px}
.guide-card{display:block; background:#fff; border:1px solid var(--line); border-radius:14px; padding:19px 21px; color:var(--ink); position:relative; transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease)}
.guide-card::after{content:"→"; position:absolute; right:18px; top:50%; transform:translate(4px,-50%); color:var(--terracotta); opacity:0; transition:opacity .2s var(--ease), transform .2s var(--ease)}
.guide-card:hover{border-color:var(--terracotta); text-decoration:none; transform:translateY(-3px); box-shadow:0 10px 24px rgba(180,74,38,.12)}
.guide-card:hover::after{opacity:1; transform:translate(0,-50%)}
.guide-card .q{font-weight:600; color:var(--terracotta); padding-right:22px; display:block}

/* ── faq ────────────────────────────────────── */
.faq{padding:48px 0; background:var(--paper)}
.faq details{background:#fff; border:1px solid var(--line); border-radius:13px; padding:6px 20px; margin-bottom:12px; transition:border-color .2s var(--ease), box-shadow .2s var(--ease)}
.faq details:hover{border-color:var(--line-strong)}
.faq details[open]{border-color:var(--terracotta); box-shadow:0 8px 22px rgba(180,74,38,.08)}
.faq summary{cursor:pointer; font-weight:600; padding:15px 0; list-style:none; font-size:1.04rem; display:flex; align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+'; color:var(--terracotta); font-weight:700; margin-right:13px; font-size:1.15rem; line-height:1; transition:transform .2s var(--ease); display:inline-block}
.faq details[open] summary::before{content:'–'}
.faq .ans{padding:0 0 16px 26px; color:var(--muted)}

/* ── cta band ───────────────────────────────── */
.cta-band{padding:72px 20px 68px; text-align:center; color:#fff; position:relative; overflow:hidden;
  background:
    radial-gradient(70% 110% at 50% -10%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(50% 80% at 85% 100%, rgba(30,20,12,.28), transparent 65%),
    var(--terracotta)}
.cta-band::before{content:""; position:absolute; left:50%; top:26px; transform:translateX(-50%); width:44px; height:2px; background:rgba(255,255,255,.55)}
.cta-band::after{content:""; position:absolute; left:50%; top:12px; transform:translateX(-50%); width:2px; height:30px; background:rgba(255,255,255,.55)}
.cta-band h2{color:#fff; font-size:clamp(1.6rem,3vw,2.1rem); margin-top:.6rem}
.cta-band p{color:rgba(255,255,255,.92); max-width:48ch; margin:0 auto 24px}
.cta-band .btn{background:#fff; color:var(--terracotta); box-shadow:0 4px 10px rgba(60,20,5,.30), 0 16px 34px rgba(60,20,5,.26)}
.cta-band .btn:hover{background:var(--cream); color:var(--terracotta-dark)}

/* ── footer ─────────────────────────────────── */
footer.site{background:var(--ink); color:var(--footer-text); padding:48px 0 34px; font-size:.92rem}
footer.site a{color:var(--footer-link)}
footer.site a:hover{color:#fff}
footer.site .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px}
footer.site h3{font-family:'Libre Baskerville',serif; color:#fff; font-size:1rem; margin-bottom:12px}
footer.site ul{list-style:none}
footer.site li{margin-bottom:8px}
footer.site .fine{margin-top:30px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14); color:var(--footer-fine); font-size:.85rem}

/* ── guide articles ─────────────────────────── */
article.guide{padding:44px 0}
article.guide .breadcrumb{font-size:.88rem; color:var(--muted); margin-bottom:20px; letter-spacing:.02em}
article.guide h1{margin-bottom:1rem}
article.guide h1 + p::first-letter{
  font-family:'Libre Baskerville',Georgia,serif; font-size:3.3em; line-height:.82;
  float:left; padding:6px 10px 0 0; color:var(--terracotta); font-weight:700;
}
article.guide h2{padding-bottom:12px; position:relative}
article.guide h2::after{content:""; position:absolute; left:0; bottom:0; width:44px; height:2.5px; border-radius:2px; background:linear-gradient(90deg,var(--terracotta) 70%,var(--gold))}
article.guide p, article.guide li{font-size:1.05rem}
article.guide ul,article.guide ol{margin:0 0 1.2rem 1.3rem}
article.guide li{margin-bottom:.5rem}
article.guide li::marker{color:var(--terracotta); font-weight:600}
article.guide .solve{background:#fff; border:1px solid var(--line); border-left:4px solid var(--terracotta); border-radius:16px; padding:28px; margin:34px 0; display:grid; grid-template-columns:1fr 260px; gap:28px; align-items:center; box-shadow:var(--shadow-soft)}
article.guide .solve img{width:100%; max-width:240px; height:auto; border-radius:18px; box-shadow:var(--shadow-soft); transform:rotate(1deg); transition:transform .3s var(--ease)}
article.guide .solve img:hover{transform:rotate(0deg) scale(1.02)}
.scripture{font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:1.35rem; color:var(--terracotta)}

/* ── motion respect ─────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}

/* ── mobile ─────────────────────────────────── */
@media(max-width:760px){
  .hero{padding:44px 0 36px}
  .hero .grid{grid-template-columns:1fr}
  .hero-img{transform:none}
  h1{font-size:2rem}
  footer.site .cols{grid-template-columns:1fr 1fr}
  article.guide .solve{grid-template-columns:1fr}
  header.site .bar{padding:4px 12px; flex-wrap:wrap; row-gap:0}
  header.site .brand{font-size:.95rem}
  header.site .brand span{white-space:nowrap}
  header.site .brand img{width:32px; height:32px}
  header.site nav{display:flex; width:100%; justify-content:center}
  header.site nav a{margin:0 3px; padding:12px 6px; font-size:.9rem}
}