/* ============================================================
   Resume builder — design tokens & primitives
   Editorial: monochrome + one accent. Weights 400/500 only.
   ============================================================ */

:root {
  /* Surface — warm paper, with a real step between bg and elevated.
     The deeper bg lets pure-white cards visibly "rise" off the page. */
  --bg: #F1ECDC;
  --bg-elevated: #FFFFFF;
  --bg-muted: #E6DFC9;
  --bg-deep: #D3C8AC;

  /* Text — deeper for confident reading; muted reads as ink, not haze */
  --text: #0E0B07;
  --text-muted: #45413A;
  --text-faint: #847C6C;

  /* Borders — clearly visible against warm cream, no mystery hairlines */
  --border: rgba(35, 25, 15, 0.16);
  --border-strong: rgba(35, 25, 15, 0.32);

  /* Primary accent — deeper, more saturated rust; great contrast on cream */
  --accent:        #A53718;
  --accent-deep:   #5E1F08;
  --accent-bright: #D45A2E;
  --accent-soft:   #F4DCC2;
  --accent-glow:   rgba(165, 55, 24, 0.18);

  /* Secondary accent — calm teal, used very sparingly */
  --accent2:       #134D5B;
  --accent2-soft:  #D3E1E6;
  --accent2-glow:  rgba(19, 77, 91, 0.16);

  /* Status */
  --success: #335F0A;
  --success-soft: #E3EFD0;
  --danger: #7A1313;

  /* Subtle highlight (used on hover ribbons / focus) */
  --highlight: #F0DFB0;

  /* Elevation — soft warm shadows so cards float without halos */
  --shadow-sm:  0 1px 2px rgba(40, 28, 14, 0.05);
  --shadow-card: 0 1px 2px rgba(40, 28, 14, 0.05), 0 4px 14px rgba(40, 28, 14, 0.06);
  --shadow-pop:  0 6px 18px rgba(40, 28, 14, 0.10), 0 18px 40px rgba(40, 28, 14, 0.10);

  --radius: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Menlo", monospace;
  --font-serif: "EB Garamond", Georgia, serif;

  /* Paper texture — a touch more presence so the warm cream reads as paper,
     not flat fill. Still well below text contrast threshold. */
  --texture:
    radial-gradient(1200px 600px at 0% 0%, rgba(165,55,24,0.045), transparent 62%),
    radial-gradient(900px 500px at 100% 100%, rgba(19,77,91,0.04), transparent 62%);
}

/* Dark vars — neutral charcoal (not warm/sepia), high readable contrast. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #16171A;
    --bg-elevated: #1E1F23;
    --bg-muted:    #26272C;
    --bg-deep:     #2E3036;
    --text:        #F4F4F0;
    --text-muted:  #BFBDB6;
    --text-faint:  #8B8985;
    --border:        rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.22);
    --accent:        #FF8054;
    --accent-deep:   #E26240;
    --accent-bright: #FFA17E;
    --accent-soft:   rgba(255, 128, 84, 0.16);
    --accent-glow:   rgba(255, 128, 84, 0.28);
    --accent2:       #7EB6CC;
    --accent2-soft:  rgba(126, 182, 204, 0.16);
    --accent2-glow:  rgba(126, 182, 204, 0.24);
    --success:       #A0D766;
    --success-soft:  rgba(160, 215, 102, 0.16);
    --danger:        #F19292;
    --highlight:     rgba(255, 220, 150, 0.08);
    /* In dark mode shadows become darker halos around lifted surfaces */
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.40), 0 6px 18px rgba(0, 0, 0, 0.35);
    --shadow-pop:  0 8px 22px rgba(0, 0, 0, 0.55), 0 20px 48px rgba(0, 0, 0, 0.50);
    --texture:
      radial-gradient(1200px 600px at 0% 0%, rgba(255,128,84,0.04), transparent 60%),
      radial-gradient(900px 500px at 100% 100%, rgba(126,182,204,0.04), transparent 60%);
  }
}
:root[data-theme="dark"] {
  --bg:          #16171A;
  --bg-elevated: #1E1F23;
  --bg-muted:    #26272C;
  --bg-deep:     #2E3036;
  --text:        #F4F4F0;
  --text-muted:  #BFBDB6;
  --text-faint:  #8B8985;
  --border:        rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.22);
  --accent:        #FF8054;
  --accent-deep:   #E26240;
  --accent-bright: #FFA17E;
  --accent-soft:   rgba(255, 128, 84, 0.16);
  --accent-glow:   rgba(255, 128, 84, 0.28);
  --accent2:       #7EB6CC;
  --accent2-soft:  rgba(126, 182, 204, 0.16);
  --accent2-glow:  rgba(126, 182, 204, 0.24);
  --success:       #A0D766;
  --success-soft:  rgba(160, 215, 102, 0.16);
  --danger:        #F19292;
  --highlight:     rgba(255, 220, 150, 0.08);
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.40), 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-pop:  0 8px 22px rgba(0, 0, 0, 0.55), 0 20px 48px rgba(0, 0, 0, 0.50);
  --texture:
    radial-gradient(1200px 600px at 0% 0%, rgba(255,128,84,0.04), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(126,182,204,0.04), transparent 60%);
}

/* ============================================================
   STYLE LAYER — applied via [data-style="X"] independent of theme.
   Theme controls colour tokens. Style controls structural tokens
   (radii, fonts) and toggles ornament visibility via the cascade.
   All structural tokens are designed to work on top of any theme.
   ============================================================ */

/* Modern style: softer radii, sans-first typography, mesh background,
   no editorial ornaments. Works on both light and dark themes. */
:root[data-style="modern"] {
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  /* Three-point mesh gradient — the trademark "modern app" backdrop.
     Uses currentColor-relative tints from --accent / --accent2 so the
     mesh re-tints itself on dark theme. */
  --texture:
    radial-gradient(800px 500px at 8% 0%, var(--accent-glow), transparent 60%),
    radial-gradient(700px 600px at 100% 12%, var(--accent2-glow), transparent 65%),
    radial-gradient(900px 700px at 60% 100%, var(--accent-glow), transparent 60%);
}

/* Minimal style: hairlines reduced to near-invisible, no shadows,
   tight type, no ornament — pure structure. */
:root[data-style="minimal"] {
  --radius:    4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --shadow-sm:   none;
  --shadow-card: none;
  --shadow-pop:  0 6px 18px rgba(0, 0, 0, 0.08);
  --texture: none;
}

/* Reset */
[x-cloak] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  /* Safety net: nothing should ever cause a horizontal scrollbar.
     `overflow-x: clip` (not `hidden`) so we don't establish a containing block
     that would break `position: sticky` on inner elements like .pf-section-meta. */
  overflow-x: clip;
  max-width: 100vw;
}

/* iOS Safari auto-zooms into any input/textarea/select whose computed
   font-size is below 16px. The zoom doesn't reset on blur — the page
   stays scaled until the user pinches out. Globally enforce 16px+ on
   all form controls below the 760px breakpoint to suppress it.
   The :where() wrapper keeps specificity at 0 so component styles still
   override visually elsewhere; the font-size still wins because the
   medium-specific rule overrides them on phone. */
@media (max-width: 760px) {
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"])),
  :where(textarea),
  :where(select) {
    font-size: 16px !important;
  }
}
html {
  background: var(--bg);
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Focus ring — accent-colored, glow, never harsh ---- */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  border-radius: var(--radius);
}
.rb-input:focus-visible, .rb-textarea:focus-visible,
.lg-input:focus-visible, .bd-input:focus-visible, .bd-textarea:focus-visible,
.rb-search-input:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-glow);
  border-color: var(--accent);
}
a:focus-visible, button:focus-visible, summary:focus-visible {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-glow);
}

/* ---- Skip-to-content link — invisible until tab-focused ---- */
.rb-skip {
  position: absolute;
  top: -40px;
  left: 12px;
  z-index: 1000;
  background: var(--accent);
  color: #fff;
  padding: 8px 14px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 12px;
  text-decoration: none;
  transition: top 200ms;
}
.rb-skip:focus { top: 12px; }
body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  background-image: var(--texture);
  background-attachment: fixed;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
}
::selection {
  background: var(--accent-glow);
  color: var(--text);
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

/* Mono micro-label */
.rb-mono { font-family: var(--font-mono); letter-spacing: 0.02em; }
.rb-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 400;
}

/* Buttons */
.rb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  transition: background 160ms, border-color 160ms, color 160ms, transform 160ms, box-shadow 160ms;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}
.rb-btn:hover {
  /* IMPORTANT: use background-color (not the `background` shorthand) so
     we don't erase the rust gradient that .rb-btn-primary sets via
     background-image. Otherwise primary buttons turn white on hover and
     their white text becomes invisible. */
  background-color: var(--bg-elevated);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}
.rb-btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  background-image: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 1px 2px rgba(80, 20, 5, 0.18),
    0 4px 10px var(--accent-glow);
}
.rb-btn-primary:hover {
  filter: brightness(1.08);
  color: #fff;
  border-color: var(--accent-deep);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 4px 16px var(--accent-glow),
    0 10px 24px rgba(80, 20, 5, 0.16);
}
.rb-btn-ghost { border-color: transparent; background: transparent; box-shadow: none; }
.rb-btn-ghost:hover { background: var(--bg-muted); border-color: transparent; box-shadow: none; transform: none; }
.rb-btn-danger { color: var(--danger); border-color: transparent; background: transparent; box-shadow: none; }
.rb-btn-danger:hover { background: var(--bg-muted); border-color: transparent; color: var(--danger); box-shadow: none; transform: none; }
.rb-btn-sm { padding: 5px 10px; font-size: 11px; }

/* Pills */
.rb-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--radius);
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
}
.rb-pill-success { background: var(--success-soft); color: var(--success); }
.rb-pill-accent  { background: var(--accent-soft);  color: var(--accent);  }
.rb-pill-dot::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

/* Inputs */
.rb-input,
.rb-textarea {
  width: 100%;
  background: transparent;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  transition: border-color 120ms, background 120ms;
}
.rb-input:focus, .rb-textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.rb-textarea { resize: vertical; min-height: 60px; line-height: 1.6; }

.rb-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}

.rb-card {
  background: var(--bg-elevated);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.rb-rule {
  height: 0.5px;
  background: var(--border-strong);
  width: 100%;
}

/* Icons */
.rb-icon {
  width: 16px;
  height: 16px;
  stroke-width: 1.25;
  fill: none;
  stroke: currentColor;
  flex-shrink: 0;
}
.rb-icon-sm { width: 12px; height: 12px; }

/* Drop cap */
.rb-dropcap::first-letter {
  font-family: var(--font-serif);
  font-size: 3.4em;
  float: left;
  line-height: 0.9;
  padding: 0.06em 0.12em 0 0;
  font-weight: 400;
  color: var(--accent);
}

/* Scrollbar */
.rb-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.rb-scroll::-webkit-scrollbar-track { background: transparent; }
.rb-scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}

/* ============================================================
   PORTFOLIO (public page)  —  rich editorial layout
   ============================================================ */
.pf {
  max-width: 880px;
  margin: 0 auto;
  padding: 56px 60px 120px;
  color: var(--text);
  position: relative;
}
/* Decorative rules — paper-feel header strip */
.pf::before {
  content: "";
  position: absolute;
  left: 60px; right: 60px;
  top: 30px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--accent) 18%, var(--accent) 22%, var(--border-strong) 22%, var(--border-strong) 78%, transparent);
  pointer-events: none;
}
.pf::after {
  /* Double-line variant just below */
  content: "";
  position: absolute;
  left: 60px; right: 60px;
  top: 33px;
  height: 0.5px;
  background: linear-gradient(to right, transparent, var(--border) 20%, var(--border) 80%, transparent);
  pointer-events: none;
}
.pf-eyebrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  text-transform: lowercase;
  margin-bottom: 36px;
  padding-top: 12px;
}
.pf-eyebrow > span:first-child::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Header — photo + name + contacts + actions */
.pf-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: start;
  padding-bottom: 30px;
  border-bottom: 0.5px solid var(--border-strong);
  margin-bottom: 28px;
}
.pf-header-main {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  align-items: start;
  min-width: 0;
}
.pf-photo-wrap {
  width: 96px;
  height: 96px;
  position: relative;
}
.pf-photo-wrap::before {
  /* Dashed offset ring */
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 0.5px dashed var(--accent);
  opacity: 0.5;
  pointer-events: none;
}
.pf-photo-wrap::after {
  /* Small accent dot orbit indicator (top-right) */
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  background: var(--accent);
  border-radius: 50%;
  top: -2px;
  right: -2px;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--accent-glow);
}
.pf-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 0.5px solid var(--border-strong);
  background: linear-gradient(135deg, var(--bg-muted) 0%, var(--accent-soft) 100%);
  display: block;
  position: relative;
  z-index: 1;
}
.pf-photo-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 36px;
  color: var(--accent);
  background: linear-gradient(135deg, var(--bg-muted) 0%, var(--accent-soft) 100%);
  border: 0.5px solid var(--border-strong);
}
.pf-header-text { min-width: 0; }
.pf-name {
  font-family: var(--font-serif);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 4px 0 10px;
  color: var(--text);
  position: relative;
}
.pf-name::first-letter {
  /* Subtle drop-style emphasis on first letter */
  color: var(--accent);
}
.pf-headline {
  font-family: var(--font-serif);
  font-size: 17px;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.4;
  max-width: 460px;
  margin-bottom: 18px;
  letter-spacing: -0.005em;
}
.pf-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 8px;
  font-size: 13px;
}
.pf-contact-row a,
.pf-contact-row .pf-c-static {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  transition: color 120ms;
  line-height: 1.4;
}
.pf-contact-row a:hover { color: var(--accent); }
.pf-c-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  transition: color 120ms;
}
.pf-contact-row a:hover .pf-c-icon { color: var(--accent); }
.pf-c-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pf-facts {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.pf-header-aside { padding-top: 4px; }
.pf-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.pf-actions .rb-btn { padding: 8px 14px; font-size: 13px; }
.rb-btn-icon {
  width: 34px;
  padding: 0;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Languages section: tighter vertical rhythm (smaller padding than usual sections) */
/* Languages as small pill chips inside the header (pf-header-text).
   Each chip: name + tiny dot strength meter, like a compact tag.
   Lighter visual weight than a dedicated section. */
.pf-header-langs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.pf-lang-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 0.5px solid var(--border-strong);
  border-radius: 999px;
  font-size: 11px;
  background: var(--bg-elevated);
  transition: border-color 200ms, color 200ms;
}
.pf-lang-chip:hover { border-color: var(--accent2); color: var(--accent2); }
.pf-lang-chip-name {
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.pf-lang-chip:hover .pf-lang-chip-name { color: var(--accent2); }
.pf-lang-chip-dots {
  display: inline-flex;
  gap: 2px;
}
.pf-lang-chip-dots > span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-strong);
  display: inline-block;
}
.pf-lang-chip-dots > span.on { background: var(--accent2); }
/* Languages strip removed — chips now live inside .pf-header-langs.
   See "pf-header-langs" block below for the new pill-chip styling. */

/* Download dropdown */
.pf-dl { position: relative; }
.pf-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  background: transparent;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.pf-dl-btn:hover { background: var(--bg-muted); border-color: var(--accent); color: var(--accent); }
.pf-dl-btn.is-open { background: var(--bg-muted); border-color: var(--accent); }
.pf-dl-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pf-dl-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--bg-elevated);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 4px;
  min-width: 220px;
  max-width: calc(100vw - 32px);
  z-index: 20;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
/* On phones, .pf-actions stacks to the left (we changed justify on mobile),
   so anchoring the menu with right:0 made it extend off the left edge.
   Flip to left:0 + viewport-safe max-width so it always stays on-screen. */
@media (max-width: 768px) {
  .pf-dl-menu {
    right: auto;
    left: 0;
    min-width: 200px;
    max-width: calc(100vw - 40px);
  }
}
.pf-dl-menu a,
.pf-dl-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}
.pf-dl-menu a:hover,
.pf-dl-menu button:hover { background: var(--bg-muted); color: var(--accent); }
.pf-dl-menu .k {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  width: 24px;
}

