@font-face {
    font-family: "PoppinsLocal";
    src: url("../fonts/Poppins-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "PoppinsLocal";
    src: url("../fonts/Poppins-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "PoppinsLocal";
    src: url("../fonts/Poppins-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "PoppinsLocal";
    src: url("../fonts/Poppins-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --ivory: #faf8f3;
    --cream: #f1ece0;
    --ink: #1d1c1a;
    --grey: #6d6a63;
    --gold: #a88b4e;
    --line: #ddd6c6;
    --display-font: "PoppinsLocal", "Poppins", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
    --body-font: "PoppinsLocal", "Poppins", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
    --serif: "PoppinsLocal", "Poppins", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
    --sans: "PoppinsLocal", "Poppins", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
    --pad: clamp(1.25rem, 5vw, 4.5rem)
}

* {
    box-sizing: border-box;
    margin: 0
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
    scrollbar-width: none
}

html::-webkit-scrollbar {
    display: none
}

body {
    background: var(--ivory);
    color: var(--ink);
    font: 400 1.0625rem/1.7 var(--body-font);
    -webkit-font-smoothing: antialiased;
    width: 100%;
    overflow-x: clip
}

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

img,
video {
    max-width: 100%;
    display: block
}

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px
}

h1,
h2,
h3 {
    font-family: var(--display-font);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -.015em
}

h1 {
    font-size: clamp(3.4rem, 10vw, 9.5rem)
}

h2 {
    font-size: clamp(2.4rem, 6vw, 5.5rem)
}

.wrap {
    padding-inline: var(--pad)
}

.sec {
    padding-block: clamp(5rem, 14vh, 10rem)
}

.skip {
    position: absolute;
    left: -999px
}

.skip:focus {
    left: 1rem;
    top: 1rem;
    background: var(--ink);
    color: var(--ivory);
    padding: .5rem 1rem;
    z-index: 100
}

.pre {
    position: fixed;
    inset: 0;
    background: var(--ivory);
    z-index: 90;
    display: grid;
    place-items: center
}

.pre b {
    font: 500 clamp(1.6rem, 4vw, 2.6rem)/1 var(--serif);
    letter-spacing: .3em
}

.pre i {
    display: block;
    font: normal .8rem var(--sans);
    color: var(--grey);
    text-align: center;
    margin-top: 1rem
}

.nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.75rem var(--pad);
    transition: background .4s, padding .4s;
    color: #fff
}

.nav .logo,
.nav .ul,
.nav .btn,
.nav .burger,
.nav a {
    color: #fff
}

.nav .btn {
    border-color: rgba(255, 255, 255, .9)
}

.nav.s {
    background: rgba(15, 15, 15, .94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    padding-block: .9rem;
    color: #fff
}

.nav.s .logo,
.nav.s .ul,
.nav.s .btn,
.nav.s .burger,
.nav.s a {
    color: #fff
}

.nav.s .btn {
    border-color: rgba(255, 255, 255, .9)
}

.logo {
    font: 600 1.55rem var(--serif);
    letter-spacing: .02em
}

.nav ul {
    display: flex;
    gap: 2.2rem;
    list-style: none;
    align-items: center;
    padding: 0
}

.ul {
    position: relative;
    font-size: .92rem
}

.ul:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s
}

.ul:hover:after,
.ul[aria-current]:after {
    transform: scaleX(1)
}

.btn {
    display: inline-block;
    padding: .9rem 1.6rem;
    border: 1px solid var(--ink);
    font-size: .92rem;
    transition: background .3s, color .3s
}

.btn:hover {
    background: var(--ink);
    color: var(--ivory)
}

.btn.solid {
    background: var(--ink);
    color: var(--ivory)
}

.btn.solid:hover {
    background: var(--gold);
    border-color: var(--gold)
}

.burger {
    display: none;
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
    padding: .6rem
}

.menu {
    position: fixed;
    inset: 0;
    background: var(--cream);
    z-index: 60;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--pad);
    visibility: hidden;
    clip-path: inset(0 0 100% 0)
}

.menu a.big {
    display: block;
    font: 500 clamp(2.6rem, 12vw, 5rem)/1.15 var(--serif)
}

.menu .x {
    position: absolute;
    top: 1.5rem;
    right: var(--pad)
}

.prog {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    z-index: 70
}

.media {
    position: relative;
    overflow: hidden;
    background: var(--cream)
}

.media .poster {
    position: absolute;
    inset: 0;
    background: var(--p, linear-gradient(135deg, #e9e1cd, #f6f1e4 60%, #e2d6b8));
    background-size: cover;
    background-position: center;
    transition: opacity .8s
}

.media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s
}

.media.on video {
    opacity: 1
}

.media.on .poster {
    opacity: 0
}

.hero {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--pad) 5rem;
    position: relative;
    color: white;
}

.hero .media {
    position: absolute;
    inset: 0;
    z-index: -1
}

.hero:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(250, 248, 243, .94) 25%, rgba(250, 248, 243, .62))
}

