/* ============================================================
   APPRECIATION PAGE — wall of thanks + about letter
   ============================================================ */

/* Warm baseline palette (era-1 feel — matches search page) */
:root {
  --color-bg:               #f5e6c8;
  --color-bg-alt:           #e8d5a3;
  --color-text:             #2c1810;
  --color-accent:           #c0392b;
  --color-accent-secondary: #8b2015;
  --font-heading:           'Bebas Neue', sans-serif;
  --font-body:              'Courier Prime', serif;
  --border-radius:          0px;
}

/* Subtle paper-grain background for the whole page so the polaroids
   sit on something that feels like a corkboard / scrapbook page. */
body {
  background-color: var(--color-bg);
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.018) 0 1px,
      transparent 1px 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.014) 0 1px,
      transparent 1px 5px
    );
}

/* ── Page layout ─────────────────────────────────────────── */

.apprec-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-2xl);
}

/* ── Page intro ──────────────────────────────────────────── */

.apprec-intro {
  text-align: center;
  margin-bottom: var(--space-2xl);
  position: relative;
}

.apprec-intro__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.apprec-intro__title {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-3xl), 9vw, var(--text-4xl));
  line-height: 1;
  color: var(--color-text);
  margin: 0 0 var(--space-md);
  letter-spacing: 0.04em;
}

.apprec-intro__lede {
  max-width: 56ch;
  margin: 0 auto;
  font-size: var(--text-lg);
  line-height: 1.6;
  opacity: 0.85;
}

/* Decorative rule under the intro */
.apprec-intro::after {
  content: '';
  display: block;
  width: clamp(120px, 32vw, 360px);
  height: 1px;
  background: var(--color-accent);
  opacity: 0.5;
  margin: var(--space-xl) auto 0;
}

/* ── Section heading ─────────────────────────────────────── */

.apprec-section {
  margin-bottom: var(--space-2xl);
}

.apprec-section__heading {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  letter-spacing: 0.06em;
  color: var(--color-text);
  margin-bottom: var(--space-xl);
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
}

.apprec-section__heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-accent);
  opacity: 0.35;
}

/* ── Wall of thanks (polaroid grid) ──────────────────────── */

.apprec-wall {
  list-style: none;
  margin: 0;
  padding: var(--space-lg) 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-2xl) var(--space-xl);
  /* extra side padding so rotated cards don't clip the column edge */
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

/* Polaroid card. Each card has its own --tilt set inline so the
   rotation is varied across the wall. */
.apprec-card {
  position: relative;
  background: #fffaf0;
  padding: 14px 14px 56px; /* fat bottom for the caption */
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.05) inset,
    0 14px 28px rgba(0, 0, 0, 0.18),
    0 4px 8px rgba(0, 0, 0, 0.12);
  transform: rotate(var(--tilt, 0deg));
  transition: transform var(--transition-normal),
              box-shadow var(--transition-normal);
  font-family: var(--font-body);
  color: var(--color-text);
}

/* Sticky-tape strip at the top of every polaroid */
.apprec-card::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(var(--tape-tilt, -2deg));
  width: 90px;
  height: 22px;
  background: rgba(255, 240, 180, 0.75);
  border: 1px solid rgba(180, 150, 60, 0.25);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  pointer-events: none;
  /* faint horizontal stripes to suggest matt-finish tape */
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.4) 0 2px,
    transparent 2px 5px
  );
}

.apprec-card:hover,
.apprec-card:focus-within {
  transform: rotate(0deg) translateY(-6px) scale(1.02);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.05) inset,
    0 22px 38px rgba(0, 0, 0, 0.22),
    0 6px 12px rgba(0, 0, 0, 0.14);
  z-index: 2;
}

/* "Photo" area — a coloured initials tile. Different hue per card
   via --photo-hue keeps the wall visually varied without needing
   real headshots. */
.apprec-card__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background:
    linear-gradient(
      135deg,
      hsl(var(--photo-hue, 20) 55% 55%),
      hsl(calc(var(--photo-hue, 20) + 30) 50% 35%)
    );
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: var(--space-md);
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.apprec-card__photo::after {
  /* Subtle paper grain over the photo so it doesn't read as flat. */
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.04) 0 1px,
    transparent 1px 3px
  );
  pointer-events: none;
}

.apprec-card__initials {
  font-family: var(--font-heading);
  font-size: 4rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.apprec-card__name {
  font-family: 'Caveat', 'Courier Prime', cursive;
  font-size: 1.7rem;
  line-height: 1.05;
  color: var(--color-text);
  margin: 0 0 4px;
  /* Hand-written caption feel */
  letter-spacing: 0.01em;
}

.apprec-card__role {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.apprec-card__blurb {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text);
  opacity: 0.85;
  margin-bottom: var(--space-sm);
}

/* Link list rendered as small stamp-like badges */
.apprec-card__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
}

.apprec-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
  padding: 3px 8px;
  border: 1px dashed var(--color-accent);
  border-radius: 2px;
  transition: background var(--transition-fast),
              color var(--transition-fast);
}

.apprec-card__link:hover,
.apprec-card__link:focus-visible {
  background: var(--color-accent);
  color: var(--color-bg);
  outline: none;
}

/* Per-card variations — applied via :nth-child so we don't need
   inline styles. Cycles through 6 rotations + hues. */
