/* MarkBloom Vault — Plan Chest Night — fully dark */
@import url('https://fonts.googleapis.com/css2?family=Commissioner:wght@600;700&family=Gentium+Book+Plus:wght@400;500&family=Overpass+Mono&display=swap');

:root {
  --navy: #0D1524;
  --ink: #121C2E;
  --deep: #09101C;
  --text: #F1EDE4;
  --text-ink: #EBE6DC;
  --text-deep: #F5F1E8;
  --hairline: #243044;
  --sand: #D7C4A0;
  --sand-dim: #8C7A5C;
  --muted: #B7B0A4;
  --shell: 1080px;
  --label-col: 144px;
  --dock-h: 56px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  font-family: 'Gentium Book Plus', serif;
  font-size: 17px;
  line-height: 1.78;
  color: var(--text);
  background: var(--navy);
  padding-bottom: calc(var(--dock-h) + 96px);
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration: none; }
:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: var(--ink); color: var(--text); padding: .75rem 1rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.top-strip {
  background: var(--deep);
  border-bottom: 1px solid var(--hairline);
  font-family: 'Overpass Mono', monospace;
  font-size: .7rem;
  color: var(--muted);
  padding: .5rem 1.5rem;
  text-align: left;
}

.site-header {
  background: var(--navy);
  padding: 1.5rem 1.5rem 1rem;
  max-width: var(--shell);
  margin: 0 auto;
}
.wordmark {
  font-family: 'Commissioner', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--sand);
  text-decoration: none;
  letter-spacing: .02em;
}

.main-wrap { max-width: var(--shell); margin: 0 auto; padding: 0 1.5rem 2rem; }
.inner-with-label { display: grid; grid-template-columns: var(--label-col) 1fr; gap: 1.5rem; }
.label-col { font-family: 'Overpass Mono', monospace; font-size: .75rem; color: var(--sand-dim); padding-top: .25rem; }

h1, h2, h3 { font-family: 'Commissioner', sans-serif; font-weight: 700; color: var(--sand); line-height: 1.2; }
h1 { font-size: clamp(2.6rem, 5vw, 4.1rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin: 3rem 0 1rem; }
h3 { font-size: 1.2rem; margin: 2rem 0 .75rem; }
p { max-width: 62ch; margin: 0 0 1.25rem; color: var(--text-ink); }
.lead { font-size: 1.05rem; color: var(--muted); }
.eyebrow { font-family: 'Overpass Mono', monospace; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: .75rem; }

.section-opener { width: 48px; height: 2px; background: var(--sand); margin: 3rem 0 1.5rem; }
.hairline { border: none; border-top: 1px solid var(--hairline); margin: 2.5rem 0; }

.hero-editorial { margin-bottom: 3rem; }
.hero-editorial .sand-rule { width: 48px; height: 2px; background: var(--sand); margin: 1.5rem 0; }
.hero-wide img { width: 100%; aspect-ratio: 3/1; object-fit: cover; margin-top: 1.5rem; }

/* B-S1 Plan chest */
.plan-chest { margin: 2rem 0; }
.drawer-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  padding: 1rem 0; border-bottom: 1px solid var(--hairline);
  cursor: pointer; transition: transform 160ms var(--ease), background 160ms var(--ease);
}
.drawer-row:hover, .drawer-row:focus-within { transform: translateY(-4px); background: var(--ink); }
.drawer-pull { width: 14px; height: 28px; background: var(--sand); margin-left: 1rem; transition: filter 160ms var(--ease); }
.drawer-row:hover .drawer-pull, .drawer-row:focus-within .drawer-pull { filter: brightness(1.15); }
.drawer-head { display: flex; align-items: baseline; gap: 1rem; flex: 1; }
.drawer-num { font-family: 'Overpass Mono', monospace; font-size: .75rem; color: var(--sand-dim); min-width: 2.5rem; }
.drawer-name { font-family: 'Commissioner', sans-serif; font-size: 1.15rem; color: var(--sand); }
.drawer-rhythm { font-family: 'Overpass Mono', monospace; font-size: .75rem; color: var(--muted); margin-left: auto; padding-right: 1rem; }
.drawer-body { grid-column: 1 / -1; padding: 1rem 0 1.5rem 3.5rem; display: none; }
.drawer-row.is-open .drawer-body, .no-js .drawer-body { display: block; }

/* B-S2 East light slab */
.east-slab { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 2.5rem 0; border: 1px solid var(--hairline); }
.east-slab-prose { padding: 2rem; background: var(--ink); }
.east-slab-photo img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }

