/* Nepean Design System, round 0 prototype. Tokens follow docs/design/style-guide.md.
 * Layer-1 values are copied from Nepean_Design_System/tokens.css; only the semantic layer is new. */

@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: optional; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: optional; }
@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --sea-200: oklch(0.885 0.021 257); --sea-300: oklch(0.837 0.030 257); --sea-500: oklch(0.606 0.108 257);
  --sea-700: oklch(0.465 0.125 257); --sea-800: oklch(0.394 0.100 257); --sea-900: oklch(0.300 0.070 257);
  --stone-50: oklch(0.962 0.006 40); --stone-100: oklch(0.925 0.010 64); --stone-200: oklch(0.837 0.018 64);
  --stone-300: oklch(0.725 0.034 63); --stone-400: oklch(0.604 0.023 67); --stone-500: oklch(0.456 0.013 95);
  --stone-700: oklch(0.336 0.007 48); --stone-800: oklch(0.282 0.005 68); --stone-900: oklch(0.214 0.002 68);

  --bg: color-mix(in oklch, var(--stone-50) 40%, var(--stone-100));
  --surface-card: var(--stone-50);
  --text: var(--stone-800);
  --text-secondary: var(--stone-500);
  --ink-navy: var(--sea-900);
  --link: var(--sea-700);
  --focus: var(--sea-500);
  --border-card: var(--stone-400);
  --divider: var(--stone-200);
  --warning-fg: oklch(0.535 0.125 70); --warning-bg: oklch(0.978 0.028 80);

  --font-display: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  --font-ui: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-masthead: clamp(28px, 3.4vw + 14px, 52px);
  --fs-beach: clamp(32px, 2.4vw + 22px, 48px);
  --fs-title: clamp(24px, 1.2vw + 18px, 30px);
  --fs-verdict: clamp(18px, 0.8vw + 15px, 22px);

  --sp-xs: 8px; --sp-sm: 12px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 40px; --sp-2xl: 64px;
  --radius-card: 12px; --hit: 48px;
  --rule-double: 3px double var(--ink-navy);
  --dur-base: 240ms; --ease-settle: cubic-bezier(.22, .61, .36, 1);
  color-scheme: light;
}
@font-face { font-family: "Cormorant Fallback"; src: local("Georgia"); size-adjust: 88%; }

:root[data-theme="dark"] {
  --bg: var(--stone-900);
  --surface-card: var(--stone-800);
  --text: var(--stone-50);
  --text-secondary: oklch(0.780 0.008 60);
  --ink-navy: var(--sea-200);
  --link: oklch(0.800 0.090 257);
  --focus: var(--sea-300);
  --border-card: var(--stone-400);
  --divider: var(--stone-700);
  --warning-fg: oklch(0.800 0.110 75); --warning-bg: oklch(0.300 0.040 75);
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) { :root { --dur-base: 0ms; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.55 var(--font-ui); }
a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
img { display: block; max-width: 100%; height: auto; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-md); }

