/* mobile overflow guard */
html,body{overflow-x:hidden;}
/* ============================================================
   WINE GLASS — base / reset / shared primitives
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
html,body{overflow-x:hidden;background:var(--bg);color:var(--fg);}
/* force normal cursor (defends against inherited Webflow cursor:none) */
html,body,*,*::before,*::after{cursor:auto;}
a,button,[role="button"],summary,label[for]{cursor:pointer;}

body{
  font-family:var(--font-ui);
  font-size:var(--t-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,video{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:rgba(240,192,204,0.3);color:#fff;}

/* ---- Layout helpers ---- */
.wrap{max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter);}
.wrap-text{max-width:var(--measure-text);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:var(--sp-7);}
@media(max-width:880px){.section{padding-block:var(--sp-6);}}

/* ---- Type primitives ---- */
.eyebrow{
  font-family:var(--font-ui);
  font-size:var(--t-label);
  letter-spacing:var(--label-track);
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
  white-space:nowrap;
  display:inline-flex;align-items:center;gap:0.6rem;
}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor;display:inline-block;flex:none;}
.eyebrow.is-dim{color:var(--fg-faint);}

.display-grad{
  font-family:var(--font-display);
  font-weight:900;
  letter-spacing:-0.015em;
  line-height:0.98;
  background:var(--grad-head);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.serif{font-family:var(--font-serif);font-weight:400;}
.serif-i{font-family:var(--font-serif);font-style:normal;font-weight:400;}

h1,h2,h3{text-wrap:balance;}
p{text-wrap:pretty;}

/* ---- Hover ink-fill sweep (rose flood follows the cursor) ---- */
.hovfill{position:relative;}
.hovfill .hf-clone{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:var(--grad-head-soft);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  clip-path:inset(-0.3em 100% -0.3em 0);
  transition:clip-path .55s var(--ease-out-expo);
}
.hovfill:hover .hf-clone{transition:clip-path .1s linear;}
.hovfill .hf-clone em{background:none !important;-webkit-text-fill-color:transparent;color:transparent;animation:none !important;transition:none !important;}
.hovfill .hf-clone em::after{content:none !important;}
/* glimmer overlay is a single-line copy — remove it when the accent phrase wraps */
em[data-text].is-wrapped::after{content:none !important;animation:none !important;}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:0.6rem;
  font-family:var(--font-display);
  font-size:0.8rem;letter-spacing:0.05em;text-transform:lowercase;font-weight:600;white-space:nowrap;
  padding:0.95rem 1.9rem;border-radius:var(--r-pill);
  border:1px solid transparent;
  transition:transform var(--dur-fast) var(--ease-out-expo),
             box-shadow var(--dur-fast) var(--ease-out-expo),
             background var(--dur-fast) ease,color var(--dur-fast) ease,
             border-color var(--dur-fast) ease;
}
.btn svg{width:14px;height:14px;}
.btn-primary{background:var(--grad-pill);color:var(--cream-100);box-shadow:var(--glow-rose);}
.btn-primary:hover{transform:translateY(-3px);box-shadow:var(--glow-rose-strong);}
.btn-ghost{
  background:rgba(255,255,255,0.03);
  color:var(--fg-dim);
  border-color:rgba(255,255,255,0.2);
  backdrop-filter:blur(var(--bl8));-webkit-backdrop-filter:blur(var(--bl8));
}
.btn-ghost:hover{color:var(--accent-bright);border-color:var(--hairline-strong);background:rgba(240,192,204,0.08);transform:translateY(-3px);}

/* ---- Pills / chips → WINE JELLY DROPLETS ---- */
.pill{
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;
  padding:0.5rem 1.05rem;border-radius:var(--r-pill);
  font-family:var(--font-ui);font-size:0.74rem;letter-spacing:0.03em;white-space:nowrap;
  color:var(--rose-50);
  background:linear-gradient(152deg,rgba(196,116,139,0.30) 0%,rgba(122,40,64,0.34) 52%,rgba(58,24,40,0.40) 100%);
  border:1px solid rgba(240,192,204,0.30);
  backdrop-filter:blur(var(--bl8)) saturate(1.5);-webkit-backdrop-filter:blur(var(--bl8)) saturate(1.5);
  box-shadow:inset 0 1.5px 1px rgba(255,245,240,0.5),inset 0 -7px 14px rgba(42,15,28,0.55),0 6px 16px rgba(20,4,9,0.35);
  transition:box-shadow var(--dur-fast) ease,color var(--dur-fast) ease;
}
/* glossy specular cap */
.pill::before{
  content:"";position:absolute;top:1px;left:10%;right:10%;height:46%;
  border-radius:0 0 60% 60% / 0 0 100% 100%;
  background:linear-gradient(rgba(255,245,240,0.6),rgba(255,245,240,0));
  opacity:0.85;pointer-events:none;z-index:-1;
}
.pill:hover{
  animation:jelly-squish 0.55s var(--ease-out-back);
  color:#fff;
  box-shadow:inset 0 1.5px 1px rgba(255,245,240,0.65),inset 0 -7px 16px rgba(42,15,28,0.6),0 10px 26px rgba(196,116,139,0.45);
}
@keyframes jelly-squish{
  0%{transform:scale(1,1);}
  28%{transform:scale(1.14,0.84);}
  52%{transform:scale(0.94,1.08);}
  74%{transform:scale(1.04,0.97);}
  100%{transform:scale(1,1);}
}
@media(prefers-reduced-motion:reduce){.pill:hover{animation:none;}}

/* ---- "Live status" spec block ---- */
.spec{
  display:flex;flex-direction:column;max-width:440px;margin-top:0.4rem;
  border-left:1.5px solid transparent;
  border-image:linear-gradient(180deg,rgba(240,192,204,0.6),rgba(240,192,204,0.05)) 1;
  padding-left:1.3rem;
}
.spec-row{
  position:relative;display:grid;grid-template-columns:104px 1fr;gap:1rem;align-items:baseline;
  padding:0.62rem 0;transition:transform .35s var(--ease-out-expo);
}
.spec-row + .spec-row{border-top:1px solid rgba(240,192,204,0.1);}
.spec-row dt{
  font-family:var(--font-ui);font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;display:flex;align-items:center;gap:0.5rem;
  transition:color .35s ease;
}
.spec-row dd{
  font-family:var(--font-ui);font-weight:500;font-size:0.95rem;line-height:1.35;
  color:var(--rose-50);transition:color .35s ease;
}
.spec-row:hover{transform:translateX(4px);}
.spec-row:hover dt{color:var(--accent-bright);}
.spec-row:hover dd{
  background:var(--grad-head-soft);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.live-dot{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 30% 30%,#fbe0e9,#e8607f);
  box-shadow:0 0 0 0 rgba(232,96,127,0.6);animation:live-pulse 2s ease-out infinite;
}
@keyframes live-pulse{
  0%{box-shadow:0 0 0 0 rgba(232,96,127,0.55);}
  70%{box-shadow:0 0 0 7px rgba(232,96,127,0);}
  100%{box-shadow:0 0 0 0 rgba(232,96,127,0);}
}
@media(max-width:560px){.spec-row{grid-template-columns:1fr;gap:0.1rem;}}
@media(prefers-reduced-motion:reduce){.live-dot{animation:none;}}

/* ---- Film grain (shared ambient texture) ---- */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;transform:translateZ(0);
  background-image:url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" /%3E%3CfeColorMatrix type="saturate" values="0"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity="0.4"/%3E%3C/svg%3E');
  opacity:0.07;mix-blend-mode:overlay;
}

/* ---- Scroll reveal (JS adds .in) ---- */
[data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity var(--dur-slow) var(--ease-out-expo),transform var(--dur-slow) var(--ease-out-expo);}
[data-reveal].in{opacity:1;transform:none;}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;scroll-behavior:auto !important;}
  [data-reveal]{opacity:1;transform:none;}
}

