:root {
    --ink: #142c3b;
    --blue: #0f5ea5;
    --navy: #21284e;
    --cyan: #4abed3;
    --paper: #f3f7f8;
    --soft: #e7eff1;
    --muted: #697b84;
    --line: #cbd7db;
    --serif: Georgia, "Times New Roman", serif;
    --sans: "Manrope", "DM Sans", sans-serif;
    --display: "DM Sans", "Manrope", sans-serif
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    -webkit-font-smoothing: antialiased
}

a {
    color: inherit;
    text-decoration: none
}

button,
a {
    -webkit-tap-highlight-color: transparent
}

a:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 4px
}

.masthead,
.site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px clamp(22px, 5vw, 80px);
    border-bottom: 1px solid rgba(20, 44, 59, .14)
}

.studio-mark {
    font-family: var(--display);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 0
}

.studio-mark span {
    display: inline-grid;
    place-items: center;
    width: 25px;
    height: 25px;
    margin-right: 4px;
    border: 1px solid var(--blue);
    border-radius: 50%;
    color: var(--blue);
    font-size: 14px
}

.masthead p,
.site-footer p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: .04em
}

.masthead p i {
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 12px 2px;
    background: var(--cyan);
    border-radius: 50%
}

.masthead-link,
.site-footer>a:last-child {
    font-size: 12px;
    font-weight: 700
}

.masthead-link span {
    margin-left: 10px;
    color: var(--blue)
}

.cover {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    min-height: 650px;
    padding: clamp(50px, 8vw, 118px) clamp(22px, 9vw, 150px) 70px;
    overflow: hidden
}

.cover-copy {
    position: relative;
    z-index: 2;
    max-width: 760px;
    align-self: center
}

.eyebrow {
    margin: 0 0 24px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .17em;
    color: var(--blue)
}

.eyebrow span {
    color: var(--muted);
    margin-right: 15px
}

.cover h1 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(46px, 7.3vw, 102px);
    line-height: .98;
    letter-spacing: 0;
    font-weight: 700
}

.cover h1 em {
    font-family: var(--serif);
    font-size: .74em;
    font-weight: 400;
    line-height: 1.2;
    color: var(--blue)
}

.title-dot {
    color: var(--cyan)
}

.cover-foot {
    display: flex;
    align-items: center;
    gap: 38px;
    max-width: 580px;
    margin-top: 40px
}

.cover-foot p {
    max-width: 440px;
    margin: 0;
    color: #546a76;
    font-size: 14px;
    line-height: 1.8
}

.round-link {
    flex: 0 0 54px;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid var(--blue);
    border-radius: 50%;
    color: var(--blue);
    font-size: 23px;
    transition: background .25s, color .25s, transform .25s
}

.round-link:hover {
    background: var(--blue);
    color: white;
    transform: rotate(45deg)
}

.cover-art {
    position: relative;
    min-height: 410px;
    display: grid;
    place-items: center;
    isolation: isolate
}

.cover-art:before {
    content: "";
    position: absolute;
    inset: 8% 2% 0 5%;
    z-index: -2;
    background: radial-gradient(ellipse at 45% 45%, rgba(74, 190, 211, .22), transparent 63%)
}

.orbit {
    position: absolute;
    border: 1px solid rgba(15, 94, 165, .18);
    border-radius: 50%;
    transform: rotate(-30deg)
}

.orbit-a {
    width: min(80%, 500px);
    height: min(53%, 300px)
}

.orbit-b {
    width: min(68%, 420px);
    height: min(77%, 420px);
    transform: rotate(34deg)
}

.orbit-c {
    width: min(48%, 300px);
    height: min(96%, 510px);
    border-color: rgba(74, 190, 211, .38);
    transform: rotate(70deg)
}

.cover-spark {
    display: grid;
    place-content: center;
    width: 148px;
    height: 148px;
    border: 1px solid rgba(15, 94, 165, .35);
    border-radius: 50%;
    background: rgba(243, 247, 248, .78);
    text-align: center;
    color: var(--blue);
    font-family: var(--serif);
    font-size: 27px;
    box-shadow: 0 0 70px rgba(74, 190, 211, .15)
}

.cover-spark small {
    margin-top: 8px;
    font: 700 8px/1.5 var(--sans);
    letter-spacing: .22em;
    color: var(--muted)
}

.cover-coordinate {
    position: absolute;
    right: 3%;
    bottom: 8%;
    font-size: 9px;
    line-height: 1.7;
    letter-spacing: .13em;
    color: var(--muted)
}