/* Prototype toolbar: not part of the design */
.proto-bar { background: #111; color: #eee; font: 13px/1.4 ui-sans-serif, system-ui, sans-serif; padding: 6px var(--sp-md); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.proto-bar a, .proto-bar button { color: #eee; font: inherit; background: none; border: 1px solid #555; border-radius: 4px; padding: 3px 8px; text-decoration: none; cursor: pointer; }
.proto-bar [aria-current] { background: #eee; color: #111; }

/* C1 masthead */
.nds-masthead { padding-top: var(--sp-sm); text-align: center; }
.nds-utility { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px var(--sp-md); margin: 0; font-size: 14px; color: var(--text-secondary); }
.nds-utility div { display: flex; gap: 6px; }
.nds-utility dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nds-utility dd { margin: 0; }
.nds-wordmark { display: inline-block; margin: var(--sp-sm) 0 var(--sp-md); font: 500 var(--fs-masthead)/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-navy); text-decoration: none; }
.nds-wordmark:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.nds-rule { border: 0; border-top: var(--rule-double); margin: var(--sp-sm) 0 0; }

/* C2 nav */
.nds-nav { position: relative; display: flex; align-items: center; gap: var(--sp-xs); }
.nds-pills { display: flex; gap: var(--sp-xs); overflow-x: auto; scrollbar-width: none; list-style: none; margin: 0; padding: 2px; flex: 1; justify-content: flex-start; }
.nds-pills::-webkit-scrollbar { display: none; }
.nds-pill, .nds-more { display: inline-flex; align-items: center; min-height: var(--hit); padding: 0 18px; border: 1px solid var(--border-card); border-radius: 999px; white-space: nowrap; font: 600 15px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text); text-decoration: none; background: transparent; }
.nds-pill:hover, .nds-more:hover { border-color: var(--ink-navy); }
.nds-pill[aria-current] { background: var(--ink-navy); color: var(--bg); border-color: var(--ink-navy); }
.nds-more { cursor: pointer; flex: none; }
.nds-more::after { content: ""; width: 7px; height: 7px; margin-left: 10px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-base) var(--ease-settle); }
.nds-more[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.nds-more-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; list-style: none; margin: 0; padding: var(--sp-xs) 0; min-width: 260px; background: var(--surface-card); border: 1px solid var(--border-card); border-radius: var(--radius-card); text-align: left; }
.nds-more-list a { display: flex; align-items: center; min-height: var(--hit); padding: 0 var(--sp-md); color: var(--text); text-decoration: none; }
.nds-more-list a:hover { text-decoration: underline; }
@media (min-width: 960px) { .nds-pills { justify-content: center; overflow: visible; } }

/* C3 safety band: equal space above and below (r0) */
.nds-safety-band { display: flex; gap: var(--sp-xs); align-items: baseline; margin: var(--sp-lg) 0 0; padding: var(--sp-sm) var(--sp-md); background: var(--warning-bg); color: var(--warning-fg); font-weight: 600; border: 1px solid color-mix(in oklch, var(--warning-fg) 35%, transparent); border-radius: var(--radius-card); }
.nds-safety-band .src { font-weight: 400; color: var(--warning-fg); }
.nds-first.has-band { padding-top: var(--sp-lg); }

/* First screen */
.nds-first { display: grid; gap: var(--sp-lg); padding-block: var(--sp-lg) var(--sp-xl); }
.nds-hero { margin: 0; }
.nds-hero img { width: 100%; aspect-ratio: 3 / 2; max-height: 40svh; object-fit: cover; object-position: 50% 55%; border-radius: var(--radius-card); }
.nds-credit { margin-top: 6px; font-size: 14px; color: var(--text-secondary); }
.nds-reco { max-width: 41rem; }
.nds-arch { display: block; width: 24px; height: 14px; margin-bottom: var(--sp-xs); color: var(--border-card); }
.nds-kicker { margin: 0; font: 600 14px/1.3 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); }
.nds-beach { margin: 4px 0 var(--sp-xs); font: 600 var(--fs-beach)/1.1 var(--font-display); letter-spacing: -.005em; color: var(--text); }
.nds-verdict { margin: 0 0 var(--sp-xs); font: 600 var(--fs-verdict)/1.35 var(--font-ui); }
.nds-verdict div { display: flex; gap: 0.4em; }
.nds-verdict dt::after { content: ":"; }
.nds-verdict dd { margin: 0; }
.nds-why { display: inline; }
.nds-why summary { display: inline; cursor: pointer; color: var(--link); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; margin-left: 4px; }
.nds-why[open] p { margin: 6px 0 0; font-size: 14px; color: var(--text-secondary); }
.nds-source { margin: 0; font-size: 14px; color: var(--text-secondary); }
.nds-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-xs) var(--sp-md); margin: var(--sp-lg) 0; padding-top: var(--sp-md); border-top: 1px solid var(--divider); font-variant-numeric: tabular-nums; }
.nds-facts dt { font-weight: 600; }
.nds-facts dd { margin: 0; }
.nds-facts .basis { display: block; font-size: 14px; color: var(--text-secondary); }
.nds-map img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--border-card); border-radius: var(--radius-card); }
.nds-chips { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-top: var(--sp-sm); padding: 0; list-style: none; }
.nds-chips a { display: inline-flex; align-items: center; min-height: var(--hit); padding: 0 var(--sp-md); border: 1px solid var(--border-card); border-radius: 999px; color: var(--text); font-weight: 600; text-decoration: none; }
.nds-chips a:hover { border-color: var(--ink-navy); }
@media (min-width: 960px) {
  .nds-first.has-photo { grid-template-columns: 7fr 5fr; gap: var(--sp-xl); align-items: stretch; padding-top: var(--sp-xl); }
  .nds-first.has-photo .nds-hero { display: flex; flex-direction: column; }
  .nds-first.has-photo .nds-hero picture { display: contents; }
  .nds-first.has-photo .nds-hero img { flex: 1; min-height: 480px; height: 100%; aspect-ratio: auto; max-height: none; }
  .nds-first.has-photo .nds-hero .nds-credit { margin-top: var(--sp-sm); }
  .nds-first.has-band { padding-top: var(--sp-lg); }
  .nds-first.no-photo { grid-template-columns: minmax(0, 41rem) minmax(0, 1fr); gap: var(--sp-xl); }
}

