/* ==========================================================================
   Whimsy lane "resources-404" (prefix rs-). Folders + paperclips on document
   links, an envelope on the contact form, a recess scene on the 404 page and a
   corkboard for testimonials. Brand colours come from the foundation tokens
   (--brand-*). The only literal colours are physical materials that do not
   change per school (manila, cork, wood) and white.
   ========================================================================== */
.rs-folder, .rs-cork, .rs-recess-wrap, .rs-env-anchor {
  --rs-manila: #f4e1b0; --rs-manila-deep: #e2c27f;
  --rs-cork: #cfa070; --rs-cork-dark: 116 74 38; --rs-cork-light: 246 226 196;
  --rs-wood: #a5703f; --rs-wood-light: #c18b58;
}

/* ---------- 1. Document links: a little manila folder, a page and a paperclip ---------- */
.doc-icon.rs-folder { background: none; border-radius: 0; overflow: visible; isolation: isolate; color: var(--hue-deep, var(--brand-secondary-deep)); }
.doc-icon.rs-folder::after { content: none; }
.rs-folder > span { position: absolute; display: block; }
.rs-folder-back { inset: 9px 0 2px 0; background: var(--rs-manila-deep); border-radius: 2px 6px 6px 6px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .05); }
.rs-folder-back::before { content: ""; position: absolute; left: 0; top: -7px; width: 22px; height: 9px; background: inherit; border-radius: 5px 7px 0 0; }
.rs-page {
  left: 9px; right: 7px; top: 12px; height: 36px; z-index: 1;
  background: #fff repeating-linear-gradient(to bottom, transparent 0 4px, rgb(var(--hue-rgb, var(--brand-secondary-rgb)) / .6) 4px 5.5px) 5px 3px / calc(100% - 14px) 22px no-repeat;
  border-radius: 2px 2px 0 0; box-shadow: 0 1px 2px rgb(var(--brand-ink-rgb) / .22);
  transform: rotate(-2.5deg); transform-origin: 50% 100%;
  transition: transform .45s var(--ease-bounce, cubic-bezier(.34,1.56,.64,1));
}
.rs-clip {
  position: absolute; right: 2px; top: -9px; width: 10px; height: 27px; overflow: visible;
  fill: none; stroke: var(--hue-deep, var(--brand-secondary-deep)); stroke-width: 1.9; stroke-linecap: round;
  transform: rotate(8deg); transform-origin: 50% 30%;
  filter: drop-shadow(0 1px 0 rgb(var(--brand-ink-rgb) / .18));
}
.rs-folder-front {
  left: -2px; right: -2px; top: 26px; bottom: 0; z-index: 2;
  background: linear-gradient(to bottom, rgb(255 255 255 / .35), transparent 40%), var(--rs-manila);
  border-radius: 3px 3px 7px 7px;
  box-shadow: inset 0 1.5px 0 rgb(255 255 255 / .7), inset 0 -2px 0 rgb(0 0 0 / .05), 0 2px 4px rgb(var(--brand-ink-rgb) / .16);
  display: grid; place-items: end center; padding-bottom: 7px;
}
.rs-folder-label {
  display: block; background: #fff; color: var(--hue-deep, var(--brand-secondary-deep));
  font: 700 .62rem/1 var(--font-heading); letter-spacing: .05em; padding: 3px 5px 2px; border-radius: 3px;
  box-shadow: 0 0 0 1px rgb(var(--hue-rgb, var(--brand-secondary-rgb)) / .4);
}
.doc-card:hover .rs-page, .doc-card:focus-visible .rs-page { transform: translateY(-15px) rotate(-6deg); }
.doc-card:hover .rs-clip, .doc-card:focus-visible .rs-clip { animation: rs-wiggle .9s ease-in-out .08s; }
@keyframes rs-wiggle {
  0%, 100% { transform: rotate(8deg); }
  20% { transform: rotate(-12deg); }
  40% { transform: rotate(14deg); }
  60% { transform: rotate(-7deg); }
  80% { transform: rotate(10deg); }
}

