/* Seatmate — "Ella lives in your notebook"
   A pad-paper world: red margin rule, taped photos, handwriting, highlighter. */

:root{
  --paper:#FCFCF7; --paper-2:#F2F3EC; --card:#FFFFFF;
  --ink:#182031; --ink-soft:#525E77; --ink-faint:#8B93A4;
  --blue:#1E74E6; --blue-deep:#155BB8;
  --red:#DC564C; --green:#1E9E59; --amber:#F4C63E; --sticky:#FCE79A;
  --rule:rgba(30,116,230,.09);
  --line:#E6E3D8;
  --shadow:0 22px 46px -26px rgba(20,28,52,.45);
  --maxw:1120px;
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --hand:"Caveat", "Segoe Print", cursive;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#14171E; --paper-2:#1B1F28; --card:#1E232D;
    --ink:#ECEBE1; --ink-soft:#A7AEBC; --ink-faint:#6E7788;
    --blue:#5CA2FF; --blue-deep:#3D86EC;
    --red:#F0736A; --green:#42C57F; --amber:#F4C63E; --sticky:#E7CE77;
    --rule:rgba(255,255,255,.045);
    --line:#2A2F3A;
    --shadow:0 22px 50px -26px rgba(0,0,0,.72);
  }
}
:root[data-theme="light"]{
  --paper:#FCFCF7; --paper-2:#F2F3EC; --card:#FFFFFF;
  --ink:#182031; --ink-soft:#525E77; --ink-faint:#8B93A4;
  --blue:#1E74E6; --blue-deep:#155BB8; --red:#DC564C; --green:#1E9E59;
  --amber:#F4C63E; --sticky:#FCE79A; --rule:rgba(30,116,230,.09);
  --line:#E6E3D8; --shadow:0 22px 46px -26px rgba(20,28,52,.45);
}
:root[data-theme="dark"]{
  --paper:#14171E; --paper-2:#1B1F28; --card:#1E232D;
  --ink:#ECEBE1; --ink-soft:#A7AEBC; --ink-faint:#6E7788;
  --blue:#5CA2FF; --blue-deep:#3D86EC; --red:#F0736A; --green:#42C57F;
  --amber:#F4C63E; --sticky:#E7CE77; --rule:rgba(255,255,255,.045);
  --line:#2A2F3A; --shadow:0 22px 50px -26px rgba(0,0,0,.72);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
img{max-width:100%; height:auto}
body{
  margin:0; color:var(--ink);
  background-color:var(--paper);
  background-image:repeating-linear-gradient(to bottom, transparent 0 33px, var(--rule) 33px 34px);
  font-family:var(--sans); font-size:18px; line-height:1.6; font-weight:500;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* red notebook margin rule */
.margin-rule{position:fixed; top:0; bottom:0; left:max(20px, calc(50% - 560px + 52px)); width:2px;
  background:var(--red); opacity:.5; z-index:0; pointer-events:none}
@media(max-width:720px){ .margin-rule{left:14px; opacity:.42} }

.wrap{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 40px 0 84px}
@media(max-width:720px){ .wrap{padding:0 22px 0 34px} }

h1,h2,h3{margin:0; font-family:var(--serif); font-weight:600; line-height:1.02; letter-spacing:-.015em; text-wrap:balance}
p{margin:0}
a{color:inherit; text-decoration:none}
.hand{font-family:var(--hand); font-weight:700; line-height:1}
.mark{background:var(--amber); box-decoration-break:clone; -webkit-box-decoration-break:clone;
  padding:.02em .14em; border-radius:.18em .12em .2em .1em; color:#20180a}
.mark.g{background:color-mix(in srgb,var(--green) 42%, transparent)}
.tl{color:var(--green); font-weight:800}
.blue{color:var(--blue)}

/* ---------- NAV ---------- */
.nav{position:sticky; top:0; z-index:40; background-color:color-mix(in srgb,var(--paper) 86%, transparent);
  backdrop-filter:blur(10px) saturate(1.3); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; gap:20px; height:66px}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--serif); font-weight:600; font-size:22px; letter-spacing:-.02em}
.brand img{width:32px; height:32px; border-radius:9px; box-shadow:0 3px 9px rgba(30,116,230,.4)}
.nav nav{display:flex; gap:24px; margin-left:auto}
.nav nav a{font-weight:700; font-size:15px; color:var(--ink-soft)}
.nav nav a:hover{color:var(--ink)}
.tgl{width:40px; height:40px; border-radius:11px; border:1px solid var(--line); background:var(--card);
  cursor:pointer; color:var(--ink); font-size:17px; line-height:1}
.tgl:hover{border-color:var(--ink-faint)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans); font-weight:800; font-size:15px;
  padding:11px 20px; border-radius:12px; border:2px solid var(--ink); cursor:pointer; max-width:100%; text-align:center;
  transition:transform .14s, box-shadow .18s, background .18s, color .18s}
