/* ============================================================
   Theme: KitchenGravure — aligned on the Figma template
   Coral bg, white cards, rust #a2270b, 8px radius,
   soft diagonal shadow (rust 30%), Rockwell/Elephant/Arial.
   Loaded last, so its rules win.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;600;700;800&display=swap');

/* Self-hosted display fonts (drop the files in extra/custom-assets/).
   Until present, the stacks below fall back to Roboto Slab. */
@font-face {
  font-family: 'Rockwell';
  src: url('extra/custom-assets/rockwell.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Elephant';
  src: url('extra/custom-assets/elephant.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --kg-bg:     #f08460; /* coral background        */
  --kg-card:   #ffffff; /* white cards / buttons   */
  --kg-rust:   #a2270b; /* primary rust            */
  --kg-date:   #c36748; /* date block terracotta   */
  --kg-ink:    #23201e; /* dark text / subtitles   */
  --kg-shadow: rgba(162, 39, 11, .30); /* soft diagonal shadow */

  --kg-serif:   'Rockwell', 'Roboto Slab', Georgia, serif;   /* titles, buttons, dates, handle */
  --kg-display: 'Elephant', 'Roboto Slab', Georgia, serif;   /* section titles */
  --kg-sans:    Arial, system-ui, -apple-system, sans-serif; /* subtitles */
}

/* Background + base typography */
body {
  color: var(--kg-ink) !important;
  background-color: var(--kg-bg) !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  border-left: 0;
  border-right: 0;
  font-family: var(--kg-serif) !important;
}

/* Handle (@name) — Rockwell rust, centered */
h1 {
  font-family: var(--kg-serif) !important;
  color: var(--kg-rust) !important;
  text-align: center;
  letter-spacing: -0.02em;
}

/* Bio / description */
.description, .bio, .description-parent p {
  font-family: var(--kg-sans) !important;
  color: var(--kg-ink) !important;
}

/* Section titles (heading block) — Elephant, uppercase, left-aligned, gap above */
.fadein > h2 {
  font-family: var(--kg-display) !important;
  color: var(--kg-ink) !important;
  text-transform: uppercase;
  font-size: 19px !important;
  font-weight: 300 !important;
  letter-spacing: -0.19px;
  text-align: left;
  margin-top: 34px !important;
  margin-bottom: 6px !important;
}

/* Rounded avatar with a white ring */
.rounded-avatar { border-radius: 50%; }
#avatar {
  border: 4px solid var(--kg-card) !important;
  box-shadow: 2px 2px 0 0 var(--kg-shadow) !important;
}

/* Social icons → rust */
.social-icon {
  font-size: 32px;
  padding: 10px;
  color: var(--kg-rust) !important;
}
.social-icon-div { padding-bottom: 30px; }

/* Classic LinkStack buttons (fallback) — aligned tokens */
.button,
button {
  display: inline-block;
  margin-bottom: 20px;
  padding: 16px 20px;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--kg-serif) !important;
  border-radius: 8px !important;
  border: 1px solid var(--kg-rust) !important;
  text-decoration: none;
  color: #000 !important;
  background-color: var(--kg-card) !important;
  box-shadow: 2px 2px 0 0 var(--kg-shadow) !important;
  word-wrap: break-word;
  width: 300px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.button:hover,
.button:focus {
  transform: scale(1.02);
  box-shadow: 3px 3px 0 0 var(--kg-shadow) !important;
  outline: 0;
}
.button .icon,
.button i { color: var(--kg-rust) !important; }

/* Image cards (imagecard block) */
.imagecard {
  border: 1px solid var(--kg-rust) !important;
  box-shadow: 2px 2px 0 0 var(--kg-shadow) !important;
  margin-bottom: 20px !important;
}
.imagecard:hover {
  box-shadow: 3px 3px 0 0 var(--kg-shadow) !important;
}
.imagecard__title {
  font-family: var(--kg-serif) !important;
  color: var(--kg-rust) !important;
}
.imagecard__subtitle {
  font-family: var(--kg-sans) !important;
  color: var(--kg-ink) !important;
}

/* Hide the share button */
.sharediv { display: none !important; }

/* No entrance animations — everything shows immediately */
.fadein,
.button-entrance,
.social-icon-div,
.description-parent,
[class*="fadein"] {
  opacity: 1 !important;
  animation: none !important;
  -webkit-animation: none !important;
  transform: none !important;
}