/* ShanePack Engineering hub. Tokens match shanepack.com / photography.css */
:root{--bg:#070708;--fg:#e8e6e1;--muted:#8a8c90;--subtle:#6b6e73;--steel:#9aa3ad;--surface:#121214;--surface-2:#1c1c20;--border:#e8e6e11f;--shadow-border:0 0 0 1px #ffffff14;
--font-display:"Barlow Condensed","Arial Narrow",sans-serif;--font-sans:"Barlow","Segoe UI",system-ui,sans-serif;--font-mono:"IBM Plex Mono",ui-monospace,monospace;--ease-out:cubic-bezier(.22,1,.36,1);--amber:#f0b25a}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;background:var(--bg);overflow-x:hidden}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--fg);font-family:var(--font-sans);letter-spacing:.01em;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:4px}
.mono{font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase}
.site-header,.site-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem}
.site-header .brand{letter-spacing:.28em;color:var(--muted)}
.site-header .coords{letter-spacing:.18em;color:var(--subtle);margin:0}
.site-header a:hover{color:var(--fg)}
.site-footer{margin-top:auto}
.site-footer p{margin:0;letter-spacing:.16em;color:var(--subtle);text-transform:none}
main{width:100%;max-width:80rem;margin:0 auto;padding:0 1.25rem 4rem}
.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;letter-spacing:.2em;color:var(--subtle);margin:1rem 0 0}
.crumbs a{color:var(--muted);transition:color .2s}.crumbs a:hover{color:var(--fg)}
.crumbs span[aria-current]{color:var(--steel)}
.eyebrow{margin:2.5rem 0 0;letter-spacing:.28em;color:var(--muted)}
h1{margin:.75rem 0 0;font-family:var(--font-display);font-weight:500;font-size:3.75rem;line-height:.9;letter-spacing:.06em;text-transform:uppercase}
.lede{margin:1.25rem 0 0;max-width:40rem;color:var(--steel);font-size:1rem;line-height:1.625}

/* Four even cards in two categories (Grid & Utility: 3, Space: 1).
   The sections and their tile lists use display:contents, so every card and heading sits on one shared grid
   and every card is exactly one track wide. Card rows are 1fr in an auto-height grid, so all card rows take
   the height of the tallest card: no odd-size cards at any width.
   >= 1360px: 4 across (headings: Grid over tracks 1-3, Space over track 4).
   768-1359px: 2x2 (Grid heading, sag + clearance; then transformer in track 1 beside the Space heading/card in track 2).
   Phones: one column, stacked. */
.columns{display:grid;grid-template-columns:minmax(0,1fr);column-gap:1.25rem;margin-top:3rem;
  grid-template-areas:"gh" "a" "b" "c" "sh" "d";grid-template-rows:auto 1fr 1fr 1fr auto 1fr}
.group,.tiles{display:contents}
.gh-grid{grid-area:gh}.gh-space{grid-area:sh}
.t-sag{grid-area:a}.t-clr{grid-area:b}.t-tx{grid-area:c}.t-exp{grid-area:d}
.group-head{display:flex;align-items:center;gap:1rem;min-height:1.25rem;margin-bottom:1.1rem}
.gh-space{margin-top:1rem}
.tile{margin-bottom:1.25rem}
.group-head h2{margin:0;font-weight:500;letter-spacing:.24em;color:var(--fg);white-space:nowrap}
.group-head .rule{flex:1;height:1px;background:var(--border);min-width:1.5rem}
.group-head .count{letter-spacing:.18em;color:var(--subtle)}

/* Vertical cards: image on top, text below; all cards share one height */
.tile{position:relative;min-width:0;display:flex;flex-direction:column;padding:.75rem;border-radius:14px;background:var(--surface);box-shadow:var(--shadow-border);transition:box-shadow .3s var(--ease-out),background-color .3s var(--ease-out)}
.tile:hover{box-shadow:0 0 0 1px #ffffff33;background:#151518}
.tile .media{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:9px;background:var(--surface-2);box-shadow:0 0 0 1px #ffffff10}
.tile .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .5s var(--ease-out)}
.tile:hover .media img{transform:scale(1.06)}
.tile .body{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:1rem .5rem .45rem}
.badge{display:inline-block;letter-spacing:.18em;font-size:.6rem;line-height:1;padding:.3rem .45rem;border-radius:5px;background:#070708;color:var(--steel);border:1px solid var(--border)}
.tile h3{margin:.6rem 0 0;font-family:var(--font-display);font-weight:500;font-size:1.75rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.05}
.tile .sub{margin:.4rem 0 0;font-size:.66rem;letter-spacing:.14em;color:var(--muted);line-height:1.5}
.tile .sub span{white-space:nowrap}
.tile .desc{margin:.55rem 0 0;padding-right:1.75rem;max-width:36rem;color:var(--steel);font-size:.95rem;line-height:1.5;text-wrap:pretty}
.tile .arrow{position:absolute;right:1.1rem;bottom:1.1rem;width:1.1rem;height:1.1rem;color:var(--subtle);transition:color .3s var(--ease-out),transform .3s var(--ease-out)}
.tile:hover .arrow{color:var(--fg);transform:translate(2px,-2px)}
.more{margin:2.25rem 0 0;letter-spacing:.24em;color:var(--subtle);font-size:.66rem;text-align:center}

@media (min-width:768px){.site-header,.site-footer{padding-left:2.5rem;padding-right:2.5rem}main{padding-left:2.5rem;padding-right:2.5rem}h1{font-size:5.5rem}.lede{font-size:1.125rem}
.columns{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"gh gh" "a b" ". sh" "c d";grid-template-rows:auto 1fr auto 1fr}
.gh-space{margin-top:.6rem}}
@media (min-width:1360px){.columns{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"gh gh gh sh" "a b c d";grid-template-rows:auto 1fr}
.gh-space{margin-top:0}
.tile h3{font-size:1.45rem}.tile .desc{font-size:.9rem}}
@media (min-width:768px) and (max-width:1023px){.tile h3{font-size:1.45rem}.tile .desc{font-size:.9rem}}
@media (min-width:1024px) and (max-width:1359px){.tile h3{font-size:1.6rem}}
@media (max-width:560px){.tile{padding:.6rem}.tile .body{padding:.85rem .35rem .35rem}.tile h3{font-size:1.4rem}.tile .desc{font-size:.9rem}.group-head h2{white-space:normal;letter-spacing:.2em}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* tools hub: simple flowing grid (no fixed engineering areas) */
.columns.tools-cols{grid-template-areas:none;grid-template-rows:auto}
.tools-cols .gh-tools{grid-column:1/-1}