/* ==========================================================================
   Altadena Media — homepage
   Scoped to the homepage only. The blog still uses styles.css +
   additional-styles.css, so neither of those files is touched here.
   ========================================================================== */

:root{
  --cream:#efeae0;
  --black:#100f0d;
  --red:#e0281a;
  --blue:#1c3fd6;
  --line:#100f0d;
  --grey:#6b665c;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--cream);
  color:var(--black);
  font:400 17px/1.55 "Barlow",-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit}

h1,h2,h3{
  margin:0;
  font-family:"Anton",Impact,sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:-.005em;
  line-height:.9;
}

.mono{
  font-family:"Space Mono",ui-monospace,monospace;
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.wrap{max-width:1340px;margin:0 auto;padding-left:36px;padding-right:36px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--black);color:var(--cream);padding:10px 16px}

/* --- NAV ------------------------------------------------------------- */
nav{
  border-bottom:3px solid var(--line);
  background:var(--cream);
  position:sticky;top:0;z-index:60;
}
.nav-in{display:flex;justify-content:space-between;align-items:center;padding-top:14px;padding-bottom:14px}
.brand{
  font-family:"Anton",Impact,sans-serif;font-size:22px;text-transform:uppercase;
  text-decoration:none;letter-spacing:-.01em;
}
.brand span{color:var(--red)}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{
  text-decoration:none;font-family:"Space Mono",ui-monospace,monospace;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;transition:.15s;
}
.nav-links a:not(.btn):hover{color:var(--red)}

.nav-toggle{
  display:none;background:none;border:3px solid var(--line);
  width:44px;height:38px;cursor:pointer;padding:0;
  align-items:center;justify-content:center;flex-direction:column;gap:4px;
}
.nav-toggle span{display:block;width:20px;height:3px;background:var(--black)}

.btn{
  display:inline-block;background:var(--red);color:var(--cream);text-decoration:none;
  padding:13px 24px;font-family:"Space Mono",ui-monospace,monospace;font-size:12px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border:3px solid var(--line);box-shadow:5px 5px 0 var(--line);transition:.14s;
  cursor:pointer;
}
.btn:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--line)}
.btn-o{background:var(--cream);color:var(--black)}

/* --- HERO ------------------------------------------------------------ */
header{border-bottom:3px solid var(--line);padding:76px 0 0}
h1{font-size:clamp(52px,12.5vw,168px);letter-spacing:-.02em}
h1 .red{color:var(--red)}
h1 .out{color:transparent;-webkit-text-stroke:2.5px var(--black)}
.hero-b{
  display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:end;
  padding:44px 0 52px;
}
.hero-b p{margin:0;font-size:19.5px;max-width:42ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}

/* --- PILLARS --------------------------------------------------------- */
.chain{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:3px solid var(--line)}
.node{border-right:3px solid var(--line);padding:38px 28px 42px;transition:.2s}
.node:last-child{border-right:0}
.node:hover{background:var(--black);color:var(--cream)}
.rule{display:block;width:52px;height:8px;background:var(--red);margin-bottom:22px;transition:.3s}
.node:hover .rule{width:100%}
.node h3{font-size:32px;margin-bottom:12px}
.node p{margin:0;font-size:15px}
.node:hover p{color:rgba(239,234,224,.75)}

/* --- SECTIONS -------------------------------------------------------- */
section{border-bottom:3px solid var(--line);padding:88px 0}
.shead{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:end;margin-bottom:56px}
.shead h2{font-size:clamp(38px,6.4vw,88px);letter-spacing:-.02em}
.shead h2 em{font-style:normal;color:var(--red)}

/* --- WORK ------------------------------------------------------------ */
.case{
  display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;
  border-top:3px solid var(--line);padding:48px 0;transition:.2s;
}
.case:hover{padding-left:16px;padding-right:16px;background:rgba(16,15,13,.035)}
.c-txt h3{font-size:clamp(28px,3.4vw,46px);margin-bottom:16px;letter-spacing:-.015em}
.c-txt p{margin:0 0 18px;font-size:15.5px;color:var(--grey);max-width:42ch}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{
  font-family:"Space Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;border:2px solid var(--line);padding:5px 10px;
}
.c-img{
  border:3px solid var(--line);aspect-ratio:16/10;overflow:hidden;background:#ddd7ca;
  box-shadow:8px 8px 0 var(--line);
}
.c-img img{width:100%;height:100%;object-fit:cover;display:block;transition:.4s}
.case:hover .c-img img{transform:scale(1.05)}

/* --- SERVICES -------------------------------------------------------- */
.svc{
  display:grid;grid-template-columns:1fr 1fr;
  border-top:3px solid var(--line);border-left:3px solid var(--line);
}
.scell{
  border-right:3px solid var(--line);border-bottom:3px solid var(--line);
  padding:40px 34px 44px;transition:.2s;
}
.scell:hover{background:var(--blue);color:var(--cream)}
.scell:hover .mono{color:rgba(239,234,224,.7)}
.scell .mono{color:var(--grey);display:block;margin-bottom:16px}
.scell h3{font-size:34px;margin-bottom:12px}
.scell p{margin:0;font-size:15.5px}

/* --- CTA + FOOTER ---------------------------------------------------- */
.cta{
  background:var(--black);color:var(--cream);border-bottom:0;
  text-align:center;padding:120px 0;
}
.cta h2{font-size:clamp(44px,10vw,140px);letter-spacing:-.025em;margin-bottom:30px}
.cta h2 .red{color:var(--red)}
.cta p{max-width:44ch;margin:0 auto 40px;color:rgba(239,234,224,.66);font-size:17.5px}
.cta .btn{background:var(--red);border-color:var(--cream);box-shadow:5px 5px 0 var(--cream)}
.cta .btn:hover{box-shadow:2px 2px 0 var(--cream)}

footer{background:var(--black);color:rgba(239,234,224,.6);padding:0 0 46px}
.f-in{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid rgba(239,234,224,.18);padding-top:26px;
  font-family:"Space Mono",ui-monospace,monospace;font-size:12px;
}
.f-in a{text-decoration:none}
.f-in a:hover{color:var(--red)}

/* --- RESPONSIVE ------------------------------------------------------ */
@media(max-width:960px){
  .wrap{padding-left:18px;padding-right:18px}
  .hero-b{grid-template-columns:1fr;gap:26px}
  .hero-cta{justify-content:flex-start}
  .chain{grid-template-columns:1fr 1fr}
  .node{border-bottom:3px solid var(--line)}
  .node:nth-child(2n){border-right:0}
  .shead{grid-template-columns:1fr;gap:22px}
  .case{grid-template-columns:1fr;gap:22px}
  .svc{grid-template-columns:1fr}
  h1{font-size:clamp(42px,13vw,90px)}
  header{padding-top:44px}
  section{padding:56px 0}

  .nav-toggle{display:flex}
  .nav-links{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--cream);border-bottom:3px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 18px 20px;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 0;border-bottom:1px solid rgba(16,15,13,.12)}
  .nav-links a.btn{
    margin-top:16px;text-align:center;border-bottom:3px solid var(--line);
  }
}

@media(max-width:560px){
  .chain{grid-template-columns:1fr}
  .node{border-right:0}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}