/* OCTOLUS — site redesign v1 (staging). Palette sampled from Ry's art:
   abyss #010011 · violet #350040/#500159/#6119FF/#8417FF/#A81BF5
   magenta #C30D53/#ED05CE/#FA1891 · coral #DE3830/#FF524D/#FF6A45
   amber #F68932/#FF973A/#FFBC34.  System fonts only — font-src is 'self'. */
:root{
  --abyss:#010011; --deep:#0B011A; --panel:rgba(255,255,255,.035); --line:rgba(255,138,60,.16);
  --ink:#F6E9F2; --muted:#C79BBB;
  --amber:#FFBC34; --coral:#FF6A45; --pink:#FA1891; --violet:#8417FF;
  --ramp:linear-gradient(100deg,#FFBC34,#FF6A45 38%,#FA1891 68%,#8417FF);
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--abyss);color:var(--ink);font-family:var(--sans);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
#ambient{position:fixed;inset:0;z-index:-1}          /* the water + creatures */

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:28px;
  padding:16px clamp(18px,4vw,54px);backdrop-filter:blur(14px);
  background:linear-gradient(180deg,rgba(1,0,17,.82),rgba(1,0,17,.34));
  border-bottom:1px solid rgba(255,255,255,.05)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand .mark{width:30px;height:30px;flex:0 0 auto}
.brand span{font-weight:900;letter-spacing:.13em;font-size:1.02rem}
.brand i{font-style:normal;background:var(--ramp);-webkit-background-clip:text;background-clip:text;color:transparent}
.links{margin-left:auto;display:flex;gap:26px}
.links a{color:var(--muted);text-decoration:none;font-size:.9rem;transition:color .2s}
.links a:hover{color:var(--amber)}
.btn{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;padding:12px 24px;border-radius:100px;cursor:pointer;text-decoration:none;
  display:inline-block;transition:transform .2s,box-shadow .3s,background .2s;border:1px solid transparent}
.btn.primary{color:#2A0212;background:var(--ramp);box-shadow:0 10px 34px -10px rgba(250,24,145,.6)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 16px 44px -10px rgba(255,138,60,.75)}
.btn.ghost{color:var(--ink);background:transparent;border-color:rgba(250,24,145,.4)}
.btn.ghost:hover{background:rgba(250,24,145,.12);border-color:var(--pink);transform:translateY(-2px)}
.btn.big{padding:16px 40px;font-size:.78rem}

/* ---- hero ---- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;
  min-height:clamp(560px,86vh,900px);padding:0 clamp(18px,5vw,72px)}
.eyebrow{font-family:var(--mono);font-size:.62rem;letter-spacing:.36em;text-transform:uppercase;
  color:var(--coral);margin-bottom:14px}
.eyebrow.center{text-align:center}
h1{font-size:clamp(2.3rem,5.6vw,4.3rem);line-height:1.03;font-weight:800;letter-spacing:-.02em}
h1 span{background:var(--ramp);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{margin-top:20px;max-width:46ch;color:rgba(233,214,228,.74);font-size:1.02rem}
.cta{margin-top:30px;display:flex;gap:13px;flex-wrap:wrap}
.hero-art{display:flex;align-items:center;justify-content:center}
.shell-wrap{width:min(46vw,540px);aspect-ratio:1;position:relative}
.shell-wrap::after{content:"";position:absolute;inset:-8%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,138,60,.20),rgba(237,5,206,.07) 45%,transparent 70%)}
#shell{width:100%;height:100%;display:block;position:relative;z-index:1}

/* ---- bands ---- */
.band{padding:clamp(70px,10vw,130px) clamp(18px,5vw,72px);position:relative}
.center{text-align:center}
h2{font-size:clamp(1.7rem,3.6vw,2.7rem);font-weight:800;letter-spacing:-.015em;line-height:1.12}
.sub{margin:16px auto 0;max-width:62ch;color:rgba(226,198,222,.66)}
.sub.narrow{max-width:48ch}
.grid4{margin-top:52px;display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}
.grid3{margin-top:52px;display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.card{background:var(--panel);border:1px solid rgba(255,255,255,.07);border-radius:16px;
  padding:26px 24px;transition:.28s}
.card h3{font-size:1.02rem;font-weight:700;margin-bottom:9px}
.card p{font-size:.9rem;color:rgba(226,198,222,.62)}
.card:hover{border-color:var(--line);background:rgba(255,138,60,.05);transform:translateY(-3px)}
.card.lift .ico{width:40px;height:40px;border-radius:11px;margin-bottom:16px;background:var(--ramp);
  opacity:.9;-webkit-mask:var(--m) center/68% no-repeat;mask:var(--m) center/68% no-repeat;
  background-clip:padding-box}
.ico[data-i=build]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 21V9l9-6 9 6v12h-7v-6h-4v6z'/%3E%3C/svg%3E")}
.ico[data-i=hold]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-2h2zm0-4h-2V7h2z'/%3E%3C/svg%3E")}
.ico[data-i=give]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 21s-8-4.6-8-10a5 5 0 018-4 5 5 0 018 4c0 5.4-8 10-8 10z'/%3E%3C/svg%3E")}

/* ---- the seven ---- */
.spirits{margin-top:54px;list-style:none;display:grid;gap:14px;
  grid-template-columns:repeat(7,1fr)}
.spirit{position:relative;background:var(--panel);border:1px solid rgba(255,255,255,.07);
  border-radius:18px;padding:22px 12px 20px;text-align:center;transition:.3s;overflow:hidden}
.spirit::before{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--c);opacity:.5}
.spirit:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--c) 55%,transparent);
  background:color-mix(in srgb,var(--c) 8%,transparent)}
