/* =====================================================================
   Anthony Mellone — portfolio · shared project-page styles
   Landing page (index.html) keeps its own approved inline styles.
   Tokens mirror the landing page's dark showcase sections.
   ===================================================================== */
:root{
  --bg:#0b0b0e; --bg2:#08080a; --card:#121215; --card2:#16161a; --rule:#26262c; --rule2:#2c2c33;
  --ink:#f5f4f2; --soft:#b4b1ae; --grey:#8b8987; --dim:#3a3a40;
  --red:#ec2024; --pink:#ff2e88; --accent:var(--red);
  /* lighter tints used only for small text, so 10-11px labels clear WCAG AA */
  --red-text:#f5353a; --pink-text:#ff5a9e; --accent-text:var(--red-text);
  --ok:#22c55e; --warn:#f5b021; --crit:#ec2024;
  --sans:Inter,-apple-system,"Helvetica Neue",sans-serif;
  --display:Outfit,Inter,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1160px; --gutter:clamp(20px,5vw,60px);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,video,svg{max-width:100%;display:block}
img{height:auto}
.mono{font-family:var(--mono)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;z-index:200;display:inline-flex;align-items:center;min-height:44px;background:var(--ink);color:#0b0b0e;padding:10px 16px;border-radius:8px;font-weight:600;font-size:13px}
.skip:focus{top:12px}

/* ---------- nav ---------- */
#nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:22px;
  padding:0 clamp(20px,4vw,44px);height:58px;background:rgba(11,11,14,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06)}
#nav .name{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;letter-spacing:-.01em;margin-right:auto}
#nav .back{display:inline-flex;align-items:center;min-height:44px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);transition:color .2s}
#nav .back:hover{color:var(--ink)}
#nav .pill{display:inline-flex;align-items:center;min-height:44px;border:1px solid rgba(255,255,255,.28);border-radius:100px;padding:7px 18px;font-size:13.5px;font-weight:500;transition:border-color .2s,background .2s}
#nav .pill:hover{border-color:rgba(255,255,255,.6)}
@media (max-width:560px){#nav{height:52px;gap:14px}#nav .pill{display:none}}

/* ---------- hero ---------- */
.hero{padding:calc(58px + clamp(44px,8vh,84px)) var(--gutter) 0;max-width:var(--wrap);margin:0 auto;text-align:center}
.kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--accent-text);font-weight:700;text-transform:uppercase;margin-bottom:16px}
.hero h1{font-family:var(--display);font-size:clamp(38px,6vw,76px);font-weight:700;letter-spacing:-.025em;line-height:.98;margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .sub{max-width:640px;margin:0 auto;color:var(--soft);font-size:clamp(15px,1.6vw,17px);line-height:1.6}
.hero .sub b{color:var(--ink);font-weight:600}
.meta{display:flex;justify-content:center;gap:clamp(18px,3.5vw,52px);flex-wrap:wrap;padding:30px var(--gutter) 0;max-width:var(--wrap);margin:0 auto}
.meta div{text-align:center}
.meta dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--grey);text-transform:uppercase;margin-bottom:6px}
.meta dd{font-size:13.5px;font-weight:600}

/* ---------- stat band (big, never wraps a lone stat) ---------- */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:var(--wrap);margin:34px auto 0;padding:26px var(--gutter);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.stats.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.stats div{text-align:center;min-width:0}
.stats dd{font-size:clamp(26px,3.6vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1;white-space:nowrap;font-family:var(--sans)}
.stats dd small{font-size:.55em;font-weight:700;letter-spacing:0;vertical-align:.18em}
.stats dt{margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--grey);text-transform:uppercase;line-height:1.5}
.stats.closing{border:0;background:var(--card);border-radius:16px;padding:clamp(30px,5vw,52px) var(--gutter)}
@media (max-width:720px){
  /* phones: one big stat per row — value left, label right. Nothing ever wraps alone. */
  .stats,.stats.four{grid-template-columns:1fr;gap:0;padding:6px var(--gutter)}
  .stats div{display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;padding:16px 0;border-bottom:1px solid var(--rule)}
  .stats div:last-child{border-bottom:0}
  .stats dd{font-size:clamp(30px,9vw,40px)}
  .stats dt{margin:0;text-align:right;max-width:44%}
  .stats.closing div{border-color:var(--rule2)}
}

