@import url('../assets/fonts/fonts.css');

/* ==================================================================
   OYSTER HARBORS
   Allison Martin & Daniel FitzGerald — 5 June 2027

   Cape Cod in June: sea mist and oyster shell for ground, deep
   harbor water for ink, hydrangea blue as the accent with eelgrass
   green behind it. The blues and greens are drawn from the coast
   rather than from nautical convention — no navy, no rope, no
   signal flags.

   Single committed light theme. A Cape morning is not a surface
   that should flip to black.
   ================================================================== */

:root {
  color-scheme: light;

  /* --- ground & ink --- */
  --ground:     #F7F8F6;  /* sea mist — white with a faint green cast */
  --ground-2:   #EFF1ED;  /* raised panels */
  --ink:        #14313B;  /* deep harbor water */
  --ink-2:      #3A555F;  /* secondary text */
  --dim:        #6C8189;  /* labels, captions */

  /* --- accent --- */
  --accent:     #485E9C;  /* hydrangea — the accent that does the work */
  --accent-lo:  #8A9BCB;  /* the same blue, faded for rules and borders */
  --accent-2:   #3E6B57;  /* eelgrass green — rare second accent */
  --oyster:     #E7E2D6;  /* oyster shell */

  --rule:       rgba(72, 94, 156, 0.30);
  --rule-soft:  rgba(20, 49, 59, 0.14);

  /* --- type --- */
  --f-display: 'Bodoni Moda', 'Didot', 'Bodoni MT', Georgia, serif;
  --f-text:    'EB Garamond', 'Iowan Old Style', Palatino, Georgia, serif;

  /* --- scale --- */
  --step--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --step-0:  clamp(1.03rem, 1.00rem + 0.16vw, 1.14rem);
  --step-1:  clamp(1.24rem, 1.16rem + 0.38vw, 1.50rem);
  --step-2:  clamp(1.55rem, 1.36rem + 0.90vw, 2.15rem);
  --step-3:  clamp(1.95rem, 1.55rem + 1.90vw, 3.20rem);
  --step-4:  clamp(2.35rem, 1.55rem + 3.70vw, 5.00rem);

  --measure: 62ch;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --shell: 1120px;
}

/* ---------- reset ---------- */

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--step-0);
  line-height: 1.68;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p, ul, ol, dl { margin: 0; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection { background: rgba(138, 155, 203, 0.42); color: var(--ink); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--ground);
  padding: 0.6rem 1rem;
  z-index: 100;
  font-family: var(--f-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: var(--step--1);
}
.skip:focus { left: 0; }

/* ---------- shared primitives ---------- */

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.measure { max-width: var(--measure); }

/* Small spaced caps — the utility voice of the whole site. */
.caps {
  font-family: var(--f-display);
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
}

/* Hairline in hydrangea, feathered at both ends. */
.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg,
    transparent, var(--accent) 18%, var(--accent) 82%, transparent);
  opacity: 0.55;
}
.rule--short { width: min(190px, 42%); margin-inline: auto; }

.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-block-start: var(--gap, 1.15rem); }

/* ==================================================================
   MASTHEAD + NAVIGATION
   ================================================================== */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--ground);
  position: relative;
  z-index: 20;
}

.masthead__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(1.1rem, 3vw, 1.75rem) var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.wordmark {
  font-family: var(--f-display);
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.wordmark em {
  font-style: italic;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.nav { margin-inline-start: auto; }

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.9rem, 2.4vw, 1.9rem);
}

.nav__link {
  font-family: var(--f-display);
  font-size: var(--step--1);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dim);
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
  white-space: nowrap;
}
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent-lo);
}

/* Menu toggle appears only on narrow screens. */
.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--f-display);
  font-size: var(--step--1);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  margin-inline-start: auto;
}

