/* Shared shell: sidebar, cursor, page layout grid. Page-specific content
   styles live in each page's own <style> block. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--color-bg-page); color: var(--color-text-primary); font-family: var(--font-body); }
a { color: inherit; }

/* ---- Blob cursor ---- */
html, body {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%239FC3E8' stop-opacity='0.6'/%3E%3Cstop offset='100%25' stop-color='%239FC3E8' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='18' fill='url(%23g)'/%3E%3Ccircle cx='20' cy='20' r='4' fill='%239FC3E8' fill-opacity='0.85'/%3E%3C/svg%3E") 20 20, auto;
}
a, button, .side-links a, .look-around, [onclick] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cdefs%3E%3CradialGradient id='g2' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%239FC3E8' stop-opacity='0.75'/%3E%3Cstop offset='100%25' stop-color='%239FC3E8' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='26' cy='26' r='24' fill='url(%23g2)'/%3E%3Ccircle cx='26' cy='26' r='5' fill='%239FC3E8'/%3E%3C/svg%3E") 26 26, pointer;
}

.layout { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }

/* ---- Sidebar (shared shell) ---- */
.side-nav {
  position: sticky; top: 0; height: 100vh;
  padding: var(--space-8) var(--space-6);
  display: flex; flex-direction: column;
}
.wordmark-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: nowrap; min-width: 0; }
.side-nav .wordmark { font-family: var(--font-display-serif); font-size: 21px; line-height: 1.1; text-decoration: none; white-space: nowrap; }
.flower {
  flex: 0 0 auto; width: 48px; height: auto; transform-origin: 50% 100%;
  transition: transform 0.6s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .flower { animation: float-cloud 2.6s ease-in-out infinite; }
  @keyframes float-cloud {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-5px) rotate(3deg); }
  }
}
.open-to-work { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--text-caption); color: var(--color-text-secondary); }
.open-to-work .dot { width: 8px; height: 8px; border-radius: 50%; background: #2e9e5b; }
@media (prefers-reduced-motion: no-preference) {
  .open-to-work .dot { animation: pulse 1.6s ease-in-out infinite; }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
}
.side-rule { display: block; width: 100%; height: 10px; margin: var(--space-4) 0 var(--space-8); }
.look-around { font-size: var(--text-caption); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-3); line-height: 1.4; }
.look-around .arrow { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .look-around .arrow { animation: bob 1.4s ease-in-out infinite; }
  @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
}
nav.side-links { display: flex; flex-direction: column; gap: var(--space-3); }
nav.side-links a { font-size: var(--text-body); text-decoration: none; color: var(--color-text-primary); }
nav.side-links a:hover { color: var(--color-text-secondary); }
nav.side-links a.active { color: var(--color-brand-primary); font-weight: var(--font-weight-semibold); text-decoration: underline; text-underline-offset: 4px; }
.sub-links { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0 0 var(--space-4); }
.sub-links a { font-size: var(--text-caption); text-decoration: none; color: var(--color-text-secondary); }
.sub-links a:hover { color: var(--color-brand-primary); }
.sub-links a.active { color: var(--color-brand-primary); font-weight: var(--font-weight-semibold); }

@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; }
  .side-nav { position: relative; height: auto; }
}

/* ---- Dot nav (shared shell: section jump-links on long-form pages) ---- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.dot-nav {
  position: fixed; top: 50%; right: var(--space-6); transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4);
  z-index: 20;
}
.dot-nav a { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.dot-nav-label { font-size: var(--text-caption); color: var(--color-text-secondary); white-space: nowrap; transition: color 150ms ease; }
.dot-nav-mark { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--color-border-firm); transition: background 150ms ease, transform 150ms ease; }
.dot-nav a:hover .dot-nav-mark { background: var(--color-text-secondary); transform: scale(1.3); }
.dot-nav a:hover .dot-nav-label { color: var(--color-text-primary); }
.dot-nav a.active .dot-nav-mark { background: var(--color-brand-primary); transform: scale(1.4); }
.dot-nav a.active .dot-nav-label { color: var(--color-brand-primary); font-weight: var(--font-weight-semibold); }

@media (max-width: 960px) {
  .dot-nav { display: none; }
}