/* Tags strip */
.pf-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 16px 0 4px;
  border-bottom: 0.5px solid var(--border);
}
.pf-tag {
  font-size: 12px;
  padding: 4px 12px;
  background: var(--bg-muted);
  color: var(--text);
  border-radius: 999px;
  border: 0.5px solid var(--border-strong);
  transition: border-color 200ms, color 200ms, background 200ms;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pf-tag::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
.pf-tag:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.pf-summary {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.7;
  color: var(--text);
  margin: 32px 0 48px;
  max-width: 62ch;
  position: relative;
  padding-left: 24px;
}
.pf-summary::before {
  /* Editorial pull-quote ribbon */
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.pf-summary::first-letter {
  font-family: var(--font-serif);
  font-size: 2.4em;
  float: left;
  line-height: 0.9;
  padding: 0.06em 0.12em 0 0;
  color: var(--accent);
  font-weight: 400;
}

.pf-section {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 32px;
  padding: 48px 0;
  border-top: 0.5px solid var(--border);
  position: relative;
}
.pf-section:first-of-type { border-top: 0; padding-top: 28px; }
.pf-section::before {
  /* Decorative accent dot in the rule */
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.7;
}
.pf-section:first-of-type::before { display: none; }
.pf-section-meta { padding-top: 8px; position: sticky; top: 24px; align-self: start; }
/* When a sticky top bar (auth bar / public nav) is present, push the
   sticky section meta down so it doesn't slide under the bar. */
.rb-authbar ~ main .pf-section-meta { top: 50px; }
.rb-pubnav  ~ main .pf-section-meta { top: 64px; }
@media (max-width: 760px) {
  .rb-authbar ~ main .pf-section-meta { top: 56px; }
  .rb-pubnav  ~ main .pf-section-meta { top: 60px; }
}

/* Big decorative section number */
.pf-section-num-big {
  font-family: var(--font-serif);
  font-size: 44px;
  line-height: 0.9;
  color: var(--accent);
  font-weight: 400;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
  position: relative;
  display: inline-block;
}
.pf-section-num-big::after {
  content: "";
  display: block;
  width: 32px;
  height: 0.5px;
  background: var(--accent);
  margin-top: 8px;
  opacity: 0.5;
}
.pf-section-num-big::before {
  /* Decorative tiny mark */
  content: "·";
  font-size: 24px;
  color: var(--accent);
  margin-right: 4px;
  opacity: 0.5;
  vertical-align: top;
  line-height: 1;
}
.pf-section-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 6px;
}
.pf-section-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Scroll reveal — subtle */
.pf-reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.pf-reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .pf-reveal { opacity: 1; transform: none; transition: none; }
}

/* Clickable item title with subtle arrow */
.pf-item-link {
  color: inherit;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  transition: color 200ms;
  border-bottom: 0.5px solid transparent;
  padding-bottom: 1px;
}
.pf-item-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.pf-link-arrow {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--text-faint);
  transition: color 200ms, transform 200ms;
  display: inline-block;
}
.pf-item-link:hover .pf-link-arrow {
  color: var(--accent);
  transform: translate(1px, -1px);
}

.pf-cred-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}
.pf-cred-link:hover {
  color: var(--accent2);
  text-decoration: underline;
}

/* Experience cards */
.pf-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 0.5px solid var(--border);
  position: relative;
}
.pf-item:first-child { padding-top: 0; }
.pf-item:last-child  { border-bottom: 0; padding-bottom: 0; }
.pf-item:hover .pf-item-title { color: var(--accent); }
.pf-item-title { transition: color 120ms; }
.pf-period {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  padding-top: 3px;
  text-transform: uppercase;
}
.pf-item-title {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: -0.005em;
  color: var(--text);
}
.pf-item-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.pf-item-desc {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 60ch;
  white-space: pre-line;
}

/* Experience as card (used in carousel mode) */
.pf-item-card {
  display: block;
  background: var(--bg-elevated);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  height: 100%;
}
.pf-item-card:last-child { border-bottom: 0.5px solid var(--border); }

/* Achievements */
.pf-achievements {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pf-stat {
  background: var(--bg-elevated);
  background-image: linear-gradient(135deg, var(--accent-soft) 0%, transparent 60%);
  border: 0.5px solid var(--border);
  padding: 22px 20px 18px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  transition: border-color 200ms, transform 200ms, box-shadow 200ms;
  position: relative;
  overflow: hidden;
}
.pf-stat::after {
  /* Decorative corner serif */
  content: "";
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  pointer-events: none;
}
.pf-stat:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--accent-glow);
}
.pf-stat-num { display: flex; align-items: baseline; gap: 4px; position: relative; z-index: 1; }
.pf-stat-num .v {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--accent);
  line-height: 1;
}
.pf-stat-num .u {
  font-size: 13px;
  color: var(--text-muted);
}
.pf-stat-title {
  font-size: 13px;
  font-weight: 500;
}
.pf-stat-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
}
.pf-plain {
  padding: 12px 0;
  border-bottom: 0.5px solid var(--border);
  grid-column: 1 / -1;
}
.pf-plain:last-child { border-bottom: 0; }
.pf-plain-title { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.pf-plain-desc  { font-size: 12px; color: var(--text-muted); line-height: 1.55; }

/* Skills */
.pf-skill-group { margin-bottom: 16px; }
.pf-skill-group:last-child { margin-bottom: 0; }
.pf-skill-group-name {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 10px;
}
.pf-skill-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-skill-pill {
  background: var(--bg-elevated);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  border: 0.5px solid var(--border-strong);
  transition: border-color 200ms, color 200ms, background 200ms, transform 200ms;
  position: relative;
  letter-spacing: -0.005em;
  user-select: none;
}
.pf-skill-pill:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
}
/* Variant: every 3rd pill in a group has a slight accent (visual rhythm) */
.pf-skill-pill:nth-child(4n+3) {
  background: var(--bg-muted);
  color: var(--text);
}
.pf-skill-group-name {
  /* Switch label color to secondary accent for variety */
  color: var(--accent2);
  font-weight: 500;
  letter-spacing: 0.1em !important;
}

/* About */
.pf-about {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text);
  max-width: 60ch;
  white-space: pre-line;
}

/* Custom */
.pf-custom-item {
  padding: 14px 0;
  border-bottom: 0.5px solid var(--border);
}
.pf-custom-item:last-child { border-bottom: 0; padding-bottom: 0; }
.pf-custom-item:first-child { padding-top: 0; }
.pf-custom-title { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.pf-custom-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.pf-custom-desc {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-muted);
  white-space: pre-line;
}

/* Hero / project cards — big image + meta */
.pf-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) {
  .pf-hero-grid { grid-template-columns: 1fr; }
}
.pf-hero {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-card);
  transition: transform 220ms, border-color 220ms, box-shadow 220ms;
}
a.pf-hero:hover,
.pf-hero-clickable:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-pop), 0 8px 28px var(--accent-glow);
}
.pf-hero-clickable {
  cursor: pointer;
}
.pf-hero-clickable:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.pf-hero-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.pf-hero-cta-link { text-decoration: none; }
.pf-hero-media {
  aspect-ratio: 16/10;
  background-color: var(--bg-muted);
  background-image: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg-muted) 100%);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.pf-hero-placeholder {
  font-family: var(--font-mono);
  font-size: 28px;
  color: var(--accent);
  opacity: 0.5;
}
.pf-hero-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.pf-hero-period {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.pf-hero-title {
  font-family: var(--font-serif);
  font-size: 20px;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 2px;
}
a.pf-hero:hover .pf-hero-title,
.pf-hero-clickable:hover .pf-hero-title { color: var(--accent); }
.pf-hero-sub {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: -0.005em;
  margin-bottom: 6px;
}
.pf-hero-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  margin-top: 4px;
}
.pf-hero-cta {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 0.5px solid var(--border);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.pf-hero-cta-arrow { transition: transform 220ms; }
a.pf-hero:hover .pf-hero-cta-arrow { transform: translate(2px, -2px); }
.pf-hero-clickable:hover .pf-hero-cta-arrow { transform: translate(4px, 0); }

/* ============================================================
   HERO project detail modal — opens on card click when there are
   attachments / a long description.
   ============================================================ */
.pf-hero-modal-bg {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: rb-fadein 180ms ease;
}
@media (max-width: 720px) {
  .pf-hero-modal-bg { padding: 12px; align-items: flex-end; }
}

.pf-hero-modal {
  width: min(720px, 100%);
  max-height: 90vh;
  background: var(--bg-elevated);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-pop), 0 30px 80px rgba(0, 0, 0, 0.40);
  animation: rb-slidein 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
  position: relative;
}

.pf-hero-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 0;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 160ms, transform 160ms;
}
.pf-hero-modal-close:hover { background: var(--accent); transform: scale(1.05); }

.pf-hero-modal-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-muted);
  border-bottom: 0.5px solid var(--border);
  flex-shrink: 0;
}

.pf-hero-modal-body {
  padding: 24px 28px 26px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (max-width: 560px) {
  .pf-hero-modal-body { padding: 20px 18px; }
}

.pf-hero-modal-period {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.pf-hero-modal-title {
  font-family: var(--font-serif);
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--text);
}
.pf-hero-modal-sub {
  font-size: 14px;
  color: var(--text-muted);
  letter-spacing: -0.005em;
  margin-top: -6px;
}
.pf-hero-modal-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 62ch;
}

.pf-hero-modal-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 0.5px solid var(--border);
}
.pf-hero-modal-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Screenshots grid */
.pf-hero-modal-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px;
}
.pf-hero-modal-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--bg-muted);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  transition: transform 200ms, box-shadow 200ms;
}
.pf-hero-modal-thumb:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-card);
}
.pf-hero-modal-thumb-cap {
  position: absolute;
  left: 6px;
  bottom: 6px;
  right: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 3px 6px;
  border-radius: 3px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Files list */
.pf-hero-modal-files {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pf-hero-modal-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  background: var(--bg);
  transition: border-color 160ms, background 160ms, color 160ms;
}
.pf-hero-modal-file:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.pf-hero-modal-file-icon {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.pf-hero-modal-file-name { flex: 1; font-size: 13px; }
.pf-hero-modal-file-size {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}

/* Link list */
.pf-hero-modal-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pf-hero-modal-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  background: var(--bg);
  transition: border-color 160ms, background 160ms, color 160ms;
}
.pf-hero-modal-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.pf-hero-modal-link > span:first-child { color: var(--accent); }
.pf-hero-modal-link-title { font-size: 13px; flex-shrink: 0; }
.pf-hero-modal-link-host {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  flex: 1;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-hero-modal-main {
  margin-top: 8px;
  align-self: flex-start;
  padding: 10px 16px;
}

/* Credentials — clickable cards with in-browser preview */
.pf-creds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pf-cred {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 18px;
  /* Wider left/top padding so the document-icon doesn't visually graze the
     card's rounded corner — gave it ~24px of cream breathing room instead
     of the previous 20px which made the icon look stuck to the edge. */
  padding: 22px 22px 22px 24px;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  background-image: linear-gradient(135deg, transparent 0%, var(--bg-muted) 100%);
  box-shadow: var(--shadow-sm);
  transition: background 200ms, border-color 200ms, transform 200ms, box-shadow 200ms;
  align-items: start;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.pf-cred::before {
  /* Left accent stripe — appears on hover */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: translateX(-3px);
  transition: transform 200ms;
}
.pf-cred::after {
  /* Top-right accent dot — appears on hover */
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transition: opacity 200ms;
}
.pf-cred:hover {
  background-image: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg-elevated) 80%);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card), 0 6px 20px var(--accent-glow);
}
.pf-cred:hover::before { transform: translateX(0); }
.pf-cred:hover::after { opacity: 1; }
.pf-cred:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.pf-cred-icon {
  width: 50px;
  height: 64px;
  background: linear-gradient(180deg, var(--accent-bright) 0%, var(--accent) 60%, var(--accent-deep) 100%);
  border-radius: 5px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #fff;
  position: relative;
  padding-bottom: 8px;
  font-weight: 500;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 1px 0 rgba(0,0,0,0.05);
}
.pf-cred-icon::before {
  /* Folded corner */
  content: "";
  position: absolute;
  top: 0; right: 0;
  border-style: solid;
  border-width: 0 0 14px 14px;
  border-color: transparent transparent rgba(255,255,255,0.25) transparent;
}
.pf-cred-icon::after {
  /* Horizontal "lines" — abstract document feel */
  content: "";
  position: absolute;
  top: 16px;
  left: 8px;
  right: 14px;
  height: 0.5px;
  background: rgba(255,255,255,0.45);
  box-shadow:
    0 5px 0 0 rgba(255,255,255,0.45),
    0 10px 0 0 rgba(255,255,255,0.30);
}
.pf-cred-body { min-width: 0; }
.pf-cred-period {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.pf-cred-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 3px;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.pf-cred-sub   { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; line-height: 1.5; }
.pf-cred-desc  {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 10px;
}
.pf-cred-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 0.5px solid var(--border);
}
.pf-cred-file {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pf-cred-file .arrow { color: var(--accent); font-size: 11px; }
.pf-cred-download {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  text-decoration: none;
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 3px;
  transition: background 120ms, color 120ms;
}
.pf-cred-download:hover {
  background: var(--bg-muted);
  color: var(--text);
}

/* Document preview modal — iframe (PDF) or img */
.pf-doc-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pf-doc-modal-inner {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  width: min(960px, 100%);
  height: min(90vh, 1100px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0.5px solid var(--border-strong);
}
.pf-doc-modal-head {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 0.5px solid var(--border);
  background: var(--bg-elevated);
}
.pf-doc-modal-meta { min-width: 0; flex: 1; }
.pf-doc-modal-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-doc-modal-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
}
.pf-doc-modal-name {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-doc-modal-body {
  flex: 1;
  background: var(--bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0;
}
.pf-doc-modal-body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.pf-doc-modal-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  padding: 16px;
}

/* Gallery */
.pf-gallery-item { margin-bottom: 28px; }
.pf-gallery-item:last-child { margin-bottom: 0; }
.pf-gallery-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}
.pf-gallery-title { font-size: 14px; font-weight: 500; }
.pf-gallery-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.pf-gallery-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 14px;
  max-width: 56ch;
}
.pf-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.pf-thumb {
  aspect-ratio: 4/3;
  background-color: var(--bg-muted);
  background-image: repeating-linear-gradient(45deg,
    color-mix(in oklab, var(--text) 4%, transparent) 0 1px,
    transparent 1px 8px);
  background-position: center;
  background-size: cover;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 120ms;
}
.pf-thumb.warm   { background-color: color-mix(in oklab, var(--accent) 8%, var(--bg-muted)); }
.pf-thumb.cool   { background-color: color-mix(in oklab, #2a3a6b 7%, var(--bg-muted)); }
.pf-thumb:hover  { transform: translateY(-1px); }
.pf-thumb-cap {
  position: absolute;
  left: 8px;
  bottom: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--text);
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 3px;
}
.pf-thumb-num {
  position: absolute;
  right: 8px;
  top: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-faint);
  letter-spacing: 0.06em;
}

/* Lightbox */
.pf-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.86);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pf-lightbox img { max-width: 92vw; max-height: 86vh; object-fit: contain; }
.pf-lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border: 0.5px solid rgba(255,255,255,0.3);
  border-radius: var(--radius);
  cursor: pointer;
  background: transparent;
}
.pf-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 0.5px solid rgba(255,255,255,0.2);
  font-family: var(--font-mono);
  font-size: 18px;
  transition: background 120ms;
}
.pf-lightbox-nav:hover { background: rgba(255,255,255,0.2); }
.pf-lightbox-nav.prev { left: 24px; }
.pf-lightbox-nav.next { right: 24px; }
.pf-lightbox-counter {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.7);
}
.pf-lightbox-caption {
  position: absolute;
  bottom: 22px;
  right: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.8);
  background: rgba(0,0,0,0.4);
  padding: 4px 10px;
  border-radius: 3px;
}
@media (max-width: 640px) {
  .pf-lightbox-nav { width: 38px; height: 38px; }
  .pf-lightbox-nav.prev { left: 8px; }
  .pf-lightbox-nav.next { right: 8px; }
}

