/* Hubbard Clothing Co. — Lookbook: a CSS 3D page-turning book (original code, no libraries) */
.lb{--paper-c:#FBF8F2;--backdrop:#E9E4DB;background:radial-gradient(ellipse at 50% 42%,#F1EDE6 0%,var(--backdrop) 62%,#DFD8CC 100%);
  padding:clamp(.9rem,1.8vw,1.4rem) 0 clamp(1.25rem,2.5vw,2rem);overflow:hidden;position:relative}
.lb-head{text-align:center;margin-bottom:clamp(.6rem,1.6vw,1.1rem)}
.lb-head .eyebrow{justify-content:center;margin-bottom:.35rem}
.lb-head .eyebrow::after{content:none}
.lb-head h1{font-size:clamp(1.55rem,2.6vw,2.3rem);line-height:1.1;margin:0}
.lb-head h1 .accent{font-size:.7em;color:var(--taupe-deep);margin-left:.35em}

/* sizing: page is 2:3. Desktop shows a two-page spread, mobile a single page */
.lb-stage{--ph:clamp(240px,min(calc(100svh - 318px),calc((100vw - 240px) * .75)),880px);--pw:calc(var(--ph) * 2 / 3);
  position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(1rem,2.5vw,2.5rem);
  height:calc(var(--ph) + 34px);user-select:none;-webkit-user-select:none}
.lb-shift{position:relative;transition:transform .0s;will-change:auto}
.lb-book{position:relative;width:calc(var(--pw) * 2);height:var(--ph);perspective:calc(var(--ph) * 2.6);perspective-origin:50% 45%;
  touch-action:pan-y;cursor:grab;--lt:0px;--rt:0px}
.lb-book.mode-single{width:var(--pw)}
.lb-book.is-drag{cursor:grabbing}

