:root{--ink:#241611;--paper:#fbf3e1;--cream:#f2e2c4;--peach:#e9845f;--rust:#9c2b1b;--gold:#e8a33d;--olive:#6e6b3f;--title:'Big Shoulders',sans-serif;--serif:'Lora',serif;--body:'Bitter',serif;--mono:'Space Mono',monospace}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--ink)}
body{color:var(--paper);font-family:var(--body)}
body:after{position:fixed;z-index:10;inset:0;content:"";pointer-events:none;opacity:.11;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}
.choice{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:100svh;overflow:hidden}
.brand{position:relative;display:flex;align-items:flex-end;min-height:100svh;overflow:hidden;color:var(--paper);text-decoration:none;isolation:isolate}
.brand__image,.brand__shade{position:absolute;z-index:-2;inset:0}
.brand__image{background-position:center;background-size:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .6s ease}
.brand__shade{z-index:-1;transition:background .5s ease}
.brand--raw .brand__image{background-image:url('./imgs/hero_img_raw_gym.jpg');filter:grayscale(.2) contrast(1.08); background-position: right;}
.brand--raw .brand__shade{background:linear-gradient(180deg,rgba(18,13,11,.15),rgba(19,13,10,.92) 91%),linear-gradient(90deg,rgba(18,13,11,.28),transparent)}
.brand--peaches .brand__image{background-image:url('./imgs/image00017.jpeg');background-position:58% center;filter:saturate(.82)}
.brand--peaches .brand__shade{background:linear-gradient(180deg,rgba(94,34,22,.1),rgba(88,28,18,.87) 93%),linear-gradient(270deg,rgba(156,43,27,.22),transparent)}
.brand:hover .brand__image,.brand:focus-visible .brand__image{transform:scale(1.045);filter:none}
.brand:focus-visible{z-index:4;outline:4px solid var(--gold);outline-offset:-4px}
.brand__number{position:absolute;top:2rem;font:700 .62rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase}
.brand--raw .brand__number{left:2.2rem}.brand--peaches .brand__number{right:2.2rem}
.brand__copy{width:100%;padding:4rem clamp(2rem,5vw,6rem) 5.7rem}
.brand--peaches .brand__copy{text-align:right}
.brand__copy p{margin:1.2rem 0 1.6rem;font-size:clamp(.82rem,1.15vw,1rem);line-height:1.65;opacity:.82}
.raw-mark{display:flex;flex-direction:column;width:min-content;font:italic 900 clamp(5.5rem,10vw,11rem)/.63 var(--title);letter-spacing:-.065em;text-shadow:4px 4px 0 var(--rust)}
.peaches-mark{display:flex;flex-direction:column;align-items:flex-end;color:var(--cream);font:italic 600 clamp(3.8rem,7vw,7.4rem)/.68 var(--serif);letter-spacing:-.07em;text-shadow:3px 3px 0 rgba(156,43,27,.62);transform:rotate(-2deg)}
.peaches-mark strong{font-size:1.05em}
.brand__cta{display:inline-flex;align-items:center;gap:1rem;padding-bottom:.55rem;border-bottom:1px solid currentColor;font:700 .65rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.brand__cta b{display:inline-grid;place-items:center;width:2.15rem;height:2.15rem;color:var(--ink);background:var(--gold);border-radius:50%;font:1rem/1 sans-serif;transition:transform .25s ease}
.brand--peaches .brand__cta b{background:var(--peach)}
.brand:hover .brand__cta b{transform:translateX(5px)}
.choice__header{position:absolute;z-index:5;top:1.6rem;left:50%;width:min(580px,75vw);text-align:center;transform:translateX(-50%);pointer-events:none}
.choice__header p,.choice__hint{font:700 .58rem/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.choice__header p{margin:0 0 .65rem}.choice__header h1{margin:0;font:800 clamp(2.4rem,4vw,4.6rem)/.82 var(--title);letter-spacing:-.04em;text-transform:uppercase;text-shadow:2px 2px 0 rgba(36,22,17,.5)}
.choice__header h1 em{color:var(--cream);font:italic 600 .78em var(--serif);text-transform:none}
.choice__hint{display:block;margin-top:.8rem;opacity:.65}
.choice__seal{position:absolute;z-index:6;top:50%;left:50%;display:grid;place-items:center;width:58px;height:58px;color:var(--ink);background:var(--gold);border:4px solid var(--ink);border-radius:50%;font:700 .65rem var(--mono);transform:translate(-50%,-50%) rotate(-8deg);box-shadow:0 0 0 2px var(--gold)}
footer{position:absolute;z-index:7;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;gap:1rem;height:34px;color:var(--ink);background:var(--cream);border-top:1px solid var(--ink);font:700 .55rem var(--mono);letter-spacing:.14em;text-transform:uppercase}
footer i{width:4px;height:4px;background:var(--rust);border-radius:50%}
@media(max-width:720px){.choice{display:block;min-height:100svh}.brand{min-height:50svh}.choice__header{top:50%;width:100%;padding:.65rem 4.5rem;color:var(--ink);background:var(--cream);border-block:2px solid var(--ink);transform:translate(-50%,-50%)}.choice__header p,.choice__hint{display:none}.choice__header h1{font-size:2rem;text-shadow:none}.choice__header h1 em{color:var(--rust)}.choice__seal{width:46px;height:46px;font-size:.56rem}.brand__number{top:1.2rem}.brand--raw .brand__number{left:1.2rem}.brand--peaches .brand__number{right:1.2rem}.brand__copy{padding:4rem 1.4rem 3rem}.brand--raw .brand__copy{padding-bottom:4.4rem}.brand--peaches{align-items:flex-end}.brand--peaches .brand__copy{padding-top:5rem;padding-bottom:3.6rem}.raw-mark{font-size:clamp(4.7rem,24vw,7rem)}.peaches-mark{font-size:clamp(3.3rem,17vw,5rem)}.brand__copy p{display:none}.brand__cta{margin-top:1rem}footer{display:none}}
@media(prefers-reduced-motion:reduce){.brand__image,.brand__cta b{transition:none}}
