/* Oakmore Development site styles.
   Palette: charcoal #171717, warm white #F7F4EF, stone #E8E1D6,
   taupe #A49789, forest green #18382B. Quiet, corporate, high-end. */

:root {
  --charcoal: #171717;
  --warm-white: #F7F4EF;
  --stone: #E8E1D6;
  --taupe: #A49789;
  --forest: #18382B;
  --forest-deep: #122c22;
  --ink: #1d1d1b;
  --muted: #6b6258;
  --line: #ddd4c7;
  --max: 1140px;
  --space: clamp(3rem, 6vw, 5.5rem);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

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

/* Skip link: hidden until focused, so keyboard users can jump past the nav
   straight to the main content. Required for WCAG 2.4.1 (Bypass Blocks). */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 0.65rem 1rem;
  background: var(--charcoal);
  color: var(--warm-white);
  text-decoration: none;
  border-radius: 0 0 4px 0;
}
.skip-link:focus {
  left: 0;
}
/* Don't draw a focus outline on the main region when the skip link sends
   focus there; the visible page itself is the cue. */
main:focus { outline: none; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--warm-white);
  line-height: 1.65;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  color: var(--charcoal);
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1rem; }

a { color: var(--forest); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--taupe);
  margin: 0 0 1rem;
}

.lede { font-size: 1.2rem; color: var(--muted); max-width: 46ch; }

/* Buttons -------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.6rem;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:hover { text-decoration: none; }

.btn-primary { background: var(--forest); color: var(--warm-white); border-color: var(--forest); }
.btn-primary:hover { background: var(--forest-deep); border-color: var(--forest-deep); }

.btn-ghost { background: transparent; color: var(--charcoal); border-color: var(--taupe); }
.btn-ghost:hover { background: var(--charcoal); color: var(--warm-white); border-color: var(--charcoal); }

/* Header --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 244, 239, 0.92);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}
.wordmark {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.16em;
  font-size: 1.02rem;
  color: var(--charcoal);
  text-transform: uppercase;
}
.wordmark:hover { text-decoration: none; color: var(--forest); }

.site-nav { display: flex; align-items: center; gap: 1.6rem; }
.site-nav a {
  font-size: 0.95rem;
  color: var(--ink);
  font-weight: 500;
}
.site-nav a:hover { color: var(--forest); text-decoration: none; }
.site-nav .nav-cta {
  display: none;
  background: var(--forest);
  color: var(--warm-white);
  padding: 0.55rem 1.1rem;
  border-radius: 2px;
}

.nav-toggle, .nav-toggle-label { display: none; }

/* Hero ----------------------------------------------------------------- */

.hero {
  background: var(--forest);
  color: var(--warm-white);
}
.hero-inner { padding: clamp(4rem, 9vw, 7rem) 1.5rem; max-width: 880px; }
.hero .eyebrow { color: var(--stone); }
.hero h1 { color: var(--warm-white); max-width: 18ch; }
.hero-subhead { font-size: 1.2rem; color: var(--stone); max-width: 52ch; margin-bottom: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-actions-centered { justify-content: center; }
.hero .btn-ghost { color: var(--warm-white); border-color: rgba(247,244,239,0.5); }
.hero .btn-ghost:hover { background: var(--warm-white); color: var(--forest); border-color: var(--warm-white); }

/* Home hero background video ------------------------------------------- */

/* Bright, washed-out, editorial. Charcoal/forest text on a light video. */
.home-hero {
  position: relative;
  overflow: hidden;
  background: var(--warm-white);
}

/* Media layer holds the video; poster doubles as the fallback background
   for mobile and reduced-motion, where the video element is hidden. */
.home-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--warm-white) url("/media/home/hero-poster.jpg") center / cover no-repeat;
}
/* Fully opaque so the poster underneath never ghosts through the footage;
   the poster is only revealed when the video is hidden (mobile / reduced
   motion). */
.home-hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.75) contrast(0.9) brightness(1.05);
  opacity: 1;
}

/* Faint warm veil for text legibility only; texture comes from the dots. */
.home-hero-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(247, 244, 239, 0.12);
}

/* Organic dotted print texture: stacked radial gradients with varied dot
   sizes, spacing, and offsets so it reads as texture, not a uniform grid. */