/* Video */
.pf-video-item {
  padding: 14px 0;
  border-bottom: 0.5px solid var(--border);
}
.pf-video-item:last-child { border-bottom: 0; }
.pf-video-period {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.pf-video-frame {
  aspect-ratio: 16/9;
  background: #1a1a18;
  background-image: repeating-linear-gradient(45deg,
    rgba(255,255,255,0.04) 0 1px,
    transparent 1px 10px);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
  position: relative;
  margin-bottom: 12px;
  cursor: pointer;
  overflow: hidden;
}
.pf-video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 0%, transparent 0%, rgba(0,0,0,0.4) 100%);
}
.pf-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.pf-video-frame:hover .pf-video-play { background: #fff; }
.pf-video-play svg { width: 22px; height: 22px; }
.pf-video-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 3px 7px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  z-index: 2;
}
.pf-video-source {
  position: absolute;
  left: 10px;
  top: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  z-index: 2;
}
.pf-video-title { font-size: 14px; font-weight: 500; margin-bottom: 3px; }
.pf-video-sub   { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.pf-video-desc  { font-size: 13px; color: var(--text-muted); line-height: 1.55; max-width: 56ch; }

@media (max-width: 768px) {
  .pf-creds { grid-template-columns: 1fr; }
  .pf-thumbs { grid-template-columns: repeat(2, 1fr); }
}

/* Footer */
.pf-footer {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 0.5px solid var(--border-strong);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.05em;
  flex-wrap: wrap;
}
.pf-footer a:hover { color: var(--accent); }
.pf-contacts-row { display: flex; gap: 14px; flex-wrap: wrap; }
.pf-footer-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.pf-footer-sep { color: var(--text-faint); opacity: 0.6; }
.pf-footer-about { color: var(--accent); }

@media (max-width: 880px) {
  .pf { padding: 36px 32px 80px; }
  .pf::before { left: 32px; right: 32px; }
}
@media (max-width: 768px) {
  .pf { padding: 24px 18px 64px; }
  .pf::before { display: none; }
  .pf::after { display: none; }
  .pf-eyebrow { font-size: 9px; margin-bottom: 22px; padding-top: 4px; }

  /* Header: photo above name on phone (block layout) */
  .pf-header { display: block; padding-bottom: 22px; margin-bottom: 28px; }
  .pf-header-main { grid-template-columns: 72px 1fr; gap: 14px; }
  .pf-photo-wrap, .pf-photo, .pf-photo-initials { width: 72px; height: 72px; }
  .pf-photo-initials { font-size: 28px; }
  .pf-name { font-size: 28px; line-height: 1.05; margin: 2px 0 6px; }
  .pf-headline { font-size: 14px; line-height: 1.4; max-width: none; margin-bottom: 8px; }
  .pf-facts { font-size: 10px; }
  .pf-contact-row { gap: 8px 12px; font-size: 11px; }
  .pf-actions { margin-top: 16px; justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
  .pf-actions .rb-btn { padding: 6px 10px; font-size: 12px; }

  /* Sections: single-column, smaller numbers, tighter padding */
  .pf-section { grid-template-columns: 1fr; gap: 12px; padding: 26px 0; }
  .pf-section:first-of-type { padding-top: 16px; }
  .pf-section-meta { position: static; padding-top: 0; }
  .pf-section-num-big { font-size: 22px; margin-bottom: 4px; }
  .pf-section-title { font-size: 11px; }
  .pf-section-num-big::after { width: 24px; }

  /* Items: stack period above content */
  .pf-item { grid-template-columns: 1fr; gap: 4px; }
  .pf-item .pf-period { font-size: 10px; margin-bottom: 2px; }
  .pf-item-title { font-size: 15px; }
  .pf-item-sub { font-size: 13px; }
  .pf-item-desc { font-size: 13.5px; line-height: 1.55; }

  /* Summary: smaller, less margin */
  .pf-summary { font-size: 16px; margin: 18px 0 26px; line-height: 1.55; }
  .pf-summary::before { left: -10px; }
  .pf-summary::first-letter { font-size: 2.0em; padding: 0.04em 0.1em 0 0; }

  /* Achievements/credentials/gallery/video grids */
  .pf-achievements { grid-template-columns: 1fr; gap: 10px; }
  .pf-stat { padding: 14px; }
  .pf-stat-num { font-size: 32px; }
  .pf-creds { grid-template-columns: 1fr; gap: 12px; }
  .pf-cred { padding: 14px; }
  .pf-langs { grid-template-columns: 1fr; gap: 8px; }

  /* Language chips in the header — slightly tighter on phone */
  .pf-header-langs { gap: 4px; margin-top: 8px; }
  .pf-lang-chip { padding: 2px 8px; font-size: 10px; }
  .pf-lang-chip-name { font-size: 10.5px; }

  /* Hero project cards — full-width, smaller padding */
  .pf-hero { padding: 16px; }
  .pf-hero-img-wrap { aspect-ratio: 16 / 9; }
  .pf-hero-title { font-size: 18px; }
  .pf-hero-sub { font-size: 13px; }

  /* Video cards */
  .pf-video-item { padding: 12px 0; }
  .pf-video-title { font-size: 14px; }
  .pf-video-sub { font-size: 11px; }
  .pf-video-thumb { width: 100%; }

  /* Gallery — 2-col grid of thumbs */
  .pf-thumbs { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .pf-gallery-item { padding: 14px 0; }

  /* Skills — looser chips, larger touch */
  .pf-skill-pill { padding: 4px 10px; font-size: 12px; }

  /* Footer */
  .pf-footer { margin-top: 32px; padding-top: 20px; font-size: 10px; }
  .pf-footer-right { justify-content: flex-start; }
}

/* Very narrow phones — even tighter */
@media (max-width: 380px) {
  .pf { padding: 18px 14px 60px; }
  .pf-name { font-size: 24px; }
  .pf-header-main { grid-template-columns: 60px 1fr; gap: 12px; }
  .pf-photo-wrap, .pf-photo, .pf-photo-initials { width: 60px; height: 60px; }
  .pf-photo-initials { font-size: 22px; }
  .pf-summary { font-size: 15px; }
  .pf-section { padding: 22px 0; }
  .pf-stat-num { font-size: 28px; }
  .pf-thumbs { grid-template-columns: 1fr; }
}

/* ============================================================
   LANDING (when no default resume is set)
   ============================================================ */
.ld {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--text);
  background: var(--bg);
}
.ld-top {
  padding: 18px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 0.5px solid var(--border);
  flex-wrap: wrap;
}
.ld-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  min-width: 0;
}
.ld-brand .rb-mono {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.ld-logo { height: 24px; width: auto; flex-shrink: 0; }
.ld-top-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ld-burger { display: none; }
.ld-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--text-faint);
  text-transform: lowercase;
}
.ld-eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
}
.ld-hero {
  padding: 96px 40px 80px;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}
.ld-hero::before {
  /* Decorative side rule with accent dot */
  content: "";
  position: absolute;
  left: 20px;
  top: 100px;
  bottom: 100px;
  width: 1px;
  background: linear-gradient(180deg, var(--accent) 0%, transparent 30%, transparent 70%, var(--accent2) 100%);
  opacity: 0.3;
}
.ld-hero .ld-eyebrow { margin-bottom: 28px; display: block; }
.ld-title {
  font-family: var(--font-serif);
  font-size: 72px;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 32px;
  max-width: 18ch;
  color: var(--text);
}
.ld-title .ld-accent {
  color: var(--accent);
  font-style: italic;
  background-image: linear-gradient(180deg, transparent 65%, var(--accent-glow) 65%, var(--accent-glow) 92%, transparent 92%);
}
.ld-lead {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 60ch;
  margin-bottom: 40px;
  font-style: italic;
}
.ld-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ld-cta .rb-btn { padding: 10px 18px; font-size: 14px; }
.ld-cta .rb-btn-primary { padding-right: 14px; }
.ld-cta-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  margin-left: 8px;
}

.ld-grid {
  max-width: 1000px;
  margin: 0 auto;
  padding: 48px 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-strong);
  border-top: 0.5px solid var(--border-strong);
  border-bottom: 0.5px solid var(--border-strong);
}
.ld-card {
  padding: 32px 26px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background 200ms;
  position: relative;
  overflow: hidden;
}
.ld-card::before {
  /* Accent corner mark */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.ld-card:hover {
  background: var(--bg-elevated);
}
.ld-card:hover::before { transform: scaleX(1); }
.ld-card-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 10px;
  font-weight: 500;
}
.ld-card-title {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.ld-card-text {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-muted);
}

.ld-step {
  max-width: 800px;
  margin: 0 auto;
  padding: 72px 40px 80px;
}
.ld-step .ld-eyebrow { display: block; margin-bottom: 32px; }
.ld-step-list { display: grid; gap: 24px; }
.ld-step-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 20px;
  align-items: start;
}
.ld-step-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding-top: 8px;
  position: relative;
}
.ld-step-num::after {
  content: "";
  display: block;
  width: 14px;
  height: 0.5px;
  background: var(--accent);
  margin-top: 6px;
  opacity: 0.4;
}
.ld-step-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.ld-step-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 60ch;
}

.ld-footer {
  padding: 32px 40px;
  border-top: 0.5px solid var(--border-strong);
  margin-top: auto;
  background: var(--bg-muted);
  position: relative;
}
.ld-footer::before {
  /* Decorative top stripe */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent) 18%,
    var(--accent) 22%,
    transparent 22%,
    transparent 78%,
    var(--accent2) 78%,
    var(--accent2) 82%,
    transparent 82%,
    transparent 100%
  );
  opacity: 0.5;
}
.ld-foot-row {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.06em;
  flex-wrap: wrap;
  gap: 12px;
}
.ld-footer a { color: var(--text); border-bottom: 0.5px solid var(--border-strong); padding-bottom: 1px; transition: color 200ms, border-color 200ms; }
.ld-footer a:hover { color: var(--accent); border-color: var(--accent); }
.ld-foot-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.ld-foot-sep { color: var(--text-faint); opacity: 0.6; border-bottom: 0 !important; }

@media (max-width: 880px) {
  .ld-top { padding: 14px 20px; }
  .ld-hero { padding: 56px 20px 40px; }
  .ld-hero::before { left: 12px; }
  .ld-title { font-size: 40px; max-width: 100%; }
  .ld-lead { font-size: 17px; }
  .ld-grid { grid-template-columns: 1fr; padding: 24px 20px; }
  .ld-card { padding: 22px 20px; }
  .ld-step { padding: 48px 20px; }
  .ld-step-item { grid-template-columns: 1fr; gap: 8px; }
  .ld-step-title { font-size: 18px; }
  .ld-cta-hint { width: 100%; margin-left: 0; }
  .ld-footer { padding: 22px 20px; }
}
/* Phones: condense the header further, allow the title to wrap freely,
   and stop nbsp-glued phrases from forcing horizontal scroll. */
/* On phones (≤760px) the landing header collapses into a brand + burger.
   Inline actions go into the drawer. Mirrors the rb-pubnav / rb-authbar UX. */
@media (max-width: 760px) {
  .ld-top-actions-desk { display: none; }
  .ld-burger { display: inline-flex; }
  .ld-top { gap: 10px; justify-content: space-between; }
}

@media (max-width: 560px) {
  .ld-top { padding: 12px 16px; gap: 8px; }
  .ld-top-actions { gap: 6px; width: 100%; justify-content: flex-end; }
  .ld-top-actions .rb-btn { padding: 6px 10px; font-size: 12px; }
  .ld-hero { padding: 40px 16px 32px; }
  .ld-hero::before { display: none; }
  .ld-eyebrow { font-size: 10px; }
  .ld-hero .ld-eyebrow { margin-bottom: 18px; }
  .ld-title {
    font-size: 32px;
    line-height: 1.05;
    /* Force browser to break long phrases (including nbsp-glued pairs) when needed */
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    margin-bottom: 20px;
  }
  .ld-title br { display: none; }
  .ld-lead { font-size: 15px; margin-bottom: 28px; }
  .ld-cta { gap: 10px; }
  .ld-cta .rb-btn { padding: 9px 14px; font-size: 13px; flex: 1 1 calc(50% - 5px); justify-content: center; }
  .ld-cta-hint { font-size: 10px; text-align: center; }
  .ld-card { padding: 20px 16px; }
  .ld-card-title { font-size: 18px; }
  .ld-card-num { font-size: 10px; margin-bottom: 8px; }
  .ld-step { padding: 36px 16px; }
  .ld-step .ld-eyebrow { margin-bottom: 24px; }
  .ld-step-num { font-size: 11px; padding-top: 4px; }
  .ld-step-title { font-size: 19px; }
  .ld-step-text { font-size: 13px; }
  .ld-footer { padding: 18px 16px; }
  .ld-foot-row { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 10px; }
}

/* ============================================================
   LOGIN
   ============================================================ */
.lg {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--bg);
}
.lg-left {
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 0.5px solid var(--border-strong);
}
.lg-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
/* Back-link to /about — sits above the eyebrow so visitors can escape
   the auth flow without using the browser back button. */
.lg-back {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 999px;
  border: 0.5px solid var(--border-strong);
  margin-bottom: 18px;
  transition: color 160ms, border-color 160ms, background 160ms;
}
.lg-back:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--bg-elevated);
}
.lg-quote {
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 1.25;
  max-width: 22ch;
  letter-spacing: -0.005em;
}
.lg-quote-foot {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.06em;
  margin-top: 20px;
}
.lg-foot {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.05em;
  display: flex;
  justify-content: space-between;
}
.lg-right {
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg-elevated);
}
.lg-form { max-width: 320px; width: 100%; }
.lg-title {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.lg-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 32px; }
.lg-field { margin-bottom: 16px; }
.lg-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid var(--border-strong);
  padding: 10px 0 8px;
  font-size: 15px;
  color: var(--text);
  font-family: inherit;
}
.lg-input:focus { outline: none; border-color: var(--accent); }
.lg-submit {
  width: 100%;
  margin-top: 24px;
  background: var(--accent);
  color: #fff;
  padding: 11px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  border: 0;
}
.lg-submit:hover { filter: brightness(1.06); }
.lg-error {
  margin-top: 14px;
  font-size: 12px;
  color: var(--danger);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* Alternative actions block — "or create account" / "or build without account" */
.lg-alts {
  margin-top: 28px;
  display: grid;
  gap: 10px;
}
.lg-or {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 4px 0 10px;
}
.lg-or::before, .lg-or::after {
  content: "";
  flex: 1;
  height: 0.5px;
  background: var(--border-strong);
}
.lg-or span { padding: 0 4px; }

.lg-alt {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  transition: background 200ms, border-color 200ms, transform 200ms;
}
.lg-alt:hover {
  background: var(--bg-muted);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.lg-alt-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.lg-alt:hover .lg-alt-title { color: var(--accent); }
.lg-alt-sub {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.lg-alt-arrow {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--text-faint);
  width: 24px;
  text-align: center;
  transition: color 200ms, transform 200ms;
}
.lg-alt:hover .lg-alt-arrow {
  color: var(--accent);
  transform: translateX(2px);
}

/* "soft" variant — for the more discreet option */
.lg-alt-soft {
  background: transparent;
  border-style: dashed;
}
.lg-alt-soft .lg-alt-title { color: var(--text-muted); }
.lg-alt-soft:hover .lg-alt-title { color: var(--accent); }
@media (max-width: 768px) {
  .lg { grid-template-columns: 1fr; }
  .lg-left { padding: 32px 24px; border-right: 0; border-bottom: 0.5px solid var(--border-strong); }
  .lg-right { padding: 32px 24px; }
}

/* ============================================================
   ADMIN DASHBOARD
   ============================================================ */
.dh {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.dh-top {
  padding: 14px 28px;
  border-bottom: 0.5px solid var(--border-strong);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-elevated);
}
.dh-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.dh-brand b { color: var(--text); font-weight: 500; }
.dh-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.dh-main {
  flex: 1;
  padding: 36px 28px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 36px;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
}
.dh-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}
.dh-section-title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.dh-section-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
}
.dh-table { border-top: 0.5px solid var(--border-strong); }
.dh-row {
  display: grid;
  grid-template-columns: 60px 1fr 1fr 140px 140px;
  gap: 16px;
  padding: 18px 4px;
  border-bottom: 0.5px solid var(--border);
  align-items: center;
}
.dh-row.head {
  padding: 10px 4px;
  border-bottom: 0.5px solid var(--border-strong);
}
.dh-row:not(.head):hover { background: var(--bg-muted); }
.dh-row-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}
.dh-row-title {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 3px;
  letter-spacing: -0.005em;
}
.dh-row-sub  { font-size: 12px; color: var(--text-muted); }
.dh-row-slug {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.03em;
}
.dh-row-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
}
.dh-row-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.dh-new {
  margin-top: 14px;
  width: 100%;
  padding: 14px;
  border: 0.5px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 13px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}
.dh-new:hover { background: var(--bg-muted); color: var(--text); }
.dh-aside {
  background: var(--bg-elevated);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  height: fit-content;
  box-shadow: var(--shadow-card);
}
.dh-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--bg-muted);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  border: 0.5px solid var(--border-strong);
  overflow: hidden;
}
.dh-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dh-aside-name { font-size: 16px; font-weight: 500; margin-bottom: 3px; }
.dh-aside-headline { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-bottom: 18px; }
.dh-aside-rule { height: 0.5px; background: var(--border); margin: 18px 0; }
.dh-aside-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 12px;
  gap: 8px;
}
.dh-aside-row .k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.dh-aside-row .v { color: var(--text); text-align: right; word-break: break-word; }
.dh-aside-edit {
  margin-top: 16px;
  width: 100%;
  padding: 8px;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--text);
  background: transparent;
  cursor: pointer;
}
.dh-aside-edit:hover { background: var(--bg-muted); }

@media (max-width: 980px) {
  .dh-main { grid-template-columns: 1fr; }
  .dh-row { grid-template-columns: 1fr; gap: 6px; }
  .dh-row.head { display: none; }
}

/* Profile modal (simple) */
.rb-modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
  animation: rb-fadein 180ms ease;
}
.rb-modal {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  padding: 28px;
  border: 0.5px solid var(--border-strong);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  animation: rb-slidein 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.rb-modal h2 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}
.rb-modal .field { margin-bottom: 14px; }
.rb-modal .row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.rb-modal .actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 22px;
}

/* ============================================================
   BUILDER
   ============================================================ */
.bd {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  font-size: 13px;
}
.bd-top {
  padding: 12px 24px;
  border-bottom: 0.5px solid var(--border-strong);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.bd-top-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex-wrap: wrap; }