.cover-index {
    position: absolute;
    left: clamp(22px, 9vw, 150px);
    right: clamp(22px, 9vw, 150px);
    bottom: 24px;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    padding-top: 12px;
    font-size: 9px;
    letter-spacing: .15em;
    color: var(--muted)
}

.intro-row {
    display: grid;
    grid-template-columns: .75fr 1fr 1.6fr;
    align-items: start;
    gap: 32px;
    margin: 0 clamp(22px, 9vw, 150px);
    padding: 34px 0 42px;
    border-top: 1px solid var(--line)
}

.intro-row .eyebrow {
    margin: 0
}

.intro-row>p:nth-child(2) {
    max-width: 480px;
    margin: 0;
    color: #526976;
    font-size: 13px;
    line-height: 1.7
}

.intro-rule {
    height: 1px;
    margin-top: 8px;
    background: linear-gradient(90deg, var(--cyan), transparent)
}

.concept-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px 34px;
    padding: 0 clamp(22px, 9vw, 150px) 110px
}

.concept-card {
    min-width: 0
}

.concept-card.will-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s ease, transform .7s ease
}

.concept-card.will-reveal.is-visible {
    opacity: 1;
    transform: none
}

.concept-preview {
    position: relative;
    display: block;
    aspect-ratio: 1.48;
    overflow: hidden;
    isolation: isolate;
    transition: transform .45s cubic-bezier(.2, .75, .3, 1), box-shadow .45s
}

.concept-preview:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(20, 44, 59, .14)
}

.concept-preview:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 4px
}

.concept-meta {
    padding: 20px 2px 0
}

.concept-meta>div {
    display: flex;
    align-items: center;
    gap: 13px
}

.concept-number {
    font-size: 12px;
    font-weight: 800;
    color: var(--blue)
}

.concept-tag {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .15em;
    color: var(--muted)
}

.concept-meta h2 {
    margin: 12px 0 7px;
    font-size: 24px;
    letter-spacing: 0
}

.concept-meta>p {
    max-width: 480px;
    min-height: 45px;
    margin: 0;
    color: #627681;
    font-size: 13px;
    line-height: 1.7
}

.explore-link {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-top: 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(15, 94, 165, .38);
    font-size: 11px;
    font-weight: 700;
    color: var(--blue)
}

.explore-link span {
    transition: transform .2s
}

.explore-link:hover span {
    transform: translate(3px, -3px)
}

.preview-editorial {
    background: #f7f4ee;
    color: #1e3650
}

.preview-editorial .preview-top {
    position: absolute;
    z-index: 3;
    top: 8%;
    left: 6%;
    right: 6%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 7px;
    letter-spacing: .14em
}

.preview-top img {
    width: 42px;
    height: 40px;
    object-fit: contain
}

.preview-editorial-copy {
    position: absolute;
    z-index: 2;
    top: 31%;
    left: 8%;
    display: grid;
    gap: 13px
}

.preview-editorial-copy small,
.preview-glass small,
.preview-deep small,
.preview-lab small,
.preview-care small {
    font-size: 7px;
    letter-spacing: .15em
}

.preview-editorial-copy b {
    font-family: var(--serif);
    font-size: clamp(24px, 4vw, 43px);
    font-weight: 400;
    line-height: .98
}

.preview-editorial-copy span {
    margin-top: 10px;
    font-size: 6px;
    letter-spacing: .1em
}

.preview-doctor {
    position: absolute;
    top: 0;
    right: 0;
    width: 43%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 27%;
    mask-image: linear-gradient(90deg, transparent, #000 18%)
}

.preview-caption {
    position: absolute;
    bottom: 8%;
    left: 8%;
    font-size: 6px;
    letter-spacing: .2em;
    color: #6d7b84
}

.preview-glass {
    background: radial-gradient(ellipse at 77% 16%, #e0ffff 0, transparent 45%), linear-gradient(140deg, #c5e6ee, #6cb8cd 48%, #143b67);
    color: #102f4c
}

.preview-glass:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 45% 60%, rgba(255, 255, 255, .48), transparent 42%)
}

.glass-orb {
    position: absolute;
    z-index: -1;
    width: 70%;
    height: 145%;
    right: -4%;
    top: -23%;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 50%;
    box-shadow: inset 0 0 55px rgba(255, 255, 255, .35), 0 0 40px rgba(255, 255, 255, .22)
}

.glass-header {
    position: absolute;
    top: 8%;
    left: 7%;
    right: 7%;
    display: flex;
    justify-content: space-between;
    font-size: 7px;
    letter-spacing: .12em
}

