/* layout.css — shell, grid, page structure, header/footer, breadcrumb */

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding-inline: var(--s-5); }
.shell--narrow { max-width: var(--shell-narrow); }

/* ---- site header ---- */
/* ---- site header (solid, static — no scroll-based morphing) ---- */
.site-head {
  position: sticky; top: 0; z-index: 200;
  background: var(--c-surface);
  border-bottom: var(--hair);
}
.site-head__row { display: flex; align-items: center; gap: var(--s-5); height: 66px; }
.brand { display: flex; align-items: center; gap: var(--s-1); font-weight: var(--w-bold); letter-spacing: -0.03em; }
.brand__mark {
  font-family: var(--f-mono); font-size: var(--t-sm); font-weight: var(--w-semi);
  color: var(--c-accent); border: 1.5px solid var(--c-accent);
  padding: 3px 7px; border-radius: var(--r-sm); letter-spacing: 0; line-height: 1;
}
.brand__name { font-family: var(--f-display); font-size: var(--t-lg); font-weight: var(--w-bold); letter-spacing: -0.02em; }
.site-nav { display: flex; gap: var(--s-6); margin-left: auto; font-size: var(--t-sm); color: var(--c-ink-soft); }
.site-nav a { font-weight: var(--w-med); position: relative; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease); }
.site-nav a:hover::after { transform: scaleX(1); }

/* ---- breadcrumb ---- */
.crumb { display: flex; gap: var(--s-2); align-items: center; font-family: var(--f-mono);
  font-size: var(--t-xs); color: var(--c-ink-faint); padding-block: var(--s-5) 0; flex-wrap: wrap; letter-spacing: 0.02em; }
.crumb a:hover { color: var(--c-accent); }
.crumb span[aria-hidden] { opacity: 0.4; }

/* ---- generic page sections ---- */
.section { padding-block: var(--s-8); }
.section--tight { padding-block: var(--s-6); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }
.section__title { font-size: var(--t-xl); }
.section__title--sm { font-size: var(--t-lg); }

/* ---- grids ---- */
.grid { display: grid; gap: var(--s-4); }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: var(--s-4); }
.grid--cats { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-4); }
.grid--index { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 0 var(--s-7); }

/* ---- calculator page split ---- */
.calc-shell { display: grid; grid-template-columns: minmax(0, 1fr) 324px; gap: var(--s-7); align-items: start; padding-bottom: var(--s-7); }
.calc-aside { position: sticky; top: 90px; align-self: start; min-width: 0; display: grid; gap: var(--s-5); }
.calc-aside > * { min-width: 0; }

/* ---- footer ---- */
.site-foot { border-top: var(--hair); margin-top: var(--s-9); padding-block: var(--s-8); color: var(--c-ink-soft); font-size: var(--t-sm); background: var(--c-surface); }
.site-foot__cols { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--s-7) var(--s-6); }
.site-foot__cols h4 { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-faint); margin-bottom: var(--s-4); }
.site-foot__cols li { margin-bottom: var(--s-3); }
.site-foot__cols a:hover { color: var(--c-accent); }
.site-foot__base { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-7); padding-top: var(--s-5); border-top: var(--hair); font-size: var(--t-xs); color: var(--c-ink-faint); flex-wrap: wrap; }
.site-foot__base a { color: var(--c-ink-faint); }
.site-foot__base a:hover { color: var(--c-accent); }

@media (max-width: 920px) {
  .calc-shell { grid-template-columns: 1fr; gap: var(--s-6); }
  .calc-aside { position: static; }
  .site-foot__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .site-nav { display: none; }
  .site-foot__cols { grid-template-columns: 1fr; }
}

/* ---- mobile menu ---- */
.menu-toggle { display: none; }
@media (max-width: 560px) {
  .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: auto; margin-right: -8px;
    background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
    border-radius: var(--r-sm); transition: background var(--dur-2) var(--ease);
  }
  .menu-toggle:active { background: var(--c-hair); }
  .menu-toggle__bars { position: relative; width: 36px; height: 14px; }
  .menu-toggle__bars span {
    position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
    background: var(--c-ink);
    transition: transform var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease);
  }
  .menu-toggle__bars span:first-child { top: 0; }
  .menu-toggle__bars span:last-child { bottom: 0; }
  /* 2 lines animate into an X */
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:first-child { transform: translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:last-child { transform: translateY(-6px) rotate(-45deg); }

  .mobile-nav {
    position: fixed; left: 0; right: 0; top: 66px;
    background: var(--c-surface); border-bottom: 1px solid var(--c-hair);
    box-shadow: 0 18px 40px -24px rgba(24,24,27,0.35);
    padding: var(--s-3) 20px calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
    display: grid; gap: 2px; z-index: 190;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease);
  }
  .mobile-nav[data-open="true"] { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .mobile-nav__link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 8px; font-family: var(--f-display); font-size: 1.15rem; font-weight: var(--w-med);
    color: var(--c-ink); border-radius: var(--r-sm);
    transition: background var(--dur-2) var(--ease), padding-left var(--dur-2) var(--ease);
  }
  .mobile-nav__link + .mobile-nav__link { border-top: 1px solid var(--c-hair); }
  .mobile-nav__link svg { width: 18px; height: 18px; color: var(--c-ink-faint); transition: transform var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
  .mobile-nav__link:active { background: var(--c-hair); }
  .mobile-nav__link:active svg, .mobile-nav__link:hover svg { transform: translateX(3px); color: var(--c-accent); }
  /* stagger links in on open */
  .mobile-nav[data-open="true"] .mobile-nav__link { animation: mnav-in var(--dur-3) var(--ease-out) both; }
  .mobile-nav[data-open="true"] .mobile-nav__link:nth-child(1) { animation-delay: 40ms; }
  .mobile-nav[data-open="true"] .mobile-nav__link:nth-child(2) { animation-delay: 90ms; }
  @keyframes mnav-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

  .menu-scrim {
    position: fixed; inset: 66px 0 0; background: rgba(24,24,27,0.28);
    opacity: 0; pointer-events: none; z-index: 180;
    transition: opacity var(--dur-3) var(--ease);
  }
  .menu-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
}
body.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .menu-toggle__bars span, .mobile-nav, .menu-scrim, .mobile-nav__link svg { transition: none; }
  .mobile-nav[data-open="true"] .mobile-nav__link { animation: none; }
}