.bd-crumbs {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  gap: 10px;
  align-items: center;
  letter-spacing: -0.005em;
}
.bd-crumbs a:hover { color: var(--accent); }
.bd-crumb-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: var(--radius);
  transition: background 160ms, color 160ms;
}
.bd-crumb-back:hover { background: var(--bg-muted); color: var(--accent); }
.bd-crumb-arrow { font-size: 12px; line-height: 1; }
.bd-crumb-sep { color: var(--text-faint); opacity: 0.6; }
.bd-crumb-prefix {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}
.bd-slug-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.bd-slug-link {
  border-bottom: 0.5px dashed var(--border-strong);
}
.bd-slug-edit {
  color: var(--text-faint);
  padding: 0 4px;
  font-size: 11px;
  cursor: pointer;
  background: transparent;
  border: 0;
  transition: color 200ms;
}
.bd-slug-edit:hover { color: var(--accent); }
.bd-slug-input {
  background: var(--bg-elevated);
  border: 0.5px solid var(--accent);
  border-radius: var(--radius);
  padding: 4px 8px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text);
  min-width: 160px;
  letter-spacing: 0.02em;
}
.bd-resume-title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  background: transparent;
  border: 0;
  padding: 4px 6px;
  margin-left: -6px;
  border-radius: var(--radius);
  color: var(--text);
  min-width: 200px;
}
.bd-resume-title:focus, .bd-resume-title:hover {
  background: var(--bg-muted);
  outline: none;
}

/* Clickable status pills in bd-top: publish state + home pin.
   Visual cue: dot/icon + label, hover reveals the inverse action. */
.bd-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 0.5px solid transparent;
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 160ms, color 160ms, border-color 160ms;
  white-space: nowrap;
}
.bd-status-pill:hover { border-color: var(--accent); color: var(--accent); }
.bd-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.bd-status-pill.is-published {
  background: var(--success-soft);
  color: var(--success);
}
.bd-status-pill.is-published:hover {
  background: var(--bg-muted);
  color: var(--text-faint);
  border-color: var(--border-strong);
}
.bd-status-pill.is-draft {
  background: var(--bg-muted);
  color: var(--text-faint);
}
.bd-status-pill.is-draft:hover {
  background: var(--success-soft);
  color: var(--success);
  border-color: var(--success);
}

/* Home-pin pill: off by default (text-faint), on (is-on) shows accent.
   Hover always shows the inverse colour as visual affordance. */
.bd-status-home {
  gap: 4px;
}
.bd-status-home.is-on {
  background: var(--accent-soft);
  color: var(--accent);
}
.bd-status-home.is-on:hover {
  background: var(--bg-muted);
  color: var(--text-faint);
  border-color: var(--border-strong);
}
.bd-status-home:not(.is-on):hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.bd-top-right { display: flex; gap: 8px; align-items: center; }
.bd-save-status {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 8px;
}
.bd-save-status.is-saved { color: var(--success); }
.bd-save-status.is-error { color: var(--danger); }
.bd-save-status .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  animation: rb-pulse 1.2s ease-in-out infinite;
}
@keyframes rb-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}
.bd-export-wrap { position: relative; }
.bd-export-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--bg-elevated);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 4px;
  min-width: 180px;
  z-index: 20;
  box-shadow: var(--shadow-pop);
}
.bd-export-menu a, .bd-export-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius);
  font-size: 12px;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  background: transparent;
  border: 0;
}
.bd-export-menu a:hover, .bd-export-menu button:hover { background: var(--bg-muted); }

.bd-main {
  flex: 1;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  min-height: 0;
}
.bd-sidebar {
  padding: 20px 16px;
  border-right: 0.5px solid var(--border);
  background: var(--bg);
  overflow: auto;
}
.bd-sidebar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 4px 4px 14px;
}
.bd-sidebar-head .h {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.bd-section {
  display: grid;
  grid-template-columns: 16px 26px 1fr 24px;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-muted);
  transition: background 120ms;
  position: relative;
  user-select: none;
}
.bd-section:hover { background: var(--bg-muted); }
.bd-section.is-active {
  background: var(--bg-muted);
  color: var(--text);
}
.bd-section.is-active::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--accent);
}
.bd-section .grip {
  color: var(--text-faint);
  cursor: grab;
  display: flex;
  opacity: 0;
}
.bd-section:hover .grip,
.bd-section.is-active .grip { opacity: 1; }
.bd-section .num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.bd-section .name {
  font-size: 13px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bd-section.is-active .name { font-weight: 500; }
.bd-section .count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  text-align: right;
}
.bd-add {
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  border: 0.5px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 12px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: background 160ms, color 160ms, border-color 160ms;
}
.bd-add:hover {
  background: var(--bg-elevated);
  color: var(--accent);
  border-color: var(--accent);
  border-style: solid;
}

.bd-editor {
  padding: 28px 36px 60px;
  overflow: auto;
  background: var(--bg);
}
.bd-editor-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 18px;
  border-bottom: 0.5px solid var(--border-strong);
  margin-bottom: 24px;
  gap: 16px;
}
.bd-editor-head .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.bd-editor-title {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--text);
  width: 100%;
}
.bd-editor-title:focus { outline: none; }
.bd-editor-head .right {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-bottom: 2px;
  flex-shrink: 0;
}
.bd-vis {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.bd-toggle {
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: var(--border-strong);
  position: relative;
  transition: background 120ms;
  cursor: pointer;
  display: inline-block;
  flex-shrink: 0;
}
.bd-toggle.on { background: var(--success); }
.bd-toggle::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transition: left 120ms;
}
.bd-toggle.on::after { left: 13px; }

.bd-item {
  background: var(--bg-elevated);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px 14px;
  margin-bottom: 12px;
  position: relative;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 14px;
  box-shadow: var(--shadow-sm);
  transition: border-color 120ms, box-shadow 200ms, transform 200ms;
}
.bd-item:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card);
}
.bd-item-grip {
  color: var(--text-faint);
  padding-top: 6px;
  cursor: grab;
  opacity: 0;
  transition: opacity 120ms;
}
.bd-item:hover .bd-item-grip { opacity: 1; }
.bd-item-fields { display: grid; gap: 8px; }
.bd-row { display: grid; gap: 12px; }
.bd-row-2 { grid-template-columns: 140px 1fr; }
.bd-row-3 { grid-template-columns: 140px 1fr 1fr; }
.bd-row-stat { grid-template-columns: 1fr 80px 80px 1fr; }

.bd-field { display: flex; flex-direction: column; gap: 4px; }
.bd-field label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.bd-input {
  background: transparent;
  border: 0;
  padding: 4px 0;
  font-size: 14px;
  color: var(--text);
  border-bottom: 0.5px solid transparent;
  transition: border-color 120ms;
  font-family: inherit;
  width: 100%;
}
.bd-input:focus, .bd-input:hover { border-color: var(--border-strong); outline: none; }
.bd-input:focus { border-color: var(--accent); }
.bd-input.mono { font-family: var(--font-mono); font-size: 12px; }
.bd-textarea {
  background: transparent;
  border: 0.5px solid transparent;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  border-radius: var(--radius);
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
  width: 100%;
  margin-left: -10px;
}
.bd-textarea:hover { border-color: var(--border); background: var(--bg-elevated); }
.bd-textarea:focus { border-color: var(--accent); background: var(--bg-elevated); outline: none; }

.bd-item-actions {
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 120ms;
}
.bd-item:hover .bd-item-actions { opacity: 1; }
.bd-item-actions button {
  padding: 4px;
  color: var(--text-faint);
  border-radius: var(--radius);
}
.bd-item-actions button:hover {
  background: var(--bg-muted);
  color: var(--text);
}
.bd-item-actions button.danger:hover { color: var(--danger); }

.bd-skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.bd-skill-card {
  background: var(--bg-elevated);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 14px 1fr 24px;
  gap: 8px;
  align-items: center;
  transition: border-color 120ms;
  position: relative;
}
.bd-skill-card:hover { border-color: var(--border-strong); }
.bd-skill-card .gp {
  color: var(--text-faint);
  opacity: 0;
  cursor: grab;
}
.bd-skill-card:hover .gp { opacity: 1; }
.bd-skill-card .group-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 2px;
}
.bd-skill-card .x {
  color: var(--text-faint);
  opacity: 0;
  cursor: pointer;
}
.bd-skill-card:hover .x { opacity: 1; }
.bd-skill-card .x:hover { color: var(--danger); }

.bd-editor-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 0.5px solid var(--border);
  flex-wrap: wrap;
  gap: 12px;
}
.bd-editor-foot .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}
.bd-new {
  padding: 7px 12px;
  border: 0.5px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 12px;
  background: transparent;
  cursor: pointer;
}
.bd-new:hover { background: var(--bg-muted); color: var(--text); }

/* ============================================================
   Hero attachments editor — IMG / FILE / URL rows
   ============================================================ */
.bd-att-row {
  display: grid;
  grid-template-columns: 42px minmax(120px, 1fr) 1fr 26px;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: 12px;
}
.bd-att-row:hover { border-color: var(--border-strong); }
.bd-att-kind {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 3px 5px;
  border-radius: 3px;
  text-align: center;
  background: var(--bg-muted);
  color: var(--text-muted);
}
.bd-att-image .bd-att-kind { background: var(--accent-soft); color: var(--accent); }
.bd-att-file  .bd-att-kind { background: var(--accent2-soft); color: var(--accent2); }
.bd-att-link  .bd-att-kind { background: var(--highlight); color: #806000; }
.bd-att-thumb {
  width: 42px;
  height: 32px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-muted);
  border-radius: 3px;
  display: block;
  text-decoration: none;
  border: 0.5px solid var(--border);
}
.bd-att-name {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bd-att-cap { font-size: 12px; }
.bd-att-x {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: color 140ms, background 140ms;
}
.bd-att-x:hover { color: var(--danger); background: var(--bg-muted); }
.bd-att-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
@media (max-width: 600px) {
  .bd-att-row { grid-template-columns: 38px 1fr 26px; }
  .bd-att-row .bd-att-cap { grid-column: 1 / -1; }
}

/* Toggleable URL field — collapsed pill that expands into an input on click */
.bd-add-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 0.5px dashed var(--border-strong);
  border-radius: var(--radius);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  cursor: pointer;
  align-self: flex-start;
  transition: color 200ms ease, border-color 200ms ease;
}
.bd-add-field:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.bd-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  margin-top: 4px;
}

/* Picker popup for "add section" */
.bd-picker {
  position: absolute;
  z-index: 50;
  background: var(--bg-elevated);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  min-width: 220px;
  padding: 4px;
  margin-top: 4px;
  box-shadow: var(--shadow-pop);
}
.bd-picker button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  font-size: 13px;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.bd-picker button:hover { background: var(--bg-muted); }
.bd-picker .k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--accent);
}

@media (max-width: 980px) {
  .bd-main { grid-template-columns: 1fr; }
  .bd-sidebar { border-right: 0; border-bottom: 0.5px solid var(--border); max-height: 280px; }
  .bd-editor { padding: 20px 16px 60px; }
  .bd-skills-grid { grid-template-columns: 1fr 1fr; }
  .bd-row-3, .bd-row-stat { grid-template-columns: 1fr; }
}

/* File attachment block (credentials editor) */
.bd-file {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  transition: border-color 120ms;
}
.bd-file:hover { border-color: var(--accent); }
.bd-file-thumb {
  width: 32px;
  height: 40px;
  background: var(--bg-muted);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  color: var(--accent);
  position: relative;
}
.bd-file-thumb::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  border-style: solid;
  border-width: 0 0 6px 6px;
  border-color: transparent transparent var(--bg) transparent;
}
.bd-file-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; word-break: break-all; }
.bd-file-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}
.bd-file-actions { display: flex; gap: 4px; }
.bd-file-actions button {
  padding: 5px;
  color: var(--text-faint);
  border-radius: var(--radius);
}
.bd-file-actions button:hover {
  background: var(--bg-muted);
  color: var(--text);
}

.bd-drop {
  border: 0.5px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 18px;
  text-align: center;
  background: transparent;
  transition: border-color 120ms, background 120ms;
  cursor: pointer;
  position: relative;
}
.bd-drop:hover, .bd-drop.is-over {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.bd-drop input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.bd-drop-title {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 2px;
}
.bd-drop-title .browse {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 3px;
}
.bd-drop-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.05em;
}

/* Gallery editor thumbs */
.bd-thumb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.bd-thumb {
  position: relative;
  aspect-ratio: 4/3;
  background-color: var(--bg-muted);
  background-image: repeating-linear-gradient(45deg,
    color-mix(in oklab, var(--text) 4%, transparent) 0 1px,
    transparent 1px 8px);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
  border: 0.5px solid var(--border);
  transition: border-color 120ms;
  overflow: hidden;
}
.bd-thumb:hover { border-color: var(--accent); }
.bd-thumb-num {
  position: absolute;
  left: 6px;
  top: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-faint);
  letter-spacing: 0.06em;
  background: var(--bg);
  padding: 1px 4px;
  border-radius: 2px;
}
.bd-thumb-cap {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  background: var(--bg);
  border: 0;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text);
  width: calc(100% - 12px);
}
.bd-thumb-x {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  opacity: 0;
  transition: opacity 120ms;
  cursor: pointer;
  border: 0;
}
.bd-thumb:hover .bd-thumb-x { opacity: 1; }
.bd-thumb-x:hover { color: var(--danger); }
.bd-thumb-add {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  aspect-ratio: 4/3;
  border: 0.5px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 11px;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.bd-thumb-add:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.bd-thumb-add input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* Video editor */
.bd-video-preview {
  aspect-ratio: 16/9;
  background: #1a1a18;
  background-image: repeating-linear-gradient(45deg,
    rgba(255,255,255,0.04) 0 1px,
    transparent 1px 10px);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
  position: relative;
  margin-top: 6px;
}
.bd-video-preview-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bd-video-preview-play svg { width: 16px; height: 16px; }
.bd-video-preview-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
}
.bd-video-preview-src {
  position: absolute;
  left: 8px;
  top: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.bd-url-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.bd-provider-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 4px 8px;
  background: var(--accent-soft);
  border-radius: var(--radius);
}

/* SortableJS visual states */
.sortable-ghost  { opacity: 0.35; }
.sortable-chosen { cursor: grabbing; }
.sortable-drag   { cursor: grabbing; }

/* ============================================================
   Display mode switcher in builder section head
   ============================================================ */
.bd-modes {
  display: inline-flex;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 2px;
  gap: 0;
}
.bd-modes button {
  width: 28px;
  height: 22px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-faint);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.bd-modes button:hover { color: var(--text); }
.bd-modes button.is-active {
  background: var(--bg-muted);
  color: var(--accent);
}

/* ============================================================
   Generic CAROUSEL — used by sections in public + admin preview
   ============================================================ */
.rb-carousel-wrap {
  position: relative;
}
/* Edge fades — hint that there's more content off-screen. The mask is the
   modern way to do this (no extra DOM); falls back gracefully (full opacity)
   on older browsers. */
.rb-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px 10px;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  overscroll-behavior-x: contain;
  /* Mouse drag-to-scroll hint. JS toggles cursor:grabbing while a drag is active. */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.rb-carousel:active { cursor: grabbing; }
.rb-carousel a, .rb-carousel button, .rb-carousel input, .rb-carousel textarea {
  /* Restore default cursor on interactive children so links don't look grabbed */
  cursor: pointer;
  user-select: auto;
  -webkit-user-select: auto;
}
.rb-carousel > * {
  flex: 0 0 calc(50% - 6px);
  scroll-snap-align: start;
  min-width: 0;
}
@media (max-width: 720px) {
  .rb-carousel > * { flex-basis: calc(85% - 6px); }
}
/* Single-column carousels (experience / video / custom) */
.rb-carousel.rb-carousel-wide > * {
  flex-basis: calc(100% - 24px);
  max-width: calc(100% - 24px);
}
.rb-carousel.rb-carousel-narrow > * {
  flex-basis: calc(33.33% - 8px);
}
@media (max-width: 720px) {
  .rb-carousel.rb-carousel-narrow > * { flex-basis: calc(60% - 6px); }
  .rb-carousel.rb-carousel-wide > *   { flex-basis: calc(95% - 6px); max-width: calc(95% - 6px); }
}
.rb-carousel::-webkit-scrollbar { height: 6px; }
.rb-carousel::-webkit-scrollbar-track { background: transparent; }
.rb-carousel::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}

.rb-carousel-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  gap: 12px;
}
.rb-carousel-counter {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.rb-carousel-dots {
  display: flex;
  gap: 5px;
  align-items: center;
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
}
.rb-carousel-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-strong);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 120ms, transform 120ms;
}
.rb-carousel-dot:hover { background: var(--text-muted); }
.rb-carousel-dot.is-active {
  background: var(--accent);
  transform: scale(1.4);
}
.rb-carousel-arrows {
  display: flex;
  gap: 4px;
}
.rb-carousel-arrows button {
  width: 32px;
  height: 32px;
  border: 0.5px solid var(--border-strong);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 14px;
  background: var(--bg-elevated);
  cursor: pointer;
  transition: background 140ms, color 140ms, border-color 140ms, transform 140ms;
}
.rb-carousel-arrows button:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-1px);
}
.rb-carousel-arrows button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* List mode — denser vertical list */
.rb-list-mode .pf-cred,
.rb-list-mode .pf-stat,
.rb-list-mode .pf-plain,
.rb-list-mode .pf-custom-item,
.rb-list-mode .pf-item,
.rb-list-mode .pf-video-item,
.rb-list-mode .pf-gallery-item {
  padding: 8px 0;
  background: transparent;
  border-radius: 0;
}
.rb-list-mode .pf-creds { display: block; }
.rb-list-mode .pf-achievements { display: block; }
.rb-list-mode .pf-stat { display: grid; grid-template-columns: 80px 1fr; gap: 12px; }
.rb-list-mode .pf-stat-num { padding-top: 4px; }
.rb-list-mode .pf-thumbs   { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 720px) {
  .rb-list-mode .pf-thumbs { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   ADMIN FEEDBACK PAGE — messages + reaction summaries
   ============================================================ */
.fb-react-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-muted);
  font-family: var(--font-mono);
  font-size: 11px;
}
.fb-react-chip-emo { font-size: 14px; line-height: 1; }
.fb-react-chip-c { color: var(--text-muted); }

