/*
Theme Name: Rolijon Dev
Theme URI: https://rolijonclemenia.blogspot.com/
Author: Rolijon Clemenia
Description: Dark portfolio and blog theme for a freelance WordPress developer. Hand-coded, no page builder. Includes a security hardening layer, Blogger URL redirects and performance defaults.
Version: 1.0.0
Requires at least: 6.2
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: rolijon
*/
:root {
  --rj-accent: #ffa959;
  --rj-accent-ink: #222222;
  --rj-bg: #171717;
  --rj-bg-deep: #121212;
  --rj-bg-alt: #222222;
  --rj-bg-footer: #181818;
  --rj-card: #1b1005;
  --rj-card-border: #502e19;
  --rj-text: #e6e6e6;
  --rj-text-soft: #dbdbdb;
  --rj-cream: #fff5f0;
  --rj-muted: #868686;
  --rj-heading-muted: #898989;
  --rj-faint: #8c8c8c;
  --rj-line: #3a3a3a;
  --rj-line-strong: #7d7d7d;
  --rj-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --rj-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --rj-radius-btn: 7px;
  --rj-radius-card: 22px;
  --rj-wrap: 1200px;
  --rj-read: 740px;
  --rj-gutter: clamp(16px, 4vw, 40px);
  --rj-section: clamp(56px, 8vw, 104px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--rj-bg); color: var(--rj-text-soft);
  font-family: var(--rj-font); font-size: 16px; line-height: 1.7;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: var(--rj-accent); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--rj-cream); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--rj-accent); outline-offset: 3px; }
h1, h2, h3, h4, h5, h6 { color: var(--rj-cream); font-weight: 700; line-height: 1.2; margin: 0 0 .6em; }
p { margin: 0 0 1.25em; }
::selection { background: var(--rj-accent); color: var(--rj-accent-ink); }
.rj-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }

.rj-wrap { width: 100%; max-width: var(--rj-wrap); margin: 0 auto; padding: 0 var(--rj-gutter); }
.rj-read { max-width: var(--rj-read); margin-left: auto; margin-right: auto; }
.rj-section { padding: var(--rj-section) 0; }
.rj-section--deep { background: var(--rj-bg-deep); }
.rj-section--alt { background: var(--rj-bg-alt); }
.rj-center { text-align: center; }

.rj-heading { font-size: clamp(28px, 4vw, 43px); font-weight: 700; color: var(--rj-heading-muted); line-height: 1.12; margin-bottom: .9em; }
.rj-heading--center { text-align: center; }
.rj-accent { color: var(--rj-accent); }
.rj-eyebrow { color: var(--rj-muted); font-size: 18px; margin: 0 0 6px; }

.rj-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rj-accent); color: var(--rj-accent-ink) !important;
  font-family: var(--rj-font); font-weight: 700; font-size: 17px; line-height: 1.4;
  padding: 11px 28px; min-height: 46px; border: 0; border-radius: var(--rj-radius-btn);
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.rj-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(255,169,89,.6); color: var(--rj-accent-ink); }
.rj-btn--ghost { background: transparent; color: var(--rj-accent) !important; box-shadow: inset 0 0 0 1.5px var(--rj-accent); }
.rj-btn--ghost:hover { background: var(--rj-accent); color: var(--rj-accent-ink) !important; }
.rj-btn--sm { font-size: 15px; padding: 8px 18px; min-height: 40px; }

/* ---------- Header ---------- */
.rj-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(18,18,18,.9);
  -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid #1f1f1f;
}
.rj-header__inner { display: flex; align-items: center; gap: 24px; min-height: 72px; position: relative; }
.rj-header .section, .rj-header .widget { margin: 0; }
.rj-brandbox { margin-right: auto; }
.rj-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--rj-text); font-weight: 700; font-size: 20px; letter-spacing: -.01em; }
.rj-brand:hover { color: var(--rj-text); }
.rj-brand::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--rj-accent); flex: none; }
.rj-brand img { max-height: 44px; width: auto; }

.rj-nav .widget h3, .rj-nav .widget .title { display: none; }
.rj-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.rj-nav li { margin: 0; }
.rj-nav a { display: block; color: var(--rj-text-soft); font-size: 15px; font-weight: 500; padding: 8px 12px; border-radius: 8px; }
.rj-nav a:hover, .rj-nav li.selected > a { color: var(--rj-accent); }
.rj-menu-toggle { display: none; background: transparent; border: 1px solid var(--rj-line); color: var(--rj-text); width: 44px; height: 44px; border-radius: 10px; cursor: pointer; padding: 0; align-items: center; justify-content: center; }
.rj-menu-toggle svg { width: 22px; height: 22px; fill: currentColor; }
.rj-nav__cta { display: none; }
@media (max-width: 900px) {
  .rj-menu-toggle { display: inline-flex; }
  .rj-header__cta { display: none; }
  .rj-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--rj-bg-deep); border-bottom: 1px solid var(--rj-line); padding: 12px var(--rj-gutter) 20px; }
  .rj-nav.is-open { display: block; }
  .rj-nav ul { flex-direction: column; gap: 0; }
  .rj-nav a { padding: 12px 4px; font-size: 16px; border-bottom: 1px solid #1f1f1f; border-radius: 0; }
  .rj-nav__cta { display: block; margin-top: 16px; }
}

/* ---------- Homepage sections (only on the blog homepage) ---------- */

/* ---------- Homepage hero (giant word, centered photo, corner details) ---------- */
.rj-hero { display: none; position: relative; background: var(--rj-bg); overflow: hidden; isolation: isolate; }
.is-home .rj-hero { display: block; }

