/* Page shell layout (owner: UI/UX). Mobile first. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-wrap: break-word; }
main { flex: 1; }

.skip-link { position: absolute; left: -999px; top: 0; }
.skip-link:focus { left: var(--space-1); top: var(--space-1); background: var(--color-bg); color: var(--color-text); padding: var(--space-1) var(--space-2); border: 2px solid currentColor; z-index: 20; }

.site-header { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-1) var(--space-2); position: sticky; top: 0; z-index: 10; background: var(--color-bg); border-bottom: 1px solid transparent; transition: border-color .3s ease; }
.site-header.is-scrolled { border-bottom-color: currentColor; }
.site-header ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-1); list-style: none; margin: 0; padding: 0; }
.site-header nav a { display: inline-block; padding: .6rem .5rem; min-height: 44px; text-decoration: none; border-bottom: 3px solid transparent; }
.site-header nav a:hover { border-bottom-color: var(--color-accent); }
.site-header nav a[aria-current="page"] { border-bottom-color: currentColor; }
.brand { display: inline-block; padding: .4rem 0; }

main { width: 100%; max-width: var(--measure); margin: 0 auto; padding: var(--space-3) var(--space-2); }
main > * + * { margin-top: var(--space-2); }
main.wide, main:has(.stage), main:has(.split) { max-width: 72rem; }

/* Text-animation containers. Content must stay readable with no JS and no motion. */
.stage { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; padding: var(--space-4) 0; overflow: hidden; }
.kinetic { display: block; max-width: 100%; overflow: hidden; }
.kinetic .word, .kinetic .char { display: inline-block; }
.section { padding: var(--space-4) 0; }
.section + .section { border-top: 1px solid rgba(0,0,0,.15); }
.pin-text { position: sticky; top: 5rem; }

/* Two coasts side by side: stacked on phones, columns from tablet up. */
.split { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.split > * { min-width: 0; padding: var(--space-2); border-top: 6px solid currentColor; }
.split > .istria { color: var(--color-istria); background: var(--color-istria-tint); }
.split > .islands { color: var(--color-islands); background: var(--color-islands-tint); }
.split > * > * { color: var(--color-text); }
.split > * > :is(h2, h3) { color: inherit; }

.site-footer { padding: var(--space-3) var(--space-2); text-align: center; border-top: 1px solid rgba(0,0,0,.15); }

@media (min-width: 40rem) {
  .site-header { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--space-1) var(--space-3); }
  main { padding: var(--space-4) var(--space-3); }
}
@media (min-width: 56rem) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-header { transition: none; }
}
@media print { .site-header, .skip-link { position: static; } }