.hero .label {
    font-size: .85rem;
    color: rgba(255, 255, 255, .8);
}

.hero p.lead {
    max-width: 34rem;
    margin: 2rem 0
}

.hero .ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap
}

.w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: .08em
}

.w>span {
    display: inline-block
}

.scroll {
    position: absolute;
    right: var(--pad);
    bottom: 5rem;
    width: 1px;
    height: 70px;
    background: var(--ink);
    transform-origin: top
}

.phil {
    background: var(--cream)
}

.phil h2 {
    max-width: 14ch
}

.phil .lines {
    margin-top: 3rem;
    font: italic 400 clamp(1.6rem, 3.5vw, 3rem)/1.35 var(--serif);
    color: var(--grey)
}

.phil .lines span {
    display: block
}

.svc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-top: 4rem;
    align-items: start
}

.svc ol {
    list-style: none;
    padding: 0
}

.svc li {
    border-top: 1px solid var(--line)
}

.svc li a {
    display: flex;
    gap: 1.5rem;
    align-items: baseline;
    padding: 1.6rem 0;
    font: 500 clamp(1.6rem, 3vw, 2.6rem) var(--serif);
    color: var(--grey);
    transition: color .3s, padding .4s
}

.svc li a small {
    font: .8rem var(--sans);
    color: var(--gold);
    min-width: 1.6rem
}

.svc li.on a,
.svc li a:hover {
    color: var(--ink);
    padding-left: 1rem
}

.svc .media {
    aspect-ratio: 4/5;
    position: sticky;
    top: 6rem
}

.proc {
    background: var(--ink);
    color: var(--ivory)
}

.proc .pin {
    height: 100svh;
    position: relative;
    overflow: hidden
}

.proc .step {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    padding: 0 var(--pad);
    opacity: 0
}

.proc .step h3 {
    font-size: clamp(4rem, 14vw, 12rem)
}

.proc .step p {
    max-width: 28rem;
    color: #bdb8aa
}

.proc .step small {
    color: var(--gold);
    font-size: .9rem
}

.shaped {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 5rem;
    align-items: center
}

.book {
    aspect-ratio: 2/3;
    max-width: 380px;
    margin-inline: auto;
    padding: 2.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(160deg, #2a2824, #1d1c1a);
    color: var(--ivory);
    box-shadow: 20px 30px 60px rgba(29, 28, 26, .25), inset 6px 0 0 rgba(255, 255, 255, .06);
    transform: rotate(-3deg)
}

.book h3 {
    font-size: 3.6rem;
    letter-spacing: .06em
}

.book p {
    color: var(--gold);
    font-size: .85rem
}

.shaped em {
    display: block;
    font: italic 1.6rem var(--serif);
    margin: 1rem 0 1.5rem
}

.stmt {
    text-align: center;
    padding-block: clamp(8rem, 22vh, 16rem)
}

.stmt h2 {
    max-width: 16ch;
    margin-inline: auto
}

.stmt h2 .g {
    color: var(--gold)
}

.final {
    min-height: 80svh;
    display: grid;
    place-items: center;
    text-align: center;
    position: relative
}

.final .media {
    position: absolute;
    inset: 0;
    z-index: -1
}

.final:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(250, 248, 243, .72)
}

