/* ============================================================
   RIDGE & FURROW — shared design system (all pages)
   Production build. Tokens & chrome carried verbatim from the
   approved high-fidelity comps — design direction is locked.
   Page-specific styles live in assets/css/<page>.css.
   ============================================================ */
:root {
  /* Cumberland Valley palette */
  --spruce:#243B32; --ridge:#4A6B58; --limestone:#EFEBE3;
  --goldenrod:#C8922B; --clay:#9C6B4A; --ink:#1C1C18;

  --gold-lift:#d9a13a; --gold-soft:#e8c778;
  --spruce-90:rgba(36,59,50,0.90); --spruce-70:rgba(36,59,50,0.70);
  --spruce-deep:#1c2e26; --limestone-soft:#E4DED2; --paper:#fbf9f4;
  --hairline:rgba(36,59,50,0.14); --body-muted:#45463f;

  /* Type scale — 1.25 major third */
  --display-xl:clamp(2.9rem,6vw,4.15rem);
  --h1:clamp(2.1rem,3.4vw,2.9rem);
  --h2:1.75rem; --h3:1.25rem;
  --body-l:1.125rem; --body:1rem; --eyebrow:0.8125rem;

  --maxw:1200px; --gutter:clamp(1.25rem,4vw,4rem);
  --radius:4px; --radius-lg:10px;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --shadow-card:0 1px 2px rgba(36,59,50,0.06),0 12px 30px rgba(36,59,50,0.08);
  --shadow-card-hover:0 18px 40px rgba(36,59,50,0.15);
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:'Public Sans',system-ui,sans-serif; background:var(--limestone); color:var(--ink); font-size:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,.display { font-family:'Fraunces',Georgia,serif; color:var(--spruce); line-height:1.08; letter-spacing:-0.015em; font-weight:600; font-optical-sizing:auto; }
a { color:inherit; text-decoration:none; }
img,svg { display:block; }

.eyebrow { font-family:'Public Sans',sans-serif; font-size:var(--eyebrow); font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--goldenrod); display:inline-flex; align-items:center; gap:0.55rem; }
.eyebrow::before { content:""; width:22px; height:1.5px; background:currentColor; display:inline-block; opacity:0.85; }
.wrap { max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }

.skip-link { position:absolute; left:1rem; top:-60px; background:var(--goldenrod); color:var(--spruce); font-weight:700; padding:0.6rem 1rem; border-radius:var(--radius); z-index:200; transition:top 0.2s var(--ease); }
.skip-link:focus { top:1rem; }

/* ---------- DUOTONE TILE SYSTEM ----------
   Two-tone base + contour texture + fine grain. Originally photo
   stand-ins; now the no-image fallback. Real photos slot in as a
   `picture` child (z-index 0) so the contour/grain veil stays on
   top and the gradient shows if the image ever fails to load. */
