/* ===== Low Battery Studio — "OS stuck at 1%" ===== */
:root{
  --paper:#F7F1E7;      /* warm bone */
  --paper-2:#FBF6EE;    /* lighter card cream */
  --ink:#17150F;        /* soft warm near-black */
  --ink-70:#4a463c;
  --red1:#E5484D;       /* 1% critical red — the one accent */
  --red-deep:#c23237;
  --charge:#3FB55B;     /* "in stock" green — utility only, never the battery */
  --dim:#8A8578;        /* mono system gray */
  --cloud:#ffffff;
  --line:#E4DAC7;       /* hairline */
  --night:#141210;      /* dark band */
  --r-card:20px;
  --font-display:'Cabinet Grotesk','General Sans',system-ui,sans-serif;
  --font-body:'General Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:.98}
section{position:relative}

/* subtle paper grain for a premium feel */
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* eyebrow = mono system label */
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.eyebrow--dim{color:#a29a89}

/* ===== 🔋 battery chip (fixed size, top-right, reads like a status bar) ===== */
.batt-bar{position:fixed;bottom:16px;right:16px;z-index:9990;display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.86);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:30px;padding:8px 14px;box-shadow:0 4px 14px rgba(23,21,15,.07)}
.batt{display:flex;align-items:center;flex:none}
.batt__body{width:40px;height:20px;border:2px solid var(--ink);border-radius:5px;position:relative;background:#fff}
.batt__fill{position:absolute;left:3px;top:3px;bottom:3px;width:4px;background:var(--red1);border-radius:2px;transition:width .5s ease}
.batt__nub{width:4px;height:9px;background:var(--ink);border-radius:0 2px 2px 0;margin-left:2px}
.batt__pct{font-family:var(--font-mono);font-size:13px;font-weight:500;color:var(--ink);min-width:26px}
.batt__mode{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);min-width:130px}
@media(max-width:760px){.batt__mode{display:none}.batt-bar{padding:7px 11px;bottom:10px;right:10px}}

/* ===== system top bar ===== */
.sysbar{padding:18px 16px 8px;text-align:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

/* ===== header ===== */
.hdr{display:flex;align-items:center;justify-content:space-between;padding:6px 34px 10px;position:sticky;top:0;z-index:900;background:linear-gradient(var(--paper),rgba(247,241,231,.9) 70%,transparent)}
.hdr__logo img{height:70px;width:auto}
@media(max-width:760px){.hdr__logo img{height:54px}}
.hdr__nav{display:flex;align-items:center;gap:26px;font-family:var(--font-mono);font-size:13px;letter-spacing:.04em}
.hdr__nav a{position:relative;padding:4px 0;transition:color .2s}
.hdr__nav a:hover{color:var(--red1)}
.hdr__cart{color:var(--red1)!important}
@media(max-width:760px){.hdr__nav a:not(.hdr__cart){display:none}}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;padding:14px 28px;border-radius:40px;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s,background .2s}
.btn--red{background:var(--red1);color:#fff;box-shadow:0 6px 0 var(--red-deep)}
.btn--red:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--red-deep),0 14px 30px rgba(229,72,77,.35)}
.btn--red:active{transform:translateY(2px);box-shadow:0 3px 0 var(--red-deep)}
.btn--ghost{border:2px solid var(--ink);color:var(--ink)}
.btn--ghost:hover{transform:translateY(-3px);background:var(--ink);color:var(--paper)}

/* ===== hero ===== */
.hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:20px;padding:40px 34px 90px;max-width:1220px;margin:0 auto}
.hero__title{font-size:clamp(3.4rem,9vw,7.2rem)}
.hero__still{color:var(--red1);display:inline-block}
.hero__sub{margin:26px 0 0;max-width:30ch;color:var(--ink-70);font-size:1.05rem}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.hero__meta{margin-top:26px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--dim);display:flex;align-items:center;gap:8px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--charge);box-shadow:0 0 0 4px rgba(63,181,91,.16)}
.hero__art{display:flex;justify-content:center;align-items:center}
.hero__art img{width:min(430px,90%);height:auto;filter:drop-shadow(0 26px 30px rgba(23,21,15,.14));will-change:transform}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;text-align:center;padding-top:16px}
  .hero__sub{margin-inline:auto}.hero__cta,.hero__meta{justify-content:center}
  .hero__art{order:-1;margin-bottom:10px}.hero__art img{width:min(300px,72%)}
}