.final p {
    margin: 1.5rem 0 2.5rem
}

footer {
    padding: 3rem var(--pad);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    border-top: 1px solid var(--line);
    font-size: .9rem;
    color: var(--grey)
}

.cursor {
    position: fixed;
    left: 0;
    top: 0;
    width: 12px;
    height: 12px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    pointer-events: none;
    z-index: 95;
    opacity: 0
}

@media(max-width:860px) {
    .nav ul {
        display: none
    }

    .burger {
        display: block
    }

    .svc,
    .shaped {
        grid-template-columns: 1fr;
        gap: 2.5rem
    }

    .svc .media {
        position: relative;
        top: 0;
        aspect-ratio: 4/3
    }

    .hero:before {
        background: linear-gradient(180deg, rgba(250, 248, 243, .72), rgba(250, 248, 243, .94) 60%)
    }

    .scroll {
        display: none
    }

    .btn {
        padding: 1rem 1.6rem
    }
}

@media(hover:none) {
    .cursor {
        display: none
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        transition: none !important;
        scroll-behavior: auto
    }
}

/* v2 additions */
.logo {
    display: flex;
    align-items: center;
    gap: .6rem
}

.logo img {
    height: 36px;
    width: auto
}

.hero {
    padding-top: 10rem
}

.hero h1 {
    font-size: clamp(3.4rem, 10vw, 9.5rem)
}

.herotitle {
    position: relative
}

.hero .label {
    margin-bottom: 2.6rem
}

.hero .label,
.hero h1,
.hero .lead,
.hero .mark {
    color: #fff;
    -webkit-text-stroke: 0;
    paint-order: normal
}

.hero h1 {
    -webkit-text-stroke-width: 0
}

.hero .w {
    padding: .06em .05em .08em;
    margin: -.06em -.05em
}

.hero .mark {
    position: absolute;
    left: .3rem;
    bottom: 100%;
    margin-bottom: -.3rem;
    font: 600 clamp(.85rem, 1.5vw, 1.3rem)/1 var(--serif);
    letter-spacing: .3em
}

.roles {
    list-style: none;
    padding: 0;
    margin-top: 4rem
}

.roles li {
    display: flex;
    gap: 2rem;
    align-items: baseline;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    padding: 1.4rem 0;
    transition: transform .5s, color .3s
}

.roles li:nth-child(even) {
    margin-left: clamp(0px, 12vw, 10rem)
}

.roles b {
    font: 500 clamp(2rem, 5vw, 4.2rem)/1.1 var(--serif)
}

.roles span {
    max-width: 18rem;
    color: var(--grey);
    font-size: .95rem
}

.roles li:hover {
    transform: translateX(1rem);
    color: var(--gold)
}

.launch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    background: var(--cream)
}

.launch .k {
    color: var(--gold);
    margin-bottom: 1rem
}

.launch p:not(.k) {
    max-width: 30rem;
    margin: 1.5rem 0 2rem
}

.flyer,
.book {
    position: relative
}

.flyer {
    aspect-ratio: 1;
    max-width: 520px;
    width: 100%;
    justify-self: center;
    border: 1px dashed var(--gold);
    display: block;
    color: var(--grey);
    font-size: .9rem;
    background: #1d1c1a;
    overflow: hidden
}

.flyer img,
.book img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.flyer img+span {
    display: none
}

.marq {
    overflow: hidden;
    padding-block: 2rem;
    border-block: 1px solid var(--line)
}

.marq-track {
    display: flex;
    width: max-content;
    animation: marquee 24s linear infinite
}

.marq span {
    flex: none;
    white-space: nowrap;
    font: italic 500 clamp(2rem, 6vw, 5rem) var(--serif);
    color: var(--gold)
}