.spirit .letter{font-size:1.5rem;font-weight:900;letter-spacing:.02em;color:var(--c);
  font-family:var(--mono);line-height:1}
.spirit canvas{width:76px;height:76px;display:block;margin:12px auto 10px}
.spirit .who{font-size:.78rem;font-weight:700;letter-spacing:.02em}
.spirit .trait{margin-top:3px;font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted)}

/* ---- final ---- */
.final{text-align:center;padding-top:clamp(80px,12vw,150px)}
.wordmark{font-size:clamp(2.6rem,10vw,6rem);font-weight:900;letter-spacing:.1em;line-height:1;
  background:var(--ramp);-webkit-background-clip:text;background-clip:text;color:transparent}
.wordmark i{font-style:normal}
.tag{margin-top:10px;font-family:var(--mono);font-size:.68rem;letter-spacing:.42em;
  text-transform:uppercase;color:rgba(255,170,120,.78)}
.final .btn{margin-top:34px}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:26px clamp(18px,5vw,72px);border-top:1px solid rgba(255,255,255,.06);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(199,155,187,.5)}

@media(max-width:1080px){ .grid4{grid-template-columns:repeat(2,1fr)}
  .spirits{grid-template-columns:repeat(4,1fr)} }
@media(max-width:860px){ .hero{grid-template-columns:1fr;padding-top:40px;text-align:center}
  .hero-copy{order:2} .hero-art{order:1} .shell-wrap{width:min(74vw,380px)}
  .cta{justify-content:center} .lede{margin-inline:auto} .links{display:none}
  .grid3{grid-template-columns:1fr} }
@media(max-width:560px){ .spirits{grid-template-columns:repeat(2,1fr)} .grid4{grid-template-columns:1fr} }
@media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }
/* v2 — the seven, rebuilt. The line-art glyphs are GONE: they read as
   unfinished wireframes. Typography-led instead — the LETTER is the hero,
   huge and lit, with real depth from layered glow, glass and a pointer
   spotlight. Restraint that looks deliberate beats illustration that doesn't. */
.spirits{margin-top:60px;list-style:none;display:grid;gap:18px;
  grid-template-columns:repeat(7,1fr);perspective:1400px}
.spirit{position:relative;isolation:isolate;border-radius:22px;padding:34px 14px 26px;
  text-align:center;overflow:hidden;cursor:default;
  background:linear-gradient(165deg,rgba(255,255,255,.075),rgba(255,255,255,.015) 42%,transparent);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 20px 50px -28px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .45s}
