/* Old New Club -- one-page site.
   Values are measured from the Framer site (captured 2026-10-29, see
   docs/references/framer-capture/). Three layouts, same breakpoints as
   Framer: desktop 1200px+, tablet 648-1199px, mobile under 648px.
   Desktop rules are the base; tablet and mobile override them below. */

/* Fallback fonts, copied from Framer. Characters the web fonts lack
   (the club in the logo, the bullet dots in each jacket's size line) are drawn
   from these local fonts, scaled to sit like the real ones. */
@font-face {
    font-family: "EB Garamond Placeholder";
    src: local("Times New Roman");
    ascent-override: 107.66%;
    descent-override: 31.86%;
    line-gap-override: 0%;
    size-adjust: 93.54%;
}

@font-face {
    font-family: "Inter Display Placeholder";
    src: local("Arial");
    ascent-override: 98.56%;
    descent-override: 24.54%;
    line-gap-override: 0%;
    size-adjust: 98.29%;
}

:root {
    --red: #c20e0e;
    --ink: rgba(0, 0, 0, 0.8);
    --muted: rgba(0, 0, 0, 0.5);
    --paper: rgba(255, 255, 255, 0.8);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--red);
    color: var(--ink);
    font-family: "EB Garamond", "EB Garamond Placeholder", serif;
}

h1,
h2,
p {
    margin: 0;
}

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

/* Line breaks that only appear on tablet and mobile */
.narrow {
    display: none;
}

/* ---------- Page frame (desktop: exactly one screen tall, never under 800px) */

.page {
    display: flex;
    flex-direction: column;
    height: max(100vh, 800px);
}

/* ---------- Header: logo left, intro starts at the page's halfway line */

.masthead {
    flex: none;
    height: 160px;
    padding: 20px 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.logo {
    justify-self: start;
    width: min-content;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #000;
}

.logomark {
    display: flex;
    font-size: 80px;
    line-height: 1;
    font-weight: 400;
    color: #000;
    animation: fade-in 0.4s cubic-bezier(0.44, 0, 0.56, 1) both;
}

.logomark-o {
    font-family: "UnifrakturCook", sans-serif;
    font-weight: 700;
    letter-spacing: -0.1em;
}

.logomark-n {
    font-family: "Rock 3D", sans-serif;
    letter-spacing: -0.3em;
}

/* Framer listed Inter Display here, but its Inter Display files never
   contained the club symbol, so the club has always been drawn in Arial
   (via the placeholder above). Same stack kept for a 1:1 match. */
.logomark-club {
    font-family: "Inter Display Placeholder", sans-serif;
    letter-spacing: -0.1em;
}

.tagline {
    font-size: 16px;
    line-height: 1;
    color: #000;
    text-align: center;
    white-space: nowrap;
    animation: fade-in 0.4s cubic-bezier(0.44, 0, 0.56, 1) both;
}

.intro {
    font-size: 20px;
    line-height: 1.2;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .logomark,
    .tagline {
        animation: none;
    }
}

/* ---------- Collection: four jackets in a row, filling the leftover height */

.collection {
    flex: 1 0 0;
    min-height: 0;
    display: flex;
}

.card {
    width: 25%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 3D viewer box. viewer.js puts the canvas inside. */
.jacket {
    flex: none;
    position: relative;
    width: 100%;
    height: 85%;
    min-height: 408px;
    touch-action: pan-y;
}

.jacket-stage {
    position: relative;
    width: 100%;
    height: 100%;
    touch-action: pan-y;
}

.jacket-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* "Tap to retry" message when a model fails to load */
.jacket-error {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.03);
    color: #666;
    font: 14px sans-serif;
    text-align: center;
}

.jacket-error-hint {
    margin-top: 8px;
    font-size: 12px;
}

.info {
    flex: none;
    width: 100%;
    height: 15%;
    min-height: 80px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* flex: none stops the rows squeezing when the caption box is short */
.price-row {
    flex: none;
    width: 100%;
    height: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

.title,
.price {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

.fit {
    flex: none;
    width: 100%;
    font-size: 16px;
    line-height: 1.2;
    color: var(--muted);
    text-align: center;
}

/* ---------- Footer: big INQUIRE link, then three small columns */

.footer {
    flex: none;
    padding: 0 40px;
}

.inquire {
    height: 108px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "UnifrakturCook", sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.2;
    color: var(--paper);
}

.footer-row {
    height: 72px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    line-height: 1.2;
}

.drop,
.ask,
.links {
    width: 30%;
}

.ask {
    text-align: center;
}

.links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.links a {
    height: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.links svg {
    width: 20px;
    height: 20px;
    flex: none;
    fill: var(--ink);
}

/* ---------- Tablet: 648-1199px. Stacked header, 2 x 2 jacket grid. */

@media (max-width: 1199.98px) {
    .narrow {
        display: inline;
    }

    .page {
        height: auto;
        min-height: 800px;
    }

    .masthead {
        height: auto;
        padding: 24px 24px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .logo {
        justify-self: auto;
        width: 100%;
    }

    .logomark {
        font-size: 64px;
    }

    .intro {
        width: 100%;
        max-width: 600px;
        font-size: 18px;
    }

    .collection {
        flex: none;
        width: 90%;
        margin: 24px auto 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(50px, 1fr));
        gap: 24px;
    }

    /* Framer resolves each tablet card to this fixed height */
    .card {
        width: auto;
        height: 494.8px;
    }

    .footer-row {
        font-size: 18px;
    }

    .links {
        font-size: 20px;
    }

    /* Framer's tablet layout gives the second link a taller row */
    .links a:last-child {
        height: 24px;
    }
}

/* ---------- Mobile: under 648px. One column, smaller type. */

@media (max-width: 647.98px) {
    .masthead {
        gap: 16px;
    }

    .logomark {
        font-size: 56px;
    }

    .intro {
        max-width: none;
        font-size: 16px;
    }

    .collection {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .card {
        width: 100%;
        height: 488px;
    }

    .jacket {
        height: 408px;
    }

    .info {
        height: 80px;
        padding: 24px 40px;
        gap: 0;
    }

    .fit {
        text-align: left;
    }

    .footer {
        margin-top: 24px;
        padding: 0 24px;
    }

    .inquire {
        height: 79px;
    }

    .footer-row {
        height: 53px;
        margin-bottom: 24px;
        font-size: 12px;
    }

    .links {
        font-size: 12px;
    }

    .links a,
    .links a:last-child {
        height: 16px;
    }

    .links svg {
        width: 16px;
        height: 16px;
    }
}