.rj-hero__word {
  position: absolute; z-index: 0; top: clamp(56px, 8vw, 110px); left: 50%; transform: translateX(-50%);
  font-weight: 800; font-size: clamp(64px, 15.5vw, 300px); line-height: .86; letter-spacing: -.02em; white-space: nowrap;
  background: linear-gradient(180deg, var(--rj-accent) 0%, rgba(255,169,89,.5) 48%, rgba(255,169,89,0) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  pointer-events: none; -webkit-user-select: none; user-select: none;
}

.rj-hero__stage { position: relative; z-index: 1; min-height: clamp(560px, 54vw, 740px); }

.rj-hero__badge {
  position: absolute; top: 24px; right: var(--rj-gutter); z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rj-text-soft);
}
.rj-hero__dot { width: 9px; height: 9px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: rj-pulse 2s infinite; flex: none; }
@keyframes rj-pulse { 70% { box-shadow: 0 0 0 9px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }

.rj-hero__media { position: absolute; z-index: 1; left: 50%; transform: translateX(-50%); top: clamp(70px, 9vw, 120px); bottom: 0; display: flex; align-items: flex-end; justify-content: center; }
.rj-hero__media::before { content: ""; position: absolute; width: 130%; aspect-ratio: 1; bottom: -55%; left: 50%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(255,169,89,.32), transparent 62%); z-index: -1; }
.rj-hero__media .section, .rj-hero__media .widget, .rj-hero__media .widget-content, .rj-hero__media .widget a { height: 100%; margin: 0 !important; padding: 0 !important; display: flex; align-items: flex-end; justify-content: center; line-height: 0; }
.rj-hero__media .widget h2, .rj-hero__media .widget h3, .rj-hero__media .caption, .rj-hero__media br, .rj-hero__media .widget-item-control { display: none !important; }
.rj-hero__media img { display: block; height: 100% !important; width: auto !important; max-width: none; object-fit: contain; object-position: center bottom; }

.rj-hero__copy { position: absolute; z-index: 3; left: var(--rj-gutter); bottom: 92px; max-width: 340px; }
.rj-hero__hey { font-family: "Kaushan Script", "Poppins", cursive; font-size: clamp(26px, 2.8vw, 36px); line-height: 1; color: var(--rj-accent); margin: 0 0 6px; transform: rotate(-4deg); transform-origin: left bottom; }
.rj-hero__title { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.05; font-weight: 700; color: var(--rj-text); letter-spacing: -.02em; margin: 0 0 14px; }
.rj-hero__text { color: var(--rj-text-soft); font-size: 15px; line-height: 1.65; margin: 0 0 18px; }
.rj-hero__loc { position: absolute; z-index: 3; left: var(--rj-gutter); bottom: 28px; margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; color: var(--rj-muted); }
.rj-hero__role {
  position: absolute; z-index: 3; right: var(--rj-gutter); bottom: 28px;
  background: rgba(27,16,5,.88); border: 2px solid var(--rj-card-border); border-radius: 16px; padding: 14px 24px;
  color: var(--rj-cream); font-weight: 600; font-size: clamp(15px, 1.6vw, 21px); line-height: 1.35;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

.rj-hero__role { text-align: left; padding: 18px 26px; }
.rj-hero__role-title { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rj-accent); }
.rj-hero__role-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rj-hero__role-list li { display: flex; align-items: center; gap: 12px; font-size: clamp(15px, 1.4vw, 19px); font-weight: 600; line-height: 1.3; color: var(--rj-cream); }
.rj-hero__role-list li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--rj-accent); flex: none; }
.rj-hero__scroll { display: none; }

@media (max-width: 860px) {
  .rj-hero__word { top: 84px; font-size: 30vw; letter-spacing: -.01em; }
  .rj-hero__stage { min-height: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 0 36px; }

  /* badge stays top right */
  .rj-hero__badge { position: absolute; top: 22px; right: var(--rj-gutter); margin: 0; font-size: 12px; }

  /* photo: full width, fades out at the bottom */
  .rj-hero__media { position: relative; left: auto; top: auto; bottom: auto; transform: none; order: 1; width: 100%; height: auto; margin-top: 78px; display: block; }
  .rj-hero__media::before { display: none; }
  .rj-hero__media .section, .rj-hero__media .widget, .rj-hero__media .widget-content, .rj-hero__media .widget a { height: auto; display: block; }
  .rj-hero__media img { width: 100% !important; height: auto !important; max-width: 560px; margin: 0 auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 97%); mask-image: linear-gradient(to bottom, #000 58%, transparent 97%); }

  /* intro overlaps the faded photo */
  .rj-hero__copy { position: relative; left: auto; bottom: auto; order: 2; max-width: 460px; margin-top: clamp(-90px, -16vw, -40px); padding: 0 var(--rj-gutter); }
  .rj-hero__hey { font-size: clamp(30px, 8vw, 40px); transform: rotate(-4deg); transform-origin: center; margin-bottom: 2px; }
  .rj-hero__title { font-size: clamp(38px, 11.5vw, 56px); margin-bottom: 14px; }
  .rj-hero__title br { display: none; }
  .rj-hero__text { font-size: 16px; font-weight: 500; color: var(--rj-text); margin-bottom: 20px; }

  .rj-hero__role { position: static; order: 3; margin-top: 22px; padding: 12px 30px; font-size: clamp(18px, 5vw, 24px); }
  .rj-hero__loc { position: static; order: 4; margin-top: 34px; font-size: 13px; color: var(--rj-text-soft); }
  .rj-hero__scroll { order: 5; display: inline-flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 30px; font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--rj-accent); }
  .rj-hero__scroll span { font-size: 24px; letter-spacing: 0; line-height: 1; }
}
@media (prefers-reduced-motion: reduce) { .rj-hero__dot { animation: none; } }


