/* Wardrobe Compass: "Mood board" theme (Gent, Antwerpen, Brugge polaroids on linen paper).
   Loaded only on pages built with head({ mood: true }) -> <html class="mb">. Textures are pure CSS/inline SVG;
   photos: /assets/img/moodboard/*.webp (credits: /credits/#moodboard, data: src/data/moodboard.json). */
@font-face{font-family:"Caveat";src:url(/assets/fonts/caveat-600-sub.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
.mb{--hand:"Caveat","Segoe Print","Bradley Hand",cursive;--tape:rgba(255,250,236,.62);--tape-2:rgba(232,190,170,.7);--tape-3:rgba(196,206,184,.72);--pol-shadow:0 1px 2px rgba(59,42,34,.12),0 10px 24px -8px rgba(59,42,34,.35);--muted:#6E5D50}

/* ---------- linen board ---------- */
.mb body{background-color:#F8F1E6;
  background-image:
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
   repeating-linear-gradient(0deg,rgba(150,115,80,.035) 0 1px,transparent 1px 4px),
   repeating-linear-gradient(90deg,rgba(150,115,80,.03) 0 1px,transparent 1px 5px)}
.mb .site-header{background:rgba(251,246,239,.92)}
.mb .h-steps,.mb .story-band,.mb .section--blush{background:transparent}
.mb main{overflow-x:clip}
.mb .kicker{color:#9A4027} /* AA contrast on linen */

/* ---------- polaroid ---------- */
.pol{position:absolute;margin:0;background:#FFFDF8;padding:7px 7px 0;box-shadow:var(--pol-shadow);transform:rotate(var(--r,0deg));width:var(--w,170px);transition:transform .35s ease}
.pol img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:#E9DED0}
.pol.is-tall img{aspect-ratio:220/259}
.pol.is-hero img{aspect-ratio:4/5;object-position:50% 20%}
.pol figcaption{font:600 1.18rem/.95 var(--hand);color:#4A3A30;text-align:center;padding:.5rem .2rem .62rem;white-space:normal}
.pol .tape{position:absolute;top:-11px;left:50%;width:64px;height:22px;margin-left:-32px;background:var(--tape);transform:rotate(calc(var(--r,0deg) * -1.4 + 2deg));box-shadow:0 1px 1px rgba(0,0,0,.05);
  clip-path:polygon(0 8%,4% 0,8% 10%,12% 0,100% 0,96% 12%,100% 25%,96% 40%,100% 55%,96% 70%,100% 85%,96% 100%,0 100%,4% 85%,0 70%,4% 55%,0 40%,4% 25%);z-index:2}
.pol:nth-child(3n) .tape{background:var(--tape-2)} .pol:nth-child(4n) .tape{background:var(--tape-3)}
.pol-ai{position:absolute;right:12px;top:12px;font:600 .58rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;background:rgba(30,24,20,.62);color:#fff;padding:.3rem .45rem;border-radius:99px}
@media(hover:hover){.pol:hover{transform:rotate(0) scale(1.04);z-index:9}}
@media(prefers-reduced-motion:reduce){.pol{transition:none}}
@media(max-width:879px){.pol figcaption{font-size:.95rem;padding:.4rem .1rem .5rem}.mb-board .is-hero figcaption{font-size:1.1rem}}

/* ---------- home hero: taped cream card + polaroid collage ---------- */
.mb-hero{position:relative;padding:1.2rem 0 2.6rem;background:none;overflow:hidden}
.mb-hero .h-hero-copy{position:relative;z-index:2;background:#FFFCF6;padding:1.4rem 1.25rem 1.2rem;border-radius:4px;box-shadow:0 2px 3px rgba(59,42,34,.1),0 20px 40px -18px rgba(59,42,34,.45);transform:rotate(-.6deg)}
.mb-hero .h-hero-copy::before{content:"";position:absolute;top:-12px;left:50%;width:110px;height:26px;margin-left:-55px;background:rgba(196,206,184,.85);transform:rotate(-3deg);clip-path:polygon(0 0,100% 0,97% 50%,100% 100%,0 100%,3% 50%)}
.mb .h-hero-grid.mb-hero-grid{display:flex;flex-direction:column;gap:1.6rem;padding:.6rem 1.25rem 1rem}
.mb-board{position:relative;height:330px;margin:0 auto;max-width:390px;order:-1;width:100%}
.mb-board .is-hero{--w:156px;--r:-3deg;left:50%;margin-left:-78px;top:22px;z-index:3}
.mb-board .b1{--w:116px;--r:-8deg;left:0;top:6px;z-index:4}
.mb-board .b2{--w:116px;--r:8deg;right:0;top:0;z-index:4}
.mb-board .b3{--w:100px;--r:-6deg;left:6px;top:174px;z-index:4}
.mb-board .b4{--w:104px;--r:6deg;right:6px;top:180px;z-index:4}
.mb-board .b5,.mb-ticket{display:none}
.mb-hero .h-hero-note{position:static;padding:0 1.25rem}
@media(min-width:880px){
  .mb-hero{padding:2.2rem 0 3.4rem;min-height:660px}
  .mb .h-hero-grid.mb-hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:2rem;align-items:center;padding:2rem 1.5rem 1rem}
  .mb-hero .h-hero-copy{padding:2.4rem 2.2rem 2rem;max-width:540px}
  .mb-board{order:0;height:610px;max-width:600px}
  .mb-board .is-hero{--w:272px;--r:-2.5deg;left:22%;margin:0;top:44px}
  .mb-board .b1{--w:196px;--r:-8deg;left:-6px;top:300px;z-index:4}
  .mb-board .b2{--w:184px;--r:7deg;right:-8px;left:auto;top:8px;z-index:4}
  .mb-board .b3{--w:156px;--r:-4deg;right:4px;left:auto;top:300px;z-index:4}
  .mb-board .b4{--w:146px;--r:5deg;left:41%;right:auto;top:408px;z-index:5}
  .mb-board .b5{display:block;--w:132px;--r:-7deg;right:6px;top:488px;z-index:3}
  .mb-ticket{display:block;position:absolute;left:0;top:96px;transform:rotate(-6deg);background:#F3E6CF;border:1px dashed #B99E7A;padding:.55rem .8rem .5rem;font:600 .66rem/1.35 var(--sans);letter-spacing:.06em;color:#5A4636;z-index:5;box-shadow:0 6px 14px -8px rgba(59,42,34,.4);max-width:168px}
  .mb-ticket b{display:block;font:600 1.2rem/1.05 var(--hand);letter-spacing:0;color:#7A3B2A;margin-bottom:.25rem}
  .mb-hero .h-hero-note{position:absolute;left:0;right:0;bottom:.8rem;padding:0 1.5rem}
}

/* ---------- mood-board strip (home) ---------- */
.mb-strip{padding:1.2rem 0 2.4rem;overflow:hidden}
.mb-strip-head{text-align:center;font:600 .72rem/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 .6rem}
.mb-strip-head .hand{display:block;font:600 2rem/1 var(--hand);letter-spacing:0;text-transform:none;color:#7A3B2A;margin-bottom:.35rem}
.mb-strip-row{position:relative;display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:1.6rem 1.25rem 1.4rem;scrollbar-width:none}
.mb-strip-row::-webkit-scrollbar{display:none}
.mb-string{position:absolute;left:0;right:0;top:1.15rem;height:1px;background:linear-gradient(90deg,transparent,#A98A68 8%,#A98A68 92%,transparent);min-width:1400px}
.mb-strip-row .pol{position:relative;flex:0 0 auto;--w:142px;scroll-snap-align:center}
.mb-strip-row .pol:nth-child(odd){--r:-3deg;margin-top:10px}.mb-strip-row .pol:nth-child(even){--r:3deg}
.mb-strip-row .pol:nth-child(4n){--r:-1.5deg;margin-top:18px}
.mb-strip-row .pol .tape{width:22px;height:30px;margin-left:-11px;top:-20px;border-radius:2px;background:#C9A57B;clip-path:none;box-shadow:0 1px 2px rgba(0,0,0,.2)} /* wooden peg */
@media(min-width:880px){.mb-strip-row{justify-content:center;overflow:visible;gap:1.4rem}.mb-strip-row .pol{--w:150px}}

/* ---------- Outfit Formula: polaroids around the title and behind the app card ---------- */
.mb-of-wrap{position:relative}
.mb-of-wrap .page-head,.mb-of-wrap .of{position:relative;z-index:2}
.mb-gutter{position:relative;height:168px;margin:.4rem -1.25rem -1.4rem;overflow:hidden;z-index:1}
.mb-gutter .pol{--w:104px}
.mb-gutter .g1{--r:-7deg;left:4%;top:22px}
.mb-gutter .g2{--r:4deg;left:34%;top:10px;--w:96px}
.mb-gutter .g3{--r:-3deg;right:30%;top:24px;--w:94px;display:none}
.mb-gutter .g4{--r:7deg;right:4%;top:18px}
.mb-gutter .g5,.mb-gutter .g6,.mb-gutter .g7{display:none}
.mb .page-head--app{padding-top:1.4rem}
@media(min-width:420px){.mb-gutter .g3{display:block}}
@media(min-width:880px){
  .mb-gutter{position:absolute;inset:0;height:auto;margin:0;overflow:visible;pointer-events:none}
  .mb-gutter .pol{pointer-events:auto;--w:168px}
  .mb-gutter .pol figcaption{font-size:1.15rem}
  .mb-gutter .g1{--r:-8deg;left:-30px;top:34px}
  .mb-gutter .g2{--r:5deg;left:150px;top:96px;--w:132px}
  .mb-gutter .g3{--r:-4deg;right:150px;top:84px;--w:132px;left:auto}
  .mb-gutter .g4{--r:7deg;right:-26px;top:26px}
  .mb-gutter .g5{display:block;--r:-6deg;left:-56px;top:440px;--w:150px;z-index:1}
  .mb-gutter .g6{display:block;--r:6deg;right:-60px;top:470px;--w:160px}
  .mb-gutter .g7{display:block;--r:-5deg;left:-44px;top:262px;--w:118px;z-index:1}
  .mb .page-head--app{padding-top:2.4rem}
  .mb .page-head--app h1{max-width:640px;margin-left:auto;margin-right:auto}
  .mb .page-head--app p{background:rgba(255,253,248,.75);display:inline-block;padding:.1rem .6rem;border-radius:8px}
}