/* Still Heart — editorial site. Swiss grid, small grotesk, big imagery. */
@font-face{font-family:"Hanken";font-weight:300;font-display:swap;src:url(/assets/fonts/hanken-300.woff2) format("woff2")}
@font-face{font-family:"Hanken";font-weight:400;font-display:swap;src:url(/assets/fonts/hanken-400.woff2) format("woff2")}
@font-face{font-family:"Hanken";font-weight:500;font-display:swap;src:url(/assets/fonts/hanken-500.woff2) format("woff2")}
@font-face{font-family:"Hanken";font-weight:600;font-display:swap;src:url(/assets/fonts/hanken-600.woff2) format("woff2")}
@font-face{font-family:"Amiri";font-weight:400;font-display:swap;src:url(/assets/fonts/amiri-400-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}

:root{
  --paper:#f3efe9; --paper-2:#e9e3da; --ink:#141110; --ink-2:#4f4841; --mute:#8a8178;
  --line:rgba(20,17,16,.14); --night:#17110f; --night-2:#211915; --on-night:#efe6da; --on-night-2:rgba(239,230,218,.62);
  --amber:#e9a86a; --amber-ink:#8a5424;
  --g:clamp(16px,2.2vw,28px); --col:calc((100% - 11 * var(--gap)) / 12); --gap:clamp(12px,1.6vw,22px);
  --s:13px; --s2:15px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:70px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--s2)/1.45 "Hanken",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}
.u{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{padding:0 var(--g)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gap)}
.small{font-size:var(--s);line-height:1.4}
.mute{color:var(--mute)}
.arrow::after{content:" ↴";font-size:.9em}
.ext::after{content:" ↗";font-size:.9em}

/* top bar */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.top.scrolled{border-color:var(--line)}
.top .grid{padding:14px 0;font-size:var(--s);align-items:center}
.top .brand{grid-column:1/4;display:flex;align-items:center;gap:8px;font-weight:500}
.top .brand img{width:18px;height:18px}
.top .what{grid-column:4/7;color:var(--ink-2)}
.top .links{grid-column:7/13;display:flex;gap:22px;justify-content:flex-end}
.top .links a:hover{text-decoration:underline;text-underline-offset:3px}
.top .get{font-weight:500}
@media (max-width:760px){.top .what{display:none}.top .brand{grid-column:1/6}.top .links{grid-column:6/13;gap:16px}.top .hide-m{display:none}}

/* hero */
.hero{padding:clamp(40px,8vw,110px) 0 clamp(26px,4vw,48px)}
.hero h1{grid-column:1/8;margin:0;font-weight:400;font-size:clamp(64px,13.2vw,212px);line-height:.86;letter-spacing:-.055em}
.hero .meta{grid-column:8/13;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);font-size:var(--s);align-self:end;padding-bottom:.8vw}
.hero .meta ul{list-style:none;margin:0;padding:0}
.hero .meta .lead{grid-column:1/-1;font-size:var(--s2);max-width:34em;color:var(--ink)}
.hero .meta .stores{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
@media (max-width:900px){.hero h1{grid-column:1/-1}.hero .meta{grid-column:1/-1;margin-top:28px}}

.btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--ink);font:500 var(--s2) "Hanken";background:var(--ink);color:var(--paper);transition:transform .2s}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn svg{width:16px;height:16px}
.night .btn{background:var(--on-night);color:var(--night);border-color:var(--on-night)}
.night .btn.ghost{background:transparent;color:var(--on-night)}

/* hero media: art photograph with the phone standing in it */
.stage{position:relative;margin:0 var(--g);border-radius:4px;overflow:hidden;background:var(--night);aspect-ratio:16/9}
.stage>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 2.4s cubic-bezier(.2,.7,.2,1)}
.stage.in>img.bg{transform:scale(1)}
.stage .phone{position:absolute;left:50%;top:50%;width:min(24%,300px);transform:translate(-50%,-47%);filter:drop-shadow(0 40px 60px rgba(0,0,0,.45))}
.stage .cap{position:absolute;left:18px;bottom:14px;color:rgba(255,255,255,.8);font-size:var(--s)}
@media (max-width:760px){.stage{aspect-ratio:4/5}.stage .phone{width:58%}}