/* ---------- 2. Contact form: a hand-drawn envelope with a heart seal ---------- */
.rs-env-anchor { position: relative; height: 0; pointer-events: none; }
.rs-env {
  position: absolute; right: -16px; width: 170px;
  /* sits on the card's top edge, above the heading: card padding (same clamp as .form-card) + overhang */
  top: calc(-1 * clamp(1.25rem, 1rem + 1.5vw, 2.5rem) - 60px);
}
.rs-env-svg { display: block; width: 100%; height: auto; overflow: visible; }
.rs-env-body { fill: var(--brand-sun-soft); stroke: var(--brand-navy); stroke-width: 2.4; stroke-linejoin: round; }
.rs-env-fold { fill: none; stroke: rgb(var(--brand-navy-rgb) / .45); stroke-width: 2; stroke-linecap: round; }
.rs-env-flap { fill: var(--brand-secondary-soft); }
.rs-env-flap-line { fill: none; stroke: var(--brand-navy); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rs-seal-shine { fill: none; stroke: rgb(255 255 255 / .6); stroke-width: 1.6; stroke-linecap: round; }
.rs-trail { fill: none; stroke: var(--brand-secondary); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: .1 6.5; }
.rs-trail-draw { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 0; }
.rs-sparkle { fill: none; stroke: var(--brand-sun); stroke-width: 2.6; stroke-linecap: round; }
.rs-sparkle-sm { stroke: var(--brand-primary); stroke-width: 2.2; }
.rs-env-float { transform-box: view-box; transform-origin: 110px 62px; animation: rs-float 5.6s ease-in-out infinite; }
.rs-env-seal { transform-box: fill-box; transform-origin: center; }
.rs-env-heart { opacity: 0; transform-box: fill-box; transform-origin: center; }
@keyframes rs-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-2px, -5px) rotate(2.5deg); }
}
/* JS arms the trail (hidden), then draws it once when the envelope scrolls into view.
   Without JS, or with reduced motion, it is simply drawn. */
.rs-env.rs-armed .rs-trail-draw { stroke-dashoffset: 100; }
.rs-env.rs-armed.rs-in .rs-trail-draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.45,.05,.3,1) .25s; }
/* Starting to fill in the form: the seal gives a happy beat and a tiny heart floats up. */
.form-card:focus-within .rs-env-seal { animation: rs-beat 1s ease-in-out 2; }
.form-card:focus-within .rs-env-heart { animation: rs-heart-up 2.2s ease-out .2s 1 both; }
@keyframes rs-beat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.18); } 55% { transform: scale(.96); } }
@keyframes rs-heart-up {
  0% { opacity: 0; transform: translate(-30px, 34px) scale(.6); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(0, -6px) scale(1.15); }
}
@media (max-width: 639px) {
  .rs-env { width: 112px; right: -8px; top: calc(-1 * clamp(1.25rem, 1rem + 1.5vw, 2.5rem) - 52px); }
}