/* Section and C7 cards */
.nds-section { padding-block: var(--sp-xl) var(--sp-2xl); border-top: 1px solid var(--divider); }
.nds-section-title { margin: 0 0 var(--sp-lg); font: 600 var(--fs-title)/1.15 var(--font-display); }
.nds-page-title { margin: var(--sp-xl) 0 var(--sp-xs); font: 600 var(--fs-beach)/1.1 var(--font-display); }
.nds-lede { max-width: 41rem; margin: 0 0 var(--sp-xl); color: var(--text-secondary); }
.nds-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-lg); list-style: none; margin: 0; padding: 0; }
.nds-card { background: var(--surface-card); border: 1px solid var(--border-card); border-radius: var(--radius-card); overflow: hidden; transition: box-shadow var(--dur-base) var(--ease-settle); }
.nds-card:hover { box-shadow: 0 2px 0 var(--border-card); }
.nds-card-link { display: block; color: inherit; text-decoration: none; height: 100%; }
.nds-card-link:focus-visible { outline-offset: -3px; border-radius: var(--radius-card); }
.nds-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 1px solid var(--divider); }
.nds-card-body { padding: var(--sp-lg); }
.nds-card-title { margin: 6px 0 var(--sp-xs); font: 600 var(--fs-title)/1.15 var(--font-display); }
.nds-card-link:hover .nds-card-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.nds-card p { margin: 0; }
.nds-card .nds-facts { margin: var(--sp-md) 0 0; }
.nds-card .map-credit { padding: 4px var(--sp-lg) 0; font-size: 14px; color: var(--text-secondary); }

.nds-footer { padding-block: var(--sp-xl); border-top: var(--rule-double); font-size: 14px; color: var(--text-secondary); }

/* Phone: fit the verdict above the fold (decision 15, AS-102) */
@media (max-width: 959px) {
  .nds-masthead { padding-top: var(--sp-xs); }
  .nds-utility { flex-wrap: nowrap; gap: var(--sp-sm); white-space: nowrap; }
  .nds-wordmark { font-size: 26px; letter-spacing: .07em; line-height: 1.05; margin: 6px 0 var(--sp-sm); }
  .nds-rule { margin-top: var(--sp-xs); }
  .nds-first { gap: var(--sp-md); padding-top: var(--sp-md); }
  .nds-arch { display: none; }
  .nds-beach { margin-bottom: 4px; }
  /* Warning days: the band costs height, so the photograph gives way (R12). Decision 15 outranks 14. */
  .has-band .nds-hero img { max-height: 23svh; }
  .nds-safety-band { padding-block: var(--sp-xs); margin-top: var(--sp-sm); }
  .nds-first.has-band { padding-top: var(--sp-sm); }
}
@media (max-width: 959px) {
  .nds-pills { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); padding-right: 40px; }
}

/* Map in the photo slot on photo-less days (decision 28) */
.nds-hero-map img { object-fit: cover; object-position: 50% 60%; border: 1px solid var(--border-card); }