.home-hero-dot-mask {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    radial-gradient(rgba(23, 23, 23, 0.22) 0.9px, transparent 1.2px),
    radial-gradient(rgba(23, 23, 23, 0.16) 1.5px, transparent 1.9px),
    radial-gradient(rgba(23, 23, 23, 0.12) 2.3px, transparent 2.9px);
  background-size:
    7px 7px,
    23px 23px,
    41px 41px;
  background-position:
    0 0,
    9px 13px,
    21px 5px;
  opacity: 0.4;
  pointer-events: none;
}

/* Soft cloudy haze between the video and the copy: feathered, blurred and
   slowly drifting so the text and buttons float on a bright artistic glow
   rather than a flat panel. */
.home-hero::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: -18% -12%;
  pointer-events: none;
  background:
    radial-gradient(46% 60% at 32% 46%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 72%),
    radial-gradient(42% 52% at 54% 58%, rgba(247, 244, 239, 0.78), rgba(247, 244, 239, 0) 74%),
    radial-gradient(50% 48% at 40% 33%, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0) 72%),
    radial-gradient(38% 44% at 24% 62%, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0) 76%);
  filter: blur(34px);
  -webkit-mask-image: radial-gradient(76% 82% at 40% 50%, #000 28%, transparent 82%);
  mask-image: radial-gradient(76% 82% at 40% 50%, #000 28%, transparent 82%);
  animation: home-hero-glow 26s ease-in-out infinite;
}

@keyframes home-hero-glow {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.05) rotate(0deg); }
  50%  { transform: translate3d(3%, 2%, 0) scale(1.15) rotate(3deg); }
  100% { transform: translate3d(-2%, -1%, 0) scale(1.05) rotate(0deg); }
}

.home-hero-content { position: relative; z-index: 4; }

/* Dark, readable text on the bright background. */
.home-hero h1 { color: var(--charcoal); }
.home-hero .eyebrow { color: var(--forest); }
.home-hero .hero-subhead { color: var(--ink); }
.home-hero .btn-ghost { color: var(--forest); border-color: rgba(24, 56, 43, 0.45); }
.home-hero .btn-ghost:hover { background: var(--forest); color: var(--warm-white); border-color: var(--forest); }

/* Mobile: the hero script loads the square mobile video; swap the poster
   fallback (shown under reduced motion / before load) to the mobile crop. */
@media (max-width: 700px) {
  .home-hero-media { background-image: url("/media/home/hero-poster-mobile.jpg"); }
}

/* Reduced motion: poster only, no moving video, static (non-drifting) glow. */
@media (prefers-reduced-motion: reduce) {
  .home-hero-video { display: none; }
  .home-hero::before { animation: none; }
}

/* Sections ------------------------------------------------------------- */

.section { padding: var(--space) 0; }
.section-alt { background: var(--stone); }

.page-head { padding: clamp(3rem, 7vw, 5rem) 0 1rem; }
.page-head-centered { text-align: center; }
.page-head-centered .hero-actions { justify-content: center; }

/* Thank-you / success page: keep the copy in a narrow centered column so it
   does not stretch across wide desktop viewports. */
.thank-you-content {
  width: min(92vw, 680px);
  margin: 0 auto;
  text-align: center;
}
.thank-you-content p {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.thank-you-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.section-head h2 { margin: 0; }
.section-link {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Cards ---------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.75rem;
}
.project-card {
  display: flex;
  flex-direction: column;
  background: var(--warm-white);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  color: var(--ink);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.project-card:hover {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(23,23,23,0.10);
}
.project-card-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone); }
.project-card-media img { width: 100%; height: 100%; object-fit: cover; }
.project-card-media.is-empty { display: grid; place-items: center; }
.media-placeholder-mark {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--taupe);
}
.project-card-body {
  padding: 1.4rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.project-card-title { margin: 0.15rem 0 0.5rem; font-size: 1.3rem; }
.project-card-meta {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--taupe);
  margin: 0;
}
.project-card-summary { color: var(--muted); margin: 0; }
.project-card-cta {
  margin-top: auto;
  padding-top: 1rem;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--forest);
}
.project-card-cta::after { content: " \2192"; }
.project-card:hover .project-card-cta { text-decoration: underline; }