/* the coloured bloom that gives each card its identity + depth */
.spirit::before{content:"";position:absolute;left:50%;top:-30%;width:180%;height:150%;
  transform:translateX(-50%);z-index:-2;pointer-events:none;opacity:.55;transition:opacity .4s;
  background:radial-gradient(closest-side,var(--c),transparent 72%);filter:blur(34px)}
/* pointer spotlight — the surface reacts to you, which is most of "alive" */
.spirit::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  transition:opacity .35s;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),
  color-mix(in srgb,var(--c) 30%,transparent),transparent 70%)}
.spirit:hover{transform:translateY(-10px) rotateX(5deg) scale(1.025);
  border-color:color-mix(in srgb,var(--c) 60%,transparent);
  box-shadow:0 34px 70px -30px color-mix(in srgb,var(--c) 55%,transparent),
             inset 0 1px 0 rgba(255,255,255,.16)}
.spirit:hover::before{opacity:.95}
.spirit:hover::after{opacity:1}
/* THE LETTER is the artwork */
.spirit .letter{font-family:var(--sans);font-weight:900;font-size:clamp(3.1rem,4.4vw,4.6rem);
  line-height:.86;letter-spacing:-.04em;
  background:linear-gradient(170deg,#fff 4%,var(--c) 52%,color-mix(in srgb,var(--c) 30%,#2A0212));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 24px color-mix(in srgb,var(--c) 60%,transparent));
  transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.spirit:hover .letter{transform:translateY(-3px) scale(1.06)}
/* a hairline ring under the letter — structure, not decoration */
.spirit .ring{width:54px;height:1px;margin:16px auto 14px;
  background:linear-gradient(90deg,transparent,var(--c),transparent);opacity:.7}
.spirit .who{font-size:1rem;font-weight:700;letter-spacing:-.01em}
.spirit .trait{margin-top:5px;font-family:var(--mono);font-size:.54rem;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(226,198,222,.55)}
.spirit canvas{display:none}                       /* v1 glyphs retired */

/* depth for the whole page: a slow drifting light field behind the bands */
.band{position:relative}
.band::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(60% 45% at 22% 12%,rgba(255,138,60,.055),transparent 70%),
             radial-gradient(55% 40% at 82% 78%,rgba(132,23,255,.06),transparent 70%)}
.card{backdrop-filter:blur(3px)}
.card:hover{box-shadow:0 22px 46px -26px rgba(255,106,69,.5)}
@media(max-width:1080px){ .spirits{grid-template-columns:repeat(4,1fr)} }
@media(max-width:560px){ .spirits{grid-template-columns:repeat(2,1fr)} }
/* v3 — reveal-on-scroll. Nothing appears until it is asked for. */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.shell-wrap{will-change:transform}
@media(prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none} }

/* v4 — the real creature art leads each card. Backgrounds in the supplied art
   vary (some light, some dark), so instead of trying to knock them out we
   EMBRACE them: the image is a full-bleed header that fades into the card. */
.spirits{grid-template-columns:repeat(7,1fr);gap:16px}
.spirit{padding:0;overflow:hidden;text-align:left}
.spirit .art{position:relative;aspect-ratio:4/3;overflow:hidden}
.spirit .art img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.04);transition:transform .7s cubic-bezier(.2,.8,.2,1);
  filter:saturate(1.12) contrast(1.05)}
.spirit:hover .art img{transform:scale(1.13)}
/* fade the art into the card so the seam never reads as a photo pasted on */
.spirit .art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,transparent 38%,rgba(8,1,20,.55) 74%,#0A0116 100%),
             radial-gradient(120% 80% at 50% 0%,transparent 55%,rgba(8,1,20,.5))}
