/* Styles lane — design directions derived from the real IDX samples.
   Shares the dark editorial language of the samples hub. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#101010;color:#f4efe8;font-family:Inter,system-ui,sans-serif}
a{color:inherit}

header.hub{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:22px;padding:16px clamp(14px,3vw,28px);
  background:rgba(16,16,16,.78);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.12)}
header.hub a{text-decoration:none;font-weight:600;font-size:.92rem;color:#cdd2c8}
header.hub a.brand{font-weight:900;color:#f4efe8;margin-right:auto;font-size:1rem}
header.hub a:hover{color:#c8f55b}
header.hub a.active{color:#f4efe8}
header.hub a.cta{background:#c8f55b;color:#101010;font-weight:800;padding:8px 14px;border-radius:2px}
header.hub a.cta:hover{background:#d7ff7a}

.hero{padding:clamp(40px,7vw,86px) clamp(14px,3vw,28px) clamp(20px,3vw,32px)}
.hero .eyebrow{color:#c8f55b;text-transform:uppercase;font-weight:900;font-size:.78rem;letter-spacing:.14em;margin:0 0 14px}
.hero h1{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(3rem,7vw,7rem);line-height:.84;margin:0;max-width:1100px}
.hero .lede{max-width:62ch;color:#bdc2b8;font-size:clamp(1rem,1.4vw,1.18rem);margin:22px 0 0}

.dir-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:6px clamp(14px,3vw,28px) 14px}
.dir-card{background:#191a17;border:1px solid rgba(255,255,255,.12);border-radius:4px;padding:20px;display:flex;flex-direction:column}
.dir-swatches{display:flex;height:54px;border-radius:3px;overflow:hidden;margin-bottom:16px;border:1px solid rgba(255,255,255,.1)}
.swatch{flex:1}
.dir-card h2{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(1.7rem,2.4vw,2.4rem);line-height:1;margin:0 0 8px}
.dir-tag{color:#bdc2b8;font-size:.92rem;line-height:1.45;margin:0 0 16px;flex:1}
.dir-spec{display:flex;gap:22px;margin:0 0 16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}
.dir-spec dt{font-size:.66rem;font-weight:900;text-transform:uppercase;letter-spacing:.12em;color:#8b9182;margin:0 0 3px}
.dir-spec dd{margin:0;font-size:.84rem;color:#e7eadf;font-weight:600}
.dir-links{display:flex;flex-wrap:wrap;gap:8px}
.dir-sample{text-decoration:none;font-size:.82rem;font-weight:700;color:#101010;background:#c8f55b;border-radius:999px;padding:7px 14px;transition:background .15s}
.dir-sample:hover{background:#d7ff7a;color:#101010}

footer.hub{padding:30px 28px;color:#8b9182;border-top:1px solid rgba(255,255,255,.1);font-size:.9rem}
footer.hub a{color:#c8f55b}

@media(max-width:940px){.dir-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.dir-grid{grid-template-columns:1fr}header.hub{gap:14px;flex-wrap:wrap}header.hub .hide-sm{display:none}}