@font-face { font-family: 'Spectral'; font-style: italic; font-weight: 300; font-display: swap; src: url("/assets/fonts/spectral-latin-300-italic.woff2") format("woff2"); }
@font-face { font-family: 'Spectral'; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/spectral-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/spectral-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/spectral-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: 'Sofia Sans Semi Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/sofia-sans-semi-condensed-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: 'Sofia Sans Semi Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/sofia-sans-semi-condensed-latin-600-normal.woff2") format("woff2"); }
:root {
  --bg-light-base: #e9e0cd;
  --fg-light-base-body: #11353b;
  --fg-light-base-heading: #11353b;
  --fg-light-base-muted: #344f52;
  --fg-light-base-link: #1a5560;
  --fg-light-base-inverse: #0c2a2f;
  --bg-light-card: #dfd1b5;
  --fg-light-card-body: #11353b;
  --fg-light-card-heading: #11353b;
  --fg-light-card-muted: #344f52;
  --fg-light-card-link: #1a5560;
  --fg-light-card-inverse: #0c2a2f;
  --bg-light-elevated: #f3eee3;
  --fg-light-elevated-body: #11353b;
  --fg-light-elevated-heading: #11353b;
  --fg-light-elevated-muted: #344f52;
  --fg-light-elevated-link: #1a5560;
  --fg-light-elevated-inverse: #0c2a2f;
  --brand-light-accent: #1a5560;
  --brand-light-accent-hover: #6a4413;
  --brand-light-on-accent: #f6f1e6;
  --focus-light-ring: #1a5560;
  --border-light-default: #7c6a48;
  --border-light-subtle: #c7b48c;
}
.bg-surface-base { background: var(--bg-light-base); --fg-body: var(--fg-light-base-body); --fg-heading: var(--fg-light-base-heading); --fg-muted: var(--fg-light-base-muted); --fg-link: var(--fg-light-base-link); --fg-inverse: var(--fg-light-base-inverse); }
.bg-surface-card { background: var(--bg-light-card); --fg-body: var(--fg-light-card-body); --fg-heading: var(--fg-light-card-heading); --fg-muted: var(--fg-light-card-muted); --fg-link: var(--fg-light-card-link); --fg-inverse: var(--fg-light-card-inverse); }
.bg-surface-elevated { background: var(--bg-light-elevated); --fg-body: var(--fg-light-elevated-body); --fg-heading: var(--fg-light-elevated-heading); --fg-muted: var(--fg-light-elevated-muted); --fg-link: var(--fg-light-elevated-link); --fg-inverse: var(--fg-light-elevated-inverse); }
.text-role-body { color: var(--fg-body); overflow-wrap: anywhere; }
.text-role-heading { color: var(--fg-heading); overflow-wrap: anywhere; }
.text-role-muted { color: var(--fg-muted); }
.text-role-link { color: var(--fg-link); }
.text-role-inverse { color: var(--fg-inverse); }
.text-role-link { text-decoration: underline; }
.text-role-link:hover { color: var(--brand-light-accent-hover); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--focus-light-ring); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
.site-logo { max-width: 100%; height: auto; }
.site-menu > summary { list-style: none; cursor: pointer; }
.site-menu > summary::-webkit-details-marker { display: none; }
:where(section[data-section][style]) { background-size: cover; background-position: center; padding: clamp(1.5rem, 4vw, 3rem); }
:where(section[data-section][style] > .bg-surface-card) { padding: clamp(1rem, 3vw, 2rem); }
:where(section[data-section][style] > .bg-surface-card > :first-child) { margin-top: 0; }
:where(section[data-section][style] > .bg-surface-card > :last-child) { margin-bottom: 0; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { position: static; padding: 0.25rem 0.5rem; outline: 2px solid var(--focus-light-ring); }

:root {
  --tide: #163d44;
  --tide-deep: #0f2f35;
  --foam: #f4ede0;
  --mist: #c9d6d2;
  --ochre: #b8863b;
  --ochre-light: #e6c68c;
  --sand-deep: #d9c7a2;
  --serif: 'Spectral', Georgia, serif;
  --sans: 'Sofia Sans Semi Condensed', 'Arial Narrow', sans-serif;
  --gutter: clamp(1rem, 5vw, 4.5rem);
  --measure: 36rem;
  --step: 0;
  --step-width: 0rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.7;
}

p, ul, ol, blockquote, figure, table { margin: 0 0 1.4rem; }

/* ---------- header ---------- */

.site-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem var(--gutter);
  border-bottom: 1px solid var(--border-light-subtle);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: inherit;
  text-decoration: none;
}

.brand .site-logo { width: 2.6rem; height: auto; }

.brand-word {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.3rem;
  letter-spacing: 0.01em;
  text-transform: lowercase;
}

.site-menu > summary {
  position: relative;
  z-index: 31;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.4rem 1.1rem;
  background: var(--tide);
  color: var(--foam);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
}

.menu-icon {
  display: inline-block;
  width: 1.3rem;
  height: 0.55rem;
  border-top: 2px solid var(--ochre-light);
  border-bottom: 2px solid var(--foam);
}

.site-menu[open] .menu-icon { height: 2px; border-bottom: 0; }

.site-menu > ul {
  display: none;
}

.site-menu[open] > ul {
  --fg-link: var(--foam);
  position: fixed;
  z-index: 30;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: min(26rem, 100%);
  margin: 0;
  padding: 5.5rem 2rem 2.5rem;
  overflow-y: auto;
  list-style: none;
  background: var(--tide);
  border-left: 6px solid var(--ochre);
}

.site-menu[open] > ul > li { padding: 1rem 0; border-bottom: 1px solid #2e5a62; }

.site-menu[open] > ul > li > a {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.2;
  text-decoration: none;
}

.site-menu[open] ul ul {
  --fg-link: var(--mist);
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}

.site-menu[open] ul ul a {
  display: block;
  padding: 0.25rem 0;
  font-family: var(--sans);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.site-menu a:hover { color: var(--ochre-light); text-decoration: underline; }

.site-menu :focus-visible,
.tide :focus-visible { outline-color: var(--ochre-light); }

/* ---------- breadcrumbs ---------- */

.breadcrumbs { padding: 0.8rem var(--gutter) 0; }

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
}

.breadcrumbs li + li::before { content: "/"; margin-right: 0.9rem; color: var(--border-light-default); }

/* ---------- tide surfaces (slate-teal bands) ---------- */

.bg-surface-elevated.tide {
  background: var(--tide);
  --fg-body: var(--foam);
  --fg-heading: #ffffff;
  --fg-muted: var(--mist);
  --fg-link: var(--ochre-light);
  --fg-inverse: var(--foam);
}

.tide .text-role-link:hover { color: #ffffff; }

/* ---------- photo cover (home, about) ---------- */

.home, .about { position: relative; }

.cover {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: end;
  gap: 1.5rem;
  min-height: min(86vh, 48rem);
  padding: 4rem var(--gutter) clamp(2.5rem, 7vh, 4.5rem);
}

.cover-card {
  display: grid;
  gap: 1.2rem;
  max-width: 46rem;
  padding: clamp(1.4rem, 4vw, 2.6rem);
  border-top: 6px solid var(--ochre);
}

.home .shore > .photo-hero,
.about .column > .photo-hero {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  max-width: none;
  height: min(86vh, 48rem);
  margin: 0;
}

.home .shore > .photo-hero img,
.about .column > .photo-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover h1 {
  max-width: 14ch;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.6rem, 7vw, 5.8rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.cover-lines { max-width: 30rem; }

.cover-lines .display-line:last-child { margin-bottom: 0; }

.cover-lines .display-line {
  margin: 0 0 0.6rem;
  font-family: var(--sans);
  font-size: 1.15rem;
  line-height: 1.5;
}

@media (min-width: 60rem) {
  .home .cover-card {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: end;
    column-gap: 2.5rem;
    max-width: 66rem;
  }
}

.cover-pano { min-height: min(62vh, 34rem); }

.about .column > .photo-hero { height: min(62vh, 34rem); }

.cover-pano h1 { max-width: 20ch; font-size: clamp(2.2rem, 5.5vw, 4.4rem); }

/* ---------- shore bands (stepped body flow) ---------- */

.shore { padding: clamp(2rem, 6vh, 4rem) 0 4rem; }

.shore > * {
  max-width: var(--measure);
  margin-left: calc(var(--gutter) + var(--step) * var(--step-width));
  margin-right: var(--gutter);
}

.shore > h2:nth-of-type(1), .shore > h2:nth-of-type(1) ~ * { --step: 0; }
.shore > h2:nth-of-type(2), .shore > h2:nth-of-type(2) ~ * { --step: 1; }
.shore > h2:nth-of-type(3), .shore > h2:nth-of-type(3) ~ * { --step: 2; }
.shore > h2:nth-of-type(4), .shore > h2:nth-of-type(4) ~ * { --step: 3; }
.shore > h2:nth-of-type(5), .shore > h2:nth-of-type(5) ~ * { --step: 4; }

@media (min-width: 60rem) {
  .shore { --step-width: clamp(2rem, 5vw, 5rem); }
}

.shore > h2 {
  margin-top: 4.5rem;
  margin-bottom: 2rem;
  padding: 1.6rem 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.4;
  letter-spacing: 0.2em;
  background: var(--sand-deep);
  box-shadow: 0 0 0 100vmax var(--sand-deep);
  clip-path: inset(0 -100vmax);
}

.shore > h2:nth-of-type(even) {
  --fg-heading: var(--foam);
  background: var(--tide);
  box-shadow: 0 0 0 100vmax var(--tide);
}

.shore > h2:first-child { margin-top: 0; }

.shore > p:first-child,
.shore > .photo-hero + p {
  font-size: 1.3rem;
  line-height: 1.6;
}

.shore a, .column a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

.shore li, .column li { margin-bottom: 0.5rem; }

/* ---------- band heads (hub, article, thank you) ---------- */

.band-head {
  padding: clamp(3rem, 9vh, 6rem) var(--gutter) clamp(2rem, 5vh, 3rem);
  border-bottom: 8px solid var(--ochre);
}

.band-head h1 {
  max-width: 22ch;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.2rem, 5.5vw, 4.4rem);
  line-height: 1.05;
}

.hub-body > .photo-hero,
.hub-body > section[data-section][style] {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.hub-body > .photo-hero { margin-top: calc(-1 * clamp(2rem, 6vh, 4rem)); margin-bottom: 3rem; }

.hub-body > .photo-hero img,
.column > .photo-hero img {
  display: block;
  width: 100%;
  height: clamp(14rem, 42vh, 28rem);
  object-fit: cover;
}

.photo-inline img { display: block; width: 100%; }

.shore > .photo-inline { max-width: 44rem; }

section[data-section][style] {
  padding: clamp(3rem, 12vh, 7rem) var(--gutter);
  background-size: cover;
  background-position: center;
}

section[data-section][style] > .bg-surface-card {
  max-width: var(--measure);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border-top: 6px solid var(--ochre);
}

section[data-section][style] h2 {
  margin-top: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.2em;
}

.hub-index {
  padding: 3rem var(--gutter) 4rem;
  border-top: 8px solid var(--tide);
}

.index-label {
  margin-bottom: 1.2rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
}

.hub-index ul {
  display: grid;
  gap: 0;
  max-width: 48rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hub-index li { border-bottom: 1px solid var(--border-light-default); }

.hub-index a {
  display: block;
  padding: 0.9rem 0;
  font-style: italic;
  font-size: 1.35rem;
  text-decoration: none;
}

.hub-index a:hover { text-decoration: underline; }

/* ---------- one column (article, about) ---------- */

.column { padding: clamp(2.5rem, 7vh, 4.5rem) var(--gutter) 5rem; }

.column > * { max-width: var(--measure); margin-left: auto; margin-right: auto; }

.column > .photo-hero,
.column > .photo-inline,
.column > section[data-section][style] {
  max-width: none;
  margin: 3.5rem calc(-1 * var(--gutter));
}

.article .column > .photo-hero:first-child { margin-top: calc(-1 * clamp(2.5rem, 7vh, 4.5rem)); }

.column > .photo-inline img { height: clamp(14rem, 48vh, 32rem); object-fit: cover; }

.column > section[data-section][style] > .bg-surface-card { margin: 0 auto; }

.column h2 {
  margin: 3.5rem auto 1rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.2;
}

.column h3 {
  margin: 2.2rem auto 0.6rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
}

.column > p:first-child { font-size: 1.3rem; line-height: 1.6; }

.accent-block {
  padding: 1.1rem 0;
  border-top: 2px solid var(--ochre);
  border-bottom: 2px solid var(--ochre);
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.6;
}

.accent-block p:last-child { margin-bottom: 0; }

@media (min-width: 72rem) {
  .column > .accent-block {
    width: 15rem;
    margin-right: calc(50% - var(--measure) / 2 - 16rem);
    float: right;
    clear: right;
  }
}

.table-scroll { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 1rem; }

th, td { padding: 0.6rem 0.8rem; text-align: left; border-bottom: 1px solid var(--border-light-default); }

/* ---------- about statement ---------- */

.about .column > .photo-hero + * { margin-top: 0; }

/* ---------- contact (split) ---------- */

.contact { position: relative; }

.contact-shore { display: none; }

.contact-panel { padding: clamp(2.5rem, 6vh, 4rem) var(--gutter) 4.5rem; }

.contact-panel > * { max-width: 32rem; }

.contact-title h1 {
  margin: 0 0 1.5rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.1rem, 4.5vw, 3.6rem);
  line-height: 1.08;
}

.contact-body h2 {
  margin: 2rem 0 0.8rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.18em;
}

.contact-body > .photo-hero { margin: 0 0 2rem; }

.contact-body > .photo-hero img { display: block; width: 100%; height: 16rem; object-fit: cover; }

.tide-form {
  display: grid;
  gap: 1.1rem;
  margin-top: 2rem;
  padding-top: 1.8rem;
  border-top: 2px solid var(--ochre);
}

.field { display: grid; gap: 0.35rem; }

.field-label {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
}

.field input {
  min-height: 2.9rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border-light-default);
  border-radius: 0;
  background: var(--bg-light-elevated);
  color: var(--fg-light-elevated-body);
  font: inherit;
  font-size: 1.05rem;
}

.field input:focus-visible { outline: 2px solid var(--brand-light-accent); outline-offset: 1px; }

.share {
  justify-self: start;
  min-height: 2.9rem;
  padding: 0.6rem 2.2rem;
  border: 0;
  background: var(--brand-light-accent);
  color: var(--brand-light-on-accent);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.18em;
  cursor: pointer;
}

.share:hover { background: var(--brand-light-accent-hover); }

@media (min-width: 56rem) {
  .contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 88vh;
  }
  .contact-shore { display: block; min-height: 100%; }
  .contact-body > .photo-hero {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 50%;
    margin: 0;
  }
  .contact-body > .photo-hero img { width: 100%; height: 100%; object-fit: cover; }
}

/* ---------- thank you (stepped trio) ---------- */

.steps { counter-reset: step; }

.steps > h2 { counter-increment: step; }

.steps > h2::before {
  content: counter(step, decimal-leading-zero);
  display: inline-block;
  min-width: 3.2rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  color: var(--ochre-light);
}

.steps > h2:nth-of-type(odd)::before { color: #7a5419; }

/* ---------- footer ---------- */

.site-foot { border-top: 8px solid var(--ochre); }

.foot-inner { padding: 3rem var(--gutter) 3.5rem; }

.foot-name {
  margin-bottom: 0.4rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.6rem;
  text-transform: lowercase;
}

.foot-line {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  letter-spacing: 0.12em;
  color: var(--mist);
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; transition: none; animation: none; }
}

@media (max-width: 30rem) {
  .brand { gap: 0.5rem; }
  .brand .site-logo { width: 2rem; }
  .brand-word { font-size: 1.05rem; }
  .site-menu > summary { padding: 0.4rem 0.8rem; letter-spacing: 0.08em; white-space: nowrap; }
}