.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
nav a {
  text-decoration: none;
  color: #555;
  font-weight: bold;
}
nav a:hover {
  color: #000;
}
body {
  margin: 0;
  font-family: 'Helvetica Neue', sans-serif;
  background: #fff;
  color: #222;
}
header {
  padding: 20px;
  text-align: center;
}
.logo-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}
.logo {
  width: 300px;

  object-fit: cover;
}

section {
  max-width: 1200px;
  margin: auto;
  padding: 40px 20px;
}
h2 {
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 30px;
  text-transform: uppercase;
  font-size: 1.2rem;
  letter-spacing: 1px;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.gallery-item {
  text-align: center;
}
.gallery-item a {
  display: inline-block;
}
.gallery-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-width: 500px;
  max-height: 500px;
  margin: 0 auto;
}
.caption {
  margin-top: 10px;
  font-size: 0.9rem;
  color: #444;
}
footer {
  text-align: center;
  font-size: 0.8rem;
  color: #888;
  padding: 40px 20px 20px 20px;
  border-top: 1px solid #eee;
  margin-top: 60px;
}
#lightbox-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  justify-content: center;
  align-items: center;
  z-index: 1000;
  flex-direction: column;
  padding: 20px;
}

#lightbox-content {
  max-width: 90%;
  max-height: 90%;
  text-align: center;
  color: white;
}

#lightbox-img {
  max-width: 100%;
  max-height: 80vh;
  border: 2px solid #fff;
  box-shadow: 0 0 10px #000;
}

#lightbox-caption {
  margin-top: 10px;
  font-size: 0.9rem;
  color: #ccc;
}
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}
.video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}
.video-item {
  max-width: 800px;
  margin: auto;
}
.section-block {
  max-width: 1000px; /* or whatever matches your image grid width */
  margin: 0 auto;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: 0.5rem;
  width: 100%;
}

.section-title {
  font-size: 1.3rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #222;
  flex: 1;
}

.back-to-top {
  font-size: 1.2rem;
  text-decoration: none;
  color: #999;
  margin-left: auto;
}

.back-to-top:hover {
  color: #333;
}

.project-description {
  max-width: 1000px;
  margin: 2rem auto;
  text-align: left;
}

.download-item .caption {
  text-align: left;
}

@media (max-width: 600px) {
  header, nav, section, footer {
    padding: 15px;
  }

  .logo {
    width: 200px;
  }

  .section-title {
    font-size: 1rem;
  }

  .gallery-item img {
    max-width: 100%;
    max-height: none;
  }

  .project-description {
    padding: 0 1rem;
    font-size: 0.95rem;
  }

  .caption {
    font-size: 0.85rem;
  }

  .back-to-top {
    font-size: 1rem;
  }
}



/* Submenu bar */
.sub-nav {
  background: #f9f9f9; /* subtle difference */
  border-bottom: 1px solid #ddd;
}

.sub-nav ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0.5rem 1rem;
}

.sub-nav a {
  text-decoration: none;
  color: #555;
}

.sub-nav a:hover {
  text-decoration: underline;
}


.pm-subnav { display:flex; gap:1rem; padding: .75rem 1rem; border-bottom:1px solid #eee; flex-wrap: wrap; }
.pm-subnav a { text-decoration:none; padding:.4rem .6rem; border-radius:.35rem; color:#333; }
.pm-subnav a.active, .pm-subnav a:hover { background: var(--pm-accent); color:#fff; }

/* Submenu presentation (chips + lighter hierarchy) */
.pm-subnav.pm-subnav--submenu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .35rem 0;
  border: 0; /* avoid heavy divider—feels subordinate */
}

/* Tiny "In this section" label */
.pm-subnav-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8a93a0;
  margin-right: .25rem;
  white-space: nowrap;
}

/* Links look like subtle chips instead of primary tabs */
.pm-subnav.pm-subnav--submenu a {
  font-size: .92rem;
  color: #4b5563;
  padding: .25rem .6rem;
  border: 1px solid #dfe3e6;
  border-radius: 999px;
  background: #fff;
  text-decoration: none;
}

.pm-subnav.pm-subnav--submenu a:hover,
.pm-subnav.pm-subnav--submenu a:focus {
  background: #f4f6f8;
  color: #2b3340;
  border-color: #d3d9de;
}

.pm-subnav.pm-subnav--submenu a.active,
.pm-subnav.pm-subnav--submenu a[aria-current="page"] {
  background: #eef2f6;
  color: #222;
  border-color: #c9d1d8;
  font-weight: 600;
}

/* Child nav: gray pill links under the main nav */
.pm-subnav {
  margin-top: .5rem;
  margin-bottom: 1.25rem;
}

.pm-subnav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 0;
  margin: 0;
}