.empty-state { color: var(--muted); font-size: 1.1rem; max-width: 60ch; }
.empty-state p { margin: 0 0 0.75rem; }

/* Pill list (What We Buy) ---------------------------------------------- */

.pill-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}
.pill-list li {
  background: var(--warm-white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.6rem 1.25rem;
  font-weight: 500;
  color: var(--charcoal);
}

/* Steps (How We Work) -------------------------------------------------- */

.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}
.step { display: flex; gap: 1.25rem; align-items: flex-start; }
.step h2, .step h3 { margin: 0 0 0.35rem; }
.step p { margin: 0; color: var(--muted); }
.step-number {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--forest);
  color: var(--warm-white);
  font-family: var(--serif);
  font-size: 1.15rem;
}
.step-list-lg { gap: 2.25rem; max-width: 760px; }

/* Feature grid (Why Oakmore) ------------------------------------------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}
.feature h3 { margin-bottom: 0.4rem; }
.feature p { color: var(--muted); margin: 0; }

/* CTA band ------------------------------------------------------------- */

.cta-band { text-align: center; }
.cta-inner { max-width: 640px; }
.cta-inner h2 { margin-bottom: 0.6rem; }
.cta-inner p { color: var(--muted); margin-bottom: 1.6rem; }
.section-alt.cta-band .cta-inner p { color: var(--muted); }

/* Prose ---------------------------------------------------------------- */

.prose { max-width: 68ch; }
.prose p { font-size: 1.1rem; }
.prose h2 { margin-top: 2rem; }
.muted-note { color: var(--muted); font-style: italic; }

/* Contact -------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
}
.contact-block h2 { font-size: 1.5rem; }
.contact-block p { margin: 0.25rem 0; }

/* Project detail ------------------------------------------------------- */

.project-hero-media {
  margin-top: 1.5rem;
  border-radius: 4px;
  overflow: hidden;
}
.project-hero-media img { width: 100%; max-height: 560px; object-fit: cover; }

/* Field Notes hero: rounded image (reuses .project-hero-media) with an
   optional title + caption sitting below the rounded box, not clipped by it. */
.article-hero { margin: 0; }
.article-hero-caption { margin-top: 0.6rem; }

/* Project hero slideshow ("after" photos) ------------------------------- */

.project-hero { margin-top: 1.5rem; }
/* Wide, image-first presentation: ~92.5% of the viewport, capped at 2000px,
   centred on the page (this section sits outside .container on purpose). */
.hero-slideshow {
  width: min(92.5vw, 2000px);
  margin-inline: auto;
  text-align: center;
}
.hero-slideshow:focus-visible { outline: none; }

/* No framed card. The stage has no fixed height: the active slide is in normal
   flow and sizes the stage to the displayed image, so there is no tall empty
   box. Outgoing slides are absolutely positioned on top only while crossfading. */
.hero-stage {
  position: relative;
  background: transparent;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  opacity: 0;
  transition: opacity 1.5s ease;
  pointer-events: none;
}
.hero-slide.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}
/* contain keeps original proportions (no cropping); max-height stops portrait
   photos from becoming enormous while landscape photos fill the wide area. */
.hero-slide img {
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
  display: block;
}

/* Arrows sit clearly on top of the photo: a solid black circle with a white
   chevron reads against any image. The chevron is wrapped in .hero-chev so it
   can be nudged for optical centering (the glyph reads a hair low, and each
   chevron leans toward its flat side) without disturbing the circle. */
.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.hero-nav:hover { background: #fff; color: #000; transform: translateY(-50%) scale(1.06); }
.hero-nav:active { transform: translateY(-50%) scale(0.96); }
.hero-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hero-chev { display: block; line-height: 1; }
.hero-prev .hero-chev { transform: translate(-1px, -1px); }
.hero-next .hero-chev { transform: translate(1px, -1px); }
.hero-prev { left: 1.25rem; }
.hero-next { right: 1.25rem; }

.hero-caption {
  margin: 0.75rem auto 0;
  max-width: 640px;
  min-height: 2.6rem;
}
.hero-caption-item { display: none; }
.hero-caption-item.is-active {
  display: block;
  animation: heroCaptionIn 0.6s ease both;
}
.hero-caption-title {
  display: block;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--charcoal);
}
.hero-caption-text { display: block; font-size: 0.95rem; color: var(--muted); }