.spirit .letter{position:absolute;left:10px;top:6px;z-index:2;
  font-size:clamp(1.5rem,2vw,2.1rem);line-height:1;font-weight:900;letter-spacing:-.03em;
  background:linear-gradient(170deg,#fff,var(--c));-webkit-background-clip:text;background-clip:text;
  color:transparent;filter:drop-shadow(0 2px 10px rgba(0,0,0,.85));transform:none}
.spirit:hover .letter{transform:none}
.spirit .meta{padding:12px 14px 16px;background:#0A0116;position:relative;z-index:1}
.spirit .who{font-size:.94rem}
.spirit .ring{display:none}
@media(max-width:1080px){ .spirits{grid-template-columns:repeat(4,1fr)} }
@media(max-width:560px){ .spirits{grid-template-columns:repeat(2,1fr)} }

/* v5 — Ry's real assets. */
.brand .wm{height:26px;width:auto;display:block}
.brand .mark,.brand span{display:none}
/* hero octopus: the art has its own warm backdrop, so blend it into the page
   rather than sitting it in a box — screen drops the dark, the mask feathers
   the rectangle edge away. */
/* the art has a warm rectangular backdrop; screen drops the dark and a wide
   soft mask dissolves the straight edges so it sits IN the water, not on it */
#heroart{width:100%;height:100%;object-fit:contain;display:block;
  mix-blend-mode:screen;filter:saturate(1.18) contrast(1.04);
  -webkit-mask:radial-gradient(58% 58% at 52% 50%,#000 42%,rgba(0,0,0,.55) 68%,transparent 86%);
          mask:radial-gradient(58% 58% at 52% 50%,#000 42%,rgba(0,0,0,.55) 68%,transparent 86%)}
.shell-wrap{width:min(52vw,620px)}
/* the card fade was far too heavy — the creatures were nearly black */
.spirit .art::after{background:linear-gradient(to bottom,transparent 52%,rgba(8,1,20,.30) 80%,#0A0116 100%)}
.spirit .art img{filter:saturate(1.16) contrast(1.06) brightness(1.18)}

/* v6 — REAL TRANSPARENCY. Ry supplied RGBA art; an earlier pass flattened it to
   RGB and baked the backgrounds in. Nothing here may reintroduce a rectangle:
   no blend-mode hacks, no masks, no gradient scrims over the art. */
.spirit{padding:18px 12px 16px;text-align:center;background:
  linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.012) 45%,transparent)}
.spirit .art{position:relative;aspect-ratio:1;overflow:visible;display:flex;
  align-items:center;justify-content:center}
.spirit .art::after{content:none}                 /* the scrim is gone */
.spirit .art img{width:100%;height:100%;object-fit:contain;display:block;
  transform:scale(1);transition:transform .6s cubic-bezier(.2,.8,.2,1);
  filter:drop-shadow(0 10px 26px color-mix(in srgb,var(--c) 45%,transparent))}
.spirit:hover .art img{transform:scale(1.09) translateY(-4px)}
.spirit .letter{position:static;display:block;margin-top:6px;
  font-size:clamp(1.4rem,1.9vw,1.9rem);line-height:1}
.spirit .meta{display:none}
.spirit .trait{margin-top:2px;font-family:var(--mono);font-size:.52rem;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(226,198,222,.55)}

/* hero octopus: BIG, transparent, no box, no mask */
.shell-wrap{width:min(62vw,760px)}
#heroart{width:100%;height:100%;object-fit:contain;display:block;
  mix-blend-mode:normal;-webkit-mask:none;mask:none;
  filter:drop-shadow(0 26px 70px rgba(255,90,40,.34)) saturate(1.1)}
.brand .wm{height:28px;width:auto;display:block}
/* v7 — four fixes. */

/* 1. THE BUTTON FRINGE. `.btn{border:1px solid transparent}` + the default
   background-clip:border-box paints the gradient UNDER the transparent border,
   so at the rounded ends you see the far end of the ramp bleed through —
   purple on the orange side and vice versa, 1-2px, exactly as Ry described.
   background-clip:padding-box stops the paint at the padding edge. */
.btn{background-clip:padding-box}
.btn.primary{border:0;background-clip:padding-box}
.btn.ghost{background-clip:padding-box}

/* 2. SEVEN FORCES — letter back on TOP, word back UNDER the creature. */
.spirit{display:flex;flex-direction:column;align-items:center;padding:16px 12px 18px}
.spirit .letter{order:1;position:static;margin:0 0 6px;
  font-size:clamp(1.5rem,2vw,2rem);line-height:1}
.spirit .art{order:2;width:100%}
.spirit .trait{order:3;margin-top:10px;font-family:var(--mono);font-size:.56rem;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(226,198,222,.62)}

/* 3. MOBILE NAV — there was no hamburger at all under 860px, just a hidden
   list, so the nav was unreachable on a phone. */
.burger{display:none;margin-left:auto;width:42px;height:42px;border-radius:12px;
  border:1px solid rgba(250,24,145,.35);background:transparent;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0}
.burger i{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .3s,opacity .2s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:860px){
  .burger{display:flex}
  .nav{flex-wrap:wrap;gap:14px}
  .nav .btn.ghost{order:3}
  .links{display:none;order:4;flex-basis:100%;flex-direction:column;gap:0;margin:0}
  .links.open{display:flex}
  .links a{padding:14px 4px;border-top:1px solid rgba(255,255,255,.07);font-size:1rem}
}
@media(min-width:861px){ .links{display:flex!important} }
/* v8 — FINAL override for the seven cards.
   Earlier passes (v4 absolute-positioned the letter, v6/v7 tried to undo it)
   were fighting each other, so the letter kept rendering as an overlay and the
   trait never appeared. One authoritative block, high specificity, explicit
   order — instead of another layer of guesses. */
.spirits .spirit{display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:flex-start!important;
  padding:18px 12px 20px!important;text-align:center!important;position:relative}
.spirits .spirit > .letter{
  order:0!important;position:static!important;left:auto!important;top:auto!important;
  display:block!important;margin:0 0 10px!important;width:100%;
  font-family:var(--sans);font-weight:900;line-height:1;
  font-size:clamp(1.6rem,2.1vw,2.2rem);letter-spacing:-.03em;
  background:linear-gradient(170deg,#fff 6%,var(--c) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 14px color-mix(in srgb,var(--c) 55%,transparent));
  transform:none!important}
.spirits .spirit > .art{order:1!important;width:100%;aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;overflow:visible}
.spirits .spirit > .art::after{content:none!important}
.spirits .spirit > .trait{
  order:2!important;display:block!important;margin:12px 0 0!important;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(240,215,235,.78)!important;opacity:1!important}
.spirits .spirit .meta{display:none!important}

/* Connect Wallet removed from the tmp homepage (Ry, 2026-07-31). The mobile
   rule that ordered it is now moot; keep the burger hard right. */
@media(max-width:860px){ .nav{flex-wrap:wrap} .burger{margin-left:auto} }

/* Ry: drop the slogan from the header lockup and size the wordmark up — it was
   too small to read, and the strapline made it smaller still. */
.brand .wm{height:40px}
@media(max-width:860px){ .brand .wm{height:34px} }
/* v9 — /projects and /team, on the homepage template.
   Ry: "use the same template… we may need to recolor it to help it match."
   Each card carries its own --c from the Octolus ramp, so the two pages read
   as one family with the seven spirits rather than as bolted-on sub-pages. */
.pagehead{padding-top:clamp(70px,11vw,140px);padding-bottom:0}
h1.ph{font-size:clamp(2.1rem,5vw,3.7rem);line-height:1.05;font-weight:800;letter-spacing:-.02em}
h1.ph span{background:var(--ramp);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- projects ---- */
.projgrid{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}
.proj{position:relative;overflow:hidden;border-radius:18px;padding:26px 22px 22px;
  background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.012) 46%,transparent);
  border:1px solid rgba(255,255,255,.08);transition:.32s;display:flex;flex-direction:column}
.proj::before{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--c);opacity:.55}
.proj::after{content:"";position:absolute;left:-30%;top:-60%;width:160%;height:150%;z-index:-1;
  background:radial-gradient(closest-side,var(--c),transparent 72%);filter:blur(40px);
  opacity:0;transition:opacity .4s}
.proj:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--c) 55%,transparent)}
.proj:hover::after{opacity:.5}
.ptop{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.proj h3{font-size:1.12rem;font-weight:800;letter-spacing:-.01em}
.ptag{font-family:var(--mono);font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;color:var(--c)}
.proj p{font-size:.88rem;color:rgba(226,198,222,.66);flex:1}
.plink{margin-top:16px;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;color:var(--c);text-decoration:none;
  display:inline-flex;gap:7px;align-items:center;transition:gap .25s}
.proj:hover .plink{gap:12px}

/* ---- team ---- */
.teamgrid{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}
.member{border-radius:18px;overflow:hidden;position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 60%);
  border:1px solid rgba(255,255,255,.08);transition:.32s}
