/* =========================================================
   RAIN — shared design system
   A handmade-scrapbook identity: torn paper, washi tape,
   ballpoint-blue ink, and a candy-pink hand that turns red
   the second you touch it.
   ========================================================= */

:root {
  /* --- brief-mandated colors (do not change) --- */
  --btn-bg: #fdbdd7;
  --btn-hover: #9f0c28;
  --ink: #031940;

  /* --- supporting palette --- */
  --paper: #fdf8f1;
  /* warm page cream */
  --paper-alt: #f4ecdf;
  /* deeper cream for banding */
  --paper-dark: #ece0cb;
  /* corkboard-adjacent cream */
  --tape: #cfe0d8;
  /* washi tape green */
  --tape-2: #e9d6a3;
  /* washi tape gold */
  --sky: #6e85a3;
  /* rain-blue accent */
  --charcoal: #17181c;
  /* footer / dark sections */
  --cork: #a9784f;

  /* --- type --- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-hand: 'Caveat', cursive;

  /* --- homepage redesign type (headlines / handwritten body) --- */
  --font-headline: 'Gloria Hallelujah', cursive;
  --font-hand-body: 'Indie Flower', cursive;
  --pink-line: #F06BBF;

  --nav-opacity: 1;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-headline);
  color: var(--ink);
  letter-spacing: -0.01em;
}

::selection {
  background: var(--btn-bg);
  color: var(--ink);
}

:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
}

.eyebrow {
  font-family: var(--font-hand);
  font-size: 1.4rem;
  color: var(--btn-hover);
  display: inline-block;
  transform: rotate(-2deg);
  margin-bottom: .25rem;
}

/* =========================================================
   BUTTONS  (brief: bg #fdbdd7 / hover #9f0c28 / text #031940)
   ========================================================= */
.btn-rain {
  background: var(--btn-bg);
  color: var(--ink);
  border: none;
  border-radius: 999px;
  padding: .7rem 1.9rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .02em;
  transition: background .25s ease, color .25s ease, transform .2s ease;
  display: inline-block;
}

.btn-rain:hover,
.btn-rain:focus-visible {
  background: var(--btn-hover);
  color: var(--paper);
  transform: translateY(-2px);
}

.btn-outline-rain {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: .65rem 1.8rem;
  font-weight: 600;
  transition: all .25s ease;
}

.btn-outline-rain:hover {
  background: var(--btn-hover);
  border-color: var(--btn-hover);
  color: var(--paper);
}

/* =========================================================
   NAVBAR
   - logo left, links right (brief)
   - vintage paper texture background, kept translucent so the
     page behind still shows through as you scroll
   - torn/ripped bottom edge + drop shadow, like a strip of
     paper taped across the top of the page
   - small pink/red doodle accents pulled from Maya's sketches
   - cart icon with a live count badge
   ========================================================= */
/* =========================================================
   NAVBAR
   - logo left, links right (brief)
   - real torn-paper background image (replaces the old CSS
     gradient + drawn tear), kept translucent via --nav-opacity
   - drop shadow so it reads as a strip sitting above the page
   - small pink/red doodle accents pulled from Maya's sketches
   - cart icon with a live count badge
   ========================================================= */
.rain-nav {
  --nav-tear-h: 10px;
  position: relative;
  background-image: url('../img/nav-bg.png') !important;
  background-size: 100% 100% !important;
  background-position: bottom !important;
  background-repeat: no-repeat !important;
  padding: 1.1rem 0 2rem;
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: background .3s ease;
  filter: drop-shadow(0 14px 18px rgba(3, 25, 64, .32));
  overflow: visible;
}

/* on mobile, keep the background at full natural width instead of
   squeezing it down to match the narrower bar — crop/center instead */
@media (max-width: 767px) {
  .rain-nav {
    background-size: auto 100% !important;
    background-position: center bottom !important;
  }
}

/* doodle accents — pulled from Maya's sketch sheet, two color washes */
.rain-nav .nav-doodle {
  position: absolute;
  pointer-events: none;
  opacity: .9;
  z-index: 1;
}

.rain-nav .nav-doodle.pink {
  top: -6px;
  left: 38%;
  width: 46px;
  height: auto;
  filter: brightness(0) saturate(100%) invert(56%) sepia(53%) saturate(2007%) hue-rotate(289deg) brightness(101%) contrast(96%);
  transform: rotate(-8deg);
}

