/*
Theme Name: Roland van Haaften
Theme URI: http://rolandvanhaaften.nl
Author: Roland van Haaften
Description: A practical workbench-style personal homepage theme for Roland van Haaften.
Version: 1.0.3
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
Text Domain: rolandvanhaaften
*/

/* Beginner note: :root stores reusable colors and sizes so one small change can affect the whole design. */
:root {
  --rvh-bg: #eceee8;
  --rvh-panel: #ffffff;
  --rvh-panel-warm: #fffaf0;
  --rvh-ink: #121619;
  --rvh-body: #394146;
  --rvh-muted: #596268;
  --rvh-steel: #2f5366;
  --rvh-orange: #c95f2a;
  --rvh-yellow: #d6ad34;
  --rvh-line: #bfc7c4;
  --rvh-soft-line: rgba(18, 22, 25, 0.18);
  --rvh-radius: 4px;
  /* Beginner note: These shared sizes keep borders, gaps, and padding consistent across the page. */
  --rvh-border-subtle: 1px;
  --rvh-border: 2px;
  --rvh-border-strong: 4px;
  --rvh-section-border: 1px;
  --rvh-shadow: 5px 5px 0 var(--rvh-ink);
  --rvh-shadow-soft: 3px 3px 0 rgba(18, 22, 25, 0.48);
  --rvh-shadow-premium: 7px 7px 0 var(--rvh-ink);
  --rvh-shadow-button: 4px 4px 0 var(--rvh-ink);
  --rvh-shadow-section: 3px 3px 0 rgba(18, 22, 25, 0.16);
  --rvh-gap: clamp(20px, 3vw, 34px);
  --rvh-hero-gap: clamp(24px, 3.4vw, 42px);
  --rvh-grid-gap: clamp(16px, 2vw, 24px);
  --rvh-card-padding: clamp(22px, 3vw, 32px);
  --rvh-hero-padding: clamp(32px, 5vw, 58px);
  --rvh-hero-lede-gap: clamp(26px, 3vw, 34px);
  --rvh-hero-copy-gap: clamp(22px, 2.6vw, 30px);
  --rvh-hero-action-gap: clamp(34px, 4vw, 44px);
  --rvh-button-min-height: 50px;
  --rvh-button-padding: 12px 18px;
  --rvh-nav-min-height: 44px;
  --rvh-nav-padding: 11px 15px;
  --rvh-label-padding: 6px 9px;
  --rvh-page-gutter: 30px;
  --rvh-max-width: 1200px;
  --rvh-reading-width: 700px;
  --rvh-portrait-width: 372px;
  --rvh-section-accent-width: 34px;
  --rvh-section-accent-height: 6px;
  --rvh-card-accent-width: 32px;
  --rvh-card-accent-height: 5px;
  --rvh-font-label: 12px;
  --rvh-font-body: 17px;
  --rvh-font-body-large: clamp(17px, 1.5vw, 19px);
  --rvh-font-button: 14px;
  --rvh-font-card-title: 21px;
  --rvh-font-hero-title: clamp(44px, 6.4vw, 72px);
  --rvh-font-hero-lede: clamp(21px, 2.3vw, 28px);
  --rvh-font-nav: 14px;
}

/* Beginner note: border-box keeps padding inside the element width, which makes layout math easier. */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--rvh-ink);
  background: var(--rvh-bg);
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--rvh-font-body);
  line-height: 1.55;
}

body.admin-bar .site-header {
  top: 32px;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--rvh-orange);
}

img {
  display: block;
  max-width: 100%;
}

/* Beginner note: This hides the skip link until a keyboard user tabs to it. */
.skip-link {
  position: absolute;
  left: 16px;
  top: 12px;
  z-index: 30;
  transform: translateY(-160%);
  padding: 10px 14px;
  border: var(--rvh-border) solid #ffffff;
  border-radius: var(--rvh-radius);
  background: var(--rvh-ink);
  color: #ffffff;
  font-weight: 900;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-shell {
  min-height: 100vh;
}

/* Beginner note: WordPress adds default margins to blocks, so these rules let the theme control spacing. */
.editable-homepage-content > *,
.editable-homepage-content .wp-block-group {
  margin-top: 0;
  margin-bottom: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: var(--rvh-border-strong) solid var(--rvh-yellow);
  background: var(--rvh-ink);
  color: #ffffff;
}

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--rvh-gap);
  width: min(100% - (var(--rvh-page-gutter) * 2), var(--rvh-max-width));
  margin: 0 auto;
  padding: 20px 0;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 10px;
  scrollbar-width: none;
}

