/* Dad Travel Tips — production styles. Design tokens from the preview
   (option B, "North Shore Ocean"): deep navy header, pale aqua
   background, ocean teal, coral accent, Plus Jakarta Sans for all type.
   The beach hero photo is a real shot from the North Shore trip — no
   people in it. */
:root{
  --bg:#EAF5F3; --surface:#FFFFFF; --surface2:#DDEEEE;
  --ink:#1E2E35; --muted:#54707A; --line:#CFE3E3;
  --navy:#0A2E4F; --aqua:#5EEAD4; --ocean:#0E7C7B; --oceandark:#0A5E5D;
  --teal:#0E7C7B; --teal-dark:#0A5E5D; --coral:#FF6B4A;
  --chip:#D8ECEC; --warn-bg:#FBF3E4; --warn-line:#E8CF9E; --warn-ink:#6B5312;
  --shadow:0 2px 10px rgba(10,46,79,.07), 0 14px 34px rgba(10,46,79,.08);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-weight:700;line-height:1.15;margin:0}
a{color:var(--teal)}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
header.site{position:sticky;top:0;z-index:50;background:var(--navy);
  border-bottom:1px solid var(--navy)}
.header-in{display:flex;align-items:center;gap:18px;padding:12px 20px}
.logo{font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:1.45rem;font-weight:800;color:#fff;text-decoration:none;white-space:nowrap}
.logo span{color:var(--aqua)}
nav.main{margin-left:auto;display:flex;gap:18px}
nav.main a{color:#D8ECEC;text-decoration:none;font-weight:600;font-size:.95rem}
nav.main a:hover{color:var(--aqua)}
.hero{position:relative;border-radius:0 0 26px 26px;overflow:hidden}
.hero img{width:100%;height:340px;object-fit:cover;display:block}
.hero-shade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,46,79,.16),rgba(10,46,79,.82))}
.hero-txt{position:absolute;left:0;right:0;bottom:0;color:#fff;padding:0 0 34px}
.hero-txt h1{font-size:2.15rem;max-width:640px}
.hero-txt p{max-width:620px;margin:10px 0 16px;color:#E7F0EC}
.hero-cta{display:inline-block;background:var(--coral);color:#fff;font-weight:700;
  text-decoration:none;padding:12px 22px;border-radius:10px;margin-right:10px}
.hero-cta.alt{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff}
.sec-head{display:flex;align-items:baseline;gap:14px;margin:34px 0 18px;flex-wrap:wrap}
.sec-head h2{font-size:1.7rem}
.sec-head p{color:var(--muted);margin:0}
.filters{display:flex;gap:2px;flex-wrap:wrap;align-items:flex-end;
  border-bottom:1px solid var(--line);background:var(--bg);
  position:sticky;top:53px;z-index:40;margin:0 -20px;padding:0 20px}
.tab{appearance:none;border:0;background:transparent;font:inherit;
  font-weight:700;color:var(--ink);padding:10px 14px;cursor:pointer;
  border-bottom:3px solid transparent}
.tab .n{font-weight:400;color:var(--muted);font-size:.85em}
.tab[aria-selected="true"]{color:var(--teal);border-bottom-color:var(--teal)}
.tab:hover{color:var(--teal)}
.result-count{color:var(--muted);font-size:.9rem;margin:10px 0 16px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-bottom:10px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;
  text-decoration:none;color:var(--ink)}
.card:hover{box-shadow:0 4px 16px rgba(10,46,79,.14),0 18px 40px rgba(10,46,79,.12)}
.card img{width:100%;height:190px;object-fit:cover}
.card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-body h3{font-size:1.2rem}
.card-body p{margin:0;color:var(--muted);font-size:.95rem}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:var(--chip);color:var(--teal);font-weight:700;
  border-radius:999px;padding:2px 10px;font-size:.74rem}
.meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-size:.8rem;color:var(--muted)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:10px 0 40px}
.tile{position:relative;border-radius:18px;overflow:hidden;text-decoration:none;
  border:0;padding:0;cursor:pointer;text-align:left;font:inherit;
  background:var(--surface2);box-shadow:var(--shadow);display:block}
.tile img{width:100%;height:150px;object-fit:cover;display:block}
.tile span{position:absolute;left:14px;bottom:12px;background:#fff;color:var(--ink);
  font-weight:700;border-radius:999px;padding:4px 12px;font-size:.9rem}
.draft-banner{background:var(--warn-bg);border:1px solid var(--warn-line);
  color:var(--warn-ink);border-radius:14px;padding:14px 18px;margin:26px 0}
.update-note{background:var(--warn-bg);border:1px solid var(--warn-line);
  border-radius:14px;padding:16px 20px;margin:22px 0}
.update-note strong{color:var(--warn-ink)}
.update-note p{margin:6px 0 0}
.post-head{margin:34px 0 8px}
.post-head h1{font-size:2.1rem}
.cover{width:100%;border-radius:18px;margin:20px 0 6px;
  max-height:460px;object-fit:cover}
.prose{max-width:720px;margin:0 auto}
.prose h2{font-size:1.55rem;margin:30px 0 10px}
.prose h3{font-size:1.25rem;margin:24px 0 8px}
.prose p{margin:0 0 14px}
.prose>ul,.prose>ol{margin:0 0 16px;padding-left:22px}
.prose li{margin-bottom:6px}
.prose hr{border:0;border-top:1px solid var(--line);margin:30px 0}
.prose figure{margin:22px 0}
.prose figure img{width:100%;border-radius:14px;display:block}
.prose figcaption{color:var(--muted);font-size:.88rem;margin-top:8px;text-align:center}
.prose table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.95rem}
.prose th,.prose td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.prose th{background:var(--surface2)}
.prose blockquote{border-left:4px solid var(--ocean);margin:22px 0;
  padding:4px 18px;background:var(--surface2);border-radius:0 12px 12px 0}
.prose blockquote p{margin:8px 0}
.video-embed{max-width:380px;margin:24px auto;aspect-ratio:9/16}
.video-embed iframe{width:100%;height:100%;border:0;border-radius:14px;
  display:block;background:#111}
.postnav{display:flex;gap:14px;margin:34px 0 6px;justify-content:space-between}
.postnav a{text-decoration:none;font-weight:700}
.postnav a span{display:block;font-weight:400;color:var(--muted);font-size:.85rem}
footer.site{border-top:1px solid var(--line);margin-top:48px}
.foot-in{padding:34px 0 40px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.foot-in h3{font-size:1.1rem;margin-bottom:8px}
.foot-in p,.foot-in a{color:var(--muted);font-size:.92rem}
.foot-in ul{list-style:none;margin:0;padding:0}
.foot-in li{margin-bottom:6px}
@media (max-width:860px){
  .grid,.tiles{grid-template-columns:1fr 1fr}
  .foot-in{grid-template-columns:1fr}
  .hero-txt h1{font-size:1.7rem}
  nav.main{display:none}
}
@media (max-width:560px){.grid,.tiles{grid-template-columns:1fr}}