:root {
    --paper: #ffffff;
    --ink: #0b0b0b;
    --bone: #e9e7e2;
    --red: #ff2e17;
    --chrome-a: #edeef0;
    --chrome-b: #9ba0a6;
    --chrome-c: #dcdde0;
    --rule: #0b0b0b;
}

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

html {
    scroll-behavior: smooth
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Azeret Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px
}

/* ---------- type ---------- */
.display {
    font-family: 'Anton', Impact, 'Arial Narrow', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 0.78;
}

/* scaleY doesn't grow the layout box, so anchor growth downward and
   reserve the overflow: extra = line-height(0.78) x (scale-1)(0.34) = 0.27em */
.squash {
    transform: scaleY(1.34);
    transform-origin: center top;
    display: block;
    margin-bottom: 0.28em;
}

.label {
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
}

.lower {
    text-transform: lowercase;
    letter-spacing: 0.02em
}

/* ---------- shell ---------- */
.wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 22px
}

.rule {
    border-top: 1px solid var(--rule)
}

/* ---------- topbar ---------- */
header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 46px;
}

.brandmark {
    display: flex;
    align-items: center;
    gap: 9px
}

.brandmark svg {
    width: 26px;
    height: auto;
    display: block
}

.topbar .meta {
    display: none
}

@media (min-width: 760px) {
    .topbar .meta {
        display: block
    }
}

.dm-link {
    border: 1px solid var(--ink);
    padding: 5px 12px;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    transition: background .18s, color .18s;
}

.dm-link:hover {
    background: var(--ink);
    color: var(--paper)
}

/* ---------- hero ---------- */
.hero {
    padding: 34px 0 0;
    position: relative
}

.hero-eyebrow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 16px;
}

.hero-type {
    position: relative
}

.hero-type h1 {
    font-size: clamp(64px, 19vw, 258px);
    white-space: nowrap;
}

.hero-type h1 .star {
    color: var(--red)
}

.hero-sub {
    display: grid;
    gap: 20px;
    grid-template-columns:1fr;
    padding: 20px 0 34px;
}

@media (min-width: 820px) {
    .hero-sub {
        grid-template-columns:1.15fr 0.85fr;
        align-items: end
    }
}

.hero-sub p {
    max-width: 42ch;
    font-size: 14px;
    line-height: 1.6
}

.hero-sub p em {
    font-style: normal;
    background: var(--ink);
    color: var(--paper);
    padding: 0 4px
}

.cta-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.btn {
    display: inline-block;
    padding: 12px 20px;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    border: 1px solid var(--ink);
    transition: transform .16s ease, background .18s, color .18s;
}

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

.btn-solid:hover {
    background: var(--red);
    border-color: var(--red);
    transform: translate(-2px, -2px)
}

.btn-ghost:hover {
    background: var(--ink);
    color: var(--paper);
    transform: translate(-2px, -2px)
}

/* ---------- the eye (signature) ---------- */
.eye-slot {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
}

@media (min-width: 820px) {
    .eye-slot {
        justify-content: flex-end
    }
}

.eye {
    width: 132px;
    height: auto;
    display: block
}

.eye .pupil {
    transition: transform .12s linear
}

.eye-cap {
    max-width: 15ch;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: .55
}

/* ---------- ticker ---------- */
.ticker {
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: var(--ink);
    color: var(--paper);
    overflow: hidden;
    white-space: nowrap;
}

.ticker-track {
    display: inline-flex;
    gap: 0;
    will-change: transform;
}

.ticker span, .ticker-seg {
    font-family: 'Anton', Impact, sans-serif;
    font-size: 19px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 9px 20px;
    display: inline-block;
    white-space: nowrap;
}

.ticker span i, .ticker-seg i {
    color: var(--red);
    font-style: normal
}

@keyframes tickerSlide {
    from {
        transform: translateX(0)
    }
    to {
        transform: translateX(calc(-1 * var(--seg-width, 0px)))
    }
}

/* ---------- product ---------- */
.product {
    padding: 0 0 0
}

.product-grid {
    display: grid;
    grid-template-columns:1fr;
}

@media (min-width: 900px) {
    .product-grid {
        grid-template-columns:1.25fr 0.75fr
    }
}

.shot {
    border-bottom: 1px solid var(--rule);
    background: repeating-conic-gradient(var(--bone) 0% 25%, #f4f3f0 0% 50%) 0 0/12px 12px;
}
.gallery-cell {
    width: 100%;
}

@media screen and ( min-width: 768px ) {
    /* half-width cells for larger devices */
    .gallery-cell { width: 50%; }
}

.bagline {
    max-height: 720px;
    width:100%;
}

.shot-tag {
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--ink);
    color: var(--paper);
    padding: 6px 12px;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.spec {
    padding: 26px 22px 30px
}

.spec h2 {
    font-size: clamp(42px, 7vw, 74px);
    padding-bottom: .08em
}

.spec .price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 14px 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rule);
}

.spec .price b {
    font-family: 'Anton', sans-serif;
    font-size: 30px;
    font-weight: 400
}

.spec .price span {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: .6
}

dl.specs {
    display: grid;
    grid-template-columns:auto 1fr;
    gap: 0
}

dl.specs dt {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: .5;
    padding: 8px 16px 8px 0;
    border-bottom: 1px solid var(--bone);
}

dl.specs dd {
    padding: 8px 0;
    border-bottom: 1px solid var(--bone);
    text-align: right;
    font-size: 12px;
}

.spec .note {
    margin-top: 18px;
    font-size: 11px;
    line-height: 1.7;
    opacity: .62
}

/* ---------- process ---------- */
.process {
    border-top: 1px solid var(--rule);
    padding: 44px 0 48px
}

.sec-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 26px
}

.sec-head h2 {
    font-size: clamp(34px, 5.6vw, 60px)
}

.steps {
    display: grid;
    grid-template-columns:1fr;
    gap: 0;
    border-top: 1px solid var(--rule)
}

@media (min-width: 760px) {
    .steps {
        grid-template-columns:repeat(3, 1fr)
    }
}

.step {
    padding: 20px 18px 26px;
    border-bottom: 1px solid var(--rule);
    position: relative;
}

@media (min-width: 760px) {
    .step {
        border-bottom: none;
        border-right: 1px solid var(--bone)
    }

    .step:last-child {
        border-right: none
    }
}

.step .n {
    font-family: 'Anton', sans-serif;
    font-size: 44px;
    line-height: 1;
    color: var(--red);
    display: block;
    margin-bottom: 10px;
}

.step h3 {
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 7px
}

.step p {
    font-size: 12px;
    line-height: 1.65;
    opacity: .72;
    max-width: 30ch
}

/* ---------- club ---------- */
.club {
    background: var(--ink);
    color: var(--paper);
    padding: 56px 0 60px;
}

.club .wrap {
    text-align: center
}

.club h2 {
    font-size: clamp(34px, 11.5vw, 160px);
    white-space: nowrap
}

.club h2 .star {
    color: var(--red)
}

.club .lines {
    margin: 24px auto 0;
    max-width: 52ch;
    font-size: 12.5px;
    line-height: 2;
    opacity: .8;
}

.club .lines i {
    font-style: normal;
    color: var(--red)
}

footer {
    border-top: 1px solid var(--rule);
    padding: 20px 0 30px
}

.foot {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: .62
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important
    }

    html {
        scroll-behavior: auto
    }
}

.logo {
    height: 72px;
    width: 72px;
}