/* =========================================================================
   V6c · SCRAPBOOK
   Curated chaos. Rotated cards on a kraft-paper board with masking tape,
   post-its, marker scribbles, mixed handwritten / typewritten / serif type.
   Constrained chaos: positions and rotations are intentional, not random.
   ========================================================================= */

:root {
  --kraft:        #C9B68F;
  --kraft-dark:   #B09877;
  --postit-yel:   #F8E060;
  --postit-pink:  #FFB8C8;
  --postit-mint:  #BFE5C8;
  --paper-card:   #FAF6EB;
  --paper-poly:   #F4ECDB;
  --ink:          #1A1817;
  --ink-soft:     #3A3733;
  --ink-muted:    #6D6657;
  --marker-red:   #C5331C;
  --highlighter:  rgba(248, 224, 96, 0.7);
  --tape:         rgba(245, 230, 195, 0.65);

  --hand:    'Caveat', 'Kalam', 'Comic Sans MS', cursive;
  --hand-2:  'Kalam', 'Caveat', cursive;
  --type:    'Special Elite', 'Courier Prime', 'Courier New', monospace;
  --scream:  'Archivo Black', 'Inter', sans-serif;
  --serif:   'Times New Roman', Times, serif;
  --mono:    'IBM Plex Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--kraft);
  background-image:
    radial-gradient(rgba(0,0,0,0.045) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 4px 4px, 7px 7px;
  background-position: 0 0, 2px 3px;
  color: var(--ink);
  font-family: var(--type);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

p, h1, h2, h3 { margin: 0; padding: 0; }
ul { list-style: none; padding: 0; margin: 0; }

/* =========================================================================
   FONTS — utility classes
   ========================================================================= */

.handwritten { font-family: var(--hand); font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--ink); }
.handwritten.small { font-size: 17px; opacity: 0.78; }
.handwritten.big { font-size: 32px; line-height: 1.05; }
.handwritten.marker { color: var(--marker-red); font-weight: 700; }
.tilt { display: inline-block; transform: rotate(-3deg); }

.typed   { font-family: var(--type); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-soft); text-transform: uppercase; }
.typed.small { font-size: 10.5px; }

.serif   { font-family: var(--serif); font-size: 17px; line-height: 1.4; color: var(--ink); }

.scream  { font-family: var(--scream); font-size: clamp(36px, 5vw, 56px); letter-spacing: -0.02em; line-height: 0.92; color: var(--ink); text-transform: uppercase; }

.kicker  { font-family: var(--type); font-size: 10.5px; letter-spacing: 0.16em; color: var(--ink-muted); margin-bottom: 10px; text-transform: uppercase; }

.signature { font-family: var(--hand); font-size: 18px; color: var(--marker-red); margin-top: 6px; }