.btn-solid{background:var(--ink); color:var(--paper); box-shadow:3px 3px 0 0 var(--blue)}
.btn-solid:hover{transform:translate(-1px,-1px); box-shadow:5px 5px 0 0 var(--blue)}
.btn-out{background:transparent; color:var(--ink)}
.btn-out:hover{background:var(--paper-2)}
.menu{display:none}
.m-only{display:none}
@media(max-width:720px){
  .nav .wrap{gap:12px}
  .menu{display:inline-flex; align-items:center; justify-content:center; margin-left:auto; font-size:19px}
  .nav nav{display:none; position:absolute; top:66px; left:0; right:0; margin-left:0; flex-direction:column; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line); padding:6px 22px 12px 34px;
    box-shadow:0 24px 34px -24px rgba(10,14,24,.4)}
  .nav.open nav{display:flex}
  .nav nav a{padding:13px 0; font-size:17px; border-bottom:1px dashed var(--line)}
  .nav nav a:last-child{border-bottom:none}
  .m-only{display:block}
}
@media(max-width:520px){
  .nav-join{display:none}
  .brand{font-size:20px}
  .brand img{width:28px; height:28px}
}

/* ---------- HERO ---------- */
.hero{padding:64px 0 30px}
.hero .wrap{display:grid; grid-template-columns:1.06fr .94fr; gap:40px; align-items:center}
.kick{font-family:var(--hand); font-weight:700; font-size:26px; color:var(--blue); transform:rotate(-2deg); display:inline-block; margin-bottom:6px}
.hero h1{font-size:clamp(44px,7vw,80px); font-weight:600}
.hero h1 em{font-style:italic; color:var(--blue)}
.scribble{font-family:var(--hand); font-weight:700; color:var(--red); font-size:clamp(24px,3.4vw,34px); transform:rotate(-3deg); display:inline-block; margin:8px 0 0}
.hero .lede{margin-top:20px; font-size:clamp(17px,2.1vw,20px); color:var(--ink-soft); max-width:34ch; line-height:1.55}
.hero .row{display:flex; align-items:center; gap:18px; margin-top:28px; flex-wrap:wrap}
.note{font-family:var(--hand); font-weight:700; font-size:20px; color:var(--ink-faint)}
.hero-fig{position:relative; display:grid; place-items:center; min-height:480px}
.halo{position:absolute; width:360px; height:360px; border-radius:50%; z-index:0;
  background:radial-gradient(circle at 50% 45%, color-mix(in srgb,var(--green) 62%, transparent), transparent 66%); filter:blur(4px); opacity:.5}
.arrow{position:absolute; z-index:2; font-family:var(--hand); font-weight:700; color:var(--red); font-size:26px; transform:rotate(8deg)}
@media(max-width:820px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-fig{min-height:0; margin-top:20px}
}

/* photo "snap" */
.snap{position:relative; background:#fff; padding:11px 11px 12px; border:1px solid rgba(0,0,0,.06);
  box-shadow:var(--shadow); width:min(280px,74vw)}