.fb-msgs {
  display: flex;
  flex-direction: column;
}
.fb-msg {
  border-bottom: 0.5px solid var(--border);
  transition: background 200ms;
}
.fb-msg:last-child { border-bottom: 0; }
.fb-msg.is-unread { background: var(--accent-soft); }

.fb-msg-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  gap: 12px;
}
.fb-msg-head:hover { background: var(--bg-muted); }
.fb-msg.is-unread .fb-msg-head:hover { background: color-mix(in oklab, var(--accent-soft) 70%, var(--bg-muted)); }

.fb-msg-from {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.fb-msg-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg-muted) 100%);
  border: 0.5px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--accent);
  flex-shrink: 0;
}
.fb-msg-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.fb-msg-sub {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.fb-msg-sub a:hover { color: var(--accent); }

.fb-msg-side {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.fb-msg-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.fb-msg-toggle {
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--text-faint);
  width: 24px;
  text-align: center;
}

.fb-msg-body {
  padding: 0 20px 20px;
}
.fb-msg-subject {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -0.005em;
}
.fb-msg-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-line;
  padding: 14px 16px;
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.fb-msg-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ============================================================
   FEEDBACK WIDGET — FAB + modal (reactions + contact form)
   ============================================================ */
.pf-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--accent);
  background-image: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  font-weight: 500;
  box-shadow: 0 6px 20px var(--accent-glow), 0 2px 4px rgba(0,0,0,0.08);
  transition: transform 200ms, box-shadow 200ms;
}
.pf-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px var(--accent-glow), 0 4px 8px rgba(0,0,0,0.10);
}
.pf-fab svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .pf-fab { padding: 12px; }
  .pf-fab span { display: none; }
}
@media print { .pf-fab { display: none !important; } }

.pf-fb-bg {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px;
  animation: rb-fadein 180ms ease;
}
@media (min-width: 600px) { .pf-fb-bg { align-items: center; } }

.pf-fb {
  width: min(560px, 100%);
  max-height: 86vh;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border-strong);
  box-shadow: var(--shadow-pop), 0 24px 60px rgba(0, 0, 0, 0.20);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: rb-slidein 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.pf-fb-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 4px 0 4px;
  border-bottom: 0.5px solid var(--border);
}
.pf-fb-tabs {
  display: flex;
  gap: 4px;
}
.pf-fb-tabs button {
  background: transparent;
  border: 0;
  padding: 12px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  position: relative;
  letter-spacing: -0.005em;
  transition: color 200ms;
}
.pf-fb-tabs button:hover { color: var(--text); }
.pf-fb-tabs button.is-active { color: var(--accent); }
.pf-fb-tabs button.is-active::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
}
.pf-fb-close {
  background: transparent;
  border: 0;
  color: var(--text-faint);
  font-size: 22px;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 8px 4px 0;
}
.pf-fb-close:hover { color: var(--accent); background: var(--bg-muted); }

.pf-fb-body {
  padding: 20px 24px 24px;
  overflow-y: auto;
  flex: 1;
}
.pf-fb-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-transform: lowercase;
  margin-bottom: 10px;
}
.pf-fb-lead {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.4;
  color: var(--text);
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}
.pf-fb-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  line-height: 1.5;
}

/* Reactions */
.pf-fb-reactions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
@media (min-width: 480px) { .pf-fb-reactions { grid-template-columns: repeat(3, 1fr); } }

.pf-react {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 200ms, transform 200ms, background 200ms;
  position: relative;
}
.pf-react:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
}
.pf-react.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.pf-react-emo {
  font-size: 22px;
  line-height: 1;
}
.pf-react-label {
  font-size: 12px;
  color: var(--text);
  flex: 1;
}
.pf-react-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  min-width: 20px;
  text-align: right;
}
.pf-react.is-active .pf-react-count { color: var(--accent); font-weight: 500; }
/* When an emoji is yours — show a small "click again to remove" hint on hover */
.pf-react.is-active::after {
  content: "× убрать";
  position: absolute;
  top: 2px;
  right: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--accent);
  opacity: 0;
  transition: opacity 200ms;
}
.pf-react.is-active:hover::after { opacity: 1; }

.pf-fb-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.pf-fb-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  line-height: 1.5;
  padding-top: 8px;
  border-top: 0.5px dashed var(--border);
}
.pf-fb-reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: transparent;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 4px 10px;
  cursor: pointer;
  transition: color 200ms, border-color 200ms;
}
.pf-fb-reset:hover {
  color: var(--danger);
  border-color: var(--danger);
}
.pf-fb-reset svg { stroke: currentColor; }

/* Message form */
.pf-fb-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.pf-fb-row {
  display: grid;
  gap: 14px;
}
.pf-fb-row-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .pf-fb-row-2 { grid-template-columns: 1fr; } }
.pf-fb-row .rb-label { margin-bottom: 4px; }
.pf-fb-row .req { color: var(--accent); }
.pf-fb-counter {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  text-align: right;
  letter-spacing: 0.04em;
  margin-top: -8px;
}
.pf-fb-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 6px;
}

/* Success state */
.pf-fb-success {
  text-align: center;
  padding: 48px 24px;
}
.pf-fb-success .pf-fb-mark {
  font-family: var(--font-serif);
  font-size: 64px;
  color: var(--success);
  line-height: 1;
  margin-bottom: 18px;
}
.pf-fb-success h3 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.pf-fb-success p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 40ch;
  margin: 0 auto 20px;
}

/* ============================================================
   SERVICE-ADMIN AREA (/manage)
   ============================================================ */
.mg {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 32px 80px;
}
.mg-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  padding-bottom: 22px;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.mg-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  text-transform: lowercase;
  margin-bottom: 8px;
}
.mg-title {
  font-family: var(--font-serif);
  font-size: 32px;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0 0 6px;
  color: var(--text);
}
.mg-sub {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 60ch;
}

.mg-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 28px;
}
.mg-stat {
  background: var(--bg-elevated);
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: var(--text);
  transition: background 200ms;
}
a.mg-stat:hover { background: var(--bg-muted); }
.mg-stat-v {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
}
a.mg-stat:hover .mg-stat-v { color: var(--accent-deep); }
.mg-stat-l {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.mg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 880px) { .mg-grid { grid-template-columns: 1fr; } }

.mg-panel {
  background: var(--bg-elevated);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.mg-panel-head {
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 0.5px solid var(--border);
}
.mg-panel-head h2 {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0;
}
.mg-panel-head a {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.mg-panel-head a:hover { color: var(--accent); }

.mg-list {
  display: flex;
  flex-direction: column;
}
.mg-list-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 0.5px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: background 160ms;
}
.mg-list-row:last-child { border-bottom: 0; }
a.mg-list-row:hover { background: var(--bg-muted); }
.mg-row-name { display: flex; align-items: baseline; }
.mg-row-title { font-size: 13px; font-weight: 500; }

.mg-table {
  background: var(--bg-elevated);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  /* No overflow:hidden — would clip the row-action dropdowns.
     Inner first/last rows handle their own corner rounding. */
}
.mg-table-head, .mg-user-row {
  display: grid;
  grid-template-columns: 2fr 100px 110px 110px 140px;
  gap: 16px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 0.5px solid var(--border);
}
.mg-table-head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--bg-muted);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
.mg-user-row:last-child {
  border-bottom: 0;
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
.mg-user-row:hover { background: var(--bg-muted); }
.mg-user-row:last-child { border-bottom: 0; }

/* Wider resume-list grid: title column needs more room than user names */
.mg-table-head-resumes,
.mg-resume-row {
  grid-template-columns: minmax(220px, 2.4fr) 1.2fr 1fr 90px 130px;
}
@media (max-width: 880px) {
  .mg-table-head-resumes,
  .mg-resume-row { grid-template-columns: 1fr; gap: 6px; padding: 10px 14px; }
  .mg-table-head-resumes { display: none; }
}

/* ============================================================
   /manage — mobile compact layout.
   Tables collapse into cards; filters stack; stats wrap better.
   ============================================================ */
@media (max-width: 760px) {
  .mg { padding: 18px 14px 60px; }
  .mg-head {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 18px;
  }
  .mg-title { font-size: 24px; }
  .mg-sub { font-size: 13px; }
  .mg-head-actions {
    width: 100%;
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
  }
  .mg-head-actions .rb-btn { flex: 1 1 calc(50% - 4px); text-align: center; justify-content: center; }

  /* Stats: 2-up grid instead of auto-fill (which makes them too narrow) */
  .mg-stats { grid-template-columns: 1fr 1fr; }
  .mg-stat { padding: 14px 14px 12px; }
  .mg-stat-v { font-size: 26px; }
  .mg-stat-l { font-size: 9px; }

  /* Filters stack vertically */
  .mg-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .mg-filters .rb-input,
  .mg-filters select.rb-input { max-width: none; width: 100%; }
  .mg-filters .rb-btn { width: 100%; text-align: center; justify-content: center; }

  /* Users / resumes tables: each row becomes a vertical card.
     The first cell (with avatar+name) sets the visual tone; the rest stack
     below with subtle indent and reduced color. */
  .mg-table-head { display: none; }
  .mg-user-row {
    grid-template-columns: 1fr !important;
    gap: 8px;
    padding: 14px 16px;
    align-items: stretch;
  }
  .mg-user-row > div { padding: 0; }
  .mg-user-row > div:not(:first-child) {
    font-size: 12px;
    color: var(--text-muted);
  }
  .mg-user-name { gap: 12px; }
  .mg-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 0.5px dashed var(--border);
  }
  .mg-actions .rb-btn-sm { padding: 6px 10px; font-size: 12px; }

  /* Resume rows on the resumes page — same card collapse */
  .mg-resume-row { padding: 14px; }

  /* Panel heads */
  .mg-panel-head { padding: 12px 14px; }
  .mg-panel-head h2 { font-size: 14px; }
  .mg-list-row {
    grid-template-columns: 1fr auto;
    padding: 10px 14px;
    gap: 8px;
  }
  .mg-list-row > :nth-child(3) {
    grid-column: 1 / -1;
    font-size: 10px;
    color: var(--text-faint);
  }

  /* DB management panels */
  .mg-kv th { width: 100px; }
  .mg-kv th, .mg-kv td { padding: 8px 14px; font-size: 12px; }
  .mg-tables-table th, .mg-tables-table td { padding: 6px 14px; }
  .mg-tables-table td.rb-mono { font-size: 10px; }

  /* /admin dashboard top — wrap */
  .dh-top {
    padding: 14px 18px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .dh-top-slim { padding: 10px 18px !important; }
}

/* Very narrow phones — stats 1-col */
@media (max-width: 420px) {
  .mg-stats { grid-template-columns: 1fr; }
  .mg-head-actions .rb-btn { flex: 1 1 100%; }
}

/* ============================================================
   DATABASE management page (/manage/database)
   ============================================================ */
.mg-kv {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.mg-kv th, .mg-kv td {
  text-align: left;
  padding: 9px 20px;
  border-bottom: 0.5px solid var(--border);
}
.mg-kv th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 400;
  width: 160px;
}
.mg-kv tr:last-child th,
.mg-kv tr:last-child td { border-bottom: 0; }

.mg-action-card {
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg);
  transition: border-color 200ms, box-shadow 200ms;
}
.mg-action-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.mg-action-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.mg-action-text {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  flex: 1;
}
.mg-action-card .rb-btn { align-self: flex-start; }

.mg-tables-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.mg-tables-table th, .mg-tables-table td {
  padding: 8px 20px;
  text-align: left;
  border-bottom: 0.5px solid var(--border);
}
.mg-tables-table th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 400;
  background: var(--bg-muted);
}
.mg-tables-table td.rb-mono { font-size: 11px; }
.mg-tables-table tbody tr:hover { background: var(--bg-muted); }
.mg-tables-table tr:last-child td { border-bottom: 0; }

/* ============================================================
   EXPORT PICKER modal (admin builder + guest builder)
   Format radio cards + section checkbox list. Designed to feel
   like a single, scannable form — not a wizard.
   ============================================================ */
.rb-export-formats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.rb-export-format {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--bg);
  transition: border-color 160ms, background 160ms;
}
.rb-export-format:hover { border-color: var(--accent); }
.rb-export-format.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}
.rb-export-format input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  transition: border-color 160ms;
}
.rb-export-format.is-active input[type="radio"] { border-color: var(--accent); }
.rb-export-format.is-active input[type="radio"]::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--accent);
}
.rb-export-format .t {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 1px;
}
.rb-export-format.is-active .t { color: var(--accent); }
.rb-export-format .d {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

.rb-export-sections {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg);
}
.rb-export-check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 0.5px solid var(--border);
  transition: background 140ms;
}
.rb-export-check:last-child { border-bottom: 0; }
.rb-export-check:hover { background: var(--bg-muted); }
.rb-export-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border-strong);
  border-radius: 3px;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.rb-export-check input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.rb-export-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.rb-export-check .t {
  font-size: 13px;
  color: var(--text);
  flex: 1;
}
.rb-export-check .d {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}

/* Solid danger button — for irreversible-with-confirmation actions */
.rb-btn-danger-solid {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.rb-btn-danger-solid:hover {
  background: var(--danger);
  filter: brightness(1.1);
  color: #fff;
  border-color: var(--danger);
}

.mg-user-name {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
  min-width: 0;
}
.mg-user-name:hover { color: var(--accent); }
.mg-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg-muted) 100%);
  border: 0.5px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--accent);
  flex-shrink: 0;
}

.mg-role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--text-muted);
  border: 0.5px solid transparent;
  white-space: nowrap;
}
.mg-role-admin {
  background: var(--accent2-soft);
  color: var(--accent2);
  border-color: var(--accent2);
}
.mg-role-super_admin {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

.mg-actions { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }

.mg-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.mg-filters .rb-input { max-width: 280px; }
.mg-filters select.rb-input { max-width: 180px; }

.mg-kv-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 14px;
  padding: 8px 20px;
  border-bottom: 0.5px solid var(--border);
  font-size: 13px;
}
.mg-kv-row:last-child { border-bottom: 0; }
.mg-kv-row .k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

@media (max-width: 880px) {
  .mg { padding: 20px 16px 60px; }
  .mg-title { font-size: 24px; }
  .mg-table-head, .mg-user-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .mg-table-head { display: none; }
}

/* ============================================================
   PUBLIC NAV — minimal floating header for unauthed visitors
   ============================================================ */
.rb-pubnav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 0.5px solid var(--border-strong);
}
.rb-pubnav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.rb-pubnav-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--text);
  font-weight: 500;
}
.rb-pubnav-brand:hover .rb-pubnav-name { color: var(--accent); }
.rb-pubnav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  transition: transform 220ms;
}
.rb-pubnav-brand:hover .rb-pubnav-dot { transform: scale(1.15) rotate(45deg); }
.rb-pubnav-name { transition: color 200ms; }
.rb-pubnav-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rb-pubnav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: color 200ms, border-color 200ms, background 200ms;
  text-decoration: none;
}
.rb-pubnav-btn svg {
  width: 13px;
  height: 13px;
}
.rb-pubnav-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.rb-pubnav-btn-soft {
  border-color: transparent;
  background: transparent;
}
.rb-pubnav-btn-soft:hover {
  background: var(--bg-muted);
  border-color: transparent;
  color: var(--accent);
}

/* Pubnav: burger is hidden on desktop, shown on mobile (≤760px) where it
   replaces the inline action buttons + toggles. Same pattern as authbar. */
.rb-pubnav-burger { display: none; }