@media (max-width: 800px) {
  .nav__toggle { display: block; }
  .nav {
    margin: 0;
    position: absolute;
    inset: 100% 0 auto 0;
    background: var(--ground-2);
    border-bottom: 1px solid var(--rule);
    display: none;
  }
  .nav[data-open="true"] { display: block; }
  .nav__list {
    flex-direction: column;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.25rem;
  }
  .nav__link {
    display: block;
    padding-block: 0.7rem;
    border-bottom: 1px solid var(--rule-soft);
  }
  .nav__link[aria-current="page"] { border-bottom-color: var(--accent-lo); }
}

/* ==================================================================
   HOME — the announcement
   ================================================================== */

.announce {
  padding-block: clamp(3rem, 9vw, 6.5rem) clamp(2.5rem, 6vw, 4rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.35rem, 1.2vw, 0.6rem);
}

.announce__name {
  font-family: var(--f-display);
  font-size: var(--step-4);
  line-height: 1.02;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 400;
  /* Optical size axis: large setting sharpens the hairlines. */
  font-variation-settings: 'opsz' 72;
  /* Uppercase tracking adds trailing space; pull it back for true centering. */
  margin-inline-end: -0.1em;
}

.announce__amp {
  font-family: var(--f-text);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--accent);
  line-height: 1.4;
}

.announce__rule { margin-block: clamp(1.4rem, 3.5vw, 2.1rem) clamp(1.1rem, 2.8vw, 1.5rem); }

.announce__meta {
  font-family: var(--f-display);
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  line-height: 2.15;
  margin-inline-end: -0.2em;
}
.announce__meta strong { color: var(--ink-2); font-weight: 400; }

/* The framed plate: hairline, an oyster-shell mat, photograph inside. */
.plate {
  border: 1px solid var(--rule);
  background: var(--oyster);
  padding: clamp(6px, 1.1vw, 11px);
  margin-block-end: clamp(3rem, 8vw, 5rem);
}
.plate__img {
  aspect-ratio: 20 / 9;
  overflow: hidden;
  background: var(--ground-2);
}
.plate__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Light ground — let the photographs stay bright. A touch of
     desaturation only, so they sit with the palette rather than shout. */
  filter: saturate(0.94);
}
@media (max-width: 640px) {
  .plate__img { aspect-ratio: 4 / 5; }
}