/* ---------- 3. 404: the page went out to recess ---------- */
.rs-recess-wrap { width: min(100%, 680px); margin: 0 auto clamp(.75rem, .4rem + 1vw, 1.5rem); color: var(--brand-leaf); }
.rs-recess { display: block; width: 100%; height: auto; aspect-ratio: 720 / 230; overflow: hidden; }
@media (max-width: 599px) { .rs-recess { height: 150px; aspect-ratio: auto; } }
.rs-f-sun { fill: var(--brand-sun); }
.rs-halo { opacity: .28; }
.rs-f-cloud { fill: #fff; stroke: rgb(var(--brand-primary-rgb) / .45); stroke-width: 2; stroke-linejoin: round; }
.rs-f-leafsoft { fill: rgb(var(--brand-leaf-rgb) / .2); }
.rs-f-secsoft { fill: rgb(var(--brand-secondary-rgb) / .16); }
.rs-f-berry { fill: var(--brand-berry); }
.rs-f-berrysoft { fill: var(--brand-berry-soft); }
.rs-f-primary { fill: var(--brand-primary); }
.rs-f-white { fill: #fff; }
.rs-f-paper { fill: var(--brand-paper); }
.rs-groundline { fill: none; stroke-width: 3; stroke-linecap: round; }
.rs-tuft, .rs-stem { fill: none; stroke: var(--brand-leaf); stroke-width: 2.6; stroke-linecap: round; }
.rs-stem { stroke-width: 2; }
.rs-legs { fill: none; stroke: var(--brand-sky); stroke-width: 8; stroke-linecap: round; }
.rs-feet { fill: none; stroke: rgb(var(--brand-navy-rgb) / .55); stroke-width: 4; stroke-linecap: round; }
.rs-bar { fill: none; stroke: var(--brand-secondary); stroke-width: 11; stroke-linecap: round; }
.rs-chain { fill: none; stroke: rgb(var(--brand-ink-rgb) / .55); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 4.5 3; }
.rs-string { fill: none; stroke: rgb(var(--brand-ink-rgb) / .5); stroke-width: 1.8; stroke-linecap: round; }
.rs-hook { fill: none; stroke: rgb(var(--brand-ink-rgb) / .6); stroke-width: 2; }
.rs-seat-shine { fill: none; stroke: rgb(255 255 255 / .55); stroke-width: 2; stroke-linecap: round; }
.rs-board { fill: var(--brand-paper); stroke: var(--brand-secondary-deep); stroke-width: 2.6; }
.rs-sign-text { font-family: var(--font-accent); font-size: 25px; letter-spacing: .02em; fill: var(--brand-accent); }
.rs-ball-move { color: var(--brand-navy); transform: translateX(150px); }
.rs-ball-shadow { fill: rgb(var(--brand-ink-rgb) / .16); }
.rs-ball-ring { fill: none; stroke: rgb(var(--brand-navy-rgb) / .3); stroke-width: 1.4; }
.rs-ball-spin { transform-box: fill-box; transform-origin: center; transform: rotate(-20deg); }
.rs-swing { transform-box: view-box; transform-origin: 300px 56px; transform: rotate(5deg); animation: rs-sway 3.6s ease-in-out infinite alternate; }
.rs-sign { transform-box: view-box; transform-origin: 430px 56px; animation: rs-sign 4.4s ease-in-out infinite alternate; }
.rs-cloud-a { animation: rs-drift 22s ease-in-out infinite alternate; }
.rs-cloud-b { animation: rs-drift 30s ease-in-out -9s infinite alternate-reverse; }
.rs-ball-move { animation: rs-roll 15s linear infinite; }
.rs-ball-spin { animation: rs-spin 15s linear infinite; }
@keyframes rs-sway { from { transform: rotate(11deg); } to { transform: rotate(-11deg); } }
@keyframes rs-sign { from { transform: rotate(1.6deg); } to { transform: rotate(-1.6deg); } }
@keyframes rs-drift { from { transform: translateX(-14px); } to { transform: translateX(16px); } }
/* in from the left, settle beside the swings, then off to the right (spin = distance / radius) */
@keyframes rs-roll {
  0% { transform: translateX(-40px); animation-timing-function: cubic-bezier(.2,.6,.35,1); }
  26% { transform: translateX(150px); animation-timing-function: ease-in-out; }
  29% { transform: translateX(146px); animation-timing-function: ease-in-out; }
  31%, 54% { transform: translateX(150px); animation-timing-function: cubic-bezier(.55,0,.75,.6); }
  80%, 100% { transform: translateX(770px); }
}
@keyframes rs-spin {
  0% { transform: rotate(-726deg); animation-timing-function: cubic-bezier(.2,.6,.35,1); }
  26% { transform: rotate(0deg); animation-timing-function: ease-in-out; }
  29% { transform: rotate(-15deg); animation-timing-function: ease-in-out; }
  31%, 54% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.55,0,.75,.6); }
  80%, 100% { transform: rotate(2368deg); }
}