@media (max-width: 760px) {
  /* Three flex items: burger, brand, actions. With space-between the brand
     ends up centered — we want it next to the burger, so push actions to
     the right with margin-left: auto and let the brand sit on the left. */
  .rb-pubnav-inner { padding: 0 12px; height: 48px; gap: 10px; }
  .rb-pubnav-burger { display: inline-flex; }
  .rb-pubnav-toggles-desk { display: none !important; }
  .rb-pubnav-actions { gap: 6px; margin-left: auto; }
  .rb-pubnav-btn-soft { padding: 6px 12px; font-size: 12px; }
  .rb-pubnav-btn-soft span { display: inline; }
  .rb-pubnav-name { font-size: 11px; }
  .rb-pubnav-brand { min-width: 0; overflow: hidden; flex-shrink: 1; }
  .rb-pubnav-brand .rb-pubnav-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Search modal */
.rb-search-bg {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 64px 24px 24px;
  overflow-y: auto;
  animation: rb-fadein 180ms ease;
}
@keyframes rb-fadein { from { opacity: 0; } to { opacity: 1; } }
.rb-search {
  width: min(620px, 100%);
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border-strong);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 96px);
  animation: rb-slidein 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes rb-slidein { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
.rb-search-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 0.5px solid var(--border);
}
.rb-search-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--text-faint);
  flex-shrink: 0;
}
.rb-search-input {
  flex: 1;
  background: transparent;
  border: 0;
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  padding: 4px 0;
  min-width: 0;
}
.rb-search-input::placeholder { color: var(--text-faint); }
.rb-search-close {
  background: transparent;
  border: 0;
  color: var(--text-faint);
  font-size: 22px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.rb-search-close:hover { color: var(--accent); background: var(--bg-muted); }

.rb-search-meta {
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 0.5px solid var(--border);
}

.rb-search-results {
  overflow-y: auto;
  flex: 1;
  padding: 6px 0;
}
.rb-search-empty {
  padding: 36px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}
.rb-search-empty .rb-empty-mark {
  font-size: 28px;
  color: var(--accent);
  margin-bottom: 10px;
  font-family: var(--font-serif);
}

.rb-search-item {
  display: grid;
  grid-template-columns: 40px 1fr 18px;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
  text-decoration: none;
  color: var(--text);
  transition: background 160ms;
  position: relative;
}
.rb-search-item:hover {
  background: var(--accent-soft);
}
.rb-search-item:hover .rb-search-arrow {
  transform: translateX(2px);
  color: var(--accent);
}
.rb-search-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg-muted) 100%);
  border: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--accent);
  overflow: hidden;
}
.rb-search-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rb-search-body { min-width: 0; }
.rb-search-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rb-search-item:hover .rb-search-name { color: var(--accent); }
.rb-search-sub {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rb-search-arrow {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-faint);
  transition: color 200ms, transform 200ms;
}

.rb-search-foot {
  padding: 12px 18px;
  border-top: 0.5px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  display: flex;
  gap: 16px;
  align-items: center;
}
.rb-search-foot a { color: var(--text-muted); transition: color 200ms; margin-left: auto; }
.rb-search-foot a:first-of-type { margin-left: auto; }
.rb-search-foot a + a { margin-left: 0; }
.rb-search-foot a:hover { color: var(--accent); }

/* When pubnav is present, fix sticky stacking with content-internal sticky */
.rb-pubnav + .pf::before { top: 80px; }
.rb-pubnav + .pf::after  { top: 83px; }

@media (max-width: 720px) {
  .rb-search-bg { padding: 32px 12px; }
  .rb-search { max-height: calc(100vh - 64px); }
}

/* ============================================================
   AUTH BAR — global nav shown when user is logged in
   ============================================================ */
.rb-authbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-elevated);
  border-bottom: 0.5px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.rb-authbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  height: 38px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.rb-authbar-left {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.rb-authbar-brand {
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  border-right: 0.5px solid var(--border);
  padding-right: 14px;
}
.rb-authbar-brand:hover { color: var(--accent); }
.rb-authbar-links {
  display: flex;
  align-items: center;
  gap: 14px;
  /* `clip` (not `auto`) on desktop so the bar doesn't hijack horizontal
     wheel scroll when cursor passes over it. The full link set fits on
     wide screens; on mobile we switch back to `auto` so users can drag
     through them if they spill past the viewport. */
  overflow-x: clip;
  min-width: 0;
  scrollbar-width: none;
}
.rb-authbar-links::-webkit-scrollbar { display: none; }
@media (max-width: 760px) {
  .rb-authbar-links { overflow-x: auto; }
}
.ab-link {
  color: var(--text-muted);
  white-space: nowrap;
  transition: color 160ms;
  position: relative;
  padding: 2px 0;
}
.ab-link:hover { color: var(--text); }
.ab-link.is-active {
  color: var(--accent);
}
.ab-link-admin {
  position: relative;
  color: var(--accent2);
  font-weight: 500;
}
.ab-link-admin::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--accent2);
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.ab-link-admin:hover { color: var(--accent2); }
.ab-link-admin.is-active { color: var(--accent2); }
.ab-link-admin.is-active::after { background: var(--accent2); }
.ab-link.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -10px;
  height: 2px;
  background: var(--accent);
}
.ab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  margin-left: 6px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0;
  vertical-align: 1px;
  animation: rb-pulse 1.6s ease-in-out infinite;
}
.rb-authbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.rb-authbar-user {
  color: var(--text-faint);
  white-space: nowrap;
}
.rb-authbar-logout-form { margin: 0; }
.rb-authbar-logout {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  color: var(--text-muted);
  background: transparent;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 3px 10px;
  cursor: pointer;
  transition: color 160ms, border-color 160ms, background 160ms;
}
.rb-authbar-logout:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Tiny icon button (search, about) — slot-fits the auth bar's height */
.rb-authbar-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--text-muted);
  border: 0.5px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: color 160ms, background 160ms, border-color 160ms;
}
.rb-authbar-icon:hover {
  color: var(--accent);
  background: var(--bg-muted);
}

/* Burger button — only shown on mobile; opens the drawer */
.rb-authbar-burger {
  display: none;
  width: 32px;
  height: 32px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.rb-authbar-burger span {
  display: block;
  width: 14px;
  height: 1.5px;
  background: var(--text);
  border-radius: 1px;
}

@media (max-width: 760px) {
  .rb-authbar-inner { padding: 0 12px; height: 48px; gap: 10px; }
  .rb-authbar-brand { font-size: 10px; padding-right: 0; border-right: 0; }
  .rb-authbar-user,
  .rb-authbar-links,
  .rb-authbar-toggles-desk { display: none; }
  .rb-authbar-burger { display: inline-flex; }
  .ab-link.is-active::after { bottom: -13px; }
}

/* ============================================================
   MOBILE DRAWER — slide-in panel triggered by the authbar burger
   ============================================================ */
.rb-drawer-bg {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.40);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  justify-content: flex-start;
}
.rb-drawer {
  width: min(320px, 88vw);
  max-width: 360px;
  height: 100%;
  background: var(--bg-elevated);
  border-right: 0.5px solid var(--border-strong);
  box-shadow: var(--shadow-pop);
  display: flex;
  flex-direction: column;
  padding: 18px 18px 24px;
  gap: 4px;
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
  overflow-y: auto;
}
.rb-drawer-slide-from { transform: translateX(-100%); }
.rb-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.rb-drawer-brand {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text);
  font-weight: 500;
}
.rb-drawer-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--text-muted);
  border: 0;
  background: var(--bg-muted);
  cursor: pointer;
  line-height: 1;
}
.rb-drawer-close:hover { color: var(--accent); background: var(--bg-deep); }

.rb-drawer-links {
  display: flex;
  flex-direction: column;
  margin: 4px -6px;
}
.rb-drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px;
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background 160ms, color 160ms;
}
.rb-drawer-link:hover { background: var(--bg-muted); color: var(--accent); }
.rb-drawer-link.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}
.rb-drawer-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  letter-spacing: 0.04em;
}

.rb-drawer-rule {
  height: 0.5px;
  background: var(--border);
  margin: 10px -6px;
}
.rb-drawer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  gap: 12px;
}
.rb-drawer-rowlabel {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.rb-drawer-toggles {
  display: flex;
  gap: 6px;
  align-items: center;
}
.rb-drawer-row-user {
  margin-top: auto;
  padding-top: 12px;
}
.rb-drawer-row-user .rb-drawer-rowlabel {
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 12px;
}

/* When auth bar is present and the page also has its own sticky title bar
   (admin dashboard, builder), keep them stacked nicely */
.rb-authbar + .dh > .dh-top,
.rb-authbar + .bd > .bd-top {
  top: 38px;
}
@media (max-width: 760px) {
  .rb-authbar + .dh > .dh-top,
  .rb-authbar + .bd > .bd-top { top: 44px; }
}

/* Slim variant of dh-top for admin pages where authbar already provides nav */
.dh-top-slim {
  padding: 12px 28px !important;
  background: transparent !important;
  border-bottom: 0.5px solid var(--border) !important;
  min-height: 0;
}
.dh-top-slim .dh-brand {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}
.dh-top-slim .rb-eyebrow {
  color: var(--text-muted);
  text-transform: uppercase;
}

/* ============================================================
   404 ERROR page
   ============================================================ */
.er {
  min-height: calc(100vh - 100px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
}
.er-inner {
  max-width: 480px;
  text-align: center;
}
.er-mark {
  font-family: var(--font-serif);
  font-size: 120px;
  line-height: 0.9;
  color: var(--accent);
  letter-spacing: -0.05em;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
}
.er-mark::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--accent);
  margin: 16px auto 0;
  opacity: 0.5;
}
.er-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  text-transform: lowercase;
  margin-bottom: 14px;
}
.er-title {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.er-text {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 28px;
}
.er-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   CONFIRM dialog — replaces browser confirm()
   ============================================================ */
.rb-confirm-bg {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: rb-fadein 160ms ease;
}
.rb-confirm {
  background: var(--bg-elevated);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-lg);
  max-width: 420px;
  width: 100%;
  padding: 24px 26px 20px;
  box-shadow: var(--shadow-pop), 0 20px 60px rgba(0, 0, 0, 0.18);
  animation: rb-slidein 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.rb-confirm-title {
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  color: var(--text);
}
.rb-confirm-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: 22px;
  white-space: pre-line;
}
.rb-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.rb-btn-danger-solid {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.rb-btn-danger-solid:hover {
  background: var(--danger);
  filter: brightness(1.08);
  color: #fff;
  border-color: var(--danger);
}

/* ============================================================
   TOAST notifications
   ============================================================ */
.rb-toasts {
  position: fixed;
  bottom: 18px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}
.rb-toast {
  pointer-events: auto;
  background: var(--bg-elevated);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  max-width: 360px;
  font-size: 13px;
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: transform 180ms ease, opacity 180ms ease;
}
.rb-toast.is-leaving { opacity: 0; transform: translateX(20px); }
.rb-toast::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}
.rb-toast.is-success::before { background: var(--success); }
.rb-toast.is-error::before   { background: var(--danger); }
.rb-toast.is-info::before    { background: var(--accent); }
.rb-toast .close {
  margin-left: auto;
  color: var(--text-faint);
  cursor: pointer;
  padding: 0 4px;
}
.rb-toast .close:hover { color: var(--text); }

/* ============================================================
   THEME toggle (small segmented control)
   ============================================================ */
.rb-theme-toggle {
  display: inline-flex;
  align-items: center;
  border: 0.5px solid var(--border-strong);
  border-radius: 999px;
  padding: 2px;
  gap: 0;
  background: var(--bg-elevated);
}
.rb-theme-toggle button {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  transition: color 200ms, background 200ms;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
}
.rb-theme-toggle button:hover { color: var(--text); }
.rb-theme-toggle button.is-active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.rb-theme-toggle svg { width: 13px; height: 13px; stroke-width: 1.5; fill: none; stroke: currentColor; }

/* Style toggle — visually mirrors the theme toggle so they sit side-by-side.
   Slightly smaller buttons + a hint of secondary accent for the active state
   to signal "different axis" at a glance. */
.rb-style-toggle {
  display: inline-flex;
  align-items: center;
  border: 0.5px solid var(--border-strong);
  border-radius: 999px;
  padding: 2px;
  gap: 0;
  background: var(--bg-elevated);
}
.rb-style-toggle button {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  transition: color 200ms, background 200ms;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
}
.rb-style-toggle button:hover { color: var(--text); }
.rb-style-toggle button.is-active {
  background: var(--accent2);
  color: #fff;
  box-shadow: 0 0 0 2px var(--accent2-glow);
}
.rb-style-toggle svg { width: 14px; height: 14px; stroke-width: 1.5; fill: none; stroke: currentColor; }

/* ============================================================
   HERO (home page, owner portfolio) — guest CTA
   ============================================================ */
.pf-cta {
  margin-top: 40px;
  padding: 18px 20px;
  border: 0.5px dashed var(--border-strong);
  border-radius: var(--radius);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.pf-cta-text {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 60ch;
}
.pf-cta-text b { color: var(--text); font-weight: 500; }

/* ============================================================
   GUEST builder (single-column document editor)
   ============================================================ */
.gb {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
}
.gb-top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-elevated);
  border-bottom: 0.5px solid var(--border-strong);
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.gb-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  transition: background 160ms, color 160ms;
}
a.gb-brand:hover { background: var(--bg-muted); color: var(--accent); }
.gb-brand b {
  color: var(--text);
  font-weight: 500;
  font-family: var(--font-sans);
  letter-spacing: -0.005em;
  font-size: 13px;
}
.gb-brand-back {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-faint);
  line-height: 1;
  transition: color 160ms, transform 160ms;
}
a.gb-brand:hover .gb-brand-back {
  color: var(--accent);
  transform: translateX(-2px);
}
.gb-brand-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--text-faint);
  letter-spacing: 0.04em;
}
.gb-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gb-save-state {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  margin-right: 4px;
}
.gb-save-state.is-dirty { color: var(--accent); }
.gb-save-state.is-saved { color: var(--success); }

.gb-doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 60px 120px;
  width: 100%;
}
.gb-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-bottom: 22px;
  text-transform: lowercase;
}
.gb-name-input {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border: 0;
  background: transparent;
  width: 100%;
  padding: 4px 0;
  color: var(--text);
  font-family: inherit;
  margin-bottom: 6px;
}
.gb-name-input:focus { outline: none; }
.gb-headline-input {
  font-size: 14px;
  color: var(--text-muted);
  border: 0;
  background: transparent;
  width: 100%;
  padding: 4px 0;
  font-family: inherit;
}
.gb-headline-input:focus { outline: none; color: var(--text); }
.gb-divider {
  height: 0.5px;
  background: var(--border-strong);
  margin: 28px 0 32px;
}
.gb-contacts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.gb-contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gb-contact label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.gb-contact input {
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid var(--border);
  padding: 4px 0;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
}
.gb-contact input:focus { outline: none; border-color: var(--accent); }
.gb-summary-input {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
}
.gb-summary-input:focus { outline: none; }
.gb-section {
  padding: 32px 0;
  border-top: 0.5px solid var(--border);
  position: relative;
}
.gb-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}
.gb-section-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.gb-section-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.gb-section-title-input {
  font-size: 16px;
  font-weight: 500;
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid transparent;
  padding: 2px 6px;
  margin-left: -6px;
  border-radius: var(--radius);
  font-family: inherit;
  color: var(--text);
  min-width: 200px;
}
.gb-section-title-input:hover { background: var(--bg-muted); }
.gb-section-title-input:focus { background: var(--bg-muted); border-color: var(--accent); outline: none; }
.gb-section-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  opacity: 0;
  transition: opacity 120ms;
}
.gb-section:hover .gb-section-actions { opacity: 1; }
.gb-section-actions button {
  padding: 4px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  border-radius: var(--radius);
}
.gb-section-actions button:hover { background: var(--bg-muted); color: var(--text); }
.gb-section-actions button.danger:hover { color: var(--danger); }
.gb-add-section {
  margin: 24px 0;
  width: 100%;
  padding: 14px;
  border: 0.5px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 13px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}
.gb-add-section:hover { background: var(--bg-muted); color: var(--text); }

/* Guest builder registration CTA */
.gb-cta {
  margin-top: 48px;
  padding: 24px 26px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg-elevated) 100%);
  border: 0.5px solid var(--accent);
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 22px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.gb-cta::before {
  /* Decorative top stripe */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-bright) 50%, var(--accent2) 100%);
  opacity: 0.7;
}
.gb-cta-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--bg-elevated);
  border: 0.5px solid var(--accent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gb-cta-title {
  font-family: var(--font-serif);
  font-size: 20px;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  color: var(--text);
}
.gb-cta-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}
.gb-cta-actions {
  display: flex;
  gap: 8px;
  flex-direction: column;
  align-items: stretch;
}
.gb-cta-actions .rb-btn { justify-content: center; }
@media (max-width: 720px) {
  .gb-cta { grid-template-columns: 1fr; gap: 14px; padding: 22px; }
  .gb-cta-actions { flex-direction: row; }
}

/* Mobile burger for builder sidebar */
.bd-burger {
  display: none;
  width: 36px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
}
@media (max-width: 980px) {
  .bd-burger { display: inline-flex; }
  .bd-sidebar.is-collapsed { display: none; }
}

/* ============================================================
   BUILDER — mobile compact layout for bd-top
   Hides non-essential elements (crumbs, save-status text, publish pill)
   and stacks actions so they fit on a phone. The sidebar burger and the
   save button remain the priority controls.
   ============================================================ */
