/* ============================================================
   BOGEY HOUND — site.css (Drop 01 shop)
   Layout language from outfit.hellohello.is: edge-to-edge wordmark masthead,
   asymmetric editorial grid, solid blocks that resolve into photos.
   Numbered lookbook index from sincro.es. Type, colour, voice: Bogey Hound.
   Tokens mirror brand/bogey-hound/BRAND.md §3.
   ============================================================ */
:root{
  --navy:#003049; --cream:#FDF0D5; --red:#C1121F;
  --charcoal:#4A4A4A; --slate:#6D8196;
  --cream-bright:#FFF9EA; --cream-deep:#F3E3BE; --navy-deep:#00243A;
  --line:rgba(0,48,73,.25); --stitch:rgba(0,48,73,.4);
  --serif:"Libre Baskerville",Georgia,serif;
  --sans:"Space Grotesk",Arial,sans-serif;
  --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px; --s7:104px; --s8:160px;
  --r-sm:6px; --r:12px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --pad:clamp(16px,2.4vw,32px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--navy);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.wrap{padding-inline:var(--pad)}
.muted{color:var(--slate)}
.small{font-size:12px}
.lbl{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;margin:0 0 10px}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--navy);margin-right:8px;vertical-align:1px}

/* underline link: line draws in from the left */
.ul{position:relative;display:inline-block}
.ul::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
.ul:hover::after,.ul.on::after{transform:scaleX(1);transform-origin:left}

/* ---------- Loader ---------- */
.loader{position:fixed;inset:0;z-index:100;background:var(--cream);display:grid;place-items:center;transition:transform 1s var(--ease-inout)}
.loader-mark{width:64px;height:64px}
.loader-count{position:absolute;right:var(--pad);bottom:calc(var(--pad) + env(safe-area-inset-bottom,0px));font-size:12px;letter-spacing:.16em;font-variant-numeric:tabular-nums}
.loader.done{transform:translateY(-100%)}

/* ---------- Route wipe ---------- */
.wipe{position:fixed;inset:0;z-index:90;background:var(--navy);display:grid;place-items:center;transform:translateY(100%);pointer-events:none}
.wipe img{width:56px;height:56px;opacity:0;transition:opacity .2s}
.wipe.cover{transform:translateY(0);transition:transform .55s var(--ease-inout)}
.wipe.cover img{opacity:1;transition-delay:.25s}
.wipe.away{transform:translateY(-100%);transition:transform .7s var(--ease-inout)}

/* ---------- Bar ---------- */
.bar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:calc(12px + env(safe-area-inset-top,0px)) var(--pad) 12px;background:transparent;transition:background .4s,transform .5s var(--ease-out)}
.bar.solid{background:rgba(253,240,213,.94);box-shadow:0 1px 0 var(--line)}
.bar.tuck{transform:translateY(-100%)}
.bar-brand{display:flex;align-items:center;gap:10px}
.bar-head{width:38px;height:38px}
.bar-word{height:16px;width:auto;opacity:0;transition:opacity .4s}
.bar.solid .bar-word,.bar.inner .bar-word{opacity:1}
.bar-nav{display:flex;gap:clamp(14px,2.4vw,32px);font-size:13px;font-weight:500;letter-spacing:.04em}
.bump{animation:bump .5s var(--ease-out)}
@keyframes bump{30%{transform:translateY(-3px)}}