/* ===== section heads ===== */
.sec-head{max-width:1220px;margin:0 auto;padding:0 34px 26px}
.sec-head h2{font-size:clamp(2rem,5vw,3.4rem)}

/* ===== shop by mood ===== */
.mood{padding:80px 0 40px}
.mood__grid{max-width:1220px;margin:0 auto;padding:0 34px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mood__card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-card);padding:18px;position:relative;transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s}
.mood__card:hover{transform:translateY(-8px);box-shadow:0 22px 40px rgba(23,21,15,.1)}
.mood__tag{position:absolute;top:16px;right:18px;font-family:var(--font-mono);font-size:12px;color:var(--red1)}
.mood__pic{height:190px;border-radius:14px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--font-display);font-weight:800;font-size:1.5rem;line-height:1;letter-spacing:-.01em;color:var(--ink);margin-bottom:16px}
.mood__pic--1{background:#EFE7D6}.mood__pic--2{background:#EAE0CF}.mood__pic--3{background:#F0E3DA;color:var(--red-deep)}
.mood__name{font-family:var(--font-display);font-weight:700;font-size:1.25rem}
.mood__desc{color:var(--ink-70);font-size:.95rem;margin-top:2px}
.mood__sub{max-width:46ch;color:var(--ink-70);margin-top:10px}
.mood__cta{font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;color:var(--red1);margin-top:12px;transition:transform .3s ease}
.mood__card:hover .mood__cta{transform:translateX(5px)}
@media(max-width:820px){.mood__grid{grid-template-columns:1fr;gap:14px}.mood__pic{height:150px}}

/* ===== do not disturb (dark band) ===== */
.dnd{background:var(--night);color:var(--paper);margin-top:60px;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:30px;padding:70px 34px;overflow:hidden}
.dnd__art{width:min(360px,90%);margin:0 auto;filter:drop-shadow(0 0 40px rgba(229,72,77,.25))}
.dnd__copy h2{font-size:clamp(2.4rem,6vw,4rem);color:#fff}
.dnd__copy p{margin:18px 0 26px;max-width:34ch;color:#b9b1a3}
@media(max-width:820px){.dnd{grid-template-columns:1fr;text-align:center}.dnd__copy p{margin-inline:auto}.dnd .btn{margin:0 auto}}

/* ===== best sellers ===== */
.best{padding:90px 0 40px}
.best__grid{max-width:1220px;margin:0 auto;padding:0 34px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.prod{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.prod:hover{transform:translateY(-6px)}
.prod__pic{height:230px;border-radius:16px;border:1px solid var(--line);background:var(--cloud);display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--font-display);font-weight:800;font-size:1.35rem;line-height:1.02;color:var(--ink);transition:box-shadow .35s}
.prod:hover .prod__pic{box-shadow:0 18px 34px rgba(23,21,15,.12)}
.prod__pic--b{color:var(--red-deep)}.prod__pic--c{background:#F4ECE0}.prod__pic--d{background:#FBF6EE}
.prod__row{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;font-family:var(--font-mono);font-size:13px}
.prod__price{color:var(--red1);font-weight:500}
@media(max-width:900px){.best__grid{grid-template-columns:repeat(2,1fr)}}

/* ===== story ===== */
.story{padding:110px 34px;text-align:center}
.story__inner{max-width:760px;margin:0 auto}
.story h2{font-size:clamp(2.4rem,7vw,4.6rem);margin:6px 0 0}
.story h2::after{content:"";display:block;width:120px;height:5px;background:var(--red1);border-radius:3px;margin:22px auto 0}
.story p{margin:26px auto 0;max-width:52ch;color:var(--ink-70)}
.story__sign{margin-top:26px;font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;color:var(--dim)}

/* ===== footer ===== */
.ft{border-top:1px solid var(--line);padding:40px 290px 40px 34px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media(max-width:760px){.ft{padding:34px 120px 34px 20px}}
.ft__logo{height:54px;width:auto}
.ft__mono{font-family:var(--font-mono);font-size:12px;color:var(--dim)}

/* ===== real product image tiles (full product, no crop) ===== */
.mood__pic,.prod__pic{padding:10px;overflow:hidden;background:#fff}
.mood__pic img,.prod__pic img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.mood__card:hover .mood__pic img,.prod:hover .prod__pic img{transform:scale(1.04)}

/* ===== SVG mascot (the living little guy) ===== */
.hero__art svg{width:min(430px,94%);height:auto;overflow:visible;filter:drop-shadow(0 22px 26px rgba(23,21,15,.13));cursor:default}
.eye{transform-box:fill-box;transform-origin:center}
#bubble{transform-box:fill-box;transform-origin:50% 100%}

/* ===== boot screen ===== */
.boot{position:fixed;inset:0;z-index:10000;background:var(--paper);display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.boot__logo{height:46px;width:auto}
.boot__row{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:13px;color:var(--ink)}
.boot__batt{width:110px;height:14px;border:2px solid var(--ink);border-radius:4px;position:relative;display:inline-block}
.boot__batt::after{content:"";position:absolute;right:-6px;top:2px;width:4px;height:6px;background:var(--ink);border-radius:0 2px 2px 0}
.boot__fill{position:absolute;left:2px;top:2px;bottom:2px;width:0;background:var(--red1);border-radius:2px;display:block}
.boot__txt{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* ===== hero words + watermark ===== */
html.gs .hero__title .w{opacity:0}
.hero__title .w{display:inline-block;will-change:transform}
.hero{isolation:isolate}
.hero::after{content:"1%";position:absolute;z-index:-1;right:-3%;top:0;font-family:var(--font-mono);font-weight:500;font-size:min(30vw,420px);line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(23,21,15,.055);pointer-events:none}
@media(max-width:900px){.hero::after{display:none}}

/* ===== tape marquee ===== */
.tape{background:var(--ink);color:var(--paper);overflow:hidden;padding:13px 0;transform:rotate(-1.4deg) scale(1.03);margin:34px 0 -4px}
.tape__track{display:flex;white-space:nowrap;width:max-content;animation:tape 26s linear infinite;font-family:var(--font-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.tape:hover .tape__track{animation-play-state:paused}
@keyframes tape{to{transform:translateX(-50%)}}

/* ===== category index (hover shows floating thumb) ===== */
.cats{padding:90px 0 30px;position:relative}
.cats__list{max-width:1220px;margin:0 auto;padding:0 34px;display:flex;flex-direction:column}
.cat{display:grid;grid-template-columns:56px 1fr auto 44px;align-items:baseline;gap:18px;padding:20px 10px;border-top:1px solid var(--line);position:relative;transition:padding .3s ease,background .3s ease}
.cat:last-child{border-bottom:1px solid var(--line)}
.cat__i{font-family:var(--font-mono);font-size:12px;color:var(--dim)}
.cat__n{font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,3.4vw,2.5rem);letter-spacing:-.01em;line-height:1;color:var(--ink)}
.cat__m{font-family:var(--font-mono);font-size:12px;color:var(--dim);letter-spacing:.06em}
.cat__m--soon{color:var(--red1)}
.cat__a{font-size:1.3rem;justify-self:end;transition:transform .3s ease;color:var(--ink)}
.cat:hover{background:rgba(255,255,255,.55);padding-left:24px}
.cat:hover .cat__a{transform:translateX(6px)}
.cat--soon .cat__n{color:#8f887a}
.cats__thumb{position:fixed;left:-300px;top:-300px;width:150px;height:150px;border-radius:14px;overflow:hidden;pointer-events:none;z-index:950;opacity:0;transform:translate(-50%,-60%) rotate(3deg);transition:opacity .22s ease;box-shadow:0 18px 40px rgba(23,21,15,.18);border:1px solid var(--line);background:#fff}
.cats__thumb img{width:100%;height:100%;object-fit:contain;padding:6px;background:#fff}
.cats__thumb.show{opacity:1}
@media(max-width:640px){.cat{grid-template-columns:34px 1fr auto;gap:12px}.cat__a{display:none}}

/* ===== collection page ===== */
.chead{padding:26px 0 6px}
.chead h1{font-size:clamp(3rem,8vw,5.6rem)}
.cmeta{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--dim);margin-top:14px}
.cpills{max-width:1220px;margin:18px auto 8px;padding:0 34px;display:flex;flex-wrap:wrap;gap:10px}
.cpill{font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;padding:9px 16px;border:1.5px solid var(--line);border-radius:30px;background:#fff;transition:all .25s ease}
.cpill:hover{border-color:var(--ink);transform:translateY(-2px)}
.cpill--on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cpill--soon{color:var(--dim)}
.cempty{max-width:560px;margin:30px auto 40px;text-align:center;padding:0 24px}
.cempty img{width:150px;margin:0 auto 18px;filter:drop-shadow(0 14px 18px rgba(23,21,15,.12))}
.cempty h2{font-size:clamp(1.6rem,4vw,2.4rem)}
.cempty p{color:var(--ink-70);margin-top:12px}
.cempty a{color:var(--red1);text-decoration:underline}

/* ===== product page ===== */
.crumb{max-width:1220px;margin:10px auto 0;padding:0 34px;font-family:var(--font-mono);font-size:12px;color:var(--dim)}
.crumb a:hover{color:var(--red1)}
.crumb span{color:var(--ink)}
.pp{max-width:1220px;margin:0 auto;padding:26px 34px 30px;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
.pp__pic{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;display:flex;align-items:center;justify-content:center}
.pp__pic img{width:100%;height:auto;max-height:620px;object-fit:contain}
.pp__info{position:sticky;top:20px}
.pp__info h1{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.pp__price{font-family:var(--font-mono);font-size:1.35rem;font-weight:500;color:var(--red1);margin-top:14px}
.pp__desc{color:var(--ink-70);margin-top:16px;max-width:46ch}
.pp__lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);width:100%;margin-bottom:2px}
.pp__sizes{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 6px}
.szp{font-family:var(--font-mono);font-size:13px;min-width:46px;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;transition:all .2s ease}
.szp:hover{border-color:var(--ink)}
.szp--on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pp .btn--red{margin-top:20px;width:100%;max-width:340px}
.pp__meta{margin-top:18px;font-family:var(--font-mono);font-size:12px;color:var(--dim);display:flex;align-items:center;gap:8px}
.pp__acc{border-top:1px solid var(--line);margin-top:16px;padding-top:14px;max-width:420px}
.pp__acc summary{font-family:var(--font-mono);font-size:13px;cursor:pointer;letter-spacing:.04em}
.pp__acc summary::marker{color:var(--red1)}
.pp__acc p{color:var(--ink-70);font-size:.95rem;margin-top:10px}
@media(max-width:900px){.pp{grid-template-columns:1fr;gap:26px}.pp__info{position:static}}

/* ===== eyebrow typewriter caret ===== */
.eyebrow.is-typing::after{content:"▍";color:var(--red1);animation:caret 1s steps(1) infinite;margin-left:2px}
@keyframes caret{50%{opacity:0}}

/* ===== custom cursor ===== */
.cur,.cur2{position:fixed;left:-100px;top:-100px;pointer-events:none;border-radius:50%;z-index:9999;transform:translate(-50%,-50%)}
.cur{width:7px;height:7px;background:var(--red1)}
.cur2{width:34px;height:34px;border:1.5px solid rgba(229,72,77,.5);transition:width .25s ease,height .25s ease,border-color .25s ease}
.cur2--on{width:58px;height:58px;border-color:var(--red1)}

/* ===== 3D cards (JS-driven on fine pointers) ===== */
html.gs .mood__card,html.gs .prod{transform-style:preserve-3d}
html.gs .mood__card:hover,html.gs .prod:hover{transform:none}

/* ===== dnd glow + zzz ===== */
.dnd__fig{position:relative;display:flex;justify-content:center;align-items:center}
.dnd__glow{position:absolute;width:72%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(229,72,77,.30),transparent 62%);filter:blur(4px);opacity:.5}
.dnd__art{position:relative;z-index:1}
.zzz{position:absolute;font-family:var(--font-mono);color:#cfc7b8;opacity:0;pointer-events:none;z-index:2}

/* ===== reveal (IntersectionObserver-driven, self-healing) ===== */
html.anim .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .85s cubic-bezier(.22,1,.36,1)}
html.anim .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html.anim .reveal{opacity:1!important;transform:none!important;transition:none}
  .btn,.mood__card,.prod,.hero__art img{transition:none}
}