/* Beginner note: This hides the tiny scrollbar while keeping the mobile menu swipeable. */
.site-nav::-webkit-scrollbar {
  display: none;
}

.site-nav a {
  display: inline-flex;
  min-height: var(--rvh-nav-min-height);
  align-items: center;
  padding: var(--rvh-nav-padding);
  border: var(--rvh-border-subtle) solid rgba(255, 255, 255, 0.72);
  border-radius: var(--rvh-radius);
  color: #ffffff;
  font-size: var(--rvh-font-nav);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  background: var(--rvh-yellow);
  color: var(--rvh-ink);
}

.hero,
.section-inner,
.footer-inner {
  width: min(100% - (var(--rvh-page-gutter) * 2), var(--rvh-max-width));
  margin-right: auto;
  margin-left: auto;
}

.hero {
  display: block;
  padding: clamp(38px, 6vw, 76px) 0 clamp(56px, 8vw, 96px);
}

/* Beginner note: WordPress Group blocks add an inner container, so the real hero grid is one level inside. */
.hero > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.96fr);
  gap: var(--rvh-hero-gap);
  align-items: center;
}

.hero-content,
.hero-visual {
  border: var(--rvh-border) solid var(--rvh-ink);
  border-radius: var(--rvh-radius);
  background: var(--rvh-panel);
}

.section-heading,
.about-grid,
.contact-panel,
.interest-card,
.project-card {
  border: var(--rvh-section-border) solid var(--rvh-ink);
  border-radius: var(--rvh-radius);
  background: var(--rvh-panel);
}

.hero-content {
  display: flex;
  align-self: stretch;
  min-height: clamp(430px, 50vw, 560px);
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: var(--rvh-hero-padding);
  background: var(--rvh-yellow);
  box-shadow: var(--rvh-shadow);
}

.eyebrow,
.section-kicker,
.project-meta {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 16px;
  color: var(--rvh-orange);
  font-size: var(--rvh-font-label);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 760px;
  margin: 0;
  font-size: var(--rvh-font-hero-title);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.95;
  overflow-wrap: break-word;
  text-transform: uppercase;
}

.identity-text {
  max-width: var(--rvh-reading-width);
  margin: var(--rvh-hero-lede-gap) 0 0;
  color: var(--rvh-ink);
  font-size: var(--rvh-font-hero-lede);
  font-weight: 900;
  line-height: 1.18;
  overflow-wrap: break-word;
}

.hero-copy {
  max-width: var(--rvh-reading-width);
  margin: var(--rvh-hero-copy-gap) 0 0;
  color: var(--rvh-body);
  font-size: var(--rvh-font-body-large);
  line-height: 1.58;
  overflow-wrap: break-word;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--rvh-hero-action-gap);
}

.hero-actions .wp-block-button {
  margin: 0;
}

