/* brand-work.css — styles for the three Brand Work scrapbook variants.
   Tokens echo Photoshop Archives / Sundance / Product Launches: paper,
   tomato, sage, butter, blush. Each variant is namespaced (bw-bind / bw-cork /
   bw-scrap) so they can coexist on the design-canvas explorations page.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* PALETTE · "Moodboard" — cream + orange + deep green from the
     reference moodboard. Orange replaces every previous red/cacao;
     deep green replaces black for body copy. Token names kept stable
     so all downstream rules continue resolving. */
  --paper:       #F0E8D6;  /* warm cream */
  --paper-2:     #F7F1E2;  /* slightly lighter */
  --paper-3:     #E5DBC4;
  --paper-cool:  #ECEBDE;
  --ink:         #3F4E1E;  /* deep green — used for body copy */
  --ink-2:       #5C6D2F;
  --ink-3:       #8A9670;
  --rule:        #D0C8AC;
  --tomato:      #E6712E;  /* orange — the new warm accent */
  --butter:      #DDE54E;  /* chartreuse pop */
  --blush:       #E27CB9;  /* pink pop */
  --sky:         #6FA89E;  /* teal */
  --sage:        #5C6D2F;
  --sage-deep:   #3F4E1E;
  --lilac:       #CCC3D1;
  --cork:        #C8A070;
  --cork-deep:   #A07B50;
  --rose:        #E27CB9;
  --grass:       #A8AC22;
}

/* ───── Shared nav / back / footer chrome (reused across variants) ───── */
.bw-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: rgba(236, 228, 210, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  padding: 14px 36px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  z-index: 30;
  pointer-events: none;
}
.bw-nav > * { pointer-events: auto; }
.bw-mark {
  font-family: 'mudstone-sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 18px;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.bw-mark-dot {
  width: 8px; height: 8px;
  background: var(--tomato);
  border-radius: 50%;
}
.bw-crumb {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  white-space: nowrap;
}
.bw-crumb a {
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-3);
}
.bw-crumb a:hover { color: var(--tomato); border-color: var(--tomato); }
.bw-crumb-current { color: var(--tomato); }
.bw-nav-links {
  display: flex; gap: 26px; justify-content: flex-end;
  align-items: baseline;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  text-transform: lowercase;
  font-size: 22px;
}
.bw-nav-links a {
  color: var(--ink);
  text-decoration: none;
  position: relative;
  padding: 2px 4px;
  line-height: 1;
}
.bw-nav-links a:hover { color: var(--tomato); }
.bw-nav-links a.current { color: var(--ink); }
.bw-nav-links a.current::after {
  content: '';
  position: absolute;
  left: -8px; right: -8px; top: -4px; bottom: -4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 24' preserveAspectRatio='none'><ellipse cx='30' cy='12' rx='28' ry='10' stroke='%23c44a32' stroke-width='1.6' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.bw-back {
  position: absolute;
  top: 90px; left: 36px;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  z-index: 30;
}
.bw-back:hover { color: var(--tomato); }
.bw-back-arrow {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  margin-right: 4px;
}

.bw-foot-l, .bw-foot-r {
  position: absolute;
  bottom: 24px;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(31,26,20,0.55);
  text-transform: uppercase;
  z-index: 30;
}
.bw-foot-l { left: 36px; }
.bw-foot-r { right: 36px; text-align: right; }

/* ─────────────────────────────────────────────────────────────────────
   Shared thumb helpers
   ───────────────────────────────────────────────────────────────────── */
.bw-thumb {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: flex; flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  text-transform: uppercase;
}
.bw-thumb img,
.bw-thumb video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.bw-thumb-label {
  position: relative;
  padding: 8px 10px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.85);
  background: linear-gradient(transparent, rgba(0,0,0,0.4));
  align-self: flex-end;
  width: 100%;
}
.bw-thumb-label .tag {
  display: block;
  font-size: 8px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.7);
  margin-bottom: 2px;
}

/* ═════════════════════════════════════════════════════════════════════
   VARIANT A — BINDER NOTEBOOK SPREAD
   Open notebook with binder rings down the centre, cream paper, a
   big script title spanning both pages, brand items as polaroids and
   taped scraps across the spread.
   ═════════════════════════════════════════════════════════════════════ */