@media (max-width: 760px) {
  .bd-top { padding: 10px 12px; gap: 8px; flex-wrap: nowrap; }
  .bd-top-left { gap: 8px; flex: 1; min-width: 0; flex-wrap: nowrap; }
  .bd-top-right { gap: 6px; flex-shrink: 0; }
  /* Crumbs are pure navigation chrome — drop them on phones */
  .bd-crumbs { display: none; }
  /* Status pills become icon-only on phone — keep the action accessible
     but free up horizontal space for the title input. Min-width 32px so
     the touch target stays usable. */
  .bd-status-pill { padding: 6px 10px; min-width: 32px; min-height: 28px; }
  .bd-status-pill > span:not(.bd-status-dot) { display: none; }
  .bd-status-home > span:last-child { display: none; }
  .bd-status-dot { width: 8px; height: 8px; }
  /* Title input shrinks to fit; ellipsises if too long */
  .bd-resume-title {
    min-width: 0;
    width: 100%;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  /* Save-status: hidden on phone — autosave is implicit, text is noise */
  .bd-save-status { display: none; }
  /* "превью" link — hidden on phone (still reachable via slug click in admin) */
  .bd-top-right > a:not(.rb-btn-primary) { display: none; }
  /* Export menu button stays — collapses to ▾ glyph only */
  .bd-export-wrap .rb-btn > span:first-child { display: none; }
  .bd-export-wrap .rb-btn { padding: 6px 8px; }
  .bd-top-right .rb-btn-primary { padding: 6px 10px; font-size: 11px; }
}

/* ============================================================
   BUILDER — mobile compact layout for the editor body
   bd-row collapse, bd-item padding, bd-skills grid, bd-thumb grid,
   bd-editor-head wraps. Touch targets ≥36px.
   ============================================================ */
@media (max-width: 760px) {
  .bd-editor { padding: 18px 14px 80px; }

  /* Editor head: stack title + right actions on phone */
  .bd-editor-head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 18px;
  }
  .bd-editor-head > div:first-child { width: 100%; }
  .bd-editor-title { font-size: 20px; }
  .bd-editor-head .right {
    flex-wrap: wrap;
    gap: 6px 8px;
    padding-bottom: 0;
    justify-content: flex-start;
  }
  .bd-editor-head .right .bd-vis {
    flex: 1 1 auto;
    min-width: 80px;
  }
  .bd-editor-head .right .rb-btn-danger {
    flex: 1 1 100%;
    text-align: center;
    padding: 8px 10px;
  }

  /* Display-mode switcher — bigger touch */
  .bd-modes button { width: 32px; height: 32px; }

  /* Items: drop the grip column, tighten padding */
  .bd-item {
    grid-template-columns: 1fr;
    padding: 14px 14px 12px;
    gap: 0;
  }
  .bd-item-grip { display: none; }
  .bd-item-fields { gap: 10px; }
  .bd-item-actions {
    /* Always visible on phone (no hover); place at top-right */
    opacity: 1 !important;
    top: 8px;
    right: 8px;
  }
  .bd-item-actions button { width: 30px; height: 30px; }

  /* Multi-column rows collapse to one column */
  .bd-row-2,
  .bd-row-3,
  .bd-row-stat { grid-template-columns: 1fr; }

  /* Skills grid: one-per-row chips */
  .bd-skills-grid { grid-template-columns: 1fr 1fr; gap: 8px; }

  /* Thumbnail grids (gallery editor) — 2 columns instead of 4 */
  .bd-thumb-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .bd-thumb-cap { font-size: 11px; }

  /* Drop areas: less padding, easier tap */
  .bd-drop { padding: 18px 14px; min-height: 90px; }
  .bd-drop-title { font-size: 13px; }
  .bd-drop-hint { font-size: 11px; }

  /* iOS Safari prevents zoom-on-focus only when font-size ≥ 16px on inputs.
     We use 16px on touchable text controls; meta labels stay smaller. */
  .bd-input { font-size: 16px; padding: 8px 0; }
  .bd-input.mono { font-size: 14px; }
  .bd-textarea { font-size: 16px; min-height: 80px; padding: 10px; }

  /* Section list cards in the sidebar — bigger touch */
  .bd-section { padding: 12px 10px; min-height: 44px; }

  /* Editor footer (autosave hint + + new card): stack */
  .bd-editor-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 20px;
  }
  .bd-editor-foot .meta { font-size: 10px; text-align: center; }
  .bd-new { width: 100%; text-align: center; padding: 12px; }

  /* Inputs that aren't .bd-input (login, search etc.) too */
  .rb-input,
  .rb-textarea,
  .lg-input,
  .bd-resume-title,
  .gb-name-input,
  .gb-headline-input,
  .gb-summary-input,
  .gb-contact input { font-size: 16px; }
}

/* Very narrow phones — drop multi-col skill and thumb grids to single col */
@media (max-width: 380px) {
  .bd-skills-grid,
  .bd-thumb-grid { grid-template-columns: 1fr; }
  .bd-editor { padding: 14px 10px 80px; }
  .bd-item { padding: 12px 12px 10px; }
}

@media (max-width: 768px) {
  .gb-doc { padding: 28px 20px 80px; }
  .gb-name-input { font-size: 28px; }
  .gb-top { padding: 10px 14px; gap: 10px; }
  .gb-actions { gap: 6px; width: 100%; }
  .gb-actions .rb-btn { padding: 6px 10px; font-size: 11px; }
  .gb-save-state { width: 100%; order: -1; }
  .gb-contacts { grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  .gb-section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .gb-section-actions { opacity: 1; }
  /* Drop the "гостевой режим" tag — too wide for the bar on phone */
  .gb-brand-tag { display: none; }
  .gb-brand { padding: 4px 8px 4px 6px; }
}
@media (max-width: 480px) {
  .gb-doc { padding: 22px 16px 60px; }
  .gb-name-input { font-size: 24px; }
  .gb-contacts { grid-template-columns: 1fr; }
}

/* Generic empty-state */
.rb-empty {
  text-align: center;
  padding: 40px 24px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
  border: 0.5px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  margin: 8px 0;
  background:
    radial-gradient(600px 200px at 50% 50%, var(--accent-glow), transparent 70%);
}
.rb-empty .rb-eyebrow {
  margin-bottom: 8px;
  color: var(--accent);
  letter-spacing: 0.14em;
}

/* Mode radio group — used on site settings (home_mode) */
.rb-mode-radios {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  width: 100%;
}
.rb-mode-radios label {
  display: block;
  padding: 12px 14px;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 160ms, background 160ms;
  background: var(--bg-elevated);
}
.rb-mode-radios label:hover { border-color: var(--accent); }
.rb-mode-radios label.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}
.rb-mode-radios input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  display: none;
}
.rb-mode-radios .t {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
}
.rb-mode-radios label.is-active .t { color: var(--accent); }
.rb-mode-radios .d {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Settings/profile page */
.st {
  max-width: 760px;
  margin: 0 auto;
  padding: 36px 28px 80px;
}
@media (max-width: 720px) {
  .st { padding: 24px 16px 60px; }
}
.st-section {
  margin-bottom: 36px;
}
.st-section + .st-section {
  padding-top: 24px;
  border-top: 0.5px solid var(--border);
}
.st-section h2 {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 2px;
  letter-spacing: -0.005em;
}
.st-section .hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.st-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
  padding: 12px 0;
  border-top: 0.5px solid var(--border);
  align-items: center;
}
.st-row:first-of-type { border-top: 0; }
.st-row .k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
@media (max-width: 768px) {
  .st-row { grid-template-columns: 1fr; gap: 6px; }
}

/* Print-only QR block — hidden on screen, shown in print */
.pf-print-qr { display: none; }

/* ============================================================
   MOTION & FX — scroll progress, cursor aurora, magnetic buttons,
   staggered reveal, sticky-pin glow. All gracefully degrade.
   ============================================================ */

/* Scroll progress bar — pinned to top of viewport.
   Width is driven by JS-set transform: scaleX(N). transform-origin:left so
   it expands rightward. Z-index above everything except top-priority modals. */
.rb-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  z-index: 9999;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-bright) 50%, var(--accent2) 100%);
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: transform 60ms linear;
  pointer-events: none;
  box-shadow: 0 0 12px var(--accent-glow);
}

/* Cursor aurora — radial spotlight following the pointer.
   The card paints a soft accent-tinted glow centered on (--mx, --my).
   Only kicks in when the pointer enters; idle state is invisible.
   We use a ::before pseudo so existing borders/shadows stay intact. */
.rb-aurora {
  position: relative;
  isolation: isolate;
  --mx: 50%;
  --my: 50%;
}
.rb-aurora::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(
    220px circle at var(--mx) var(--my),
    var(--accent-glow),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
}
.rb-aurora:hover::before { opacity: 1; }
.rb-aurora > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .rb-aurora::before { display: none; }
}

/* Magnetic buttons — small translate toward cursor.
   --mag-x / --mag-y are set by JS on pointermove; default 0. */
.rb-btn-primary,
[data-magnetic] {
  --mag-x: 0px;
  --mag-y: 0px;
  transform: translate3d(var(--mag-x), var(--mag-y), 0);
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1),
              background 160ms, border-color 160ms, color 160ms, box-shadow 160ms;
}
.rb-btn-primary:hover {
  /* Keep the existing lift but composed with the magnetic offset.
     The base :hover rule sets translateY; we override here so the
     magnetic vars don't get clobbered. */
  transform: translate3d(var(--mag-x), calc(var(--mag-y) - 1px), 0);
}

/* Staggered reveal — children of a section animate in with cascading
   delay. Uses :nth-child so no JS needed. Capped at 8 items so very
   long lists don't end with multi-second delays. */
.pf-section.pf-reveal.is-visible > div > *:nth-child(1) { animation-delay: 0ms;   }
.pf-section.pf-reveal.is-visible > div > *:nth-child(2) { animation-delay: 60ms;  }
.pf-section.pf-reveal.is-visible > div > *:nth-child(3) { animation-delay: 120ms; }
.pf-section.pf-reveal.is-visible > div > *:nth-child(4) { animation-delay: 180ms; }
.pf-section.pf-reveal.is-visible > div > *:nth-child(5) { animation-delay: 240ms; }
.pf-section.pf-reveal.is-visible > div > *:nth-child(6) { animation-delay: 300ms; }
.pf-section.pf-reveal.is-visible > div > *:nth-child(7) { animation-delay: 360ms; }
.pf-section.pf-reveal.is-visible > div > *:nth-child(8) { animation-delay: 420ms; }
.pf-section.pf-reveal.is-visible > div > .pf-item,
.pf-section.pf-reveal.is-visible > div > .pf-cred,
.pf-section.pf-reveal.is-visible > div > .pf-stat,
.pf-section.pf-reveal.is-visible > div > .pf-hero,
.pf-section.pf-reveal.is-visible > div > .pf-video-item {
  animation: rb-stagger-in 520ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes rb-stagger-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .pf-section.pf-reveal.is-visible > div > * { animation: none !important; }
}

/* Sticky-pin glow — when the section meta is stuck to the top of the
   viewport (using position: sticky), a thin accent line appears under it
   to signal "this is your current section". CSS-only via @supports for
   `animation-timeline`; older browsers just don't get the glow. */
@supports (animation-timeline: view()) {
  .pf-section-meta {
    /* Reserved for future scroll-driven flourishes (e.g. number scale). */
  }
}

/* Hover-lift refinement on stat / hero / cred cards under modern style:
   the aurora already provides the bling, so soften the existing translateY
   to avoid stacking two motion cues. */
[data-style="modern"] .pf-stat:hover,
[data-style="modern"] .pf-cred:hover,
[data-style="modern"] .pf-hero:hover {
  transform: translateY(-2px);
}

/* ============================================================
   PRINT — text-only, no decorative elements
   ============================================================ */