/* sections */
.sec{padding:clamp(64px,9vw,140px) 0}
.sec.tight{padding-top:clamp(24px,4vw,50px)}
.label{font-size:var(--s);color:var(--mute);margin:0 0 12px}
.cols{font-size:var(--s)}
.cols h3{font:500 var(--s)/1.4 "Hanken";margin:0 0 6px}
.intro{grid-column:1/4}
.intro .num{font-size:clamp(44px,6vw,88px);line-height:.9;letter-spacing:-.05em}
.c4{grid-column:span 3}
.statement{grid-column:4/11;font-size:clamp(24px,3.1vw,46px);line-height:1.08;letter-spacing:-.025em;margin:0}
.statement em{font-style:normal;color:var(--mute)}
@media (max-width:900px){.intro,.statement{grid-column:1/-1}.statement{margin-top:22px}.c4{grid-column:span 6;margin-top:18px}}
@media (max-width:520px){.c4{grid-column:1/-1}}

/* screens on night */
.night{background:var(--night);color:var(--on-night)}
.night .label,.night .mute{color:var(--on-night-2)}
.shots{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap);margin-top:44px}
.shots figure{margin:0}
.shots img{width:100%;filter:drop-shadow(0 26px 34px rgba(0,0,0,.4))}
.shots figcaption{font-size:var(--s);margin-top:16px;color:var(--on-night-2)}
.shots figcaption b{display:block;font-weight:500;color:var(--on-night)}
@media (max-width:900px){.shots{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:44px calc(-1 * var(--g)) 0;padding:0 var(--g) 10px;scrollbar-width:none}.shots::-webkit-scrollbar{display:none}.shots figure{flex:0 0 56%;scroll-snap-align:center}}

/* the names */
.names{border-top:1px solid var(--line);margin-top:40px}
.name{display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gap);padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline;transition:background .25s}
.name .n{grid-column:1/2;font-size:var(--s);color:var(--mute)}
.name .t{grid-column:2/6;font-size:clamp(22px,2.6vw,38px);letter-spacing:-.02em;line-height:1.1}
.name .m{grid-column:6/10;font-size:var(--s)}
.name .m span{display:block;color:var(--mute)}
.name .ar{grid-column:10/13;text-align:right;font:400 clamp(26px,3vw,44px)/1.2 "Amiri",serif;direction:rtl}
@media (max-width:760px){.name .t{grid-column:2/9}.name .ar{grid-column:9/13}.name .m{grid-column:2/-1;margin-top:6px}}

/* covers, like a record shelf */
.covers{display:grid;grid-template-columns:repeat(4,1fr);gap:28px var(--gap);margin-top:44px}
.cover{margin:0}
.cover .im{aspect-ratio:1;overflow:hidden;background:var(--paper-2);border-radius:2px}
.cover img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.cover:hover img{transform:scale(1.035)}
.cover figcaption{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:var(--s);margin-top:10px}
.cover figcaption b{font-weight:500}
.cover figcaption span{color:var(--mute)}
.cover figcaption .sub{grid-column:1/-1}
@media (max-width:900px){.covers{grid-template-columns:repeat(2,1fr)}}

