:root{--muted:#aec3ce;--line:#a7d9ed24}a{color:inherit}.brand{font-size:16px!important;font-weight:600;letter-spacing:.22em!important}.intro{left:5%;right:5%;top:27%;text-align:center;pointer-events:auto}.intro h1{font-family:'Courier New',monospace;font-size:clamp(52px,7.5vw,110px);letter-spacing:.1em;line-height:1.04}.intro .invitation{margin-top:20px}.pill{display:inline-flex;align-items:center;justify-content:center;border:1px solid #a8d6e94d;border-radius:40px;padding:17px 26px;font-size:12px;letter-spacing:.16em;text-decoration:none;background:#061b2a55;transition:background .2s;line-height:1.4}.pill:hover{background:#17405a;border-color:#b5ebff}.text-link{font-size:12px;letter-spacing:.12em;text-decoration:none;line-height:1.6}.intro .pill{margin-top:14px}.intro[style*="opacity: 0"]{pointer-events:none}#beyond.ocean-site{display:block;position:relative;isolation:isolate;text-align:left;padding:0;min-height:100vh;background:linear-gradient(#00101b66,#000912ed);background-color:#03111b}.site-nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:22px 4%;gap:24px;background:#020c15ed;border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}#nav-links{display:flex;gap:32px}#nav-links a{font-size:12px;letter-spacing:.16em;text-decoration:none;text-transform:uppercase}.site-nav button{font-size:12px;letter-spacing:.1em}.menu-toggle{display:none}.store-hero{min-height:770px;height:95svh;max-height:1000px;text-align:center;position:relative;overflow:hidden;padding:95px 20px 40px}.store-hero h2{font-family:'Courier New',monospace;font-size:clamp(64px,10vw,158px)!important;letter-spacing:.025em;line-height:1;margin:28px 0!important}.store-hero>p:not(.eyebrow){font-size:16px;color:var(--muted);line-height:1.8}.hero-actions{display:flex;gap:28px;align-items:center;justify-content:center;margin-top:26px}.hero-mascot{display:block;width:min(340px,40vw);height:340px;object-fit:contain;mix-blend-mode:screen;margin:12px auto 0;opacity:.85}.hero-baseline{position:absolute;bottom:25px;left:4%;right:4%;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.16em;color:#a8c0cb}.content-section{padding:82px 4%;scroll-margin-top:90px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-bottom:32px}.section-heading h2{font-size:24px!important;letter-spacing:.18em;margin:0!important;line-height:1.3}.section-heading p{font-size:13px;line-height:1.7;color:#aec3ce;text-align:right}.zone-grid,.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.zone-card{display:flex;flex-direction:column;text-align:left;min-height:315px;padding:28px 24px;border:1px solid var(--line);background:linear-gradient(135deg,#092b3cbb,#020b15e6);transition:transform .25s,border-color .25s}.zone-card:hover{transform:translateY(-5px);border-color:#8edcff99}.micro{font-size:11px;letter-spacing:.17em;color:#9dbed0}.zone-card h3{font-family:'Courier New',monospace;font-size:24px;font-weight:400;letter-spacing:.1em;line-height:1.2;margin:28px 0 16px}.zone-card p{font-size:14px;line-height:1.7;color:#b4cad5;margin:0 0 28px}.card-bottom{font-size:10px;letter-spacing:.12em;margin-top:auto;color:#b6d9e5}.zone-note,.shop-note{font-size:12.5px;color:#a4bac6;line-height:1.6;margin-top:20px}.sample-tag{font-size:10px;letter-spacing:.15em;color:#a3bdca}.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}.filters button{border:1px solid var(--line);padding:10px 16px;border-radius:30px;font-size:12px;color:#b5cad4}.filters button.active{background:#badde6;color:#03141e}.product-card{border:1px solid var(--line);background:#010a13bf;display:flex;flex-direction:column}.product-art{height:190px;background:radial-gradient(ellipse at 70% 20%,#11445988,transparent 70%);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.product-art span{font-family:'Courier New',monospace;color:#7ba9c299;letter-spacing:-.07em;font-size:82px}.product-art small{position:absolute;bottom:17px;left:20px;font-size:10px;letter-spacing:.2em;color:#a0bdcc}.product-info{padding:24px;display:flex;flex:1;flex-direction:column}.product-info h3{font-family:Georgia,serif;font-size:26px;font-weight:400;letter-spacing:.02em;line-height:1.15;margin:12px 0}.product-info p{color:#b4c8d3;font-size:14px;line-height:1.6;margin:0 0 22px}.product-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}.product-bottom button{font-size:12px;border-bottom:1px solid #789cad}.product-bottom span{font-size:14px}.community-section{position:relative;text-align:center;padding:130px 24px 90px;overflow:hidden;scroll-margin-top:90px;border-top:1px solid var(--line);margin-top:40px;background:radial-gradient(ellipse at center,#08426066,transparent 70%)}.community-section h2{font-family:'Courier New',monospace;font-size:clamp(35px,5vw,75px)!important;letter-spacing:.06em;margin:30px 0!important;line-height:1.2}.community-section>p:not(.eyebrow){font-size:16px;line-height:1.8;color:var(--muted)}.community-topics{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin:32px 0;font-size:10px;letter-spacing:.14em;color:#bad3dd}.community-section img{display:block;width:230px;height:230px;object-fit:contain;mix-blend-mode:screen;margin:16px auto 0}.about-section{display:grid;grid-template-columns:1fr 2fr;gap:40px;border-top:1px solid var(--line)}.about-section h2{font-size:clamp(30px,4vw,56px)!important;letter-spacing:.03em;line-height:1.15;font-family:'Courier New',monospace;margin:0 0 30px!important}.about-section div>p{max-width:600px;line-height:1.8;color:var(--muted);font-size:16px}.about-section button{margin-top:18px}footer{display:grid;grid-template-columns:1fr 1fr;gap:25px;padding:48px 4%;border-top:1px solid var(--line)}footer p{font-size:11px;letter-spacing:.2em;margin:0;text-align:right}footer>a:not(.brand),footer>span{font-size:12px;color:var(--muted)}footer>span{text-align:right}dialog{background:#061622;color:#d4e5ec;border:1px solid #507184;max-width:520px;width:calc(100% - 32px);padding:50px 36px;max-height:90svh;overflow:auto}dialog::backdrop{background:#000a12cc;backdrop-filter:blur(8px)}dialog h2{font-family:'Courier New',monospace;font-size:40px;letter-spacing:.03em;line-height:1.15;margin:18px 0}dialog p{line-height:1.7;color:#bfd3dd}dialog .dialog-close{position:absolute;right:20px;top:14px;padding:10px;font-size:18px}dialog label{display:block;margin-top:22px;font-size:14px}dialog select{display:block;width:100%;padding:14px;margin:10px 0 25px;background:#0a2433;color:#deeff6;border:1px solid #59727f;font:inherit}.solid{width:100%;background:#badde6;color:#03141e}.solid:hover{color:white}.fine{font-size:12px!important;color:#a9bdc7!important}.bag-dialog{margin:0 0 0 auto;max-height:100svh;height:100svh;width:min(480px,100%)}.bag-item{padding:20px 0;border-bottom:1px solid var(--line)}.bag-item h3{font-size:17px;margin:0 0 8px;font-weight:400}.bag-item p{font-size:13px;margin:0 0 6px}.qty-row{display:flex;gap:20px;align-items:center}.qty-row button{padding:8px 12px;border:1px solid var(--line)}.qty-row button:last-child{margin-left:auto;font-size:12px;border:0}.bag-total{display:flex;justify-content:space-between;padding:30px 0}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:#d2e8ee;color:#031520;padding:14px 22px;border-radius:4px;opacity:0;pointer-events:none;z-index:40;font-size:14px;transition:.2s;max-width:90vw}.toast.visible{opacity:1;transform:translate(-50%,0)}body:has(dialog[open]){overflow:hidden}#download-bag:disabled{opacity:.4;cursor:default}@media(max-width:1000px){.zone-grid,.product-grid{grid-template-columns:repeat(2,1fr)}.store-hero{min-height:720px}.hero-mascot{width:290px}.zone-card{min-height:290px}}@media(max-width:650px){.site-nav{padding:18px 5%;gap:12px}.site-nav .brand{font-size:13px!important}.menu-toggle{display:block}#nav-links{display:none;position:absolute;left:0;right:0;top:100%;background:#03131f;padding:28px;flex-direction:column;border-bottom:1px solid var(--line)}#nav-links.open{display:flex}.intro{top:24%}.intro h1{font-size:53px}.intro .invitation{font-size:14px}.scroll-hint{font-size:10px}.store-hero{min-height:720px;height:auto;padding-top:85px}.store-hero h2{font-size:clamp(44px,11vw,70px)!important}.store-hero>p:not(.eyebrow){font-size:14px}.hero-actions{gap:20px;flex-direction:column}.hero-mascot{width:260px;height:260px;margin-top:28px}.hero-baseline{font-size:9px}.content-section{padding:60px 5%}.section-heading h2{font-size:20px!important}.section-heading p{font-size:11px}.section-heading{gap:15px}.zone-grid,.product-grid{gap:10px}.zone-card{padding:20px 15px;min-height:320px}.zone-card h3{font-size:20px}.zone-card p{font-size:13px}.card-bottom{font-size:9px}.product-art{height:130px}.product-art span{font-size:62px}.product-info{padding:17px 14px}.product-info h3{font-size:22px}.product-info p{font-size:13px}.product-bottom{flex-wrap:wrap}.sample-tag{font-size:9px;max-width:100px;text-align:right}.about-section{grid-template-columns:1fr;gap:20px}.community-section{padding:75px 20px 50px}.community-section>p:not(.eyebrow){font-size:14px}.community-topics{gap:16px}.community-section img{width:200px;height:200px}footer{padding:35px 5%;gap:25px}footer p{line-height:1.5}dialog{padding:45px 25px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}.zone-card:hover{transform:none}}@media(max-width:350px){.zone-grid,.product-grid{grid-template-columns:1fr}}


/* First-person diver fins: only these move; the fish remains a fixed open-mouth image. */
.diver-fins{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;overflow:hidden}
.diver-fin{position:absolute;bottom:-5%;height:32%;width:auto;max-width:44%;object-fit:contain;transform-origin:50% 100%;filter:brightness(.65);animation:diver-kick 3.8s ease-in-out infinite}
.left-fin{right:50%;margin-right:1.5%;--splay:-9deg}
.right-fin{left:50%;margin-left:1.5%;--splay:9deg;animation-delay:-1.9s}
.diver-fins.paused .diver-fin{animation-play-state:paused}
@keyframes diver-kick{0%,100%{transform:rotate(var(--splay)) translateY(2%) scaleY(.94)}50%{transform:rotate(var(--splay)) translateY(-5%) scaleY(1.04)}}
@media(prefers-reduced-motion:reduce){.diver-fin{animation:none;transform:rotate(var(--splay))}}
/* Dim silhouette and living deep-sea stars. */
.hero-mascot,.community-section>img{filter:brightness(.5) saturate(1.1);opacity:.8}
.store-hero{isolation:isolate;background:radial-gradient(ellipse at center,#06223544,#00081399)}
.jelly-field{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.jelly-field i{position:absolute;left:var(--x);top:var(--y);width:var(--size);max-width:32vw;aspect-ratio:1;background:url('assets/jellyfish-aquarium.webp') center/contain no-repeat;mix-blend-mode:screen;opacity:var(--fade,.5);filter:hue-rotate(var(--hue,0deg)) saturate(.85) blur(var(--blur,0px));animation:jelly-drift var(--d) ease-in-out var(--delay) infinite alternate;will-change:transform}
@keyframes jelly-drift{from{transform:translate(-15px,65px) rotate(-8deg) scale(.9)}to{transform:translate(25px,-95px) rotate(9deg) scale(1.04)}}
@media(prefers-reduced-motion:reduce){.jelly-field i{animation:none}}
/* The portal is the homepage: interface fades onto the same living canvas. */
#portal-home{position:absolute;inset:0;z-index:5;opacity:0;pointer-events:none;overflow:auto}
#portal-home:not([inert]){pointer-events:auto}
#portal-home .site-nav{background:#020d1799}
#portal-home .store-hero{background:none;min-height:0;height:calc(100svh - 80px);max-height:none;padding-top:clamp(40px,10svh,110px)}
#portal-home .store-hero h2{font-size:clamp(52px,9vw,140px)!important}
#portal-home .hero-baseline{bottom:20px}
.home-visible>header,.home-visible>.chapter,.home-visible>.depth,.home-visible>.rail{visibility:hidden}
#beyond.ocean-site{background:radial-gradient(ellipse at 30% 10%,#123c4933,transparent 60%),#020c17}
@media(max-height:600px){#portal-home .store-hero{padding-top:25px}#portal-home .store-hero h2{margin:15px 0!important}#portal-home .hero-baseline{display:none}}

/* ---------------------------------------------- drawn product art */
/* A tech pack, not a photograph: hairline outline, dashed stitch lines,
   one real spec per item. The brand has no photography yet, and a drawing
   that a product engineer would recognise beats a stock image that lies. */
/* the drawing gets the upper box; the labels own a reserved band */
.product-art{box-sizing:border-box;padding:20px 0 30px}
.product-art .flat{display:block;width:100%;height:100%}
.flat .ink{fill:none;stroke:#8fd3ee;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;transition:stroke .35s}
.flat .stitch{stroke:#527f96;stroke-width:1;stroke-dasharray:3 4}
.flat .beam{stroke:#9ce9ff;stroke-width:1;opacity:.5}
.flat text{text-anchor:middle;font-family:'Courier New',monospace;letter-spacing:.16em;fill:#7ba3b8}
.flat .spec{font-size:8px;text-anchor:end;fill:#6f9cb2}
.flat .read{font-size:17px;letter-spacing:.03em;fill:#a9e4ff}
.flat .unit{font-size:6px;fill:#6d97ab}
.product-card{transition:border-color .35s}
.product-card:hover{border-color:#8edcff5c}
.product-card:hover .flat .ink{stroke:#d0f1ff}
.dialog-art{height:180px;margin:16px 0 2px}
.dialog-art .flat{display:block;width:100%;height:180px}
.dialog-item{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#a8c0cb;margin:0 0 16px}

/* ------------------------------------------------------- knowledge */
/* Hairline-topped columns rather than more bordered cards: this section
   is read, not scanned, and it should not look like the shop. */
.know-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:46px}
.know-card{border-top:1px solid var(--line);padding-top:24px}
.know-card h3{font-family:Georgia,'Times New Roman',serif;font-size:21px;font-weight:400;line-height:1.25;letter-spacing:.01em;margin:12px 0 10px}
.know-card p{color:#b4c8d3;font-size:14px;line-height:1.75;margin:0 0 34px}

/* --------------------------------------------------------- gather */
.gather-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gather-card{border:1px solid var(--line);background:#010a13a6;padding:22px}
.gather-card p{color:#b4c8d3;font-size:14px;line-height:1.65;margin:11px 0 0}

/* -------------------------------------------- depth progression */
/* A real ladder: one rail, one node per rung, in the order they happen. */
.ladder{max-width:820px;margin:46px auto 0}
.ladder ol{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);margin:16px 0 0;padding:0}
.ladder li{position:relative;padding:24px 8px 0;text-align:center}
.ladder li::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:#8fd9ee3d}
.ladder li::after{content:"";position:absolute;top:-4px;left:50%;margin-left:-4px;width:8px;height:8px;border-radius:50%;background:#061622;border:1px solid #8edcffa6}
.ladder b{display:flex;align-items:center;justify-content:center;min-height:34px;font-weight:400;font-size:13px;letter-spacing:.05em;line-height:1.3}
.ladder i{display:block;font-style:normal;font-size:11px;line-height:1.5;color:#9ab4c0;margin-top:6px}
.planned{max-width:640px;margin:34px auto 4px;font-size:12.5px;line-height:1.7;color:#a4bac6}

/* ---------------------------------------------------------- stages */
.stages{list-style:none;margin:0;padding:0}
.stages li{display:grid;grid-template-columns:200px 1fr;column-gap:32px;border-top:1px solid var(--line);padding:30px 0}
.stages li .micro{grid-row:1/3;padding-top:5px}
.stages h3{grid-column:2;font-family:Georgia,'Times New Roman',serif;font-size:23px;font-weight:400;letter-spacing:.01em;margin:0 0 9px}
.stages p{grid-column:2;color:#b4c8d3;font-size:14.5px;line-height:1.7;margin:0;max-width:62ch}

/* --------------------------------------------------------- pillars */
.pillars{grid-column:1/-1;list-style:none;display:flex;flex-wrap:wrap;gap:9px 24px;margin:4px 0;padding:0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#9ab4c0}

@media(max-width:1000px){
 .know-grid{grid-template-columns:repeat(2,1fr);column-gap:34px}
 .gather-grid{grid-template-columns:repeat(2,1fr)}
 .stages li{grid-template-columns:150px 1fr;column-gap:22px}
}
@media(max-width:650px){
 .know-grid,.gather-grid{grid-template-columns:1fr}
 .know-card p{margin-bottom:26px}
 .ladder ol{grid-template-columns:repeat(3,1fr);row-gap:26px}
 .stages li{grid-template-columns:1fr;row-gap:10px;padding:24px 0}
 .stages li .micro{grid-row:auto}
 .stages h3,.stages p{grid-column:1}
 .stages h3{font-size:20px}
 .dialog-art,.dialog-art .flat{height:140px}
}