.rain-nav .nav-doodle.red {
  top: 4px;
  right: 14%;
  width: 34px;
  height: auto;
  filter: brightness(0) saturate(100%) invert(9%) sepia(84%) saturate(4839%) hue-rotate(343deg) brightness(88%) contrast(96%);
  transform: rotate(10deg);
}

@media (max-width: 991px) {
  .rain-nav .nav-doodle {
    display: none;
  }
}

.rain-nav .navbar-brand {
  font-family: var(--font-hand);
  font-size: 1.9rem;
  color: var(--ink) !important;
  transform: rotate(-1deg);
  display: inline-flex;
  align-items: center;
}

.rain-nav .navbar-brand img {
  height: 55px;
  width: auto;
  display: block;
}

.rain-footer .footer-logo {
  height: 42px;
  width: auto;
  display: block;
}

.rain-nav .nav-link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink) !important;
  position: relative;
  margin: 0 1.05rem;
  padding: .3rem .1rem !important;
}

.rain-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--btn-hover);
  transition: width .28s ease;
}

.rain-nav .nav-link:hover::after,
.rain-nav .nav-link.active::after {
  width: 100%;
}

.rain-nav .nav-link:hover {
  color: var(--btn-hover) !important;
}

/* cart icon + live count badge */
.rain-nav .nav-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: .9rem;
  font-size: 1.2rem;
  color: var(--ink) !important;
  transition: color .2s ease, transform .2s ease;
}

.rain-nav .nav-cart:hover {
  color: var(--btn-hover) !important;
  transform: translateY(-1px);
}

.rain-nav .nav-cart .cart-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--btn-hover);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1.6);
}

.rain-nav .nav-cart .cart-badge.bump {
  transform: scale(1.35);
}

/* =========================================================
   PAGE HEADER  — title + icon slot, every page
   ========================================================= */
.page-header {
  padding: 3.2rem 0 2.2rem;
  text-align: center;
}

.page-header .page-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-alt);
  border-radius: 50%;
  font-size: 1.5rem;
  border: 1.5px dashed var(--btn-hover);
}

.page-header h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
}

/* =========================================================
   MASKING TAPE STRIP — real scanned tape asset (Scotch-tape SVG
   set), sized and positioned per instance via inline style vars
   (--w, --r). Swap --tape-img to use a different strip from the
   set for variety.
   ========================================================= */
.masking-tape {
  position: absolute;
  width: var(--w, 90px);
  height: 34px;
  background-image: var(--tape-img, url('../img/tape-03.svg'));
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .25));
  transform: rotate(var(--r, -4deg));
  pointer-events: none;
}

/* =========================================================
   STICKY NOTE — "full size" post-it, per brief: whenever a
   sticky note is called for, use this component. Set --sn-img
   to one of the five sticky-note assets (each maps to one of
   the five approved brand colors — see the per-page notes for
   which asset is which color) and --sn-color to the matching
   readable text color.
   ========================================================= */
.sticky-note {
  position: relative;
  width: var(--sn-w, 190px);
  aspect-ratio: 1 / 1;
  background-image: var(--sn-img, url('../img/sticky-03.png'));
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: var(--sn-color, var(--ink));
  font-family: var(--font-hand);
  font-size: 1.2rem;
  line-height: 1.35;
  padding: 1.1rem 1.15rem 1.6rem;
  filter: drop-shadow(3px 8px 14px rgba(3, 25, 64, .3));
  transform: rotate(var(--sn-r, -3deg));
}

/* =========================================================
   POLAROID — instant-camera photo frame, used across Journal,
   Swag, and Dap Me Up. Photo fills the top; a blank strip at
   the bottom holds a handwritten caption. Rotate per-instance
   via --pr on the wrapper.
   ========================================================= */
.polaroid {
  position: relative;
  display: inline-block;
  background: #fdfdfb;
  padding: 14px 14px 46px;
  box-shadow: 0 14px 26px rgba(3, 25, 64, .28);
  transform: rotate(var(--pr, -3deg));
}

.polaroid img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.polaroid-caption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  color: var(--ink);
  text-align: right;
}

/* =========================================================
   FOOTER
   ========================================================= */
.rain-footer {
  background: #031940;
  color: var(--paper);
  padding: 3rem 0 1.5rem;
  margin-top: 4rem;
}

.rain-footer a {
  opacity: .8;
}

.rain-footer a:hover {
  opacity: 1;
  color: var(--btn-bg);
}