.glass-copy {
    position: absolute;
    z-index: 2;
    top: 33%;
    left: 9%;
    display: grid;
    gap: 11px
}

.glass-copy b {
    font-size: clamp(21px, 3.5vw, 37px);
    line-height: 1.02
}

.glass-copy span {
    font-size: 6px;
    letter-spacing: .12em
}

.preview-glass>img {
    position: absolute;
    right: 6%;
    bottom: 0;
    width: 38%;
    height: 75%;
    object-fit: cover;
    object-position: 50% 25%;
    border-radius: 48% 48% 0 0;
    mask-image: linear-gradient(180deg, #000 72%, transparent)
}

.glass-chip {
    position: absolute;
    right: 4%;
    bottom: 10%;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 8px;
    background: rgba(239, 251, 253, .54);
    backdrop-filter: blur(10px);
    font-size: 6px;
    line-height: 1.6;
    letter-spacing: .12em
}

.preview-deep {
    background: radial-gradient(ellipse at 74% 35%, #1766a4 0, transparent 44%), linear-gradient(125deg, #061629, #0d3152 56%, #09182b);
    color: #effaff
}

.preview-deep:after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-radial-gradient(ellipse at 75% 37%, transparent 0 38px, rgba(120, 200, 236, .12) 39px 40px, transparent 41px 74px);
    opacity: .55
}

.deep-glow {
    position: absolute;
    right: 12%;
    top: 13%;
    width: 35%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #64cff2;
    filter: blur(75px);
    opacity: .22
}

.deep-kicker {
    position: absolute;
    top: 8%;
    left: 7%;
    right: 7%;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    font-size: 7px;
    letter-spacing: .15em
}

.deep-copy {
    position: absolute;
    z-index: 2;
    left: 8%;
    top: 35%;
    display: grid;
    gap: 10px
}

.deep-copy b {
    font-size: clamp(25px, 4vw, 44px);
    line-height: .9
}

.deep-copy span {
    margin-top: 12px;
    font-size: 6px;
    letter-spacing: .15em
}

.preview-deep>img {
    position: absolute;
    z-index: 1;
    right: 5%;
    bottom: 0;
    width: 39%;
    height: 82%;
    object-fit: cover;
    object-position: 50% 20%;
    mask-image: linear-gradient(180deg, #000 68%, transparent)
}

.deep-rail {
    position: absolute;
    z-index: 3;
    bottom: 7%;
    left: 8%;
    font-size: 6px;
    letter-spacing: .18em;
    color: #8bd9f3
}

.preview-lab {
    background-color: #eef5f8;
    background-image: linear-gradient(rgba(15, 94, 165, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 94, 165, .07) 1px, transparent 1px);
    background-size: 22px 22px;
    color: #173950
}

.lab-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 9px 7%;
    background: #fff;
    font-size: 6px;
    letter-spacing: .1em;
    display: flex;
    justify-content: space-between
}

.lab-copy {
    position: absolute;
    left: 8%;
    top: 31%;
    z-index: 2;
    display: grid;
    gap: 11px
}

.lab-copy b {
    font-size: clamp(23px, 3.7vw, 40px);
    line-height: .95
}

.lab-copy span {
    font-size: 6px;
    letter-spacing: .13em
}

.lab-crosshair {
    position: absolute;
    right: 12%;
    top: 18%;
    width: 42%;
    aspect-ratio: 1;
    border: 1px solid rgba(15, 94, 165, .25);
    border-radius: 50%;
    background: radial-gradient(circle, #56c1d2 0 2%, transparent 3% 14%, rgba(15, 94, 165, .1) 15% 16%, transparent 17% 36%, rgba(15, 94, 165, .18) 37% 38%, transparent 39%)
}

.lab-crosshair:before,
.lab-crosshair:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    background: rgba(15, 94, 165, .16)
}

.lab-crosshair:after {
    transform: rotate(90deg)
}

.lab-tile {
    position: absolute;
    right: 7%;
    bottom: 10%;
    padding: 11px 14px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(15, 94, 165, .1);
    font-size: 6px;
    line-height: 1.6;
    letter-spacing: .1em
}

.lab-tile strong {
    font-size: 9px
}

.lab-coord {
    position: absolute;
    left: 8%;
    bottom: 9%;
    font-size: 6px;
    color: #6e838d;
    letter-spacing: .1em
}

.preview-care {
    background: #f5eee4;
    color: #16364b
}

.care-nav {
    position: absolute;
    top: 7%;
    left: 7%;
    right: 7%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 6px;
    letter-spacing: .08em
}

.care-nav>span:first-child {
    font-size: 13px;
    font-weight: 800
}

.care-nav i {
    color: #4abed3;
    font-size: 9px
}

.care-copy {
    position: absolute;
    z-index: 2;
    top: 31%;
    left: 8%;
    display: grid;
    gap: 12px
}

.care-copy b {
    font-family: var(--serif);
    font-size: clamp(23px, 3.8vw, 41px);
    font-weight: 400;
    line-height: .95
}

.care-copy span {
    font-size: 6px;
    letter-spacing: .12em
}

.care-photo {
    position: absolute;
    right: 6%;
    top: 19%;
    width: 37%;
    height: 72%;
    overflow: hidden;
    border-radius: 48% 48% 8px 8px;
    background: #c1ddd9
}

.care-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
    mix-blend-mode: multiply
}