/* B-S3 Tide rule */
.tide-section { margin: 2.5rem 0; position: relative; }
.tide-rule {
  width: 100%; max-width: 100%;
  height: 1px; background: var(--sand); position: relative; margin-bottom: 1.5rem;
}
.tide-time { font-family: 'Overpass Mono', monospace; font-size: .7rem; color: var(--muted); text-align: right; margin-top: -.5rem; margin-bottom: 1rem; }

/* B-S4 Flat file */
.flat-file { margin: 2rem 0; }
.flat-term {
  font-family: 'Overpass Mono', monospace; font-size: .7rem;
  color: var(--sand); background: var(--ink); display: inline-block;
  padding: .25rem .75rem; border: 1px solid var(--sand); margin-bottom: 0;
}
.flat-def { padding: 1rem 0 1.5rem; border-bottom: 1px solid var(--hairline); max-width: 62ch; }

.photo-pair { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1.5rem; margin: 2rem 0; align-items: start; }
.photo-caption { font-family: 'Overpass Mono', monospace; font-size: .7rem; color: var(--muted); margin-top: .5rem; }

.week-list { list-style: none; padding: 0; margin: 2rem 0; }
.week-list li { padding: .85rem 0; border-top: 1px solid var(--hairline); max-width: 62ch; }

.faq-layout { display: grid; grid-template-columns: 200px 1fr; gap: 2rem; }
.faq-jump { position: sticky; top: 1rem; align-self: start; }
.faq-jump ul { list-style: none; padding: 0; margin: 0; }
.faq-jump a { font-family: 'Overpass Mono', monospace; font-size: .72rem; color: var(--muted); text-decoration: none; display: block; padding: .35rem 0; }
.faq-jump a:hover { color: var(--sand); }
.faq-item { margin-bottom: 2.5rem; scroll-margin-top: 2rem; }
.faq-num { font-family: 'Overpass Mono', monospace; font-size: .75rem; color: var(--sand-dim); }
.faq-q { font-family: 'Commissioner', sans-serif; font-size: 1.15rem; color: var(--sand); margin: .35rem 0 .75rem; }

.portrait-band-b { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 2rem 0; }

/* Bottom dock */
.bottom-dock {
  position: fixed; bottom: 0; left: 0; right: 0; height: var(--dock-h);
  background: var(--navy); border-top: 1px solid var(--sand);
  z-index: 8000; display: flex; align-items: center; justify-content: center;
  padding: 0 1rem;
}
.bottom-dock nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1.25rem; max-width: 100%; }
.bottom-dock a {
  font-family: 'Overpass Mono', monospace; font-size: .72rem;
  letter-spacing: .06em; color: var(--text); text-decoration: none;
  white-space: nowrap;
}
.bottom-dock a:hover, .bottom-dock a[aria-current="page"] { color: var(--sand); }
.dock-porch {
  border: 1px solid var(--sand); padding: .2rem .5rem; color: var(--sand) !important;
}

/* Maps */
.map-block { margin: 3rem 0 2rem; }
.map-caption { font-family: 'Overpass Mono', monospace; font-size: .7rem; color: var(--muted); margin-bottom: .5rem; }
.map-frame { border: 1px solid var(--hairline); overflow: hidden; background: var(--deep); }
.map-frame iframe { display: block; width: 100%; filter: grayscale(.45) brightness(.72) contrast(1.12); }
.map-a-layout { display: grid; grid-template-columns: 1fr min(300px, 100%); gap: 2rem; align-items: start; }
.map-a-card { position: sticky; top: 1rem; background: var(--ink); border: 1px solid var(--sand); padding: 1rem; overflow: hidden; }
.map-a-card .map-frame { border-color: var(--hairline); }
.map-a-card .map-frame iframe { height: 260px; }
.map-a-card iframe { display: block; width: 100%; max-width: 100%; height: 260px; border: 0; }
.map-b .map-frame iframe { height: 200px; }
.map-c .map-frame iframe { height: 320px; }
.map-d .map-frame iframe { height: 180px; }
.map-d { max-width: 360px; }

.site-footer {
  background: var(--deep); border-top: 1px solid var(--hairline);
  padding: 2.5rem 1.5rem 2rem; margin-top: 3rem; font-size: .9rem;
  max-width: var(--shell); margin-left: auto; margin-right: auto;
}
.site-footer p { max-width: none; margin-bottom: .5rem; color: var(--text-ink); }
.footer-links { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; }
.footer-links a { color: var(--sand); }

.page-intro {
  font-size: 1.02rem; color: var(--muted); max-width: 62ch;
  margin-bottom: 2rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--hairline);
}

.porch-block {
  margin: 3rem 0 2rem; padding: 1.75rem 2rem;
  background: var(--ink); border: 1px solid var(--hairline);
  border-left: 3px solid var(--sand);
}
.porch-block h2 { margin-top: 0; font-size: 1.25rem; }
.porch-block p:last-child { margin-bottom: 0; }