.rj-stats { background: var(--rj-bg-deep); }
.rj-stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 36px 0; }
.rj-stat { display: flex; align-items: center; gap: 16px; justify-content: center; }
.rj-stat__num { color: var(--rj-accent); font-size: clamp(44px, 5.2vw, 70px); font-weight: 700; line-height: 1; }
.rj-stat__label { color: var(--rj-muted); font-size: 14.5px; line-height: 1.29; max-width: 180px; }
@media (max-width: 720px) {
  .rj-stats__grid { grid-template-columns: 1fr; gap: 28px; justify-items: center; text-align: center; }
  .rj-stat { flex-direction: column; justify-content: center; gap: 8px; text-align: center; }
  .rj-stat__label { max-width: 260px; margin: 0 auto; text-align: center; }
}

.rj-videos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-bottom: 48px; }
.rj-video { border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 16/9; }
.rj-video iframe { width: 100%; height: 100%; display: block; border: 0; }
@media (max-width: 760px) { .rj-videos { grid-template-columns: 1fr; } }

.rj-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; margin-bottom: 48px; }
.rj-card { background: var(--rj-card); border: 2px solid var(--rj-card-border); border-radius: var(--rj-radius-card); padding: 32px 26px; flex: 0 1 calc((100% - 56px) / 3); min-width: 260px; }
.rj-card__title { font-size: 24px; line-height: 1.4; color: var(--rj-cream); margin-bottom: 14px; }
.rj-card__text { color: var(--rj-cream); opacity: .62; font-size: 16px; line-height: 1.77; margin: 0; }
@media (max-width: 900px) { .rj-card { flex-basis: calc((100% - 28px) / 2); } }
@media (max-width: 600px) { .rj-card { flex-basis: 100%; min-width: 0; } }

