/* ============================================================
   CodebyCarter — workshop.css
   "Inside my workshop" — draggable polaroid-style stickers
   on a corkboard. Tactile, physical, fun. Showcases Carter's
   tools, preferences, and personality.
   ============================================================ */

.workshop{
  background:
    radial-gradient(800px 600px at 20% 30%, rgba(184,134,69,.18), transparent 60%),
    radial-gradient(700px 500px at 85% 75%, rgba(150,108,55,.12), transparent 60%),
    linear-gradient(165deg, #2C2017 0%, #3A2A1C 50%, #2C2017 100%);
  color:#F5E8D5;
  padding:clamp(100px,12vw,160px) 0;
  position:relative;overflow:hidden;
  --ws-cork:#3A2A1C;
  --ws-paper:#FAF5E8;
  --ws-ink:#1A1410;
  --ws-tape:#F4D27A;
  --ws-pin:#D9534F;
}

/* Cork texture overlay */
.workshop::before{
  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='180' height='180'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .15  0 0 0 .25 0'/></filter><rect width='100%25' height='100%25' filter='url(%23c)'/></svg>");
  opacity:.55;mix-blend-mode:multiply;
}

.workshop .shell{position:relative;z-index:2}

.workshop-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.20em;
  text-transform:uppercase;color:var(--ws-tape);font-weight:700;
  margin-bottom:18px;display:inline-flex;align-items:center;gap:10px;
}
.workshop-eyebrow::before{
  content:"";width:24px;height:1px;background:currentColor;display:inline-block;
}
.workshop-h{
  font-size:clamp(42px,7.5vw,104px);line-height:1.0;letter-spacing:-.035em;
  font-weight:600;margin-bottom:22px;max-width:18ch;color:#F5E8D5;
}
.workshop-h .ital{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg, var(--ws-tape), #F0B040);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.workshop-sub{
  font-size:clamp(17px,1.6vw,21px);color:#D4C0A0;line-height:1.55;
  max-width:54ch;margin-bottom:48px;
}
.workshop-sub b{color:#F5E8D5;font-weight:600}
.workshop-sub em{
  font-style:italic;font-family:'Instrument Serif',serif;
  color:var(--ws-tape);font-size:1.06em;
}

/* ============================================================
   THE CORKBOARD
   ============================================================ */
.workshop-board{
  position:relative;
  min-height:560px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.04), transparent 60%),
    repeating-radial-gradient(circle at 0% 0%, rgba(0,0,0,.08) 0, rgba(0,0,0,.08) 1px, transparent 1px, transparent 4px),
    linear-gradient(135deg, #4A3422 0%, #3A2918 100%);
  border-radius:20px;
  border:8px solid #2A1C10;
  box-shadow:
    inset 0 0 60px rgba(0,0,0,.45),
    0 30px 60px -20px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04);
  padding:40px;
  overflow:hidden;
  touch-action:none;
}

.workshop-hint{
  position:absolute;top:18px;right:20px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(245,232,213,.45);font-weight:700;
  background:rgba(0,0,0,.30);padding:6px 12px;border-radius:99px;
  pointer-events:none;
  z-index:1;
}

/* ============================================================
   POLAROID STICKERS
   ============================================================ */
.sticker{
  position:absolute;
  background:var(--ws-paper);
  color:var(--ws-ink);
  padding:14px 16px 12px;
  width:160px;
  border-radius:3px;
  font-family:'Space Grotesk',sans-serif;
  box-shadow:
    0 14px 28px -8px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.05);
  cursor:grab;
  user-select:none;-webkit-user-select:none;
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
  touch-action:none;
  z-index:1;
}
.sticker:active,
.sticker.is-dragging{
  cursor:grabbing;
  box-shadow:
    0 30px 60px -10px rgba(0,0,0,.65),
    0 0 0 1px rgba(0,0,0,.10);
  z-index:99 !important;
}
.sticker:hover{transform:translate(var(--tx,0),var(--ty,0)) rotate(var(--rot,0deg)) scale(1.05) !important}

/* Push-pin */
.sticker::before{
  content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #FF7A78, var(--ws-pin) 60%, #8A2A28);
  box-shadow:0 2px 4px rgba(0,0,0,.4), inset 0 -2px 2px rgba(0,0,0,.3);
}

.sticker-emoji{
  font-size:42px;line-height:1;text-align:center;
  margin:14px 0 8px;
  display:block;
}
.sticker-label{
  font-size:13px;font-weight:600;letter-spacing:-.01em;
  text-align:center;line-height:1.3;color:var(--ws-ink);
}
.sticker-sub{
  font-family:'JetBrains Mono',monospace;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  text-align:center;margin-top:4px;font-weight:600;
  color:rgba(26,20,16,.55);
}

/* Variants: tape strips and bad-feeling NO marks */
.sticker--no .sticker-emoji::after{
  content:"";position:absolute;top:50%;left:50%;
  width:54px;height:54px;border:3px solid var(--ws-pin);
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.sticker--no .sticker-emoji::before{
  content:"";position:absolute;top:50%;left:50%;
  width:54px;height:3px;background:var(--ws-pin);
  transform:translate(-50%,-50%) rotate(-45deg);
}
.sticker--no .sticker-emoji{position:relative}

/* Tape sticker variant — yellow masking tape look */
.sticker--tape{
  background:var(--ws-tape);
  color:#3A2810;
  padding:18px 16px 14px;
  font-family:'JetBrains Mono',monospace;
}
.sticker--tape::before{display:none}
.sticker--tape::after{
  content:"";position:absolute;top:-6px;left:-6px;right:-6px;bottom:-6px;
  background:repeating-linear-gradient(45deg, transparent 0 8px, rgba(255,255,255,.15) 8px 10px);
  border-radius:3px;z-index:-1;
}
.sticker--tape .sticker-emoji{font-size:32px;margin:6px 0 6px}
.sticker--tape .sticker-label{color:#3A2810;font-weight:700;font-size:12px}
.sticker--tape .sticker-sub{color:rgba(58,40,16,.65)}

/* Mini variants */
.sticker--mini{width:120px;padding:10px 12px 10px}
.sticker--mini .sticker-emoji{font-size:32px;margin:8px 0 6px}
.sticker--mini .sticker-label{font-size:11px}

/* ============================================================
   Bottom signature
   ============================================================ */
.workshop-foot{
  margin-top:30px;text-align:center;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(245,232,213,.50);font-weight:600;
}

/* ============================================================
   Mobile — corkboard becomes taller, stickers smaller
   ============================================================ */
@media (max-width:760px){
  .workshop-board{padding:24px;min-height:680px}
  .sticker{width:130px;padding:11px 13px 10px}
  .sticker-emoji{font-size:34px;margin:10px 0 6px}
  .sticker-label{font-size:11.5px}
  .sticker--mini{width:100px}
  .sticker--mini .sticker-emoji{font-size:26px}
}