@keyframes marquee {
    to {
        transform: translateX(-50%)
    }
}

@media(prefers-reduced-motion:reduce) {
    .marq-track {
        animation: none
    }
}

.inshead {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 2rem;
    flex-wrap: wrap
}

.cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 4rem
}

.card .media {
    aspect-ratio: 3/4;
    margin-bottom: 1.2rem
}

.card .poster {
    transition: transform .8s
}

.card:hover .poster {
    transform: scale(1.08)
}

.card small {
    color: var(--gold)
}

.card h3 {
    font-size: 1.7rem;
    margin-top: .3rem
}

.proc .ptitle {
    position: absolute;
    top: 6.5rem;
    left: var(--pad);
    z-index: 2;
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    color: var(--gold)
}

.proc .step {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    padding: 9rem var(--pad) 3rem
}

.proc .step h3 {
    font-size: clamp(3rem, 8vw, 7.5rem)
}

.proc .step .media {
    height: 60vh;
    max-width: 440px;
    width: 100%;
    justify-self: end
}

.foot {
    color: var(--ivory);
    background: linear-gradient(rgba(29, 28, 26, .7), rgba(29, 28, 26, .84)), url(../images/footer-bg.jpg) center/cover, var(--ink);
    padding-block: 5rem 2rem
}

.fgrid {
    display: grid;
    grid-template-columns: 1.2fr .7fr .9fr 1.4fr;
    gap: 3rem
}

.foot ul {
    list-style: none;
    padding: 0
}

.foot li {
    margin-bottom: .5rem
}

.fh {
    font: 500 .85rem var(--sans);
    color: var(--gold);
    margin-bottom: 1rem;
    letter-spacing: .04em
}

.ftag {
    font: italic 1.6rem var(--serif);
    margin: 1rem 0 .3rem
}

.news label {
    display: block;
    font-size: .85rem;
    margin-top: 1rem
}

.news .row {
    display: flex;
    gap: .8rem;
    margin-top: .4rem
}

.news input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ivory);
    color: var(--ivory);
    padding: .7rem 0;
    font: inherit
}

.news .btn.solid {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
    cursor: pointer
}

.news .btn.solid:hover {
    background: var(--ivory);
    border-color: var(--ivory)
}

.news .st {
    min-height: 1.6rem;
    color: var(--gold);
    font-size: .9rem
}

.fbase {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 4rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(250, 248, 243, .2);
    font-size: .85rem;
    color: #bdb8aa
}

@media(max-width:1000px) {
    .cards {
        grid-template-columns: 1fr 1fr
    }

    .fgrid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:860px) {
    .hero {
        padding-top: 8rem
    }

    .launch {
        grid-template-columns: 1fr;
        gap: 3rem
    }

    .roles li {
        flex-direction: column;
        gap: .4rem
    }

    .roles li:nth-child(even) {
        margin-left: 0
    }

    .proc .ptitle {
        position: static;
        padding: 3rem var(--pad) 0
    }

    .proc .step {
        grid-template-columns: 1fr;
        gap: 2rem
    }

    .proc .step .media {
        height: auto;
        aspect-ratio: 4/3;
        justify-self: stretch;
        max-width: none
    }
}

@media(max-width:560px) {

    .cards,
    .fgrid {
        grid-template-columns: 1fr
    }

    .news .row {
        flex-direction: column
    }
}

/* photo posters */
.poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

/* Shaped modal */
.modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.25rem
}

.modal.open {
    display: flex
}

.modal .bd {
    position: absolute;
    inset: 0;
    background: rgba(29, 28, 26, .6)
}

