/* =========================================================
   Bu. — Scrapbook environment.
   Turns flat section backgrounds into a layered paper world:
   warm tinted papers, faint grain/tooth, notebook dot/grid/line
   textures, torn-paper edges, layered "pasted" panels, washi
   tape, pins, hand underlines, marker rings, hand-drawn arrows.
   Readability first — every texture is faint and low-contrast.
   ========================================================= */

:root {
  /* ----- soft warm section papers (alternating tones) ----- */
  --bu-peach:  #FCEEDF;   /* pale peach */
  --bu-pink:   #F7E6E2;   /* dusty pink */
  --bu-yellow: #FAF0D4;   /* faded yellow */
  --bu-sage:   #E9F0E1;   /* light sage */
  --bu-sky:    #E6EDF1;   /* muted sky blue */

  /* ----- texture line colours ----- */
  --grid-ln: rgba(21, 17, 13, 0.055);
  --line-ln: rgba(21, 17, 13, 0.075);
  --margin-ln: rgba(214, 61, 47, 0.22);

  /* ----- procedural paper tooth (faint grayscale grain) ----- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='%75rl(%23n)' opacity='0.05'/%3E%3C/svg%3E");

  /* ----- torn paper edge mask (repeats horizontally) ----- */
  --torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='15'%3E%3Cpath d='M0 15 V7 L3 5 L7 8 L11 3 L15 6 L19 2 L23 7 L27 4 L31 8 L35 4 L39 7 L43 4 L48 6 V15 Z' fill='%23fff'/%3E%3C/svg%3E");

  /* ----- hand-drawn squiggle underline (orange) ----- */
  --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12'%3E%3Cpath d='M2 7 Q20 2 40 6 T80 6 T118 5' stroke='%23FF7A1A' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");

  /* ----- hand-drawn curved arrow (ink) ----- */
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='42'%3E%3Cpath d='M5 8 C22 3 44 9 49 28' stroke='%2315110D' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M42 23 L50 29 L41 35' stroke='%2315110D' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* =========================================================
   SECTION PAPER — base + tints + notebook textures
   ========================================================= */
.scrap {
  position: relative;
  background-color: var(--scrap-bg, var(--bu-cream-50));
  background-image: var(--grain);
  background-size: 150px 150px;
}

/* tone variants (set the paper colour) */
.bg-cream  { --scrap-bg: var(--bu-cream-50); }
.bg-paper  { --scrap-bg: var(--bu-paper); }
.bg-peach  { --scrap-bg: var(--bu-peach); }
.bg-pink   { --scrap-bg: var(--bu-pink); }
.bg-yellow { --scrap-bg: var(--bu-yellow); }
.bg-sage   { --scrap-bg: var(--bu-sage); }
.bg-sky    { --scrap-bg: var(--bu-sky); }

/* notebook textures — layered OVER the tint, grain kept on top */
.scrap.t-dots {
  background-image: var(--tex-dots), var(--grain);
  background-size: var(--tex-dots-size), 150px 150px;
}
.scrap.t-grid {
  background-image:
    linear-gradient(var(--grid-ln) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-ln) 1px, transparent 1px),
    var(--grain);
  background-size: 30px 30px, 30px 30px, 150px 150px;
}
.scrap.t-lines {
  background-image:
    repeating-linear-gradient(180deg, transparent 0 33px, var(--line-ln) 33px 34px),
    var(--grain);
  background-size: auto, 150px 150px;
}

/* =========================================================
   TORN PAPER EDGES — section tears into its neighbour
   ========================================================= */
.scrap.torn-top::before,
.scrap.torn-bottom::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 15px;
  z-index: 3;
  background-color: var(--scrap-bg);
  pointer-events: none;
  -webkit-mask: var(--torn) repeat-x bottom / 48px 15px;
          mask: var(--torn) repeat-x bottom / 48px 15px;
}
.scrap.torn-top::before    { top: 0;    transform: translateY(-98%); }
.scrap.torn-bottom::after  { bottom: 0; transform: translateY(98%) scaleY(-1); }

/* feed fade should melt into the section's own paper, not page cream */
.feed-fade::after {
  background: linear-gradient(to bottom, transparent, var(--scrap-bg, var(--bg-page))) !important;
}

/* =========================================================
   LAYERED "PASTED" PANEL — stacked colour papers behind a card
   ========================================================= */
.scrap-panel {
  position: relative;
  background: var(--bu-paper);
  border: 1.5px solid var(--bu-ink-900);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-sticker-lg);
  padding: 40px 34px 46px;
  background-image: var(--tex-dots);
  background-size: var(--tex-dots-size);
}
.scrap-panel::before,
.scrap-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-2xl);
  border: 1.5px solid var(--bu-ink-900);
  z-index: -1;
}
.scrap-panel::before { background: var(--panel-a, var(--aes-coquette)); transform: rotate(-2.4deg); }
.scrap-panel::after  { background: var(--panel-b, var(--aes-cozy));     transform: rotate(2deg); }

