/* COCONYTE – shared base: fonts, reset, can component, icons */
/* Jost (variable, weights 300–500), self-hosted from Google Fonts; SIL OFL 1.1, see fonts/Jost-OFL.txt */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 500; font-display: swap; src: url("fonts/jost-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 500; font-display: swap; src: url("fonts/jost-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: "Jost", "Futura", "Avenir Next", system-ui, sans-serif; font-weight: 300; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
button, input { font: inherit; color: inherit; }
.ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: middle; }

:root { --blue: #5b8ee6; --blue-deep: #3f6fc4; }

/* eyebrow / small caps */
.eyebrow { font-size: 11px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; }
.caps { font-size: 11px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .7em; padding: 1.05em 1.9em; font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; border: 1px solid currentColor; background: transparent; cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .25s; }
.btn:active { transform: translateY(1px); }
.btn .ico { width: 1.4em; height: 1.4em; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* photo placeholder (atmospheric, replaces grey boxes until real shoots exist) */
.photo { position: relative; overflow: hidden; background: #16181c; }
.photo::after { content: attr(data-label); position: absolute; left: 16px; bottom: 14px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; opacity: .55; }
.photo--gym   { background: radial-gradient(120% 90% at 85% 10%, rgba(255,214,160,.28), transparent 55%), linear-gradient(160deg, #2a2926, #121315 70%); }
.photo--club  { background: repeating-linear-gradient(115deg, transparent 0 38px, rgba(91,142,230,.14) 38px 40px), radial-gradient(90% 70% at 20% 90%, rgba(91,142,230,.35), transparent 60%), #0e0f13; }
.photo--run   { background: radial-gradient(110% 80% at 80% 15%, rgba(255,230,200,.9), transparent 55%), linear-gradient(180deg, #e9e6e1, #d8d6d2); color: #555; }
.photo--roof  { background: radial-gradient(3px 3px at 20% 30%, #ffd9a0 50%, transparent 51%), radial-gradient(2px 2px at 60% 22%, #fff 50%, transparent 51%), radial-gradient(3px 3px at 75% 40%, #9fc0ff 50%, transparent 51%), linear-gradient(180deg, #1c2233, #0c0e14 80%); color: #cfd6e6; }

/* ---------- CAN (pure CSS, scales with its width) ---------- */
.can { --w: 180px; width: var(--w); flex: none; align-self: flex-start; height: auto; aspect-ratio: 1 / 2.38; position: relative; container-type: inline-size; filter: drop-shadow(0 30px 30px rgba(0,0,0,.28)); }
.can__body { position: absolute; inset: 7% 0 4.5% 0; border-radius: 4% / 2%;
  background: linear-gradient(90deg, #c4c7cc 0%, #eceef0 10%, #fafafa 26%, #ffffff 38%, #f0f1f2 58%, #dcdfe2 78%, #b4b8be 94%, #9da1a8 100%); }
.can::before { content: ""; position: absolute; left: 6%; right: 6%; top: 0; height: 8%; border-radius: 18% 18% 6% 6% / 50% 50% 10% 10%;
  background: linear-gradient(90deg, #8e9299, #d7dadd 22%, #f5f6f7 40%, #c9ccd0 65%, #8a8e95); }
.can::after { content: ""; position: absolute; left: 3%; right: 3%; bottom: 0; height: 5.5%; border-radius: 0 0 40% 40% / 0 0 100% 100%;
  background: linear-gradient(90deg, #8e9299, #d9dcdf 25%, #f3f4f5 42%, #c4c7cb 68%, #878b92); }
.can__label { position: absolute; inset: 11% 10% 9% 12%; display: grid; grid-template-columns: auto 1fr; column-gap: 11cqw; color: #1d1f22; }
.can__brand { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 17cqw; font-weight: 300; letter-spacing: .26em; line-height: 1; align-self: end; margin-bottom: 18cqw; }
.can__side { display: flex; flex-direction: column; font-size: 5.2cqw; font-weight: 400; letter-spacing: .14em; line-height: 1.35; padding-top: 12cqw; }
.can__dash { width: 7cqw; height: 1px; background: var(--blue); margin: 16cqw 0 6cqw; }
.can__claim { color: var(--blue); }
.can__drop { width: 11cqw; height: 11cqw; color: var(--blue); margin: 12cqw 0 0 -1cqw; }
.can__vol { margin-top: auto; font-size: 5.4cqw; letter-spacing: .06em; }
.can--back .can__label { grid-template-columns: 1fr; inset: 14% 12% 9% 14%; }
.can__feat { display: grid; grid-template-columns: 11cqw 1fr; gap: 5cqw; align-items: center; font-size: 4.6cqw; font-weight: 400; letter-spacing: .14em; line-height: 1.35; margin-bottom: 11cqw; }
.can__feat svg { width: 11cqw; height: 11cqw; color: var(--blue); }
.can--back .can__dash { margin-top: auto; }
.can--back .can__vol { margin-top: 5cqw; }

/* newsletter toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, calc(100% + 48px)); visibility: hidden; padding: 14px 22px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; background: #111; color: #fff; border: 1px solid rgba(255,255,255,.15); transition: transform .4s cubic-bezier(.2,.7,.2,1), visibility .4s; z-index: 100; }
.toast.show { transform: translate(-50%, 0); visibility: visible; }