/* =========================================================================
   RIPTIDE LABS — science library in the deep-water system. Loaded after the
   inherited science.css; same selectors, later cascade. Markup is rendered by
   page-science.php + assets/js/science.js (unchanged).
   ========================================================================= */

body.page-template-page-science { background: var(--n-25); }
.sci-wrap .cap, .sci-wrap .axis-left { font-family: var(--font-wide); font-size: 9.5px; letter-spacing: .16em; font-weight: 700; }
.sci-wrap .axis-left::after { opacity: .3; }

/* Buttons → pills */
.sci-wrap .sci-btn {
    border-radius: 999px; border: 1px solid transparent;
    background: var(--rl-grad); color: var(--n-925);
    font-family: var(--font-wide); font-size: 9.5px; letter-spacing: .14em; font-weight: 700;
    box-shadow: 0 12px 28px -12px rgb(45 143 209 / .6);
    transition: transform .2s, filter .2s;
}
.sci-wrap .sci-btn:hover { background: var(--rl-grad); filter: brightness(1.06); transform: translateY(-1px); }
.sci-wrap .sci-btn.ghost { background: transparent; color: inherit; border-color: currentColor; box-shadow: none; opacity: .85; }
.sci-wrap .sci-btn.ghost:hover { background: rgb(168 193 216 / .16); color: inherit; opacity: 1; transform: none; }

/* Hero → navy band, glass stat cells, wave watermark */
.sci-hero {
    background: var(--n-925); color: var(--paper); border-bottom: 0;
    padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 48px) clamp(40px, 5vw, 64px);
    align-items: center;
}
.sci-hero::after {
    content: ''; position: absolute; right: -80px; top: 50%; width: 520px; height: 520px; transform: translateY(-50%);
    background: url(../images/logos/logo-mark-512.png) center / contain no-repeat; opacity: .08; pointer-events: none;
}
.sci-hero > * { position: relative; z-index: 1; }
.sci-hero .crumb, .sci-hero .crumb a { color: rgb(var(--rgb-white) / .55); }
.sci-hero .axis-left { color: var(--rl-ice); }
.sci-hero h1 { font-size: clamp(48px, 7.5vw, 120px); line-height: .92; letter-spacing: -.035em; text-transform: none; color: var(--n-0); }
.sci-hero h1 em { color: var(--rl-sky); }
.sci-hero .sub { font-family: var(--font-body); font-weight: 400; font-size: 17px; line-height: 1.55; color: rgb(var(--rgb-white) / .74); }
.hero-stats { border: 0; gap: 12px; }
.hero-stats .cell {
    border: 1px solid var(--rl-glass-border) !important; border-radius: 16px;
    background: rgb(var(--rgb-white) / .05); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    padding: 20px 22px;
}
.hero-stats .cell .k { font-family: var(--font-wide); font-size: 8.5px; letter-spacing: .14em; font-weight: 700; color: var(--rl-ice); }
.hero-stats .cell .v { font-size: 44px; color: var(--n-0); white-space: nowrap; }
.hero-stats .cell .m { color: rgb(var(--rgb-white) / .55); }

/* Method → four ice tiles */
.method { border-bottom: 0; gap: 16px; padding: clamp(36px, 5vw, 56px) clamp(20px, 4vw, 48px); }
.method .m { border-right: 0 !important; padding: 24px !important; border-radius: var(--rl-radius); background: var(--n-0); border: 1px solid var(--rl-card-border); box-shadow: var(--rl-shadow); }
.method .m .num { font-family: var(--font-wide); font-size: 8.5px; letter-spacing: .14em; font-weight: 700; color: var(--green-600); }
.method .m .t { text-transform: none; font-size: 19px; letter-spacing: -.02em; }
.method .m .d { text-transform: none; letter-spacing: 0; font-size: 13.5px; line-height: 1.55; font-weight: 400; color: var(--ink-3); }

/* Anchor bar → floating pill chips */
.anchor-bar {
    top: 64px; background: rgb(238 243 248 / .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgb(168 193 216 / .35);
    padding: 12px clamp(20px, 4vw, 48px); gap: 8px;
}
.anchor-bar a {
    border: 1px solid var(--rl-card-border) !important; border-radius: 999px; background: var(--n-0);
    padding: 9px 14px; font-family: var(--font-wide); font-size: 8.5px; letter-spacing: .12em; font-weight: 700; color: var(--ink-2);
}
.anchor-bar a:hover, .anchor-bar a.on { background: var(--n-925); color: var(--n-0); border-color: var(--n-925) !important; }
.anchor-bar .count { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--ink-3); padding: 9px 0; }

