/* HejToj Media – hejtoj.com (27 Oct 2026). Static site; type and colours as on Hand & Digit.
   The sides are painted light stone, the content sits in a white column. */
:root{
  --ink:#1e1e1e; --grey:#4a4a4a; --muted:#6b645a;
  --accent:#994033; --brass:#b8933a; --brass-soft:#e2d2a8;
  --paper:#faf6ec; --parch:#f2ead6; --stone:#e8e3da; --white:#ffffff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--stone);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.55}
a{color:var(--accent)}
img,video{max-width:100%;display:block}
.page{max-width:1040px;margin:0 auto;background:var(--white);min-height:100vh;display:flex;flex-direction:column}
.wrap{padding:0 44px}
main{flex:1}

/* top bar */
.top{border-bottom:1.5px solid var(--brass)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;height:68px}
.brand img{height:40px;width:auto}
.top nav a{color:var(--ink);text-decoration:none;font-size:14px;font-weight:600;margin-left:22px}
.top nav a:hover{color:var(--accent)}

/* sections */
section{padding:56px 0}
section + section{border-top:1px solid var(--brass-soft)}
.kicker{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
h1{font-size:46px;line-height:1.08;letter-spacing:-.02em;font-weight:800}
h2{font-size:28px;line-height:1.2;letter-spacing:-.01em;font-weight:750;margin-bottom:8px}
h3{font-size:19px;line-height:1.3;font-weight:700}
.lead{font-size:20px;color:var(--grey);margin-top:16px}
.intro{color:var(--muted);margin-bottom:26px}

/* hero */
.hero{display:grid;grid-template-columns:1fr 250px;gap:48px;align-items:center;padding:64px 0 60px}
.hero .logo{background:var(--ink);padding:34px 30px}   /* parchment + brass logo on charcoal (28 Oct) */
.hero .logo img{width:100%;height:auto}

/* projects */
.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.project{display:flex;flex-direction:column;border:1px solid var(--brass-soft);background:var(--white)}
.project .media{aspect-ratio:4/3;background:var(--stone);display:flex;align-items:center;justify-content:center;overflow:hidden}
.project .media.dark{background:var(--ink)}
.project .media video{height:84%;width:auto;background:#fff}
.project .media img{width:72%;height:auto}
.project .media img.shot{width:100%;height:100%;object-fit:cover}   /* real screenshot fills the frame (28 Oct) */
.project .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.project p{color:var(--grey);font-size:15px;flex:1}
.project a.go{font-weight:650;text-decoration:none;color:var(--ink);border-bottom:1.5px solid var(--accent);align-self:flex-start;padding-bottom:1px}
.project a.go:hover{color:var(--accent)}
.project.soon{border-style:dashed;border-color:var(--brass)}
.project.soon .media{background:var(--white);color:var(--muted);font-size:15px}
.project.soon h3{color:var(--muted)}

/* press & contact */
.contact p{color:var(--grey);margin-bottom:10px}
.contact > p{max-width:640px}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.btn{display:inline-block;padding:13px 24px;font-weight:650;font-size:15px;text-decoration:none;border:1.5px solid var(--ink)}
.btn.primary{background:var(--ink);color:#fff}
.btn.secondary{background:#fff;color:var(--ink)}
.btn:hover{opacity:.88}
.contact .addr{margin-top:14px;font-size:14px;color:var(--muted)}

/* press page */
.tool{border-top:2px solid var(--brass);padding-top:18px;margin-top:30px}
.tool h3{margin-bottom:6px}
.tool .label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 0 4px}
.tool p{color:var(--grey);max-width:760px}
.dl{list-style:none;margin-top:10px;display:grid;gap:8px}
.dl li{color:var(--grey)}
.dl a{font-weight:650}

/* footer */
footer{border-top:1.5px solid var(--brass);padding:22px 0 34px;font-size:13px;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer a{color:var(--muted);margin-left:18px}
footer a:first-child{margin-left:0}

/* legal pages */
.legal-page{padding:40px 0 56px}
.legal-page .wrap{max-width:800px}
.legal-page h1{font-size:32px;margin-bottom:4px}
.legal-page h2{font-size:22px;margin:36px 0 10px}
.legal-page h3{font-size:16px;margin:24px 0 6px}
.legal-page p,.legal-page li{color:var(--grey);margin-bottom:10px}
.legal-page ul{padding-left:22px}
.legal-lang{font-size:14px}

@media (max-width:860px){
  .projects{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  section{padding:40px 0}
  h1{font-size:34px}
  h2{font-size:24px}
  .lead{font-size:17px}
  .hero{grid-template-columns:1fr;gap:28px;padding:40px 0 40px}
  .hero .logo{order:-1;width:170px;padding:22px 20px}
  .projects{grid-template-columns:1fr}
  .project.soon .media{aspect-ratio:auto;padding:22px 0 0;justify-content:flex-start;padding-left:20px}
  .top nav a{margin-left:14px}
}