.apprec-card:nth-child(6n+1) { --tilt:  -2.4deg; --tape-tilt: -3deg; --photo-hue:  20; }
.apprec-card:nth-child(6n+2) { --tilt:   1.8deg; --tape-tilt:  4deg; --photo-hue: 200; }
.apprec-card:nth-child(6n+3) { --tilt:  -1.1deg; --tape-tilt: -1deg; --photo-hue: 280; }
.apprec-card:nth-child(6n+4) { --tilt:   2.6deg; --tape-tilt:  2deg; --photo-hue: 140; }
.apprec-card:nth-child(6n+5) { --tilt:  -3.0deg; --tape-tilt: -4deg; --photo-hue:  40; }
.apprec-card:nth-child(6n+6) { --tilt:   0.9deg; --tape-tilt:  3deg; --photo-hue: 340; }

/* ── With thanks (compact note cards) ────────────────────── */

/* Smaller, photo-less counterpart to the polaroid wall: these read
   as little index cards pinned below the main contributors, so the
   wall above stays the focal point. */
.apprec-notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-lg);
}

.apprec-note {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: #fffaf0;
  padding: var(--space-md) var(--space-md) var(--space-md) calc(var(--space-md) + 6px);
  font-family: var(--font-body);
  color: var(--color-text);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.04) inset,
    0 4px 10px rgba(0, 0, 0, 0.10);
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast);
}

/* Ruled margin line down the left edge, like a note card */
.apprec-note::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 6px;
  width: 1px;
  background: var(--color-accent);
  opacity: 0.35;
}

.apprec-note:hover,
.apprec-note:focus-within {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.04) inset,
    0 10px 20px rgba(0, 0, 0, 0.16);
}

.apprec-note__name {
  font-family: 'Caveat', 'Courier Prime', cursive;
  font-size: 1.35rem;
  line-height: 1.1;
  margin: 0;
}

.apprec-note__line {
  font-size: 0.85rem;
  line-height: 1.5;
  opacity: 0.85;
  margin: 0;
}

.apprec-note__link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
  padding: 2px 7px;
  margin-top: 2px;
  border: 1px dashed var(--color-accent);
  border-radius: 2px;
  transition: background var(--transition-fast),
              color var(--transition-fast);
  /* Long domains shouldn't blow out the grid column */
  max-width: 100%;
  overflow-wrap: anywhere;
}

.apprec-note__link:hover,
.apprec-note__link:focus-visible {
  background: var(--color-accent);
  color: var(--color-bg);
  outline: none;
}

/* ── About section (typewriter letter) ───────────────────── */

.apprec-letter {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-2xl) clamp(var(--space-lg), 6vw, var(--space-2xl));
  background: #fdf6e3;
  /* Faint ruled lines so it reads as a sheet of letter paper */
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0 31px,
      rgba(60, 40, 20, 0.12) 31px 32px
    );
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.12);
  transform: rotate(-0.4deg);
  /* Torn-edge feel via clip-path (top + bottom) */
  --tear: polygon(
    0% 0.5%, 6% 0%, 12% 0.6%, 20% 0%, 28% 0.7%, 36% 0%, 44% 0.6%,
    52% 0%, 60% 0.7%, 68% 0%, 76% 0.6%, 84% 0%, 92% 0.7%, 100% 0%,
    100% 99.5%, 94% 100%, 86% 99.4%, 78% 100%, 70% 99.3%, 62% 100%,
    54% 99.5%, 46% 100%, 38% 99.4%, 30% 100%, 22% 99.5%, 14% 100%,
    6% 99.4%, 0% 100%
  );
  clip-path: var(--tear);
}

/* Tape on the top corners of the letter */
.apprec-letter::before,
.apprec-letter::after {
  content: '';
  position: absolute;
  top: -14px;
  width: 110px;
  height: 26px;
  background: rgba(255, 240, 180, 0.78);
  border: 1px solid rgba(180, 150, 60, 0.3);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

.apprec-letter::before { left: 8%;  transform: rotate(-6deg); }
.apprec-letter::after  { right: 8%; transform: rotate( 5deg); }

.apprec-letter__heading {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  letter-spacing: 0.08em;
  color: var(--color-text);
  margin: 0 0 var(--space-md);
  text-align: center;
}

.apprec-letter__heading::after {
  content: '';
  display: block;
  width: 120px;
  height: 1px;
  background: var(--color-accent);
  opacity: 0.5;
  margin: var(--space-sm) auto 0;
}

.apprec-letter__body {
  font-family: 'Special Elite', 'Courier Prime', 'Courier New', monospace;
  font-size: 1rem;
  line-height: 32px; /* match the ruled-line spacing */
  color: #2a1a08;
}

.apprec-letter__body p {
  margin-bottom: var(--space-md);
}

.apprec-letter__body p:last-child {
  margin-bottom: 0;
}

.apprec-letter__signoff {
  margin-top: var(--space-xl);
  font-family: 'Caveat', 'Courier Prime', cursive;
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--color-accent);
  text-align: right;
}

.apprec-letter__signoff small {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0.6;
  margin-top: 4px;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 600px) {
  .apprec-page { padding: var(--space-lg) var(--space-md) var(--space-xl); }
  .apprec-wall {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  /* Straighten cards on mobile — rotation gets cramped in a 1-col stack */
  .apprec-card { transform: none; }
  .apprec-card:hover { transform: translateY(-4px) scale(1.01); }
  .apprec-notes { grid-template-columns: 1fr; gap: var(--space-md); }
  .apprec-letter { transform: none; padding: var(--space-xl) var(--space-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .apprec-card,
  .apprec-card:hover { transform: none; transition: none; }
  .apprec-note,
  .apprec-note:hover { transform: none; transition: none; }
  .apprec-letter { transform: none; }
}