/* =========================================================
   FOLDER TABS — diary / journal feel above a section
   ========================================================= */
.tab-row {
  display: flex;
  gap: 8px;
  padding-left: 8px;
  position: relative;
  z-index: 2;
}
.folder-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 700 14px/1 var(--font-body);
  color: var(--bu-ink-900);
  background: var(--tab-bg, var(--bu-paper));
  border: 1.5px solid var(--bu-ink-900);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  padding: 10px 20px 13px;
  box-shadow: 2px -1px 0 0 rgba(21,17,13,0.06);
  transform: translateY(1.5px);
}
.folder-tab.is-active { background: var(--bu-paper); padding-bottom: 15px; }

/* =========================================================
   SCRAPBOOK DECORATIONS — restrained, never scattered
   ========================================================= */

/* translucent masking tape strip (position absolutely on a card) */
.washi-strip {
  position: absolute;
  width: 92px; height: 27px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0 5px, rgba(255,255,255,0) 5px 10px),
    var(--washi-c, rgba(241,229,204,0.82));
  border-left: 1px solid rgba(21,17,13,0.07);
  border-right: 1px solid rgba(21,17,13,0.07);
  box-shadow: 0 1px 3px rgba(31,22,10,0.12);
  z-index: 6;
  pointer-events: none;
}
.washi-strip.orange { --washi-c: rgba(255,183,120,0.8); }
.washi-strip.pink   { --washi-c: rgba(247,174,202,0.72); }

/* push-pin dot */
.pin {
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffb778, var(--pin-c, #c84f08));
  box-shadow: 0 2px 4px rgba(31,22,10,0.4), inset 0 -1px 2px rgba(0,0,0,0.25);
  border: 1px solid rgba(21,17,13,0.35);
  z-index: 7;
}
.pin.ink  { --pin-c: #2a2218; background: radial-gradient(circle at 34% 30%, #5a4f40, #15110d); }
.pin.pink { --pin-c: #c83a78; background: radial-gradient(circle at 34% 30%, #ff8fc0, #c83a78); }

/* handwritten underline under a word */
.u-underline {
  background-image: var(--squiggle);
  background-repeat: no-repeat;
  background-position: left bottom 0.02em;
  background-size: 100% 0.34em;
  padding-bottom: 0.22em;
}

/* marker circle drawn around an inline element */
.u-ring { position: relative; }
.u-ring::after {
  content: "";
  position: absolute;
  inset: -7px -15px;
  border: 2.5px solid var(--ring-c, var(--bu-orange-400));
  border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%;
  transform: rotate(-3deg);
  opacity: 0.72;
  pointer-events: none;
}

/* hand-drawn arrow doodle */
.deco-arrow {
  display: inline-block;
  width: 56px; height: 42px;
  background: var(--arrow) center / contain no-repeat;
  pointer-events: none;
}

/* faint pencil cross-hatch marks (decorative corner accent) */
.pencil-marks {
  position: absolute;
  width: 64px; height: 46px;
  opacity: 0.5;
  background:
    linear-gradient(58deg, transparent 46%, rgba(21,17,13,0.28) 46%, rgba(21,17,13,0.28) 48%, transparent 48%),
    linear-gradient(58deg, transparent 60%, rgba(21,17,13,0.22) 60%, rgba(21,17,13,0.22) 62%, transparent 62%),
    linear-gradient(58deg, transparent 74%, rgba(21,17,13,0.18) 74%, rgba(21,17,13,0.18) 76%, transparent 76%);
  pointer-events: none;
  z-index: 2;
}

/* small handwritten margin note */
.margin-note {
  font: 500 20px/1.05 var(--font-hand);
  color: var(--bu-ink-600);
  transform: rotate(-4deg);
}

/* =========================================================
   MOBILE — keep textures, drop the floating doodles that
   would crowd wrapped headings on a narrow screen.
   ========================================================= */
@media (max-width: 640px) {
  .scrap > .deco-arrow,
  .scrap > .margin-note,
  .scrap > .pencil-marks { display: none; }

  .scrap-panel { padding: 26px 18px 32px; }
  .scrap.t-grid { background-size: 24px 24px, 24px 24px, 150px 150px; }

  /* a little less section air on phones */
  .scrap.torn-top::before,
  .scrap.torn-bottom::after { height: 12px; }

  /* lighten the wall of fits — 6 cards is plenty on a phone */
  .feed > .fit:nth-child(n+7) { display: none; }

  /* keep the hand-drawn ring around "style world." as one unbroken unit when the heading wraps */
  #people .u-ring { display: inline-block; }

  /* washi strips can poke past tight panels on mobile — pull them in */
  .scrap-panel .washi-strip { width: 76px; height: 22px; }
}