.pm-subnav a {
  display: inline-block;
  padding: .4rem .75rem;
  border-radius: 9999px;
  background: #f2f2f2;      /* same neutral gray as Planemaking */
  color: inherit;
  text-decoration: none;
  line-height: 1;
  border: 1px solid #e3e3e3;
}

.pm-subnav a:hover {
  background: #eaeaea;
}

.pm-subnav a.is-active,
.pm-subnav a[aria-current="page"] {
  background: #e0e0e0;
  border-color: #d2d2d2;
  font-weight: 600;
}

/* Shield top nav from section-specific hover/underline rules (e.g., planemaking.css) */
.top-nav a { text-decoration: none !important; border-bottom: 0 !important; }

.top-nav a:hover:not(.active),
.top-nav a:focus:not(.active) {
  text-decoration: none !important;
  border-bottom: 3px solid var(--pm-accent, #5a6772);
  margin-bottom: 0px;
  border-radius: 4px 4px 0 0;
}

/* Active stays solid pill, no hover change */
.top-nav a.active,
.top-nav a.active:hover,
.top-nav a.active:focus {
  text-decoration: none !important;
  border-bottom: 3px solid var(--pm-accent, #5a6772);
  margin-bottom: 0px;
}

/* Ensure the downloads reuse the same responsive multi-column grid */
.plane-cards{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--grid-gap, 1.25rem);
}

.download-card .plane-card-thumb{
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-s, 6px);

  /* pick ONE padding-top for the ratio you want */
  padding-top: 100%;     /* 1:1  (square) */
  /* padding-top: 56.25%;   16:9 */
  /* padding-top: 75%;      4:3  */
}