.modal .pn {
    position: relative;
    background: var(--ivory);
    width: min(1040px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 1rem 3rem;
    padding: clamp(1.25rem, 4vw, 3.5rem);
    border-top: 3px solid var(--gold)
}

.mx {
    position: sticky;
    top: 0;
    z-index: 2;
    grid-column: 1/-1;
    justify-self: end;
    background: var(--ivory);
    border: 1px solid var(--ink);
    padding: .5rem 1.1rem;
    font: inherit;
    font-size: .9rem;
    cursor: pointer
}

.mx:hover {
    background: var(--ink);
    color: var(--ivory)
}

.mleft {
    align-self: start;
    position: sticky;
    top: 3.5rem
}

.mcover {
    position: relative;
    aspect-ratio: 2/3;
    background: linear-gradient(160deg, #2a2824, #1d1c1a);
    color: var(--ivory);
    display: grid;
    place-items: center;
    font: 500 2.6rem var(--serif);
    letter-spacing: .06em;
    box-shadow: 12px 18px 40px rgba(29, 28, 26, .2)
}

.mcover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.mdate {
    margin: 1.2rem 0;
    color: var(--grey);
    font-size: .9rem
}

.mright .k {
    color: var(--gold);
    font-size: .9rem
}

.modal h2 {
    font-size: clamp(3rem, 6vw, 4.5rem)
}

.mright .sub {
    font: italic 1.6rem var(--serif);
    margin: .4rem 0 1rem
}

.mright h3 {
    font: 500 .95rem var(--sans);
    color: var(--gold);
    letter-spacing: .03em;
    margin: 2rem 0 .6rem
}

.mright p {
    max-width: 38rem;
    margin-bottom: .8rem
}

.themes {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.themes li {
    border: 1px solid var(--line);
    padding: .35rem .9rem;
    font-size: .9rem
}

.mright blockquote {
    margin: 2rem 0 0;
    padding-left: 1.2rem;
    border-left: 2px solid var(--gold);
    font: italic 500 clamp(1.5rem, 3vw, 2.1rem)/1.3 var(--serif)
}

.auth {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start
}

.auth .ph {
    flex: none;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--cream);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    font: 500 1.6rem var(--serif);
    color: var(--gold)
}

@media(max-width:860px) {
    .modal .pn {
        grid-template-columns: 1fr
    }

    .mleft {
        position: static
    }

    .mcover {
        max-width: 240px
    }
}

/* About Page */
.ak {
    color: var(--gold);
    font-size: .9rem;
    margin-bottom: 1.2rem
}

.ab-ov:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(29, 28, 26, .5)
}

.final.ab-final:before {
    content: none
}

.final.ab-final:after {
    background: rgba(250, 248, 243, .72)
}

.ahero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 9rem var(--pad) 5rem;
    color: var(--ivory);
    overflow: hidden
}

.ahero>.media {
    position: absolute;
    inset: 0;
    z-index: -1
}

.ahero h1 {
    font-size: clamp(3.4rem, 10vw, 9.5rem);
    max-width: 12ch
}

.ahero .lead {
    max-width: 34rem;
    margin-top: 2rem;
    color: #e7e2d4
}

.ahero .scroll {
    background: var(--ivory)
}

.ab-split {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 5rem;
    align-items: start
}

.ab-media {
    position: sticky;
    top: 6rem;
    aspect-ratio: 4/5
}

.ab-lines {
    margin-top: 3rem;
    font: 500 clamp(2.4rem, 6.5vw, 6rem)/1.05 var(--serif)
}

.ab-lines span {
    display: block;
    padding: .12em 0
}

.ab-note {
    max-width: 34rem;
    color: var(--grey);
    margin-top: 2rem
}

.ab-why {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start
}

.ab-why p {
    margin-bottom: 1.2rem;
    max-width: 34rem
}

.ab-wide {
    margin-top: 5rem;
    aspect-ratio: 21/9
}

.pr {
    display: grid;
    grid-template-columns: 4rem 1fr 1fr;
    gap: 2rem;
    align-items: baseline;
    border-top: 1px solid var(--line);
    padding: 2.2rem 0
}

.prs {
    margin-top: 3rem
}

.pr small {
    color: var(--gold)
}

.pr h3 {
    font-size: clamp(2.2rem, 5vw, 4.4rem)
}