.member:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--c) 55%,transparent)}
.mphoto{position:relative;aspect-ratio:1;overflow:hidden}
.mphoto img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.55) contrast(1.05);transition:filter .5s,transform .7s}
.member:hover .mphoto img{filter:saturate(1.05) contrast(1.06);transform:scale(1.05)}
/* the source photos are Sovegent-blue; a tinted veil pulls them onto the
   Octolus ramp without re-shooting or re-grading every file */
.mphoto::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 34%,transparent),
    rgba(10,1,22,.30) 62%,#0A0116 100%);mix-blend-mode:screen;opacity:.85;transition:opacity .5s}
.member:hover .mphoto::after{opacity:.5}
.mbody{padding:14px 18px 20px;background:#0A0116;position:relative;z-index:1}
.member h3{font-size:1.04rem;font-weight:800}
.mrole{margin-top:2px;font-family:var(--mono);font-size:.54rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--c)}
.member p{margin-top:9px;font-size:.84rem;color:rgba(226,198,222,.62)}

@media(max-width:1080px){ .projgrid,.teamgrid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .projgrid,.teamgrid{grid-template-columns:1fr} }


/* v8 — the hero octopus is suspended in water, not pinned to the page.
   Three periods that do not divide into each other (drift 13s, sway 19s,
   roll 17s) so the loop never lands on an obvious beat, and the whole thing
   is on #heroart rather than .shell-wrap because v3.js writes an inline
   parallax transform to the wrapper — animating both would fight. */
