@import url('https://fonts.googleapis.com/css2?family=Anton&family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;600;800&display=swap');

:root { --ink:#0b0d0e; --bone:#eeeae0; --grey:#777774; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--bone); font-family:Inter,Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
.shell { width:min(100% - 8vw, 1500px); margin-inline:auto; }

.hero { min-height:100svh; position:relative; overflow:hidden; background:#0b0d0e; isolation:isolate; }
.hero::before { content:""; position:absolute; inset:0; z-index:-2; opacity:.28; background-image:url('/assets/deliveries.png'); background-size:cover; background-position:center 43%; filter:grayscale(1) contrast(1.7) brightness(.25); }
.hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(11,13,14,.98) 0%,rgba(11,13,14,.91) 44%,rgba(11,13,14,.3) 75%,rgba(11,13,14,.78) 100%); }
.nav { height:112px; display:grid; grid-template-columns:230px 1fr 150px; align-items:center; border-bottom:1px solid rgba(238,234,224,.16); font:500 13px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.08em; }
.brand img { width:128px; height:72px; object-fit:contain; object-position:left center; }
.nav nav { justify-self:center; display:flex; gap:clamp(28px,4vw,70px); }
.nav nav a,.bag { padding-block:12px; position:relative; }
.nav nav a::after,.bag::after { content:""; position:absolute; height:1px; background:var(--bone); left:0; right:100%; bottom:5px; transition:right .25s ease; }
.nav nav a:hover::after,.bag:hover::after { right:0; }
.bag { justify-self:end; }

.hero-grid { display:grid; grid-template-columns:54% 46%; min-height:calc(100svh - 172px); }
.hero-copy { align-self:center; padding:8vh 0 9vh; position:relative; z-index:2; animation:rise .7s ease both; }
.eyebrow { font:italic 500 clamp(12px,1.25vw,19px)/1.4 'IBM Plex Mono',monospace; letter-spacing:.12em; text-transform:uppercase; margin:0 0 18px; }
.hero h1 { font:400 clamp(84px,10.6vw,180px)/.86 Anton,Impact,sans-serif; text-transform:uppercase; letter-spacing:-.025em; margin:0; max-width:920px; color:#f3f0e8; text-shadow:0 0 1px #fff; }
.intro { margin:28px 0 36px; font-size:clamp(16px,1.25vw,22px); line-height:1.42; color:#d1cec6; }
.actions { display:flex; align-items:center; gap:34px; flex-wrap:wrap; }
.primary { width:300px; min-height:70px; display:flex; justify-content:center; align-items:center; gap:20px; border:1px solid var(--bone); outline:1px solid rgba(238,234,224,.5); outline-offset:4px; background:var(--bone); color:var(--ink); font-weight:800; text-transform:uppercase; letter-spacing:.04em; transition:.25s ease; }
.primary:hover { background:transparent; color:var(--bone); }
.primary span { transition:transform .25s ease; }.primary:hover span { transform:translate(4px,-4px); }
.text-link { font:500 14px/1.5 'IBM Plex Mono',monospace; text-transform:uppercase; border-bottom:1px solid var(--bone); padding-bottom:7px; }
.location { margin:62px 0 0; font:400 13px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.12em; color:#aaa79f; }

.hero-visual { position:relative; overflow:hidden; align-self:stretch; min-height:620px; }
.hero-image { width:115%; height:100%; object-fit:cover; object-position:center top; filter:grayscale(1) contrast(1.16) brightness(.73); mix-blend-mode:screen; opacity:.9; animation:reveal 1s ease both; }
.hero-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--ink) 0%,transparent 25%,transparent 78%,rgba(11,13,14,.72) 100%); pointer-events:none; }
.speed-lines { position:absolute; z-index:2; inset:15% -8% 10% 48%; opacity:.22; background:repeating-linear-gradient(0deg,transparent 0 17px,rgba(238,234,224,.55) 18px,transparent 19px 31px); filter:blur(4px); }
.delivery-stamp { position:absolute; z-index:3; width:92px; height:125px; right:4%; bottom:8%; object-fit:cover; object-position:50% 56%; filter:grayscale(1) contrast(1.4); opacity:.9; }
.ticker { height:60px; border-block:1px solid rgba(238,234,224,.4); overflow:hidden; display:flex; align-items:center; font:400 13px/1 'IBM Plex Mono',monospace; text-transform:uppercase; white-space:nowrap; }
.ticker div { display:flex; min-width:max-content; align-items:center; gap:50px; animation:ticker 22s linear infinite; }.ticker b { font-size:20px; }