/* ---------- main / sections ---------- */
main{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.sec{margin-top:clamp(64px,10vh,120px)}
.shead{display:flex;align-items:baseline;gap:16px;margin-bottom:18px}
.snum{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--accent-text);font-weight:700}
.sec h2{font-family:var(--display);font-size:clamp(26px,3.6vw,44px);font-weight:700;letter-spacing:-.015em;line-height:1.05}
.big{font-family:var(--display);font-size:clamp(34px,6vw,76px);font-weight:600;letter-spacing:-.025em;line-height:1.02;text-align:center;max-width:900px;margin:0 auto}
.lede{max-width:600px;color:var(--soft);font-size:clamp(15px,1.5vw,16.5px);line-height:1.7}
.lede+.lede{margin-top:18px}
.lede b{color:var(--ink);font-weight:600}
.center{text-align:center;margin-left:auto;margin-right:auto}
.cap{margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--grey);text-transform:uppercase;text-align:center;line-height:1.6}
.cap.left{text-align:left}

/* narration: copy beside a visual, alternating */
.narr{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center;margin-top:34px}
.narr.flip>.txt{order:2}
.narr .txt .lede{max-width:520px}
.narr .txt h3{font-family:var(--display);font-size:clamp(20px,2.2vw,26px);font-weight:600;letter-spacing:-.01em;margin-bottom:12px}
.narr .txt .kicker{margin-bottom:12px}
@media (max-width:860px){.narr{grid-template-columns:1fr;gap:26px}.narr.flip>.txt{order:0}.narr .vis{order:0}}