.rain-footer .hand {
  font-family: var(--font-hand);
  font-size: 1.6rem;
  color: var(--btn-bg);
}

/* utility */
.hand {
  font-family: var(--font-hand);
}

.bg-paper-alt {
  background: var(--paper-alt);
}

.bg-paper-dark {
  background: var(--paper-dark);
}

.text-rain-blue {
  color: var(--sky);
}

.text-hover-maroon:hover {
  color: var(--btn-hover) !important;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   SCRAPBOOK MOODBOARD v2 — 2 rows x 5 columns
   Homepage redesign: real notebook / polaroid / sticky-note
   PNGs used as actual <img> elements (not CSS backgrounds) so
   they scale 100% responsive; text + tape overlaid on top.
   ========================================================= */
.scrapbook {
  position: relative;
  overflow: hidden;
  margin-top: -40px;
  background-color: var(--paper-dark);
  background-image: url('../img/Rain_homepage_background-top.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-attachment: fixed;
  padding-top: 40px;
  padding-bottom: 60px;
}

/* iOS Safari handles fixed backgrounds unevenly on some versions —
   fall back to a normal (still full-cover, never-cut-off) scroll
   background there so the image is guaranteed to always be present */
@supports (-webkit-touch-callout: none) {
  .scrapbook {
    background-attachment: scroll;
  }
}

.scrapbook-inner {
  padding-top: 30px;
  padding-bottom: 0;
}

.sb-grid-row {
  margin-bottom: 2.75rem;
  justify-content: flex-start;
}

.sb-grid-row:last-child {
  margin-bottom: 0;
}

.sb-col {
  margin-bottom: 1.75rem;
}

@media (min-width: 768px) {
  .sb-col {
    margin-bottom: 0;
    /* set --overlap (negative px value) inline on each .sb-col to pull it
       toward the previous column, e.g. style="--overlap:-50px;". Defaults
       to 0 (no overlap) when not set. */
    margin-left: var(--overlap, 0px);
  }
}

.sb-grid-row:last-child .sb-col:last-child {
  margin-bottom: 0;
}

.sb-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  transform: rotate(var(--tile-r, 0deg));
  transition: transform .25s ease;
  container-type: inline-size;
}

.sb-tile:hover {
  transform: rotate(0deg);
  z-index: 4;
}

/* plain card — no bg image, no bg color (Row 1 / Col 1) */
.sb-tile-plain {
  background: none;
  box-shadow: none;
  padding: 2.4rem 1.4rem 1.6rem;
  height: 100%;
}

/* the image itself — full width, natural height, 100% visible.
   This is also the hard boundary for any text laid over it: it's a
   container-query context (so overlay text can size itself off the
   image's own dimensions) and clips anything that would spill past
   the image edges. */
.sb-tile-media {
  position: relative;
  width: 100%;
  line-height: 0;
  overflow: hidden;
  container-type: inline-size;
}

.sb-tile-media img {
  width: 100%;
  height: auto;
  display: block;
}

/* text laid over an image */
.sb-tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 28% 13% 8%;
  box-sizing: border-box;
  transform: rotate(var(--overlay-r, 0deg));
}

.sb-tile-overlay.split {
  justify-content: space-between;
}

.sb-tile-overlay.overlay-bottom {
  justify-content: flex-end;
  padding-bottom: 12%;
}

.sb-overlay-inner {
  text-align: left;
  width: 100%;
}

.sb-overlay-inner.center {
  text-align: center;
}

.sb-overlay-bottom {
  margin-top: auto;
}

/* headline / body type */
.sb-headline {
  font-family: var(--font-headline);
  font-size: clamp(1rem, 8cqw, 1.7rem);
  color: var(--ink);
  margin: 0 0 .35rem;
  line-height: 1.15;
}

.sb-headline.underline-pink {
  border-bottom: 3px solid var(--pink-line);
  display: inline-block;
  padding-bottom: .12rem;
}