.rj-stack { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 72px; }
.rj-stack__title { display: flex; align-items: center; gap: 16px; color: var(--rj-cream); font-style: italic; font-weight: 700; font-size: 21px; margin-bottom: 18px; }
.rj-stack__title::after { content: ""; flex: 1; height: 1px; background: var(--rj-line-strong); }
.rj-stack ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rj-stack li { display: flex; align-items: center; gap: 14px; color: var(--rj-text-soft); font-size: 15px; }
.rj-stack li::before { content: ""; width: 38px; height: 38px; border-radius: 10px; flex: none; background: var(--rj-bg-alt); background-image: radial-gradient(circle, var(--rj-accent) 0 4px, transparent 5px); border: 1px solid #2a2a2a; }
@media (max-width: 760px) { .rj-stack { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- Page heads (label, search, archive) ---------- */
.rj-page-head { padding: clamp(48px, 7vw, 88px) 0 clamp(28px, 4vw, 40px); border-bottom: 1px solid #1f1f1f; background: var(--rj-bg-deep); }
.rj-page-head__title { font-size: clamp(34px, 5vw, 56px); color: var(--rj-text); letter-spacing: -.015em; margin-bottom: 10px; }
.rj-page-head__desc { color: var(--rj-muted); max-width: 640px; margin: 0; }

/* Label chips (Labels gadget, shown above the post grid) */
.rj-labels { display: none; }

.rj-labels-select-wrap { max-width: 320px; margin: 0 auto 32px; }
.rj-labels-select-wrap select {
  width: 100%; font: inherit; font-size: 15px; font-weight: 600;
  color: var(--rj-accent); background-color: rgba(255,169,89,.1);
  border: 1px solid rgba(255,169,89,.3); border-radius: 999px;
  padding: 10px 40px 10px 18px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffa959' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 16px center;
}
.rj-labels-select-wrap select:hover { background-color: rgba(255,169,89,.18); }
.rj-labels-select-wrap select:focus-visible { outline: 2px solid var(--rj-accent); outline-offset: 3px; }

.is-index .rj-labels { display: block; }
.rj-labels .widget h2, .rj-labels .widget h3, .rj-labels .widget .title { display: none; }
.rj-labels .widget { margin: 0 0 32px; }
.rj-labels ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.rj-labels li { margin: 0; }
.rj-labels a, .rj-labels .label-size, .rj-chip {
  display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .02em; line-height: 1.5;
  color: var(--rj-accent); background: rgba(255,169,89,.1); border: 1px solid rgba(255,169,89,.3);
  padding: 4px 12px; border-radius: 999px;
}
.rj-labels a:hover, a.rj-chip:hover { background: var(--rj-accent); color: var(--rj-accent-ink); }
.rj-labels .label-count { display: none; }

/* ---------- Post grid ---------- */
.rj-main { padding: 48px 0 var(--rj-section); }
.is-home .rj-main { padding-top: var(--rj-section); }
.rj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 980px) { .rj-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .rj-grid { grid-template-columns: 1fr; } }
.rj-post-card { display: flex; flex-direction: column; background: var(--rj-card); border: 2px solid var(--rj-card-border); border-radius: var(--rj-radius-card); overflow: hidden; transition: transform .2s ease, border-color .2s ease; }
.rj-post-card:hover { transform: translateY(-3px); border-color: #a8643a; }
.rj-post-card__thumb { display: block; background: #0e0a06; overflow: hidden; position: relative; }
.rj-post-card__thumb img { width: 100%; height: auto; display: block; }
.rj-post-card__thumb--empty { aspect-ratio: 16/9; }
.rj-post-card__thumb--empty::after { content: ""; position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle, rgba(255,169,89,.55) 0 9px, rgba(80,46,25,.8) 10px 28px, transparent 29px); }
.rj-post-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.rj-post-card__title { font-size: 20px; line-height: 1.35; margin: 0; }
.rj-post-card__title a { color: var(--rj-cream); }
.rj-post-card__title a:hover { color: var(--rj-accent); }
.rj-post-card__excerpt { color: var(--rj-cream); opacity: .62; font-size: 15px; line-height: 1.7; margin: 0; }
.rj-meta { color: var(--rj-muted); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: auto; }
.rj-meta > * + *::before { content: "\2022"; margin-right: 14px; color: var(--rj-faint); }


.rj-pager { display: flex; justify-content: center; gap: 12px; margin-top: 56px; flex-wrap: wrap; }

/* Homepage: Case Studies section */
.rj-cases { margin-bottom: clamp(56px, 8vw, 96px); }
.rj-cases[hidden] { display: none; }
.rj-cases__cta { display: flex; justify-content: center; margin-top: 40px; }
/* Few case studies: center them instead of leaving empty grid columns */
.rj-cases .rj-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.rj-cases .rj-post-card { flex: 0 1 calc((100% - 56px) / 3); min-width: 0; }
@media (max-width: 980px) { .rj-cases .rj-post-card { flex-basis: calc((100% - 28px) / 2); } }
@media (max-width: 640px) { .rj-cases .rj-post-card { flex-basis: 100%; } }

/* ---------- Single post / page ---------- */
.rj-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.is-post .rj-layout { grid-template-columns: minmax(0, 1fr) 300px; }
.rj-layout > .rj-col { min-width: 0; }
.is-post .rj-col .rj-read { margin-left: 0; }
.rj-aside { display: none; }
.is-post .rj-aside { display: block; }
@media (max-width: 1024px) {
  .is-post .rj-layout { grid-template-columns: minmax(0, 1fr); }
  .is-post .rj-col .rj-read { margin-left: auto; }
}

.rj-article-head { padding: clamp(8px, 2vw, 24px) 0 28px; }
.rj-article-head .rj-chip { margin-bottom: 18px; }
.rj-article-title { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.14; color: var(--rj-text); letter-spacing: -.015em; margin-bottom: 20px; }
.rj-article-head .rj-meta { font-size: 14.5px; }

/* Breadcrumbs: visible trail, marked up as a schema.org BreadcrumbList */
.rj-crumbs { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--rj-muted); text-align: left; }
.rj-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.rj-crumbs li { margin: 0; min-width: 0; }
.rj-crumbs li + li::before { content: "\203A"; margin: 0 10px; color: var(--rj-faint); }
.rj-crumbs a { color: var(--rj-muted); }
.rj-crumbs a:hover { color: var(--rj-accent); }
.rj-crumbs li:last-child [itemprop="name"] { display: inline-block; max-width: min(42ch, 72vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; color: var(--rj-text-soft); }

.rj-prose { font-size: 18px; line-height: 1.8; color: var(--rj-text-soft); overflow-wrap: break-word; }
.rj-prose h2 { font-size: clamp(26px, 3vw, 32px); margin: 2em 0 .6em; }
.rj-prose h3 { font-size: 23px; margin: 1.7em 0 .6em; }
.rj-prose h4 { font-size: 19px; margin: 1.5em 0 .6em; }
.rj-prose p, .rj-prose ul, .rj-prose ol, .rj-prose blockquote, .rj-prose pre, .rj-prose table { margin-top: 0; margin-bottom: 1.35em; }
.rj-prose a { color: var(--rj-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rj-prose a:hover { color: var(--rj-cream); }
.rj-prose b, .rj-prose strong { color: var(--rj-cream); }
.rj-prose ul, .rj-prose ol { padding-left: 1.3em; }
.rj-prose li { margin-bottom: .45em; }
.rj-prose li::marker { color: var(--rj-accent); }
.rj-prose blockquote { margin-left: 0; margin-right: 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--rj-accent); color: var(--rj-cream); font-style: italic; font-size: 1.08em; }
.rj-prose img { border-radius: 14px; height: auto !important; }
.rj-prose .separator a, .rj-prose a:has(> img) { text-decoration: none; }
.rj-prose .tr-caption, .rj-prose figcaption { color: var(--rj-muted); font-size: 14px; }
.rj-prose table.tr-caption-container { width: auto; }
.rj-prose code { font-family: var(--rj-mono); font-size: .86em; background: #262019; color: #ffd2a8; padding: 2px 7px; border-radius: 6px; }
.rj-prose pre { font-family: var(--rj-mono); font-size: 14.5px; line-height: 1.65; background: #0d0d0d; color: #e8e8e8; border: 1px solid #262626; border-left: 3px solid var(--rj-accent); border-radius: 12px; padding: 20px 22px; overflow-x: auto; white-space: pre; tab-size: 4; }
.rj-prose pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
.rj-prose table:not(.tr-caption-container) { width: 100%; border-collapse: collapse; font-size: 15.5px; display: block; overflow-x: auto; }
.rj-prose th, .rj-prose td { border: 1px solid var(--rj-line); padding: 10px 14px; text-align: left; }
.rj-prose table.tr-caption-container td { border: 0; padding: 0; }
.rj-prose th { background: var(--rj-bg-alt); color: var(--rj-cream); }
.rj-prose hr { border: 0; border-top: 1px solid var(--rj-line); margin: 2.5em 0; }

/* Helpers for your posts/pages (switch the editor to HTML view to use them) */
.rj-callout { background: var(--rj-card); border: 2px solid var(--rj-card-border); border-radius: 16px; padding: 22px 24px; margin-bottom: 1.35em; }
.rj-callout > :last-child { margin-bottom: 0; }
.rj-disclosure { font-size: 14px !important; line-height: 1.6; color: var(--rj-muted); background: #1a1a1a; border: 1px dashed var(--rj-line-strong); border-radius: 12px; padding: 12px 16px; margin-bottom: 32px !important; }
.rj-disclosure b, .rj-disclosure strong { color: var(--rj-text-soft); }
.rj-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
@media (max-width: 640px) { .rj-cols { grid-template-columns: 1fr; } }

/* Resume page */
.rj-resume h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .14em; color: var(--rj-accent); border-bottom: 1px solid var(--rj-line); padding-bottom: 10px; margin-top: 2.6em; }
.rj-resume h3 { font-size: 20px; margin: 1.6em 0 .2em; }
.rj-resume .rj-resume-meta { color: var(--rj-muted); font-size: 15px; font-style: italic; margin-bottom: .8em; }
.rj-resume-head { color: var(--rj-muted); }

.rj-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 40px 0 0; }
.rj-tags a { font-size: 13px; color: var(--rj-muted); border: 1px solid var(--rj-line); border-radius: 999px; padding: 4px 12px; }
.rj-tags a:hover { color: var(--rj-accent); border-color: var(--rj-accent); }

.rj-author { display: none; grid-template-columns: 88px 1fr; gap: 22px; align-items: start; background: var(--rj-card); border: 2px solid var(--rj-card-border); border-radius: var(--rj-radius-card); padding: 28px; margin: 56px 0 0; }
.is-post .rj-author { display: grid; }
.rj-author__avatar { width: 88px; height: 88px; border-radius: 50%; background: var(--rj-bg-alt); display: flex; align-items: center; justify-content: center; color: var(--rj-accent); font-weight: 800; font-size: 32px; overflow: hidden; }
.rj-author__avatar img { width: 100%; height: 100%; object-fit: cover; }
.rj-author__name { font-size: 20px; margin: 0 0 4px; color: var(--rj-cream); font-weight: 700; }
.rj-author__role { color: var(--rj-accent); font-size: 14px; font-weight: 600; margin: 0 0 10px; }
.rj-author__bio { color: var(--rj-cream); opacity: .7; font-size: 15px; line-height: 1.7; margin: 0 0 16px; }
@media (max-width: 560px) { .is-post .rj-author { grid-template-columns: 1fr; } }

.rj-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.rj-post-nav a { display: block; padding: 16px 20px; border: 1px solid var(--rj-line); border-radius: 14px; color: var(--rj-cream); font-weight: 600; font-size: 15px; }
.rj-post-nav a:hover { border-color: var(--rj-accent); color: var(--rj-accent); }
.rj-post-nav .next { text-align: right; }

/* Ad sections (add AdSense gadgets in Layout) */
.rj-ad-area .widget { margin: 32px auto; text-align: center; }
.rj-ad-area .widget h2, .rj-ad-area .widget h3 { font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: .14em; color: var(--rj-faint); margin: 0 0 8px; }
.rj-ad-top { display: none; }
.is-single .rj-ad-top, .is-index:not(.is-home) .rj-ad-top { display: block; }
.rj-ad-end { display: none; }
.is-post .rj-ad-end { display: block; }

/* ---------- Sidebar & gadgets ---------- */
.rj-aside .section { margin: 0; }
.rj-aside__sticky { position: sticky; top: 100px; }
.rj-aside .widget { background: #1a1a1a; border: 1px solid #262626; border-radius: 16px; padding: 22px; font-size: 15px; margin: 0 0 28px; }
.rj-aside .widget h2, .rj-aside .widget h3 { font-size: 17px; color: var(--rj-cream); margin: 0 0 14px; }
.rj-aside .widget ul { list-style: none; margin: 0; padding: 0; }
.rj-aside .widget li { padding: 8px 0; border-bottom: 1px solid #262626; }
.rj-aside .widget li:last-child { border-bottom: 0; }
.rj-aside .widget a { color: var(--rj-text-soft); }
.rj-aside .widget a:hover { color: var(--rj-accent); }
.rj-aside .rj-ad-area .widget { background: none; border: 0; padding: 0; }
.rj-hire { background: var(--rj-card) !important; border: 2px solid var(--rj-card-border) !important; }
.rj-hire p { color: var(--rj-cream); opacity: .7; }
.PopularPosts .post { margin-bottom: 14px; }
.PopularPosts .post-title, .PopularPosts h3 { font-size: 15px; line-height: 1.45; margin: 0 0 4px; }
.PopularPosts .snippet-item, .PopularPosts .item-snippet, .PopularPosts .post-header, .PopularPosts .post-footer { display: none; }
.PopularPosts img { border-radius: 10px; margin-bottom: 8px; }

input[type="text"], input[type="email"], input[type="search"], textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--rj-text); background: #111; border: 1px solid var(--rj-line); border-radius: 10px; padding: 12px 14px;
}
.BlogSearch form, .search-form { display: flex; gap: 8px; }
.BlogSearch input[type="submit"], .BlogSearch button, .search-action {
  background: var(--rj-accent); color: var(--rj-accent-ink); border: 0; border-radius: var(--rj-radius-btn); font: inherit; font-weight: 700; padding: 0 16px; cursor: pointer;
}

/* ---------- Comments (Blogger default markup) ---------- */
.rj-comments { margin-top: 64px; }
.comments h3.title, .comments h4, #comments h4 { font-size: 26px; color: var(--rj-cream); }
.comments .comment-thread ol, .comments ol { list-style: none; margin: 0; padding: 0; }
.comments .comment-thread li, .comments .comment { padding: 20px 0; border-bottom: 1px solid #262626; }
.comments .avatar-image-container img { border-radius: 50%; }
.comments .comment-block { padding-left: 0; }
.comments .user, .comments cite.user { font-weight: 600; color: var(--rj-cream); font-style: normal; }
.comments .datetime, .comments .datetime a { color: var(--rj-muted); font-size: 13px; }
.comments .comment-content { color: var(--rj-text-soft); margin: 8px 0; }
.comments .comment-actions a, .comments .comment-reply { color: var(--rj-accent); font-size: 13px; margin-right: 12px; }
.comments .thread-count a, .comments .continue a { color: var(--rj-accent); }
.comments .comment-replies { padding-left: clamp(16px, 4vw, 40px); }
#comment-editor, .comment-form iframe { background: #fff; border-radius: 12px; width: 100%; min-height: 220px; }
.comment-footer, .comment-form { margin-top: 24px; }

/* ---------- Footer ---------- */
.rj-cta-band { background: var(--rj-bg-alt); text-align: center; }
.rj-cta-band p { color: var(--rj-muted); max-width: 560px; margin: 0 auto 28px; }
.rj-footer { background: var(--rj-bg-footer); padding: 56px 0 28px; text-align: center; border-top: 1px solid #1f1f1f; }
.rj-footer__name { color: var(--rj-muted); font-size: clamp(24px, 3vw, 34px); letter-spacing: .02em; text-transform: uppercase; margin: 0 0 16px; font-weight: 400; }
.rj-footer__contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 36px; color: var(--rj-faint); font-size: 16px; margin-bottom: 28px; }
.rj-footer__contact a, .rj-footer__contact span { color: var(--rj-faint); display: inline-flex; align-items: center; gap: 8px; }
.rj-footer__contact a:hover { color: var(--rj-accent); }
.rj-footer__contact svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.rj-social { display: flex; justify-content: center; gap: 14px; margin: 0 0 28px; }
.rj-social__link { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--rj-accent);
  background: linear-gradient(145deg, rgba(255,245,240,.08), rgba(255,169,89,.03) 45%, rgba(20,12,5,.5)); border: 1px solid rgba(255,205,160,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1); transition: transform .25s var(--rj-ease), border-color .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease; }
.rj-social__link svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.rj-social__link svg.rj-stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rj-social__link:hover { color: var(--rj-cream); transform: translateY(-2px); border-color: rgba(255,169,89,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 22px -12px rgba(255,169,89,.55); }
.rj-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 32px 0 0; font-size: 14px; }
.rj-footer__links a { color: var(--rj-muted); }
.rj-footer__links a:hover { color: var(--rj-accent); }
.rj-footer__legal { color: var(--rj-faint); font-size: 13px; margin: 24px 0 0; }
.rj-footer .widget { margin: 8px 0 0; font-size: 12px; color: var(--rj-faint); }
.rj-footer .widget a { color: var(--rj-faint); }

/* 404 */
.rj-empty { text-align: center; padding: clamp(64px, 10vw, 120px) 0; }
.rj-empty__code { font-size: clamp(80px, 14vw, 160px); color: var(--rj-accent); font-weight: 800; line-height: 1; margin: 0 0 16px; }

/* Hide Blogger's default bits we replace */
.blog-feeds, .post-feeds, .status-msg-wrap { display: none; }

@media print {
  .rj-header, .rj-footer, .rj-cta-band, .rj-ad-area, .rj-aside, .rj-author, .rj-comments, .rj-post-nav, .rj-tags { display: none !important; }
  body, .rj-main { background: #fff !important; color: #111 !important; }
  .rj-prose, .rj-prose * { color: #111 !important; }
  .rj-resume h2 { color: #1f3b6e !important; border-color: #1f3b6e !important; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }


.rj-footer .Attribution, .rj-footer .Attribution .widget-content, .rj-footer .Attribution div { display: block; text-align: center; margin: 0 auto; padding: 0; float: none; }
.rj-footer .Attribution svg, .rj-footer .Attribution img, .rj-footer .Attribution .blogger-icon, .rj-footer .Attribution .icon { display: none !important; }
.rj-footer .Attribution a { font-size: 12px; color: var(--rj-faint); }


/* Hero hierarchy: name as kicker, hook as headline */
.rj-eyebrow {
  font-size: 15px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--rj-accent) !important;
  font-weight: 600 !important;
  margin-bottom: 14px !important;
}

/* Stats band: restore the side gutter the shorthand wipes out */
.rj-stats__grid {
  padding-left: var(--rj-gutter) !important;
  padding-right: var(--rj-gutter) !important;
}

/* Hide the duplicate footer CTA */
.rj-footer .rj-btn { display: none !important; }


/* ---------- Motion: smooth entrance, scroll reveal, hover polish ---------- */
:root { --rj-ease: cubic-bezier(.22, 1, .36, 1); }
.rj-section[id] { scroll-margin-top: 84px; }

/* Hero entrance (CSS only, uses individual transform props so it never fights the layout transforms) */
@keyframes rj-rise { from { opacity: 0; translate: 0 34px; } to { opacity: 1; translate: 0 0; } }
@keyframes rj-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rj-word-in { from { opacity: 0; translate: 0 -24px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes rj-photo-in { from { translate: 0 60px; scale: .97; } to { translate: 0 0; scale: 1; } }
@keyframes rj-drop { from { opacity: 0; translate: 0 -14px; } to { opacity: 1; translate: 0 0; } }
.rj-hero__word  { animation: rj-word-in 1.3s var(--rj-ease) .05s both; }
.rj-hero__media { animation: rj-photo-in 1.2s var(--rj-ease) both; }
.rj-hero__badge { animation: rj-drop .9s var(--rj-ease) .7s both; }
.rj-hero__hey   { animation: rj-rise .9s var(--rj-ease) .75s both; }
.rj-hero__title { animation: rj-rise .9s var(--rj-ease) .9s both; }
.rj-hero__text  { animation: rj-rise .9s var(--rj-ease) 1.05s both; }
.rj-hero__copy .rj-btn { animation: rj-rise .9s var(--rj-ease) 1.2s both; }
.rj-hero__role  { animation: rj-rise .9s var(--rj-ease) 1.2s both; }
.rj-hero__loc, .rj-hero__scroll { animation: rj-fade 1s ease 1.45s both; }

/* Slow float on the availability dot and a gentle bob on the scroll cue */
@keyframes rj-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }
.rj-hero__scroll span { animation: rj-bob 1.8s ease-in-out infinite; }

/* Scroll reveal (only active when JS is running, so content is never hidden without it) */
.rj-js .rj-reveal {
  opacity: 0; translate: 0 32px;
  transition: opacity .9s var(--rj-ease), translate .9s var(--rj-ease), transform .25s ease, border-color .25s ease, box-shadow .25s ease, background-color .25s ease, color .2s ease;
  transition-delay: var(--rj-d, 0s), var(--rj-d, 0s), 0s, 0s, 0s, 0s, 0s;
  will-change: opacity, translate;
}
.rj-js .rj-reveal.is-in { opacity: 1; translate: 0 0; will-change: auto; }

/* Hover polish */
.rj-card { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.rj-card:hover { transform: translateY(-5px); border-color: #a8643a; box-shadow: 0 18px 40px -22px rgba(255,169,89,.45); }
.rj-post-card { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.rj-post-card:hover { box-shadow: 0 18px 40px -22px rgba(255,169,89,.45); }
.rj-post-card__thumb img { transition: transform .7s var(--rj-ease); }
.rj-post-card:hover .rj-post-card__thumb img { transform: scale(1.06); }
.rj-btn { transition: transform .2s var(--rj-ease), box-shadow .25s ease, background-color .25s ease, color .25s ease; }
.rj-btn:active { transform: translateY(0) scale(.98); }
.rj-nav a { position: relative; transition: color .2s ease, background-color .2s ease; }
@media (min-width: 1025px) {
  .rj-nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--rj-accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--rj-ease); }
  .rj-nav a:hover::after, .rj-nav li.selected > a::after { transform: scaleX(1); }
}
.rj-header { transition: box-shadow .3s ease, background-color .3s ease; }
.rj-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(0,0,0,.9); background: rgba(18,18,18,.96); }

/* Mobile menu slides in instead of snapping open */
@keyframes rj-menu-in { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 1024px) { .rj-nav.is-open { animation: rj-menu-in .3s var(--rj-ease) both; } }

/* Respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
  .rj-hero__word, .rj-hero__media, .rj-hero__badge, .rj-hero__hey, .rj-hero__title, .rj-hero__text,
  .rj-hero__copy .rj-btn, .rj-hero__role, .rj-hero__loc, .rj-hero__scroll, .rj-hero__scroll span, .rj-nav.is-open { animation: none !important; }
  .rj-js .rj-reveal { opacity: 1; translate: none; }
}


/* ---------- Backgrounds: smoky hero, then black / subtle / black / subtle ---------- */
html { background: #0a0a0a; }
body { background: transparent; }

/* Hero only: drifting smoke + grain, fading to black at the bottom */
.rj-hero::before {
  content: ""; position: absolute; inset: -22%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 45% at 18% 20%, rgba(255,169,89,.20), transparent 70%),
    radial-gradient(55% 50% at 85% 70%, rgba(255,140,60,.13), transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='1100'%3E%3Cfilter id='s' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0028 .005' numOctaves='3' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .86  0 0 0 0 .84  0 0 0 0 .82  0 0 0 1.8 -.7'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23s)'/%3E%3C/svg%3E") 0 0 / 1100px 1100px repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='s' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0032 .0055' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .66  0 0 0 0 .35  0 0 0 1.7 -.62'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23s)'/%3E%3C/svg%3E") 0 0 / 900px 900px repeat;
  opacity: .14;
  animation: rj-smoke-a 70s ease-in-out infinite alternate;
  will-change: transform;
}
.rj-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(10,10,10,0) 68%, #0a0a0a 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 240px 240px repeat;
}
@keyframes rj-smoke-a { from { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); } to { transform: translate3d(5%, 4%, 0) rotate(6deg) scale(1.12); } }

/* Sections after the hero: plain black... */
.rj-stats, .rj-section, .rj-page-head { background: #0a0a0a; }
.rj-stats { border-top: 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.rj-footer { background: #080808; border-top: 1px solid rgba(255,255,255,.06); }

/* ...alternating with a subtle tint (soft warm glow + faint grain) */
.rj-section--alt, .rj-section--deep, .rj-cta-band {
  position: relative; isolation: isolate;
  background: radial-gradient(70% 90% at 50% 0%, rgba(255,169,89,.075), transparent 72%), #11100f;
  border-top: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.05);
}
.rj-section--alt::before, .rj-section--deep::before, .rj-cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 240px 240px repeat;
}

/* Glass header (sits over the smoky hero) */
.rj-header { background: rgba(14,14,14,.5); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid rgba(255,255,255,.08); }
.rj-header.is-scrolled { background: rgba(12,12,12,.8); }
@media (max-width: 1024px) { .rj-nav { background: rgba(14,14,14,.92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,.08); } }

/* Glass cards */
.rj-card, .rj-post-card, .rj-author, .rj-hero__role {
  background: linear-gradient(145deg, rgba(255,245,240,.08) 0%, rgba(255,169,89,.03) 38%, rgba(20,12,5,.55) 100%);
  border: 1px solid rgba(255,205,160,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.35), 0 22px 44px -28px rgba(0,0,0,.9);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.rj-card:hover, .rj-post-card:hover { border-color: rgba(255,169,89,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.35), 0 22px 46px -22px rgba(255,169,89,.4); }
.rj-hero__role { border-width: 1px; }
.rj-video { box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 26px 50px -28px rgba(0,0,0,.95); }

@media (max-width: 860px) { .rj-hero::before { animation-duration: 110s; opacity: .12; } }
@media (prefers-reduced-motion: reduce) { .rj-hero::before { animation: none !important; } }
@media print { .rj-hero::before, .rj-hero::after, .rj-section--alt::before, .rj-section--deep::before, .rj-cta-band::before { display: none !important; } }

/* Stack icons */
.rj-stack li::before { content: none; }
.rj-ico { width: 40px; height: 40px; padding: 0; border-radius: 11px; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--rj-accent);
  background: linear-gradient(145deg, rgba(255,245,240,.08), rgba(255,169,89,.03) 45%, rgba(20,12,5,.5)); border: 1px solid rgba(255,205,160,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1); transition: transform .25s var(--rj-ease), border-color .25s ease, box-shadow .25s ease; }
.rj-ico--multi { width: auto; padding: 0 10px; }
.rj-ico svg { width: 20px; height: 20px; fill: currentColor; display: block; flex: none; }
.rj-ico--txt { font-size: 13px; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.rj-stack li { transition: color .2s ease; }
.rj-stack li:hover { color: var(--rj-cream); }
.rj-stack li:hover .rj-ico { transform: translateY(-2px); border-color: rgba(255,169,89,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 22px -12px rgba(255,169,89,.55); }

/* ---------- YouTube click-to-load facade ---------- */
.rj-video { position: relative; }
.rj-video__play { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.rj-video__play img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: transform .5s var(--rj-ease), opacity .3s ease; }
.rj-video__play:hover img, .rj-video__play:focus-visible img { transform: scale(1.03); opacity: 1; }
.rj-video__icon { position: absolute; inset: 0; margin: auto; width: 68px; height: 48px; border-radius: 14px; background: var(--rj-accent); box-shadow: 0 10px 30px -8px rgba(0,0,0,.7); }
.rj-video__icon::before { content: ""; position: absolute; left: 50%; top: 50%; translate: -35% -50%; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent var(--rj-accent-ink); }
.rj-video iframe { position: absolute; inset: 0; }
@media (max-width: 760px) { .rj-video__icon { width: 60px; height: 42px; } }

/* ---------- Tap targets (footer links, Powered by Blogger, hero scroll cue) ---------- */
.rj-footer__links { gap: 0 12px; }
.rj-footer__links a { display: inline-block; padding: 10px 8px; }
.rj-footer .Attribution a { display: inline-block; padding: 10px 8px; }
@media (max-width: 1024px) {
  .rj-footer__links a { padding: 12px 10px; }
  .rj-footer__contact a { padding: 10px 4px; min-height: 44px; }
  .rj-footer .Attribution a { padding: 12px 10px; }
}
@media (max-width: 860px) {
  .rj-hero__scroll { padding: 12px 20px; }
}
@media (max-width: 640px) {
  .rj-footer__links { gap: 0 4px; }
  .rj-footer__links a { padding: 12px 10px; }
}

/* ---------- Smoke layer waits until after load (keeps first paint and LCP fast) ---------- */
.rj-hero::before { display: none; }
.rj-smoke-on .rj-hero::before { display: block; animation: rj-smoke-fade 1.6s ease both, rj-smoke-a 70s ease-in-out infinite alternate; }
@keyframes rj-smoke-fade { from { opacity: 0; } }
@media (max-width: 860px) { .rj-smoke-on .rj-hero::before { animation: rj-smoke-fade 1.6s ease both, rj-smoke-a 110s ease-in-out infinite alternate; } }

/* ==========================================================================
   WordPress additions (skip link, core classes, menus, comments, pagination)
   ========================================================================== */
.rj-skip { position: absolute; left: 12px; top: -64px; z-index: 100; background: var(--rj-accent); color: var(--rj-accent-ink); padding: 10px 16px; border-radius: 8px; font-weight: 700; transition: top .15s ease; }
.rj-skip:focus { top: 12px; color: var(--rj-accent-ink); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.screen-reader-text:focus { clip: auto; width: auto; height: auto; overflow: visible; background: var(--rj-accent); color: var(--rj-accent-ink); padding: 10px 16px; z-index: 100; }

.rj-nav .current-menu-item > a, .rj-nav .current_page_item > a { color: var(--rj-accent); }
.rj-nav .sub-menu { display: none; }

.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .rj-prose figcaption { color: var(--rj-muted); font-size: 14px; margin-top: 6px; }
.rj-prose .wp-block-image img, .rj-prose figure img { max-width: 100%; height: auto; }
.rj-prose .wp-block-button__link { background: var(--rj-accent); color: var(--rj-accent-ink); border-radius: var(--rj-radius-btn); padding: 11px 28px; font-weight: 700; text-decoration: none; }
.rj-prose .wp-block-columns { gap: 28px; }
.gallery { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

.search-form input[type="search"] { min-height: 46px; }
.search-form .search-action { min-height: 46px; }

.rj-pager .page-numbers { min-width: 46px; }
.rj-pager .page-numbers.current { background: var(--rj-accent); color: var(--rj-accent-ink) !important; }
.rj-pager .page-numbers.dots { box-shadow: none; }

/* Comments (core markup) */
.comments .comment-list { list-style: none; margin: 0; padding: 0; }
.comments .comment-list .children { list-style: none; padding-left: clamp(16px, 4vw, 40px); }
.comments .comment-body { padding: 20px 0; border-bottom: 1px solid #262626; }
.comments .comment-author { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--rj-cream); }
.comments .comment-author .avatar { border-radius: 50%; }
.comments .comment-author .says { display: none; }
.comments .comment-meta, .comments .comment-metadata a { color: var(--rj-muted); font-size: 13px; }
.comments .comment-content { color: var(--rj-text-soft); margin: 8px 0; }
.comments .reply a { color: var(--rj-accent); font-size: 13px; }
.comments .comment-reply-title { font-size: 24px; color: var(--rj-cream); margin-top: 40px; }
.comments .comment-form label { display: block; margin: 0 0 6px; font-size: 14px; color: var(--rj-muted); }
.comments .comment-form p { margin: 0 0 16px; }
.comments .comment-form-cookies-consent { display: flex; gap: 10px; align-items: center; }
.comments .comment-form-cookies-consent input { width: auto; }
.comments .comment-form-cookies-consent label { margin: 0; }

/* Tablet */
@media (max-width: 980px) {
  .comments .comment-list .children { padding-left: 20px; }
  .alignleft, .alignright { float: none; display: block; margin: 0 auto 1em; }
}
/* Phone */
@media (max-width: 640px) {
  .rj-skip { left: 8px; }
  .search-form { flex-direction: column; }
  .search-form .search-action { width: 100%; }
  .rj-pager .page-numbers { flex: 1 1 auto; }
  .comments .comment-list .children { padding-left: 12px; }
}