.pr p {
    color: var(--grey)
}

.ab-story {
    position: relative;
    min-height: 100svh;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--ivory);
    padding: 6rem var(--pad);
    overflow: hidden
}

.ab-story>.media {
    position: absolute;
    inset: -6% 0;
    z-index: -1
}

.ab-story blockquote {
    max-width: 20ch;
    font: italic 500 clamp(2.2rem, 6vw, 5.5rem)/1.1 var(--serif)
}

.house {
    margin-top: 3rem
}

.house span {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--line);
    padding: 1.2rem 0;
    font: 500 clamp(2rem, 5vw, 4.4rem)/1.1 var(--serif)
}

.house a {
    font: .9rem var(--sans);
    color: var(--gold)
}

.ab-std {
    position: relative;
    background: var(--ink);
    color: var(--ivory);
    overflow: hidden
}

.ab-bg {
    position: absolute;
    inset: 0;
    opacity: .16
}

.ab-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.ab-in {
    position: relative
}

.ab-std h2 {
    max-width: 16ch
}

.ab-std h2 .g {
    color: var(--gold)
}

.std {
    margin-top: 4rem
}

.std p {
    font: 500 clamp(2rem, 5vw, 4.4rem)/1.2 var(--serif);
    border-top: 1px solid #3a372f;
    padding: 1.1rem 0
}

.std span {
    color: #8f8a7d
}

.auth .ph {
    position: relative;
    overflow: hidden
}

.ph img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.ab-work .book {
    position: relative
}

.ab-work .book img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media(max-width:860px) {

    .ab-split,
    .ab-why {
        grid-template-columns: 1fr;
        gap: 2.5rem
    }

    .ab-media {
        position: relative;
        top: 0;
        aspect-ratio: 4/3
    }

    .ab-wide {
        aspect-ratio: 4/3;
        margin-top: 3rem
    }

    .pr {
        grid-template-columns: 2.5rem 1fr;
        gap: .6rem 1rem
    }

    .pr p {
        grid-column: 2
    }

    .ahero {
        padding-top: 8rem
    }

    .ab-story {
        min-height: 80svh
    }
}

/* Hero fit: keep hero within one viewport */
.hero,
.ahero {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: 7rem;
    padding-bottom: 3.5rem
}

.hero h1,
.ahero h1 {
    font-size: clamp(3rem, min(9vw, 16vh), 9.5rem)
}

.hero .label {
    margin-bottom: 2.2rem
}

.hero p.lead,
.ahero .lead {
    margin-top: 1.4rem;
    margin-bottom: 1.4rem
}

.hero .scroll,
.ahero .scroll {
    bottom: 3.5rem;
    height: 56px
}

/* Services Page */
.ahero .btn {
    border-color: var(--ivory)
}

.ahero .btn:hover {
    background: var(--ivory);
    color: var(--ink)
}

.ahero .btn.solid {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink)
}

.ahero .ctas {
    margin-top: .2rem
}

.sv-wrap {
    display: grid;
    grid-template-columns: 6fr 5fr;
    gap: 5rem;
    align-items: start;
    margin-top: 4rem
}

.sv {
    list-style: none;
    padding: 0
}

.sv-i {
    border-top: 1px solid var(--line);
    color: var(--grey);
    transition: color .6s
}

.sv-i.on {
    color: var(--ink)
}

.sv-t {
    font-size: 1rem
}

.sv-h {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: .2rem 1rem;
    width: 100%;
    padding: 1.6rem 0
}

.sv-h:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px
}

.sv-h small {
    color: var(--gold);
    font-size: .85rem;
    padding-top: .9rem
}

.sv-h b {
    font: 500 clamp(1.8rem, 3.4vw, 3rem)/1.1 var(--serif)
}

.sv-h em {
    grid-column: 2;
    font-style: normal;
    font-size: .95rem
}

.sv-p {
    overflow: hidden;
    padding-left: 4rem;
    color: var(--ink)
}