.button:not(.wp-block-button),
.hero-actions .wp-block-button__link {
  display: inline-flex;
  min-height: var(--rvh-button-min-height);
  align-items: center;
  justify-content: center;
  padding: var(--rvh-button-padding);
  border: var(--rvh-border) solid var(--rvh-ink);
  border-radius: var(--rvh-radius);
  background: transparent;
  color: var(--rvh-ink);
  font-size: var(--rvh-font-button);
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.button:not(.wp-block-button).primary,
.hero-actions .wp-block-button.primary .wp-block-button__link {
  background: var(--rvh-ink);
  color: #ffffff;
}

.button:not(.wp-block-button).secondary,
.hero-actions .wp-block-button.secondary .wp-block-button__link {
  background: #ffffff;
}

.button:not(.wp-block-button):hover,
.button:not(.wp-block-button):focus-visible,
.hero-actions .wp-block-button__link:hover,
.hero-actions .wp-block-button__link:focus-visible {
  transform: translate(-1px, -1px);
  box-shadow: var(--rvh-shadow-button);
}

.hero-visual {
  position: relative;
  align-self: stretch;
  min-width: 0;
  min-height: 100%;
  padding: clamp(28px, 3.8vw, 44px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(18, 22, 25, 0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(18, 22, 25, 0.06) 1px, transparent 1px),
    #ffffff;
  background-size: 28px 28px;
  box-shadow: var(--rvh-shadow);
}

.hero-visual > .wp-block-group__inner-container {
  display: grid;
  min-height: 100%;
  align-items: center;
  justify-items: center;
}

/* Beginner note: This decorative plate replaces the old circular orbit with a workbench grid. */
.signal-orbit {
  position: absolute;
  inset: clamp(14px, 2vw, 22px);
  border: var(--rvh-border-subtle) dashed rgba(18, 22, 25, 0.24);
  border-radius: var(--rvh-radius);
  pointer-events: none;
}

.signal-orbit::before,
.signal-orbit::after {
  content: "";
  position: absolute;
  background: var(--rvh-orange);
}

.signal-orbit::before {
  left: -2px;
  top: 32px;
  width: 84px;
  height: 8px;
}

.signal-orbit::after {
  right: -2px;
  bottom: 42px;
  width: 112px;
  height: 8px;
  background: var(--rvh-steel);
}

.portrait-panel {
  position: relative;
  z-index: 1;
  width: min(100%, var(--rvh-portrait-width));
  justify-self: center;
  padding: clamp(22px, 3.2vw, 34px);
  border: var(--rvh-border) solid var(--rvh-ink);
  border-radius: var(--rvh-radius);
  background: var(--rvh-panel-warm);
  box-shadow: var(--rvh-shadow-premium);
}

/* Beginner note: This top strip makes the portrait card feel intentional instead of like a plain insert. */
.portrait-panel::before {
  content: "";
  display: block;
  width: 74px;
  height: 8px;
  margin-bottom: 18px;
  background: var(--rvh-yellow);
}

.portrait-panel > .wp-block-group__inner-container {
  display: grid;
  justify-items: stretch;
}

.portrait-frame {
  width: 100% !important;
  margin: 0;
  padding: 0;
  border: var(--rvh-border) solid var(--rvh-ink);
  border-radius: var(--rvh-radius);
  background: var(--rvh-bg);
}

.portrait-frame img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.portrait-caption {
  margin: 20px 0 0;
  color: var(--rvh-ink);
}

.portrait-caption strong {
  display: block;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.08;
  text-transform: none;
}

.portrait-caption span {
  display: block;
  max-width: 30ch;
  margin-top: 8px;
  color: var(--rvh-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.micro-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
}

.micro-tags span {
  display: inline-flex;
  padding: var(--rvh-label-padding);
  border: var(--rvh-border-subtle) solid var(--rvh-ink);
  border-radius: var(--rvh-radius);
  background: #ffffff;
  color: var(--rvh-ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.section {
  border-top: var(--rvh-section-border) solid var(--rvh-ink);
  background: var(--rvh-bg);
}

.section.alt {
  background:
    linear-gradient(90deg, rgba(18, 22, 25, 0.05) 1px, transparent 1px),
    var(--rvh-line);
  background-size: 26px 26px;
}

.section-inner {
  padding: clamp(64px, 7vw, 88px) 0;
}

.section-heading {
  display: block;
  margin-bottom: var(--rvh-gap);
  background: var(--rvh-panel);
}

/* Beginner note: This small line repeats the workbench accent without making every section heavy. */
.section-kicker {
  align-items: center;
  gap: 10px;
}

.section-kicker::before {
  content: "";
  flex: 0 0 auto;
  width: var(--rvh-section-accent-width);
  height: var(--rvh-section-accent-height);
  background: var(--rvh-orange);
}

.section-heading > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: minmax(180px, 0.35fr) minmax(0, 0.65fr);
  gap: 0;
  align-items: stretch;
}

.section-heading > .wp-block-group__inner-container > * {
  padding: var(--rvh-card-padding);
}

.section-heading > .wp-block-group__inner-container > * + * {
  border-left: var(--rvh-section-border) solid var(--rvh-ink);
}

.section-heading h2,
.contact-panel h2 {
  margin: 0;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  overflow-wrap: break-word;
  text-transform: uppercase;
}

.section-heading p:not(.section-kicker),
.contact-panel p {
  margin: 12px 0 0;
  color: var(--rvh-muted);
}

.about-grid {
  display: block;
}

.about-grid > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
  gap: 0;
}

.about-grid > .wp-block-group__inner-container > * {
  padding: var(--rvh-card-padding);
}

.about-grid > .wp-block-group__inner-container > * + * {
  border-left: var(--rvh-section-border) solid var(--rvh-ink);
}

.body-copy {
  margin: 0;
  color: var(--rvh-ink);
  font-size: clamp(20px, 2vw, 23px);
  font-weight: 700;
  line-height: 1.35;
}

.quiet-note {
  margin: 0;
  border-left: var(--rvh-border-strong) solid var(--rvh-yellow);
  background: var(--rvh-panel-warm);
  color: var(--rvh-ink);
  font-size: 16px;
  font-weight: 700;
}

.card-grid,
.project-list {
  display: block;
}

.card-grid > .wp-block-group__inner-container,
.project-list > .wp-block-group__inner-container {
  display: grid;
  gap: var(--rvh-grid-gap);
}

.card-grid > .wp-block-group__inner-container {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.project-list > .wp-block-group__inner-container {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.interest-card,
.project-card {
  min-width: 0;
  min-height: 218px;
  padding: var(--rvh-card-padding);
  background: var(--rvh-panel);
  box-shadow: var(--rvh-shadow-section);
}

.interest-card::before {
  content: "";
  display: block;
  width: var(--rvh-card-accent-width);
  height: var(--rvh-card-accent-height);
  margin-bottom: 20px;
  background: var(--card-accent, var(--rvh-steel));
}

.interest-card.accent-aqua::before {
  --card-accent: var(--rvh-steel);
}

.interest-card.accent-plum::before {
  --card-accent: var(--rvh-orange);
}

.interest-card.accent-copper::before {
  --card-accent: var(--rvh-yellow);
}

.interest-card.accent-sage::before {
  --card-accent: var(--rvh-ink);
}

.interest-card h3,
.project-card h3 {
  margin: 0 0 12px;
  font-size: var(--rvh-font-card-title);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.12;
  overflow-wrap: break-word;
  text-transform: none;
}

.interest-card p,
.project-card p {
  margin: 0;
  color: var(--rvh-muted);
  font-size: 15px;
  line-height: 1.5;
}

.project-card {
  min-height: 248px;
}

.project-meta {
  min-height: 28px;
  align-items: center;
  padding: var(--rvh-label-padding);
  border: var(--rvh-border-subtle) solid var(--rvh-ink);
  border-radius: var(--rvh-radius);
  background: var(--rvh-yellow);
  color: var(--rvh-ink);
}

.contact-panel {
  display: block;
}

.contact-panel > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(270px, 0.45fr);
  gap: 0;
  align-items: stretch;
}

.contact-panel > .wp-block-group__inner-container > * {
  padding: var(--rvh-card-padding);
}

.contact-panel > .wp-block-group__inner-container > * + * {
  border-left: var(--rvh-section-border) solid var(--rvh-ink);
}

.contact-links {
  display: block;
}

.contact-links > .wp-block-group__inner-container {
  display: grid;
  gap: 10px;
}

.contact-links p {
  margin: 0;
}

.contact-links a {
  display: flex;
  min-height: var(--rvh-button-min-height);
  align-items: center;
  gap: 10px;
  padding: var(--rvh-button-padding);
  border: var(--rvh-section-border) solid var(--rvh-ink);
  border-radius: var(--rvh-radius);
  background: #ffffff;
  color: var(--rvh-ink);
  font-size: var(--rvh-font-button);
  font-weight: 900;
  line-height: 1.15;
  text-decoration: none;
  text-transform: uppercase;
}

/* Beginner note: These icons are CSS-only, so the WordPress contact link text stays editable. */
.contact-links a::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-color: var(--rvh-orange);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

/* Beginner note: This envelope icon appears before email links. */
.contact-links a[href^="mailto:"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M4%206h16c1.1%200%202%20.9%202%202v8c0%201.1-.9%202-2%202H4c-1.1%200-2-.9-2-2V8c0-1.1.9-2%202-2Zm0%202v.3l8%205.1%208-5.1V8H4Zm0%202.7V16h16v-5.3l-7.5%204.8c-.3.2-.7.2-1%200L4%2010.7Z%27/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M4%206h16c1.1%200%202%20.9%202%202v8c0%201.1-.9%202-2%202H4c-1.1%200-2-.9-2-2V8c0-1.1.9-2%202-2Zm0%202v.3l8%205.1%208-5.1V8H4Zm0%202.7V16h16v-5.3l-7.5%204.8c-.3.2-.7.2-1%200L4%2010.7Z%27/%3E%3C/svg%3E");
}

/* Beginner note: This GitHub icon appears before links that point to github.com. */
.contact-links a[href*="github.com"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M12%202C6.48%202%202%206.58%202%2012.25c0%204.5%202.87%208.31%206.84%209.66.5.09.68-.22.68-.49v-1.73c-2.78.62-3.37-1.38-3.37-1.38-.45-1.18-1.11-1.5-1.11-1.5-.91-.63.07-.62.07-.62%201%20.07%201.53%201.06%201.53%201.06.89%201.56%202.34%201.11%202.91.85.09-.66.35-1.11.63-1.37-2.22-.26-4.56-1.14-4.56-5.05%200-1.12.39-2.03%201.03-2.75-.1-.26-.45-1.3.1-2.71%200%200%20.84-.28%202.75%201.05A9.3%209.3%200%200%201%2012%206.93c.85%200%201.69.12%202.49.35%201.91-1.33%202.75-1.05%202.75-1.05.55%201.41.2%202.45.1%202.71.64.72%201.03%201.63%201.03%202.75%200%203.92-2.34%204.79-4.57%205.05.36.32.68.95.68%201.91v2.77c0%20.27.18.59.69.49A10.08%2010.08%200%200%200%2022%2012.25C22%206.58%2017.52%202%2012%202Z%27/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M12%202C6.48%202%202%206.58%202%2012.25c0%204.5%202.87%208.31%206.84%209.66.5.09.68-.22.68-.49v-1.73c-2.78.62-3.37-1.38-3.37-1.38-.45-1.18-1.11-1.5-1.11-1.5-.91-.63.07-.62.07-.62%201%20.07%201.53%201.06%201.53%201.06.89%201.56%202.34%201.11%202.91.85.09-.66.35-1.11.63-1.37-2.22-.26-4.56-1.14-4.56-5.05%200-1.12.39-2.03%201.03-2.75-.1-.26-.45-1.3.1-2.71%200%200%20.84-.28%202.75%201.05A9.3%209.3%200%200%201%2012%206.93c.85%200%201.69.12%202.49.35%201.91-1.33%202.75-1.05%202.75-1.05.55%201.41.2%202.45.1%202.71.64.72%201.03%201.63%201.03%202.75%200%203.92-2.34%204.79-4.57%205.05.36.32.68.95.68%201.91v2.77c0%20.27.18.59.69.49A10.08%2010.08%200%200%200%2022%2012.25C22%206.58%2017.52%202%2012%202Z%27/%3E%3C/svg%3E");
}

/* Beginner note: This LinkedIn icon appears before LinkedIn links. */
.contact-links a[href*="linkedin"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M5.25%203.75A2.25%202.25%200%201%201%205.25%208.25a2.25%202.25%200%200%201%200-4.5ZM3.5%209.75H7v10.5H3.5V9.75Zm6%200h3.34v1.43h.05c.46-.83%201.6-1.7%203.29-1.7%203.52%200%204.17%202.32%204.17%205.33v5.44h-3.5v-4.82c0-1.15-.02-2.63-1.6-2.63-1.6%200-1.85%201.25-1.85%202.54v4.91H9.5V9.75Z%27/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M5.25%203.75A2.25%202.25%200%201%201%205.25%208.25a2.25%202.25%200%200%201%200-4.5ZM3.5%209.75H7v10.5H3.5V9.75Zm6%200h3.34v1.43h.05c.46-.83%201.6-1.7%203.29-1.7%203.52%200%204.17%202.32%204.17%205.33v5.44h-3.5v-4.82c0-1.15-.02-2.63-1.6-2.63-1.6%200-1.85%201.25-1.85%202.54v4.91H9.5V9.75Z%27/%3E%3C/svg%3E");
}

.contact-links a::after {
  content: ">";
  margin-left: auto;
  color: var(--rvh-orange);
  font-weight: 900;
}

.contact-links a:hover,
.contact-links a:focus-visible {
  background: var(--rvh-yellow);
  color: var(--rvh-ink);
}

.site-footer {
  border-top: var(--rvh-border-strong) solid var(--rvh-yellow);
  background: var(--rvh-ink);
  color: #ffffff;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 24px 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.footer-inner span:first-child {
  font-weight: 900;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  :root {
    --rvh-page-gutter: 24px;
    --rvh-gap: 24px;
    --rvh-hero-gap: 24px;
    --rvh-card-padding: 24px;
  }

  .hero > .wp-block-group__inner-container,
  .section-heading > .wp-block-group__inner-container,
  .about-grid > .wp-block-group__inner-container,
  .contact-panel > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
  }

  /* Beginner note: On smaller screens the intro and buttons stay above the portrait card. */
  .hero-content {
    order: 1;
    min-height: auto;
  }

  .hero-visual {
    align-self: auto;
    order: 2;
    min-height: auto;
  }

  .hero-visual > .wp-block-group__inner-container {
    min-height: auto;
  }

  .section-heading > .wp-block-group__inner-container > * + *,
  .about-grid > .wp-block-group__inner-container > * + *,
  .contact-panel > .wp-block-group__inner-container > * + * {
    border-top: var(--rvh-section-border) solid var(--rvh-ink);
    border-left: 0;
  }

  .card-grid > .wp-block-group__inner-container,
  .project-list > .wp-block-group__inner-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  :root {
    --rvh-page-gutter: 16px;
    --rvh-gap: 18px;
    --rvh-hero-gap: 18px;
    --rvh-grid-gap: 16px;
    --rvh-card-padding: 20px;
    --rvh-button-padding: 11px 14px;
    --rvh-font-hero-title: 42px;
    --rvh-font-hero-lede: 22px;
  }

  body.admin-bar .site-header {
    top: 46px;
  }

  body {
    font-size: 16px;
  }

  .header-inner {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px 0;
  }

  .site-nav {
    flex-wrap: nowrap;
    justify-content: start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .site-nav a {
    white-space: nowrap;
  }

  .hero {
    padding-top: 32px;
    padding-bottom: 48px;
  }

  .hero-content,
  .hero-visual,
  .section-heading > .wp-block-group__inner-container > *,
  .about-grid > .wp-block-group__inner-container > *,
  .contact-panel > .wp-block-group__inner-container > *,
  .interest-card,
  .project-card {
    padding: var(--rvh-card-padding);
  }

  .hero-actions .wp-block-button {
    display: flex;
    flex: 1 1 142px;
  }

  .hero-actions .wp-block-button__link {
    width: 100%;
  }

  .signal-orbit {
    inset: 12px;
  }

  .portrait-panel {
    width: min(100%, 320px);
  }

  .section-inner {
    padding: 54px 0;
  }

  .card-grid > .wp-block-group__inner-container,
  .project-list > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
  }

  .interest-card,
  .project-card {
    min-height: auto;
  }

  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }
}