/*
Theme Name: Memory Thread
Theme URI: https://mymemorythread.com
Author: LeRoy Michaelson
Author URI: https://mymemorythread.com
Description: Custom landing-page theme for Memory Thread — a one-button voice recorder that captures a loved one's life stories in their own voice. Warm ivory ground, deep navy ink, copper "thread" line-work, with a waitlist capture that stores signups in the WordPress admin.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: All rights reserved
Text Domain: memory-thread
*/


  /* ============ TOKENS ============ */
  :root{
    --ivory:#F4EDE2;        /* warm ground */
    --ivory-2:#EFE6D8;      /* raised panel */
    --ivory-3:#E8DDCB;      /* deeper panel / borders */
    --ink:#232E3D;          /* deep navy ink */
    --ink-2:#3B4657;        /* secondary ink */
    --ink-soft:#6A6459;     /* warm muted (copper-biased grey) */
    --copper:#9C6B3E;       /* accent line-work */
    --copper-bright:#B5824E;
    --signal:#C1442E;       /* the one bold: record red */
    --hairline:rgba(35,46,61,.14);
    --shadow:0 1px 2px rgba(35,46,61,.05), 0 14px 40px -18px rgba(35,46,61,.22);
    --maxw:1080px;
    --ff-serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,"Hoefler Text",Georgia,serif;
    --ff-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --step-hero:clamp(2.35rem,1.5rem + 3.6vw,4.1rem);
    --step-h2:clamp(1.7rem,1.28rem + 1.9vw,2.55rem);
    --step-h3:clamp(1.18rem,1.05rem + .6vw,1.45rem);
    --step-body:clamp(1.05rem,1rem + .28vw,1.185rem);
    --step-lead:clamp(1.18rem,1.06rem + .6vw,1.42rem);
  }
  @media (prefers-color-scheme:dark){
    :root{
      --ivory:#181B22; --ivory-2:#20242D; --ivory-3:#2A2F39;
      --ink:#EFE7DA; --ink-2:#CBC3B5; --ink-soft:#9A9384;
      --copper:#C69063; --copper-bright:#D6A374;
      --signal:#E4604A;
      --hairline:rgba(239,231,218,.14);
      --shadow:0 1px 2px rgba(0,0,0,.3), 0 18px 46px -20px rgba(0,0,0,.6);
    }
  }
  :root[data-theme="light"]{
    --ivory:#F4EDE2; --ivory-2:#EFE6D8; --ivory-3:#E8DDCB;
    --ink:#232E3D; --ink-2:#3B4657; --ink-soft:#6A6459;
    --copper:#9C6B3E; --copper-bright:#B5824E; --signal:#C1442E;
    --hairline:rgba(35,46,61,.14);
    --shadow:0 1px 2px rgba(35,46,61,.05), 0 14px 40px -18px rgba(35,46,61,.22);
  }
  :root[data-theme="dark"]{
    --ivory:#181B22; --ivory-2:#20242D; --ivory-3:#2A2F39;
    --ink:#EFE7DA; --ink-2:#CBC3B5; --ink-soft:#9A9384;
    --copper:#C69063; --copper-bright:#D6A374; --signal:#E4604A;
    --hairline:rgba(239,231,218,.14);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 18px 46px -20px rgba(0,0,0,.6);
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--ivory); color:var(--ink);
    font-family:var(--ff-sans);
    font-size:var(--step-body); line-height:1.65;
    -webkit-font-smoothing:antialiased;
    background-image:radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--copper) 8%, transparent), transparent 60%);
  }
  h1,h2,h3{font-family:var(--ff-serif); font-weight:600; color:var(--ink); text-wrap:balance; line-height:1.12; letter-spacing:.2px}
  p{max-width:62ch}
  a{color:inherit}

  .eyebrow{
    font-family:var(--ff-sans); font-size:.74rem; font-weight:700;
    letter-spacing:.22em; text-transform:uppercase; color:var(--copper);
    margin:0 0 1rem;
  }
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.1rem,4vw,2.5rem)}
  .center{text-align:center}
  .center p{margin-left:auto;margin-right:auto}

  /* ============ NAV ============ */
  header.nav{
    position:sticky; top:0; z-index:50;
    backdrop-filter:saturate(1.3) blur(10px);
    background:color-mix(in srgb, var(--ivory) 82%, transparent);
    border-bottom:1px solid var(--hairline);
  }
  .nav-in{max-width:var(--maxw); margin:0 auto; padding:.85rem clamp(1.1rem,4vw,2.5rem);
    display:flex; align-items:center; justify-content:space-between; gap:1rem}
  .wordmark{font-family:var(--ff-serif); font-size:1.34rem; color:var(--ink); text-decoration:none; letter-spacing:.3px; display:flex; align-items:baseline; gap:.34em}
  .wordmark b{font-weight:600}
  .wordmark i{font-style:italic; font-weight:500; color:var(--copper)}
  .nav-cta{
    font-family:var(--ff-sans); font-size:.82rem; font-weight:600; letter-spacing:.02em;
    text-decoration:none; color:var(--ink);
    border:1px solid var(--copper); border-radius:999px;
    padding:.5rem 1.05rem; transition:background .2s,color .2s,border-color .2s;
    white-space:nowrap;
  }
  .nav-cta:hover{background:var(--copper); color:var(--ivory); border-color:var(--copper)}

  /* ============ THREAD DIVIDER ============ */
  .thread{display:flex; flex-direction:column; align-items:center; gap:0; height:104px; margin:0 auto}
  .thread .line{width:1.5px; flex:1; background:linear-gradient(var(--copper), color-mix(in srgb,var(--copper) 30%, transparent))}
  .thread .line.bottom{background:linear-gradient(color-mix(in srgb,var(--copper) 30%, transparent), var(--copper))}
  .thread .node{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--copper);
    background:var(--ivory); flex:0 0 auto}
  section{padding-block:clamp(1rem,3vw,2rem)}

  /* ============ HERO ============ */
  .hero{padding-top:clamp(2.4rem,6vw,4.6rem); padding-bottom:.5rem}
  .hero .logo-mark{width:clamp(150px,20vw,208px); height:auto; margin:0 auto 1.6rem; display:block;
    filter:drop-shadow(0 10px 28px rgba(35,46,61,.14))}
  @media (prefers-color-scheme:dark){ .hero .logo-mark{
    background:#F4EDE2; padding:14px 20px; border-radius:14px; box-shadow:var(--shadow)} }
  :root[data-theme="dark"] .hero .logo-mark{background:#F4EDE2; padding:14px 20px; border-radius:14px; box-shadow:var(--shadow)}
  :root[data-theme="light"] .hero .logo-mark{background:none;padding:0;border-radius:0;box-shadow:none}
  h1.hero-h{font-size:var(--step-hero); margin:.2rem auto .1rem; max-width:16ch}
  h1.hero-h .em{color:var(--copper); font-style:italic}
  .hero .lead{font-family:var(--ff-serif); font-size:var(--step-lead); color:var(--ink-2);
    max-width:40ch; margin:1.4rem auto 0; line-height:1.4}
  .hero-cta-row{display:flex; flex-wrap:wrap; gap:.8rem 1.1rem; align-items:center; justify-content:center; margin-top:2rem}
  .btn{
    font-family:var(--ff-sans); font-size:1rem; font-weight:600; letter-spacing:.01em;
    text-decoration:none; cursor:pointer; border-radius:999px; padding:.85rem 1.7rem;
    border:1px solid transparent; transition:transform .15s, box-shadow .2s, background .2s;
  }
  .btn-primary{background:var(--ink); color:var(--ivory); box-shadow:var(--shadow)}
  .btn-primary:hover{transform:translateY(-2px)}
  :root[data-theme="dark"] .btn-primary{background:var(--copper); color:#181B22}
  @media (prefers-color-scheme:dark){.btn-primary{background:var(--copper); color:#181B22}}
  .hero-cta-row .fine{font-size:.9rem; color:var(--ink-soft); font-family:var(--ff-serif); font-style:italic}

  /* soundwave nod to the logo */
  .wave{display:flex; align-items:center; justify-content:center; gap:4px; height:38px; margin:2.2rem auto .2rem; width:min(240px,60vw)}
  .wave span{width:3px; border-radius:3px; background:var(--copper); opacity:.85;
    animation:pulse 1.6s ease-in-out infinite}
  @keyframes pulse{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
  @media (prefers-reduced-motion:reduce){ .wave span{animation:none; transform:scaleY(.6)} }

  /* ============ PROBLEM ============ */
  .problem p{font-family:var(--ff-serif); font-size:var(--step-lead); line-height:1.5; color:var(--ink-2)}
  .problem .accent{color:var(--ink)}

  /* ============ HOW IT WORKS ============ */
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.5vw,2rem); margin-top:2.6rem}
  @media (max-width:720px){.steps{grid-template-columns:1fr; max-width:26rem; margin-inline:auto}}
  .step{background:var(--ivory-2); border:1px solid var(--hairline); border-radius:16px;
    padding:1.7rem 1.5rem; box-shadow:var(--shadow); position:relative}
  .step .ico{width:52px;height:52px;margin-bottom:1rem}
  .step h3{font-size:var(--step-h3); margin:.1rem 0 .5rem}
  .step p{font-size:1rem; color:var(--ink-2); margin:0}

  /* record button visual for the Press step */
  .recbtn{position:relative; width:52px;height:52px;border-radius:50%;
    background:var(--signal); box-shadow:0 6px 16px -4px color-mix(in srgb,var(--signal) 60%, transparent);
    display:grid; place-items:center; margin-bottom:1rem}
  .recbtn::after{content:""; position:absolute; inset:-6px; border-radius:50%;
    border:2px solid var(--signal); opacity:.55; animation:ring 2.2s ease-out infinite}
  @keyframes ring{0%{transform:scale(.8);opacity:.6}70%,100%{transform:scale(1.35);opacity:0}}
  @media (prefers-reduced-motion:reduce){.recbtn::after{animation:none;opacity:.4}}
  .recbtn .dot{width:16px;height:16px;border-radius:50%;background:var(--ivory);opacity:.92}

  /* ============ DAVID / built for ============ */
  .david{background:var(--ivory-2); border-block:1px solid var(--hairline)}
  .david-in{max-width:var(--maxw); margin:0 auto; padding:clamp(2.4rem,5vw,3.6rem) clamp(1.1rem,4vw,2.5rem);
    display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.6rem,4vw,3.4rem); align-items:center}
  @media (max-width:800px){.david-in{grid-template-columns:1fr}}
  .david h2{font-size:var(--step-h2); margin:.2rem 0 1rem}
  .david p{color:var(--ink-2); margin:0 0 1rem}
  .david p .hl{color:var(--signal); font-weight:600; font-family:var(--ff-serif)}
  .david p .cop{color:var(--copper); font-style:italic}
  /* device portrait: bus-yellow case + red button, drawn */
  .device{aspect-ratio:1/1; border-radius:22px; display:grid; place-items:center;
    background:
      radial-gradient(120% 120% at 30% 20%, #FFD23F 0%, #F4B21B 55%, #E39A0C 100%);
    box-shadow:var(--shadow); position:relative; overflow:hidden}
  .device .plate{width:64%;height:64%;border-radius:18px;background:rgba(255,255,255,.16);
    border:2px solid rgba(35,46,61,.18); display:grid; place-items:center; gap:14px; grid-auto-flow:row}
  .device .bigbtn{width:44%; aspect-ratio:1; border-radius:50%; background:var(--signal);
    box-shadow:inset 0 -6px 14px rgba(0,0,0,.28), 0 8px 18px -4px rgba(0,0,0,.35)}
  .device .reclight{position:absolute; top:16%; left:50%; transform:translateX(-50%);
    width:14px;height:14px;border-radius:50%;background:var(--signal);
    box-shadow:0 0 0 0 color-mix(in srgb,var(--signal) 70%,transparent); animation:blink 2.4s steps(1) infinite}
  @keyframes blink{0%,49%{opacity:1;box-shadow:0 0 16px 3px color-mix(in srgb,var(--signal) 80%,transparent)}50%,100%{opacity:.25;box-shadow:none}}
  @media (prefers-reduced-motion:reduce){.device .reclight{animation:none}}
  .device .lanyard{position:absolute;top:0;left:50%;width:12px;height:22%;transform:translateX(-50%);
    background:linear-gradient(var(--signal),color-mix(in srgb,var(--signal) 70%, #7a1e12))}

  /* ============ EDITIONS ============ */
  .editions .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.5vw,1.8rem); margin-top:2.6rem}
  @media (max-width:820px){.editions .cards{grid-template-columns:1fr; max-width:26rem; margin-inline:auto}}
  .ed{background:var(--ivory-2); border:1px solid var(--hairline); border-radius:16px; padding:2rem 1.6rem;
    text-align:center; box-shadow:var(--shadow); transition:transform .18s, border-color .2s}
  .ed:hover{transform:translateY(-4px); border-color:var(--copper)}
  .ed .frame{width:96px;height:96px;margin:0 auto 1.1rem}
  .ed h3{font-size:1.5rem; letter-spacing:.5px; color:var(--copper); margin:.2rem 0 .1rem}
  .ed .kicker{font-family:var(--ff-sans); font-size:.66rem; font-weight:700; letter-spacing:.2em;
    text-transform:uppercase; color:var(--ink-soft); margin-bottom:.9rem}
  .ed .tag{font-family:var(--ff-serif); font-style:italic; font-size:1.08rem; color:var(--ink); margin:.2rem 0 .8rem}
  .ed .desc{font-size:.96rem; color:var(--ink-2); margin:0}

  /* ============ MEMOIR ============ */
  .memoir{background:
      linear-gradient(180deg, transparent, color-mix(in srgb,var(--copper) 6%, transparent)),
      var(--ivory)}
  .memoir .inner{max-width:56ch; margin:0 auto; text-align:center}
  .memoir h2{font-size:var(--step-h2); margin:.4rem 0 1rem}
  .memoir p{margin:0 auto 1rem; color:var(--ink-2)}
  .memoir .whisper{font-family:var(--ff-serif); font-style:italic; color:var(--ink-soft); font-size:1rem}

  /* ============ WAITLIST ============ */
  .waitlist{background:var(--ink); color:var(--ivory); border-radius:0}
  @media (prefers-color-scheme:dark){.waitlist{background:#12151B}}
  :root[data-theme="dark"] .waitlist{background:#12151B}
  :root[data-theme="light"] .waitlist{background:var(--ink)}
  .waitlist *{--ink:#F4EDE2}
  .wl-in{max-width:640px; margin:0 auto; padding:clamp(2.6rem,6vw,4.4rem) clamp(1.1rem,4vw,2.5rem); text-align:center}
  .waitlist .eyebrow{color:var(--copper-bright)}
  .waitlist h2{color:#F4EDE2; font-size:var(--step-h2); margin:.3rem 0 .6rem}
  .waitlist .sub{color:#D8CFC0; margin:0 auto 1.9rem; max-width:44ch}
  .form-row{display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center}
  .form-row input[type=email]{
    flex:1 1 260px; min-width:0; font-family:var(--ff-sans); font-size:1rem;
    padding:.9rem 1.1rem; border-radius:999px; border:1px solid rgba(244,237,226,.25);
    background:rgba(244,237,226,.06); color:#F4EDE2;
  }
  .form-row input[type=email]::placeholder{color:#B9B1A3}
  .form-row input[type=email]:focus{outline:2px solid var(--copper-bright); outline-offset:2px; border-color:transparent}
  .form-row .btn-primary{background:var(--copper); color:#181B22; flex:0 0 auto}
  .form-row .btn-primary:hover{background:var(--copper-bright)}
  .checks{display:flex; flex-direction:column; gap:.7rem; max-width:30rem; margin:1.8rem auto .4rem; text-align:left}
  .checks label{display:flex; gap:.7rem; align-items:flex-start; font-size:.96rem; color:#E4DBCC; cursor:pointer}
  .checks input{margin-top:.28rem; accent-color:var(--copper); width:16px;height:16px; flex:0 0 auto}
  .checks label b{font-weight:600; color:#F4EDE2}
  .privacy{font-size:.82rem; color:#A79E8F; margin:1.5rem auto 0; max-width:40ch; font-style:italic; font-family:var(--ff-serif)}
  .wl-confirm{display:none; margin-top:1.4rem; font-family:var(--ff-serif); font-size:1.15rem; color:#F4EDE2}
  .wl-confirm.show{display:block; animation:fadeup .5s ease}

  /* ============ FOOTER ============ */
  footer{background:var(--ivory); padding:clamp(2rem,4vw,3rem) 0}
  footer .fin{max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.1rem,4vw,2.5rem); text-align:center}
  footer .tagbrand{font-family:var(--ff-sans); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
    color:var(--copper); margin-bottom:1rem}
  footer .trust{font-family:var(--ff-serif); font-style:italic; color:var(--ink-soft); font-size:1rem; margin:0 auto; max-width:48ch}
  footer .legal{font-size:.8rem; color:var(--ink-soft); margin-top:1.4rem}
  footer a.mail{color:var(--copper); text-decoration:none}

  /* reveal */
  .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
  .reveal.in{opacity:1; transform:none}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
  @keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  a:focus-visible,button:focus-visible,input:focus-visible,.btn:focus-visible{outline:2px solid var(--copper); outline-offset:3px}