.sv-p>* {
    margin-bottom: 1.1rem;
    max-width: 36rem
}

.sv-p h4 {
    font: 500 .8rem var(--sans);
    color: var(--gold);
    margin-bottom: .4rem
}

.sv-p ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem
}

.sv-p li {
    border: 1px solid var(--line);
    padding: .25rem .8rem;
    font-size: .88rem
}

.sv-media {
    position: sticky;
    top: 6rem;
    aspect-ratio: 4/5
}

.sv-media .poster:not(:first-child) {
    opacity: 0
}

.ps-bg {
    position: absolute;
    inset: 0;
    opacity: .3
}

.proc .ptitle,
.proc .step {
    z-index: 2
}

@media(max-width:860px) {
    .sv-wrap {
        grid-template-columns: 1fr;
        margin-top: 2.5rem
    }

    .sv-media {
        display: none
    }

    .sv-p {
        padding-left: 0
    }
}

/* Work Page */
.wk-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 2rem;
    margin: 3rem 0 1rem
}

.wk-filter button {
    all: unset;
    cursor: pointer;
    font-size: .9rem;
    letter-spacing: .04em;
    color: var(--grey);
    padding: .5rem 0;
    border-bottom: 1px solid transparent;
    transition: color .3s, border-color .3s
}

.wk-filter button[aria-pressed=true],
.wk-filter button:hover {
    color: var(--ink);
    border-color: var(--gold)
}

.wk-filter button:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px
}

.wk-count {
    font-size: .85rem;
    color: var(--grey);
    margin-bottom: 2.5rem
}

.wk-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem 3rem
}

.wk-card:nth-child(even) {
    margin-top: 4rem
}

.wk-card[hidden] {
    display: none
}

.wk-a {
    display: block
}

.wk-a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 6px
}

.wk-a .media {
    aspect-ratio: 4/5
}

.wk-a .poster {
    transition: transform 1s, opacity .8s
}

.wk-a:hover .poster,
.wk-a:focus-visible .poster {
    transform: scale(1.04)
}

.wk-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.2rem 0 .4rem;
    font-size: .78rem;
    color: var(--gold);
    letter-spacing: .05em;
    text-transform: uppercase
}

.wk-a h3 {
    font-size: clamp(2rem, 3.4vw, 3.2rem);
    transition: transform .5s
}

.wk-a:hover h3,
.wk-a:focus-visible h3 {
    transform: translateX(.5rem)
}

.wk-a p {
    color: var(--grey);
    max-width: 30rem;
    margin: .6rem 0
}

.wk-a .wk-eng {
    font-size: .85rem
}

.wk-cta {
    display: inline-block;
    margin-top: .5rem;
    border-bottom: 1px solid var(--line);
    transition: border-color .3s, letter-spacing .4s
}

.wk-a:hover .wk-cta,
.wk-a:focus-visible .wk-cta {
    border-color: var(--gold);
    letter-spacing: .04em
}

.ab-lines.wk-lines {
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    margin-top: 0
}

.ab-std .btn {
    border-color: var(--ivory)
}

.ab-std .btn:hover {
    background: var(--ivory);
    color: var(--ink)
}

.ab-std .cf p:not(.ak) {
    max-width: 38rem;
    margin-bottom: 1rem;
    color: #d8d3c4
}

.cf h2 {
    margin-bottom: 1.5rem
}

.cs-head {
    padding-top: 9rem
}

.cs-back {
    display: block;
    width: fit-content;
    margin-bottom: 3rem;
    font-size: .9rem
}

.cs-head h1 {
    font-size: clamp(3rem, 8vw, 7rem);
    max-width: 14ch
}

.cs-intro {
    font: italic 500 clamp(1.5rem, 3vw, 2.4rem)/1.35 var(--serif);
    max-width: 40rem;
    margin: 2rem 0
}

.cs-label {
    display: inline-block;
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: .3rem .8rem;
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 1.5rem
}

.cs-media {
    aspect-ratio: 21/9;
    margin: 3rem 0
}