.bw-bind {
  position: relative;
  width: 100%; height: 100%;
  background:
    /* subtle vignette */
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(0,0,0,0.18) 0%, transparent 60%),
    /* fabric back */
    repeating-linear-gradient(
      135deg,
      #6b7565 0 6px,
      #5d6759 6px 12px
    );
  overflow: hidden;
}
.bw-bind-page {
  position: absolute;
  top: 60px;
  bottom: 60px;
  width: calc(50% - 32px);
  background: var(--paper-2);
  background-image:
    /* faint ruled-paper lines */
    repeating-linear-gradient(
      180deg,
      transparent 0 38px,
      rgba(122, 163, 196, 0.13) 38px 39px
    ),
    /* paper grain */
    radial-gradient(circle at 20% 15%, rgba(0,0,0,0.03) 0, transparent 60%),
    radial-gradient(circle at 80% 85%, rgba(0,0,0,0.02) 0, transparent 60%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.04),
    0 30px 60px rgba(0,0,0,0.35);
  /* faint paper-edge variation via clip-path */
}
.bw-bind-page--l {
  left: 36px;
  transform: rotate(-0.4deg);
}
.bw-bind-page--r {
  right: 36px;
  transform: rotate(0.4deg);
}

/* Faint red margin rule on each page, like a notebook */
.bw-bind-page::before {
  content: '';
  position: absolute;
  top: 8%; bottom: 8%;
  width: 1.5px;
  background: rgba(196, 74, 50, 0.35);
}
.bw-bind-page--l::before { right: 8%; }
.bw-bind-page--r::before { left: 8%; }

/* SVG-noise paper texture overlay */
.bw-bind-page::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.4;
}

/* Binder spine — vertical leather strip with rings down the middle */
.bw-bind-spine {
  position: absolute;
  left: 50%;
  top: 32px; bottom: 32px;
  width: 64px;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg,
      transparent 0, rgba(0,0,0,0.35) 8%, transparent 18%,
      transparent 82%, rgba(0,0,0,0.35) 92%, transparent 100%),
    linear-gradient(180deg, #6b4a30, #4a2f1c, #6b4a30);
  border-radius: 4px;
  z-index: 5;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.15),
    inset 0 -2px 4px rgba(0,0,0,0.4),
    0 20px 40px rgba(0,0,0,0.4);
}
.bw-bind-rings {
  position: absolute;
  left: 50%;
  top: 32px; bottom: 32px;
  width: 64px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  z-index: 6;
  pointer-events: none;
}
.bw-bind-ring {
  width: 38px; height: 38px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #f4ecd6 0%, #c8b8a0 40%, #5a4a3a 100%);
  border: 2px solid #2a1a10;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.5),
    inset 0 -3px 5px rgba(0,0,0,0.5),
    0 2px 4px rgba(0,0,0,0.4);
  position: relative;
}
.bw-bind-ring::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: #2a1a10;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
}

/* Big title spanning the spread */
.bw-bind-title {
  position: absolute;
  top: 18%;
  left: 0; right: 0;
  text-align: center;
  z-index: 8;
  pointer-events: none;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-style: italic;
  font-weight: 300;
  color: var(--ink);
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.bw-bind-title-word {
  display: block;
  font-size: clamp(120px, 11vw, 180px);
}
.bw-bind-title-word--accent {
  color: var(--tomato);
}
.bw-bind-title-yr {
  position: absolute;
  top: 18%;
  right: 14%;
  font-family: 'mudstone-sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  font-size: 28px;
  color: var(--ink);
  z-index: 9;
}
.bw-bind-eyebrow {
  position: absolute;
  top: 12%;
  left: 0; right: 0;
  text-align: center;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-3);
  z-index: 8;
}
.bw-bind-deck {
  position: absolute;
  top: 38%;
  right: 12%;
  width: 28%;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink-2);
  line-height: 1.15;
  z-index: 8;
  transform: rotate(-1.2deg);
  text-align: left;
}
.bw-bind-deck em {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-style: italic;
  color: var(--tomato);
  font-size: 24px;
}

/* Items pinned to the spread */
.bw-bind-item {
  position: absolute;
  z-index: 10;
  text-decoration: none;
  color: inherit;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), filter .25s;
  filter: drop-shadow(2px 6px 14px rgba(0,0,0,0.22));
  cursor: pointer;
}
.bw-bind-item:hover {
  z-index: 20;
  transform: translateY(-6px) rotate(var(--hover-r, 0deg)) scale(1.04) !important;
  filter: drop-shadow(2px 12px 22px rgba(0,0,0,0.28));
}

