/* Hub page and 404. Loaded after brand.css.
   Layout: hero, then the tool list (newest tool gets the wide featured card), then the newsletter band. */

/* Hero */
.hero{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding:28px 0 52px}
.hero h1{font-size:clamp(54px,11.5vw,128px);line-height:.9;letter-spacing:.005em}
.hero h1 .line{display:block;text-shadow:0 6px 0 rgba(0,0,0,.4)}
.hero h1 .blocks{display:flex;flex-wrap:wrap;gap:.07em .1em;margin-top:.08em}
.hero h1 .block{
  display:inline-block;background:var(--gold);color:var(--bg);padding:.03em .11em 0;
  clip-path:polygon(0 2%,100% 0,99.2% 100%,.8% 97%);
}
.hero h1 .block + .block{clip-path:polygon(.6% 0,100% 3%,100% 98%,0 100%)}
.hero-lede{max-width:58ch;margin:0;font-size:20px;line-height:1.45;color:var(--text)}
.hero-facts{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;margin:0;padding:0;font-size:14px;font-weight:600;color:var(--text-2)}
.hero-facts li{display:flex;align-items:center;gap:8px}
.hero-facts li::before{content:"";width:8px;height:8px;background:var(--gold);flex:0 0 auto}

/* Tool list */
.tools-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:2px solid var(--gold)}
.tools-head h2{font-size:clamp(34px,6vw,46px);text-shadow:0 4px 0 rgba(0,0,0,.4)}
.count{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.filters{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:22px}

.tool-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  transition:border-color .15s ease, transform .15s ease;
}
.tool-card:hover,.tool-card:focus-within{border-color:var(--gold)}
.tool-card:hover{transform:translateY(-2px)}

/* The plate: the tool's short name stacked in gold blocks, like the logo.
   --n is the letter count of each line, so short words set larger. */
.tool-plate{
  container-type:inline-size;background:var(--bg-deep);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;padding:26px;
  aspect-ratio:4 / 3;
}
.plate-line{
  font-family:var(--font-head);font-weight:800;text-transform:uppercase;line-height:.84;letter-spacing:.01em;white-space:nowrap;
  font-size:min(calc(62cqw / (var(--n) * .5)), 21cqw);
  color:var(--bg-deep);background:var(--gold);padding:.07em .1em .01em;
  clip-path:polygon(0 2%,100% 0,99% 100%,1% 97%);
}
.plate-line:nth-child(2){margin-left:3%;clip-path:polygon(1% 0,100% 3%,100% 98%,0 100%)}
.plate-line:nth-child(3){clip-path:polygon(0 0,99% 2%,100% 100%,1.5% 98%)}

.tool-body{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:22px 24px 24px;flex:1 1 auto}
.tool-body h3{font-size:32px;line-height:1}
.tool-body h3 a{color:var(--text);text-decoration:none}
.tool-body h3 a::after{content:"";position:absolute;inset:0;border-radius:22px}
.tool-body h3 a:focus-visible{outline:none}
.tool-card:has(h3 a:focus-visible){outline:3px solid var(--gold);outline-offset:2px}
.tool-summary{margin:0;color:var(--text-2);max-width:60ch}
.tool-facts{display:flex;flex-wrap:wrap;gap:4px 16px;list-style:none;margin:0;padding:0;font-size:13px;font-weight:600;color:var(--muted)}
.tool-facts li{display:flex;align-items:center;gap:7px}
.tool-facts li::before{content:"";width:6px;height:6px;background:var(--gold);flex:0 0 auto}
.tool-body .btn{margin-top:auto}
.tool-card:hover .btn{background:var(--gold-dark)}

.tool-card.featured{grid-column:1 / -1;flex-direction:row}
.tool-card.featured .tool-plate{flex:0 0 40%;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--line);padding:36px}
.tool-card.featured .plate-line{font-size:min(calc(80cqw / (var(--n) * .5)), 27cqw)}
.tool-card.featured .tool-body{padding:34px 36px;gap:14px;justify-content:center}
.tool-card.featured .tool-body h3{font-size:clamp(36px,4.6vw,52px);text-shadow:0 4px 0 rgba(0,0,0,.4)}
.tool-card.featured .tool-summary{font-size:17px}
.tool-card.featured .tool-body .btn{margin-top:6px}

/* Newsletter band */
.band{
  display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between;
  margin-top:44px;padding:28px 30px;border:1.5px dashed var(--line-strong);border-radius:22px;
}
.band h2{font-size:34px}
.band p{margin:8px 0 0;color:var(--text-2);max-width:52ch}

/* 404 */
.lost{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:56px 0 40px}
.lost h1{font-size:clamp(54px,11.5vw,128px);line-height:.9}
.lost p{margin:0;font-size:19px;color:var(--text-2);max-width:52ch}

@media (max-width:760px){
  .tool-card.featured{flex-direction:column}
  .tool-card.featured .tool-plate{flex:0 0 auto;border-right:0;border-bottom:1px solid var(--line);padding:26px}
  .tool-card.featured .tool-body{padding:24px}
  .tool-card.featured .plate-line{font-size:min(calc(62cqw / (var(--n) * .5)), 21cqw)}
}
@media (max-width:640px){
  .hero{padding:12px 0 40px;gap:18px}
  .hero-lede{font-size:18px}
  .tool-grid{grid-template-columns:1fr}
  .band{padding:22px}
}
@media (prefers-reduced-motion: reduce){ .tool-card{transition:none} .tool-card:hover{transform:none} }