/* Reindeer CMS 1.10: minimalist responsive navigation.
   Desktop >= 700px: inline links; mobile < 700px: push-down foldout.
   Outfit for headings, Inter for content and navigation. */
:root {
  color-scheme: light;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-heading: 'Outfit', Arial, sans-serif;
  --heading: var(--accent);
  --foldout-bg: color-mix(in srgb, var(--menu-bg, var(--heading)) 97%, #fff 3%);
  --foldout-ink: #fff;
  /* Current and hovered links are exactly 10% lighter than the menu. */
  --foldout-highlight-bg: color-mix(in srgb, var(--foldout-bg) 90%, #fff 10%);
  --foldout-duration: 350ms;
  /* Shared 920px outer shell and identical horizontal insets for all sections. */
  --layout-width: 920px;
  --layout-padding: clamp(23px, 5vw, 60px);
}
html { scroll-behavior: smooth; background-color: #ffffff; }
body {
  font-family: var(--font-body);
  font-size: clamp(1rem, .95rem + .15vw, 1.13rem);
  line-height: 1.75;
  background: #ffffff;
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
.container { width: min(100% - 36px, var(--layout-width)); margin-inline: auto; }
.site-header { position: relative; z-index: 1; background: #ffffff; border-bottom: 1px solid var(--line); }
.header-inner { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 16px 20px; padding-block: 16px; padding-inline: var(--layout-padding); flex-wrap: wrap; }
/* Desktop links sit alongside the website title. They wrap if needed at narrower widths. */
.theme-desktop-nav {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  margin-left: auto;
  gap: 2px clamp(9px, 1.2vw, 18px);
  max-width: 100%;
}
.theme-desktop-nav .theme-nav-link,
.theme-desktop-nav .theme-nav-link:visited {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  padding: 5px 0;
  color: var(--ink);
  background: transparent;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
  opacity: 1;
  transition: color 160ms ease;
}
.theme-desktop-nav .theme-nav-label { display: inline; margin: 0; }
.theme-desktop-nav .theme-nav-link:hover,
.theme-desktop-nav .theme-nav-link:focus-visible,
.theme-desktop-nav .theme-nav-link[aria-current="page"],
.theme-desktop-nav .theme-nav-link[aria-current="page"]:visited {
  color: var(--accent);
  opacity: 1;
  background: transparent;
  text-decoration: none;
}
.theme-desktop-nav .theme-nav-link[aria-current="page"] { font-weight: 700; }
.theme-desktop-nav .theme-nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.brand {
  color: var(--heading);
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 1vw + .92rem, 1.5rem);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.025em;
  text-decoration: none;
}
/* Without JavaScript the navigation stays available below the header. */
.theme-menu-button { display: none; }
.js .theme-menu-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  min-height: 46px;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  font: 600 1rem var(--font-body);
  letter-spacing: .035em;
}
.theme-menu-button:hover { color: var(--accent); }
.theme-menu-button svg { width: 23px; height: 23px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; fill: none; }
.theme-icon-close { display: none; }
.theme-menu-button[aria-expanded="true"] .theme-icon-menu { display: none; }
.theme-menu-button[aria-expanded="true"] .theme-icon-close { display: inline; }
.theme-menu-button:focus-visible, .theme-nav-link:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.theme-menu-button:focus-visible { outline-color: var(--accent); outline-offset: 4px; }

/* The foldout is in normal document flow, so opening it pushes the content down. */
.theme-foldout {
  display: grid;
  grid-template-rows: 1fr;
  flex-shrink: 0;
  color: var(--foldout-ink);
  background-color: var(--foldout-bg);
  background-image: radial-gradient(ellipse 70% 90% at 90% 0%, rgb(255 255 255 / .035), transparent 75%);
}
.theme-foldout-inner { min-height: 0; overflow: hidden; }
.js .theme-foldout {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--foldout-duration) ease, visibility 0s linear var(--foldout-duration);
}
.js .theme-foldout.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--foldout-duration) ease, visibility 0s;
}
/* Mobile: one readable, full-width link per row in the aligned content shell. */
.theme-foldout .theme-nav-grid {
  width: min(100% - 36px, var(--layout-width));
  margin-inline: auto;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
}
/* Mobile menu links match the content paragraph font size. */
.theme-foldout .theme-nav-link,
.theme-foldout .theme-nav-link:visited {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  min-height: 56px;
  /* Match the content's horizontal inset; highlights span the full block. */
  padding: 12px var(--layout-padding);
  font-family: var(--font-body);
  font-size: 110%;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: normal;
  text-decoration: none;
  color: #f5f5f5;
  background: transparent;
  border: 0;
  overflow-wrap: anywhere;
  transition: background-color 160ms ease, color 160ms ease;
}
/* The label adds no offset: link padding aligns it with content. */
.theme-foldout .theme-nav-label {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
/* Current, hovered and keyboard-focused links stay clear and consistent. */
.theme-foldout .theme-nav-link:hover,
.theme-foldout .theme-nav-link:focus-visible,
.theme-foldout .theme-nav-link[aria-current="page"],
.theme-foldout .theme-nav-link[aria-current="page"]:visited {
  background-color: var(--foldout-highlight-bg);
  color: #ffffff;
  opacity: 1;
  text-decoration: none;
}
.theme-foldout .theme-nav-link:focus-visible { outline-color: #fff; }

.content-card {
  width: min(100% - 36px, var(--layout-width));
  /* Reduce the gap before the page heading without changing text alignment. */
  margin-top: clamp(8px, 1.7vw, 20px);
  /* White, borderless reading area aligned with the header, menu and footer. */
  border: 0;
  border-radius: 0;
  background: #ffffff;
  padding: clamp(18px, 2.5vw, 28px) var(--layout-padding) var(--layout-padding);
  min-height: 320px;
  overflow-wrap: anywhere;
  font-size: 110%;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); font-weight: 600; line-height: 1.2; letter-spacing: -.035em; color: var(--heading); }
h1 { font-size: clamp(2.475rem,5.06vw,4.015rem); margin: 0 0 1.4rem; }
h2 { font-size: clamp(1.76rem,2.53vw,2.255rem); }
h3 { font-size: clamp(1.32rem,1.87vw,1.65rem); }
a { color: var(--accent); }
a:hover { opacity: .82; }
.footer {
  width: min(100% - 36px, var(--layout-width));
  margin: 0 auto;
  margin-top: clamp(28px,5vw,48px);
  padding: 22px var(--layout-padding) 35px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  color: var(--soft);
  background: #ffffff;
  font-size: .88rem;
}
.footer a { color: var(--heading); }
/* A consistent, familiar breakpoint for navigation only. */
@media(min-width:700px) {
  .theme-menu-button, .js .theme-menu-button { display: none; }
  .theme-foldout, .js .theme-foldout, .js .theme-foldout.is-open { display: none; }
}
@media(max-width:699px) {
  .theme-desktop-nav { display: none; }
  .header-inner { flex-wrap: nowrap; }
  .brand { min-width: 0; overflow-wrap: anywhere; }
}
@media(max-width:600px) {
  :root { --layout-padding: 21px; }
  .header-inner { min-height: 74px; }
  .theme-foldout .theme-nav-link { min-height: 52px; padding-block: 12px; }
  .footer { flex-wrap: wrap; }
  .footer-powered { text-align: left; margin-left: 0; }
  .content-card { padding: 16px var(--layout-padding) 24px; }
}
@media(prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto!important; transition: none!important; }
}
/* Plugin forms and notifications retain readable colors against light content. */
.contact-form input,.contact-form textarea { background: var(--panel); color: var(--ink); border-color: var(--line); }
.contact-form button,.consent-actions button { color: var(--on-accent,#fff); }
.contact-error { color: #51221d; }
.contact-success { color: #21482e; }
.content-card .portfolio-title-row h2 { font-size: 1.353rem; }