/* Blog styles (moved out of blog.html so every post page can share them) */
:root {
  --white:     #ffffff;
  --off-white: #f8f7f4;
  --stone-50:  #f5f3ef;
  --stone-100: #e8e4dc;
  --stone-300: #c4bdb0;
  --stone-500: #8c8278;
  --stone-700: #4a453f;
  --ink:       #1a1814;
  --accent:    #2c4a3e;
  --accent-lt: #3d6b5c;
  --gold:      #b8976a;
  --serif:     'Cormorant Garamond', Georgia, serif;
  --sans:      'Jost', sans-serif;
  --nav-h:     72px;
  --max-w:     1240px;
  --ease:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--sans); color:var(--ink); background:var(--white); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }

.container { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 clamp(24px,5vw,64px); }
.label { font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); }
.divider { width:48px; height:1px; background:var(--gold); margin:20px 0; }
.btn { display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; padding:14px 32px; border:1px solid currentColor; transition:background .3s var(--ease),color .3s var(--ease); cursor:pointer; }
.btn-dark { color:var(--ink); border-color:var(--ink); }
.btn-dark:hover { background:var(--ink); color:var(--white); }
.btn-accent { color:var(--white); background:var(--accent); border-color:var(--accent); }
.btn-accent:hover { background:var(--accent-lt); border-color:var(--accent-lt); }
.btn svg { transition:transform .3s var(--ease); }
.btn:hover svg { transform:translateX(4px); }

.js-loaded .reveal { opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease),transform .8s var(--ease); }
.reveal.visible { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }

