/* ZOFL STUDIOS — shared stylesheet for zofl.com
   Monochrome by design: black, white, and greys only. Root-relative paths
   everywhere (/style.css, /favicon.svg) because pages live in subdirectories. */

:root{
  --bg:#000;
  --panel:#0a0a0a;
  --line:#242424;
  --line-soft:#1a1a1a;
  --fg:#f2f2f2;
  --fg-dim:#8b8b8b;
  --fg-mid:#c9c9c9;
  --max:64rem;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex; flex-direction:column; min-height:100dvh;
}
img,svg{ max-width:100%; height:auto; }

/* ---------- header + nav ---------- */
.site-header{
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
  background:rgba(0,0,0,.92);
  backdrop-filter:saturate(140%) blur(8px);
}
.header-inner{
  max-width:var(--max); margin:0 auto; padding:0 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:68px; flex-wrap:wrap;
}
.brand{
  font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  font-size:1rem; color:#fff; text-decoration:none; white-space:nowrap;
  padding:.6rem 0;
}
.brand span{ color:var(--fg-dim); }
.nav{ display:flex; gap:1.6rem; flex-wrap:wrap; padding-bottom:.2rem; }
.nav a{
  color:var(--fg-dim); text-decoration:none; font-size:.85rem;
  letter-spacing:.14em; text-transform:uppercase; padding:.5rem 0;
  border-bottom:1px solid transparent; transition:color .18s, border-color .18s;
}
.nav a:hover, .nav a:focus-visible{ color:#fff; border-color:#fff; outline:none; }
.nav a[aria-current="page"]{ color:#fff; border-color:var(--fg-dim); }

/* ---------- layout ---------- */
main{ flex:1 0 auto; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 1.5rem; }
section{ padding:clamp(2.6rem,6vw,4.5rem) 0; }
section + section{ border-top:1px solid var(--line-soft); }

h1,h2,h3{ line-height:1.25; margin:0 0 .9rem 0; color:#fff; }
h1{ font-size:clamp(1.9rem,5vw,3rem); letter-spacing:-.01em; font-weight:700; }
h2{ font-size:clamp(1.3rem,3vw,1.8rem); font-weight:600; }
h3{ font-size:1.05rem; font-weight:600; letter-spacing:.02em; }
p{ margin:0 0 1.15rem 0; color:var(--fg-mid); max-width:60ch; }
.lead{ font-size:clamp(1.05rem,2.2vw,1.28rem); color:var(--fg); max-width:56ch; }
.eyebrow{
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--fg-dim); margin:0 0 1rem 0;
}
a.inline{ color:#fff; text-decoration:none; border-bottom:1px solid var(--line); }
a.inline:hover{ border-color:#fff; }

/* ---------- hero ---------- */
.hero{ padding:clamp(3.4rem,9vw,6.5rem) 0 clamp(2.6rem,6vw,4rem) 0; }
.hero h1{ max-width:20ch; }

/* ---------- cards ---------- */
.grid{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
.card{
  background:var(--panel); border:1px solid var(--line);
  padding:1.5rem 1.4rem; display:flex; flex-direction:column;
}
.card h3{ margin-bottom:.5rem; }
.card p{ font-size:.95rem; margin-bottom:1rem; }
.card .more{ margin-top:auto; }

/* project cards */
.project{
  display:grid; grid-template-columns:112px 1fr; gap:1.5rem; align-items:start;
  background:var(--panel); border:1px solid var(--line); padding:1.6rem;
}
.project .art{
  width:112px; height:112px; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; background:#000;
}
.project .art .word{
  font-weight:800; letter-spacing:.16em; font-size:.72rem; color:#fff;
  text-align:center; line-height:1.5; padding:0 .3rem;
}
@media (max-width:560px){
  .project{ grid-template-columns:1fr; }
  .project .art{ width:96px; height:96px; }
}

/* ---------- bits ---------- */
.tag{
  display:inline-block; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  border:1px solid var(--line); color:var(--fg-dim); padding:.28rem .62rem; margin-left:.55rem;
  vertical-align:middle; white-space:nowrap;
}
.tag.live{ color:#fff; border-color:#fff; }
.btn{
  display:inline-block; background:#fff; color:#000; text-decoration:none;
  font-weight:700; font-size:.82rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.85rem 1.7rem; border:1px solid #fff; transition:background .18s,color .18s;
}
.btn:hover{ background:#000; color:#fff; }
.btn.ghost{ background:transparent; color:#fff; border-color:var(--line); }
.btn.ghost:hover{ border-color:#fff; background:transparent; }
.btn-row{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.4rem; }

dl.facts{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.55rem 1.4rem; }
dl.facts dt{ color:var(--fg-dim); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; }
dl.facts dd{ margin:0; color:var(--fg-mid); }
@media (max-width:520px){ dl.facts{ grid-template-columns:1fr; gap:.1rem 0; } dl.facts dd{ margin-bottom:.7rem; } }

ul.plain{ margin:0 0 1.15rem 0; padding-left:1.15rem; color:var(--fg-mid); max-width:60ch; }
ul.plain li{ margin-bottom:.5rem; }

/* ---------- footer ---------- */
.site-footer{
  flex-shrink:0; border-top:1px solid var(--line);
  padding:2.4rem 0 2rem 0; margin-top:1rem;
}
.footer-inner{
  max-width:var(--max); margin:0 auto; padding:0 1.5rem;
  display:grid; gap:1.8rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.footer-inner h4{
  margin:0 0 .7rem 0; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg-dim); font-weight:600;
}
.footer-inner a{ color:var(--fg-mid); text-decoration:none; display:block; padding:.16rem 0; font-size:.92rem; }
.footer-inner a:hover{ color:#fff; }
.footer-inner address{ font-style:normal; color:var(--fg-dim); font-size:.9rem; line-height:1.8; }
.footer-bottom{
  max-width:var(--max); margin:2rem auto 0 auto; padding:1.3rem 1.5rem 0 1.5rem;
  border-top:1px solid var(--line-soft);
  color:var(--fg-dim); font-size:.82rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.footer-bottom a{ color:var(--fg-dim); text-decoration:none; }
.footer-bottom a:hover{ color:#fff; }