/* ---------- 4. Testimonials: notes pinned to a corkboard ---------- */
.quote-columns.rs-cork {
  position: relative; border-radius: var(--radius-lg, 1.25rem);
  padding: clamp(1.1rem, .7rem + 2vw, 2.6rem) clamp(.6rem, .2rem + 2vw, 2.4rem) clamp(.3rem, .1rem + 1.2vw, 1.4rem);
  border: clamp(6px, .2rem + .5vw, 12px) solid var(--rs-wood);
  background-color: var(--rs-cork);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .21 0 0 0 0 .08 3.2 0 0 0 -1.55'/%3E%3C/filter%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='1' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .93 0 0 0 0 .8 0 3 0 0 -1.75'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23d)'/%3E%3Crect width='160' height='160' filter='url(%23l)'/%3E%3C/svg%3E"), radial-gradient(130% 100% at 50% 0%, rgb(255 255 255 / .14), transparent 70%);
  background-size: 160px 160px, 100% 100%;
  box-shadow: inset 0 3px 10px rgb(var(--rs-cork-dark) / .45), inset 0 0 0 1px rgb(0 0 0 / .08), 0 1px 0 var(--rs-wood-light), var(--shadow-soft, 0 10px 30px rgb(0 0 0 / .08));
}
/* two spare pins stuck in the cork, bottom-right (the usual empty corner of balanced columns) */
.quote-columns.rs-cork::after {
  content: ""; position: absolute; right: clamp(10px, .4rem + 1vw, 24px); bottom: 7px; width: 42px; height: 22px; pointer-events: none;
  background:
    radial-gradient(circle at 8px 7px, rgb(255 255 255 / .85) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 10px 9px, var(--brand-berry) 0 6.5px, transparent 7.2px),
    radial-gradient(circle at 30px 11px, rgb(255 255 255 / .85) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 32px 13px, var(--brand-primary) 0 6.5px, transparent 7.2px);
  filter: drop-shadow(2px 3px 2px rgb(var(--brand-ink-rgb) / .3));
}
.quote-card.rs-note {
  background: linear-gradient(to bottom, rgb(255 255 255 / .55), transparent 30%), var(--hue-soft, var(--brand-sun-soft));
  border: 0; border-radius: 3px 3px 12px 4px;
  box-shadow: 0 1px 1px rgb(var(--brand-ink-rgb) / .14), 0 12px 18px -10px rgb(var(--brand-ink-rgb) / .5);
  margin-bottom: clamp(1.4rem, 1rem + 1vw, 1.9rem);
  transform: rotate(-1deg);
  transition: transform .35s var(--ease-bounce, cubic-bezier(.34,1.56,.64,1));
}
.quote-card.rs-note:nth-child(3n+2) { transform: rotate(.8deg); }
.quote-card.rs-note:nth-child(3n) { transform: rotate(-.4deg); }
.quote-card.rs-note:nth-child(4n) { transform: rotate(1.2deg); }
.quote-card.rs-note:hover { transform: rotate(0deg) translateY(-3px); }
.rs-note .quote-mark { color: var(--hue-deep, var(--brand-primary-deep)); }
.rs-note .avatar { background: #fff; }
.rs-pin {
  position: absolute; top: 7px; left: 50%; width: 19px; height: 19px; margin-left: -9.5px; border-radius: 50%; z-index: 1;
  background:
    radial-gradient(circle at 36% 32%, rgb(255 255 255 / .85) 0 2.2px, transparent 3.4px),
    radial-gradient(circle at 50% 50%, var(--hue, var(--brand-berry)) 0 55%, var(--hue-deep, var(--brand-berry-deep)) 100%);
  box-shadow: 0 1px 0 rgb(var(--brand-ink-rgb) / .25), 3px 5px 5px rgb(var(--brand-ink-rgb) / .28);
}

/* ---------- loops pause offscreen (rs.js); reduced motion = the composed still ---------- */
.rs-loop.rs-paused, .rs-loop.rs-paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .rs-folder *, .rs-recess-wrap *, .rs-env *, .rs-note { animation: none !important; transition: none !important; }
  .doc-card:hover .rs-page, .doc-card:focus-visible .rs-page { transform: translateY(-6px) rotate(-5deg); }
  .rs-env.rs-armed .rs-trail-draw { stroke-dashoffset: 0; }
}