/* Rutter-Reese Site — static, recruiter-first, readable
   Light-only (no mode toggle)
   Soft background + rounded stage container (Felicia-style, but minimalist)

   Notes:
   - Avoids color-mix() for broader browser compatibility.
*/

:root{
  --bg: #f6f7fb;
  --bg-rgb: 246, 247, 251;

  --surface: #ffffff;
  --surface-rgb: 255, 255, 255;

  --text: #0f172a;
  --muted: #475569;

  --border: #e5e7eb;
  --border-rgb: 229, 231, 235;

  --shadow: 0 10px 30px rgba(2,6,23,.06);
  --shadow-lg: 0 22px 60px rgba(2,6,23,.10);

  --radius: 18px;
  --radius-lg: 28px;
  --max: 1120px;

  /* default accent (writing) */
  --accent: #2563eb;
  --accent-2: #1d4ed8;
  --accent-rgb: 37, 99, 235;
  --accent2-rgb: 29, 78, 216;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

body[data-theme="writing"]{ 
  --accent:#2563eb; --accent-2:#1d4ed8;
  --accent-rgb: 37, 99, 235; --accent2-rgb: 29, 78, 216;
}
body[data-theme="accounting"]{ 
  --accent:#16a34a; --accent-2:#15803d;
  --accent-rgb: 22, 163, 74; --accent2-rgb: 21, 128, 61;
}
body[data-theme="it"]{ 
  --accent:#7c3aed; --accent-2:#6d28d9;
  --accent-rgb: 124, 58, 237; --accent2-rgb: 109, 40, 217;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  background:
    radial-gradient(1200px 700px at -10% 0%, rgba(var(--accent-rgb), .18), transparent 60%),
    radial-gradient(900px 520px at 110% 30%, rgba(var(--accent2-rgb), .12), transparent 60%),
    radial-gradient(850px 520px at 25% 115%, rgba(var(--accent-rgb), .08), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 3px; }

.shell{
  width: min(var(--max), calc(100% - 2rem));
  margin: 0 auto;
}

.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left: 1rem;
  top: 1rem;
  width:auto;
  height:auto;
  padding:.6rem .8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  z-index: 999;
}

/* Header */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(var(--bg-rgb), .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(var(--border-rgb), .65);
}
.header-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
}

.brand{
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--text);
}
.brand:hover{ text-decoration: none; }

/* Nav pills */
.nav{
  display:flex;
  align-items:center;
  gap: .15rem;
  flex-wrap: wrap;
  background: rgba(var(--surface-rgb), .92);
  border: 1px solid rgba(var(--border-rgb), .85);
  border-radius: 999px;
  padding: .25rem;
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
}
.nav a{
  color: var(--muted);
  font-weight: 650;
  font-size: .95rem;
  padding: .55rem .9rem;
  border-radius: 999px;
  transition: background-color .15s ease, color .15s ease;
}
.nav a[aria-current="page"]{
  color: var(--text);
  background: rgba(var(--accent-rgb), .12);
}

/* Buttons */
.button{
  background: var(--accent);
  color: #fff !important;
  padding: .55rem .95rem;
  border-radius: 999px;
  font-weight: 750;
  border: 1px solid rgba(2,6,23,.06);
  box-shadow: 0 10px 20px rgba(2,6,23,.08);
}
.button:hover{ text-decoration:none; filter: brightness(0.98); }

.button.secondary{
  background: rgba(var(--surface-rgb), .96);
  color: var(--text) !important;
  border: 1px solid rgba(var(--border-rgb), .95);
  box-shadow: none;
}

/* Stage layout */
.layout{
  display:flex;
  gap: 1.25rem;
  padding: 1.15rem;
  margin: 1.75rem auto 2rem;
  border-radius: var(--radius-lg);
  background: rgba(var(--surface-rgb), .55);
  border: 1px solid rgba(var(--border-rgb), .65);
  box-shadow: var(--shadow-lg);
}

.sidebar{ flex: 0 0 320px; }
.content{ flex: 1; min-width: 0; }

.card{
  background: var(--surface);
  border: 1px solid rgba(var(--border-rgb), .92);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
}

.avatar{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(var(--border-rgb), .95);
  margin-bottom: .9rem;
  background: rgba(var(--bg-rgb), .9);
}

h1{ font-size: 1.35rem; margin: .2rem 0 .2rem; }
h2{ font-size: 1.25rem; margin: 0 0 .7rem; }
h4{ margin: 0 0 .6rem; font-size: 1rem; }

.role{ margin: 0 0 1rem; color: var(--muted); font-weight: 650; }

.meta{ display:grid; gap: .9rem; margin-top: 1rem; }
.label{ margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.value{ margin: .15rem 0 0; font-weight: 650; }

.muted{ color: var(--muted); }
.small{ font-size: .92rem; }

.section{ margin-top: 1.15rem; }

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.item{
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid rgba(var(--border-rgb), .92);
  background: rgba(var(--bg-rgb), .55);
}

.list{ margin: .5rem 0 0; padding-left: 1.15rem; }
.list li{ margin: .35rem 0; }

.actions{ display:flex; gap: .6rem; flex-wrap: wrap; }

/* Embedded PDFs */
.embed{
  width: 100%;
  height: 72vh;
  min-height: 640px;
  border: 1px solid rgba(var(--border-rgb), .92);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(var(--surface-rgb), .98);
}

/* Footer */
.site-footer{
  border-top: 1px solid rgba(var(--border-rgb), .7);
  background: rgba(var(--bg-rgb), .65);
}
.footer-row{
  padding: 1rem 0 1.25rem;
  color: var(--muted);
  font-size: .92rem;
}

@media (max-width: 980px){
  .layout{ flex-direction: column; }
  .sidebar{ flex: 1; }
  .split{ grid-template-columns: 1fr; }
}

@media (max-width: 560px){
  .shell{ width: calc(100% - 1.25rem); }
  .header-row{ align-items:flex-start; }
  .nav{ width: 100%; justify-content: flex-start; }
}