/* ============================================================
   Apart — shared site styles (dark editorial system)
   Inspired by gsap.com's dark canvas + Slush's sticker collage,
   carried by Apart's own palette and Fraunces serif.
   ============================================================ */
:root {
  --canvas:#12110F;
  --panel:#1D1C1A;
  --cream:#F4EFE6;
  --cream-70:rgba(244,239,230,.72);
  --cream-50:rgba(244,239,230,.5);
  --hairline:rgba(244,239,230,.14);
  --bone:#F4EFE6; --bone-2:#ECE5D2;
  --ink:#1A1A19; --ink-2:#2A2A28;
  --clay:#B85B3F; --clay-lt:#D87C68; --peach:#F8C8A0; --pale-clay:#F4DBC7;
  --sage:#5E7561; --sage-lt:#A9C4A0; --sage-200:#C9D4C2;
  --olive:#6B6B3A; --gold:#C9B458; --amber:#D8A86B;
  --serif:'Fraunces',serif;
  --sans:'Inter',-apple-system,sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:var(--sans); color:var(--cream); background:var(--canvas);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
img, svg { display:block; max-width:100%; }
button { font:inherit; cursor:pointer; border:0; background:transparent; }
::selection { background:var(--clay); color:var(--cream); }

.grain {
  position:fixed; inset:-50%; width:200%; height:200%; z-index:120; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.progress {
  position:fixed; top:0; left:0; right:0; height:3px; z-index:140;
  background:linear-gradient(90deg, var(--clay), var(--peach));
  transform:scaleX(0); transform-origin:left center;
}
@media (max-width:760px){ .progress { display:none; } }

/* ---------- Type ---------- */
.serif { font-family:var(--serif); }
.display { font-family:var(--serif); font-weight:600; letter-spacing:-0.04em; line-height:0.95; color:var(--cream); }
.h-hero { font-size:clamp(58px, 11.5vw, 185px); }
.h-mega { font-size:clamp(52px, 11vw, 170px); }
.h-huge { font-size:clamp(42px, 7.6vw, 116px); }
.h-big  { font-size:clamp(34px, 5.4vw, 76px); }
.h-mid  { font-size:clamp(26px, 3.6vw, 48px); line-height:1.05; }
.em { font-style:italic; font-weight:500; }
.body-lead { font-size:clamp(17px, 1.5vw, 21px); line-height:1.55; color:var(--cream-70); max-width:560px; }
.dot { color:var(--clay-lt); }

/* Curly-brace eyebrow — the gsap.com signature, Apart-toned.
   Braces are stroked SVG masks that stretch to the text block's height,
   so they hug one line or many, like gsap.com's hero braces. */
.brace {
  display:inline-flex; align-items:center; gap:14px;
  font-size:15px; font-weight:500; color:var(--cream-70); letter-spacing:0.01em;
}
.brace::before, .brace::after {
  content:''; flex:none; align-self:stretch;
  width:0.9em; min-height:1.9em; margin:-0.28em 0;
  background:var(--peach);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 80' preserveAspectRatio='none'%3E%3Cpath d='M17 3 C11.5 3 10 8 10 16 L10 29 C10 36 8 38.2 4 40 C8 41.8 10 44 10 51 L10 64 C10 72 11.5 77 17 77' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 80' preserveAspectRatio='none'%3E%3Cpath d='M17 3 C11.5 3 10 8 10 16 L10 29 C10 36 8 38.2 4 40 C8 41.8 10 44 10 51 L10 64 C10 72 11.5 77 17 77' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.brace::after { transform:scaleX(-1); }
@media (max-width:760px){ .brace { gap:7px; } }

/* Category color words (taxonomy) */
.cat { font-weight:600; font-size:clamp(20px,2vw,27px); letter-spacing:-0.01em; }
.cat-track { color:var(--peach); }
.cat-log   { color:var(--clay-lt); }
.cat-cook  { color:var(--sage-lt); }
.cat-body  { color:var(--gold); }
.cat-guide { color:var(--sage-200); }

/* ---------- Layout ---------- */
.wrap { max-width:1320px; margin:0 auto; padding:0 32px; }
section { position:relative; }

/* ---------- Slush-style header: announcement marquee + pill nav ---------- */
.announce {
  background:linear-gradient(90deg, var(--clay), #9F4D34);
  overflow:hidden; height:38px; display:flex; align-items:center;
}
.announce-track {
  display:flex; gap:56px; white-space:nowrap; width:max-content; align-items:center;
  font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--cream);
  animation:announce 26s linear infinite;
}
.announce-track .sep { font-size:14px; letter-spacing:0; transform:translateY(-1px); }
@keyframes announce { to { transform:translateX(-50%); } }

.nav-slush {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  max-width:1380px; margin:0 auto; padding:22px 32px;
}
.logo { font-family:var(--serif); font-weight:600; font-size:27px; letter-spacing:-0.02em; color:var(--cream); }
.nav-right { display:flex; align-items:center; gap:10px; }
.pill-row { display:flex; gap:10px; }
.nav-pill {
  padding:13px 24px; border-radius:999px; border:1.5px solid var(--cream);
  font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--cream); background:transparent;
  transition:background .18s, color .18s, transform .18s;
}
.nav-pill:hover { background:var(--cream); color:var(--ink); transform:translateY(-2px); }
.nav-pill.active { background:var(--cream); color:var(--ink); }
.pill-fill {
  padding:14px 26px; border-radius:999px; background:var(--cream); color:var(--ink);
  font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  border:1.5px solid var(--cream);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.pill-fill:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(244,239,230,.15); }
@media (max-width:760px){ .pill-row, .site-head .pill-fill { display:none; } }

/* ---------- Mobile menu ---------- */
.menu-btn { display:none; }
@media (max-width:760px){
  .menu-btn {
    display:inline-flex; align-items:center; gap:11px;
    padding:13px 20px 13px 24px; border-radius:999px; border:1.5px solid var(--cream);
    font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    color:var(--cream);
  }
  .menu-btn .mb-bars { display:flex; flex-direction:column; gap:4px; }
  .menu-btn .mb-bars i { display:block; width:20px; height:2px; border-radius:2px; background:var(--cream); }
}
.mobile-menu {
  position:fixed; inset:0; z-index:200; background:var(--canvas);
  display:flex; flex-direction:column; justify-content:center; padding:32px 36px;
  opacity:0; pointer-events:none; transition:opacity .28s ease;
}
.mobile-menu.open { opacity:1; pointer-events:auto; }
.mobile-menu .mm-link {
  font-family:var(--serif); font-weight:600; letter-spacing:-0.02em;
  font-size:42px; line-height:1; color:var(--cream); padding:16px 0;
  opacity:0; transform:translateY(20px); transition:opacity .4s ease, transform .4s ease;
}
.mobile-menu.open .mm-link { opacity:1; transform:none; }
.mobile-menu.open .mm-link:nth-child(2) { transition-delay:.05s; }
.mobile-menu.open .mm-link:nth-child(3) { transition-delay:.1s; }
.mobile-menu.open .mm-link:nth-child(4) { transition-delay:.15s; }
.mobile-menu .mm-link.on { color:var(--clay-lt); }
.mobile-menu .mm-link.mm-cta { color:var(--peach); }
.mm-close {
  position:absolute; top:20px; right:24px; width:46px; height:46px;
  border-radius:999px; border:1.5px solid var(--cream); color:var(--cream);
}
.mm-close::before, .mm-close::after {
  content:''; position:absolute; left:50%; top:50%; width:18px; height:2px;
  border-radius:2px; background:var(--cream);
}
.mm-close::before { transform:translate(-50%,-50%) rotate(45deg); }
.mm-close::after  { transform:translate(-50%,-50%) rotate(-45deg); }

/* Gradient-stroked CTA pill (the one chromatic control) */
.pill-cta {
  position:relative; display:inline-flex; align-items:center; gap:9px;
  padding:12px 24px; border-radius:100px;
  font-size:15px; font-weight:600; color:var(--cream);
  background:
    linear-gradient(var(--canvas), var(--canvas)) padding-box,
    linear-gradient(114deg, var(--clay) 20%, var(--peach) 70%) border-box;
  border:1.6px solid transparent;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.pill-cta:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(184,91,63,.25); }
.pill-cta:active { transform:scale(.97); }

/* Outlined cream ghost pill */
.pill-ghost {
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 26px; border-radius:100px;
  font-size:16px; font-weight:600; color:var(--cream);
  border:1px solid var(--cream);
  transition:background .2s, color .2s, transform .2s;
}
.pill-ghost:hover { background:var(--cream); color:var(--ink); transform:translateY(-2px); }

/* ---------- Stickers ---------- */
.sticker { display:inline-block; }
.sticker svg { width:100%; height:100%; overflow:visible; }

/* ---------- Tool rows (gsap.com Tools pattern) ---------- */
.rows { border-top:1px solid var(--hairline); }
.row {
  display:grid; grid-template-columns:440px 1fr; gap:64px; align-items:center;
  padding:96px 0; border-bottom:1px solid var(--hairline); position:relative;
}
@media (max-width:920px){ .row { grid-template-columns:1fr; gap:40px; padding:72px 0; } }
.row-visual {
  position:relative; min-height:300px;
  display:flex; align-items:center; justify-content:center;
}
.row-copy .cat { display:block; margin-bottom:26px; }
.row-copy h3 {
  font-family:var(--serif); font-weight:600; letter-spacing:-0.03em; line-height:1.05;
  font-size:clamp(30px, 3.8vw, 54px); color:var(--cream); max-width:640px;
}
.row-copy p { margin-top:22px; font-size:clamp(16px,1.4vw,20px); line-height:1.55; color:var(--cream-70); max-width:560px; }
.row-copy .pill-ghost { margin-top:30px; }

/* ---------- Phone frame ---------- */
.phone-stage { width:100%; aspect-ratio:402/874; position:relative; }
.app-phone {
  position:absolute; inset:0;
  background:linear-gradient(135deg, #2A2A28 0%, #1A1A19 40%, #0F0F0E 100%);
  border-radius:13%/6.2%;
  padding:2.8%;
  box-shadow:
    0 40px 100px rgba(0,0,0,.5),
    0 12px 30px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(244,239,230,.08);
  will-change:transform;
}
.app-phone::after {
  content:''; position:absolute; inset:0; border-radius:13%/6.2%;
  pointer-events:none; box-shadow:inset 0 0 0 1px rgba(244,239,230,.06);
}
.app-screen {
  width:100%; height:100%; background:var(--bone);
  border-radius:11%/5.3%; overflow:hidden; position:relative;
}
.app-screen img { width:100%; height:100%; object-fit:cover; }

/* ---------- Marquee ---------- */
.marquee-band { padding:24px 0; overflow:hidden; position:relative; }
.marquee-track { display:flex; gap:52px; white-space:nowrap; width:max-content; will-change:transform; }
.marquee-item {
  display:inline-flex; align-items:center; gap:20px;
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(24px, 3.2vw, 44px); letter-spacing:-0.02em;
}
.marquee-item .pip { display:inline-block; width:11px; height:11px; border-radius:99px; background:var(--clay-lt); flex-shrink:0; }

/* ---------- Footer ---------- */
.footer { background:var(--panel); border-top:1px solid var(--hairline); padding:88px 0 36px; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:flex-end; padding-bottom:48px; }
@media (max-width:720px){ .footer-grid { grid-template-columns:1fr; } }
.footer-quote { font-family:var(--serif); font-weight:500; font-size:clamp(21px,2.4vw,28px); line-height:1.3; letter-spacing:-0.015em; max-width:520px; margin-top:20px; color:var(--cream); }
.footer-side { display:flex; flex-direction:column; gap:18px; align-items:flex-end; }
@media (max-width:720px){ .footer-side { align-items:flex-start; } }
.footer-links { display:flex; gap:22px; font-size:15px; color:var(--cream-70); }
.footer-links a:hover { color:var(--cream); }
.footer-socials { display:flex; gap:10px; }
.soc {
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--hairline); color:var(--cream);
  transition:transform .18s, background .2s, color .2s, border-color .2s;
}
.soc:hover { background:var(--cream); color:var(--ink); border-color:var(--cream); transform:translateY(-2px); }
.footer-contact { font-family:var(--serif); font-weight:500; font-size:18px; color:var(--clay-lt); }
.footer-base { border-top:1px solid var(--hairline); padding-top:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; font-size:12.5px; color:var(--cream-50); }

/* ---------- Store badges ---------- */
.store-row { display:flex; gap:12px; flex-wrap:wrap; }
.store-btn {
  display:inline-flex; align-items:center; gap:12px;
  padding:13px 22px; border-radius:999px;
  background:var(--cream); color:var(--ink);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.store-btn:hover { transform:translateY(-3px) scale(1.03); box-shadow:0 12px 30px rgba(0,0,0,.35); }
.store-text { display:flex; flex-direction:column; line-height:1.1; text-align:left; }
.store-text .small { font-size:10px; opacity:.7; }
.store-text .big { font-size:16px; font-weight:600; letter-spacing:-0.01em; }

/* ---------- Custom cursor: inverting cream orb ---------- */
html.cursor-on, html.cursor-on a, html.cursor-on button { cursor:none; }
.cursor-orb {
  position:fixed; top:0; left:0; width:26px; height:26px; border-radius:50%;
  background:#F4EFE6; mix-blend-mode:difference;
  pointer-events:none; z-index:400; opacity:0;
}

/* ---------- Reveal defaults (JS-driven) ---------- */
.js [data-reveal] { opacity:0; transform:translateY(34px); }
.js [data-fade] { opacity:0; }
/* Hidden until SplitText has prepared them — prevents the flash-then-vanish
   on page load. JS flips visibility right before animating. */
.js [data-lines], .js [data-pop-title] { visibility:hidden; }
.js .site-head { visibility:hidden; }
/* Generous mask padding so Fraunces ascenders (f, l) and italic overhangs
   aren't clipped by the line masks. */
.lm-w { overflow:hidden; padding:.22em .12em .18em; margin:-.22em -.12em -.18em; }
.hl-mask { display:block; overflow:hidden; padding:.22em .12em .18em; margin:-.22em -.12em -.18em; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-fade] { opacity:1 !important; transform:none !important; }
  .js [data-lines], .js [data-pop-title], .js .site-head { visibility:visible !important; }
  .announce-track { animation:none; }
  * { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}