.product-section { background:var(--bone); color:var(--ink); display:grid; grid-template-columns:1.15fr .85fr; gap:7vw; padding-block:110px; border-bottom:1px solid #777; }
.product-gallery { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.product-gallery figure { margin:0; overflow:hidden; background:#d6d5d2; aspect-ratio:3/4; }
.product-gallery img { width:100%; height:100%; object-fit:cover; transition:transform .55s ease; }.product-gallery figure:hover img{transform:scale(1.02)}
.product-info { position:sticky; top:40px; align-self:start; padding-top:12px; }
.eyebrow.dark { color:#555; }
.product-info h2,.delivery-copy h2 { font:400 clamp(64px,8vw,126px)/.88 Anton,Impact,sans-serif; text-transform:uppercase; letter-spacing:-.02em; margin:15px 0 30px; }
.product-copy,.delivery-copy p:not(.eyebrow) { font-size:17px; line-height:1.65; max-width:570px; color:#3e3e3b; }
.product-option { border-top:1px solid #a19f99; padding:20px 0; display:grid; grid-template-columns:90px 1fr; align-items:center; gap:10px; font:500 12px/1.4 'IBM Plex Mono',monospace; text-transform:uppercase; }
.product-option>span { color:#64625e; }.product-option small{grid-column:2;color:#64625e;font-size:10px}.swatches,.sizes{display:flex;gap:12px;align-items:center}.swatches i{display:block;width:26px;height:26px;border-radius:50%;border:2px solid var(--bone);outline:1px solid #777}.swatches .black{background:#111}.swatches .wine{background:#5b1722}.swatches .military{background:#263f1d}.sizes b{display:grid;place-items:center;width:42px;height:42px;border:1px solid #222;font-size:13px}.price{font:500 15px/1.4 'IBM Plex Mono',monospace;text-transform:uppercase;margin:22px 0}
.buy-button{min-height:68px;width:100%;display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:var(--bone);padding:0 24px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;transition:.25s ease;border:1px solid var(--ink)}.buy-button:hover{background:transparent;color:var(--ink)}.stock-note{display:block;margin-top:14px;color:#666;font:400 10px/1.4 'IBM Plex Mono',monospace;text-transform:uppercase}
.dark-link { display:inline-block; margin-top:26px; padding-bottom:7px; border-bottom:1px solid; font:500 14px/1.4 'IBM Plex Mono',monospace; text-transform:uppercase; }

.delivery-section { background:var(--bone); color:var(--ink); display:grid; grid-template-columns:1fr 1fr; gap:8vw; padding-block:120px; align-items:center; }
.delivery-card { background:#696966; overflow:hidden; aspect-ratio:4/5; }
.delivery-card img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); transition:transform .7s ease; }.delivery-card:hover img { transform:scale(1.025); }
.delivery-copy h2 { font-size:clamp(56px,6.3vw,105px); }

footer { border-top:1px solid rgba(238,234,224,.3); padding:75px 0; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr auto; gap:40px; align-items:start; }
.footer-grid>img { width:150px; }.footer-grid p { margin:0; font:400 30px/1.15 Anton,sans-serif; text-transform:uppercase; }.footer-grid div { display:flex; flex-direction:column; gap:15px; font:500 13px/1.3 'IBM Plex Mono',monospace; text-transform:uppercase; }.footer-grid small { color:#999; font:400 11px/1.7 'IBM Plex Mono',monospace; text-transform:uppercase; }

@keyframes rise { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@keyframes reveal { from{opacity:0;clip-path:inset(0 0 0 100%)} to{opacity:.9;clip-path:inset(0)} }
@keyframes ticker { to { transform:translateX(-50%); } }

@media (max-width:800px) {
  .shell { width:min(100% - 36px, 720px); }
  .nav { height:88px; grid-template-columns:1fr auto; }.brand img{width:105px;height:58px}.nav nav{display:none}.bag{font-size:11px}
  .hero-grid { grid-template-columns:1fr; min-height:auto; }
  .hero-copy { padding:14vh 0 8vh; }.hero h1{font-size:clamp(76px,25vw,120px);max-width:100%}.intro{font-size:16px}.actions{align-items:flex-start;flex-direction:column}.primary{width:min(100%,300px)}.location{margin-top:46px}
  .hero-visual { min-height:62vh; width:calc(100% + 36px); margin-left:-18px; }.hero-visual::after{background:linear-gradient(180deg,var(--ink),transparent 30%,rgba(11,13,14,.4))}.delivery-stamp{right:6%;bottom:7%}
  .ticker{height:52px}
  .product-section { grid-template-columns:1fr; gap:60px; padding-block:70px; }.product-gallery{gap:8px}.product-info{position:static}.product-info h2,.delivery-copy h2{font-size:clamp(58px,19vw,90px)}
  .delivery-section{grid-template-columns:1fr;gap:70px;padding-block:80px}.delivery-card{order:2}
  .footer-grid{grid-template-columns:1fr 1fr}.footer-grid div{grid-column:1}.footer-grid small{grid-column:2;grid-row:2}
}

@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} }