/* =========================
   Minimal, clean stylesheet
   ========================= */

/* Vars */
:root{
  --bg:#000; --accent:#ffd400; --muted:#a6abb5; --border:#111; --focus:#ffd400;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui, Arial, sans-serif;
  background:var(--bg); color:#fff; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; height:auto; display:block}
a{color:#fff; text-decoration:none}
a:hover{color:var(--muted)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px;
}

/* Utilities */
.center{text-align:center}
.narrow{max-width:800px; margin:0 auto}
.muted{color:var(--muted)}

/* Dividers */
.hero-divider,.section-divider{
  border:0; border-top:1px solid #fff; margin:30px auto; max-width:400px;
}

/* Layout */
.container{max-width:1100px; margin:0 auto; padding:0 16px}
.section{padding:0 0 40px}

/* ===== HEADER (mast) — matches layout.php ===== */
.mast{padding:12px 20px; border-bottom:1px solid var(--border); background:var(--bg)}
.mast-row{
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  gap:22px; min-height:72px;
}
.mast-brand img{height:50px; width:auto; display:block}
.mast-menu{display:flex; align-items:center; gap:22px; white-space:nowrap}
.mast-menu a:hover{text-decoration:underline}
.mast-menu a.active, .mast-menu a[aria-current="page"]{color:var(--accent); font-weight:700}
@media (max-width:480px){
  .mast-brand img{height:44px}
  .mast-menu{gap:14px}
}

/* Hero */
.hero{text-align:center; padding:0 0 10px}
.hero h1{margin:0 0 16px; font-size:clamp(32px,5vw,52px); color:var(--accent)}
.hero .tagline{font-size:22px; font-weight:600; color:var(--muted); margin-bottom:20px}

/* Headings */
.section h1{color:var(--accent); text-align:center; margin-bottom:28px; font-size:clamp(28px,4vw,42px)}
/* Global H2 smaller than H1, bigger than old H2, yellow */
h2,.section h2{color:var(--accent); font-size:clamp(24px,3.6vw,34px); line-height:1.2; margin:0 0 16px}
/* Page titles */
.page-title{color:var(--accent); text-align:center; margin:0 0 20px; line-height:1.2; font-size:clamp(24px,3.6vw,34px)}

/* Buttons */
.btn{
  display:inline-block; background:var(--accent); color:#000; font-weight:700;
  border-radius:999px; padding:1px 10px; font-size:15px; margin:4px;
  transition:filter .2s, transform .02s; border:0; cursor:pointer; text-align:center;
}
.btn:hover{filter:brightness(.9)} .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.6; cursor:not-allowed}

/* Cards */
.card{background:#0b0c10; border:1px solid var(--border); border-radius:14px; margin-top:20px; overflow:hidden}
.card .pad{padding:16px}
.card h3{margin:0 0 6px; color:var(--accent)}
.card p{margin:0; color:var(--muted)}
.card-featured{background:#000; border:none}

/* Contact grid */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:24px}
@media (max-width:800px){.grid2{grid-template-columns:1fr}}
form input,form textarea{
  width:100%; padding:12px 14px; margin:8px 0; background:#0b0c10; border:1px solid var(--border); color:#fff; border-radius:8px;
}
form textarea{min-height:140px; resize:vertical} form button{margin-top:8px}
form input:focus-visible,form textarea:focus-visible{border-color:var(--accent); outline:2px solid var(--accent); outline-offset:2px}

/* Footer */
.footer{border-top:1px solid var(--border); text-align:center; padding:18px 0; font-size:14px; color:var(--muted)}
.footer-inline{display:flex; justify-content:center; align-items:center; gap:16px; flex-wrap:wrap}
.footer-link{display:inline-flex; align-items:center; gap:4px; color:var(--muted); font-size:14px; transition:color .2s}
.footer-link:hover{color:#fff}
.footer-icon{width:14px; height:14px}

/* Helpers */
.visually-hidden{position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}

/* Spacing tweaks */
.hero p.muted + p.muted{margin-top:1rem}
.card p.muted + p.muted{margin-top:.9rem}
.hero-divider + .muted{margin-top:1rem}

/* Project detail: section titles + media */
.prose h3{margin:22px 0 10px; color:var(--accent)}
.prose ul{margin:8px 0 16px; padding-left:1.2rem}
.prose li{color:var(--muted)}

/* Video same width as text, fixed 16:9, rounded */
.media-shell{border-radius:14px; overflow:hidden; background:#000; border:1px solid var(--border); margin:16px 0 20px}
.media-aspect{position:relative; width:100%; aspect-ratio:16/9}
.media-aspect video,.media-aspect img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block}