.download-card .plane-card-thumb img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Optional: keep card heights tidy even with long titles/subtitles */
.download-card .plane-card-title{
  line-clamp: 2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.download-card .plane-card-subtitle{
  line-clamp: 2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Downloads: structured meta between subtitle and notes */
.download-card-meta {
  margin: .4rem 0 .6rem;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .75rem;
  row-gap: .2rem;
  font-size: .9375rem; /* slightly smaller than body for hierarchy */
}

.download-card-meta div {
  display: contents;  /* lets dt/dd participate directly in the grid */
}

.download-card-meta dt {
  color: #555;
  opacity: .9;
  font-weight: 600;
  white-space: nowrap;
}

.download-card-meta dd {
  margin: 0;
  color: #222;
  overflow-wrap: anywhere;
}
.download-card .download-icon {
  height: 1em;
  width: auto;
  margin-right: 0.4em;
  vertical-align: text-bottom;
}

/* Downloads grid responsive behavior */
@media (max-width: 720px) {
  .downloads-page .plane-cards { 
    grid-template-columns: 1fr; /* single column on small screens */
  }
}
/* View toggle aligns with your gray pills */
.downloads-toolbar { margin: .25rem 0 1rem; }
.downloads-toolbar .is-active {
  background: #e0e0e0;
  border-color: #d2d2d2;
  font-weight: 600;
}
/* List View modifier */
.downloads-page .plane-cards.is-list {
  display: block;        /* stack cards as rows */
}

/* Each card becomes a row with thumb on the left */
.downloads-page .plane-cards.is-list .download-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid #ececec;
}
.downloads-page .plane-cards.is-list .download-card:first-child { border-top: 0; }

/* Small, square thumb */
.downloads-page .plane-cards.is-list .plane-card-thumb {
  width: 96px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
  flex: 0 0 96px;
}
.downloads-page .plane-cards.is-list .plane-card-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Body takes remaining width */
.downloads-page .plane-cards.is-list .plane-card-body {
  flex: 1 1 auto;
}

/* Tighter headings in list mode */
.downloads-page .plane-cards.is-list .plane-card-title { margin: 0 0 .15rem; }
.downloads-page .plane-cards.is-list .plane-card-subtitle { margin: 0 0 .25rem; }

/* Meta as tidy two-column grid (already added earlier) */
.download-card-meta {
  margin: .3rem 0 .45rem;
  display: grid; grid-template-columns: auto 1fr;
  column-gap: .75rem; row-gap: .15rem; font-size: .9375rem;
}
.download-card-meta div { display: contents; }
.download-card-meta dt { color:#555; opacity:.9; font-weight:600; white-space:nowrap; }
.download-card-meta dd { margin:0; color:#222; overflow-wrap:anywhere; }

/* Centered Download pill still looks good in list mode */
.downloads-page .plane-cards.is-list .plane-card-actions {
  display:flex; justify-content:flex-start; /* left align in list view */
  margin-top: .5rem;
}

/* Full View keeps your existing card grid + centered button */
.downloads-page .plane-cards.is-full .plane-card-actions {
  display:flex; justify-content:center; margin-top:.75rem;
}

/* Base button style */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.5rem 0.9rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* Pill-style button: match subnav chip styling */
.btn-pill {
  background: #fff;
  color: #4b5563;
  border: 1px solid #dfe3e6;
  border-radius: 999px;
  padding: .35rem .75rem;
  font-weight: 600;
  line-height: 1;
}

.btn-pill:hover,
.btn-pill:focus {
  background: #f4f6f8;
  color: #2b3340;
  border-color: #d3d9de;
  text-decoration: none;
}

/* Keep icon aligned nicely in pill buttons */
.btn-pill .download-icon {
  height: 1em;
  width: auto;
  margin-right: 0.4em;
  vertical-align: text-bottom;
}
/* Center the download button inside each card */
.download-card .plane-card-actions {
  display: flex;
  justify-content: center;
  margin-top: 0.75rem; /* small spacing from notes/meta */
}

/* Mobile comfort & safe area */
@media (max-width: 720px) {
  .top-nav {
    padding: 0.5rem calc(1rem + env(safe-area-inset-right)) 0
             calc(1rem + env(safe-area-inset-left));
    gap: .75rem;                 /* tighter gap to fit */
    overflow-x: auto;            /* allow sideways scroll if needed */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .top-nav li { scroll-snap-align: start; }

  .top-nav a {
    padding: .5rem .8rem;        /* bigger tap target */
    font-size: 1rem;             /* slightly larger text */
  }
}


@media (max-width: 720px) {
  /* and the nav sits below the toggle row when opened */
  .top-nav { position: relative; z-index: 1; }
}

/* Mobile comfort + collapse */
@media (max-width: 720px) {
  header { position: sticky; top: 0; z-index: 100; background:#fff; }
  .top-nav {
    display:none;                         /* collapsed by default */
    padding: 0.5rem calc(1rem + env(safe-area-inset-right)) 0
             calc(1rem + env(safe-area-inset-left));
    gap:.75rem;
    flex-wrap:wrap;
    border-bottom-width:1px;              /* lighter divider on mobile */
  }
  .top-nav.is-open { display:flex; }
  .top-nav li { flex: 1 1 auto; }
  .top-nav a { padding:.5rem .8rem; font-size:1rem; }
}

/* ---------- View toggle: match Planemaking (right-aligned) ---------- */
.pm-viewtoggle{
  display:flex;
  justify-content:flex-end;
  margin:.25rem 0 1rem;
}
.pm-viewtoggle ul{ display:flex; gap:.5rem; margin:0; padding:0; list-style:none; }
.pm-viewtoggle a{ text-decoration:none; }
.pm-viewtoggle a.is-active{ background:#e0e0e0; border-color:#d2d2d2; font-weight:600; }

/* ---------- FULL VIEW (card grid) ---------- */
.pm-cards.pm-full{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--grid-gap, 1.25rem);
}

/* Card thumbnail sizing (same as Planemaking cards) */
.pm-card .pm-card-thumb{
  display:block;
  width:100%;
  aspect-ratio:16/9;       /* change to 1/1 if you prefer square */
  overflow:hidden;
  border-radius:6px;
}
.pm-card-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Center Download pill under cards in Full View */
.pm-full .pm-card .pm-card-actions{
  display:flex; justify-content:center; margin-top:.75rem;
}

/* Mobile: Full View collapses to one column */
@media (max-width:720px){
  .pm-cards.pm-full{ grid-template-columns:1fr; }
}

/* ---------- LIST VIEW (rows) ---------- */
.pm-cards.pm-list{            /* container switches from grid to stacked rows */
  display:block;
}

.pm-cards.pm-list .pm-row{    /* each item is a compact row */
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:10px 0;
  border-top:1px solid #ececec;
}
.pm-cards.pm-list .pm-row:first-child{ border-top:0; }

/* small square thumb (96px) */
.pm-cards.pm-list .pm-card-thumb{
  width:96px;
  flex:0 0 96px;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:6px;
}
.pm-cards.pm-list .pm-card-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* body fills remaining width */
.pm-cards.pm-list .pm-card-body{ flex:1 1 auto; }

/* tighter headings in list mode */
.pm-cards.pm-list .pm-card-title{ margin:0 0 .15rem; }
.pm-cards.pm-list .pm-card-subtitle{ margin:0 0 .25rem; }

/* actions left-aligned in list mode */
.pm-cards.pm-list .pm-card-actions{ display:flex; justify-content:flex-start; margin-top:.5rem; }

/* ---------- Button pill (reused) ---------- */
.btn{ display:inline-flex; align-items:center; gap:.35em; padding:.5rem .9rem; font-size:.95rem; font-weight:600;
      text-decoration:none; border-radius:4px; border:1px solid transparent; cursor:pointer;
      transition:background-color .2s, color .2s, border-color .2s; }
.btn-pill{ background:#fff; color:#4b5563; border:1px solid #dfe3e6; border-radius:999px; padding:.35rem .75rem; line-height:1; }
.btn-pill:hover,.btn-pill:focus{ background:#f4f6f8; color:#2b3340; border-color:#d3d9de; text-decoration:none; }
.btn-pill .download-icon{ height:1em; width:auto; margin-right:.4em; vertical-align:text-bottom; }

/* Downloads view toggle: match Planemaking & kill the underline */
.pm-viewtoggle {                     /* right-aligned pills */
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin: .25rem 0 1rem;
  border: 0 !important;             /* <-- remove the full-width gray line */
  padding: 0;                        /* Planemaking has tight padding */
}

.pm-viewtoggle ul {
  display: flex;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Pills look like Planemaking: light by default, dark when active */
.pm-viewtoggle a {
  display: inline-block;
  padding: .35rem .7rem;
  border-radius: 4px;
  border: 1px solid #dfe3e6;
  background: #fff;
  color: #333;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
}

.pm-viewtoggle a:hover,
.pm-viewtoggle a:focus {
  background: #f4f6f8;
  color: #2b3340;
  border-color: #d3d9de;
}

.pm-viewtoggle a.is-active {
  background: #333;                  /* dark active pill like Planemaking */
  color: #fff;
  border-color: #333;
 border-radius: 4px;              /* ensure active matches too */

}
/* LIST VIEW: explicit grid so title/subtitle/download align with notes */
.pm-cards.pm-list .pm-card-body{
  display: grid;
  grid-template-columns: minmax(0, 25ch) 1fr;   /* your chosen left cap */
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "title    notes"
    "subtitle notes"
    "actions  notes";
  column-gap: 16px;
  row-gap: .15rem;
  align-items: start;
}

/* Map elements to the areas */
.pm-cards.pm-list .pm-card-title    { grid-area: title;    margin: 0; }
.pm-cards.pm-list .pm-card-subtitle { grid-area: subtitle; margin: .1rem 0 0; }
.pm-cards.pm-list .pm-card-actions  { grid-area: actions;  margin-top: .15rem; }

.pm-cards.pm-list .notes{
  grid-area: notes;
  margin: 0;
  text-align: left;
  align-self: start;
}

/* Make sure children wrap nicely within the capped left column */
.pm-cards.pm-list .pm-card-body > * { min-width: 0; overflow-wrap: anywhere; }

/* Mobile: collapse to single column */
@media (max-width: 720px){
  .pm-cards.pm-list .pm-card-body{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "subtitle"
      "actions"
      "notes";
  }
}

/* Portrait on About page */
.about-portrait {
  float: right;
  max-width: 200px;
  margin: 0 0 1rem 1rem; /* space below and to the left */
  text-align: center;
}

.about-portrait img {
  width: 100%;
  height: auto;
  border-radius: 4px; /* optional */
  display: block;
}

.about-portrait figcaption {
  font-size: 0.85rem;
  color: #555;
  margin-top: 0.3rem;
}
/* === Canonical header & top-nav === */

/* Row with the logo */
.site-header .header-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;   /* center the brand/logo */
}

.site-header .brand .logo{
  display: block;
  height: 84px;
  width: auto;
  margin: 0 auto;
}

/* Row with the tabs */
.site-header .top-nav{
  max-width: 1100px;
  margin: 0 auto;
  margin-top: 24px;
  padding: 6px 16px 0;       /* little top pad; no bottom so baseline is flush */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  list-style: none;
  border-bottom: 2px solid #5a6772;  /* global baseline */
}

/* Each tab reserves the same underline height so row never jiggles */
.top-nav a{
  display: inline-block;
  text-decoration: none !important;
  color: #555;
  font-weight: bold;
  padding: .25rem .6rem;
  border-radius: 4px 4px 0 0;
  border-bottom: 2px solid transparent; /* reserve space */
  margin-bottom: 0px;                   /* pull into the baseline */
  line-height: 1.2;
}

/* Active tab: colored underline + filled pill */
.top-nav a.active,
.top-nav a.active:hover,
.top-nav a.active:focus{
  border-bottom-color: var(--pm-accent, #5a6772);
  background: var(--pm-accent, #5a6772);
  color: #fff;
}

/* Hover/focus for non-active tabs: only color the reserved underline */
.top-nav a:hover:not(.active),
.top-nav a:focus:not(.active){
  border-bottom-color: var(--pm-accent, #5a6772);
  background: #f4f6f8;
  color: #000;
}

/* Keep link row height stable whether active or not */
.top-nav a {
  display: inline-block;
  line-height: 1.2;
  border-bottom: 2px solid transparent;  /* reserve space */
  margin-bottom: 0px;                    /* align to baseline line under header */
}

/* Your active state — reuse your accent color but keep same thickness */
.top-nav a.active,
.top-nav a.active:hover,
.top-nav a.active:focus {
  text-decoration: none !important;
  border-bottom-color: var(--pm-accent, #5a6772); /* same thickness as above */
}

/* Optional: also reserve space on hover for non-active to avoid jiggle */
.top-nav a:hover:not(.active),
.top-nav a:focus:not(.active) {
  border-bottom-color: var(--pm-accent, #5a6772);
}
/* Keep layout width stable whether a scrollbar is present or not */
html { scrollbar-gutter: stable; }

/* Fallback for browsers that don’t support scrollbar-gutter */
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}

/* Mobile collapse behavior */
@media (max-width: 720px){

  .site-header .top-nav{
    display:none;               /* collapsed by default */
    flex-direction:column;
    gap:0;
    padding:.25rem 16px .5rem;
    margin:0 auto;
    list-style:none;
    border-bottom:2px solid #5a6772; /* keep baseline look */
    background:#fff;
  }
  .site-header .top-nav.is-open{ display:flex; }  /* toggled open */

  .site-header .top-nav a{
    display:block;
    padding:.5rem 0;
    margin:0;
    border-bottom:1px solid #eef1f3;
  }
  .site-header .top-nav li:last-child a{ border-bottom:0; }
}

/* base (desktop hidden) */
.nav-toggle{
  display: none;
  position: relative; z-index: 1001;
  background: transparent; border: 0; padding: 0;
  width: 44px; height: 36px; line-height: 0;
  align-items: center; justify-content: center;
}
.nav-toggle .nav-toggle-bar{
  position: relative; width: 26px; height: 2px; background: #333; border-radius: 2px;
}
.nav-toggle .nav-toggle-bar::before,
.nav-toggle .nav-toggle-bar::after{
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: #333; border-radius: 2px;
}
.nav-toggle .nav-toggle-bar::before{ top: -8px; }
.nav-toggle .nav-toggle-bar::after { top:  8px; }

/* mobile */
@media (max-width: 720px){
  .nav-toggle{ display: inline-flex; }
}

/* ===== Header spacing on mobile ===== */
@media (max-width: 720px){
  /* shrink the logo a touch */
  .site-header .brand .logo{
    height: 68px;            /* was 84px */
  }

  /* add breathing room between logo and hamburger */
  .site-header .header-inner{
    gap: 14px;               /* space between logo + button */
    padding-right: 10px;     /* tiny nudge to give the button edge room */
  }

  /* slight extra offset on the button so it doesn't crowd the logo */
  .nav-toggle{
    margin-left: 6px;
  }
}