/*
Theme Name: Mike Attinger
Theme URI: https://mikeattinger.nl/
Author: Mike Attinger
Description: A light, modern one-page personal portfolio theme for Mike Attinger with cinematic accents.
Version: 1.3.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: mike-attinger
*/

:root {
  --bg: #fbfcfa;
  --surface: #ffffff;
  --surface-2: #eef7f5;
  --surface-3: #e2f1ee;
  --light-text: #17201f;
  --dark-surface: #111918;
  --text: #17201f;
  --muted: #687371;
  --line: rgba(23,32,31,.12);
  --accent: #159a8a;
  --accent-dark: #08776b;
  --accent-soft: #dff0ed;
  --max: 1240px;
  --radius: 4px;
  --accent-glow: rgba(21,154,138,.14);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65; font-size: 16px;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
.container { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }

.site-header {
  position: fixed; z-index: 100; top: 0; left: 0; width: 100%;
  background: rgba(11,17,16,.18); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08); transition: .3s ease;
}
.site-header.scrolled {
  background: rgba(255,255,255,.92); border-color: var(--line);
  box-shadow: 0 8px 30px rgba(15,40,36,.06);
}
.header-inner { min-height: 76px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.logo { font-weight: 700; letter-spacing: -.03em; font-size: 19px; color:#fff; transition:.25s ease; }
.site-header.scrolled .logo { color:var(--light-text); }
.nav { display:flex; gap:25px; align-items:center; font-size:13px; color:rgba(255,255,255,.76); transition:.25s ease; }
.site-header.scrolled .nav { color:#687371; }
.nav a { transition:.2s ease; }
.nav a:hover { color:var(--accent); }

.hero {
  min-height: 100svh; display:grid; align-items:end; position:relative; overflow:hidden;
  background: #101817;
}
.hero-media { position:absolute; inset:0; }
.hero-media img { width:100%; height:100%; object-fit:cover; object-position:center; opacity:.68; }
.hero-overlay {
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 78% 25%, rgba(21,154,138,.22), transparent 32%),
    linear-gradient(90deg, rgba(5,12,11,.86), rgba(5,12,11,.36) 62%, rgba(5,12,11,.52)),
    linear-gradient(0deg, rgba(5,12,11,.88), transparent 62%);
}
.hero::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:110px;
  background:linear-gradient(to bottom, transparent, var(--bg));
  pointer-events:none;
}
.hero-content { position:relative; z-index:2; padding: 160px 0 115px; max-width: 900px; }
.hero-content::before { content:""; display:block; width:72px; height:4px; background:#67cfc1; margin-bottom:26px; }
.eyebrow { text-transform:uppercase; letter-spacing:.18em; font-size:11px; color:var(--accent); margin-bottom:18px; font-weight:650; }
.hero .eyebrow { color:#7ce0d2; }
h1,h2,h3 { margin:0 0 20px; line-height:1.08; letter-spacing:-.04em; }
h1 { font-size: clamp(52px, 9vw, 120px); font-weight: 650; color:#fff; }
h2 { font-size: clamp(38px, 5vw, 68px); }
h3 { font-size: 25px; }
.hero p { color:#d9e0de; font-size: clamp(17px, 2vw, 21px); max-width:650px; margin: 0 0 30px; }
.button {
  display:inline-flex; align-items:center; gap:10px; border:1px solid var(--accent);
  padding:13px 19px; font-size:13px; transition:.2s ease; background:var(--accent);
  color:#fff; border-radius:2px; font-weight:600;
}
.button:hover { background:var(--accent-dark); border-color:var(--accent-dark); transform:translateY(-1px); }
.hero .button { background:transparent; border-color:rgba(124,224,210,.72); color:#fff; }
.hero .button:hover { background:#fff; color:#111918; border-color:#fff; }
.hero-scroll {
  position:absolute; right:48px; bottom:92px; z-index:3; color:rgba(255,255,255,.7);
  writing-mode:vertical-rl; text-transform:uppercase; letter-spacing:.18em; font-size:10px;
}
.hero-scroll::after { content:""; display:inline-block; width:1px; height:48px; margin-top:12px; background:#67cfc1; }

section { padding: 128px 0; position:relative; }
#about { background:#ffffff; }
#music { background:#fbfcfa; }
#photography { background:#ffffff; }
section + section { border-top:1px solid rgba(23,32,31,.075); }
section:not(.hero)::before { content:""; position:absolute; top:0; left:50%; width:min(calc(100% - 96px),var(--max)); height:1px; transform:translateX(-50%); background:linear-gradient(90deg, transparent, rgba(21,154,138,.22), transparent); }
.section-intro { max-width: 720px; margin-bottom:58px; }
.section-intro h2 { position:relative; }
.section-intro h2::after { content:""; display:block; width:42px; height:3px; background:var(--accent); margin-top:22px; }
.section-intro p, .about-copy p { color:var(--muted); font-size:18px; }
.about-grid { display:grid; grid-template-columns: 1fr 1.35fr; gap:80px; align-items:center; }
.about-image { aspect-ratio:4/5; background:var(--surface-3); overflow:hidden; position:relative; }
.about-image::after { content:""; position:absolute; inset:18px; border:1px solid rgba(21,154,138,.28); pointer-events:none; }
.about-image img { width:100%; height:100%; object-fit:cover; }
.about-copy { max-width:680px; }
.about-copy::before { content:""; display:block; width:55px; height:3px; background:var(--accent); margin-bottom:28px; }

.services { background:linear-gradient(180deg,#eef7f5 0%,#e7f3f0 100%); color:var(--light-text); }
.services .section-intro p, .services p { color:#5f6b68; }
.services .eyebrow, .services .service-number { color:var(--accent-dark); }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(23,32,31,.12); box-shadow:0 18px 50px rgba(15,50,45,.07); }
.service-card { background:rgba(255,255,255,.92); min-height:340px; padding:42px; display:flex; flex-direction:column; justify-content:space-between; transition:.25s ease; }
.service-card:hover { background:#fff; transform:translateY(-4px); box-shadow:0 18px 35px rgba(15,50,45,.10); }
.service-number { font-size:12px; letter-spacing:.15em; font-weight:700; }
.service-card p { color:var(--muted); }
.service-link { color:var(--accent-dark); font-size:13px; text-transform:uppercase; letter-spacing:.12em; font-weight:650; }
.service-link::after { content:""; display:block; width:32px; height:1px; background:var(--accent); margin-top:10px; transition:.25s ease; }
.service-card:hover .service-link::after { width:55px; }

#music { background:#fbfcfa; }
.music-grid, .video-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; }
.embed-wrap { background:#fff; padding:0; }
.spotify-frame { width:100%; height:352px; border:0; border-radius:12px; box-shadow:0 16px 45px rgba(15,50,45,.08); }

.video-section-dark { background:linear-gradient(135deg,#111918 0%,#172522 100%); color:#fff; }
.video-section-dark .section-intro p { color:#b9c5c2; }
.video-section-dark .eyebrow { color:#7ce0d2; }
.video-section-dark .button { background:transparent; border-color:#67cfc1; color:#fff; }
.video-section-dark .button:hover { background:#fff; color:#111918; }
.video-frame { position:relative; aspect-ratio:16/9; background:#0a0f0e; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.22); }
.video-frame iframe { width:100%; height:100%; border:0; }

#short-film { background:linear-gradient(180deg,#e7f3f0 0%,#f2f8f6 100%); }
#short-film .video-frame { box-shadow:0 20px 55px rgba(15,50,45,.14); }

#photography { background:#ffffff; }
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.gallery-item { aspect-ratio:4/3; overflow:hidden; background:var(--surface-3); cursor:zoom-in; border:0; padding:0; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:.5s ease; }
.gallery-item:hover img { transform:scale(1.035); }


.social-presence {
  background: #ffffff;
  color: var(--light-text);
  overflow: hidden;
}
.social-presence .section-intro { margin-bottom: 48px; }
.social-presence-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
}
.social-total {
  text-align: right;
  flex: 0 0 auto;
}
.social-total-number {
  display: block;
  color: var(--accent-dark);
  font-size: clamp(38px, 5vw, 62px);
  line-height: .95;
  letter-spacing: -.06em;
  font-weight: 700;
}
.social-total-label {
  display: block;
  margin-top: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 10px;
  font-weight: 700;
}
.social-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(23,32,31,.12);
  box-shadow: 0 18px 50px rgba(15,50,45,.07);
}
.social-stat {
  background: #f4f8f6;
  padding: 30px 34px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: .25s ease;
}
.social-stat:hover { background: #fff; transform: translateY(-3px); box-shadow: 0 16px 30px rgba(15,50,45,.08); }
.social-stat-platform {
  color: var(--accent-dark);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 10px;
  font-weight: 750;
}
.social-stat-number {
  display: block;
  font-size: clamp(28px, 4vw, 45px);
  line-height: 1;
  letter-spacing: -.045em;
  font-weight: 700;
  margin-top: 16px;
}
.social-stat-detail { color: var(--muted); font-size: 12px; margin-top: 7px; }
.social-stat a { color: inherit; }
.social-presence-note { margin-top: 22px; color: #7a8582; font-size: 11px; }

.socials { background:#f0f5f3; color:var(--light-text); }
.socials .section-intro p { color:#5f6b68; }
.social-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(23,32,31,.12); box-shadow:0 18px 50px rgba(15,50,45,.06); }
.social-card { background:var(--surface); padding:28px; min-height:130px; transition:.25s ease; }
.social-card:hover { background:#fff; transform:translateY(-2px); }
.social-card strong { color:var(--light-text); }
.social-card span { display:block; color:#687371; font-size:12px; margin-top:8px; }
.social-card:hover strong { color:var(--accent-dark); }

.contact { border-top:1px solid var(--line); background:linear-gradient(135deg,#dff1ed 0%,#edf7f5 55%,#f7fbfa 100%); color:var(--light-text); }
.contact .eyebrow { color:var(--accent-dark); }
.contact .contact-details { color:#5f6b68; }
.contact-details a:hover { color:var(--accent-dark); }
.contact-grid { display:grid; grid-template-columns: .8fr 1.2fr; gap:90px; }
.contact-form { display:grid; gap:14px; }
.contact-form input, .contact-form textarea {
  width:100%; border:1px solid rgba(23,32,31,.18); background:rgba(255,255,255,.65); color:var(--text);
  padding:15px 16px; font:inherit; border-radius:2px; outline:none;
}
.contact-form input:focus, .contact-form textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(21,154,138,.10); }
.contact-form textarea { min-height:170px; resize:vertical; }
.form-status { color:#5f6b68; font-size:14px; margin-top:5px; }
.site-footer { border-top:1px solid var(--line); padding:30px 0; color:#687371; font-size:12px; background:#f8faf9; }
.footer-inner { display:flex; justify-content:space-between; gap:25px; }
.lightbox { position:fixed; inset:0; z-index:1000; display:none; background:rgba(5,12,11,.94); padding:30px; align-items:center; justify-content:center; }
.lightbox.is-open { display:flex; }
.lightbox img { max-height:90vh; max-width:94vw; width:auto; object-fit:contain; }
.lightbox-close { position:absolute; top:18px; right:25px; font-size:34px; color:#fff; background:none; border:0; cursor:pointer; }

@media (max-width: 850px) {
  .nav { display:none; }
  .container { width:min(calc(100% - 30px), var(--max)); }
  section { padding:85px 0; }
  .about-grid, .music-grid, .video-grid, .contact-grid { grid-template-columns:1fr; gap:35px; }
  .service-grid { grid-template-columns:1fr; }
  .social-grid { grid-template-columns:1fr 1fr; }
  .social-presence-head { align-items:start; flex-direction:column; }
  .social-total { text-align:left; }
  .social-stat-grid { grid-template-columns:1fr 1fr; }
  .gallery { grid-template-columns:1fr 1fr; }
  .hero-content { padding-bottom:78px; }
  .hero-scroll { display:none; }
}
@media (max-width: 520px) {
  .gallery { grid-template-columns:1fr; }
  .social-grid { grid-template-columns:1fr; }
  .social-stat-grid { grid-template-columns:1fr; }
  h1 { font-size:54px; }
  .footer-inner { flex-direction:column; }
}