.drawer-detail { margin: 3rem 0; padding-top: 2rem; border-top: 1px solid var(--hairline); }
.drawer-detail h3 { margin-top: 0; }

.contact-card {
  background: var(--ink); border: 1px solid var(--hairline);
  padding: 1.75rem 2rem; margin: 1.5rem 0;
}
.contact-card p { margin-bottom: .65rem; }
.contact-card p:last-child { margin-bottom: 0; }

.btn {
  font-family: 'Overpass Mono', monospace; font-size: .78rem;
  padding: .55rem 1.1rem; background: transparent; cursor: pointer;
  border: 1px solid var(--sand); color: var(--sand);
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.btn:hover { background: var(--sand); color: var(--deep); }
.btn-primary { background: var(--sand); color: var(--deep); }
.btn-primary:hover { background: var(--text); color: var(--deep); }

.map-placeholder {
  display: flex; align-items: center; justify-content: center;
  min-height: 180px; padding: 1.5rem; text-align: center;
  background: var(--deep); color: var(--muted);
  font-family: 'Overpass Mono', monospace; font-size: .75rem;
}
.map-placeholder a { color: var(--sand); }

.not-found-list { list-style: none; padding: 0; margin: 1.5rem 0 2.5rem; }
.not-found-list li { padding: .65rem 0; border-top: 1px solid var(--hairline); }
.not-found-list a { font-family: 'Overpass Mono', monospace; font-size: .85rem; }

/* Cookie banner — bottom left above dock */
.cookie-banner {
  position: fixed; bottom: calc(var(--dock-h) + 8px); left: 1rem;
  max-width: 420px; background: var(--deep); border-top: 1px solid var(--sand);
  padding: 1.25rem; z-index: 9000;
  transform: translateY(calc(100% + var(--dock-h))); transition: transform 240ms var(--ease);
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner h2 { font-size: .95rem; margin: 0 0 .5rem; font-family: 'Overpass Mono', monospace; color: var(--text); }
.cookie-banner p { font-size: .82rem; max-width: none; margin-bottom: 1rem; color: var(--muted); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.cookie-actions button {
  font-family: 'Overpass Mono', monospace; font-size: .75rem;
  padding: .5rem .9rem; background: transparent; cursor: pointer;
  border: 1px solid var(--sand); color: var(--sand);
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.cookie-actions button:hover { background: var(--ink); }
.cookie-actions button:first-child { background: var(--sand); color: var(--deep); }
.cookie-actions button:first-child:hover { background: var(--text); }
.cookie-panel { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--hairline); display: none; }
.cookie-panel.is-open { display: block; }
.cookie-toggle { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; font-size: .82rem; color: var(--text-ink); }

@media (max-width: 768px) {
  body { font-size: 16px; padding-bottom: calc(var(--dock-h) + 120px); }
  .inner-with-label { grid-template-columns: 1fr; }
  .label-col { display: none; }
  .east-slab { grid-template-columns: 1fr; }
  .east-slab-photo img { min-height: 240px; }
  .photo-pair { grid-template-columns: 1fr; }
  .faq-layout { grid-template-columns: 1fr; }
  .faq-jump { position: static; margin-bottom: 2rem; }
  .map-a-layout { grid-template-columns: 1fr; }
  .map-a-card { position: static; }
  .map-a-card .map-frame iframe,
  .map-a-card iframe { height: 220px; }
  .drawer-rhythm { display: none; }
  .drawer-body { padding-left: 2.5rem; }
  .bottom-dock nav { gap: .25rem .75rem; max-height: var(--dock-h); overflow-y: auto; }
  .cookie-banner { left: 0; right: 0; max-width: none; bottom: calc(var(--dock-h) + 4px); }
  .portrait-band-b { grid-template-columns: 1fr; }
  .porch-block { padding: 1.25rem 1.5rem; }
  .site-header, .main-wrap { padding-left: 1.25rem; padding-right: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cookie-banner { transform: none; }
  .cookie-banner:not(.is-visible) { display: none; }
}

@media (min-width: 769px) {
  .js .tide-rule { transform: scaleX(0); transform-origin: left; animation: drawTide 480ms var(--ease) forwards; }
  .js .hero-loaded img { animation: brightenHero 480ms var(--ease) forwards; }
}
@keyframes drawTide { to { transform: scaleX(1); } }
@keyframes brightenHero { from { filter: brightness(.95); } to { filter: brightness(1.05); } }

.legal-content h2 { margin-top: 2.5rem; }
.legal-content ul { max-width: 62ch; color: var(--text-ink); }