.duo { position:relative; overflow:hidden; isolation:isolate; background:var(--spruce); }
.duo::before,.duo::after { content:""; position:absolute; inset:0; }
.duo::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23EFEBE3' stroke-width='1.1' opacity='0.5'%3E%3Cpath d='M-20 70 C 110 30 250 110 420 60'/%3E%3Cpath d='M-20 120 C 110 80 250 160 420 110'/%3E%3Cpath d='M-20 170 C 110 130 250 210 420 160'/%3E%3Cpath d='M-20 220 C 110 180 250 260 420 210'/%3E%3Cpath d='M-20 270 C 110 230 250 310 420 260'/%3E%3Cpath d='M-20 320 C 110 280 250 360 420 310'/%3E%3Cpath d='M-20 370 C 110 330 250 410 420 360'/%3E%3C/g%3E%3C/svg%3E");
  background-size:340px auto; opacity:0.18; mix-blend-mode:soft-light; z-index:1;
}
.duo::after {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:0.06; mix-blend-mode:overlay; z-index:1;
}
.duo > * { position:relative; z-index:2; }
.duo > picture { position:absolute; inset:0; z-index:0; }
.duo > picture img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ph-history  { background:linear-gradient(150deg,#26333d 0%,#4b6068 52%,#9a8c6d 100%); }
.ph-outdoors { background:linear-gradient(150deg,#21382a 0%,#43614f 52%,#86a074 100%); }
.ph-food     { background:linear-gradient(150deg,#4f3626 0%,#8c5f42 52%,#cba26e 100%); }
.ph-stay     { background:linear-gradient(155deg,#223a30 0%,#45654f 45%,#b79a6e 100%); }

.cap { position:absolute; left:0.75rem; bottom:0.6rem; z-index:3; font-size:0.6875rem; letter-spacing:0.06em; color:rgba(239,235,227,0.95); font-variant:small-caps; text-transform:lowercase; background:rgba(28,28,24,0.42); padding:3px 9px; border-radius:3px; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }

/* ---------------- NAV (shared chrome — injected by chrome.js) ---------------- */
.nav { background:var(--spruce); color:var(--limestone); position:relative; z-index:60; border-bottom:1px solid rgba(239,235,227,0.08); }
.nav__inner { display:flex; align-items:center; justify-content:space-between; gap:2rem; min-height:76px; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.brand { display:flex; align-items:center; gap:0.6rem; color:var(--limestone); }
.brand__pin { flex:none; transition:transform 0.25s var(--ease); }
.brand:hover .brand__pin { transform:translateY(-2px); }
.brand__text { font-family:'Fraunces',serif; font-weight:600; color:var(--limestone); line-height:1; }
.brand__name { font-size:1.35rem; display:block; letter-spacing:-0.01em; }
.brand__sub { font-family:'Public Sans',sans-serif; font-size:0.6875rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--goldenrod); display:block; margin-top:3px; }

.nav__links { display:flex; align-items:center; gap:0.25rem; list-style:none; }
.nav__links > li { position:relative; }
.nav__link { display:inline-flex; align-items:center; gap:0.3rem; padding:0.55rem 0.85rem; font-size:0.9375rem; font-weight:500; color:rgba(239,235,227,0.86); border-radius:var(--radius); transition:color 0.15s ease, background 0.15s ease; cursor:pointer; position:relative; }
.nav__link:hover,.nav__link:focus-visible { color:var(--limestone); background:rgba(239,235,227,0.07); }
.nav__link[aria-current="page"] { color:var(--limestone); }
.nav__link[aria-current="page"]::after { content:""; position:absolute; left:0.85rem; right:0.85rem; bottom:0.28rem; height:2px; background:var(--goldenrod); border-radius:2px; }
.nav__link .caret { transition:transform 0.2s var(--ease); }

.has-dropdown .dropdown { position:absolute; top:calc(100% + 8px); left:0; min-width:200px; background:var(--spruce); border:1px solid rgba(239,235,227,0.12); border-radius:8px; padding:0.4rem; box-shadow:0 16px 44px rgba(0,0,0,0.4); opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s; list-style:none; }
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.has-dropdown:hover .caret,.has-dropdown:focus-within .caret { transform:rotate(180deg); }
.dropdown a { display:block; padding:0.55rem 0.7rem; font-size:0.9rem; color:rgba(239,235,227,0.82); border-radius:var(--radius); transition:background 0.14s, color 0.14s, padding-left 0.14s; }
.dropdown a:hover,.dropdown a:focus-visible { background:var(--ridge); color:var(--limestone); padding-left:0.95rem; }

.nav__cta { margin-left:0.5rem; padding:0.6rem 1.15rem; background:var(--goldenrod); color:var(--spruce); font-weight:700; font-size:0.9375rem; border-radius:var(--radius); transition:background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease; }
.nav__cta:hover,.nav__cta:focus-visible { background:var(--gold-lift); box-shadow:0 6px 18px rgba(200,146,43,0.35); }
.nav__cta:active { transform:translateY(1px); }
.nav__toggle { display:none; background:none; border:0; color:var(--limestone); cursor:pointer; padding:0.4rem; border-radius:var(--radius); }
.nav__toggle:hover { background:rgba(239,235,227,0.07); }

/* ---- Mobile drawer ---- */
.drawer-overlay { position:fixed; inset:0; background:rgba(28,28,24,0.55); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:opacity 0.28s var(--ease), visibility 0.28s; z-index:1090; }
.drawer { position:fixed; top:0; right:0; height:100%; width:min(340px,86vw); background:var(--spruce); color:var(--limestone); z-index:1100; transform:translateX(100%); transition:transform 0.32s var(--ease); display:flex; flex-direction:column; box-shadow:-20px 0 60px rgba(0,0,0,0.4); padding:1.25rem 1.4rem 2rem; overflow-y:auto; }
body.drawer-open .drawer { transform:translateX(0); }
body.drawer-open .drawer-overlay { opacity:1; visibility:visible; }
body.drawer-open { overflow:hidden; }
.drawer__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
.drawer__brand { font-family:'Fraunces',serif; font-weight:600; font-size:1.15rem; color:var(--limestone); }
.drawer__close { background:none; border:0; color:var(--limestone); cursor:pointer; padding:0.4rem; border-radius:var(--radius); }
.drawer__close:hover { background:rgba(239,235,227,0.08); }
.drawer nav { display:flex; flex-direction:column; }
.drawer a,.drawer .drawer__group > span { display:block; padding:0.85rem 0.4rem; font-size:1.05rem; font-weight:500; color:rgba(239,235,227,0.9); border-bottom:1px solid rgba(239,235,227,0.08); }
.drawer a[aria-current="page"] { color:var(--goldenrod); }
.drawer a:hover,.drawer a:focus-visible { color:var(--limestone); }
.drawer .drawer__group > span { font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--goldenrod); font-weight:700; border-bottom:0; padding-bottom:0.3rem; }
.drawer .drawer__sub a { padding-left:1rem; font-size:0.975rem; color:rgba(239,235,227,0.78); }
.drawer__cta { margin-top:1.6rem; text-align:center; background:var(--goldenrod) !important; color:var(--spruce) !important; font-weight:700; border-radius:var(--radius); border-bottom:0 !important; }

/* ---------------- INTERIOR PAGE HEADER ---------------- */
.page-head { position:relative; background:var(--spruce); color:var(--limestone); overflow:hidden; isolation:isolate; }
.page-head__contours { position:absolute; inset:0; z-index:0; opacity:0.18; mix-blend-mode:soft-light; }
.page-head__contours path { stroke-dasharray:2600; stroke-dashoffset:2600; animation:draw 2.4s var(--ease) forwards; }
.page-head__contours path:nth-child(2){animation-delay:.12s}
.page-head__contours path:nth-child(3){animation-delay:.24s}
.page-head__contours path:nth-child(4){animation-delay:.36s}
@keyframes draw { to { stroke-dashoffset:0; } }
.page-head__ridges { position:absolute; left:0; right:0; bottom:0; height:55%; z-index:0; opacity:0.5; }
.page-head__inner { position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:clamp(3rem,7vh,4.75rem) var(--gutter) clamp(2.75rem,6vh,4rem); }
.page-head .eyebrow { color:var(--goldenrod); margin-bottom:0.9rem; }
.page-head h1 { color:var(--limestone); font-size:var(--h1); max-width:18ch; text-wrap:balance; }
.page-head h1 em { font-style:italic; color:var(--gold-soft); font-weight:500; }
.page-head__intro { font-size:var(--body-l); color:rgba(239,235,227,0.88); max-width:56ch; margin-top:1.1rem; }

/* ---------------- SECTION SHELL ---------------- */
.section { padding-block:clamp(3rem,7vh,5rem); }
.section__head { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:2.6rem; flex-wrap:wrap; }
.section__head h2 { font-size:var(--h1); max-width:20ch; margin-top:0.7rem; }
.section__intro { max-width:42ch; color:var(--body-muted); font-size:var(--body-l); }
.section__link { font-weight:600; font-size:0.95rem; color:var(--ridge); border-bottom:2px solid var(--goldenrod); padding-bottom:3px; white-space:nowrap; transition:color 0.15s; display:inline-flex; gap:0.35rem; align-items:center; }
.section__link .arr { transition:transform 0.2s var(--ease); }
.section__link:hover { color:var(--spruce); }
.section__link:hover .arr { transform:translateX(4px); }

/* ---------------- BUTTONS ---------------- */
.btn { display:inline-flex; align-items:center; gap:0.5rem; padding:0.85rem 1.6rem; border-radius:var(--radius); font-weight:700; font-size:1rem; transition:background 0.15s, transform 0.06s, border-color 0.15s, box-shadow 0.15s; cursor:pointer; border:1.5px solid transparent; font-family:inherit; }
.btn .arr { transition:transform 0.2s var(--ease); }
.btn:hover .arr { transform:translateX(4px); }
.btn--primary { background:var(--goldenrod); color:var(--spruce); }
.btn--primary:hover,.btn--primary:focus-visible { background:var(--gold-lift); box-shadow:0 10px 26px rgba(200,146,43,0.35); }
.btn--primary:active { transform:translateY(1px); }
.btn--ghost { background:rgba(239,235,227,0.04); color:var(--limestone); border-color:rgba(239,235,227,0.5); }
.btn--ghost:hover,.btn--ghost:focus-visible { border-color:var(--limestone); background:rgba(239,235,227,0.1); }
.btn--solid { background:var(--spruce); color:var(--limestone); }
.btn--solid:hover,.btn--solid:focus-visible { background:var(--ridge); box-shadow:0 10px 26px rgba(36,59,50,0.22); }
.btn--solid:active { transform:translateY(1px); }

/* ---------------- CONTROL / FILTER BAR ---------------- */
.toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 1.5rem; padding-block:1.5rem; border-bottom:1px solid var(--hairline); }
.chips { display:flex; flex-wrap:wrap; gap:0.5rem; align-items:center; }
.chips__label { font-size:0.75rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#6a6b62; margin-right:0.3rem; }
.chip { font-family:inherit; font-size:0.875rem; font-weight:600; color:var(--spruce); background:var(--paper); border:1px solid var(--hairline); padding:0.45rem 0.95rem; border-radius:100px; cursor:pointer; transition:background 0.14s, color 0.14s, border-color 0.14s, transform 0.05s; display:inline-flex; align-items:center; gap:0.4rem; }
.chip:hover { border-color:var(--ridge); }
.chip:active { transform:translateY(1px); }
.chip__dot { width:9px; height:9px; border-radius:50%; flex:none; }
.chip.is-active { background:var(--spruce); color:var(--limestone); border-color:var(--spruce); }
.chip.is-active .chip__dot { outline:2px solid rgba(239,235,227,0.35); }

.toggle { display:inline-flex; background:var(--paper); border:1px solid var(--hairline); border-radius:100px; padding:3px; }
.toggle button { font-family:inherit; font-size:0.85rem; font-weight:600; color:#6a6b62; background:none; border:0; padding:0.4rem 1rem; border-radius:100px; cursor:pointer; transition:background 0.16s var(--ease), color 0.16s; display:inline-flex; align-items:center; gap:0.4rem; }
.toggle button.is-active { background:var(--goldenrod); color:var(--spruce); box-shadow:0 2px 8px rgba(200,146,43,0.3); }

/* ---------------- CONTOUR DIVIDER ---------------- */
.contour-divider { height:46px; color:var(--ridge); opacity:0.5; overflow:hidden; }
.contour-divider svg { width:100%; height:100%; display:block; }

/* ---------------- SCROLL REVEAL ---------------- */
.reveal { opacity:0; transform:translateY(20px); transition:opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.reveal.is-in { opacity:1; transform:none; }
.reveal[data-delay="1"]{transition-delay:.06s}
.reveal[data-delay="2"]{transition-delay:.12s}
.reveal[data-delay="3"]{transition-delay:.18s}
.reveal[data-delay="4"]{transition-delay:.24s}
.reveal[data-delay="5"]{transition-delay:.3s}
.reveal[data-delay="6"]{transition-delay:.36s}

/* ---------------- FOOTER (shared chrome — injected by chrome.js) ---------------- */
.footer { background:var(--spruce); color:rgba(239,235,227,0.82); padding-block:clamp(3rem,6vh,4.5rem) 2rem; position:relative; }
.footer__contours { position:absolute; top:0; left:0; right:0; height:40px; color:var(--ridge); opacity:0.4; overflow:hidden; }
.footer__contours svg { width:100%; height:100%; }
.footer__grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; padding-top:1.5rem; }
.footer__brand .brand { margin-bottom:1rem; }
.footer__tagline { font-size:0.95rem; max-width:32ch; color:rgba(239,235,227,0.7); }
.footer__col h4 { font-family:'Public Sans',sans-serif; font-size:0.8125rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--goldenrod); margin-bottom:1rem; font-weight:700; }
.footer__col ul { list-style:none; display:grid; gap:0.6rem; }
.footer__col a { font-size:0.925rem; color:rgba(239,235,227,0.78); transition:color 0.14s, padding-left 0.14s; }
.footer__col a:hover,.footer__col a:focus-visible { color:var(--limestone); padding-left:3px; }
.footer__bar { margin-top:2.8rem; padding-top:1.4rem; border-top:1px solid rgba(239,235,227,0.12); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:0.8125rem; color:rgba(239,235,227,0.55); }

/* ---------------- RESPONSIVE (shared) ---------------- */
@media (max-width:960px) {
  .footer__grid { grid-template-columns:1fr 1fr; gap:2rem; }
}
/* 990px (not 900) so the longer "Franklin County Passport" wordmark
   never wraps next to the full desktop nav (brand+links need ~985px) */
@media (max-width:990px) {
  .nav__links { display:none; }
  .nav__toggle { display:block; }
}
@media (max-width:560px) {
  .footer__grid { grid-template-columns:1fr; }
  .section__head { align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
  .reveal { opacity:1; transform:none; }
  .page-head__contours path { stroke-dashoffset:0; }
}
:focus-visible { outline:2px solid var(--goldenrod); outline-offset:2px; }