/* TobyGodden.com front door refresh
   Calm, dark, negative space, big type.
   Relative assets; safe for subfolder deploy.
*/

:root{
  --bg:#0b0b0e;
  --bg2:#07070a;
  --surface:#101014;
  --surface2:#0e0e12;
  --border:#1f1f26;
  --text:#f2f2f5;
  --muted:#a2a2ab;
  --muted2:#7c7c86;
  --max:1100px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background: radial-gradient(1200px 800px at 30% 0%, rgba(255,255,255,0.04), transparent 60%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--text);
  font-family:"DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
}

a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 22px;}
.narrow{max-width:740px;}

.mono{
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing:0.02em;
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
}

.kicker{
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing:0.18em;
  color:var(--muted2);
  font-size:12px;
  text-transform:uppercase;
}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(11,11,14,0.75);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
  gap:16px;
}
.brand{
  display:flex;
  align-items:baseline;
  gap:10px;
}
.brand-name{
  font-weight:500;
  letter-spacing:0.01em;
}

.nav{
  display:flex;
  gap:22px;
}
.nav a{
  color:var(--muted);
  font-size:14px;
}
.nav a:hover{color:var(--text);}

.social-mini{
  display:flex;
  gap:14px;
}
.social-mini a{
  color:var(--muted);
  font-size:16px;
}
.social-mini a:hover{color:var(--text);}

/* Hero */
.hero{
  position:relative;
  min-height:78vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.hero-media{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-slide{
  position:absolute;
  inset:-2%;
  background-size:cover;
  background-position:center;
  filter:saturate(1) contrast(1);
  opacity:0;
  transform:scale(1.02);
  transition: opacity 900ms ease, transform 1800ms ease;
}
.hero-slide.is-active{
  opacity:1;
  transform:scale(1.06);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.75));
}

.hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 1fr;
  gap:30px;
  padding:96px 0 44px;
}

.hero h1{
  font-size:clamp(42px, 6vw, 88px);
  line-height:1.02;
  font-weight:400;
  letter-spacing:-0.02em;
  margin-top:14px;
}
.lede{
  margin-top:22px;
  color:rgba(242,242,245,0.82);
  max-width:58ch;
  font-size:18px;
}

.hero-links{display:none;}



.build-stamp{
  margin-top:22px;
  color:rgba(162,162,171,0.7);
  font-size:12px;
  letter-spacing:0.02em;
}

.hero-bottom{
  position:relative;
  z-index:2;
  padding:14px 0 18px;
}
.hero-bottom-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}
.scroll-hint{
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color:rgba(162,162,171,0.75);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
}
.dots{
  display:flex;
  gap:10px;
}
.dot{
  width:34px;
  height:2px;
  background:rgba(242,242,245,0.25);
  border:0;
  cursor:pointer;
}
.dot.is-active{
  background:rgba(242,242,245,0.85);
}

/* Sections */
.section{padding:80px 0;}
.section-inner{padding-top:0;padding-bottom:0;}
.section-head{margin-bottom:26px;}
.section-head h2{
  font-size:28px;
  font-weight:500;
  letter-spacing:-0.01em;
}
.subhead{color:var(--muted);max-width:62ch;margin-top:8px;}

/* Portfolio grid */
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin-top:26px;
}
.tile{
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(16,16,20,0.52);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
  overflow:hidden;
}
.tile:hover{
  transform:translateY(-3px);
  border-color:rgba(242,242,245,0.24);
  background:rgba(16,16,20,0.70);
}
.tile-media{
  aspect-ratio: 16 / 10;
  overflow:hidden;
  background:#0a0a0d;
}
.tile-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.tile-body{padding:16px 16px 18px;}
.tile-body h3{font-weight:500;font-size:18px;margin-bottom:6px;}
.tile-body p{color:var(--muted);font-size:14px;}

.tile-kickstarter .tile-body p{color:rgba(242,242,245,0.78);}

/* Writing links */
.writing-links{
  margin-top:24px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.writing-link{
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(16,16,20,0.40);
  padding:16px 16px 14px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:baseline;
}
.writing-link:hover{
  border-color:rgba(242,242,245,0.24);
  background:rgba(16,16,20,0.60);
}
.writing-title{font-weight:500;}
.writing-meta{
  color:var(--muted2);
  font-size:13px;
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* Unikin section */
.unikin-card{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap:22px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(16,16,20,0.40);
  padding:18px;
}
.unikin-media{
  border:1px solid rgba(255,255,255,0.10);
  background:#0a0a0d;
}
.unikin-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.unikin-body h2{
  margin-top:10px;
  font-size:28px;
  font-weight:500;
  letter-spacing:-0.01em;
}
.unikin-body p{
  margin-top:12px;
  color:var(--muted);
  max-width:64ch;
}
.unikin-actions{
  margin-top:16px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

/* Contact */
.contact-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:18px;
}
.contact-card{
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(16,16,20,0.40);
  padding:18px;
}
.contact-email{
  display:inline-block;
  margin-top:10px;
  border-bottom:1px solid rgba(242,242,245,0.55);
  padding-bottom:2px;
}
.address{
  margin-top:12px;
  color:var(--muted);
  font-size:14px;
}
.contact-note{
  margin-top:14px;
  color:var(--muted);
  font-size:14px;
  max-width:70ch;
}

.socials-big .social-links{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:10px;
}
.socials-big .social-links a{
  display:flex;
  align-items:center;
  gap:12px;
  color:rgba(242,242,245,0.9);
}
.socials-big .social-links i{
  width:22px;
  text-align:center;
  color:var(--muted);
}
.socials-big .social-links a:hover i{color:var(--text);}

.site-footer{
  border-top:1px solid rgba(255,255,255,0.06);
  padding:36px 0;
  color:rgba(162,162,171,0.8);
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
}
.footer-links{
  display:flex;
  gap:16px;
}
.footer-links a{color:rgba(162,162,171,0.85);}
.footer-links a:hover{color:rgba(242,242,245,0.95);}

/* Responsive */
@media (max-width: 980px){
  .hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 1fr;
  gap:30px;
  padding:96px 0 44px;
}
  .hero-note{max-width:62ch;}
  .portfolio-grid{grid-template-columns:1fr; gap:14px;}
  .unikin-card{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .nav{display:none;}
}

.lede-2{margin-top:14px; color:rgba(242,242,245,0.76);}

/* Mobile breathing room for hero text */
@media (max-width: 640px) {
  .hero-inner {
    padding-left: 28px;
    padding-right: 28px;
  }

  .lede,
  .lede-2 {
    max-width: 100%;
  }
}