/* ---------- HUD frames ---------- */
.hud{position:relative;background:var(--card);border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.hud.cut-tr{clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.hud.cut-tl{clip-path:polygon(22px 0,100% 0,100% 100%,0 100%,0 22px)}
.hud.cut-br{clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
.hud.cut-bl{clip-path:polygon(0 0,100% 0,100% 100%,22px 100%,0 calc(100% - 22px))}
.hud>img,.hud>video{width:100%;height:auto}
.hud.fill>img,.hud.fill>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hud.pad{padding:clamp(22px,4vw,48px);display:flex;align-items:center;justify-content:center}
.hud.pad>img{width:auto;max-width:min(72%,520px)}
.tag{position:absolute;top:12px;left:14px;z-index:3;background:rgba(10,10,12,.7);border:1px solid rgba(255,255,255,.12);border-radius:100px;
  padding:5px 11px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:#d8d6d4;text-transform:uppercase;
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);white-space:nowrap;max-width:calc(100% - 28px);overflow:hidden;text-overflow:ellipsis;
  /* HUD telemetry: hidden until the card is interrogated, so it never covers the art.
     Direction: Antigravity. Text stays in the DOM and the a11y tree throughout. */
  opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity .11s cubic-bezier(.4,0,1,1),transform .11s cubic-bezier(.4,0,1,1)}
.tag i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:1px;
  transform:scale(.6);transition:transform .11s linear,filter .11s linear}
@media (hover:hover){
  .hud:hover .tag,.hud:focus-within .tag{opacity:1;transform:translateY(0);
    transition:opacity .16s cubic-bezier(.16,1,.3,1),transform .16s cubic-bezier(.16,1,.3,1)}
  .hud:hover .tag i,.hud:focus-within .tag i{transform:scale(1);filter:drop-shadow(0 0 5px var(--accent));
    transition:transform .16s cubic-bezier(.34,1.56,.64,1) .04s,filter .16s ease .04s}
}
/* touch has no hover, so each pill glances in as its card reveals, then retracts */
@media (hover:none){
  .rev.on .tag{animation:pill-glance 1.8s cubic-bezier(.16,1,.3,1) forwards}
  .hud:active .tag{opacity:1!important;transform:translateY(0)!important}
  .hud:active .tag i{transform:scale(1)!important}
}
@keyframes pill-glance{
  0%{opacity:0;transform:translateY(-4px)}
  10%,75%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(-3px)}
}
.tag.br{top:auto;left:auto;bottom:12px;right:14px}
.chrome{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#131316;border-bottom:1px solid #232327}
.chrome i{width:9px;height:9px;border-radius:50%;background:#2c2c31}
.chrome i:nth-child(1){background:#ff5f57}.chrome i:nth-child(2){background:#febc2e}.chrome i:nth-child(3){background:#28c840}
.chrome span{flex:1;margin-left:10px;background:#1c1c20;border-radius:6px;padding:5px 12px;font-family:var(--mono);font-size:10.5px;color:#9a9aa4;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* grid/flex children never force a track wider than the viewport */
.narr>*,.grid2>*,.grid3>*,.stats>*,.shipped>*,.bento1>*,.trio>*,.xp>*,.mk>*,.out>*,.marks>*,.cols>*,.pr>*,.left-grid>*,.ai>*{min-width:0}
/* generic grids */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
@media (max-width:760px){.grid2,.grid3{grid-template-columns:1fr}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent-btn,#de1d21);color:#fff;font-family:var(--display);font-weight:700;font-size:14.5px;
  letter-spacing:.02em;padding:14px 26px;border-radius:10px;box-shadow:0 14px 34px -12px color-mix(in srgb,var(--accent) 55%,transparent);
  transition:transform .25s,box-shadow .25s,filter .25s;min-height:44px}
.btn:hover{transform:translateY(-2px);filter:brightness(.94)}
.btn .arr{transition:transform .25s}.btn:hover .arr{transform:translateX(3px)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid rgba(255,255,255,.22);box-shadow:none}
.btn.ghost:hover{border-color:rgba(255,255,255,.5)}

/* ---------- pull-quote / callout ---------- */
.callout{position:relative;margin:clamp(40px,7vh,72px) auto 0;max-width:980px;padding:clamp(26px,4vw,44px) clamp(24px,5vw,56px);
  background:var(--accent);color:#fff;border-radius:6px;text-align:center;
  font-family:var(--display);font-size:clamp(22px,3.2vw,38px);font-weight:600;letter-spacing:-.015em;line-height:1.2;
  box-shadow:0 30px 80px -30px color-mix(in srgb,var(--accent) 70%,transparent)}
.callout::before,.callout::after{content:'';position:absolute;width:22px;height:22px;border:2px solid rgba(255,255,255,.55)}
.callout::before{top:10px;left:10px;border-right:0;border-bottom:0}
.callout::after{bottom:10px;right:10px;border-left:0;border-top:0}

/* ---------- compare slider (line + handle sit outside the scrolling pane, so the handle stays centred in view) ---------- */
.cmp{position:relative;border-radius:14px;border:1px solid var(--rule);overflow:hidden;background:#000}
.cmp .scroll{height:min(560px,70vh);overflow-y:auto;overflow-x:hidden;position:relative;scrollbar-width:thin;scrollbar-color:#2c2c33 transparent;
  overscroll-behavior:contain;touch-action:pan-y}
.cmp .scroll::-webkit-scrollbar{width:8px}.cmp .scroll::-webkit-scrollbar-thumb{background:#2c2c33;border-radius:4px}
.cmp .layer{position:relative}
.cmp .layer img{display:block;width:100%;height:auto}
.cmp .layer.top{position:absolute;top:0;left:0;width:100%;clip-path:inset(0 0 0 var(--x,55%))}
.cmp .ctag{position:sticky;top:12px;float:left;margin-left:14px;z-index:4;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.8);background:rgba(0,0,0,.6);padding:5px 9px;border-radius:20px;pointer-events:none}
.cmp .layer.top .ctag{float:right;margin:0 14px 0 0;color:#111;background:rgba(255,255,255,.8)}
.cmp .line{position:absolute;top:0;bottom:0;left:var(--x,55%);width:2px;background:var(--accent);z-index:5;pointer-events:none;transform:translateX(-1px)}
.cmp .handle{position:absolute;top:50%;left:var(--x,55%);transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;z-index:6;
  background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 22%,transparent),0 10px 24px rgba(0,0,0,.5);
  cursor:ew-resize;touch-action:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px}
.cmp .handle:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cmp .handle.grab{cursor:grabbing;box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 30%,transparent),0 10px 24px rgba(0,0,0,.5)}

/* ---------- slideshow ---------- */
.show{position:relative;aspect-ratio:21/9;border-radius:16px;overflow:hidden;background:#000;border:1px solid var(--rule)}
.show img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease;will-change:opacity}
.show img.on{opacity:1}
.show::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55) 100%);pointer-events:none}
.show .ctrl{position:absolute;left:16px;right:16px;bottom:14px;z-index:3;display:flex;align-items:center;gap:12px}
.show .count{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#fff;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.6);margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.show .dots{display:flex;gap:6px}
.show .dots button{width:28px;height:28px;display:grid;place-items:center;border-radius:50%}
.show .dots button i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);transition:background .2s,transform .2s;display:block}
.show .dots button[aria-current="true"] i{background:var(--accent);transform:scale(1.3)}
.show .pp{width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25);color:#fff;display:grid;place-items:center;font-size:11px}
@media (max-width:640px){.show{aspect-ratio:4/3;border-radius:12px}.show .count{display:none}}

