/* Spiso website. One stylesheet for every page.
   Colours and fonts are the app's own ("Ember": baked paper, cocoa ink, one ember accent, candle gold,
   dark chrome for the splash), plus the sky of the homepage journey. */

@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-latin-full-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-latin-full-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --ink:#2B1D12; --ink-soft:#5D4A35; --ink-faint:#97826B;
  --paper:#FAF1E4; --surface:#FFFDF8; --sand:#F1E2CC; --cream:#F4ECE3; --on-chrome:#FFE9D6;
  --accent:#B03E12; --accent-text:#A83A11; --accent-deep:#7E2C0C; --on-accent:#FFEFDC;
  --gold:#F0B429; --chrome:#7A2E0F; --chrome-soft:#9C4A1E;
  --sky:#A6C3D8; --amber:#F2B46B;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--amber);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;overflow-x:hidden}
a{color:inherit}
img{max-width:100%}
.serif{font-family:var(--serif)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Homepage: the journey ──────────────────────────────────────────────
   A tall track; the stage inside stays put while you scroll through it. */
.journey{position:relative;height:760vh}
.stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
.sky{position:absolute;inset:0;pointer-events:none}
.sky.day{background:
  radial-gradient(70% 55% at 12% 78%, rgba(255,226,160,.95) 0%, rgba(255,226,160,0) 70%),
  linear-gradient(180deg,#A6C3D8 0%,#CFD6D3 30%,#EED3A6 56%,#F2B46B 100%)}
.sky.dusk{opacity:0;background:
  radial-gradient(70% 55% at 14% 80%, rgba(255,190,120,.75) 0%, rgba(255,190,120,0) 70%),
  linear-gradient(180deg,#2E3F5C 0%,#6F5C78 38%,#C98363 70%,#B8623E 100%)}
.sky.night{opacity:0;background:linear-gradient(180deg,var(--chrome-soft) 0%,var(--chrome) 100%)} /* ends on the colour the finale starts with */
canvas#scene{position:absolute;inset:0;width:100%;height:100%;display:block}

.hero{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;padding:0 16px}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(40px,12.5vw,220px);line-height:1;letter-spacing:-0.01em;margin:0;color:var(--ink);
  text-shadow:0 2px 40px rgba(255,236,190,.6)}
.hero .cue{margin-top:28px;font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.6vw,22px);color:var(--ink-soft);opacity:.85}
.hero .cue::after{content:"";display:block;width:1px;height:38px;margin:14px auto 0;background:linear-gradient(var(--ink-soft),transparent);animation:drop 1.8s ease-in-out infinite}
@keyframes drop{0%{transform:scaleY(.2);transform-origin:top;opacity:0}40%{opacity:1}100%{transform:scaleY(1);transform-origin:top;opacity:0}}
/* The About link: always there, tiny, top right. It fades into the sky while you scroll and comes back
   when the pointer (or a finger) goes near it. */
.top{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;justify-content:flex-end;padding:calc(14px + env(safe-area-inset-top,0px)) 20px 0;pointer-events:none}
.top a{pointer-events:auto;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-soft);text-decoration:none;padding:8px 10px;border-radius:999px;
  opacity:.42;transition:opacity .35s ease,background-color .35s ease,color .35s ease}
.top:hover a,.top a:focus-visible,.top a:active{opacity:1;background:rgba(255,253,248,.55)}
.top.dark a{color:var(--cream)}
.top.dark:hover a,.top.dark a:focus-visible,.top.dark a:active{background:rgba(24,12,6,.35)}

.lines{position:absolute;left:0;top:0;bottom:0;width:40%;display:grid;align-items:center;padding:0 5vw;pointer-events:none}
.line{grid-area:1/1;margin:0;font-family:var(--serif);font-style:italic;font-weight:450;font-size:clamp(26px,3.2vw,54px);line-height:1.15;letter-spacing:-0.005em;
  color:var(--ink);opacity:0;transform:translateY(24px);text-wrap:balance;max-width:14ch;text-shadow:0 1px 30px rgba(255,236,190,.45)}
.line.late,.stage.dark .line{color:var(--cream);text-shadow:0 2px 24px rgba(40,20,10,.35)}

/* ── The finale: the app, on the splash-screen chrome ─────────────────── */
/* Everything here is sized from the screen (vmin: the shorter side), so the app and its words grow with a laptop
   screen and stay in proportion on a phone. --mk is the app icon's size. */
.finale{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;text-align:center;--mk:clamp(150px,24vmin,250px);
  padding:calc(9vh + env(safe-area-inset-top,0px)) 20px calc(28px + env(safe-area-inset-bottom,0px));color:var(--on-chrome);overflow:hidden;
  background:linear-gradient(180deg,var(--chrome) 0%,#5E2309 100%)}
.chrome-bg .glow{position:absolute;left:50%;top:46%;width:120%;height:72%;transform:translate(-50%,-50%);filter:blur(8px);pointer-events:none;
  background:radial-gradient(closest-side, rgba(240,180,41,.42) 0%, rgba(240,180,41,.16) 42%, transparent 100%);animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
.grain{position:absolute;inset:0;opacity:.06;mix-blend-mode:soft-light;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.finale > *{position:relative}
.core{display:flex;flex-direction:column;align-items:center}
@media (min-width:761px){.core{margin:auto 0}} /* on a wide screen the block sits in the middle of the finale */
.finale img.mark{width:92px;height:92px;border-radius:24%;box-shadow:0 10px 30px rgba(24,12,6,.35)}
/* The mark, drawn as in the app's intro: the pot pops up, the steam becomes the roof, the chimney, then the real
   shape, and the icon's tile comes up behind it: this is the app. */
.finale svg.mark{width:var(--mk);height:var(--mk);overflow:visible;filter:drop-shadow(0 8px 22px rgba(24,12,6,.35))}
.mark .tile{opacity:0}
.mark .pot{transform-box:fill-box;transform-origin:center bottom;opacity:0}
.mark .roof{fill:none;stroke:#EBA957;stroke-width:13;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.mark .chimney{fill:#EBA957;opacity:0}
.mark .roof-fill{opacity:0}
.in .mark .pot{animation:pop .55s cubic-bezier(.2,.9,.3,1.25) both}
.in .mark .r1{animation:draw 1.6s cubic-bezier(.6,0,.2,1) .5s both,fadeout .6s 3.6s forwards}
.in .mark .r2,.in .mark .r3{animation:draw 1.3s cubic-bezier(.6,0,.2,1) 2s both,fadeout .6s 3.6s forwards}
.in .mark .chimney{animation:fadein .4s 3.1s both,fadeout .6s 3.6s forwards}
.in .mark .roof-fill{animation:fadein .6s 3.6s both}
.in .mark .tile{animation:fadein .8s 3.9s both}
@keyframes pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}
@keyframes fadeout{to{opacity:0}}
.finale h2{font-family:var(--serif);font-weight:600;font-size:clamp(34px,9.2vmin,100px);line-height:1.05;letter-spacing:-0.01em;margin:clamp(22px,3vmin,34px) 0 0;max-width:14ch;text-wrap:balance;
  text-shadow:0 2px 28px rgba(240,180,41,.35),0 1px 2px rgba(24,12,6,.5)}
.finale .sub{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(19px,3.1vmin,34px);margin:14px 0 0}
.rise{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
h2.rise{transition-delay:1.1s}.sub.rise{transition-delay:1.4s}.store.rise{transition-delay:1.7s}.small.rise{transition-delay:2s}
.in .rise{opacity:1;transform:none}

.store{display:flex;flex-wrap:wrap;gap:.7em;justify-content:center;margin-top:clamp(28px,4vmin,44px);font-size:clamp(17px,2.1vmin,22px)}
.btn{display:inline-flex;align-items:center;gap:.6em;padding:.95em 1.55em;border-radius:999px;background:var(--on-chrome);color:var(--chrome);text-decoration:none;font-weight:600;font-size:1em;letter-spacing:.01em;
  box-shadow:0 8px 24px rgba(24,12,6,.28);transition:transform .25s ease,box-shadow .25s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(24,12,6,.34)}
.btn svg{width:1.2em;height:1.2em;fill:currentColor;flex:none}
.btn.ember{background:var(--accent);color:var(--on-accent)}
.small{margin:clamp(20px,2.6vmin,28px) 0 0;font-size:clamp(14px,1.75vmin,18px);color:rgba(255,233,214,.8)}
.small a{color:var(--on-chrome)}
.finale footer{margin-top:auto;padding-top:56px}
footer.foot{font-size:13px;color:rgba(255,233,214,.62);display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
footer.foot a{text-decoration:none}
footer.foot a:hover{text-decoration:underline}

/* ── About page: light, three screens of the app ──────────────────────── */
.about{background-color:var(--paper);color:var(--ink);background-repeat:no-repeat;background-image:
  radial-gradient(900px 420px at 10% 0, rgba(255,226,160,.8) 0%, rgba(255,226,160,0) 70%),
  linear-gradient(180deg,#A6C3D8 0,#D9DBD3 260px,var(--paper) 620px)}
.about .top a{color:var(--ink-soft);opacity:.6}
.wrap{width:min(100% - 40px, 960px);margin-inline:auto}
.about-hero{padding:calc(96px + env(safe-area-inset-top,0px)) 0 24px;text-align:center}
.about-hero .eyebrow{font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.8vw,22px);color:var(--ink-soft);margin:0 0 14px}
.about-hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(38px,6vw,76px);line-height:1;letter-spacing:-0.012em;margin:0 auto;max-width:14ch;text-wrap:balance}
.about-hero .mission{font-family:var(--serif);font-style:italic;font-weight:450;font-size:clamp(23px,2.7vw,34px);line-height:1.22;margin:28px auto 0;max-width:24ch;text-wrap:balance;color:var(--ink)}

.feature{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(28px,6vw,88px);align-items:center;padding:88px 0 0}
.feature.flip{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
.feature.flip .phone{order:2}
.phone{margin:0;justify-self:center;width:min(100%,280px);padding:10px;border-radius:46px;background:#1B120B;
  box-shadow:0 34px 80px rgba(80,40,10,.26),0 2px 6px rgba(80,40,10,.18),inset 0 0 0 1px rgba(255,255,255,.08)}
.phone img{display:block;width:100%;height:auto;border-radius:37px;background:var(--paper)}
.feature-text h2{font-family:var(--serif);font-weight:600;font-size:clamp(34px,4.4vw,58px);line-height:1.02;letter-spacing:-0.012em;margin:0 0 16px;text-wrap:balance;color:var(--accent-text)}
.feature-text p{margin:0;max-width:40ch;font-size:clamp(17px,1.35vw,19px);line-height:1.6;color:var(--ink-soft)}

.from{padding:104px 0 0;text-align:center}
.about p.quote{font-family:var(--serif);font-style:italic;font-size:clamp(28px,3.6vw,46px);line-height:1.12;margin:0 auto;color:var(--ink);text-wrap:balance;max-width:22ch}
.about p.quote small{display:block;font-style:normal;font-family:var(--sans);font-size:15px;color:var(--ink-soft);margin-top:12px}
.from p:not(.quote){margin:22px auto 0;max-width:52ch;font-size:clamp(17px,1.35vw,19px);line-height:1.6;color:var(--ink-soft)}

#contact{padding:72px 0 0}
.contact{background:var(--surface);border-radius:18px;padding:22px 24px;box-shadow:0 10px 30px rgba(80,40,10,.08);display:flex;flex-wrap:wrap;gap:14px 36px;align-items:center;justify-content:space-between}
.contact div{font-size:16px;color:var(--ink-soft)}
.contact strong{display:block;font-family:var(--serif);font-weight:600;font-size:20px;color:var(--ink);margin-bottom:2px}
.contact a.mail{font-weight:600;color:var(--accent-text);text-decoration:none;font-size:17px}
.contact a.mail:hover{text-decoration:underline}
.about .finale{margin-top:72px;min-height:auto;padding-top:72px;padding-bottom:28px}
.about .finale h2{font-size:clamp(30px,4.6vw,56px)}

@media (max-width:760px){
  .lines{width:100%;top:auto;bottom:0;height:46%;align-items:start;padding:14px 20px 0}
  .line{font-size:clamp(27px,8vw,38px);max-width:16ch}
  #l4{align-self:center} /* the last line sits a little lower, closer to the app that follows */
  .hero h1{font-size:clamp(40px,12vw,80px);letter-spacing:-0.015em}
  .about-hero{padding-top:calc(84px + env(safe-area-inset-top,0px))}
  .feature,.feature.flip{grid-template-columns:1fr;gap:26px;padding-top:64px;text-align:center}
  .feature .phone,.feature.flip .phone{order:2;width:min(100%,250px)}
  .feature-text p{margin-inline:auto}
  .from{padding-top:80px}
}
@media (prefers-reduced-motion:reduce){
  .hero .cue::after,.chrome-bg .glow{animation:none}
  .rise{transition:none;opacity:1;transform:none}
  .mark .pot,.mark .roof-fill,.mark .tile{animation:none;opacity:1}
  .mark .roof,.mark .chimney{display:none}
}