/* ---- Touch ergonomics ----
   On touch devices :hover never fires, so hover-only affordances feel
   "dead". Remove the grey tap flash and give the key controls a quick
   :active press; enforce comfortable tap targets on small screens. */
a,button,[role="button"],.btn,.pill{-webkit-tap-highlight-color:transparent;}
@media (hover:none){
  .btn:active,.pill:active,.player-btn:active{transform:scale(0.96);}
  .btn-primary:active{box-shadow:var(--glow-rose);}
  .site-nav a.nav-link:active{color:var(--accent-bright);}
  .site-nav a.nav-link:active::after{width:100%;}
}
@media (hover:none) and (max-width:880px){
  .btn{min-height:44px;}
  .site-nav a.nav-link{padding-block:0.55rem;}
}

/* ============================================================
   DEEP MOBILE LAYER — tap targets · safe-area · type floors · perf
   ============================================================ */

/* respect notches / rounded display corners on the fixed nav */
@supports(padding:max(0px)){
  .site-nav{
    padding-left:max(var(--gutter),env(safe-area-inset-left));
    padding-right:max(var(--gutter),env(safe-area-inset-right));
    padding-top:max(1.1rem,env(safe-area-inset-top));
  }
}

/* touch devices: comfortable >=44px hit targets + neutralise sticky :hover lifts */
@media (pointer:coarse){
  .site-nav a.nav-link{min-height:44px;display:inline-flex;align-items:center;}
  .footer-links a{min-height:44px;display:inline-flex;align-items:center;}
  .btn{min-height:46px;}
  .pill{min-height:38px;}
  .btn-primary:hover,.btn-ghost:hover,.id-card:hover,.exp-card:hover,
  .tool:hover,.sk:hover,.spec-row:hover{transform:none;}
}

/* small phones: tighten gutters/rhythm, keep body text >=16px */
@media (max-width:560px){
  :root{--gutter:1.15rem;}
  body{font-size:16px;}
  .section{padding-block:var(--sp-5);}
  h1,h2,h3{text-wrap:balance;overflow-wrap:break-word;}
}
@media (max-width:380px){
  :root{--gutter:1rem;}
}

/* data-saver: drop the ambient grain texture */
@media (prefers-reduced-data:reduce){
  .grain{display:none;}
}