.hero-counter {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--taupe);
}

@keyframes heroCaptionIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .hero-slide img { max-height: 70vh; }
  .hero-nav { width: 2.4rem; height: 2.4rem; font-size: 1.2rem; }
  .hero-prev { left: 0.5rem; }
  .hero-next { right: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero-caption-item.is-active { animation: none; }
}

.project-detail-grid {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 3rem;
  align-items: start;
}
.project-facts h2 { font-size: 1.2rem; }
.project-facts dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0.1rem; }
.project-facts dt {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--taupe);
  margin-top: 0.9rem;
}
.project-facts dd { margin: 0; color: var(--charcoal); }
.project-narrative h2:first-child { margin-top: 0; }

.gallery-heading { margin-top: 2rem; }
.gallery-heading:first-child { margin-top: 0; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1rem;
}
.gallery-grid figure { margin: 0; }
.gallery-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.gallery-grid figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.4rem; }
.figcaption-area { color: var(--charcoal); font-weight: 600; }

/* Forms ---------------------------------------------------------------- */

.form-wrap { max-width: 760px; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}
.form-row { display: flex; flex-direction: column; }
.form-row-full { grid-column: 1 / -1; }
.form-row label { font-weight: 600; font-size: 0.92rem; margin-bottom: 0.4rem; color: var(--charcoal); }
.optional { font-weight: 400; color: var(--muted); }
.field-input, .form-row select, .form-row textarea, .form-row input {
  font: inherit;
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
}
.field-input:focus, .form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: 2px solid var(--forest);
  outline-offset: 1px;
  border-color: var(--forest);
}
.field-help { font-size: 0.85rem; color: var(--muted); margin: 0.35rem 0 0; }
.form-turnstile { margin: 0.5rem 0 1.25rem; }
.form-errors, .errorlist {
  color: #8a2c1f;
  font-size: 0.9rem;
}
.errorlist { list-style: none; padding: 0; margin: 0.35rem 0 0; }

/* Footer --------------------------------------------------------------- */

.site-footer {
  background: var(--charcoal);
  color: var(--stone);
  padding: 3.5rem 0 2rem;
  margin-top: 2rem;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(247,244,239,0.12);
}
.footer-wordmark {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warm-white);
  font-size: 1rem;
}
.footer-legal-name { margin: 0.5rem 0 0; color: var(--taupe); }
.footer-contact p { margin: 0.2rem 0; }
.footer-contact a, .footer-nav a { color: var(--stone); }
.footer-contact a:hover, .footer-nav a:hover { color: var(--warm-white); }
.footer-nav { display: flex; flex-direction: column; gap: 0.4rem; }
.footer-base {
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  justify-content: space-between;
}
.footer-base p { margin: 0; font-size: 0.85rem; color: var(--taupe); }
.footer-base a { color: var(--taupe); }
.footer-base a:hover { color: var(--warm-white); }

/* Responsive ----------------------------------------------------------- */