/* ---------- Masthead ---------- */
.mast{padding-top:calc(80px + env(safe-area-inset-top,0px))}
.mast-word{overflow:hidden}
.mast-word img{width:100%;height:auto;transform:translateY(105%);transition:transform 1.3s var(--ease-out)}
.ready .mast-word img{transform:none}
.rule{height:2px;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease-out) .25s;margin-top:clamp(10px,1.6vw,22px)}
.ready .rule{transform:none}
.meta{display:grid;grid-template-columns:1.1fr 1.6fr 1fr 1fr;gap:var(--s4);padding-block:var(--s3) var(--s5);font-size:13px}
.meta p{margin:0}
.meta .lbl{margin-bottom:4px}
.meta > div{opacity:0;transform:translateY(12px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.ready .meta > div{opacity:1;transform:none}
.ready .meta > div:nth-child(2){transition-delay:.08s}.ready .meta > div:nth-child(3){transition-delay:.16s}.ready .meta > div:nth-child(4){transition-delay:.24s}

/* ---------- Media block reveal: a solid block lifts off the photo ---------- */
.media{position:relative;overflow:hidden;background:var(--cream-deep)}
.media img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.6s var(--ease-out),opacity .6s}
.media::after{content:"";position:absolute;inset:0;background:var(--navy);transform-origin:top;transition:transform 1.1s var(--ease-inout)}
.in .media::after,.media.in::after{transform:scaleY(0)}
.in .media img,.media.in img{transform:none}

/* ---------- Hero ---------- */
.hero{position:relative;margin-inline:var(--pad)}
.hero .media{aspect-ratio:16/9;border-radius:var(--r-sm)}
.hero-cap{position:absolute;left:var(--s4);bottom:var(--s4);right:var(--s4);display:flex;justify-content:space-between;align-items:flex-end;gap:16px;color:var(--cream);z-index:2}
.hero-cap h2{font-family:var(--serif);font-weight:700;font-size:clamp(28px,4.6vw,64px);line-height:1;margin:6px 0 0;max-width:12ch}
.hero-cap .lbl{margin:0}

/* ---------- Section heads ---------- */
.sec{padding-block:var(--s7) 0}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:2px dashed var(--stitch);padding-top:var(--s3);margin-bottom:var(--s5)}
.sec-head h2{font-family:var(--serif);font-weight:700;font-size:clamp(32px,5vw,64px);line-height:1;margin:0}
.sec-head .count{font-size:12px;letter-spacing:.16em;font-variant-numeric:tabular-nums}

/* ---------- Grid ---------- */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s4);row-gap:var(--s7);align-items:start}
.card{display:block}
.card .media{aspect-ratio:4/5;border-radius:var(--r-sm)}
.card .media .alt{position:absolute;inset:0;opacity:0}
.card:hover .media .alt{opacity:1}
.card-meta{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-size:14px;font-weight:500}
.card-meta span:last-child{font-variant-numeric:tabular-nums}
.card-cat{font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-top:4px;color:var(--slate)}
.card-cat .dot{background:var(--slate)}
.g-a{grid-column:1/5}.g-b{grid-column:6/9;margin-top:var(--s8)}.g-c{grid-column:10/13;margin-top:var(--s6)}
.g-d{grid-column:2/7}.g-e{grid-column:8/12;margin-top:var(--s7)}
.g-f{grid-column:1/4;margin-top:var(--s6)}.g-g{grid-column:5/9}.g-h{grid-column:10/13;margin-top:var(--s8)}
.g-i{grid-column:3/7}.g-j{grid-column:8/13;margin-top:var(--s6)}
.g-k{grid-column:1/5}.g-l{grid-column:6/9;margin-top:var(--s8)}.g-m{grid-column:10/13;margin-top:var(--s6)}

/* ---------- Lookbook: sticky horizontal track ---------- */
.look{position:relative;margin-top:var(--s7)}
.look-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:var(--s4)}
.look-head{display:flex;justify-content:space-between;align-items:baseline;padding-inline:var(--pad)}
.look-head h2{font-family:var(--serif);font-weight:700;font-size:clamp(32px,5vw,64px);line-height:1;margin:0}
.look-num{font-size:12px;letter-spacing:.16em;font-variant-numeric:tabular-nums}
.look-track{display:flex;gap:var(--s4);padding-inline:var(--pad);will-change:transform}
.shot{flex:0 0 auto;margin:0}
.shot .media{height:clamp(320px,62svh,620px);border-radius:var(--r-sm)}
.shot.wide .media{aspect-ratio:16/9}
.shot.tall .media{aspect-ratio:4/5}
.shot figcaption{display:flex;gap:14px;font-size:12px;letter-spacing:.08em;margin-top:10px}
.shot figcaption b{font-weight:500;font-variant-numeric:tabular-nums}