/* ---------- horizontal snap gallery ---------- */
.rail-wrap{position:relative;margin-top:26px}
.railx{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 0 18px;scrollbar-width:thin;scrollbar-color:#2c2c33 transparent;
  overscroll-behavior-x:contain;cursor:grab;-webkit-overflow-scrolling:touch}
.railx.drag{cursor:grabbing;scroll-snap-type:none}
.railx::-webkit-scrollbar{height:6px}.railx::-webkit-scrollbar-thumb{background:#2c2c33;border-radius:3px}
.railx>*{flex:0 0 min(78vw,560px);scroll-snap-align:center}
.railx img{pointer-events:none;user-select:none;-webkit-user-drag:none}
.rail-nav{display:flex;justify-content:center;gap:10px;margin-top:6px}
.rail-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--rule2);color:var(--soft);display:grid;place-items:center;font-size:16px;transition:border-color .2s,color .2s}
.rail-nav button:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- phone mockup ---------- */
.phone{position:relative;width:min(300px,84vw);margin:0 auto;aspect-ratio:9/19.2;border-radius:44px;padding:11px;
  background:linear-gradient(155deg,#3c3c40,#1a1a1c 38%,#08080a);
  box-shadow:0 50px 110px -30px rgba(0,0,0,.85),0 20px 60px -15px color-mix(in srgb,var(--accent) 25%,transparent),inset 0 1px 1px rgba(255,255,255,.16)}
.phone .screen{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:#000}
.phone .notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:34%;height:22px;background:#050505;border-radius:14px;z-index:4}
.phone .feed{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain;touch-action:pan-y;scroll-snap-type:y proximity}
.phone .feed::-webkit-scrollbar{display:none}
.phone .feed img{width:100%;height:auto;scroll-snap-align:start}
.phone .btn-side{position:absolute;background:#1c1c1e;width:3px;border-radius:2px}
.phone .b1{left:-3px;top:110px;height:28px}.phone .b2{left:-3px;top:150px;height:46px}.phone .b3{left:-3px;top:204px;height:46px}.phone .b4{right:-3px;top:150px;height:64px}
.phone .swipe{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:5;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:rgba(0,0,0,.6);padding:5px 10px;border-radius:20px;pointer-events:none;transition:opacity .4s}
.phone .swipe.gone{opacity:0}

/* ---------- reveal (only when JS is running, so no-JS still sees everything) ---------- */
.js .rev{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.js .rev.on{opacity:1;transform:none}

/* ---------- footer ---------- */
footer.site{margin-top:clamp(80px,12vh,140px);border-top:1px solid var(--rule)}
.next{display:block;text-align:center;padding:clamp(54px,9vh,90px) 20px}
.next span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--grey);text-transform:uppercase;margin-bottom:14px}
.next b{font-family:var(--display);font-size:clamp(28px,4.6vw,52px);font-weight:700;letter-spacing:-.015em;transition:color .25s;line-height:1.1}
.next:hover b{color:var(--accent)}
.foot-row a{display:inline-flex;align-items:center;min-height:44px}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:0 var(--gutter) 24px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--grey);text-transform:uppercase}
.foot-row a:hover{color:var(--ink)}

/* ---------- ambience ---------- */
.glow{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.glow span{position:absolute;border-radius:50%;filter:blur(80px);opacity:.14}
.dots-bg::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.4px);background-size:26px 26px}

/* ---------- motion prefs ---------- */
@media (prefers-reduced-motion:reduce){
  .tag,.tag i{transition:none!important;animation:none!important}
  .tag{transform:none!important}
  .tag i{transform:scale(1)!important;filter:none!important}
  .hud:hover .tag,.hud:focus-within .tag{opacity:1!important}
  html{scroll-behavior:auto}
  .rev{opacity:1;transform:none;transition:none}
  .show img{transition:none}
  *{animation-duration:.001s!important;animation-iteration-count:1!important}
}
@media (max-width:760px){
  .hero{padding-left:22px;padding-right:22px}
  main{padding:0 18px}
  .meta{gap:18px 26px}
  .hud.pad>img{max-width:86%}
}