.snap img{display:block; width:100%; border-radius:2px}
.snap .cap{font-family:var(--hand); font-weight:700; font-size:23px; color:#33404f; text-align:center; margin-top:7px; line-height:1.05}
.snap::before{content:""; position:absolute; top:-11px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:118px; height:26px; background:color-mix(in srgb,var(--amber) 78%, transparent); box-shadow:0 2px 6px rgba(0,0,0,.08)}
.snap.tape-b::after{content:""; position:absolute; bottom:-9px; right:22px; transform:rotate(6deg);
  width:74px; height:22px; background:color-mix(in srgb,var(--green) 55%, transparent)}
.r-1{transform:rotate(-2.2deg)} .r1{transform:rotate(1.8deg)} .r2{transform:rotate(2.6deg)} .rm{transform:rotate(-1.2deg)}

/* theme-matched screenshots: the sample follows the site's light/dark */
.snap .shot{display:block; width:100%; border-radius:2px}
.snap .s-dark{display:none}
@media (prefers-color-scheme: dark){
  .snap .s-light{display:none}
  .snap .s-dark{display:block}
}
:root[data-theme="light"] .snap .s-light{display:block}
:root[data-theme="light"] .snap .s-dark{display:none}
:root[data-theme="dark"]  .snap .s-light{display:none}
:root[data-theme="dark"]  .snap .s-dark{display:block}

/* ---------- SECTION heads ---------- */
section{padding:72px 0}
.head{max-width:660px}
.head .lbl{font-family:var(--hand); font-weight:700; font-size:24px; color:var(--blue); transform:rotate(-1.5deg); display:inline-block}
.head h2{font-size:clamp(30px,4.6vw,50px); font-weight:600; margin-top:6px}
.head p{margin-top:16px; color:var(--ink-soft); font-size:18px}

/* ---------- FEATURES scrapbook ---------- */
.scrap{display:grid; grid-template-columns:repeat(12,1fr); gap:30px 34px; margin-top:52px; align-items:start}
.item{grid-column:span 6; display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:start}
.item.flip{grid-template-columns:1fr auto}
.item.flip .txt{order:-1; text-align:right}
.item .txt h3{font-size:clamp(22px,2.6vw,29px); font-weight:600}
.item .txt p{margin-top:10px; color:var(--ink-soft); font-size:16.5px; line-height:1.55}
.item .tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.item.flip .tags{justify-content:flex-end}
.tag{font-size:13px; font-weight:800; color:var(--ink-soft); border:1.5px solid var(--line); padding:5px 11px; border-radius:20px}
@media(max-width:1080px){
  .scrap{grid-template-columns:1fr; gap:48px}
  .item, .item.flip{grid-column:auto; grid-template-columns:1fr; justify-items:center; text-align:center; gap:16px}
  .item.flip .txt{order:0; text-align:center}
  .item.flip .tags, .item .tags{justify-content:center}
  .item .txt{max-width:560px}
}

/* ---------- CHAT (torn note) ---------- */
.chat-sec{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.chat{max-width:560px; margin:38px auto 0; display:flex; flex-direction:column; gap:13px}
.bub{padding:14px 17px; border-radius:16px; font-weight:600; max-width:82%; line-height:1.45; box-shadow:0 8px 22px -16px rgba(20,28,52,.5)}
.bub .who{display:block; font-size:12px; font-weight:800; letter-spacing:.03em; margin-bottom:3px; text-transform:uppercase}
.b-e{align-self:flex-start; background:var(--card); border:1.5px solid color-mix(in srgb,var(--green) 34%, var(--line)); border-bottom-left-radius:5px}
.b-e .who{color:var(--green)}
.b-y{align-self:flex-end; background:var(--blue); color:#fff; border-bottom-right-radius:5px}
.b-y .who{color:rgba(255,255,255,.82)}

/* ---------- VISION + to-do ---------- */
.todo{margin-top:48px; max-width:720px; background:var(--card); border:1px solid var(--line);
  border-radius:4px; box-shadow:var(--shadow); padding:34px 34px 30px; position:relative;
  background-image:repeating-linear-gradient(to bottom, transparent 0 43px, color-mix(in srgb,var(--blue) 8%, transparent) 43px 44px)}
.todo .th{font-family:var(--hand); font-weight:700; font-size:30px; margin-bottom:16px; color:var(--ink)}
.todo ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:22px}
.todo li{display:grid; grid-template-columns:34px 1fr; gap:16px; align-items:start}
.box{width:26px; height:26px; border:2.5px solid var(--ink); border-radius:5px; margin-top:2px; position:relative}
.todo li.done .box{background:var(--green); border-color:var(--green)}
.todo li.done .box::after{content:"✓"; position:absolute; inset:0; color:#fff; font-weight:900; font-size:19px; display:grid; place-items:center}
.todo .when{font-family:var(--hand); font-weight:700; font-size:22px; color:var(--blue)}
.todo li.done .when{color:var(--green)}
.todo .ti{font-family:var(--serif); font-weight:600; font-size:21px; display:block; margin-top:-2px}
.todo .td{color:var(--ink-soft); font-size:15.5px; margin-top:4px; line-height:1.5}
.todo li.done .ti{text-decoration-line:line-through; text-decoration-color:color-mix(in srgb,var(--green) 60%, transparent); text-decoration-thickness:2px}
.stamp{position:absolute; top:22px; right:22px; font-family:var(--hand); font-weight:700; color:var(--green);
  border:2.5px solid var(--green); border-radius:8px; padding:2px 12px; font-size:22px; transform:rotate(-8deg); opacity:.9}

.manifesto{max-width:820px; margin:70px auto 0; text-align:center}
.manifesto p{font-family:var(--serif); font-weight:500; font-size:clamp(24px,3.6vw,38px); line-height:1.28; letter-spacing:-.01em; text-wrap:balance}

/* ---------- JOIN (sticky note) ---------- */
.join .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:center}
.join h2{font-size:clamp(28px,4vw,46px); font-weight:600}
.join .lede{margin-top:18px; color:var(--ink-soft); font-size:18px; line-height:1.55}
.roles{display:flex; flex-wrap:wrap; gap:9px; margin-top:22px}
.roles span{font-family:var(--hand); font-weight:700; font-size:20px; color:var(--ink); border-bottom:2px solid var(--blue); padding:0 2px 1px}
.join .row{display:flex; gap:16px; margin-top:28px; align-items:center; flex-wrap:wrap}
.sticky-note{background:var(--sticky); color:#2a2410; padding:30px 28px; border-radius:2px;
  box-shadow:0 26px 50px -24px rgba(20,20,10,.5); transform:rotate(2deg); position:relative}
.sticky-note::before{content:""; position:absolute; top:-13px; left:50%; transform:translateX(-50%) rotate(-4deg);
  width:130px; height:30px; background:rgba(255,255,255,.45); box-shadow:0 2px 6px rgba(0,0,0,.12)}
.sticky-note .wanted{font-family:var(--hand); font-weight:700; font-size:34px; line-height:.95; margin-bottom:8px}
.sticky-note .q{font-weight:700; font-size:16px; line-height:1.5}
.sticky-note .sig{font-family:var(--hand); font-weight:700; font-size:20px; margin-top:14px; color:#4a3d12}
@media(max-width:820px){ .join .wrap{grid-template-columns:1fr} .sticky-note{margin-top:6px} }

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line); padding:40px 0}
.foot{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:flex-end; color:var(--ink-soft)}
.foot .brand{color:var(--ink); font-size:19px}
.foot .hand{font-size:22px; color:var(--ink-faint); margin-top:6px}
.foot .lnk{font-size:14.5px; text-align:right}
.foot a{font-weight:800; color:var(--ink-soft)} .foot a:hover{color:var(--blue)}
@media(max-width:720px){
  .foot{flex-direction:column; align-items:flex-start}
  .foot .lnk{text-align:left}
}

/* ---------- small phones ---------- */
@media(max-width:480px){
  body{font-size:17px}
  section{padding:56px 0}
  .hero{padding:44px 0 22px}
  .hero h1{font-size:clamp(37px,12vw,44px)}
  .kick{font-size:22px}
  .scribble{font-size:clamp(22px,6.4vw,26px)}
  .hero .row{gap:12px}
  .hero .row .btn{flex:1 1 auto}
  .head h2{font-size:clamp(28px,8vw,34px)}
  .snap::before{width:92px}
  .todo{padding:26px 20px 24px}
  .todo .th{padding-right:88px}
  .stamp{top:14px; right:12px; font-size:19px; padding:1px 9px}
  .sticky-note{padding:26px 22px; transform:rotate(1.2deg)}
  #try .row .btn{width:100%}
}

/* ---------- reveal ---------- */
.rev{opacity:1}
.js .rev{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease}
.js .rev.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){ .js .rev{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} }