/* ============================================================================ VISION MYCOLOGY One stylesheet. Dark laboratory ground, psychedelic iris accents, hot rim glow lifted from the eye in the brand mark. ========================================================================== */ @font-face{font-family:Archivo;src:url(/fonts/archivo.woff2) format('woff2');font-weight:400 900;font-display:swap} @font-face{font-family:Inter;src:url(/fonts/inter.woff2) format('woff2');font-weight:100 900;font-display:swap} /* ============================================================================ Theme tokens. Two independent axes on : data-mode="dark|dusk|light" the ground data-accent="ember|iris|..." the accent dusk is the half-step: the reading surface lifts to paper but the chrome — header, ticker, footer, drawer — stays dark, so the site still reads as a dark product with a lit page in it. The plate tokens stay dark in every mode on purpose. The irises and the cut-out fruiting photographs are drawn for a dark ground and go muddy on white, so a culture card keeps its dark stage whatever the rest is doing. ========================================================================== */ :root{ /* ground */ --bg:#07080b; --bg-2:#0b0d12; --panel:#111319; --panel-2:#151821; --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.16); /* translucent fills layered on the ground */ --wash:rgba(255,255,255,.024); --wash-2:rgba(255,255,255,.055); --wash-3:rgba(255,255,255,.085); --glass:rgba(13,16,23,.82); --glass-2:rgba(11,13,18,.88); --scrim:rgba(4,5,7,.72); /* ink */ --ink:#f4f1ee; --ink-2:#b3b2b6; --ink-3:#7d7d84; /* chrome: header, ticker, footer, drawer. dusk keeps these dark. */ --chrome:#07080b; --chrome-2:#080a0e; --chrome-ink:#f4f1ee; --chrome-ink-2:#b3b2b6; --chrome-ink-3:#7d7d84; --chrome-line:rgba(255,255,255,.085); --chrome-line-2:rgba(255,255,255,.16); --chrome-wash:rgba(255,255,255,.055); /* the stage a culture is photographed on — dark in every mode */ --plate-a:#151a22; --plate-b:#0a0c11; --plate-c:#191f28; --plate-d:#080a0e; /* accent (see the data-accent blocks below) */ --rim:#ff6a1f; --rim-hi:#ff8f45; --rim-deep:#c53f06; --rim-ink:#1c0700; --rim-rgb:255,106,31; /* fixed brand hues, independent of the accent */ --iris:#2fa8bd; --iris-deep:#06202e; --iris-hi:#7fe0ee; --gold:#e8a13c; --flesh:#f3dcd2; --violet:#a97ee0; /* status */ --ok:#3fbf7f; --warn:#e8b13c; --bad:#e2584a; --r:14px; --r-lg:22px; --shadow:0 24px 70px -28px rgba(0,0,0,.95); --ease:cubic-bezier(.2,.7,.25,1); --hdr-h:70px; --wrap:1280px; --notice-ink:#e9d5a8; --grain-op:.05; --grain-blend:normal; --aurora-op:.5; --aurora-blend:screen; color-scheme:dark; } /* ---- accents ------------------------------------------------------------- */ html[data-accent="iris"] {--rim:#35bcd4;--rim-hi:#6fdcef;--rim-deep:#12708a;--rim-ink:#00181f;--rim-rgb:53,188,212} html[data-accent="spore"] {--rim:#a97ee0;--rim-hi:#c6a6f2;--rim-deep:#6c44a4;--rim-ink:#150826;--rim-rgb:169,126,224} html[data-accent="gold"] {--rim:#e8a13c;--rim-hi:#f6c072;--rim-deep:#a86c15;--rim-ink:#1e1103;--rim-rgb:232,161,60} html[data-accent="bloom"] {--rim:#e8657f;--rim-hi:#f593a7;--rim-deep:#a63450;--rim-ink:#210510;--rim-rgb:232,101,127} /* ---- dusk: lit page, dark chrome ----------------------------------------- */ html[data-mode="dusk"]{ --bg:#efe9e2; --bg-2:#f6f2ec; --panel:#fffdfa; --panel-2:#f3ece4; --line:rgba(28,20,14,.13); --line-2:rgba(28,20,14,.24); --wash:rgba(28,20,14,.035); --wash-2:rgba(28,20,14,.07); --wash-3:rgba(28,20,14,.1); --glass:rgba(255,253,250,.86); --glass-2:rgba(246,242,236,.9); --scrim:rgba(26,18,12,.55); --ink:#1b1712; --ink-2:#4d463e; --ink-3:#7d7469; --shadow:0 22px 60px -30px rgba(40,26,14,.5); --notice-ink:#6b4d12; --grain-op:.045; --grain-blend:multiply; --aurora-op:.3; --aurora-blend:multiply; color-scheme:light; } /* ---- light: the chrome lifts too ----------------------------------------- */ html[data-mode="light"]{ --bg:#f4f0ea; --bg-2:#fbf8f4; --panel:#fffefc; --panel-2:#f5efe7; --line:rgba(28,20,14,.13); --line-2:rgba(28,20,14,.24); --wash:rgba(28,20,14,.035); --wash-2:rgba(28,20,14,.07); --wash-3:rgba(28,20,14,.1); --glass:rgba(255,254,252,.86); --glass-2:rgba(251,248,244,.9); --scrim:rgba(26,18,12,.55); --ink:#1b1712; --ink-2:#4d463e; --ink-3:#7d7469; --chrome:#fbf8f4; --chrome-2:#f4f0ea; --chrome-ink:#1b1712; --chrome-ink-2:#4d463e; --chrome-ink-3:#7d7469; --chrome-line:rgba(28,20,14,.13); --chrome-line-2:rgba(28,20,14,.24); --chrome-wash:rgba(28,20,14,.07); --shadow:0 22px 60px -30px rgba(40,26,14,.45); --notice-ink:#6b4d12; --grain-op:.04; --grain-blend:multiply; --aurora-op:.26; --aurora-blend:multiply; color-scheme:light; } *,*::before,*::after{box-sizing:border-box} /* .drawer and .palette set display, which would otherwise beat the UA [hidden] rule and leave them permanently on screen. */ [hidden]{display:none!important} /* The canvas takes its colour from rather than propagating body's. Anything painted beside the page — a pinch-zoom that goes below fit-width, an over-scroll, a browser that lays out wider than the visual viewport — then shows the chrome colour and blends into the header and footer, instead of a bright cream band down one side in dusk. */ html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--chrome)} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } body{ margin:0;background:var(--bg);color:var(--ink); font:400 16px/1.62 Inter,system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; /* NOT overflow-x:clip, and NOT set on : on the root that kills vertical scrolling outright. On body it propagates to the viewport and stops sideways panning while leaving the page scrollable. */ overflow-x:hidden; } body.locked{overflow:hidden} /* height:auto matters: the width/height attributes in the markup are applied as presentational hints, so an image whose width CSS overrides but whose height it does not will stretch as the viewport narrows. Rules that genuinely need a fixed height are more specific and still win. */ img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer} :focus-visible{outline:2px solid var(--rim);outline-offset:3px;border-radius:6px} #main:focus{outline:none} ::selection{background:rgba(var(--rim-rgb),.32)} .skip{position:fixed;left:-999px;top:0;z-index:200;background:var(--rim);color:var(--rim-ink);padding:12px 18px;font-weight:700} .skip:focus{left:8px;top:8px} .wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto} @media (max-width:640px){.wrap{width:min(100% - 28px,var(--wrap))}} /* ---- atmosphere ---------------------------------------------------------- */ .grain{ position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--grain-op);mix-blend-mode:var(--grain-blend); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 7s steps(6) infinite; } @keyframes grain{0%,100%{background-position:0 0}20%{background-position:-32px 18px}40%{background-position:24px -30px}60%{background-position:-18px -22px}80%{background-position:30px 26px}} .aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;filter:blur(70px);opacity:var(--aurora-op)} .aurora i{position:absolute;display:block;border-radius:50%;mix-blend-mode:var(--aurora-blend);animation:drift 34s var(--ease) infinite alternate} .aurora i:nth-child(1){width:46vw;height:46vw;left:-8vw;top:-10vw;background:radial-gradient(circle,rgba(var(--rim-rgb),.5),transparent 66%)} .aurora i:nth-child(2){width:52vw;height:52vw;right:-12vw;top:14vh;background:radial-gradient(circle,rgba(47,168,189,.42),transparent 66%);animation-delay:-11s} .aurora i:nth-child(3){width:38vw;height:38vw;left:26vw;bottom:-14vw;background:radial-gradient(circle,rgba(169,126,224,.3),transparent 66%);animation-delay:-21s} @keyframes drift{to{transform:translate3d(6vw,-5vh,0) scale(1.18)}} /* ---- ticker -------------------------------------------------------------- */ .ticker{position:relative;z-index:12;background:linear-gradient(90deg,var(--rim-deep),var(--rim),var(--rim-hi),var(--rim));overflow:hidden;height:32px;display:flex;align-items:center} .ticker-track{display:flex;gap:56px;white-space:nowrap;animation:roll 42s linear infinite;padding-left:56px} .ticker-track span{font:700 11px/1 Archivo,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--rim-ink)} @keyframes roll{to{transform:translateX(-50%)}} /* ---- header -------------------------------------------------------------- */ .hdr{position:sticky;top:0;z-index:40;backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5); background:linear-gradient(color-mix(in srgb,var(--chrome) 93%,transparent),color-mix(in srgb,var(--chrome) 80%,transparent)); border-bottom:1px solid var(--chrome-line);transition:box-shadow .3s;color:var(--chrome-ink)} .hdr.stuck{box-shadow:0 14px 40px -26px rgba(0,0,0,.7)} .hdr-in{display:flex;align-items:center;gap:26px;height:var(--hdr-h)} .brand{flex:0 0 auto;display:flex;align-items:center} .brand-logo{height:42px;width:auto;filter:drop-shadow(0 3px 14px rgba(var(--rim-rgb),.4))} /* The wordmark is white with an orange glow, drawn for a dark ground — on a light header it disappears. Rather than recolour the vendor's artwork, it gets its own dark plate wherever the chrome is light. */ html[data-mode="light"] .brand{background:#0d0f13;padding:5px 13px;border-radius:13px; box-shadow:0 2px 10px -4px rgba(40,26,14,.5)} html[data-mode="light"] .ftr-brand{display:inline-block;background:#0d0f13;padding:16px 20px; border-radius:var(--r);margin-bottom:6px} html[data-mode="light"] .ftr-brand .ftr-mission{color:#b3b2b6} html[data-mode="light"] .ftr-brand .ftr-loc{color:#7d7d84} html[data-mode="light"] .ftr-brand .ftr-loc strong{color:#f4f1ee} .nav{display:flex;gap:4px;margin-left:8px;flex:1} .nav a{position:relative;padding:9px 15px;border-radius:10px;font:600 13.5px/1 Inter,sans-serif;letter-spacing:.02em;color:var(--chrome-ink-2);transition:color .2s,background .2s} .nav a:hover{color:var(--chrome-ink);background:var(--chrome-wash)} .nav a.on{color:var(--chrome-ink)} .nav a.on::after{content:'';position:absolute;left:15px;right:15px;bottom:2px;height:2px;border-radius:2px;background:var(--rim);box-shadow:0 0 12px var(--rim)} .hdr-act{display:flex;align-items:center;gap:6px} .ico{position:relative;width:40px;height:40px;display:grid;place-items:center;border-radius:11px;color:var(--chrome-ink-2);border:1px solid transparent;transition:.2s var(--ease)} .ico:hover{color:var(--ink);background:var(--wash-2);border-color:var(--line)} .badge{position:absolute;top:1px;right:1px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--rim);color:var(--rim-ink);font:800 10px/17px Inter,sans-serif;text-align:center;box-shadow:0 0 12px rgba(var(--rim-rgb),.8)} .ico .dot{position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)} .burger{display:none;flex-direction:column;gap:4px} .burger span{width:17px;height:2px;background:currentColor;border-radius:2px;transition:.25s var(--ease)} .burger[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .burger[aria-expanded=true] span:nth-child(2){opacity:0} .burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* The header carries a 42px-tall wordmark plus five 40px controls. That needs ~397px of bar, which overflows a 360px phone and leaves a scrollable gutter down the right-hand side. Shrink both below 560px. */ @media (max-width:560px){ .hdr-in{gap:8px} .brand-logo{height:32px} .hdr-act{gap:2px} .ico{width:34px;height:34px;border-radius:9px} .ico svg{width:17px;height:17px} .badge{min-width:15px;height:15px;font-size:9px;line-height:15px} } @media (max-width:900px){ .burger{display:flex} /* translateY alone is not enough: the panel is taller than the distance it travels, so its last item stays poking out over the header. visibility closes that gap and keeps the closed menu out of the tab order. */ .nav{position:fixed;inset:calc(var(--hdr-h) + 32px) 0 auto 0;flex-direction:column;gap:2px;padding:14px 20px 22px; background:var(--glass-2);backdrop-filter:blur(20px);border-bottom:1px solid var(--line); transform:translateY(-100%);visibility:hidden; transition:transform .38s var(--ease),visibility .38s var(--ease);z-index:39} .nav.open{transform:none;visibility:visible} .nav a{padding:14px 12px;font-size:17px} .nav a.on::after{left:12px;right:auto;width:18px} } /* ---- type ---------------------------------------------------------------- */ h1,h2,h3,h4{font-family:Archivo,sans-serif;font-weight:800;line-height:1.03;letter-spacing:-.025em;margin:0} h1{font-size:clamp(38px,7vw,84px)} h2{font-size:clamp(28px,4.2vw,50px)} h3{font-size:clamp(19px,2.1vw,25px);letter-spacing:-.015em} h4{font-size:15px;letter-spacing:.01em} p{margin:0 0 1em} .eyebrow{font:700 11px/1 Archivo,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:var(--rim);display:flex;align-items:center;gap:10px;margin-bottom:18px} .eyebrow::before{content:'';width:24px;height:1px;background:var(--rim);box-shadow:0 0 10px var(--rim)} .lede{font-size:clamp(16px,1.6vw,19px);color:var(--ink-2);max-width:62ch;line-height:1.65} .mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.82em;letter-spacing:.02em} .sec{position:relative;z-index:1;padding:clamp(64px,9vw,124px) 0} /* the ticker and header already separate the page top, so the first section does not need the full rhythm above it */ main>.sec:first-child{padding-top:clamp(34px,4.5vw,62px)} .sec-head{margin-bottom:clamp(30px,4vw,52px)} .sec-head .row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap} /* ---- buttons ------------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 24px;border-radius:11px; font:700 14px/1 Inter,sans-serif;letter-spacing:.01em;border:1px solid var(--line-2);color:var(--ink); transition:.22s var(--ease);cursor:pointer;white-space:nowrap} .btn:hover{border-color:var(--line-2);background:var(--wash-2);transform:translateY(-1px)} .btn-primary{background:linear-gradient(180deg,var(--rim-hi),var(--rim));border-color:transparent;color:var(--rim-ink); box-shadow:0 10px 30px -12px rgba(var(--rim-rgb),.85)} .btn-primary:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--rim-hi) 78%,#fff),var(--rim-hi));box-shadow:0 14px 34px -10px rgba(var(--rim-rgb),.95)} .btn-ghost{border-color:var(--line)} .btn-sm{padding:9px 15px;font-size:12.5px;border-radius:9px} .btn-lg{padding:16px 30px;font-size:15px} .btn-block{display:flex;width:100%} .btn[disabled]{opacity:.42;pointer-events:none} /* ---- hero ---------------------------------------------------------------- */ .hero{position:relative;z-index:1;padding:clamp(46px,7vw,86px) 0 clamp(50px,7vw,96px);overflow:hidden} .hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,4vw,60px);align-items:center} .hero-grid>*{min-width:0} .hero h1{margin:0 0 22px} .hero h1 .glow{background:linear-gradient(92deg,var(--rim-hi),var(--gold) 55%,var(--iris-hi));-webkit-background-clip:text;background-clip:text;color:transparent} .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px} .hero-stats{display:flex;gap:30px;flex-wrap:wrap;margin-top:42px;padding-top:26px;border-top:1px solid var(--line)} .hero-stats div b{display:block;font:800 27px/1 Archivo,sans-serif;color:var(--ink)} .hero-stats div span{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)} .hero-art{position:relative;aspect-ratio:1;display:grid;place-items:center} .hero-orb{position:absolute;inset:6%;border-radius:50%; background:radial-gradient(circle at 38% 32%,rgba(var(--rim-rgb),.28),transparent 62%);filter:blur(26px)} /* The brand artwork, used exactly as supplied — no shadow, tint or crop laid over it. Only the size changes. */ .hero-eye{position:relative;width:92%;height:auto;animation:breathe 9s var(--ease) infinite alternate} @keyframes breathe{to{transform:translateY(-14px) scale(1.035)}} .hero-pouch{position:absolute;right:-7%;bottom:-5%;width:36%;filter:drop-shadow(0 26px 48px rgba(0,0,0,.8)); animation:float 11s var(--ease) infinite alternate} @keyframes float{to{transform:translateY(-18px) rotate(-3deg)}} .hero-chip{position:absolute;display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:11px; background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--line-2);font:600 11.5px/1 Inter,sans-serif; letter-spacing:.04em;box-shadow:var(--shadow);white-space:nowrap} .hero-chip b{color:var(--rim)} .hero-chip.c1{left:-4%;top:16%;animation:float 8s var(--ease) infinite alternate} .hero-chip.c2{left:2%;bottom:20%;animation:float 10s -3s var(--ease) infinite alternate} @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:34px} .hero-art{order:-1;max-width:420px;margin-inline:auto;width:100%} .hero-chip.c1{left:0;top:6%}.hero-chip.c2{left:0;bottom:8%} /* smaller and pushed further out, so it stops sitting over the iris */ .hero-pouch{width:36%;right:-5%;bottom:-6%} } /* ---- marquee of families ------------------------------------------------- */ .strip{position:relative;z-index:1;border-block:1px solid var(--chrome-line);background:linear-gradient(var(--plate-b),var(--plate-d));overflow:hidden;padding:16px 0} .strip-track{display:flex;gap:44px;white-space:nowrap;animation:roll 46s linear infinite;align-items:center} .strip-track span{font:800 13px/1 Archivo,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)} .strip-track i{width:5px;height:5px;border-radius:50%;background:var(--rim);flex:0 0 auto;box-shadow:0 0 10px var(--rim)} /* ---- cards --------------------------------------------------------------- */ .grid{display:grid;gap:clamp(14px,1.6vw,22px)} .g-4{grid-template-columns:repeat(4,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} .g-2{grid-template-columns:repeat(2,1fr)} @media (max-width:1080px){.g-4{grid-template-columns:repeat(3,1fr)}} @media (max-width:860px){.g-4,.g-3{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.g-4,.g-3,.g-2{grid-template-columns:1fr}} .card{position:relative;background:linear-gradient(165deg,var(--panel),var(--bg-2));border:1px solid var(--line); border-radius:var(--r-lg);overflow:hidden;transition:.3s var(--ease);display:flex;flex-direction:column} .card:hover{border-color:rgba(var(--rim-rgb),.4);transform:translateY(-4px);box-shadow:var(--shadow),0 0 44px -20px rgba(var(--rim-rgb),.6)} /* ---- the double-sided culture card -------------------------------------- The iris is the front, the fruiting photograph is the back. Two ways to turn it, because one was not enough: tap the corner button for an exact, instant flip, or drag across the card and the rotation tracks your finger. Hover deliberately does NOT flip — it used to, and it fought the drag: releasing a drag left the cursor on the card, so the hover rule turned it straight back and it snapped again when the mouse left. Six of the newest strains have no photograph anywhere, so they never get .can-flip and simply do not turn. */ .card-art{position:relative;aspect-ratio:1;overflow:hidden;perspective:1200px; background:radial-gradient(circle at 50% 42%,var(--plate-a),var(--plate-b) 70%)} .card-art>a{position:absolute;inset:0;display:block} .card-art.can-flip>a{touch-action:pan-y} /* keep vertical scrolling */ /* stop the browser starting a native link/image drag mid-gesture */ .card-art,.card-art a,.card-art img{user-select:none;-webkit-user-select:none; -webkit-user-drag:none;-webkit-touch-callout:none} .flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d; transition:transform .5s cubic-bezier(.22,.9,.28,1);will-change:transform} .card-art.dragging .flip-inner{transition:none} /* follow the finger exactly */ .card-art.flipped .flip-inner{transform:rotateY(180deg)} /* The tiny translateZ keeps the faces off one plane. Coplanar faces z-fight through the halfway point of the turn and flicker. */ .face{position:absolute;inset:0;display:grid;place-items:center; backface-visibility:hidden;-webkit-backface-visibility:hidden; transform:translateZ(.6px)} .face.back{transform:rotateY(180deg) translateZ(.6px); background:radial-gradient(circle at 50% 45%,var(--plate-c),var(--plate-d) 72%)} .face .iris-svg{width:78%;height:auto} .face img{width:100%;height:100%;object-fit:cover} /* the cubensis shots are cut-outs on a transparent ground — cropping them to fill would slice the caps off, so they are contained and floated instead */ .face img.cut{object-fit:contain;padding:6%; filter:drop-shadow(0 18px 30px rgba(0,0,0,.8)) drop-shadow(0 0 46px rgba(var(--rim-rgb),.13))} /* The explicit control. Always visible, always the same size, and it reads its state out loud — this is the reliable way to turn a card. */ .flip-btn{position:absolute;right:9px;top:9px;z-index:3;display:grid;place-items:center; width:34px;height:34px;border-radius:11px;background:rgba(10,12,17,.72); border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);color:#fff; transition:.2s var(--ease);cursor:pointer} .flip-btn:hover{background:var(--rim);border-color:transparent;color:var(--rim-ink);transform:scale(1.06)} .flip-btn:active{transform:scale(.94)} .flip-btn svg{transition:transform .5s var(--ease)} .card-art.flipped .flip-btn svg{transform:rotate(180deg)} .flip-btn .lbl{position:absolute;right:calc(100% + 7px);white-space:nowrap; font:700 9.5px/1 Archivo,sans-serif;letter-spacing:.14em;text-transform:uppercase; background:rgba(10,12,17,.82);color:#fff;padding:6px 8px;border-radius:7px; opacity:0;transform:translateX(4px);transition:.22s var(--ease);pointer-events:none} @media (hover:hover){.flip-btn:hover .lbl{opacity:1;transform:none}} .card-body{padding:16px 17px 18px;display:flex;flex-direction:column;gap:9px;flex:1} .card-title{font:800 16.5px/1.2 Archivo,sans-serif;letter-spacing:-.01em} .card-sub{font-size:12.5px;color:var(--ink-3);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:6px} .card-fam{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3); text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46%} .price{display:flex;align-items:baseline;gap:7px;font-family:Archivo,sans-serif} .price b{font-size:19px;font-weight:800} .price s{font-size:13px;color:var(--ink-3);font-weight:600} .price .was{color:var(--ink-3)} .tags{position:absolute;top:11px;left:11px;display:flex;flex-direction:column;gap:5px;align-items:flex-start;z-index:2} .tag{padding:4px 9px;border-radius:7px;font:800 9.5px/1 Archivo,sans-serif;letter-spacing:.14em;text-transform:uppercase; backdrop-filter:blur(8px);border:1px solid transparent} .tag-sale{background:rgba(var(--rim-rgb),.92);color:var(--rim-ink)} .tag-new{background:rgba(47,168,189,.9);color:#02191f} .tag-out{background:rgba(20,20,24,.86);color:var(--ink-2);border-color:var(--line-2)} .tag-ltd{background:rgba(169,126,224,.9);color:#180a2a} .card-add{position:absolute;right:11px;bottom:11px;width:38px;height:38px;border-radius:11px;display:grid;place-items:center; background:var(--glass);border:1px solid var(--line-2);backdrop-filter:blur(8px);color:var(--ink); opacity:0;transform:translateY(8px);transition:.28s var(--ease);z-index:2} .card-art:hover .card-add,.card:focus-within .card-add{opacity:1;transform:none} .card-add:hover{background:var(--rim);color:var(--rim-ink);border-color:transparent} @media (hover:none){.card-add{opacity:1;transform:none}} /* ---- filter bar ---------------------------------------------------------- */ .filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:26px; position:sticky;top:calc(var(--hdr-h) + 6px);z-index:20;padding:12px;border-radius:var(--r); background:var(--glass-2);backdrop-filter:blur(16px);border:1px solid var(--line)} .chip{padding:8px 14px;border-radius:9px;border:1px solid var(--line);font:600 12.5px/1 Inter,sans-serif; color:var(--ink-2);transition:.2s var(--ease);white-space:nowrap} .chip:hover{color:var(--ink);border-color:var(--line-2);background:var(--wash-2)} .chip.on{background:var(--rim);border-color:transparent;color:var(--rim-ink);font-weight:800;box-shadow:0 0 22px -6px rgba(var(--rim-rgb),.9)} .filters .spacer{flex:1 1 0;min-width:0} .filters .tools{display:flex;gap:8px;flex:0 0 auto;align-items:center} .filters select,.filters input[type=search]{background:var(--panel-2);border:1px solid var(--line);border-radius:9px; padding:9px 12px;font-size:13px;color:var(--ink);min-width:0} .filters input[type=search]{width:170px} @media (max-width:820px){.filters .tools{width:100%}.filters input[type=search]{flex:1;width:auto}} .filters select:focus,.filters input:focus{border-color:var(--rim);outline:none} .count{font-size:12px;color:var(--ink-3);letter-spacing:.04em} @media (max-width:700px){.filters{position:static}} /* ---- product page -------------------------------------------------------- */ .pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,58px);align-items:start} .pdp>*{min-width:0} @media (max-width:900px){.pdp{grid-template-columns:1fr}} .pdp-art{position:sticky;top:calc(var(--hdr-h) + 24px);border-radius:var(--r-lg);overflow:hidden; border:1px solid var(--line);background:radial-gradient(circle at 50% 40%,var(--plate-a),var(--plate-b) 72%)} @media (max-width:900px){.pdp-art{position:static}} .pdp-stage{aspect-ratio:1;display:grid;place-items:center;position:relative;padding:8%} .pdp-stage .iris-svg{width:100%;height:auto;filter:drop-shadow(0 24px 50px rgba(0,0,0,.7))} .pdp-stage img{max-width:100%;max-height:100%;width:auto;object-fit:contain; filter:drop-shadow(0 24px 50px rgba(0,0,0,.7));animation:shotIn .4s var(--ease)} .pdp-stage img.cut{filter:drop-shadow(0 26px 40px rgba(0,0,0,.85)) drop-shadow(0 0 60px rgba(var(--rim-rgb),.16))} @keyframes shotIn{from{opacity:0;transform:scale(.97)}} .pdp-thumbs button img{object-fit:contain;padding:4px} .pdp-thumbs{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--plate-b)} .pdp-thumbs button{width:62px;height:62px;border-radius:10px;overflow:hidden;border:1px solid var(--line); background:var(--panel-2);display:grid;place-items:center;transition:.2s var(--ease);flex:0 0 auto} .pdp-thumbs button.on{border-color:var(--rim);box-shadow:0 0 18px -6px var(--rim)} .pdp-thumbs button .iris-svg,.pdp-thumbs button img{width:100%;height:100%;object-fit:cover} .pdp-head h1{font-size:clamp(30px,4.6vw,54px);margin-bottom:12px} .pdp-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px} .pill{padding:5px 11px;border-radius:8px;border:1px solid var(--line);font:600 11px/1.4 Inter,sans-serif; letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);background:var(--wash)} .pill.iris{border-color:rgba(47,168,189,.4);color:var(--iris-hi)} .pill.rim{border-color:rgba(var(--rim-rgb),.45);color:var(--rim-hi)} .pdp-price{display:flex;align-items:baseline;gap:12px;margin:22px 0} .pdp-price b{font:800 40px/1 Archivo,sans-serif} .pdp-price s{font-size:19px;color:var(--ink-3)} .pdp-price .save{padding:5px 10px;border-radius:8px;background:rgba(var(--rim-rgb),.16);color:var(--rim-hi); font:800 11px/1 Archivo,sans-serif;letter-spacing:.1em;text-transform:uppercase} .pdp-buy{display:flex;gap:10px;align-items:stretch;margin:24px 0;flex-wrap:wrap} .pdp-buy .btn{min-width:0} /* the CTA sizes from CSS, not an inline style, or the mobile rule below cannot win and the label gets squeezed into a 95px box it will not wrap inside */ .pdp-buy .btn-primary{flex:1 1 auto} @media (max-width:560px){ .pdp-buy .qty{order:1} .pdp-buy #libBtn{order:2;margin-left:auto} .pdp-buy .btn-primary{order:3;flex:1 0 100%} } .qty{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:11px;overflow:hidden} .qty button{width:42px;display:grid;place-items:center;font-size:18px;color:var(--ink-2);transition:.2s} .qty button:hover{background:var(--wash-2);color:var(--ink)} .qty input{width:48px;text-align:center;background:none;border:0;font-weight:700} .qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .prose{color:var(--ink-2);line-height:1.72;overflow-wrap:anywhere} .prose p{margin:0 0 1.05em} .spec{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:26px 0;padding:20px;border-radius:var(--r); border:1px solid var(--line);background:var(--wash);font-size:13.5px} .spec dt{color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;font-size:11px;padding-top:3px} .spec dd{margin:0;font-weight:600;min-width:0;overflow-wrap:anywhere} .notice{padding:15px 17px;border-radius:var(--r);border:1px solid rgba(232,177,60,.32); background:rgba(232,177,60,.09);font-size:13.2px;color:var(--notice-ink);line-height:1.6} .notice strong{color:var(--warn)} /* ---- accordion ----------------------------------------------------------- */ .acc{border-top:1px solid var(--line)} .acc details{border-bottom:1px solid var(--line)} .acc summary{padding:17px 0;cursor:pointer;font:700 14.5px/1 Inter,sans-serif;display:flex;justify-content:space-between; align-items:center;list-style:none} .acc summary::-webkit-details-marker{display:none} .acc summary::after{content:'+';font-size:20px;color:var(--rim);transition:.25s var(--ease)} .acc details[open] summary::after{transform:rotate(45deg)} .acc .acc-body{padding:0 0 20px;color:var(--ink-2);font-size:14px;line-height:1.7;overflow-wrap:anywhere} /* ---- feature panels ------------------------------------------------------ */ .panel{border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(165deg,var(--panel),var(--bg-2)); padding:clamp(20px,2.6vw,34px)} .panel h3{margin-bottom:10px} .panel p{color:var(--ink-2);font-size:14.5px;margin:0} .panel .n{font:800 12px/1 Archivo,sans-serif;color:var(--rim);letter-spacing:.2em;margin-bottom:16px;display:block} .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);align-items:center} .split>*{min-width:0} @media (max-width:860px){.split{grid-template-columns:1fr}} .media{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);position:relative} .media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3} .media.tall img{aspect-ratio:3/4} /* ---- pack builder -------------------------------------------------------- */ .builder{display:grid;grid-template-columns:1fr 340px;gap:26px;align-items:start} .builder>*{min-width:0} @media (max-width:960px){.builder{grid-template-columns:1fr}} .pick{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:11px;border:1px solid var(--line); background:var(--wash);transition:.2s var(--ease);cursor:pointer;text-align:left;width:100%} .pick:hover{border-color:var(--line-2);background:var(--wash-2)} .pick.on{border-color:var(--rim);background:rgba(var(--rim-rgb),.1)} .pick .iris-svg{width:38px;height:38px;flex:0 0 auto;border-radius:50%} .pick-name{font:700 13.5px/1.25 Inter,sans-serif;flex:1;min-width:0} .pick-name small{display:block;font-weight:500;color:var(--ink-3);font-size:11px;letter-spacing:.05em} .pick .mark{width:22px;height:22px;border-radius:7px;border:1px solid var(--line-2);display:grid;place-items:center; flex:0 0 auto;font-size:13px;color:transparent;transition:.2s} .pick.on .mark{background:var(--rim);border-color:transparent;color:var(--rim-ink)} .tray{position:sticky;top:calc(var(--hdr-h) + 22px);border:1px solid var(--line);border-radius:var(--r-lg); background:linear-gradient(165deg,var(--panel),var(--bg-2));padding:20px;box-shadow:var(--shadow)} @media (max-width:960px){.tray{position:static}} .tray-slots{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 18px} .slot{width:38px;height:38px;border-radius:50%;border:1px dashed var(--line-2);display:grid;place-items:center; font-size:10px;color:var(--ink-3);overflow:hidden} .slot.full{border-style:solid;border-color:var(--rim)} .slot .iris-svg{width:100%;height:100%} .meter{height:6px;border-radius:4px;background:var(--wash-3);overflow:hidden;margin-bottom:6px} .meter i{display:block;height:100%;background:linear-gradient(90deg,var(--rim),var(--gold));transition:width .4s var(--ease)} /* ---- drawer + scrim ------------------------------------------------------ */ .scrim{position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(4px);z-index:60;animation:fade .3s var(--ease)} @keyframes fade{from{opacity:0}} .drawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);z-index:61;display:flex;flex-direction:column; background:var(--chrome);color:var(--chrome-ink);border-left:1px solid var(--chrome-line); box-shadow:-30px 0 80px -30px rgba(0,0,0,.7);animation:slide .38s var(--ease)} @keyframes slide{from{transform:translateX(100%)}} .drawer header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--chrome-line)} .drawer header h3{font-size:18px} .drawer header .ico{font-size:26px;line-height:1} .drawer-body{flex:1;overflow-y:auto;padding:16px 20px} .drawer footer{padding:18px 20px;border-top:1px solid var(--chrome-line);background:var(--chrome-2)} .line{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid var(--line)} .line .iris-svg,.line img{width:56px;height:56px;border-radius:11px;flex:0 0 auto;object-fit:cover;background:var(--panel-2)} .line-main{flex:1;min-width:0} .line-main b{display:block;font:700 13.5px/1.3 Inter,sans-serif;margin-bottom:3px} .line-main small{color:var(--ink-3);font-size:11.5px;letter-spacing:.04em} .line-qty{display:flex;align-items:center;gap:8px;margin-top:7px} .line-qty button{width:24px;height:24px;border-radius:7px;border:1px solid var(--line);display:grid;place-items:center; font-size:14px;color:var(--ink-2);transition:.2s} .line-qty button:hover{background:var(--wash-2);color:var(--ink)} .line-qty span{font-size:12.5px;font-weight:700;min-width:16px;text-align:center} .line-price{text-align:right;font:800 14px/1 Archivo,sans-serif;white-space:nowrap} .line-rm{display:block;margin-top:8px;font-size:11px;color:var(--ink-3);letter-spacing:.04em;transition:.2s} .line-rm:hover{color:var(--bad)} .totals{display:flex;flex-direction:column;gap:7px;margin-bottom:15px;font-size:13.5px} .totals div{display:flex;justify-content:space-between} .totals .grand{font:800 19px/1 Archivo,sans-serif;padding-top:11px;border-top:1px solid var(--line);margin-top:5px} .empty{text-align:center;padding:56px 20px;color:var(--ink-3)} .empty img{width:88px;margin:0 auto 18px;opacity:.5} /* ---- search palette ------------------------------------------------------ */ .palette{position:fixed;inset:0;z-index:80;background:var(--scrim);backdrop-filter:blur(8px); padding:12vh 20px 20px;animation:fade .2s var(--ease)} .palette-box{width:min(620px,100%);margin-inline:auto;background:var(--bg-2);border:1px solid var(--line-2); border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)} .palette input{width:100%;padding:19px 22px;background:none;border:0;font-size:17px;border-bottom:1px solid var(--line)} .palette input:focus{outline:none} .palette-results{max-height:52vh;overflow-y:auto} .presult{display:flex;align-items:center;gap:12px;padding:11px 18px;border-bottom:1px solid var(--line); transition:.15s;cursor:pointer;width:100%;text-align:left} .presult:hover,.presult.sel{background:rgba(var(--rim-rgb),.11)} .presult .iris-svg{width:34px;height:34px;flex:0 0 auto} .presult b{font:700 13.5px/1.3 Inter,sans-serif;display:block} .presult small{color:var(--ink-3);font-size:11.5px} .presult .p{margin-left:auto;font:800 13px/1 Archivo,sans-serif;color:var(--rim-hi)} /* ---- appearance panel ---------------------------------------------------- */ .appear{position:fixed;top:calc(var(--hdr-h) + 40px);right:16px;z-index:70;width:min(300px,calc(100vw - 32px)); padding:18px;border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line-2); box-shadow:var(--shadow);animation:pop .26s var(--ease);color:var(--ink)} @keyframes pop{from{opacity:0;transform:translateY(-10px) scale(.97)}} .appear h4{font:700 10.5px/1 Archivo,sans-serif;letter-spacing:.2em;text-transform:uppercase; color:var(--ink-3);margin:0 0 11px} .appear h4+*{margin-bottom:20px} .swatches{display:flex;gap:9px;flex-wrap:wrap} .swatch{width:38px;height:38px;border-radius:12px;border:2px solid transparent;position:relative; transition:.2s var(--ease);display:grid;place-items:center} .swatch i{width:100%;height:100%;border-radius:9px;display:block} .swatch:hover{transform:translateY(-2px)} .swatch.on{border-color:var(--ink)} .swatch.on::after{content:'';position:absolute;inset:0;border-radius:12px; box-shadow:0 0 0 2px var(--panel) inset} .modes{display:grid;grid-template-columns:repeat(3,1fr);gap:7px} .mode{padding:11px 6px 9px;border-radius:12px;border:1px solid var(--line);background:var(--wash); transition:.2s var(--ease);display:flex;flex-direction:column;align-items:center;gap:7px; font:700 10.5px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} .mode:hover{border-color:var(--line-2);color:var(--ink-2)} .mode.on{border-color:var(--rim);color:var(--rim-hi);background:rgba(var(--rim-rgb),.1)} /* a two-band chip: top is the chrome, bottom the reading surface, which is exactly what separates dusk from the other two */ .mode .chip2{width:100%;height:26px;border-radius:7px;overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column} .mode .chip2 b{display:block;flex:1} /* ---- age / research gate ------------------------------------------------- */ .gate{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:20px; background:rgba(4,5,7,.9);backdrop-filter:blur(14px);animation:fade .35s var(--ease)} .gate-box{width:min(520px,100%);text-align:center;padding:clamp(28px,4vw,42px);border-radius:var(--r-lg); background:linear-gradient(165deg,var(--panel),var(--bg-2));border:1px solid var(--line-2);box-shadow:var(--shadow)} .gate-box img{margin:0 auto 20px;filter:drop-shadow(0 10px 26px rgba(var(--rim-rgb),.4))} .gate-box h2{font-size:clamp(24px,3.4vw,32px);margin-bottom:16px} .gate-box p{color:var(--ink-2);font-size:14.5px;line-height:1.68} .gate-box strong{color:var(--ink)} .gate-states{font-size:13px;color:var(--ink-3);padding-top:14px;margin-top:4px;border-top:1px solid var(--line)} .gate-act{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px} /* ---- toasts -------------------------------------------------------------- */ .toaster{position:fixed;right:16px;bottom:16px;z-index:120;display:flex;flex-direction:column;gap:9px;pointer-events:none} .toast{display:flex;align-items:center;gap:11px;padding:13px 17px;border-radius:12px;background:var(--glass); border:1px solid var(--line-2);backdrop-filter:blur(14px);box-shadow:var(--shadow);font-size:13.5px;font-weight:600; animation:toastIn .34s var(--ease);max-width:340px} .toast.ok{border-color:rgba(63,191,127,.4)} .toast.warn{border-color:rgba(232,177,60,.4)} .toast .iris-svg{width:30px;height:30px;flex:0 0 auto} @keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.96)}} /* ---- auth + dashboard ---------------------------------------------------- */ .auth{max-width:460px;margin:0 auto;padding:clamp(26px,4vw,40px);border:1px solid var(--line); border-radius:var(--r-lg);background:linear-gradient(165deg,var(--panel),var(--bg-2));box-shadow:var(--shadow)} .auth h2{font-size:27px;margin-bottom:8px} .auth p.sub{color:var(--ink-3);font-size:13.5px;margin-bottom:24px} .field{margin-bottom:15px} .field label{display:block;font:600 11px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-3);margin-bottom:8px} .field input,.field textarea,.field select{width:100%;padding:12px 14px;border-radius:11px;background:var(--panel-2); border:1px solid var(--line);transition:.2s;font-size:14.5px} .field input:focus,.field textarea:focus,.field select:focus{border-color:var(--rim);outline:none; box-shadow:0 0 0 3px rgba(var(--rim-rgb),.14)} .field textarea{min-height:96px;resize:vertical;line-height:1.6} .field .err{color:var(--bad);font-size:12px;margin-top:6px;display:none} .field.bad input{border-color:var(--bad)} .field.bad .err{display:block} .tabs{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--wash-2);margin-bottom:22px} .tabs button{flex:1;padding:9px;border-radius:9px;font:700 13px/1 Inter,sans-serif;color:var(--ink-3);transition:.2s} .tabs button.on{background:var(--panel-2);color:var(--ink);box-shadow:0 2px 10px -4px #000} .dash{display:grid;grid-template-columns:236px 1fr;gap:26px;align-items:start} .dash>*{min-width:0} @media (max-width:900px){.dash{grid-template-columns:1fr}} .dash-side{border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(165deg,var(--panel),var(--bg-2)); padding:16px;position:sticky;top:calc(var(--hdr-h) + 22px)} @media (max-width:900px){.dash-side{position:static}} .dash-user{display:flex;align-items:center;gap:11px;padding-bottom:15px;margin-bottom:12px;border-bottom:1px solid var(--line)} .avatar{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto; background:linear-gradient(140deg,var(--rim),var(--gold));color:var(--rim-ink);font:800 17px/1 Archivo,sans-serif} .dash-user b{display:block;font:700 14px/1.2 Inter,sans-serif} .dash-user small{color:var(--ink-3);font-size:11.5px} .dash-nav{display:flex;flex-direction:column;gap:2px} .dash-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font:600 13.5px/1 Inter,sans-serif; color:var(--ink-2);transition:.2s var(--ease)} .dash-nav a:hover{background:var(--wash-2);color:var(--ink)} .dash-nav a.on{background:rgba(var(--rim-rgb),.14);color:var(--rim-hi)} .dash-nav a .k{margin-left:auto;font-size:11px;color:var(--ink-3);font-weight:700} .dash-nav a svg{flex:0 0 auto;opacity:.85} @media (max-width:900px){.dash-nav{flex-direction:row;overflow-x:auto;padding-bottom:4px} .dash-nav a{white-space:nowrap}.dash-nav a .k{display:none}} .stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:24px} @media (max-width:860px){.stat-row{grid-template-columns:repeat(2,1fr)}} .stat{padding:17px 18px;border-radius:var(--r);border:1px solid var(--line);background:var(--wash); position:relative;overflow:hidden} .stat::after{content:'';position:absolute;right:-24px;top:-24px;width:78px;height:78px;border-radius:50%; background:radial-gradient(circle,rgba(var(--rim-rgb),.2),transparent 68%)} .stat b{display:block;font:800 26px/1 Archivo,sans-serif;margin-bottom:5px} .stat span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} .stat.teal::after{background:radial-gradient(circle,rgba(47,168,189,.22),transparent 68%)} .tbl{width:100%;border-collapse:collapse;font-size:13.5px} .tbl th{text-align:left;padding:11px 12px;font:700 10.5px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-3);border-bottom:1px solid var(--line)} .tbl td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:middle} .tbl tr:last-child td{border-bottom:0} .tbl .r{text-align:right} .status{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:7px;font:700 10.5px/1 Inter,sans-serif; letter-spacing:.1em;text-transform:uppercase} .status::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor} .status.ship{background:rgba(47,168,189,.14);color:var(--iris-hi)} .status.deliv{background:rgba(63,191,127,.14);color:var(--ok)} .status.proc{background:rgba(232,177,60,.14);color:var(--warn)} .status.open{background:rgba(var(--rim-rgb),.14);color:var(--rim-hi)} .status.closed{background:var(--wash-2);color:var(--ink-3)} @media (max-width:700px){ .tbl thead{display:none} .tbl tr{display:grid;gap:6px;padding:14px 0;border-bottom:1px solid var(--line)} .tbl td{border:0;padding:0;display:flex;justify-content:space-between;gap:14px} .tbl td::before{content:attr(data-l);font:700 10.5px/1.5 Inter,sans-serif;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-3)} .tbl td.r{text-align:left} } .log-entry{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)} .log-date{font:800 11px/1.5 Archivo,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap} .log-body b{display:block;font:700 14px/1.3 Inter,sans-serif;margin-bottom:5px} .log-body p{margin:0;color:var(--ink-2);font-size:13.5px;line-height:1.65} .log-strain{display:inline-flex;align-items:center;gap:7px;margin-top:9px;padding:4px 10px;border-radius:8px; background:var(--wash-2);border:1px solid var(--line);font-size:11.5px;font-weight:600} .log-strain .iris-svg{width:18px;height:18px} /* ---- misc ---------------------------------------------------------------- */ .hr{height:1px;background:var(--line);border:0;margin:clamp(40px,6vw,80px) 0} .center{text-align:center} .mt{margin-top:26px} .muted{color:var(--ink-3);font-size:13px} .badge-soft{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:9px; background:var(--wash-2);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink-2)} .crumb{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--ink-3);margin-bottom:22px} .crumb a:hover{color:var(--rim-hi)} .reveal{opacity:0;transform:translateY(22px)} .reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)} /* ---- footer -------------------------------------------------------------- */ .ftr{position:relative;z-index:1;border-top:1px solid var(--chrome-line);color:var(--chrome-ink); background:linear-gradient(var(--chrome-2),color-mix(in srgb,var(--chrome) 60%,transparent)); padding:clamp(46px,6vw,74px) 0 30px;margin-top:clamp(40px,6vw,90px)} .ftr-top{display:grid;grid-template-columns:1.15fr 2fr;gap:clamp(28px,4vw,60px);margin-bottom:44px} @media (max-width:900px){.ftr-top{grid-template-columns:1fr}} .ftr-logo{height:44px;width:auto;margin-bottom:18px} .ftr-mission{color:var(--chrome-ink-2);font-size:14px;max-width:42ch;line-height:1.65} .ftr-loc{color:var(--chrome-ink-3);font-size:13px;line-height:1.6} .ftr-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .ftr-cols>div{min-width:0} .ftr-cols a{overflow-wrap:anywhere} @media (max-width:700px){.ftr-cols{grid-template-columns:repeat(2,1fr)}} .ftr-cols h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--rim);margin-bottom:14px} .ftr-cols a{display:block;padding:5px 0;font-size:13.5px;color:var(--chrome-ink-2);transition:.2s} .ftr-cols a:hover{color:var(--chrome-ink);transform:translateX(3px)} .ftr-note{padding:20px 22px;border-radius:var(--r);border:1px solid var(--chrome-line);background:var(--chrome-wash); font-size:12.5px;color:var(--chrome-ink-3);line-height:1.68;margin-bottom:26px} .ftr-note strong{color:var(--chrome-ink-2)} .ftr-note p{margin:0 0 .7em}.ftr-note p:last-child{margin:0} .ftr-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px; border-top:1px solid var(--chrome-line);font-size:12px;color:var(--chrome-ink-3)} .ftr-eye{display:flex;align-items:center;gap:8px} .ftr-eye img{border-radius:50%;opacity:.85}