/* Shared page template layout. Page CSS owns content, never this shell. */
:root {
  --site-width: 1110px;
  --site-radius: 0;
  --site-hero-radius: 0;
  --site-hero-height: 0;
  --browser-theme-color: #111214;
}
html[data-theme="light"] { --browser-theme-color: #f4eedf; }

body.site-page {
  padding: 30px 24px calc(var(--footer-height, 62px) + 24px);
}
.site-shell { width: min(var(--site-width), 100%); min-width: 0; margin: 0 auto; }
.site-main { min-width: 0; }
.site-nav { margin: 0 4px 28px; }
.site-nav .nav-actions { min-width: 0; }
.site-nav .subpage-links { min-width: 0; }
.site-nav .subpage-links a { color: var(--muted); }
.site-nav .subpage-links a:hover { color: var(--page-accent-bright, var(--ink)); }
html[data-theme="light"] .site-nav .subpage-links a:hover { color: var(--page-accent, var(--ink)); }

.site-main > .site-hero:first-child {
  position: relative;
  display: flex;
  min-height: var(--site-hero-height);
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 48px);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: 0;
}
.site-hero { min-height: 0; border: 1px solid var(--line); }
.site-hero-copy { position: relative; z-index: 1; max-width: 720px; }
.site-hero-copy h1 { margin: 0; font: 600 clamp(1.85rem, 3.4vw, 2.4rem)/1.2 var(--font-title); letter-spacing: 0; overflow-wrap: break-word; }
.site-hero h1 span { color: inherit; }
.site-hero h1.site-title-compact span { white-space: nowrap; overflow-wrap: normal; }
/* The page mark sits beside the heading, not behind it. */
.page-logo {
  flex: 0 0 auto;
  width: clamp(150px, 20vw, 232px);
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
}
.site-intro { max-width: 620px; margin: 16px 0 0; color: var(--muted); line-height: 1.65; font-family: var(--font-content); }
.site-section { margin-top: 48px; scroll-margin-top: 24px; }
.site-card { padding: 23px; border: 1px solid var(--line); border-radius: var(--site-radius); }
.site-card > :first-child { margin-top: 0; }
.site-card > :last-child { margin-bottom: 0; }
.site-card p { color: var(--muted); line-height: 1.65; }
.site-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.site-link {
  display: inline-flex;
  min-height: 45px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 17px;
  border: 1px solid transparent;
  border-radius: 7px;
  font: 700 0.87rem var(--font-link);
  text-decoration: none;
}
.site-link-primary {
  border-color: var(--page-accent-bright, #d6d7d9);
  color: #18191b;
  background: var(--page-accent-bright, #d6d7d9);
}
.site-link-primary:hover { background: color-mix(in srgb, var(--page-accent-bright, #d6d7d9), white 16%); }
.site-link-secondary {
  border-color: color-mix(in srgb, var(--page-accent-bright, #777a80) 28%, #46484d);
  color: #dedfe1;
  background: rgba(255, 255, 255, var(--alpha-faint));
}
.site-link-secondary:hover {
  border-color: color-mix(in srgb, var(--page-accent-bright, #a9acb1) 46%, #777a80);
  background: rgba(255, 255, 255, var(--alpha-soft));
}
.site-link.site-link-compact { min-height: 37px; padding: 0 12px; font-size: 0.78rem; }
.site-link > span[aria-hidden]:last-child { font-size: 1rem; }
.project-actions .site-link { margin-top: 20px; }
.project-card[data-accent] .site-link > span:last-child { color: inherit; }
.project-card[data-accent] .site-link:hover { color: var(--page-accent-bright); }

html[data-theme="light"] .site-link-primary {
  border-color: var(--page-accent, #292b2e);
  color: #fff;
  background: var(--page-accent, #292b2e);
}
html[data-theme="light"] .site-link-primary:hover { background: color-mix(in srgb, var(--page-accent, #292b2e), black 14%); }
html[data-theme="light"] .site-link-secondary {
  border-color: color-mix(in srgb, var(--page-accent, #85888e) 24%, #bfc1c5);
  color: #34373b;
  background: rgba(0, 0, 0, 0.045);
}
html[data-theme="light"] .site-link-secondary:hover {
  border-color: color-mix(in srgb, var(--page-accent, #777b81) 40%, #85888e);
  background: rgba(0, 0, 0, 0.085);
}
.site-card-symbol { font: 700 5rem var(--font-icon); color: var(--page-accent-bright); }

/* Lines and muted text carry the page accent too, mixed once from the palette
   so every accented page tints alike instead of hardcoding its own greys. */
body.site-page[data-accent] {
  --line: color-mix(in srgb, var(--line-neutral), var(--page-accent) 60%);
  --muted: color-mix(in srgb, var(--muted-neutral), var(--page-accent-bright) 36%);
}
html[data-theme="light"] body.site-page[data-accent] {
  --line: color-mix(in srgb, var(--line-neutral), var(--page-accent) 32%);
  --muted: color-mix(in srgb, var(--muted-neutral), var(--page-accent-dark) 40%);
}

/* The seafloor canvas, still image, paper and daylight layers all paint above
   the body's own background, so an accent wash there is hidden behind the
   water. This one paints after them and still sits behind every element of the
   page, which is what makes the accent readable on the backdrop. */
body.site-page[data-accent]::after {
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 7%, rgba(var(--page-accent-rgb), var(--alpha-accent)), transparent 32rem),
    radial-gradient(circle at 8% 38%, rgba(var(--page-accent-rgb), var(--alpha-soft)), transparent 27rem),
    linear-gradient(rgba(var(--page-accent-rgb), var(--alpha-wash)), rgba(var(--page-accent-rgb), var(--alpha-wash)));
  content: "";
}
html[data-theme="light"] body.site-page[data-accent]::after {
  background: linear-gradient(rgba(var(--page-accent-rgb), var(--alpha-wash)), rgba(var(--page-accent-rgb), var(--alpha-wash)));
}

/* A single tint rule also makes the ambient backdrop work for new accents. */
body.site-page[data-accent] {
  background:
    radial-gradient(circle at 82% 7%, rgba(var(--page-accent-rgb), var(--alpha-accent)), transparent 32rem),
    radial-gradient(circle at 8% 38%, rgba(var(--page-accent-rgb), var(--alpha-soft)), transparent 27rem),
    linear-gradient(180deg, #151619 0%, #111214 44rem);
}
html[data-theme="light"] body.site-page[data-accent] {
  background: linear-gradient(180deg, #f4eedf 0%, #ebe2d0 44rem);
}

.site-page .home-footer { padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px)); }
.site-page .home-footer > span { white-space: nowrap; }
.site-page .home-footer .theme-toggle { flex-shrink: 0; }
.skip-link { position: fixed; z-index: 100; left: 16px; top: 12px; padding: 12px 16px; color: var(--bg); background: var(--ink); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.site-page :is(a, button, input, select, summary):focus-visible { outline: 2px solid var(--page-accent-bright, var(--ink)); outline-offset: 4px; }
html[data-theme="light"] .site-page :is(a, button, input, select, summary):focus-visible { outline-color: var(--page-accent, var(--ink)); }
.site-main:focus { outline: none; }

@media (max-width: 760px) {
  body.site-page { padding: 20px 15px calc(var(--footer-height, 96px) + 20px); }
  .site-nav { margin-bottom: 18px; }
  .site-main > .site-hero:first-child { flex-direction: column-reverse; align-items: flex-start; gap: 20px; padding: 22px; }
  .page-logo { width: min(232px, 100%); }
}
@media (max-width: 540px) {
  .site-nav { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  .site-nav .nav-actions { width: 100%; justify-content: space-between; }
  .site-card { padding: 19px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Long project names must wrap rather than run past the column. */
.site-hero h1 { overflow-wrap: break-word; }