.sb-headline-hero {
  font-size: clamp(2.2rem, 12cqw, 3.4rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: #fff;
}

.sb-body {
  font-family: var(--font-hand-body);
  font-size: clamp(.68rem, 4.2cqw, .92rem);
  line-height: 1.4;
  margin: 0 0 .3rem;
  color: var(--ink);
}

.sb-body.pink-text {
  color: var(--pink-line);
}

.sb-signature {
  font-family: var(--font-headline);
  font-size: clamp(1.3rem, 10cqw, 2.1rem);
  color: var(--btn-hover);
  margin: .5rem 0 0;
}

/* =========================================================
   PER-INSTANCE TEXT HOOKS
   Every text element in the scrapbook grid also carries its own
   unique class (r{row}c{col}-{element}) alongside the shared
   .sb-headline / .sb-body / .sb-cta-line / etc. classes. The shared
   classes still set the defaults; add rules here (or anywhere below)
   targeting a specific class to nudge just that one item's padding,
   rotation, margin, or font-size without touching any other column.
   ========================================================= */

/* R1 C1 — "this is the corner of the internet where." bumped 40%+ */
.r1c1-body {
  font-size: clamp(1.3rem, 5.9cqw, 1.55rem);
}

/* R1 C2 — three lines of pink copy + a CTA over a large (1.3x) image;
   trimmed ~10% for breathing room against the image edges */
.r1c2-body-1, .r1c2-body-2, .r1c2-body-3 {
  font-size: clamp(.61rem, 3.8cqw, .83rem);
}

/* R1 C5, R2 C1, R2 C3 — single short line each with lots of empty
   room in their photo frame, sized up since there's space to spare */
.r1c5-body, .r2c1-body {
  font-size: clamp(.82rem, 5cqw, 1.1rem);
}
.r2c3-body {
  font-size: clamp(.78rem, 4.8cqw, 1.06rem);
}

.sb-cta-line {
  font-family: var(--font-hand-body);
  font-weight: 700;
  font-size: clamp(.62rem, 3.6cqw, .88rem);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .3rem;
  cursor: pointer;
}

a.sb-cta-line:hover {
  color: var(--btn-hover);
}

.hand-arrow {
  width: clamp(20px, 9cqw, 30px);
  height: auto;
  color: inherit;
}

.hand-heart {
  width: clamp(24px, 10cqw, 34px);
  height: auto;
  color: var(--btn-hover);
  display: block;
  margin: .4rem 0;
}

/* star bullet list — Current Obsessions */
.sb-list {
  list-style: none;
  margin: 0 0 .5rem;
  padding: 0;
  font-family: var(--font-hand-body);
  font-size: clamp(.65rem, 3.8cqw, .9rem);
  line-height: 1.5;
  color: var(--ink);
}

.sb-list li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: .6rem;
}

.sb-list li:last-child {
  margin-bottom: 0;
}

.sb-list li::before {
  content: "\2605";
  position: absolute;
  left: 0;
  top: -.05rem;
  color: var(--pink-line);
  font-size: .78rem;
}

/* =========================================================
   DESKTOP-ONLY MOODBOARD TWEAKS
   Everything below is scoped to min-width:768px so mobile
   keeps its current look untouched. Each column gets its own
   custom properties (set inline in the HTML) so shift/scale/
   rotation/margin can be dialed in per-tile independently:
     --dt-mt        column top-margin nudge, e.g. -10px
     --dt-scale     image scale multiplier, e.g. 1.2 for +20%
     --tile-r-desktop   overrides --tile-r just on desktop
     --dt-shift-x   horizontal nudge for the whole tile
     --overlay-r-desktop  overrides --overlay-r just on desktop
   Any property left unset simply falls back to the existing
   mobile value, so a column only needs the properties it uses.
   ========================================================= */
@media (min-width: 768px) {
  .sb-col {
    margin-top: var(--dt-mt, 0px);
  }

  .sb-tile {
    transform: rotate(var(--tile-r-desktop, var(--tile-r, 0deg))) translateX(var(--dt-shift-x, 0px));
  }

  /* image scale/rotation adjustments — R1 C1 has no .sb-tile-media, so it's
     automatically excluded */
  .sb-tile-media {
    transform: scale(var(--dt-scale, 1));
    transform-origin: center;
  }

  .sb-tile-overlay {
    transform: rotate(var(--overlay-r-desktop, var(--overlay-r, 0deg)));
  }

  /* R1 C1 headline — sized so "Welcome to my world" still fits on two
     lines inside the narrow desktop column instead of wrapping to three */
  .sb-headline-hero {
    font-size: clamp(1.8rem, 9cqw, 2.5rem);
  }
}

/* R1 C1 — white body copy on every screen size (mobile + desktop).
   Signature stays pink via --btn-hover, already set unconditionally. */
.sb-tile-plain .sb-body {
  color: #fff;
}