.hl { background: var(--highlighter); padding: 0 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.marker.big { font-family: var(--hand); font-weight: 700; font-size: clamp(28px, 4vw, 42px); color: var(--marker-red); line-height: 1.05; }

/* =========================================================================
   PAGE HEAD
   ========================================================================= */

.head {
  padding: 48px 40px 24px;
  max-width: 1300px;
  margin: 0 auto;
}
.head__scream {
  font-family: var(--scream);
  font-size: clamp(56px, 8vw, 96px);
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-transform: uppercase;
}
.head__scream span {
  font-family: var(--hand);
  font-weight: 700;
  text-transform: lowercase;
  font-size: 0.55em;
  color: var(--marker-red);
  letter-spacing: -0.01em;
}
.head__sub {
  margin-top: 6px;
  max-width: 38ch;
  color: var(--ink-soft);
}
.head__strip {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1.5px dashed var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
}

/* =========================================================================
   BOARD (the chaotic-but-curated grid)
   Each .bit uses --tx, --ty, --rot vars set inline.
   At desktop: absolute positioned across a tall canvas.
   At mobile: stack normally, drop rotations.
   ========================================================================= */

.board {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
  padding: 16px 40px 80px;
  min-height: 1800px;
}

.bit {
  position: absolute;
  width: 22%;
  min-width: 240px;
  max-width: 340px;
  left: var(--tx, 0%);
  top: calc(var(--ty, 0%) * 14);
  transform: rotate(var(--rot, 0deg));
  transition: transform 200ms cubic-bezier(.2,.7,.3,1.2), z-index 0s;
  z-index: 1;
  will-change: transform;
}
.bit:hover {
  transform: rotate(0deg) scale(1.04) translateY(-4px);
  z-index: 50;
}

/* ----- POST-IT ----- */
.postit {
  padding: 22px 20px 24px;
  background: var(--postit-yel);
  box-shadow:
    0 12px 24px -12px rgba(0,0,0,0.35),
    0 2px 0 rgba(0,0,0,0.06);
  min-height: 180px;
  position: absolute;
}
.postit::before {
  content: "";
  position: absolute;
  top: 0; left: 35%;
  width: 30%;
  height: 16px;
  background: var(--tape);
  transform: translateY(-50%) rotate(-1deg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.postit--yellow { background: var(--postit-yel); }
.postit--pink   { background: var(--postit-pink); }
.postit--mint   { background: var(--postit-mint); }

/* ----- INDEX CARD ----- */
.card {
  background: var(--paper-card);
  padding: 22px 22px 24px;
  box-shadow:
    0 14px 28px -14px rgba(0,0,0,0.45),
    0 2px 0 rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.05);
  background-image: linear-gradient(transparent 95%, rgba(180, 60, 50, 0.18) 95%);
  background-size: 100% 24px;
}
.card--lg { width: 30%; min-width: 320px; max-width: 420px; }
.card--narrow { width: 22%; min-width: 240px; }

.card h2 { margin-bottom: 10px; }
.card h3 { margin-bottom: 8px; }
.card p  { margin-bottom: 8px; }
.card .handwritten.marker { margin-top: 6px; }

/* ----- POLAROID ----- */
.polaroid {
  background: #FFFFFF;
  padding: 10px 10px 38px;
  box-shadow:
    0 16px 30px -16px rgba(0,0,0,0.55),
    0 2px 0 rgba(0,0,0,0.08);
  width: 18%;
  min-width: 200px;
  max-width: 280px;
}
.polaroid__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  filter: grayscale(0.6) contrast(1.1) sepia(0.15);
  background: #888;
}
.polaroid__photo--gradient {
  background:
    radial-gradient(circle at 30% 30%, #E2B07A 0%, #8E5A3A 45%, #2B1A12 100%);
}
.polaroid__photo--blue {
  background:
    radial-gradient(circle at 60% 40%, #6E8FA8 0%, #2F4A5F 55%, #14222E 100%);
}
.polaroid figcaption {
  text-align: center;
  margin-top: 10px;
  font-size: 19px;
}

/* ----- CLIPPING ----- */
.clipping {
  background: #F3ECDA;
  padding: 18px 20px;
  width: 26%;
  min-width: 260px;
  max-width: 360px;
  box-shadow: 0 10px 22px -12px rgba(0,0,0,0.4);
  position: relative;
  background-image: repeating-linear-gradient(180deg, transparent 0, transparent 22px, rgba(0,0,0,0.04) 22px, rgba(0,0,0,0.04) 23px);
}
.clipping::before, .clipping::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 6px;
  background:
    linear-gradient(135deg, transparent 33%, #F3ECDA 33%, #F3ECDA 66%, transparent 66%) repeat-x;
  background-size: 8px 6px;
}
.clipping::before { top: -6px; }
.clipping::after  { bottom: -6px; transform: scaleY(-1); }

.clipping__head { font-style: italic; color: var(--ink-muted); font-size: 13px; border-bottom: 1px solid var(--ink-muted); padding-bottom: 6px; margin-bottom: 10px; }
.clipping__title { font-weight: 700; margin-bottom: 8px; line-height: 1.2; }
.clipping__lede { font-size: 15px; color: var(--ink-soft); margin-bottom: 12px; }
.clipping__meta { color: var(--ink-muted); }

/* ----- SCREENSHOT ----- */
.shot {
  background: #1A1817;
  color: #E8E4D8;
  padding: 0;
  width: 26%;
  min-width: 280px;
  max-width: 360px;
  box-shadow: 0 14px 28px -14px rgba(0,0,0,0.65);
  position: relative;
  overflow: visible;
}
.shot__chrome { background: #2A2825; color: #B8B0A0; padding: 8px 12px; font-size: 10px; letter-spacing: 0.08em; }
.shot__inner { padding: 14px 16px 16px; }
.shot pre { color: #B8E8C8; font-size: 12px; line-height: 1.4; margin: 0; white-space: pre-wrap; font-family: var(--mono); }
.shot .handwritten { position: absolute; left: 10px; bottom: -32px; color: var(--marker-red); font-size: 20px; }

/* ----- SCRIBBLE / NOTE ----- */
.scribble {
  background: transparent;
  padding: 20px;
  width: 22%;
  min-width: 220px;
  max-width: 300px;
  border: 2.5px dashed var(--marker-red);
  background: rgba(250, 246, 235, 0.7);
}

/* ----- STAMP CARD ----- */
.stamp-card {
  background: var(--paper-card);
  padding: 22px;
  box-shadow: 0 12px 24px -14px rgba(0,0,0,0.4);
  position: relative;
}
.stamp-card::before {
  content: "";
  position: absolute;
  top: -6px; left: 20%;
  width: 30%;
  height: 18px;
  background: var(--tape);
  transform: rotate(2deg);
}
.stamp {
  display: inline-block;
  font-family: var(--type);
  font-size: 14px;
  letter-spacing: 0.18em;
  border: 2.5px solid var(--marker-red);
  color: var(--marker-red);
  padding: 4px 10px;
  margin-bottom: 12px;
  transform: rotate(-3deg);
  mix-blend-mode: multiply;
  opacity: 0.85;
  text-transform: uppercase;
}

/* ----- LEDGER ----- */
.ledger li {
  padding: 4px 0;
  border-bottom: 1px dashed rgba(0,0,0,0.18);
}

/* =========================================================================
   TAPE / DECORATIONS
   ========================================================================= */

.tape {
  display: block;
  background: var(--tape);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.tape--small {
  width: 80px; height: 22px; transform: rotate(-3deg);
}
.tape--corner {
  position: absolute;
  width: 70px;
  height: 22px;
}
.tape--tl { top: -10px; left: -14px; transform: rotate(-32deg); }
.tape--tr { top: -10px; right: -14px; transform: rotate(32deg); }
.tape--br { bottom: -10px; right: -14px; transform: rotate(-32deg); }

/* =========================================================================
   FOOTER
   ========================================================================= */

.foot {
  padding: 40px;
  text-align: center;
  border-top: 1.5px dashed var(--ink-muted);
  max-width: 1300px;
  margin: 24px auto 0;
}

::selection { background: var(--marker-red); color: #FFFFFF; }

/* =========================================================================
   RESPONSIVE — collapse the board to a normal stack on mobile
   ========================================================================= */

@media (max-width: 900px) {
  .board {
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px 24px 64px;
  }
  .bit {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    transform: rotate(calc(var(--rot, 0deg) * 0.4));
  }
  .head { padding: 32px 24px 16px; }
  .head__strip { flex-wrap: wrap; }
}