/* page-edge thickness (left & right stacks) + soft drop shadow under each occupied half */
.lb-base{position:absolute;top:0;bottom:0;width:50%;pointer-events:none;opacity:0;transition:opacity .2s}
.lb-base.on{opacity:1}
.lb-base-l{left:0;border-radius:3px 0 0 3px;box-shadow:-14px 22px 38px -12px rgba(40,32,22,.42),0 2px 6px rgba(40,32,22,.18)}
.lb-base-r{right:0;border-radius:0 3px 3px 0;box-shadow:14px 22px 38px -12px rgba(40,32,22,.42),0 2px 6px rgba(40,32,22,.18)}
.mode-single .lb-base-r{width:100%;left:0;border-radius:3px}
.mode-single .lb-base-l{display:none}
.lb-base::before{content:"";position:absolute;top:1px;bottom:-1px;width:var(--t);
  background:repeating-linear-gradient(90deg,#F6F1E8 0 1px,#DCD4C6 1px 2px),#EDE7DC;box-shadow:inset 0 0 0 1px rgba(90,74,54,.08)}
.lb-base-l::before{--t:var(--lt);right:100%;transform-origin:right;transform:skewY(-.6deg);border-radius:2px 0 0 2px;
  background:linear-gradient(90deg,rgba(60,48,34,.18),transparent 70%),repeating-linear-gradient(90deg,#F6F1E8 0 1px,#DCD4C6 1px 2px)}
.lb-base-r::before{--t:var(--rt);left:100%;transform-origin:left;transform:skewY(.6deg);border-radius:0 2px 2px 0;
  background:linear-gradient(270deg,rgba(60,48,34,.18),transparent 70%),repeating-linear-gradient(90deg,#F6F1E8 0 1px,#DCD4C6 1px 2px)}

/* leaves: a leaf is one sheet, front = right-hand page, back = next left-hand page */
.leaf{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:0 50%;transform-style:preserve-3d}
.mode-single .leaf{left:0;width:100%}
.leaf.off{visibility:hidden}
.leaf.turning{will-change:transform}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:var(--paper-c)}
.face.back{transform:rotateY(180deg)}
.leaf.turning>.face{visibility:hidden}
.strips{position:absolute;inset:0;transform-style:preserve-3d}
.strip{position:absolute;top:0;height:100%;transform-origin:0 50%;transform-style:preserve-3d}
.sf{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--paper-c)}
.sf.back{transform:rotateY(180deg)}
.sf .pg{position:absolute;top:0}
.sf>i{position:absolute;inset:0;pointer-events:none;z-index:5}
.cast{position:absolute;top:0;bottom:0;width:50%;pointer-events:none;z-index:900;opacity:0}
.cast-l{left:0}.cast-r{right:0}
.mode-single .cast-r{width:100%}
.lb-book.fade .leaf{transition:opacity .28s ease}
.lb-book.fade.out .leaf{opacity:0}

/* ---------- pages ---------- */
.pg{position:absolute;inset:0;background-color:var(--paper-c);color:var(--ink);overflow:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .24 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.pg::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4}
.is-r .pg::after,.mode-single .pg::after{background:linear-gradient(90deg,rgba(40,30,20,.2) 0,rgba(40,30,20,.06) 4%,transparent 11%,transparent 92%,rgba(255,255,255,.08) 100%)}
.is-l .pg::after{background:linear-gradient(270deg,rgba(40,30,20,.22) 0,rgba(40,30,20,.07) 4%,transparent 11%,transparent 92%,rgba(255,255,255,.08) 100%)}
.pg-fig{position:absolute;inset:0;margin:0;overflow:hidden;background:#D8D0C2}
.pg-fig img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.pg-fig::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 64%,rgba(255,255,255,.07) 82%,rgba(255,255,255,0) 100%)}
img[data-src]{opacity:0}
.pg img{transition:opacity .4s}
.folio{position:absolute;left:7%;right:7%;bottom:3.2%;display:flex;justify-content:space-between;margin:0;z-index:3;
  font:600 calc(var(--pw) * .021)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.is-l .folio{flex-direction:row-reverse}
.pg-photo .folio,.pg-spread .folio{color:rgba(255,255,255,.88);text-shadow:0 1px 6px rgba(0,0,0,.45)}
.pg-photo .folio span:first-child,.pg-spread .folio span:first-child{opacity:0}
.pg-spread.half-l .folio span:first-child{opacity:1}
.pg-spread.half-l .sp-cap{display:none}
.pg-spread.half-l .pg-fig img{width:200%;left:0}
.pg-spread.half-r .pg-fig img{width:200%;left:-100%}
.sp-cap{position:absolute;right:7%;top:5%;margin:0;z-index:3;font:600 calc(var(--pw) * .036)/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.pg-mat .mat-fig{position:absolute;left:9%;right:9%;top:22%;margin:0}
.mat-ph{position:relative;aspect-ratio:3/2;overflow:hidden;background:#D8D0C2;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.mat-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mat-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.12),transparent 35%,transparent 70%,rgba(255,255,255,.06))}
.pg-mat figcaption{margin-top:.9em;font:400 calc(var(--pw) * .036)/1.35 var(--sans);letter-spacing:.04em;color:var(--charcoal-2)}
.pg-text .tx{position:absolute;left:11%;right:11%;top:16%;text-align:left}
.pg-text .eyebrow{font-size:calc(var(--pw) * .024);margin-bottom:1.2em}
.pg-text .eyebrow::after{content:none}
.pg-text h2{font-size:calc(var(--pw) * .088);line-height:1.04;margin:0;max-width:none}
.pg-text h2 .accent{display:block;font-size:.62em;margin-top:.35em;color:var(--taupe-deep)}
.pg-text .rule{width:22%;margin:1.6em 0;border:0;border-top:1px solid var(--bronze);opacity:1;transform:none}
.pg-text .lede{font:300 calc(var(--pw) * .044)/1.45 var(--sans);color:var(--charcoal-2);margin:0}
.tx-logo{position:absolute;left:50%;bottom:11%;width:30%;height:auto;transform:translateX(-50%);opacity:.9}
.pg-closing .tx{top:12%}
.pg-closing h2{font-size:calc(var(--pw) * .074)}
.cl-btns{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--pw) * .025);margin-bottom:calc(var(--pw) * .07)}
.cl-btns .btn{min-height:0;font-size:max(11px,calc(var(--pw) * .028));padding:1.15em 1.9em}
.pg-closing address{font:normal 400 calc(var(--pw) * .034)/1.55 var(--sans);color:var(--charcoal-2)}
.pg-closing address a{color:inherit}
.cl-hours{font:600 calc(var(--pw) * .022)/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:1.4em}
.pg-dark{background-color:var(--charcoal-deep);color:var(--mist)}
.pg-dark .tx{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4em;text-align:center;padding:0 10%}
.pg-dark img{width:42%;height:auto}
.pg-dark .cv-sub,.bk-addr{font:600 calc(var(--pw) * .022)/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mist-2);margin:0}
.pg-back img{width:30%;opacity:.85}
/* cover */
.pg-cover .pg-fig::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(var(--overlay),.62) 0%,rgba(var(--overlay),.18) 34%,rgba(var(--overlay),0) 55%,rgba(var(--overlay),.35) 100%)}
.cv-text{position:absolute;left:0;right:0;top:7%;z-index:3;text-align:center;color:#fff;padding:0 8%}
.cv-logo{width:30%;height:auto;display:block;margin:0 auto 6%}
.cv-eyebrow{font:600 calc(var(--pw) * .024)/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--champagne);margin:0 0 .9em}
.cv-title{font:400 calc(var(--pw) * .088)/1.08 var(--serif);color:#fff;margin:0;letter-spacing:.04em;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.cv-sub{font:600 calc(var(--pw) * .022)/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.9);margin:1.1em 0 0}
.pg-cover::after{background:linear-gradient(90deg,rgba(0,0,0,.28) 0,rgba(255,255,255,.14) 1.2%,rgba(0,0,0,.1) 2.6%,transparent 6%)!important}
.face.front .pg-cover{border-radius:0 3px 3px 0}

/* ---------- controls ---------- */
.lb-nav{flex:none;width:52px;height:52px;border-radius:50%;border:1px solid rgba(60,50,40,.22);background:rgba(252,250,246,.75);color:var(--charcoal);
  display:grid;place-items:center;cursor:pointer;transition:background .25s,opacity .25s,transform .25s;backdrop-filter:blur(4px)}
.lb-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lb-nav:hover{background:#fff;transform:scale(1.05)}
.lb-nav:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.lb-nav[disabled]{opacity:.28;cursor:default;transform:none}
.lb-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem 1rem;margin-top:.4rem;padding:0 var(--pad)}
.lb-count{margin:0;min-width:7.5em;text-align:center;font:600 .78rem/1 var(--sans);letter-spacing:.22em;color:var(--charcoal);font-variant-numeric:tabular-nums}
.lb-dots{flex-basis:100%;display:flex;justify-content:center;flex-wrap:wrap;gap:6px;order:3}
.lb-dots button{width:22px;height:22px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.lb-dots button::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(60,50,40,.25);transition:background .25s,transform .25s}
.lb-dots button[aria-current="true"]::before{background:var(--charcoal);transform:scale(1.35)}
.lb-dots button:hover::before{background:var(--bronze)}
.lb-dots button:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-radius:50%}
.lb-hint{flex-basis:100%;order:4;text-align:center;margin:.2rem 0 0;font-size:.82rem;color:var(--muted)}
.lb-prev-m,.lb-next-m{display:none}
@media (max-width:899px){
  .lb-stage{--pw:min(calc(100vw - 40px),calc((100svh - 350px) * 2 / 3),560px);--ph:calc(var(--pw) * 1.5);height:calc(var(--ph) + 16px)}
  .lb-stage>.lb-nav{display:none}
  .lb-prev-m,.lb-next-m{display:grid;width:46px;height:46px}
  .lb-head h1{font-size:1.45rem}
  .lb-head h1 .accent{display:block;margin:.2em 0 0}
  .lb-head .eyebrow{margin-bottom:.2rem}
  .lb-bar{margin-top:0}
  .lb-hint{display:none}
  .lb-dots{gap:0}
  .lb-dots button{width:12px;height:22px}
  .lb-dots button::before{width:6px;height:6px}
}
/* no-JS: stacked images */
.no-js .lb-stage,.no-js .lb-bar{display:none}
.lb-stack{list-style:none;margin:0 auto;padding:0 var(--pad);max-width:960px;display:grid;gap:clamp(1rem,3vw,2rem)}
.lb-stack figure{margin:0;text-align:center}.lb-stack img{width:auto;max-width:100%;max-height:92vh;height:auto;display:block;margin:0 auto}
.lb-stack figcaption{font:400 1rem/1.4 var(--sans);letter-spacing:.04em;margin-top:.5rem;color:var(--charcoal-2)}
.lb-stack-cta{padding:3rem var(--pad) 1rem}

/* ---------- iOS / WebKit robustness ---------- */
@supports not (height:1svh){
  .lb-stage{--ph:clamp(240px,min(calc(100vh - 318px),calc((100vw - 240px) * .75)),880px)}
  @media (max-width:899px){.lb-stage{--pw:min(calc(100vw - 40px),calc((100vh - 350px) * 2 / 3),560px)}}
}
@media (max-width:899px){.lb-stage{--pw:max(200px,min(calc(100vw - 40px),calc((100svh - 350px) * 2 / 3),560px))}}
.lb-book{-webkit-perspective:calc(var(--ph) * 2.6);max-width:none;flex:none}
.leaf,.strips,.strip{-webkit-transform-style:preserve-3d}
/* WebKit can z-fight coplanar front/back faces and ignore backface-visibility: separate them by 1px */
.face.front,.sf.front{-webkit-transform:translateZ(.5px);transform:translateZ(.5px)}
.face.back,.sf.back{-webkit-transform:rotateY(180deg) translateZ(.5px);transform:rotateY(180deg) translateZ(.5px)}
/* short landscape screens (phones on their side): compact chrome so the spread can use the height */
@media (orientation:landscape) and (max-height:520px){
  .site-header{position:relative}
  .lb{padding:.4rem 0 .5rem}
  .lb-head{margin-bottom:.3rem}
  .lb-head .eyebrow{display:none}
  .lb-head h1{font-size:1.1rem}
  .lb-head h1 .accent{display:inline;margin:0 0 0 .35em}
  .lb-dots,.lb-hint{display:none}
  .lb-bar{margin-top:0}
  .lb-prev-m,.lb-next-m{width:40px;height:40px}
}

@media (orientation:landscape) and (max-height:520px){html{scroll-padding-top:0}}