.bw-polaroid {
  background: var(--paper-2);
  padding: 12px 12px 0;
  display: flex; flex-direction: column;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
  position: relative;
}
.bw-polaroid-photo {
  aspect-ratio: var(--ar, 4 / 5);
  background: var(--c, #8a7a62);
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
}
.bw-polaroid-photo img,
.bw-polaroid-photo video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.bw-polaroid-badge {
  position: relative;
  align-self: flex-start;
  margin: 10px;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.42);
  padding: 4px 8px;
}
.bw-polaroid-foot {
  position: relative;
  align-self: stretch;
  margin: 0;
  padding: 8px 10px;
  display: flex; justify-content: space-between; align-items: flex-end;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  background: linear-gradient(transparent, rgba(0,0,0,0.45));
}
.bw-polaroid-cap {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  color: var(--ink);
  text-align: center;
  padding: 10px 6px 14px;
  line-height: 1;
}
.bw-polaroid-cap .nm {
  font-size: 20px;
  display: block;
}
.bw-polaroid-cap .sub {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--tomato);
  margin-top: 6px;
  display: block;
  white-space: normal;
  line-height: 1.5;
}
.bw-polaroid-cap .sub .sub-eyebrow {
  display: block;
  color: var(--ink-3);
  margin-bottom: 2px;
  letter-spacing: 0.28em;
}

/* Decorative chrome — pinned via background-image of an asset PNG */
.bw-clip {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 12;
  filter: drop-shadow(1px 3px 5px rgba(0,0,0,0.25));
}
.bw-clip--pink-pushpin { background-image: url('assets/asset-pink-pushpin.png'); }
.bw-clip--red-pushpin  { background-image: url('assets/asset-red-pushpin.png'); }
.bw-clip--teal-pushpin { background-image: url('assets/asset-teal-pushpin.png'); }
.bw-clip--black-pushpin{ background-image: url('assets/asset-black-pushpin.png'); }
.bw-clip--gold-paperclip { background-image: url('assets/asset-gold-paperclip.png'); }
.bw-clip--gold-clip    { background-image: url('assets/asset-gold-clip.png'); }
.bw-clip--silver-clip  { background-image: url('assets/asset-silver-clip.png'); }
.bw-clip--gold-binder  { background-image: url('assets/asset-gold-binder.png'); }
.bw-clip--clothespin   { background-image: url('assets/asset-clothespin.png'); }
.bw-clip--pink-washi   { background-image: url('assets/asset-pink-washi.png'); }
.bw-clip--kraft-tape   { background-image: url('assets/asset-kraft-tape.png'); }

/* Tape strips (CSS-drawn, faster than crops for fully-translucent tape) */
.bw-tape {
  position: absolute;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  pointer-events: none;
  z-index: 11;
}
.bw-tape--gold { background: rgba(232,200,96,0.78); }
.bw-tape--red  { background: rgba(196, 74, 50, 0.56); }
.bw-tape--blue { background: rgba(122,163,196,0.62); }
.bw-tape--washi{
  background: rgba(232,200,96,0.6);
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 4px,
    rgba(255,255,255,0.18) 4px 5px
  );
}

/* Handwritten label / post-it / scraps */
.bw-handnote {
  position: absolute;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink-2);
  line-height: 1.05;
  z-index: 11;
  pointer-events: none;
  letter-spacing: 0.01em;
}
.bw-handnote.accent { color: var(--tomato); }

.bw-postit {
  position: absolute;
  background: var(--butter);
  padding: 14px 16px;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.18;
  box-shadow: 0 10px 18px rgba(0,0,0,0.18);
  z-index: 12;
  width: 150px;
  pointer-events: none;
}
.bw-postit--blush { background: var(--blush); }
.bw-postit--sky   { background: var(--sky); }