/* Peptide sections → white panels with paper cards */
.pep { border-bottom: 0; margin: 0 clamp(20px, 4vw, 48px) 24px; border-radius: var(--rl-radius); background: var(--n-0); border: 1px solid var(--rl-card-border); box-shadow: var(--rl-shadow); overflow: hidden; }
.pep-head { padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 36px) 20px; }
.pep-head::before { opacity: .05; }
.pep-head h2 { font-size: clamp(40px, 5.5vw, 84px); letter-spacing: -.035em; }
.pep-head .h-mid .tag { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.pep-head .h-mid .meta .m { font-family: var(--font-wide); font-size: 8px; letter-spacing: .12em; font-weight: 700; }
.pep-head .h-mid .meta .m b { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.pep-head .h-right { padding: 16px; border-radius: 18px; background: radial-gradient(ellipse at 50% 70%, rgb(124 196 245 / .25), transparent 65%), var(--n-925); }
.pep-head .h-right .vial { height: 190px; filter: drop-shadow(0 24px 40px rgb(var(--rgb-black) / .5)); }
.pep-head .h-right .cap { color: var(--rl-ice) !important; }
.papers { padding: 0 clamp(20px, 3vw, 36px) clamp(24px, 3vw, 36px); }
.paper-grid { border-top: 0; gap: 14px; }
.paper-grid .paper, .paper-grid .paper:nth-child(2n), .paper-grid .paper:nth-child(3n) {
    border: 1px solid rgb(168 193 216 / .35); border-radius: var(--rl-radius-sm);
    background: var(--n-25); min-height: 220px; padding: 22px 22px 18px;
    transition: transform .25s var(--ease-out), box-shadow .25s, border-color .25s;
}
.paper:hover { background: var(--n-0); transform: translateY(-4px); border-color: rgb(124 196 245 / .7); box-shadow: var(--rl-shadow-hover); }
.paper .stripe { display: none; }
.paper .meta-row { font-family: var(--font-wide); font-size: 8px; letter-spacing: .12em; font-weight: 700; }
.paper .meta-row .tag { border: 0; border-radius: 999px; padding: 5px 10px; background: rgb(168 193 216 / .2); color: var(--ink-2); }
.paper .title { font-size: 17px; line-height: 1.25; }
.paper .authors { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
.paper .journal { border-top: 1px solid rgb(168 193 216 / .35); }
.paper .cta { border-radius: 999px; padding: 6px 10px; font-family: var(--font-wide); font-size: 8px; letter-spacing: .12em; }

/* Database strip → rounded navy panel */
.dbstrip { margin: 8px clamp(20px, 4vw, 48px) 40px; border-radius: var(--rl-radius); border: 1px solid var(--rl-glass-border); background: var(--n-925); }
.dbstrip h3 { text-transform: none; letter-spacing: -.025em; font-size: 24px; }
.dbstrip .logos span { border-radius: 999px; border-color: rgb(168 193 216 / .3); }

/* Ethics + citation */
.ethics { border-bottom: 0; padding: clamp(40px, 5vw, 72px) clamp(20px, 4vw, 48px); }
.ethics h2 { text-transform: none; letter-spacing: -.03em; }
.ethics p { text-transform: none; letter-spacing: 0; text-align: left; font-size: 15px; line-height: 1.65; font-weight: 400; color: var(--ink-2); }
.ethics .cite-card { border-radius: var(--rl-radius); background: var(--n-0); border: 1px solid var(--rl-card-border); box-shadow: var(--rl-shadow); }
.ethics .cite-card h4 { text-transform: none; letter-spacing: -.02em; }
.ethics .cite-card pre { border-radius: 12px; background: var(--n-925); color: var(--rl-ice); border: 0; }
.sci-foot .mega { color: rgb(15 30 51 / .06); }
.sci-foot .row { border-top-color: rgb(168 193 216 / .35); }

/* Modal */
.modal { border: 0; border-radius: var(--rl-radius); background: var(--n-0); box-shadow: 0 40px 100px -30px rgb(var(--rgb-black) / .5); overflow: hidden; }
.modal-head .tag { border: 0; border-radius: 999px; padding: 5px 10px; background: rgb(168 193 216 / .2); font-family: var(--font-wide); font-size: 8px; letter-spacing: .12em; }
.modal-body .mb-row { text-transform: none; letter-spacing: 0; font-family: var(--font-wide); font-size: 8.5px; }
.modal-body .abstract h5 { font-family: var(--font-wide); font-size: 8.5px; letter-spacing: .14em; color: var(--green-600); }

@media (max-width: 900px) {
    .sci-hero { padding: 32px 18px 28px; }
    .sci-hero::after { width: 280px; right: -90px; opacity: .06; }
    .hero-stats { grid-template-columns: 1fr 1fr; }
    .hero-stats .cell { padding: 16px; }
    .hero-stats .cell .v { font-size: 30px; }
    .method { padding: 24px 18px; gap: 10px; }
    .anchor-bar { padding: 10px 18px; gap: 6px; }
    .pep { margin: 0 18px 16px; }
    .pep-head .h-right { align-self: flex-start; }
    .dbstrip { margin: 8px 18px 28px; }
    .ethics { padding: 32px 18px; }
    /* Inherited mobile modal kept the desktop translate(-50%,-50%) centring
       while pinning left/top to 0, which pushed it half off-screen. */
    .modal, .modal.on { border-radius: 0; left: 0; top: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; transform: none; }
    .modal-body { -webkit-overflow-scrolling: touch; }
    .modal-foot { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}