/* ---------- Story (navy) ---------- */
.story{background:var(--navy);color:var(--cream);margin-top:var(--s7);padding-block:var(--s7)}
.story-grid{display:grid;grid-template-columns:1fr;gap:var(--s6);align-items:center}
.story h2{font-family:var(--serif);font-weight:700;font-size:clamp(34px,5vw,68px);line-height:1.02;margin:0 0 var(--s4)}
.story p{font-size:clamp(17px,1.6vw,20px);line-height:1.55;max-width:46ch;margin:0 0 var(--s3)}
.values{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);border-top:2px dashed rgba(253,240,213,.35)}
.values li{padding-top:var(--s3)}
.values b{display:block;font-size:12px;letter-spacing:.16em;font-weight:500;opacity:.7;margin-bottom:6px;font-variant-numeric:tabular-nums}
.values span{font-family:var(--serif);font-size:clamp(20px,2.2vw,28px)}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}

/* ---------- Product page ---------- */
.pdp{padding-top:calc(84px + env(safe-area-inset-top,0px));display:grid;grid-template-columns:1.35fr 1fr;gap:var(--s5);align-items:start}
.pdp-gallery{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.pdp-gallery .media{aspect-ratio:4/5;border-radius:var(--r-sm)}
.pdp-gallery .media:first-child{grid-column:1/-1}
.pdp-info{position:sticky;top:calc(84px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:var(--s3)}
.crumbs{font-size:12px;letter-spacing:.08em;color:var(--slate)}
.pdp-info h1{font-family:var(--serif);font-weight:700;font-size:clamp(34px,4.4vw,56px);line-height:1.02;margin:0}
.price{font-size:20px;font-weight:500;font-variant-numeric:tabular-nums;margin:0}
.pdp-desc{font-size:17px;line-height:1.55;margin:0;max-width:44ch}
.sizes{display:flex;flex-wrap:wrap;gap:8px}
.size{min-width:52px;padding:10px 14px;border:2px solid var(--line);border-radius:var(--r-sm);font-size:14px;font-weight:500;transition:border-color .2s,background .2s,color .2s}
.size:hover{border-color:var(--navy)}
.size.on{background:var(--navy);border-color:var(--navy);color:var(--cream)}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:10px;padding:16px 22px;border-radius:var(--r-sm);background:var(--navy);color:var(--cream);font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;transition:transform .25s var(--ease-out),background .25s}
.btn:hover{transform:translateY(-2px);background:var(--navy-deep)}
.btn:active{transform:translateY(1px)}
.btn-red{background:var(--red)}
.btn-red:hover{background:#a10f1a}
.btn-ghost{background:transparent;color:var(--navy);border:2px solid var(--navy)}
.btn-ghost:hover{background:var(--navy);color:var(--cream)}
.says{font-family:var(--serif);font-style:italic;font-size:18px;margin:0;padding:var(--s3) 0;border-block:2px dashed var(--stitch)}
.says small{display:block;font-family:var(--sans);font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin-bottom:4px}
details{border-bottom:1px solid var(--line);padding-block:12px}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;font-weight:500;font-size:14px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";transition:transform .3s var(--ease-out)}
details[open] summary::after{transform:rotate(45deg)}
details ul{margin:10px 0 0;padding-left:18px;font-size:14px}
details p{margin:10px 0 0;font-size:14px}
.pairs{margin-top:var(--s7)}
.pairs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}

/* ---------- Drawer ---------- */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(0,36,58,.45);opacity:0;pointer-events:none;transition:opacity .5s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:70;width:min(440px,100vw);background:var(--cream-bright);border-left:2px solid var(--navy);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .7s var(--ease-out);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer.on{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:2px dashed var(--stitch)}
.drawer-title{font-family:var(--serif);font-weight:700;font-size:22px;margin:0}
.drawer-items{flex:1;overflow:auto;padding:8px 24px}
.empty{padding:var(--s5) 0;text-align:center}
.empty img{width:72px;margin:0 auto var(--s3)}
.line{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.line img{width:72px;height:90px;object-fit:cover;border-radius:4px;background:var(--cream-deep)}
.line-name{font-weight:500;font-size:14px;margin:0}
.line-sub{font-size:12px;color:var(--slate);margin:2px 0 8px}
.qty{display:inline-flex;align-items:center;border:2px solid var(--line);border-radius:var(--r-sm)}
.qty button{width:28px;height:26px;font-size:15px}
.qty span{min-width:22px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums}
.line-right{text-align:right;font-size:14px;font-variant-numeric:tabular-nums}
.line-right button{display:block;margin-top:8px;font-size:12px;color:var(--slate);margin-left:auto}
.drawer-foot{padding:16px 24px 24px;border-top:2px dashed var(--stitch);display:flex;flex-direction:column;gap:12px}
.code{display:flex;gap:12px;align-items:center}
.code input{flex:1;font:inherit;font-size:14px;padding:10px 12px;border:2px solid var(--line);border-radius:var(--r-sm);background:var(--cream);color:var(--navy);text-transform:uppercase;letter-spacing:.06em}
.code input:focus{outline:none;border-color:var(--navy)}
.code-msg{font-size:12px;margin:-4px 0 0;min-height:1em;color:var(--slate)}
.sum{display:flex;flex-direction:column;gap:4px;font-size:14px;font-variant-numeric:tabular-nums}
.sum div{display:flex;justify-content:space-between}
.sum .total{font-weight:700;font-size:16px;padding-top:6px;border-top:1px solid var(--line)}
.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}

/* ---------- Checkout + info ---------- */
.page{padding-top:calc(110px + env(safe-area-inset-top,0px));max-width:900px;margin-inline:auto}
.page h1{font-family:var(--serif);font-weight:700;font-size:clamp(36px,5vw,64px);line-height:1;margin:0 0 var(--s4)}
.page p{font-size:17px;max-width:56ch}
.panel{background:var(--cream-bright);border:2px solid var(--navy);border-radius:var(--r);box-shadow:0 4px 0 rgba(0,48,73,.14);padding:var(--s4);margin-block:var(--s4)}
.steps{display:flex;gap:var(--s4);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--s5);flex-wrap:wrap}
.steps span{color:var(--slate)}
.steps span.on{color:var(--navy);font-weight:500}