.bw-business-card {
  position: absolute;
  background: var(--paper-2);
  border: 1px solid rgba(0,0,0,0.08);
  padding: 14px 18px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
  font-family: 'mudstone-sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  text-align: center;
  z-index: 11;
  width: 170px;
}
.bw-business-card-name {
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.bw-business-card-meta {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 6px;
}

/* Pressed flower scrap (SVG fallback) */
.bw-scrap-flower {
  position: absolute;
  filter: drop-shadow(1px 4px 6px rgba(0,0,0,0.18));
  z-index: 9;
  pointer-events: none;
}

/* ═════════════════════════════════════════════════════════════════════
   VARIANT B — CORK BOARD
   Wood-framed cork board, brand items pinned with photographic pushpins.
   ═════════════════════════════════════════════════════════════════════ */
.bw-cork {
  position: relative;
  width: 100%; height: 100%;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(0,0,0,0.2) 0%, transparent 60%),
    repeating-linear-gradient(
      90deg,
      #6b4530 0 26px,
      #5a3a26 26px 52px,
      #6b4530 52px 78px,
      #4f3220 78px 104px
    );
  overflow: hidden;
}
.bw-cork-board {
  position: absolute;
  inset: 64px 64px 80px;
  border-radius: 4px;
  /* outer wood frame */
  background:
    linear-gradient(180deg, #b88a5a 0, #9a6c40 50%, #b88a5a 100%);
  padding: 28px;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.2),
    inset 0 -4px 8px rgba(0,0,0,0.35),
    0 30px 60px rgba(0,0,0,0.5);
}
.bw-cork-surface {
  position: relative;
  width: 100%; height: 100%;
  background: var(--cork);
  background-image:
    /* cork pebble texture */
    radial-gradient(circle at 15% 22%, rgba(0,0,0,0.18) 0.4px, transparent 1.4px),
    radial-gradient(circle at 30% 50%, rgba(0,0,0,0.12) 0.4px, transparent 1.4px),
    radial-gradient(circle at 50% 30%, rgba(0,0,0,0.18) 0.4px, transparent 1.4px),
    radial-gradient(circle at 70% 70%, rgba(0,0,0,0.16) 0.4px, transparent 1.4px),
    radial-gradient(circle at 85% 25%, rgba(0,0,0,0.16) 0.4px, transparent 1.4px),
    radial-gradient(circle at 8% 75%, rgba(0,0,0,0.13) 0.4px, transparent 1.4px),
    radial-gradient(circle at 45% 88%, rgba(0,0,0,0.18) 0.4px, transparent 1.4px),
    radial-gradient(circle at 92% 88%, rgba(0,0,0,0.13) 0.4px, transparent 1.4px),
    radial-gradient(circle at 60% 12%, rgba(255,222,170,0.45) 0.5px, transparent 1.4px),
    radial-gradient(circle at 22% 60%, rgba(255,222,170,0.4) 0.5px, transparent 1.4px),
    radial-gradient(circle at 78% 50%, rgba(255,222,170,0.45) 0.5px, transparent 1.4px),
    linear-gradient(180deg, #c8a070 0%, #b5895c 100%);
  background-size:
    14px 14px, 12px 12px, 18px 18px, 15px 15px, 16px 16px,
    13px 13px, 17px 17px, 12px 12px, 14px 14px, 11px 11px, 16px 16px,
    100% 100%;
  box-shadow:
    inset 0 4px 12px rgba(0,0,0,0.4),
    inset 0 -2px 6px rgba(0,0,0,0.25);
}
/* SVG noise overlay for cork grain */
.bw-cork-surface::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='6'/><feColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.25  0 0 0 0 0.1  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.35;
  pointer-events: none;
}

/* Cork board title — handwritten chalk-style */
.bw-cork-title-card {
  position: absolute;
  top: 4%; left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  background: var(--paper-2);
  padding: 16px 36px 18px;
  z-index: 18;
  box-shadow: 0 14px 24px rgba(0,0,0,0.3);
  text-align: center;
}
.bw-cork-title-eyebrow {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.bw-cork-title-main {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: 56px;
  color: var(--ink);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.bw-cork-title-main .accent { color: var(--tomato); }
.bw-cork-deck {
  position: absolute;
  top: 6%; right: 8%;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  color: var(--paper-2);
  font-size: 19px;
  line-height: 1.15;
  text-align: right;
  transform: rotate(3deg);
  z-index: 19;
  max-width: 240px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.bw-cork-item {
  position: absolute;
  z-index: 14;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), filter .25s;
  filter: drop-shadow(3px 10px 18px rgba(0,0,0,0.45));
}
.bw-cork-item:hover {
  z-index: 22;
  transform: translateY(-4px) rotate(var(--hover-r, 0deg)) scale(1.05) !important;
}

/* Index card on cork */
.bw-indexcard {
  background: var(--paper-2);
  padding: 14px 16px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
  position: relative;
  display: flex; flex-direction: column;
  gap: 6px;
}
.bw-indexcard-rule {
  position: absolute;
  inset: 36px 14px 14px;
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0 22px,
    rgba(122, 163, 196, 0.28) 22px 23px
  );
  pointer-events: none;
}
.bw-indexcard-num {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.bw-indexcard-name {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: 26px;
  color: var(--ink);
  line-height: 1;
}
.bw-indexcard-kind {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--tomato);
}
.bw-indexcard-meta {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-top: 4px;
}

/* ═════════════════════════════════════════════════════════════════════
   VARIANT C — SCRAPBOOK COLLAGE
   Big paper page, items scattered across — polaroids + postcards +
   washi tape + handwritten captions + pressed flowers. Densest variant.
   ═════════════════════════════════════════════════════════════════════ */
.bw-scrap {
  position: relative;
  width: 100%; height: 100%;
  background:
    /* outer table tone */
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(0,0,0,0.18) 0%, transparent 60%),
    repeating-linear-gradient(
      90deg,
      #d3c4a5 0 4px,
      #c4b598 4px 8px
    );
  overflow: hidden;
}
/* Open spiral-bound notebook spread as the page surface. The image is a
   transparent PNG with the notebook centred on a blank backdrop, so we
   render it via <img> in markup rather than as a CSS background — that
   keeps the spiral binding crisp and gives us the option to dim/recolour
   later without re-exporting. Scaled up to nearly fill the stage; pulled
   outside the nav strips top/bottom so it dominates the page. */