@media (max-width: 820px) {
  .nav-toggle-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    cursor: pointer;
  }
  .nav-toggle-label span {
    display: block;
    height: 2px;
    width: 24px;
    background: var(--charcoal);
  }
  .site-nav {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--warm-white);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem 1.5rem 1rem;
    display: none;
  }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .site-nav a { width: 100%; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
  .site-nav .nav-cta { display: inline-block; margin-top: 0.75rem; border-bottom: none; }
  .site-nav a:last-child { border-bottom: none; }

  .project-detail-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Dashboard (staff only) ----------------------------------------------- */

.dashboard { background: var(--warm-white); }
.dash-header { background: var(--charcoal); padding: 0.9rem 0; }
.dash-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.dash-brand {
  color: var(--warm-white);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.9rem;
  text-decoration: none;
}
.dash-nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.dash-nav a { color: var(--stone); font-size: 0.9rem; }
.dash-nav a:hover { color: var(--warm-white); }
.dash-main { padding: 2rem 0 4rem; }
.dash-head { margin-bottom: 1.5rem; }
.dash-head h1 { margin-bottom: 0.4rem; }
.dash-links { display: flex; gap: 1.25rem; flex-wrap: wrap; margin: 0.25rem 0 0.75rem; }

.dash-messages { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.dash-message { padding: 0.7rem 1rem; border-radius: 3px; background: var(--stone); margin-bottom: 0.5rem; }
.dash-message.success { background: #e2efe6; }
.dash-message.error { background: #f6e0db; }

.dash-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
.dash-card {
  display: block;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
}
.dash-card:hover { border-color: var(--forest); }
.dash-card h2 { margin: 0 0 0.5rem; font-size: 1.2rem; }
.dash-card p { margin: 0; color: var(--muted); font-size: 0.95rem; }

.dash-table-wrap { overflow-x: auto; }
.dash-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.dash-table th, .dash-table td {
  text-align: left;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.dash-table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.dash-actions { display: flex; flex-direction: column; gap: 0.2rem; }
.dash-actions a { font-size: 0.88rem; }

.dash-section { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.dash-upload { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.5rem; }
.dash-upload .field-input { width: auto; flex: 1 1 240px; }

.dash-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; margin-top: 1rem; position: relative; }
.dash-photo-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.75rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dash-photo-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.dash-photo-card label {
  font-size: 0.82rem;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  color: var(--charcoal);
}
.dash-photo-card input[type="text"], .dash-photo-card input[type="number"] {
  font: inherit;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 3px;
}
.dash-photo-type { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--taupe); }
.dash-hero-label { flex-direction: row; align-items: center; gap: 0.4rem; }
.dash-delete { padding: 0.3rem 0.6rem; font-size: 0.8rem; align-self: flex-start; }
.dash-save-bar { margin-top: 1.75rem; }
.dash-save-bar.is-dirty::before {
  content: "Unsaved order changes \2014 click Save to keep them.";
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
  color: var(--forest);
}

/* Drag-to-reorder photo cards */
.dash-photo-drag {
  cursor: grab;
  user-select: none;
  touch-action: none; /* let pointer drag work on touch without scrolling */
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: var(--warm-white);
  border: 1px dashed var(--line);
  border-radius: 3px;
  padding: 0.35rem 0.5rem;
  text-align: center;
}
.dash-photo-drag:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }

/* The lifted card: raised above the others with a soft shadow; the empty grid
   slot it leaves behind is the drop indicator. */
.dash-photo-card.is-dragging {
  z-index: 20;
  box-shadow: 0 16px 34px -10px rgba(23, 23, 23, 0.45);
  cursor: grabbing;
  will-change: transform;
}
.dash-photo-card.is-dragging .dash-photo-drag { cursor: grabbing; }
body.is-reordering { cursor: grabbing; user-select: none; }

/* Field Notes editor and preview ------------------------------------------ */

.preview-banner {
  background: #fff7e6;
  border-bottom: 1px solid #e6d9b8;
  padding: 0.6rem 0;
  font-size: 0.9rem;
}
.preview-banner a { margin-left: 0.75rem; }

/* Author Markdown can contain long unbroken strings (URLs, paths). Break them
   rather than letting them push the page wider than the viewport. */
.article-body { overflow-wrap: break-word; }
.article-body img { max-width: 100%; height: auto; border-radius: 4px; }
.article-body figure { margin: 1.75rem 0; }
.article-body figcaption {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 0.4rem;
}

/* Footnotes / sources -------------------------------------------------------
   Markdown footnotes ([^1]) render a superscript reference and a definition
   list at the foot of the article. The reference is styled as a small pill;
   clicking it opens the source in a floating popover anchored to the pill,
   with a triangle pointing back at the number (see the script in
   templates/articles/detail.html). On narrow screens the popover widens to
   most of the viewport. With JS off the pill is an anchor that jumps to the
   styled sources list at the foot of the article. */

/* Keep the superscript from stretching the line it sits on. */
.article-body sup { line-height: 0; font-size: 0.75em; }

.article-body .footnote-ref {
  display: inline-block;
  min-width: 1.3em;
  padding: 0 0.45em;
  margin: 0 0.5px;
  font-family: var(--sans);
  font-size: 0.95em;
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
  color: var(--forest);
  background: rgba(24, 56, 43, 0.08);
  border: 1px solid rgba(24, 56, 43, 0.18);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.article-body .footnote-ref:hover,
.article-body .footnote-ref:focus-visible,
.article-body .footnote-ref[aria-expanded="true"] {
  background: var(--forest);
  color: var(--warm-white);
  border-color: var(--forest);
  text-decoration: none;
}

/* Floating source popover. Appended to <body> and positioned in document
   coordinates against the pill, so it is never clipped by an ancestor and
   scrolls naturally with the text. JS sets width, top/left, the placement
   (above/below), and the arrow's horizontal offset (--fn-arrow-x). */
.fn-pop {
  position: absolute;
  z-index: 50;
  width: 24rem;
  max-width: 92vw;
  opacity: 0;
  transform: translateY(-4px) scale(0.96);
  transform-origin: var(--fn-arrow-x, 50%) top;
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.fn-pop[data-placement="above"] {
  transform: translateY(4px) scale(0.96);
  transform-origin: var(--fn-arrow-x, 50%) bottom;
}
.fn-pop.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.fn-pop-inner {
  background: #fff;
  /* 4px border in the same green as the "Submit a Property" button (--forest). */
  border: 4px solid var(--forest);
  border-radius: 10px;
  box-shadow: 0 14px 34px -12px rgba(23, 23, 23, 0.4),
    0 2px 6px rgba(23, 23, 23, 0.08);
  padding: 0.85rem 1.05rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.fn-pop-content p { margin: 0; }
.fn-pop-content p + p { margin-top: 0.6rem; }
.fn-pop-content a { color: var(--forest); }
/* Triangle. A small rotated square whose two visible borders match the
   popover edge it pokes out of, so it reads as an arrow toward the pill. */
.fn-pop-arrow {
  position: absolute;
  left: var(--fn-arrow-x, 50%);
  width: 16px;
  height: 16px;
  margin-left: -8px;
  background: #fff;
  transform: rotate(45deg);
}
.fn-pop[data-placement="below"] .fn-pop-arrow {
  /* Tucked into the box so the triangle's green sides meet the 4px
     border without a seam. */
  top: -7px;
  border-top: 4px solid var(--forest);
  border-left: 4px solid var(--forest);
}
.fn-pop[data-placement="above"] .fn-pop-arrow {
  bottom: -7px;
  border-bottom: 4px solid var(--forest);
  border-right: 4px solid var(--forest);
}

/* Sources list appended at the foot of the article (and the no-JS target). */
.article-body .footnote {
  margin-top: 2.5rem;
  font-size: 0.92rem;
  color: var(--muted);
}
.article-body .footnote hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0 0 1.2rem;
}
.article-body .footnote ol { padding-left: 1.3rem; }
.article-body .footnote li {
  margin: 0.5rem 0;
  line-height: 1.55;
  /* Source entries are often long, unbroken URLs in plain text (not links).
     Break them so they wrap instead of widening the page past the viewport. */
  overflow-wrap: anywhere;
}
.article-body .footnote li::marker { color: var(--forest); font-weight: 600; }
.article-body .footnote-backref { margin-left: 0.35rem; text-decoration: none; }
.article-body .footnote li:target {
  background: rgba(24, 56, 43, 0.06);
  border-radius: 6px;
  box-shadow: 0 0 0 0.45rem rgba(24, 56, 43, 0.06);
}

@media (prefers-reduced-motion: reduce) {
  .fn-pop { transition: opacity 0.01s; transform: none; }
  .fn-pop[data-placement="above"] { transform: none; }
  .fn-pop.is-open { transform: none; }
}

.dash-form { display: flex; flex-direction: column; gap: 1.1rem; max-width: 760px; }
.dash-form > label { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 500; }
.field-error { color: #b3261e; font-size: 0.85rem; font-weight: 400; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.markdown-help { background: var(--paper, #f6f4ef); border-radius: 6px; padding: 0.9rem 1.1rem; }
.markdown-help ul { margin: 0.4rem 0; padding-left: 1.2rem; }
.markdown-help pre {
  background: #1f1f1f;
  color: #f3f3f3;
  padding: 0.8rem;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 0.82rem;
}

.snippet-field { font-size: 0.82rem; }
.snippet-copy { padding: 0.3rem 0.6rem; font-size: 0.8rem; align-self: flex-start; }