/* ---------- Footer ---------- */
.foot{background:var(--navy) url("brand/pattern-scatter-navy.svg") 0 0/400px 400px repeat;color:var(--cream);margin-top:var(--s8);padding-block:var(--s8) calc(var(--s6) + env(safe-area-inset-bottom,0px))}
.foot .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s5)}
.foot-top,.foot-word,.foot-meta{background:var(--navy);padding:clamp(20px,3vw,36px);border:2px solid var(--cream)}
.foot-top{display:flex;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;width:min(100%,920px)}
.foot-line{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.6vw,32px);margin:0}
.foot-cols{display:flex;gap:clamp(24px,5vw,72px);font-size:14px}
.foot-cols div{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.foot-cols .muted{color:rgba(253,240,213,.6)}
.foot-word{width:100%;height:auto;box-sizing:border-box}
.foot-meta{display:flex;justify-content:space-between;gap:12px var(--s5);flex-wrap:wrap;font-size:12px;letter-spacing:.12em;text-transform:uppercase;align-self:stretch;padding-block:16px}
.foot-meta span{opacity:.75}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:80;transform:translate(-50%,calc(100% + 48px));visibility:hidden;background:var(--navy);color:var(--cream);padding:12px 18px;border-radius:var(--r-sm);font-size:14px;transition:transform .6s var(--ease-out),visibility 0s .6s;pointer-events:none}
.toast.on{transform:translate(-50%,0);visibility:visible;transition:transform .6s var(--ease-out),visibility 0s}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .meta{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s5)}
  .grid > .card{grid-column:auto!important;margin-top:0!important}
  .grid > .card:nth-child(3n+1){grid-column:1/-1!important}
  .story-grid{grid-template-columns:1fr}
  .pdp{grid-template-columns:1fr}
  .pdp-info{position:static}
  .pairs-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .hide-sm{display:none}
  .meta{grid-template-columns:1fr}
  .hero .media{aspect-ratio:4/5}
  .values{grid-template-columns:1fr}
  .pdp-gallery{grid-template-columns:1fr}
  .shot .media{height:clamp(280px,52svh,460px)}
}

/* ---------- Reduced motion / screenshot mode ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation:none!important}
  .media::after{display:none}
  .media img{transform:none}
  .rv{opacity:1;transform:none}
}
.static *,.static *::before,.static *::after{transition:none!important;animation:none!important}
.static .media::after{display:none}
.static .media img{transform:none}
.static .rv{opacity:1;transform:none}
.static .loader{display:none}