/* Walks page (decision 30) */
.nds-page-head { max-width: 46rem; padding-top: var(--sp-xl); margin-bottom: var(--sp-xl); }
.nds-page-head .nds-page-title { margin-top: 6px; }
.nds-page-head .nds-lede { margin-bottom: 0; color: var(--text); font-size: 18px; }
.nds-why-today { margin: 0 0 var(--sp-xs) !important; font-weight: 600; color: var(--text-secondary); font-size: 14px; }
.nds-page-head + section .nds-card { border-color: var(--ink-navy); }

/* Footer (decision 29): a navy band, the Hamptons ink */
.nds-footer { margin-top: var(--sp-2xl); padding: var(--sp-2xl) 0 var(--sp-xl); background: var(--sea-900); color: var(--stone-50); border-top: 0; font-size: 15px; }
:root[data-theme="dark"] .nds-footer { background: var(--sea-800); border-top: 3px double var(--sea-300); }
.nds-footer a { color: var(--stone-50); text-decoration-color: color-mix(in oklch, var(--stone-50) 45%, transparent); }
.nds-footer a:hover { text-decoration-color: currentColor; }
.nds-footer :focus-visible { outline-color: var(--sea-300); }
.nds-footer-top { display: grid; gap: var(--sp-xl); padding-bottom: var(--sp-xl); border-bottom: 3px double color-mix(in oklch, var(--stone-50) 55%, transparent); }
.nds-footer-mark { display: inline-block; font: 500 28px/1.1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.nds-footer-brand p { max-width: 30rem; margin: var(--sp-sm) 0 0; color: var(--sea-200); }
.nds-footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-lg); }
.nds-footer-cols h2 { margin: 0 0 var(--sp-xs); font: 600 14px/1.3 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--sea-200); }
.nds-footer-cols ul { list-style: none; margin: 0; padding: 0; }
.nds-footer-cols a { display: inline-flex; align-items: center; min-height: 44px; }
.nds-footer-base { display: grid; gap: var(--sp-xs); padding-top: var(--sp-lg); color: var(--sea-200); font-size: 14px; }
.nds-footer-base p { margin: 0; }
@media (min-width: 960px) {
  .nds-footer-top { grid-template-columns: 4fr 8fr; }
  .nds-footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nds-footer-base { grid-template-columns: 1fr auto; }
}

.nds-footer-safety { display: grid; gap: var(--sp-xs); max-width: 52rem; padding-bottom: var(--sp-lg); margin-bottom: var(--sp-xl); border-bottom: 1px solid color-mix(in oklch, var(--stone-50) 30%, transparent); color: var(--sea-200); }
.nds-footer-safety p { margin: 0; }
.nds-footer-warn { color: var(--stone-50); font-weight: 600; font-size: 17px; }

/* Batch 2 (decision 34) */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ext { display: inline-block; margin-left: 2px; font-size: .8em; text-decoration: none; }
.nds-footer-all { font-weight: 600; }
.nds-footer-legal { display: flex; flex-wrap: wrap; gap: 0 var(--sp-md); list-style: none; margin: var(--sp-xs) 0 0; padding: 0; }
.nds-footer-legal li + li::before { content: "|"; margin-right: var(--sp-md); color: var(--sea-300); }
.nds-footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }
.nds-prose { max-width: 52rem; padding-block: var(--sp-xl) var(--sp-2xl); }
.nds-prose h2 { margin: var(--sp-xl) 0 var(--sp-sm); font: 600 var(--fs-title)/1.15 var(--font-display); }
.nds-prose li { margin-bottom: var(--sp-xs); }
.nds-sources { width: 100%; border-collapse: collapse; font-size: 15px; }
.nds-sources th, .nds-sources td { text-align: left; vertical-align: top; padding: var(--sp-sm) var(--sp-sm) var(--sp-sm) 0; border-bottom: 1px solid var(--divider); }
.nds-sources thead th { font: 600 13px/1.3 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
@media (max-width: 700px) {
  .nds-sources thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nds-sources tr { display: grid; padding: var(--sp-sm) 0; border-bottom: 1px solid var(--divider); }
  .nds-sources th, .nds-sources td { border: 0; padding: 2px 0; }
}