/* Burgundy and beige, as light and gradient rather than flat fills. */
@font-face{font-family:Manrope;src:url(assets/fonts/manrope.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:Brush;src:url(assets/fonts/alex-brush.woff2) format("woff2");font-display:swap}
:root{--b:#501216;--c:#fff8f5;--dim:rgba(255,246,245,.72);--line:rgba(255,255,255,.16);--grad:linear-gradient(115deg,#fff 0%,#ffe1da 45%,#efe1ce 100%);--tabs:64px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{background:radial-gradient(120% 90% at 20% 10%,#8a1f25,#501216 55%,#210609);color:var(--c);font:400 17px/1.5 Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
h1,h2,h3,p,ol,ul{margin:0;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
a{color:inherit}
:focus-visible{outline:2px solid var(--c);outline-offset:3px}
.i{width:1.4em;height:1.4em;fill:currentColor;flex:none}
#field{position:fixed;inset:0;width:100%;height:100%;display:block}
#view{position:fixed;inset:0;z-index:1}
.gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* glass, with a soft light that follows the finger */
.glass{position:relative;background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid var(--line);overflow:hidden}
.glass::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.2),transparent 70%)}
.glass:hover::after,.glass.lit::after{opacity:1}

/* tabs */
.tabs{position:fixed;z-index:6;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);display:grid;grid-template-columns:repeat(3,minmax(92px,1fr));height:var(--tabs);padding:6px;border-radius:999px;background:rgba(44,9,12,.82);border:1px solid var(--line);}
.blob{position:absolute;left:6px;top:6px;bottom:6px;width:calc((100% - 12px)/3);border-radius:999px;background:var(--grad)}
.tab{position:relative;font-size:.92rem;font-weight:600;transition:color .3s;padding:0 12px;white-space:nowrap}
.tab.on{color:var(--b)}

/* home */
.home{position:absolute;inset:0;pointer-events:none}
.logo{position:fixed;z-index:5;left:50%;top:calc(12px + env(safe-area-inset-top));width:58px;height:58px;margin-left:-29px;background:var(--grad);-webkit-mask:url(assets/logo.png) center/contain no-repeat;mask:url(assets/logo.png) center/contain no-repeat;pointer-events:none}
.home-top{position:absolute;inset:calc(74px + env(safe-area-inset-top)) 12px auto;text-align:center}
.names{display:inline-block;font:400 clamp(2.5rem,9vw,4.8rem)/1.15 Brush;white-space:nowrap;padding:.08em .14em .12em}
.when{font-weight:500;color:var(--dim);margin-top:2px}
.home-low{position:absolute;left:16px;right:16px;bottom:calc(var(--tabs) + 30px + env(safe-area-inset-bottom));display:grid;justify-items:center;gap:12px;text-align:center}
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:min(420px,100%);pointer-events:auto}
.count button{border-radius:20px;padding:12px 2px 10px;font-variant-numeric:tabular-nums lining-nums}
.count b{display:block;font-weight:300;font-size:clamp(1.7rem,6vw,2.2rem);line-height:1.1}
.count span{font-size:.72rem;color:var(--dim)}
.tag{pointer-events:auto;padding:9px 18px;border-radius:999px;font-weight:600;font-size:.98rem}
.hint{font-size:.85rem;color:var(--dim);transition:opacity .6s}
.credit{pointer-events:auto;font-size:.78rem;color:var(--dim);text-underline-offset:3px}

/* letters that jump when touched */
.ch{display:inline-block;will-change:transform;white-space:pre}

/* the week */
.week{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr;padding-top:calc(70px + env(safe-area-inset-top))}
.week-head{padding:0 24px 6px}
h1.big{font-weight:300;font-size:clamp(2.8rem,8vw,4.2rem);line-height:1.1;letter-spacing:-.03em;padding-bottom:.08em}
.week-head p{color:var(--dim)}
.deck{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:18px 9vw calc(var(--tabs) + 40px);scrollbar-width:none;perspective:1200px}
.deck::-webkit-scrollbar{display:none}
.card{flex:0 0 min(82vw,400px);scroll-snap-align:center;border-radius:32px;padding:26px;display:grid;grid-template-rows:1fr auto;text-align:left;will-change:transform}
.num{display:block;width:max-content;font-weight:200;font-size:clamp(7rem,30vw,11rem);line-height:1;letter-spacing:-.04em;font-variant-numeric:lining-nums;padding:0 .08em .06em 0}
.card .day{display:block;font-weight:600;margin-top:4px}
.card h2{font-weight:400;font-size:clamp(1.8rem,6vw,2.3rem);line-height:1.12;letter-spacing:-.02em}
.card .meta{display:block;margin-top:8px;color:var(--dim)}
.card .open{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:600;font-size:.95rem}

/* one function */
.sheet{position:fixed;inset:0;z-index:20;overflow-y:auto;overscroll-behavior:contain;visibility:hidden;padding:calc(20px + env(safe-area-inset-top)) 20px 60px;background:rgba(48,10,14,.95);}
.sheet-in{max-width:620px;margin:0 auto}
.close{display:inline-flex;align-items:center;gap:6px;padding:11px 18px 11px 14px;border-radius:999px;font-weight:600}
.sheet .num{font-size:clamp(5.5rem,22vw,8rem);margin-top:16px}
.sheet h1{font-weight:300;font-size:clamp(2.4rem,9vw,3.6rem);line-height:1.1;letter-spacing:-.03em}
.sub{color:var(--dim);margin-top:10px}
.about{font-size:1.14rem;margin-top:16px}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0 32px}
.act{display:flex;align-items:center;justify-content:center;gap:8px;min-height:58px;padding:0 12px;border-radius:20px;font-weight:600;text-decoration:none;position:relative;overflow:hidden}
.act.main{background:var(--grad);color:var(--b)}
.act:only-child{grid-column:1/-1}
.steps h2{font-weight:400;font-size:1.5rem;letter-spacing:-.02em;margin-bottom:12px}
.step{display:flex;align-items:center;gap:16px;width:100%;padding:15px 18px;margin-bottom:8px;border-radius:20px;text-align:left;transition:background .35s,color .35s}
.step b{font-weight:200;font-size:1.9rem;line-height:1;width:1.2em;font-variant-numeric:lining-nums}
.step span{font-size:1.14rem;font-weight:500;line-height:1.25}
.step small{display:block;font-size:.92rem;font-weight:400;color:var(--dim)}
.step.done{background:var(--grad);color:var(--b)}
.step.done small{color:inherit}

/* more */
.more{position:absolute;inset:0;overflow-y:auto;padding:calc(74px + env(safe-area-inset-top)) 20px calc(var(--tabs) + 44px)}
.more-in{max-width:620px;margin:0 auto}
.more h1{margin-bottom:18px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:18px 16px;border-radius:22px;text-align:left;font-weight:600;line-height:1.2}
.tile small{display:block;font-weight:400;font-size:.82rem;color:var(--dim);margin-top:2px}
.studio{display:block;margin-top:12px;padding:22px;border-radius:24px;background:var(--grad);color:var(--b);text-decoration:none}
.studio b{display:block;font-weight:600;font-size:1.3rem;line-height:1.2}
.studio span{display:block;margin-top:6px}

@media (min-width:760px){
  .deck{padding-inline:calc(50vw - 200px)}
}