/* NAV */
.nav { position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h); display:flex; align-items:center; transition:background .4s var(--ease),box-shadow .4s var(--ease); background:rgba(255,255,255,.97); box-shadow:0 1px 0 var(--stone-100); }
.nav .container { display:flex; align-items:center; justify-content:space-between; width:100%; }
.nav-logo { display:flex; align-items:center; }
.nav-logo-img { height:52px; width:auto; }
.nav-links { display:flex; align-items:center; gap:36px; }
.nav-links a { font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--stone-700); transition:color .3s; }
.nav-links a:hover { color:var(--ink); }
.nav-cta { font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; padding:10px 22px; border:1px solid var(--accent); color:var(--accent); transition:background .3s,color .3s; }
.nav-cta:hover { background:var(--accent); color:var(--white); }
.nav-toggle { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.nav-toggle span { display:block; width:24px; height:1.5px; background:var(--ink); transition:transform .3s,opacity .3s; }
.nav-toggle.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
.nav-mobile { display:none; position:fixed; inset:0; background:var(--ink); z-index:99; flex-direction:column; align-items:center; justify-content:center; gap:40px; opacity:0; pointer-events:none; transition:opacity .4s var(--ease); }
.nav-mobile.open { opacity:1; pointer-events:all; }
.nav-mobile a { font-family:var(--serif); font-size:clamp(28px,5vw,42px); font-weight:300; color:var(--white); letter-spacing:.04em; transition:color .2s; }
.nav-mobile a:hover { color:var(--gold); }

/* PAGE HEADER */
.page-header { padding-top:calc(var(--nav-h) + clamp(48px,6vw,80px)); padding-bottom:clamp(48px,6vw,80px); background:var(--ink); position:relative; overflow:hidden; }
.page-header::before { content:''; position:absolute; inset:0; background:linear-gradient(160deg,#1a2e28 0%,#0f1f1b 50%,#1c2535 100%); }
.page-header::after { content:''; position:absolute; top:-20%; right:-10%; width:60%; height:100%; background:radial-gradient(ellipse,rgba(184,151,106,.07) 0%,transparent 65%); }
.page-header .container { position:relative; z-index:2; }
.page-header-eyebrow { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.page-header-back { font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45); display:flex; align-items:center; gap:8px; transition:color .3s; }
.page-header-back:hover { color:rgba(255,255,255,.8); }
.page-header-back svg { transition:transform .3s; }
.page-header-back:hover svg { transform:translateX(-3px); }
.page-header h1 { font-family:var(--serif); font-size:clamp(42px,6vw,80px); font-weight:300; color:var(--white); line-height:1.06; letter-spacing:-.01em; }
.page-header h1 em { font-style:italic; color:var(--gold); }
.page-header-sub { font-size:14px; font-weight:300; color:rgba(255,255,255,.55); margin-top:20px; max-width:480px; line-height:1.8; }

/* BLOG INDEX */
.blog-index { padding:clamp(64px,8vw,120px) 0; background:var(--off-white); }

/* Featured post */
.featured-post { background:var(--white); display:grid; grid-template-columns:1fr 1fr; margin-bottom:2px; transition:box-shadow .4s var(--ease); }
.featured-post:hover { box-shadow:0 24px 64px rgba(0,0,0,.08); z-index:1; position:relative; }
.featured-post-img { aspect-ratio:4/3; overflow:hidden; background:var(--stone-100); position:relative; }
.featured-post-img img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.featured-post:hover .featured-post-img img { transform:scale(1.04); }
.featured-post-img-placeholder { position:absolute; inset:0; background:linear-gradient(135deg,#1e2e28 0%,#1c3040 100%); display:flex; align-items:center; justify-content:center; }
.featured-post-body { padding:clamp(40px,5vw,72px); display:flex; flex-direction:column; justify-content:center; }
.featured-post-cat { font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.featured-post-body h2 { font-family:var(--serif); font-size:clamp(24px,3vw,38px); font-weight:400; line-height:1.25; color:var(--ink); margin-bottom:20px; transition:color .3s; }
.featured-post:hover .featured-post-body h2 { color:var(--accent); }
.featured-post-body p { font-size:14px; font-weight:300; line-height:1.9; color:var(--stone-700); margin-bottom:32px; }
.post-meta { display:flex; align-items:center; gap:20px; font-size:11px; font-weight:400; letter-spacing:.06em; color:var(--stone-500); }
.post-meta-dot { width:3px; height:3px; border-radius:50%; background:var(--stone-300); }

/* Post grid */
.post-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2px; margin-bottom:2px; }
.post-card { background:var(--white); overflow:hidden; transition:box-shadow .4s var(--ease); }
.post-card:hover { box-shadow:0 16px 48px rgba(0,0,0,.07); z-index:1; position:relative; }
.post-card-img { aspect-ratio:16/9; background:var(--stone-100); overflow:hidden; position:relative; }
.post-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.post-card:hover .post-card-img img { transform:scale(1.04); }
.post-card-img-placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.post-card-body { padding:32px 36px 40px; }
.post-card-cat { font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.post-card-body h3 { font-family:var(--serif); font-size:clamp(20px,2vw,26px); font-weight:400; line-height:1.3; color:var(--ink); margin-bottom:14px; transition:color .3s; }
.post-card:hover .post-card-body h3 { color:var(--accent); }
.post-card-body p { font-size:13px; font-weight:300; line-height:1.85; color:var(--stone-700); margin-bottom:20px; }

/* IMAGE PLACEHOLDERS */
.img-placeholder-market { background:linear-gradient(135deg, #1e3a2e 0%, #2c4a3e 40%, #1a2e28 100%); }
.img-placeholder-poulsbo { background:linear-gradient(135deg, #1c2535 0%, #2a3850 40%, #1a2030 100%); }
.img-placeholder-ferry { background:linear-gradient(135deg, #2a2018 0%, #3d3020 40%, #1a1810 100%); }

.placeholder-icon { color:rgba(255,255,255,.2); }

/* CTA STRIP */
.blog-cta { background:var(--accent); padding:64px 0; }
.blog-cta .container { display:grid; grid-template-columns:1fr auto; align-items:center; gap:48px; }
.blog-cta h2 { font-family:var(--serif); font-size:clamp(26px,3vw,40px); font-weight:300; color:var(--white); }
.blog-cta p { font-size:14px; font-weight:300; color:rgba(255,255,255,.65); margin-top:10px; }

/* INDIVIDUAL POST VIEW */
.post-view { display:none; }
.post-view.active { display:block; }
.blog-index-view { display:block; }
.blog-index-view.hidden { display:none; }

/* Post hero */
.post-hero { padding-top:calc(var(--nav-h) + clamp(48px,6vw,72px)); padding-bottom:0; background:var(--ink); }
.post-hero-inner { position:relative; }
.post-hero-meta { display:flex; align-items:center; gap:16px; margin-bottom:28px; }
.post-hero-cat { font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.post-hero h1 { font-family:var(--serif); font-size:clamp(36px,5.5vw,72px); font-weight:300; color:var(--white); line-height:1.08; letter-spacing:-.01em; max-width:820px; margin-bottom:24px; }
.post-hero-byline { font-size:12px; font-weight:300; letter-spacing:.08em; color:rgba(255,255,255,.4); }
.post-hero-img { width:100%; height:clamp(280px,40vw,520px); object-fit:cover; margin-top:48px; display:block; }
.post-hero-img-placeholder { width:100%; height:clamp(280px,40vw,520px); margin-top:48px; display:flex; align-items:center; justify-content:center; }

/* Post body */
.post-body { padding:clamp(56px,7vw,100px) 0; background:var(--white); }
.post-body .container { display:grid; grid-template-columns:1fr 320px; gap:clamp(48px,6vw,96px); align-items:start; }
.post-content { max-width:680px; }
.post-content p { font-size:16px; font-weight:300; line-height:1.95; color:var(--stone-700); margin-bottom:28px; }
.post-content h2 { font-family:var(--serif); font-size:clamp(26px,3vw,36px); font-weight:400; color:var(--ink); margin:48px 0 20px; line-height:1.2; }
.post-content h3 { font-family:var(--serif); font-size:clamp(20px,2.2vw,26px); font-weight:400; color:var(--ink); margin:36px 0 16px; }
.post-content ul { margin-bottom:28px; display:flex; flex-direction:column; gap:12px; }
.post-content ul li { font-size:15px; font-weight:300; line-height:1.8; color:var(--stone-700); padding-left:20px; position:relative; }
.post-content ul li::before { content:'—'; position:absolute; left:0; color:var(--gold); }
.post-content blockquote { border-left:2px solid var(--gold); padding:4px 0 4px 28px; margin:36px 0; }
.post-content blockquote p { font-family:var(--serif); font-size:clamp(18px,2vw,24px); font-style:italic; font-weight:300; color:var(--ink); margin-bottom:0; line-height:1.6; }

/* Sidebar */
.post-sidebar { position:sticky; top:calc(var(--nav-h) + 32px); }
.sidebar-card { background:var(--stone-50); padding:32px; margin-bottom:24px; }
.sidebar-card h4 { font-family:var(--serif); font-size:20px; font-weight:400; color:var(--ink); margin-bottom:12px; }
.sidebar-card p { font-size:13px; font-weight:300; line-height:1.8; color:var(--stone-700); margin-bottom:20px; }
.sidebar-agent { display:flex; flex-direction:column; gap:0; margin-bottom:20px; }
.sidebar-agent-img { width:100%; height:200px; object-fit:cover; object-position:center top; margin-bottom:16px; }
.sidebar-agent-name { font-family:var(--serif); font-size:19px; font-weight:400; color:var(--ink); }
.sidebar-agent-title { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--stone-500); margin-top:4px; margin-bottom:0; }
.sidebar-related h4 { font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; }
.sidebar-related-post { padding:16px 0; border-bottom:1px solid var(--stone-100); cursor:pointer; }
.sidebar-related-post:last-child { border-bottom:none; }
.sidebar-related-cat { font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }
.sidebar-related-title { font-family:var(--serif); font-size:15px; font-weight:400; color:var(--ink); line-height:1.35; transition:color .3s; }
.sidebar-related-post:hover .sidebar-related-title { color:var(--accent); }
.sidebar-related-date { font-size:10px; color:var(--stone-500); margin-top:6px; }

/* Post nav */
.post-nav { padding:48px 0; border-top:1px solid var(--stone-100); background:var(--white); }
.post-nav .container { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.post-nav-back { display:flex; align-items:center; gap:10px; font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--stone-500); transition:color .3s; }
.post-nav-back:hover { color:var(--ink); }
.post-nav-back svg { transition:transform .3s; }
.post-nav-back:hover svg { transform:translateX(-3px); }

/* FOOTER */
.footer { background:var(--ink); padding:64px 0 0; }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-brand-col { display:flex; flex-direction:column; align-items:center; text-align:center; }
.footer-brand-logo { width:200px; height:auto; margin-bottom:20px; }
.footer-compass-logo { width:120px; height:auto; margin:12px 0 16px; }
.footer-brand-compass { font-size:11px; color:var(--stone-500); line-height:1.7; }
.footer-col h4 { font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; }
.footer-col ul { display:flex; flex-direction:column; gap:12px; }
.footer-col ul li a { font-size:13px; font-weight:300; color:var(--stone-500); transition:color .3s; }
.footer-col ul li a:hover { color:var(--white); }
.footer-contact-item { display:flex; flex-direction:column; gap:2px; margin-bottom:16px; }
.footer-contact-label { font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--stone-700); }
.footer-contact-value { font-size:13px; font-weight:300; color:var(--stone-500); transition:color .3s; }
.footer-contact-value:hover { color:var(--white); }
.footer-bottom { padding:24px 0; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.footer-legal { font-size:10px; font-weight:300; line-height:1.8; color:rgba(255,255,255,.2); max-width:700px; }
.footer-legal a { color:rgba(255,255,255,.35); text-decoration:underline; text-underline-offset:2px; }
.footer-legal a:hover { color:rgba(255,255,255,.6); }
.footer-copy { font-size:10px; color:rgba(255,255,255,.2); white-space:nowrap; margin-top:4px; }

/* RESPONSIVE */
@media(max-width:1024px) {
  .nav-links,.nav-cta { display:none; }
  .nav-toggle { display:flex; }
  .nav-mobile { display:flex; }
  .featured-post { grid-template-columns:1fr; }
  .featured-post-img { aspect-ratio:16/9; }
  .post-grid { grid-template-columns:1fr; }
  .post-body .container { grid-template-columns:1fr; }
  .post-sidebar { position:static; }
  .footer-top { grid-template-columns:1fr 1fr; }
  .blog-cta .container { grid-template-columns:1fr; }
}
@media(max-width:640px) {
  .footer-top { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; }
  .post-nav .container { flex-direction:column; align-items:flex-start; }
}
/* Inline post images */
.post-inline-img { width:100%; margin:32px 0; overflow:hidden; }
.post-inline-img img { width:100%; height:260px; object-fit:cover; display:block; }
.post-inline-img figcaption { font-size:11px; color:var(--stone-500); letter-spacing:.06em; padding:10px 0 0; }
@media(max-width:768px) { .post-inline-img img { height:200px; } }

/* ===== Redesign step three (shared by the blog and area pages) ===== */
:root { --tide: cubic-bezier(.22,1,.36,1); }

/* Breadcrumb above titles */
.post-crumbs { display:flex; align-items:center; gap:10px; font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:22px; }
.post-crumbs a { color:rgba(255,255,255,.7); transition:color .4s var(--tide); }
.post-crumbs a:hover { color:var(--gold); }

/* "Next" band: a full-width photo that invites the next read */
.post-next { position:relative; display:block; overflow:hidden; background:var(--ink); color:var(--white); isolation:isolate; }
.post-next-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.42; transform:scale(1.04); transition:transform 1.8s var(--tide), opacity 1.2s var(--tide); z-index:-1; }
.post-next::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,18,15,.8) 0%, rgba(10,18,15,.25) 100%); z-index:-1; }
.post-next:hover .post-next-img { transform:scale(1.1); opacity:.6; }
.post-next .container { padding-top:clamp(72px,10vw,140px); padding-bottom:clamp(72px,10vw,140px); }
.post-next-label { display:block; font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; }
.post-next-title { display:block; font-family:var(--serif); font-weight:300; font-size:clamp(30px,4.6vw,60px); line-height:1.08; max-width:820px; }
.post-next-title::after { content:''; display:block; width:48px; height:1px; background:var(--gold); margin-top:26px; transition:width .9s var(--tide); }
.post-next:hover .post-next-title::after { width:140px; }
.post-next-meta { display:block; margin-top:18px; font-size:12px; letter-spacing:.08em; color:rgba(255,255,255,.55); }

/* Reading progress line along the top of an article */
.read-progress { position:fixed; top:0; left:0; right:0; height:2px; background:var(--gold); transform-origin:left; transform:scaleX(var(--p, 0)); z-index:1200; pointer-events:none; }

/* Page titles rise into place */
@media (prefers-reduced-motion: no-preference) {
  .rise > * { animation: rise 1.2s var(--tide) both; }
  .rise > :nth-child(2) { animation-delay:.08s; } .rise > :nth-child(3) { animation-delay:.16s; }
  .rise > :nth-child(4) { animation-delay:.24s; } .rise > :nth-child(5) { animation-delay:.32s; }
  .pt-enter .rise > * { animation-delay:.55s; }
  @keyframes rise { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }

  /* Photos glide from the card you clicked into the page that opens (newer browsers) */
  @view-transition { navigation: auto; }
  ::view-transition-group(*) { animation-duration:.75s; animation-timing-function:cubic-bezier(.76,0,.24,1); }
  ::view-transition-old(*), ::view-transition-new(*) { height:100%; object-fit:cover; overflow:hidden; }
  ::view-transition-old(root) { animation:.45s ease both vt-out; }
  ::view-transition-new(root) { animation:.6s ease .15s both vt-in; }
  @keyframes vt-out { to { opacity:0; } }
  @keyframes vt-in { from { opacity:0; } }
}

.post-link { display:block; color:inherit; }
a.sidebar-related-post { display:block; }
.featured-post-img img, .post-card-img img { transition:transform 1.6s var(--tide); }
.post-link:hover .featured-post-img img, .post-link:hover .post-card-img img { transform:scale(1.06); }
.post-hero-img { margin-top:56px; }
.post-content h2 { position:relative; }
.post-nav { margin-bottom:0; }
.rise > img { animation:none !important; }
/* The card's paragraph style was overriding the name and title sizes */
.sidebar-card .sidebar-agent-name { font-size:19px; line-height:1.3; margin-bottom:0; color:var(--ink); }
.sidebar-card .sidebar-agent-title { font-size:10px; line-height:1.6; letter-spacing:.14em; margin:4px 0 0; color:var(--stone-500); }

/* In-article links and source notes */
.post-content p a, .post-content li a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px; text-decoration-thickness:1px; transition:color .2s; }
.post-content p a:hover, .post-content li a:hover { color:var(--accent, #2c4a3e); }
.post-content p.post-sources { font-size:12.5px; line-height:1.7; color:#6c645b; border-top:1px solid var(--stone-200, #e8e4dc); padding-top:20px; margin-top:44px; }