/* START QUIRKY THEME */

:root {
  --bg: #faf9f6;
  --text: #1f1f1f;
  --muted: #6b6b6b;
  --accent1: #00897b;
  --accent2: #f97360;
  --card: #ffffff;
  --ring: rgba(0,137,123,.2);
  --shadow: 0 8px 20px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e1e24;
    --text: #e5e5e5;
    --muted: #9ca3af;
    --accent1: #26a69a;
    --accent2: #ff8a65;
    --card: #2a2a31;
    --ring: rgba(38,166,154,.25);
    --shadow: 0 10px 25px rgba(0,0,0,.4);
  }
}
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
a { color: var(--accent1); text-decoration: none; }
a:hover { text-decoration: underline; }
.btn {
  display:inline-block; padding:10px 14px; border-radius:10px;
  background: var(--accent1); color:white; font-weight:600; text-decoration:none;
}
.btn.secondary { background: var(--accent2); }
.card {
  background: var(--card);
  border-radius: 10px;
  padding: 16px;
  box-shadow: var(--shadow);
}

/* END QUIRKY THEME */

/* Modern, responsive site styles for Simon Cotter
   ------------------------------------------------ */
:root{
  --bg: #0b0f14;
  --card: #121822;
  --muted: #a7b1c2;
  --text: #e9eef7;
  --brand: #5ea1ff;
  --brand-2: #7bd389;
  --ring: rgba(94,161,255,.35);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

@media (prefers-color-scheme: light){
  :root{
    --bg: #f7f9fc;
    --card: #ffffff;
    --muted: #5a6472;
    --text: #0e1420;
    --brand: #275efe;
    --brand-2: #0da960;
    --ring: rgba(39,94,254,.25);
    --shadow: 0 12px 25px rgba(0,0,0,.08);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font: 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ color: var(--brand); text-decoration: none; }
a:hover{ text-decoration: underline; }

.container{ max-width: 1150px; margin: 0 auto; padding: 0 20px; }

/* Header / Nav */
.site-header{
  position: sticky; top:0; z-index: 50;
  backdrop-filter: saturate(140%) blur(8px);
  background: color-mix(in oklab, var(--bg), transparent 20%);
  border-bottom: 1px solid color-mix(in oklab, var(--muted), transparent 70%);
}
.navbar{ display:flex; align-items:center; justify-content:space-between; gap: 16px; padding: 14px 0; }
.brand{ display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px; }
.brand img{ width:42px; height:42px; object-fit:cover; border-radius:12px; box-shadow: var(--shadow); }
.nav-links{ display:flex; gap:14px; flex-wrap:wrap; }
.nav-links a{ padding:8px 12px; border-radius:10px; }
.nav-links a[aria-current="page"]{ background: color-mix(in oklab, var(--brand), transparent 85%); text-decoration:none; }

/* Mobile nav */
.nav-toggle{ display:none; }
@media (max-width: 720px){
  .nav-links{ display:none; width:100%; flex-direction:column; padding:10px 0; }
  .nav-links.open{ display:flex; }
  .nav-toggle{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid color-mix(in oklab, var(--muted), transparent 70%); border-radius:10px; background:transparent; color:var(--text); }
}

/* Hero */
.hero{ padding: 56px 0 22px; }
.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items:center; }
.hero h1{ font-size: clamp(28px, 3.6vw, 44px); line-height:1.1; margin: 0 0 10px; }
.hero p.lead{ font-size: clamp(16px, 2.1vw, 20px); color: var(--muted); margin: 10px 0 18px; }
.hero .cta{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 14px; border-radius: 12px; border: 1px solid transparent;
  background: var(--brand); color: white; font-weight: 600; text-decoration:none;
  box-shadow: var(--shadow);
}
.btn.secondary{ background: color-mix(in oklab, var(--brand), transparent 85%); color: var(--text); border-color: color-mix(in oklab, var(--muted), transparent 70%); box-shadow:none; }
.btn:hover{ text-decoration:none; filter: saturate(110%); }
.hero .portrait{
  width: 100%; border-radius: 16px; box-shadow: var(--shadow); aspect-ratio: 4/3; object-fit: cover;
}

/* Section */
.section{ padding: 26px 0 50px; }
.section h2{ font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 14px; }
.cards{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.card{ background: var(--card); border: 1px solid color-mix(in oklab, var(--muted), transparent 75%); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); }
.card h3{ margin: 0 0 8px; font-size: 18px; }
.card p{ color: var(--muted); margin: 0 0 8px; }

@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .cards{ grid-template-columns: 1fr; }
}

/* Lists */
.list{ display:grid; gap: 8px; padding-left: 18px; }
.list li{ margin-left: 4px; color: var(--muted); }
.meta{ color: var(--muted); font-size: 14px; }

/* Footer */
.site-footer{ border-top: 1px solid color-mix(in oklab, var(--muted), transparent 70%); padding: 18px 0 40px; color: var(--muted); }
.align-right{ margin-left:auto; text-align:right; }

/* Utilities */
.badge{ padding:2px 8px; border-radius:999px; font-size:12px; border:1px solid color-mix(in oklab, var(--muted), transparent 70%); color:var(--muted); }
.kbd{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; border: 1px solid color-mix(in oklab, var(--muted), transparent 70%); padding: 1px 6px; border-bottom-width: 2px; border-radius: 6px; font-size: 12px; color: var(--muted); }
.visually-hidden{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px, 1px, 1px, 1px); white-space:nowrap; }