/* Countdown — quiet, not a carnival ticker. */
.countdown {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.55rem;
  padding-block-end: clamp(3rem, 8vw, 5rem);
  text-align: center;
}
.countdown__n {
  font-family: var(--f-display);
  font-size: var(--step-2);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'opsz' 40;
  line-height: 1;
}
.countdown__label {
  font-family: var(--f-display);
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ==================================================================
   INTERIOR PAGE HEADERS
   ================================================================== */

.pagehead {
  padding-block: clamp(2.75rem, 7vw, 4.5rem) clamp(1.75rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--rule-soft);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.pagehead__title {
  font-family: var(--f-display);
  font-size: var(--step-3);
  letter-spacing: 0.075em;
  text-transform: uppercase;
  line-height: 1.1;
  font-variation-settings: 'opsz' 60;
  margin-inline-end: -0.075em;
}
.pagehead__lede {
  color: var(--ink-2);
  font-size: var(--step-1);
  max-width: var(--measure);
  line-height: 1.55;
}

/* ==================================================================
   GENERIC SECTIONS
   ================================================================== */

.section { padding-block: clamp(2.5rem, 6.5vw, 4.25rem); }
.section + .section { border-top: 1px solid var(--rule-soft); }

.section__title {
  font-family: var(--f-display);
  font-size: var(--step-2);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.2;
  margin-inline-end: -0.09em;
  margin-block-end: 1.4rem;
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-block-start: 1.15rem; }
.prose p { color: var(--ink-2); }
.prose em { color: var(--ink); }
.prose a { color: var(--accent); text-underline-offset: 3px; }
.prose a:hover { color: var(--ink); }

/* Drop the first line of a story into small caps — printed-page manners. */
.prose--lead > p:first-of-type::first-line {
  font-variant-caps: small-caps;
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* ==================================================================
   SCHEDULE — a typed timeline. Order carries real information here.
   ================================================================== */

.schedule { list-style: none; margin: 0; padding: 0; }

.event {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem 2rem;
  padding-block: clamp(1.4rem, 3.5vw, 2rem);
  border-block-end: 1px solid var(--rule-soft);
}
.event:last-child { border-block-end: 0; }

@media (min-width: 720px) {
  .event { grid-template-columns: 12rem minmax(0, 1fr); }
  .event__when { grid-row: span 3; }
}

.event__when {
  font-family: var(--f-display);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  padding-block-start: 0.3rem;
  font-variant-numeric: tabular-nums;
}
.event__what {
  font-family: var(--f-display);
  font-size: var(--step-1);
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.event__where { color: var(--ink-2); font-size: var(--step--1); letter-spacing: 0.04em; }
.event__note { color: var(--dim); max-width: 46ch; }

/* ==================================================================
   CARD GRIDS — hotels, Boston guide, registry
   ================================================================== */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
}

.card {
  background: var(--ground);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: background 180ms ease;
}
.card:hover { background: var(--ground-2); }

.card__kicker {
  font-family: var(--f-display);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.card__title {
  font-family: var(--f-display);
  font-size: var(--step-1);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.25;
}
.card__body { color: var(--ink-2); font-size: var(--step--1); line-height: 1.6; }
.card__meta {
  margin-block-start: auto;
  padding-block-start: 0.6rem;
  color: var(--dim);
  font-size: var(--step--1);
}
.card a { color: var(--accent); text-underline-offset: 3px; }
.card a:hover { color: var(--ink); }

/* ==================================================================
   FAQ
   ================================================================== */

.faq { border-block-start: 1px solid var(--rule-soft); }

.faq__item { border-block-end: 1px solid var(--rule-soft); }

.faq__q {
  font-family: var(--f-display);
  font-size: var(--step-1);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.35;
  padding-block: 1.15rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: '+';
  margin-inline-start: auto;
  color: var(--accent);
  font-family: var(--f-text);
  font-size: 1.3em;
  line-height: 1;
  transition: transform 200ms ease;
}
.faq__item[open] .faq__q::after { content: '\2013'; }
.faq__q:hover { color: var(--accent); }

.faq__a {
  padding-block-end: 1.4rem;
  color: var(--ink-2);
  max-width: var(--measure);
}
.faq__a > * + * { margin-block-start: 0.9rem; }
.faq__a a { color: var(--accent); text-underline-offset: 3px; }

/* ==================================================================
   CALLOUT — for "details to come" and similar notes
   ================================================================== */

.callout {
  border-inline-start: 2px solid var(--accent-lo);
  padding: 0.2rem 0 0.2rem 1.25rem;
  color: var(--dim);
  max-width: var(--measure);
  font-size: var(--step--1);
}

/* ==================================================================
   FOOTER
   ================================================================== */

.footer {
  border-block-start: 1px solid var(--rule);
  margin-block-start: clamp(3.5rem, 9vw, 6rem);
}
.footer__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(2.25rem, 6vw, 3.5rem) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: baseline;
}
.footer__names {
  font-family: var(--f-display);
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.footer__date {
  font-family: var(--f-text);
  font-style: italic;
  color: var(--accent);
}
.footer__note { margin-inline-start: auto; color: var(--dim); font-size: var(--step--1); }

/* ==================================================================
   MOTION
   ================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .announce > * {
    animation: rise 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .announce > *:nth-child(1) { animation-delay: 60ms; }
  .announce > *:nth-child(2) { animation-delay: 160ms; }
  .announce > *:nth-child(3) { animation-delay: 240ms; }
  .announce > *:nth-child(4) { animation-delay: 340ms; }
  .announce > *:nth-child(5) { animation-delay: 420ms; }
  .plate { animation: fade 1100ms ease 520ms both; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(0.6rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media print {
  body { background: #fff; color: #000; }
  .nav, .nav__toggle, .countdown { display: none; }
}