@page {
  size: A4;
  margin: 12mm 14mm 10mm 14mm;
}
@media print {
  /* Force colour fidelity on accent text (rust headers, dots) — Chromium
     respects this; Firefox/Safari follow when print dialog "background graphics"
     is on, but `print-color-adjust` is the modern hint. */
  * {
    -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
  }
  html, body {
    background: #fff !important;
    color: #1a1a1a !important;
    background-image: none !important;
    overflow: visible !important;
  }
  body { font-size: 10pt; line-height: 1.4; }

  .pf {
    max-width: 100%;
    padding: 0;
    color: #1a1a1a;
  }
  .pf::before, .pf::after { display: none !important; }

  /* Hide everything that's interactive, decorative, or media-heavy.
     Keep section content intact — only chrome and effects are removed. */
  .pf-eyebrow,
  .pf-actions,
  .pf-footer,
  .pf-cta,
  .pf-fab,
  .pf-fb-bg,
  .pf-doc-modal,
  .pf-lightbox,
  .rb-theme-toggle,
  .rb-style-toggle,
  .rb-scroll-progress,
  .rb-toasts,
  .rb-confirm-bg,
  .rb-drawer-bg,
  .rb-search-bg,
  .rb-skip,
  .rb-carousel-nav,
  .rb-carousel-arrows,
  .rb-carousel-dots,
  .rb-carousel-counter,
  /* Aurora/animation pseudo-elements */
  .rb-aurora::before,
  /* Media-heavy sections — render as a summary text instead */
  .pf-thumbs,
  .pf-gallery-count,
  .pf-video-frame,
  .pf-cred-actions,
  .pf-cred-download {
    display: none !important;
  }

  /* Sticky positioning would pin headers awkwardly during print — kill it */
  .pf-section-meta,
  .pf-header,
  .rb-authbar,
  .rb-pubnav {
    position: static !important;
    top: auto !important;
    box-shadow: none !important;
  }

  /* Reset any reveal animation state so the content actually appears */
  .pf-reveal, .pf-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .pf-section.pf-reveal.is-visible > div > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Header: photo + identity stays as a horizontal block */
  .pf-header { padding-bottom: 4mm; border-bottom: 0.5pt solid #B5B0A4; margin-bottom: 5mm; }
  .pf-header-main { gap: 14pt; }
  .pf-name {
    font-family: Georgia, serif;
    color: #000;
    font-size: 24pt;
    line-height: 1.0;
    letter-spacing: -0.02em;
    margin-bottom: 3pt;
  }
  .pf-headline {
    font-size: 11pt;
    color: #555;
    font-style: italic;
    margin-bottom: 4pt;
    max-width: none;
  }
  .pf-photo-wrap,
  .pf-photo,
  .pf-photo-initials {
    width: 70px !important;
    height: 70px !important;
    border-radius: 35px !important;
    border: 0.5pt solid #B5B0A4 !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  .pf-photo-wrap::before,
  .pf-photo-wrap::after { display: none !important; }
  .pf-contact-row {
    font-family: ui-monospace, monospace;
    font-size: 8pt;
    color: #444;
    line-height: 1.5;
  }
  .pf-contact-row a { color: #444; }
  .pf-facts {
    font-family: ui-monospace, monospace;
    font-size: 7.5pt;
    color: #777;
    margin-top: 1mm;
  }

  /* Section layout — collapse the 110px meta column into inline header
     above the content. Saves horizontal real estate, no awkward gap. */
  .pf-section {
    display: block !important;
    page-break-inside: auto;
    padding: 4mm 0;
    border-top: 0.5pt solid #ddd;
  }
  .pf-section:first-of-type { border-top: 0; }
  .pf-section-meta {
    display: block !important;
    margin-bottom: 3mm;
    padding-top: 0;
  }
  .pf-section-meta .pf-section-num {
    font-family: ui-monospace, monospace;
    font-size: 7pt;
    color: #993C1D;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: inline-block;
    margin-right: 6pt;
    font-weight: 500;
  }
  .pf-section-num-big {
    font-family: ui-monospace, monospace !important;
    font-size: 8pt !important;
    color: #993C1D !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: inline !important;
    margin-right: 6pt;
    font-weight: 500;
    line-height: 1 !important;
  }
  .pf-section-num-big::before,
  .pf-section-num-big::after { display: none !important; }
  .pf-section-title {
    display: inline-block !important;
    font-family: Georgia, serif !important;
    font-size: 13pt !important;
    font-weight: bold !important;
    color: #1a1a1a !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    border-bottom: 0.5pt solid #C7C2B6;
    padding-bottom: 2pt;
    margin-bottom: 4pt;
    width: 100%;
  }

  .pf-summary {
    font-style: normal;
    font-family: Georgia, serif;
    font-size: 10pt;
    color: #333;
    margin: 4mm 0;
  }
  .pf-summary::before { display: none !important; }
  .pf-summary::first-letter { font-size: 1em; color: inherit; float: none; padding: 0; }

  /* Stat / achievement cards — flat, no glow */
  .pf-stat {
    background: #f5f3ee;
    border: 0.5pt solid #ddd;
    page-break-inside: avoid;
    box-shadow: none !important;
  }
  .pf-stat::after { display: none !important; }
  .pf-achievements { display: block !important; }
  .pf-achievements .pf-stat { margin-bottom: 3mm; }

  /* Item rows (experience / custom) */
  .pf-item {
    display: block !important;
    page-break-inside: avoid;
    margin-bottom: 4mm;
  }
  .pf-item .pf-period {
    font-family: ui-monospace, monospace;
    font-size: 8pt;
    color: #888;
    margin-bottom: 1mm;
  }
  .pf-item-title {
    font-size: 10.5pt;
    font-weight: bold;
    color: #1a1a1a;
    margin-bottom: 1pt;
  }
  .pf-item-sub {
    font-size: 9pt;
    color: #666;
    margin-bottom: 1pt;
  }
  .pf-item-desc {
    font-size: 9.5pt;
    color: #333;
  }
  /* Credentials become plain bullet list */
  .pf-creds {
    display: block !important;
  }
  .pf-cred {
    display: block;
    padding: 2mm 0;
    background: none !important;
    border: 0;
    border-bottom: 0.5pt dotted #ddd;
    page-break-inside: avoid;
    box-shadow: none !important;
  }
  .pf-cred:last-child { border-bottom: 0; }
  .pf-cred::after, .pf-cred::before { display: none !important; }
  .pf-cred-icon { display: none; }
  .pf-cred-title { font-size: 10pt; font-weight: bold; color: #1a1a1a; }
  .pf-cred-sub, .pf-cred-desc { font-size: 9pt; color: #555; }
  .pf-cred-period {
    font-family: ui-monospace, monospace;
    font-size: 8pt;
    color: #888;
  }

  /* Gallery and video become text-only references */
  .pf-gallery-item, .pf-video-item {
    padding: 2mm 0;
    border-bottom: 0.5pt solid #eee;
    page-break-inside: avoid;
  }
  .pf-gallery-title { font-size: 10.5pt; font-weight: bold; }
  .pf-gallery-desc { font-size: 9pt; color: #333; }
  .pf-video-title { font-size: 10.5pt; font-weight: bold; }
  .pf-video-sub, .pf-video-desc { font-size: 9pt; color: #333; }

  /* No carousels in print — show all as static block-stacked rows.
     Disable mask, snap, and overflow which all conflict with print. */
  .rb-carousel,
  .rb-carousel.rb-carousel-wide,
  .rb-carousel.rb-carousel-narrow {
    display: block !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
    padding: 0 !important;
    cursor: default !important;
  }
  .rb-carousel > * {
    flex: none !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 3mm;
    scroll-snap-align: none;
  }

  /* Skills — pills flatten to inline text list grouped by category */
  .pf-skills-grid, .pf-skills-pills { display: block !important; }
  .pf-skill-group { page-break-inside: avoid; margin-bottom: 2mm; }
  .pf-skill-group-name {
    font-family: ui-monospace, monospace;
    font-size: 8pt;
    color: #993C1D;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1pt;
  }
  .pf-skill-pills { display: inline; }
  .pf-skill-pill {
    border: 0 !important;
    background: none !important;
    padding: 0 !important;
    font-size: 9.5pt;
    color: #222;
    display: inline !important;
    box-shadow: none !important;
  }
  .pf-skill-pill::after { content: ", "; }
  .pf-skill-pill:last-child::after { content: ""; }

  /* Language pill chips in header on print — flatter look, accent dots */
  .pf-header-langs { margin-top: 4mm; gap: 4px !important; }
  .pf-lang-chip {
    background: #fff !important;
    border: 0.5pt solid #C7C2B6 !important;
    padding: 1pt 5pt !important;
    font-size: 8pt !important;
  }
  .pf-lang-chip-name { color: #1a1a1a !important; font-weight: 500; }
  .pf-lang-chip-dots > span { background: #ccc !important; }
  .pf-lang-chip-dots > span.on { background: #993C1D !important; }

  /* Hero (project) cards — keep image, flatten card chrome */
  .pf-hero {
    page-break-inside: avoid;
    border: 0.5pt solid #ddd;
    box-shadow: none !important;
    background-image: none !important;
    margin-bottom: 4mm;
  }

  /* QR block in print — small grid: square QR + side text */
  .pf-print-qr {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 18px;
    align-items: center;
    margin-top: 14mm;
    padding-top: 6mm;
    border-top: 0.5pt solid #B5B0A4;
    page-break-inside: avoid;
  }
  .pf-print-qr-svg svg { width: 100px; height: 100px; display: block; }
  .pf-print-qr-eyebrow {
    font-family: ui-monospace, monospace;
    font-size: 8pt;
    color: #993C1D;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 3pt;
  }
  .pf-print-qr-title {
    font-size: 10pt;
    font-weight: 600;
    color: #1A1A1A;
    margin-bottom: 2pt;
  }
  .pf-print-qr-desc {
    font-size: 8.5pt;
    color: #555;
    line-height: 1.45;
    margin-bottom: 4pt;
  }
  .pf-print-qr-url {
    font-family: ui-monospace, monospace;
    font-size: 8pt;
    color: #993C1D;
    word-break: break-all;
  }

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

  /* Hide all global nav and floating UI from print */
  .rb-authbar,
  .rb-pubnav,
  .pf-fab,
  .pf-fb-bg,
  .rb-confirm-bg,
  .rb-toasts,
  .rb-skip,
  .bd-top,
  .bd-sidebar,
  .dh-top {
    display: none !important;
  }
}

/* ============================================================
   PRELOADER — optional «pen on paper» splash on public pages.
   Renders only when site_settings.preloader_enabled is on. JS in
   app.js adds .is-done after ~1.4s to fade it out. Pure-CSS fallback
   below guarantees it never blocks the page even with JS disabled.
   ============================================================ */
.rb-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  background-image: var(--texture);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  opacity: 1;
  transition: opacity 480ms ease, visibility 0s linear 480ms;
}
.rb-preloader.is-done {
  /* Cancel the auto-hide keyframe so the JS-driven fade transition wins.
     Without `animation: none` the running keyframe would clobber opacity. */
  animation: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* JS-disabled fallback: a slow background animation hides the splash after
   ~2.6s so the page never gets stuck behind it. JS adds `.is-done` earlier
   (~1.6s) for the smoother transition path. */
.rb-preloader {
  animation: rb-preloader-autohide 2.6s forwards;
}
@keyframes rb-preloader-autohide {
  0%, 80% { opacity: 1; }
  100%    { opacity: 0; visibility: hidden; pointer-events: none; }
}

.rb-preloader-stage {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px;
}
.rb-preloader-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
}

/* The "word" stage holds three layers stacked at the same coordinates:
   1. Ghost letterforms (faint, full-width — show where ink will land)
   2. Ink layer (accent, clipped left→right by writing animation)
   3. Pen tip (small ink-dot on the clip edge, slides along the word) */
.rb-preloader-word {
  position: relative;
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 80px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-style: italic;
}
.rb-preloader-ghost,
.rb-preloader-ink {
  display: block;
}
.rb-preloader-ghost {
  color: var(--border);
  opacity: 0.55;
}
.rb-preloader-ink {
  position: absolute;
  inset: 0;
  color: var(--accent);
  clip-path: inset(0 100% 0 0);
  animation: rb-preloader-write 1.4s cubic-bezier(0.55, 0.08, 0.35, 0.95) forwards;
}
@keyframes rb-preloader-write {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0%   0 0); }
}
.rb-preloader-nib {
  position: absolute;
  top: 60%;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow:
    0 0 0 2px var(--accent-glow),
    0 0 14px var(--accent);
  animation: rb-preloader-nib 1.4s cubic-bezier(0.55, 0.08, 0.35, 0.95) forwards;
}
@keyframes rb-preloader-nib {
  0%   { left: 0;    opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.rb-preloader-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-top: 4px;
}

/* Don't show preloader on admin/builder/print contexts — body class adds it */
.rb-with-preloader.rb-no-preloader .rb-preloader { display: none; }

@media (max-width: 560px) {
  .rb-preloader-word { font-size: 56px; }
  .rb-preloader-nib { width: 3px; height: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .rb-preloader,
  .rb-preloader-ink,
  .rb-preloader-nib { animation: none !important; }
  .rb-preloader { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media print {
  .rb-preloader { display: none !important; }
}

/* ============================================================
   STYLE: MODERN — cascade overrides.
   Strips editorial ornaments (dashed photo ring, double rules, bullet
   dot prefixes, mono section numbers) and reshapes a few specific
   components beyond what design tokens alone can change.
   Works under any theme (light/dark/auto).
   ============================================================ */
[data-style="modern"] body {
  background-image: var(--texture);
  background-attachment: fixed;
}

/* Portfolio header: no dashed ring, no orbit dot — clean photo */
[data-style="modern"] .pf-photo-wrap::before,
[data-style="modern"] .pf-photo-wrap::after { display: none; }
[data-style="modern"] .pf-photo,
[data-style="modern"] .pf-photo-initials {
  border-radius: 20px;          /* squircle instead of circle — feels modern */
  border: 0;
  box-shadow: var(--shadow-card);
  background: linear-gradient(135deg, var(--bg-muted) 0%, var(--accent-soft) 120%);
}
[data-style="modern"] .pf-photo-initials {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.02em;
}

/* Portfolio top stripes: hide the editorial double hairline above eyebrow */
[data-style="modern"] .pf::before,
[data-style="modern"] .pf::after { display: none; }
[data-style="modern"] .pf { padding-top: 36px; }

/* Eyebrow: no glowing bullet prefix */
[data-style="modern"] .pf-eyebrow > span:first-child::before { display: none; }
[data-style="modern"] .pf-eyebrow {
  border-bottom: 0.5px solid var(--border);
  padding-bottom: 14px;
  margin-bottom: 32px;
}

/* Sections: hide the accent dot on the divider rule */
[data-style="modern"] .pf-section::before { display: none; }
[data-style="modern"] .pf-section { border-top-color: var(--border); }

/* Big serif section number: hide the underline dash + dot accents */
[data-style="modern"] .pf-section-num-big::after,
[data-style="modern"] .pf-section-num-big::before { display: none; }
[data-style="modern"] .pf-section-num-big {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
/* Widen the meta column so big section titles don't overflow into content.
   Classic style uses tiny 11px uppercase titles in 110px; modern uses bold
   18px which needs ~150px for words like «ОБРАЗОВАНИЕ». */
[data-style="modern"] .pf-section {
  grid-template-columns: 150px 1fr;
  gap: 36px;
}
[data-style="modern"] .pf-section-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  word-break: break-word;
}
@media (max-width: 768px) {
  /* Single-column mobile: revert to default 1fr stack so the title sits
     above content, not in a cramped narrow column. */
  [data-style="modern"] .pf-section { grid-template-columns: 1fr; gap: 16px; }
}

/* Names & big serif titles → cleaner geometric Inter */
[data-style="modern"] .pf-name,
[data-style="modern"] .lg-title {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.025em;
}
[data-style="modern"] .pf-headline {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 400;
  color: var(--text-muted);
}
[data-style="modern"] .pf-summary {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
}

/* Landing: ditch the dotted bullet + decorative side rule */
[data-style="modern"] .ld-eyebrow::before {
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 1px;
}
[data-style="modern"] .ld-hero::before { display: none; }
[data-style="modern"] .ld-title {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
[data-style="modern"] .ld-title .ld-accent {
  font-style: normal;
  font-weight: 600;
  background-image: none;
  color: var(--accent);
}
[data-style="modern"] .ld-lead {
  font-family: var(--font-sans);
  font-style: normal;
  color: var(--text-muted);
}
[data-style="modern"] .ld-footer::before { display: none; }

[data-style="modern"] .ld-grid {
  background: transparent;
  border: 0;
  gap: 14px;
}
@media (max-width: 880px) {
  [data-style="modern"] .ld-grid { padding: 24px 20px; }
}
@media (max-width: 560px) {
  [data-style="modern"] .ld-grid { padding: 20px 16px; }
}
[data-style="modern"] .ld-card {
  background: var(--bg-elevated);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 220ms cubic-bezier(0.2,0.7,0.3,1), box-shadow 220ms, border-color 220ms;
}
[data-style="modern"] .ld-card::before { display: none; }
[data-style="modern"] .ld-card:hover {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
[data-style="modern"] .ld-card-title {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.01em;
}
[data-style="modern"] .ld-step-title {
  font-family: var(--font-sans);
  font-weight: 600;
}

/* Buttons: pill-shaped + accent glow */
[data-style="modern"] .rb-btn { border-radius: 999px; padding: 8px 16px; }
[data-style="modern"] .rb-btn-sm { padding: 5px 12px; }
[data-style="modern"] .rb-btn-primary {
  background-image: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 60%, var(--accent-deep) 100%);
  border-color: transparent;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.20) inset,
    0 2px 6px var(--accent-glow),
    0 8px 22px var(--accent-glow);
}
[data-style="modern"] .rb-btn-primary:hover {
  filter: brightness(1.04);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.20) inset,
    0 6px 18px var(--accent-glow),
    0 14px 32px var(--accent-glow);
}

[data-style="modern"] .rb-pill { border-radius: 999px; padding: 3px 10px; }
[data-style="modern"] .rb-input,
[data-style="modern"] .rb-textarea,
[data-style="modern"] .lg-input { border-radius: var(--radius); }

[data-style="modern"] .rb-authbar,
[data-style="modern"] .rb-pubnav,
[data-style="modern"] .bd-top { border-bottom-color: var(--border); }

[data-style="modern"] .rb-card,
[data-style="modern"] .bd-item,
[data-style="modern"] .dh-aside,
[data-style="modern"] .pf-stat,
[data-style="modern"] .pf-cred {
  border-radius: var(--radius-lg);
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}

[data-style="modern"] .rb-dropcap::first-letter { font-size: 2.6em; }

[data-style="modern"] .rb-modal,
[data-style="modern"] .rb-confirm,
[data-style="modern"] .pf-fb { border-radius: var(--radius-lg); }

[data-style="modern"] .pf-footer { border-top-color: var(--border); }
[data-style="modern"] .ld-footer { background: transparent; border-top: 0.5px solid var(--border); }

[data-style="modern"] .pf-photo-wrap {
  width: 88px; height: 88px;
}
[data-style="modern"] .pf-photo,
[data-style="modern"] .pf-photo-initials {
  width: 88px; height: 88px;
}
@media (max-width: 768px) {
  [data-style="modern"] .pf-photo-wrap,
  [data-style="modern"] .pf-photo,
  [data-style="modern"] .pf-photo-initials { width: 60px; height: 60px; }
  [data-style="modern"] .pf-photo,
  [data-style="modern"] .pf-photo-initials { border-radius: 14px; }
}

/* ============================================================
   STYLE: MINIMAL — extreme reduction.
   No shadows, no ornament, hairlines barely visible, tight type.
   Pure structure over surface.
   ============================================================ */
[data-style="minimal"] body { background-image: none; }

/* Strip ALL decorative pseudo-elements globally */
[data-style="minimal"] .pf-photo-wrap::before,
[data-style="minimal"] .pf-photo-wrap::after,
[data-style="minimal"] .pf::before,
[data-style="minimal"] .pf::after,
[data-style="minimal"] .pf-eyebrow > span:first-child::before,
[data-style="minimal"] .pf-section::before,
[data-style="minimal"] .pf-section-num-big::before,
[data-style="minimal"] .pf-section-num-big::after,
[data-style="minimal"] .pf-summary::before,
[data-style="minimal"] .ld-hero::before,
[data-style="minimal"] .ld-footer::before,
[data-style="minimal"] .ld-eyebrow::before,
[data-style="minimal"] .pf-cred::before,
[data-style="minimal"] .pf-cred::after,
[data-style="minimal"] .pf-stat::after,
[data-style="minimal"] .ld-card::before { display: none !important; }

[data-style="minimal"] body,
[data-style="minimal"] .pf-name,
[data-style="minimal"] .pf-headline,
[data-style="minimal"] .pf-summary,
[data-style="minimal"] .pf-section-title,
[data-style="minimal"] .pf-stat-num .v,
[data-style="minimal"] .ld-title,
[data-style="minimal"] .ld-lead,
[data-style="minimal"] .ld-card-title,
[data-style="minimal"] .ld-step-title,
[data-style="minimal"] .lg-title,
[data-style="minimal"] .lg-quote,
[data-style="minimal"] .rb-empty {
  font-family: var(--font-sans);
  font-style: normal;
}

[data-style="minimal"] .pf-name { font-weight: 500; letter-spacing: -0.02em; }
[data-style="minimal"] .ld-title { font-weight: 500; letter-spacing: -0.03em; }
[data-style="minimal"] .pf-section-title { font-weight: 500; letter-spacing: -0.01em; }

[data-style="minimal"] .pf-photo,
[data-style="minimal"] .pf-photo-initials {
  border: 0.5px solid var(--border);
  border-radius: 50%;           /* keep circle but strip the dashed ring */
}

[data-style="minimal"] .pf-section-num-big {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
}

/* No shadows at all on cards — borders only */
[data-style="minimal"] .rb-card,
[data-style="minimal"] .bd-item,
[data-style="minimal"] .dh-aside,
[data-style="minimal"] .pf-stat,
[data-style="minimal"] .pf-cred,
[data-style="minimal"] .pf-hero,
[data-style="minimal"] .ld-card,
[data-style="minimal"] .rb-btn,
[data-style="minimal"] .rb-authbar,
[data-style="minimal"] .bd-top {
  box-shadow: none;
}

[data-style="minimal"] .rb-btn-primary {
  background-image: none;
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
[data-style="minimal"] .rb-btn-primary:hover {
  filter: none;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: none;
}
[data-style="minimal"] .rb-btn:hover { transform: none; }

/* Hide gallery/stat decorative glow */
[data-style="minimal"] .pf-stat { background-image: none; }
[data-style="minimal"] .pf-cred { background-image: none; }

/* Drop the marker highlight in the landing title */
[data-style="minimal"] .ld-title .ld-accent {
  background-image: none;
  color: var(--accent);
}

/* Eyebrow: just text, no pill / no border underline */
[data-style="minimal"] .pf-eyebrow { padding-bottom: 0; border-bottom: 0; margin-bottom: 28px; }