/* =========================================================
   TAPE_001 — reusable washi label. Uses the real scanned
   tape assets (CTA-Tape-Pink / White / Black); pick the
   color with a modifier class: .tape-pink / .tape-white / .tape-black
   ========================================================= */
.tape-001 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  padding: 1rem 1.6rem;
  background-image: var(--tape-img);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 5px 10px rgba(3, 25, 64, .28));
  color: var(--ink);
}

.tape-001.tape-pink {
  --tape-img: url('../img/CTA-Tape-Pink.png');
  color: var(--ink);
}

.tape-001.tape-white {
  --tape-img: url('../img/CTA-Tape-White.png');
  color: var(--ink);
}

.tape-001.tape-black {
  --tape-img: url('../img/CTA-Tape-Black.png');
  color: #fdf8f1;
}

.tape-text {
  position: relative;
  font-family: var(--font-hand-body);
  font-size: clamp(.6rem, 3.4cqw, .82rem);
  line-height: 1.3;
  margin: 0;
  text-align: center;
}

.tape-001 .sb-cta-line {
  position: relative;
  margin-top: 0;
}

/* tape tucked inside the bottom of an image */
.sb-tape-inset {
  position: absolute;
  left: 50%;
  bottom: 9%;
  transform: translateX(-50%);
  z-index: 2;
}

/* tape whose vertical center straddles the image's bottom edge */
.sb-tape-straddle {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, -50%);
  z-index: 3;
}

/* tape placed just below an image, still inside the tile */
.sb-tape-below {
  display: flex;
  justify-content: center;
  margin-top: -.6rem;
  position: relative;
  z-index: 2;
}

/* =========================================================
   HANDWRITTEN REVEAL — text "writes itself in" as it enters
   the viewport (used on every scrapbook text element)
   ========================================================= */
.handwrite {
  animation: handwriteIn .9s ease both;
  animation-delay: var(--tile-delay, 0s);
}

@keyframes handwriteIn {
  0% {
    opacity: 0;
    clip-path: inset(0 100% -25% 0);
  }

  8% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0% -25% 0);
  }
}

.sb-overlay-inner .handwrite:nth-child(1),
.sb-tile-plain .handwrite:nth-child(1) {
  animation-delay: calc(var(--tile-delay, 0s) + .05s);
}

.sb-overlay-inner .handwrite:nth-child(2),
.sb-tile-plain .handwrite:nth-child(2) {
  animation-delay: calc(var(--tile-delay, 0s) + .2s);
}

.sb-overlay-inner .handwrite:nth-child(3),
.sb-tile-plain .handwrite:nth-child(3) {
  animation-delay: calc(var(--tile-delay, 0s) + .35s);
}

.sb-overlay-inner .handwrite:nth-child(4),
.sb-tile-plain .handwrite:nth-child(4) {
  animation-delay: calc(var(--tile-delay, 0s) + .5s);
}

.sb-overlay-inner .handwrite:nth-child(5),
.sb-tile-plain .handwrite:nth-child(5) {
  animation-delay: calc(var(--tile-delay, 0s) + .65s);
}

.sb-overlay-inner .handwrite:nth-child(6),
.sb-tile-plain .handwrite:nth-child(6) {
  animation-delay: calc(var(--tile-delay, 0s) + .8s);
}

@media (max-width: 767px) {
  .sb-tile {
    transform: none;
  }

  .sb-tile:hover {
    transform: none;
  }
}

/* =========================================================
   HOME 2 — full-bleed photo hero with marker doodles
   ========================================================= */
.doodle-hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  margin-top: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 0;
}

.doodle-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 3rem clamp(1rem, 6vw, 5rem) 4rem;
}

.doodle-line1 {
  font-family: var(--font-hand);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  color: var(--ink);
  border-bottom: 3px solid var(--btn-hover);
  display: inline-block;
  padding-bottom: .15rem;
}

.doodle-line2 {
  font-family: var(--font-hand);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  color: var(--btn-hover);
  display: block;
  margin-top: .4rem;
}

.doodle-line2 u {
  text-decoration-color: var(--ink);
}

.doodle-arrow {
  font-size: 2rem;
  color: var(--ink);
  display: inline-block;
  animation: bob 1.6s ease-in-out infinite;
}


/* responsive helpers */
@media (max-width: 767px) {
  .rain-nav .navbar-brand img {
    height: 42px;
  }

  .page-header {
    padding: 2.2rem 0 1.4rem;
  }
}