.cs-sec {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    border-top: 1px solid var(--line);
    padding: 2.5rem 0
}

.cs-sec h2 {
    font: 500 .9rem var(--sans);
    color: var(--gold);
    letter-spacing: .05em;
    text-transform: uppercase
}

.cs-sec p,
.cs-sec ul {
    max-width: 38rem
}

.cs-sec ul {
    padding-left: 1.1rem
}

.cs-note {
    font-size: .9rem;
    color: var(--grey);
    margin-top: 1rem
}

.cs-pager {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    border-top: 1px solid var(--line);
    padding: 2.5rem 0 5rem;
    flex-wrap: wrap
}

.cs-pager a {
    display: block;
    max-width: 22rem
}

.cs-pager small {
    color: var(--gold);
    display: block
}

.cs-pager b {
    font: 500 1.8rem var(--serif)
}

.cs-pager .nx {
    margin-left: auto;
    text-align: right
}

@media(max-width:860px) {
    .wk-grid {
        grid-template-columns: 1fr;
        gap: 3rem
    }

    .wk-card:nth-child(even) {
        margin-top: 0
    }

    .cs-sec {
        grid-template-columns: 1fr;
        gap: 1rem
    }

    .cs-media {
        aspect-ratio: 4/3
    }

    .cs-head {
        padding-top: 7rem
    }

    .wk-filter {
        gap: .2rem 1.4rem
    }
}

/* Insights Page */
.in-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4rem
}

.in-card {
    border-top: 1px solid var(--line);
    padding: 2rem 0 3rem
}

.in-card:nth-child(3n+1) {
    grid-column: 1/-1
}

.in-card[hidden] {
    display: none
}

.in-a {
    display: block
}

.in-a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 6px
}

.in-meta {
    display: flex;
    gap: .4rem 1.2rem;
    flex-wrap: wrap;
    font-size: .78rem;
    color: var(--gold);
    letter-spacing: .05em;
    text-transform: uppercase
}

.in-meta span+span {
    color: var(--grey)
}

.in-card h3 {
    font-size: clamp(1.9rem, 3.2vw, 3rem);
    margin: 1rem 0;
    transition: transform .5s
}

.in-card:nth-child(3n+1) h3 {
    font-size: clamp(2.4rem, 5vw, 4.6rem);
    max-width: 18ch
}

.in-a:hover h3,
.in-a:focus-visible h3 {
    transform: translateX(.5rem)
}

.in-card p:not(.in-meta) {
    color: var(--grey);
    max-width: 34rem
}

.in-read {
    display: inline-block;
    margin-top: 1rem;
    border-bottom: 1px solid var(--line);
    transition: border-color .3s, letter-spacing .4s
}

.in-a:hover .in-read,
.in-a:focus-visible .in-read {
    border-color: var(--gold);
    letter-spacing: .04em
}

.in-feat {
    display: grid;
    grid-template-columns: 6fr 5fr;
    gap: 5rem;
    align-items: center
}

.in-feat h2 {
    font-size: clamp(2.6rem, 6vw, 5.2rem);
    margin: 1.2rem 0
}

.in-feat .media {
    aspect-ratio: 4/5
}

.letter label {
    display: block;
    font-size: .85rem;
    margin-bottom: .4rem
}

.letter form {
    max-width: 34rem
}

.letter .row {
    display: flex;
    gap: .8rem
}

.letter input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ink);
    padding: .7rem 0;
    font: inherit;
    color: var(--ink)
}

.letter input[aria-invalid=true] {
    border-color: #9a3b2e
}

.letter .st {
    min-height: 1.6rem;
    margin-top: .8rem;
    font-size: .9rem;
    color: var(--grey)
}

@media(max-width:860px) {

    .in-grid,
    .in-feat {
        grid-template-columns: 1fr
    }

    .in-card:nth-child(3n+1) {
        grid-column: auto
    }

    .in-feat {
        gap: 2.5rem
    }

    .letter .row {
        flex-direction: column
    }
}