/* journal index rows */
.rows{border-top:1px solid var(--line);margin-top:40px}
.row{display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gap);padding:16px 0;border-bottom:1px solid var(--line);align-items:center}
.row .n{grid-column:1/2;font-size:var(--s);color:var(--mute)}
.row .th{grid-column:2/3;aspect-ratio:1;overflow:hidden;border-radius:2px;background:var(--paper-2)}
.row .th img{width:100%;height:100%;object-fit:cover}
.row .t{grid-column:3/9;font-size:clamp(18px,1.9vw,26px);letter-spacing:-.015em;line-height:1.15}
.row .c{grid-column:9/11;font-size:var(--s);color:var(--ink-2)}
.row .r{grid-column:11/13;font-size:var(--s);color:var(--mute);text-align:right}
.row:hover .t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media (max-width:760px){.row .th{grid-column:1/4}.row .n{display:none}.row .t{grid-column:4/-1}.row .c{grid-column:4/9;margin-top:6px}.row .r{grid-column:9/-1;margin-top:6px}}

/* guide form */
.guide .grid{align-items:end}
.guide h2{grid-column:1/7;font-weight:400;font-size:clamp(36px,5vw,76px);line-height:.95;letter-spacing:-.045em;margin:0}
.guide .side{grid-column:8/13;font-size:var(--s)}
.form{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.input{flex:1 1 220px;min-height:46px;border-radius:999px;border:1px solid var(--line);background:#fff;padding:0 18px;font:var(--s2) "Hanken";color:var(--ink)}
.night .input{background:rgba(255,255,255,.06);border-color:rgba(239,230,218,.2);color:var(--on-night)}
.hp{position:absolute;left:-9999px}
.status{min-height:1.4em;margin-top:10px;font-size:var(--s)}
@media (max-width:900px){.guide h2,.guide .side{grid-column:1/-1}.guide .side{margin-top:22px}}

/* footer */
.foot{padding:26px 0 40px;font-size:var(--s);border-top:1px solid var(--line)}
.foot .grid>div{grid-column:span 3}
.foot b{font-weight:500;display:block;margin-bottom:4px}
.foot a{display:block;color:var(--ink-2)}
.foot a:hover{color:var(--ink)}
@media (max-width:760px){.foot .grid>div{grid-column:span 6;margin-bottom:18px}}

/* article */
.art-head{padding:clamp(40px,7vw,96px) 0 clamp(24px,4vw,44px)}
.art-head .num{grid-column:1/3;font-size:clamp(56px,8vw,128px);line-height:.85;letter-spacing:-.06em}
.art-head .facts{grid-column:3/13;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);font-size:var(--s)}
.art-head .facts b{display:block;font-weight:500}
.art-head h1{grid-column:3/12;margin:clamp(28px,4vw,54px) 0 0;font-weight:400;font-size:clamp(34px,5.2vw,78px);line-height:1;letter-spacing:-.04em}
.art-head .dek{grid-column:3/10;font-size:clamp(17px,1.5vw,20px);color:var(--ink-2);margin-top:20px;line-height:1.45}
@media (max-width:900px){.art-head .num{grid-column:1/-1}.art-head .facts{grid-column:1/-1;grid-template-columns:repeat(2,1fr);margin-top:20px}.art-head h1,.art-head .dek{grid-column:1/-1}}
.art-hero{margin:0 var(--g);aspect-ratio:16/7;overflow:hidden;border-radius:4px;background:var(--night)}
.art-hero img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.art-hero{aspect-ratio:4/3}}
.art-body{padding:clamp(40px,6vw,80px) 0}
.art-body aside{grid-column:1/4;font-size:var(--s)}
.art-body aside .sticky{position:sticky;top:78px}
.art-body aside ul{list-style:none;padding:0;margin:0 0 26px}
.art-body aside li{padding:5px 0;border-bottom:1px solid var(--line)}
.prose{grid-column:4/10;font-size:18px;line-height:1.68;color:#221d1a}
.prose h2{font-weight:500;font-size:24px;line-height:1.2;letter-spacing:-.015em;margin:2em 0 .6em}
.prose h3{font-weight:500;font-size:19px;margin:1.6em 0 .4em}
.prose p{margin:0 0 1.05em}
.prose .dek{display:none}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose blockquote{margin:1.6em 0;padding:0 0 0 20px;border-left:2px solid var(--amber);font-size:20px;line-height:1.5;color:var(--ink)}
.prose ul,.prose ol{padding-left:1.2em}
.prose li{margin:.35em 0}
.prose em{font-style:italic}
.sources{margin-top:3em;padding-top:1.4em;border-top:1px solid var(--line);font-size:var(--s)}
.sources h2{font-size:var(--s)!important;font-weight:500!important;margin:0 0 .6em!important;letter-spacing:0!important}
.sources ol{padding-left:1.2em;color:var(--ink-2)}
.inapp{grid-column:4/10;margin-top:44px;padding:22px;background:var(--night);color:var(--on-night);border-radius:4px}
.inapp .label{color:var(--on-night-2)}
.inapp .list{display:grid;gap:12px}
.inapp .it{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;font-size:var(--s)}
.inapp .it img{width:64px;height:64px;border-radius:3px;object-fit:cover}
.inapp .it b{display:block;font-weight:500;font-size:var(--s2)}
.inapp .it span{color:var(--on-night-2)}
.inapp .stores{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
@media (max-width:900px){.art-body aside{grid-column:1/-1;order:2;margin-top:30px}.art-body aside .sticky{position:static}.prose,.inapp{grid-column:1/-1}}

/* legal */
.legal{grid-column:4/10;font-size:16px;line-height:1.65;padding:clamp(40px,6vw,80px) 0}
.legal h1{font-weight:400;font-size:clamp(40px,5vw,72px);letter-spacing:-.04em;line-height:1;margin:0 0 20px}
.legal h2{font-weight:500;font-size:19px;margin:1.8em 0 .5em}
@media (max-width:900px){.legal{grid-column:1/-1}}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.stage>img.bg{transform:none}}
.prose .care-note{margin:2em 0;padding:16px 18px;background:var(--paper-2);border-radius:4px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.prose .care-note p:last-child{margin:0}

/* ---- quieter pass ---- */
.top .grid{display:flex;justify-content:space-between;gap:16px}
.top .what{display:none}
.top .links{gap:clamp(14px,2vw,26px)}
.hero.q{padding:clamp(56px,10vw,130px) 0 clamp(36px,5vw,64px);text-align:center}
.hero.q h1{font-size:clamp(48px,8vw,112px);line-height:.95;letter-spacing:-.045em;margin:0}
.hero.q .lead{font-size:clamp(17px,1.6vw,20px);color:var(--ink-2);margin:18px auto 0;max-width:30em}
.hero.q .stores{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.stage .phone{width:min(22%,280px)}
@media (max-width:760px){.stage{aspect-ratio:3/4}.stage .phone{width:56%}}
.sec{padding:clamp(80px,11vw,170px) 0}
.quiet .line{max-width:24em;margin:0 auto;text-align:center;font-size:clamp(22px,2.4vw,34px);line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
.h{text-align:center;font-size:var(--s);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0}
.night .h{color:var(--on-night-2)}
.sub{text-align:center;font-size:clamp(20px,2vw,28px);letter-spacing:-.01em;margin:14px 0 0}
.shots{grid-template-columns:repeat(4,1fr);max-width:1100px;margin:48px auto 0;gap:clamp(18px,3vw,44px)}
.shots figcaption{text-align:center}
.names{max-width:760px;margin:48px auto 0}
.name{display:flex;justify-content:space-between;align-items:center;padding:20px 0}
.name .t{font-size:clamp(20px,2.2vw,28px)}
.name .t span{display:block;font-size:var(--s);color:var(--mute);letter-spacing:0;margin-top:4px}
.name .ar{font-size:clamp(28px,3vw,40px)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px);max-width:1100px;margin:48px auto 0}
.card .im{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:var(--paper-2)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.card:hover img{transform:scale(1.03)}
.card .c{display:block;font-size:var(--s);color:var(--mute);margin-top:14px}
.card .t{display:block;font-size:clamp(18px,1.6vw,22px);line-height:1.25;margin-top:6px;letter-spacing:-.01em}
.more{text-align:center;margin-top:40px;font-size:var(--s2)}
@media (max-width:760px){.cards{grid-template-columns:1fr}.shots figure{flex:0 0 64%}}
.guide h2{font-size:clamp(34px,4vw,60px)}
.art-head .num{display:none}
.art-head .facts,.art-head h1,.art-head .dek{grid-column:1/-1}
.art-head h1{max-width:18em}
.art-head .dek{max-width:36em}
.art-head .facts{max-width:900px}
.inapp .it{grid-template-columns:1fr}
.rows .row .n{visibility:hidden}
/* sleep and move */
.fg{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,110px);align-items:center;max-width:1000px;margin:0 auto}
.fg.rev .ft{order:2}
.ft .h{text-align:left}
.ft h2{font-weight:400;font-size:clamp(30px,3.6vw,52px);line-height:1.05;letter-spacing:-.035em;margin:14px 0 18px}
.ft p{font-size:clamp(16px,1.3vw,18px);color:var(--ink-2);max-width:28em}
.ft ul{list-style:none;padding:0;margin:22px 0 0;border-top:1px solid var(--line);font-size:var(--s2)}
.ft li{padding:10px 0;border-bottom:1px solid var(--line)}
.fp{margin:0;display:flex;justify-content:center}
.fp img{width:min(78%,330px);filter:drop-shadow(0 30px 44px rgba(20,17,16,.28))}
@media (max-width:760px){.fg{grid-template-columns:1fr}.fg.rev .ft{order:0}.fp img{width:64%}}
/* nav: keep side padding on every screen */
.top .grid{padding:14px var(--g)}
.top .brand{white-space:nowrap}
.top .links a{white-space:nowrap}
@media (max-width:420px){.top .links{gap:14px}.top .grid{font-size:13px}}

/* home: dark intro matching the app */
.home .top{background:color-mix(in srgb,var(--night) 86%,transparent);color:var(--on-night)}
.home .top.scrolled{border-color:rgba(239,230,218,.1)}
.home .top .brand img{filter:invert(1) brightness(1.1)}
.dark-intro{background:var(--night);color:var(--on-night);padding-bottom:clamp(40px,6vw,90px)}
.dark-intro .hero.q h1{font-size:clamp(40px,6.4vw,92px);line-height:1.02}
.dark-intro .hero.q h1 span{display:block;color:rgba(239,230,218,.62)}
.modes{display:flex;justify-content:center;gap:clamp(22px,5vw,64px);flex-wrap:wrap;margin:clamp(26px,3.4vw,44px) 0 0;padding:0}
.modes span{position:relative;font:500 clamp(15px,1.5vw,19px) "Hanken";letter-spacing:.06em;text-transform:uppercase;color:#f6eee2;text-shadow:0 0 18px rgba(240,206,160,.45)}
.modes span::before{content:"";position:absolute;left:50%;top:50%;width:150%;height:260%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(235,190,135,.20),rgba(235,190,135,0));z-index:-1;pointer-events:none;animation:glow 6s ease-in-out infinite}
.modes span:nth-child(2)::before{animation-delay:-1.5s}.modes span:nth-child(3)::before{animation-delay:-3s}.modes span:nth-child(4)::before{animation-delay:-4.5s}
.modes{isolation:isolate}
@keyframes glow{0%,100%{opacity:.75}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.modes span::before{animation:none}}
.btn.light{background:var(--on-night);color:var(--night);border-color:var(--on-night)}
.dark-intro .btn.ghost{color:var(--on-night);border-color:rgba(239,230,218,.5)}
@media (max-width:420px){.modes{gap:18px 26px}}