@keyframes octo-drift{
  0%,100%{transform:translate3d(0,0,0)}
  50%    {transform:translate3d(0,-3.2%,0)}
}
@keyframes octo-sway{
  0%,100%{transform:translate3d(-1.1%,0,0)}
  50%    {transform:translate3d(1.1%,0,0)}
}
@keyframes octo-roll{
  0%,100%{transform:rotate(-1.1deg)}
  50%    {transform:rotate(1.1deg)}
}
.shell-wrap .drift{animation:octo-drift 13s ease-in-out infinite;display:block;width:100%;height:100%}
.shell-wrap .sway {animation:octo-sway  19s ease-in-out infinite;display:block;width:100%;height:100%}
#heroart{animation:octo-roll 17s ease-in-out infinite;transform-origin:52% 46%;will-change:transform}
/* the halo behind it breathes on its own clock, so the light in the water
   never pulses in lockstep with the creature */
@keyframes octo-halo{ 0%,100%{opacity:.85;transform:scale(1)} 50%{opacity:1;transform:scale(1.045)} }
.shell-wrap::after{animation:octo-halo 11s ease-in-out infinite}

/* the mission wordmark is the real logo art, not a text imitation of it */
.wordmark img{width:min(72vw,660px);height:auto;display:block;margin:0 auto}

/* ---- socials: @octolusio on Telegram, X and YouTube ----
   The footer is a 2-item flex row; the icons become the middle item, so on a
   narrow screen they wrap as one block instead of splitting across lines. */