.bw-scrap-page {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bw-scrap-page-img {
  /* The source PNG has ~22% transparent margin baked in around the
     notebook itself. To make the visible notebook fill the page, we
     scale the image up well past object-fit's natural fit. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform: scale(1.207);
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.28));
}

.bw-scrap-title {
  position: absolute;
  top: 8.5%;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  text-align: center;
  z-index: 20;
  pointer-events: none;
}
.bw-scrap-title-eyebrow {
  font-family: 'Caveat', cursive;
  font-size: 28px;
  color: var(--tomato);
  letter-spacing: 0.02em;
  font-weight: 600;
}
.bw-scrap-title-main {
  font-family: 'mudstone-sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  font-size: 132px;
  color: var(--ink);
  line-height: 0.85;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 0 rgba(255,255,255,0.5);
}
.bw-scrap-title-main em {
  font-style: italic;
  color: var(--tomato);
  font-weight: 500;
}
.bw-scrap-title-sub {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: var(--ink-3);
  margin-top: 6px;
  letter-spacing: 0.06em;
}

/* Items in the scrapbook layout */
.bw-scrap-item {
  position: absolute;
  z-index: 14;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), filter .25s;
  filter: drop-shadow(2px 8px 16px rgba(0,0,0,0.22));
}
.bw-scrap-item:hover {
  z-index: 99;
  transform: translateY(-6px) rotate(var(--hover-r, 0deg)) scale(1.05) !important;
}
/* While being dragged, suppress the hover lift + transition so the
   cursor stays anchored to the same point on the polaroid. The base
   rotation is re-asserted inline with !important by the drag handler
   so the card keeps its tilt while moving. */
.bw-scrap-item.bw-dragging,
.bw-scrap-item.bw-dragging:hover {
  transition: none !important;
  cursor: grabbing !important;
}

/* Square postcard (used for one of the brands) */
.bw-postcard {
  background: var(--paper-2);
  padding: 8px;
  display: flex; flex-direction: column;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}
.bw-postcard-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--c, #b8a890);
  overflow: hidden;
}
.bw-postcard-photo img,
.bw-postcard-photo video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.bw-postcard-cap {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 6px 4px;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.bw-postcard-cap .nm {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 18px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
}
.bw-postcard-cap .yr {
  color: var(--tomato);
}

/* Big squiggly arrow */
.bw-arrow {
  position: absolute;
  pointer-events: none;
  z-index: 10;
}

/* Placeholder content shown inside an empty thumb — big stencilled brand
   name centered, so the polaroid still communicates which brand it is. */
.bw-thumb-stencil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-style: italic;
  font-weight: 300;
  color: rgba(255,255,255,0.88);
  text-align: center;
  pointer-events: none;
  line-height: 0.92;
  text-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.bw-thumb-stencil-big {
  font-size: 42px;
  letter-spacing: -0.01em;
}
.bw-thumb-stencil-sub {
  font-family: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-top: 8px;
  font-weight: 400;
}
/* On a square postcard, scale the stencil down a touch */
.bw-postcard .bw-thumb-stencil-big { font-size: 36px; }