.care-sticker {
    position: absolute;
    right: 2%;
    bottom: 9%;
    display: grid;
    place-content: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #c9e5dd;
    color: #235c64;
    text-align: center;
    font-size: 7px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .08em;
    transform: rotate(9deg)
}

.closing-note {
    grid-column: 1/-1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-top: 4px;
    padding: 32px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.closing-note>span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .15em;
    color: var(--blue)
}

.closing-note p {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(21px, 3vw, 34px);
    line-height: 1.2
}

.closing-note p strong {
    font-weight: 400;
    color: var(--blue)
}

.closing-note>a {
    font-size: 11px;
    font-weight: 700;
    color: var(--blue)
}

.closing-note>a span {
    margin-left: 9px
}

.site-footer {
    border-top: 1px solid rgba(20, 44, 59, .14);
    border-bottom: 0;
    padding-top: 28px;
    padding-bottom: 28px
}

.site-footer p strong {
    color: var(--ink)
}

.site-footer>a:last-child span {
    color: var(--blue);
    margin-left: 7px
}

@media(max-width:900px) {
    .cover {
        min-height: 570px;
        padding-left: 7vw;
        padding-right: 7vw
    }

    .cover-art {
        min-height: 340px
    }

    .intro-row {
        margin-left: 7vw;
        margin-right: 7vw;
        grid-template-columns: 1fr 1.5fr
    }

    .intro-rule {
        display: none
    }

    .concept-grid {
        padding-left: 7vw;
        padding-right: 7vw
    }

    .cover-index {
        left: 7vw;
        right: 7vw
    }

    .preview-editorial-copy b,
    .glass-copy b,
    .deep-copy b,
    .lab-copy b,
    .care-copy b {
        font-size: clamp(22px, 4vw, 37px)
    }
}

@media(max-width:650px) {
    .masthead {
        padding: 15px 20px
    }

    .masthead>p {
        display: none
    }

    .cover {
        display: block;
        min-height: 650px;
        padding: 80px 22px 72px
    }

    .cover-copy {
        position: relative;
        z-index: 3
    }

    .cover h1 {
        font-size: clamp(43px, 13vw, 66px)
    }

    .cover h1 em {
        font-size: .72em
    }

    .cover-foot {
        margin-top: 26px;
        gap: 18px
    }

    .cover-foot p {
        font-size: 12px
    }

    .round-link {
        flex-basis: 46px;
        width: 46px;
        height: 46px
    }

    .cover-art {
        position: absolute;
        right: -35px;
        bottom: 25px;
        width: 75%;
        height: 300px;
        min-height: 0;
        opacity: .78
    }

    .cover-index {
        left: 22px;
        right: 22px;
        bottom: 19px;
        font-size: 8px
    }

    .intro-row {
        display: block;
        margin: 0 22px;
        padding: 27px 0
    }

    .intro-row>p:nth-child(2) {
        margin-top: 14px
    }

    .concept-grid {
        grid-template-columns: 1fr;
        gap: 42px;
        padding: 0 22px 70px
    }

    .concept-preview {
        aspect-ratio: 1.23
    }

    .concept-meta>p {
        min-height: 0
    }

    .concept-meta h2 {
        font-size: 22px
    }

    .preview-editorial-copy b,
    .glass-copy b,
    .deep-copy b,
    .lab-copy b,
    .care-copy b {
        font-size: clamp(27px, 8vw, 38px)
    }

    .closing-note {
        display: grid;
        gap: 14px;
        padding: 26px 0
    }

    .closing-note p {
        font-size: 27px
    }

    .site-footer {
        flex-wrap: wrap;
        gap: 13px;
        padding: 22px
    }

    .site-footer p {
        order: 3;
        width: 100%;
        line-height: 1.6
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *:before,
    *:after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }

    .concept-card.will-reveal {
        opacity: 1;
        transform: none
    }
}