@font-face{font-family:Barlow;src:url('/assets/display.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:DM;src:url('/assets/body-medium.ttf') format('truetype');font-weight:600;font-display:swap}
:root{--cream:#f2e9d4;--thread:#c8a879;--fabric:url('/assets/denim.webp')}
*{box-sizing:border-box}body{margin:0;color:var(--cream);background-color:#17364e;background-image:linear-gradient(110deg,#091d3020,#0a21364a),var(--fabric);background-size:auto,750px;font-family:DM,Arial,sans-serif;-webkit-font-smoothing:antialiased}::selection{background:#d1b184;color:#17364e}
.jeans{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;position:relative;overflow-x:clip}
.waistband{position:relative;width:100%;display:flex;justify-content:center;align-items:center;padding:48px 28px 39px;background:linear-gradient(#193c5214,#061d3624);border-bottom:2px solid #071d3280;box-shadow:0 5px 8px #06192c50}
.waistband::before,.waistband::after{content:'';position:absolute;bottom:7px;left:0;right:0;border-top:1px dashed #c8a8798c}.waistband::after{bottom:14px;opacity:.55}
.leather-patch{position:relative;margin:0;padding:29px 55px 32px;color:#59412c;background-color:#bd9565;background-image:radial-gradient(ellipse at 30% 10%,#f3d9ac66,transparent 75%),repeating-linear-gradient(47deg,transparent 0 2px,#61401b08 3px 4px);border:1px solid #87633d;box-shadow:2px 4px 7px #06172d88,inset 0 0 20px #6f421c42,inset 0 1px 2px #e4c18f;font-family:Barlow,Impact,sans-serif;font-size:65px;font-weight:800;line-height:1;letter-spacing:1px;text-shadow:0 1px 0 #e8c699,0 -1px 0 #715032;transform:rotate(-2deg);white-space:nowrap}
.leather-patch::after{content:'';position:absolute;inset:9px;border:1px dashed #715137ab;box-shadow:0 0 0 1px #e0bc871a;pointer-events:none}
.belt-loop{position:absolute;top:0;bottom:-17px;width:35px;z-index:1;border-inline:1px solid #071d3299;background-image:linear-gradient(90deg,#9ab3c01c,#06223a33),var(--fabric);background-size:auto,450px;box-shadow:3px 4px 5px #061c335c}.belt-loop::after{content:'';position:absolute;inset:0 5px 6px;border:1px dashed #c8a87988;border-top:0}.belt-loop-left{left:max(8%,calc(50% - 480px));transform:rotate(-1deg)}.belt-loop-right{right:max(8%,calc(50% - 480px));transform:rotate(1deg)}
.pockets{width:min(920px,100%);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;column-gap:84px;margin:auto;padding:74px 45px 56px}
.pocket{position:relative;aspect-ratio:400/395;width:100%;filter:drop-shadow(2px 9px 5px #06172d88)}.pocket-views{transform:rotate(-4deg)}.pocket-audience{transform:rotate(4deg)}
.pocket-fabric{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,100% 80%,75% 94%,50% 100%,25% 94%,0 80%);background-color:#18415f;background-image:linear-gradient(110deg,#779ebc30,#0b283856),var(--fabric);background-size:auto,530px;box-shadow:inset 1px 3px 6px #abc3c740,inset -2px 0 8px #05182d}.pocket-audience .pocket-fabric{background-image:linear-gradient(110deg,#456f9015,#0b283866),var(--fabric)}
.pocket-fabric::before{content:'';position:absolute;left:0;right:0;top:0;height:10%;background:linear-gradient(#0b233a22,#21456010);border-bottom:2px solid #0c263966;box-shadow:0 2px 3px #9cb8c418}
.stitching{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--thread);stroke-width:1.7;stroke-dasharray:4 4;filter:drop-shadow(0 1px 0 #051427)}.pocket-arc{stroke-width:1.3;opacity:.85}
.rivet{position:absolute;top:3%;width:3.5%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 25%,#e6bd85 0%,#bc874b 30%,#6f462c 65%,#b18359 75%,#4b3528 100%);box-shadow:1px 2px 3px #07192f}.rivet-left{left:3%}.rivet-right{right:3%}.rivet::after{content:'';position:absolute;inset:29%;border:1px solid #573719;border-radius:50%}
.red-tab{position:absolute;right:-12px;top:19%;width:14px;height:48px;z-index:-1;background:repeating-linear-gradient(0deg,#a63931 0 2px,#aa4138 2px 3px);border:1px solid #752922;box-shadow:2px 2px 3px #061b2e}
.pocket-content{position:absolute;top:23%;width:100%;text-align:center}.pocket-content strong{display:block;font-family:Barlow,Impact,sans-serif;font-size:99px;font-weight:800;letter-spacing:-2px;line-height:1.12;text-shadow:1px 2px 1px #08223870;font-variant-numeric:tabular-nums}.pocket-content .views span{font-size:.6em;vertical-align:super;padding-left:2px}.pocket-content h2{margin:13px 0 0;display:flex;justify-content:center;align-items:center;gap:7px;font-size:11px;font-weight:600;letter-spacing:2px;line-height:1.5}.status-dot{width:6px;height:6px;border-radius:50%;background:#b4c59a;box-shadow:0 0 0 3px #b4c59a17}
footer{text-align:center;padding:18px 25px 49px}footer a{display:inline-block;color:var(--cream);font-size:14px;font-weight:600;letter-spacing:.5px;text-underline-offset:6px;text-decoration-color:#c8a87966;transition:color .2s,text-decoration-color .2s;padding:10px 0}footer a:hover{color:#d5b586;text-decoration-color:#d5b586}footer a:focus-visible{outline:2px dashed var(--thread);outline-offset:8px}
@media(max-width:850px){.pockets{padding-inline:8%;column-gap:10%}.pocket-content strong{font-size:11vw}.pocket-content h2{font-size:9px;letter-spacing:1.5px;margin-top:9px}.leather-patch{font-size:57px;padding:27px 42px 30px}.belt-loop-left{left:6%}.belt-loop-right{right:6%}}
@media(max-width:560px){.waistband{padding:47px 20px 35px}.leather-patch{font-size:39px;padding:23px 28px 25px;letter-spacing:.5px}.leather-patch::after{inset:7px}.belt-loop{width:22px;bottom:-10px}.belt-loop-left{left:3.5%}.belt-loop-right{right:3.5%}.belt-loop::after{inset:0 4px 4px}.pockets{padding:58px 7% 45px;column-gap:9%}.pocket-content{top:23%}.pocket-content strong{font-size:11.5vw;letter-spacing:-1px}.pocket-content h2{margin-top:8px;font-size:8px;letter-spacing:.6px;gap:4px}.status-dot{width:3px;height:3px;box-shadow:0 0 0 2px #b4c59a17}.red-tab{width:8px;right:-6px;height:25px}footer{padding:15px 20px 37px}footer a{font-size:12px;letter-spacing:.3px}}
@media(max-width:360px){.leather-patch{font-size:34px;padding:22px 23px 24px}.pocket-content h2{font-size:7.5px;letter-spacing:.3px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}