.foot .social{display:flex;align-items:center;gap:14px}
.foot .social a{display:flex;color:rgba(226,198,222,.5);transition:color .25s,transform .25s}
.foot .social a:hover{color:#FA1891;transform:translateY(-2px)}
.foot .social svg{width:17px;height:17px;display:block}

/* ---- footer: TRUE centring for the socials ----
   space-between only centres a middle item when the two outer items are the
   same width, and "Octolus © 2026" is not the width of the slogan — so the
   icons sat visibly off-centre. A 1fr/auto/1fr grid centres the middle column
   against the PAGE regardless of what the outer text says. */
.foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.foot > :first-child{justify-self:start}
.foot .social{justify-self:center}
.foot > :last-child{justify-self:end;text-align:right}
@media(max-width:640px){
  .foot{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px}
  .foot > :first-child,.foot > :last-child{justify-self:center;text-align:center}
  .foot .social{order:-1}
}

/* ---- Ask Frankie ---- */
.chatwrap{max-width:760px;margin:0 auto}
.chatbox{height:min(52vh,460px);overflow-y:auto;padding:18px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:10px}
.chatbox .msg{max-width:82%;padding:11px 14px;border-radius:14px;font-size:.9rem;line-height:1.55;
  white-space:pre-wrap;word-wrap:break-word}
.chatbox .msg.bot{align-self:flex-start;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.07);color:rgba(240,228,240,.92);border-bottom-left-radius:5px}
.chatbox .msg.user{align-self:flex-end;color:#1a0316;border-bottom-right-radius:5px;
  background:linear-gradient(100deg,#FFBC34,#FA1891)}
@keyframes chatpulse{0%,100%{opacity:.35}50%{opacity:.85}}
.chatbox .msg.thinking{animation:chatpulse 1.1s ease-in-out infinite;letter-spacing:.2em}
.chatform{margin-top:14px;display:flex;gap:10px}
.chatform input{flex:1;min-width:0;padding:13px 16px;border-radius:100px;font:inherit;font-size:.9rem;
  color:#f4e4f0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);outline:none;
  transition:border-color .2s}
.chatform input:focus{border-color:rgba(250,24,145,.5)}
.chatform input:disabled{opacity:.5}
.chatform button{padding:13px 26px;border-radius:100px;border:none;cursor:pointer;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:#1a0316;background:linear-gradient(180deg,#FFBC34,#FF6A45);transition:transform .18s,opacity .2s}
.chatform button:hover:not(:disabled){transform:translateY(-2px)}
.chatform button:disabled{opacity:.45;cursor:default}
.chatnote{margin-top:12px;text-align:center;font-size:.72rem;line-height:1.6;color:rgba(226,198,222,.42)}
@media(max-width:560px){ .chatbox .msg{max-width:92%} .chatform button{padding:13px 18px} }

/* ---- accessibility ----
   A visible skip link (keyboard users otherwise tab the whole nav on every
   page) and a real focus ring. The browser default was outline:auto 1px, which
   is nearly invisible against this palette. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;padding:12px 18px;border-radius:0 0 12px 0;
  background:#FA1891;color:#12021c;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #FFBC34;outline-offset:3px;border-radius:4px}

/* visually hidden, but still read aloud and still found by search — the
   standard clip pattern, NOT display:none (which removes it from the
   accessibility tree entirely and would defeat the point) */
.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}

/* ---- legal pages ---- */
.legal{max-width:760px;margin:0 auto;color:rgba(226,198,222,.78);font-size:.95rem;line-height:1.75}
.legal h2{margin:34px 0 10px;font-size:1.15rem;font-weight:800;color:#f2e6f0}
.legal h2:first-child{margin-top:0}
.legal h3{margin:20px 0 6px;font-size:.95rem;font-weight:700;color:rgba(242,230,240,.9)}
.legal p{margin:0 0 12px}
.legal a{color:#FFBC34;text-decoration:none;border-bottom:1px solid rgba(255,188,52,.35)}
.legal a:hover{border-bottom-color:#FFBC34}
.legal strong{color:#f2e6f0}
.legal-updated{margin-top:34px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:rgba(226,198,222,.5)}
.foot .legal-links{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.foot .legal-links a{color:inherit;text-decoration:none;transition:color .2s}
.foot .legal-links a:hover{color:#FA1891}