/* ========== TOKENS (site-wide) ========== */
:root{
  --bg:#0b0b0b;
  --bg-soft:#111;
  --card:#1b1b1b;
  --border:#333;
  --text:#f2f2f2;
  --muted:#bdbdbd;
  --accent:#00ff99;
  --radius:12px;
  --max-w:1100px;

  /* Hero */
  --hero-radius:75px;                 /* hero height = 2x this */
  --hero-h:calc(var(--hero-radius)*2);

  /* Cards (homepage logs) */
  --icon-size:150px;                  /* icon DIAMETER */
  --card-h:calc(var(--icon-size)*2);  /* card height = 2 × diameter */
  --card-r:var(--icon-size);          /* pill radius = diameter */
}

/* ========== BASE ========== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img,video{max-width:100%;height:auto;display:block}
.container{max-width:var(--max-w);margin:0 auto;padding:2rem 1rem}

/* Subtle neutral container for ANY .card by default (non-pill contexts) */
.card{
  background:transparent;
  border:0;
  border-radius:var(--radius);
}

/* ========== HERO ========== */
.hero{
  background:url('/assets/img/lander/lander.JPG') center/cover fixed no-repeat;
  padding:6rem 1.5rem 4rem;
  text-align:center;
}
.hero-title{font-size:2.6rem;margin:0 0 2rem}
.hero-box{
  --radius:var(--hero-radius);
  display:flex;align-items:center;justify-content:flex-start;
  background:rgba(0,0,0,.5);
  border-radius:var(--radius);
  height:calc(var(--radius)*2);
  max-width:900px;margin:0 auto;
  padding-right:2rem;gap:2rem;
}

/* Make micro posts clickable while keeping controls accessible */
.card.micro { position: relative; }
.micro-title a { color: var(--accent); text-decoration: none; display:inline-block; transition: transform .12s ease, text-decoration .12s ease, color .12s ease; }
.micro-title a:hover { transform: translateY(-2px); text-decoration: underline; }
.micro-title a:focus { outline: 3px solid color-mix(in srgb, var(--accent) 30%, transparent); outline-offset: 3px; }
.card.micro .igslider,
.card.micro .stl-banner,
.card.micro .aff { position: relative; z-index: 2; }

.profile{
  width:150px;height:150px;border-radius:50%;
  object-fit:cover;border:3px solid var(--accent);flex-shrink:0;
}
.hero-text{text-align:left;margin-left:1.5rem;max-width:600px}
.resume-wrapper{margin-top:1.25rem}
.resume-button{
  display:inline-block;padding:.75rem 1.5rem;border-radius:999px;
  background:var(--accent);color:#0b0b0b;font-weight:700;
  transition:transform .2s ease
}
.resume-button:hover{transform:scale(1.05)}
@media (max-width:768px){
  .hero-box{flex-direction:column;height:auto;padding:2rem;border-radius:30px}
  .hero-text{margin-left:0;text-align:center}
}

/* ========== LATEST LOGS (non-parallax) ========== */
.card-section{
  text-align:center;
  padding:4rem 1rem;
  background:var(--bg-soft);
  /* Responsive knob: icon size drives pill geometry */
  --icon-size: clamp(56px, 6vw, 100px);
}

.card-section h2{
  margin:0 0 1.5rem;
  color:var(--accent);
}

.card-grid{
  display:grid;gap:1.5rem;margin:0 auto;max-width:var(--max-w);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}

/* Long-form “pill” cards live only inside the main card grid */
.card-grid .card{
  display:flex;align-items:center;gap:1rem;
  background:rgba(255,255,255,.06);
  height:calc(var(--icon-size)); /* 2 × DIAMETER (correct) */
  border-radius:var(--icon-size);    /* semicircular ends */
  padding:0;                         /* avoid adding to height */
  color:var(--text);text-decoration:none;
  transition:transform .2s,box-shadow .3s;box-shadow:0 0 0 transparent;
  overflow:hidden;
}
.card-grid .card:hover{transform:scale(1.02);box-shadow:0 0 15px 3px var(--accent)}

.card-grid .card-icon-img{
  width:var(--icon-size);height:var(--icon-size);
  flex:0 0 var(--icon-size);
  border-radius:50%;object-fit:cover;display:block;margin:0;
}
.card-grid .card-body{
  flex:1 1 auto;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 1rem;
}
.card-grid .card-title{
  margin:0;line-height:1.1;font-size:1.05rem;color:var(--accent)
}
.card-grid .card-subtitle{
  margin:.25rem 0 0 0;line-height:1.15;font-size:.95rem;color:#eaeaea
}

/* ========== FOOTER (over background image, no parallax) ========== */
.site-footer{
  background:#000;color:var(--text);
  border-top:1px solid #222;
  padding-top:1.25rem;
}

.site-footer--image{
  position:relative;isolation:isolate;
  --footer-bg: url('/assets/img/common/background.png');
  background-image:var(--footer-bg);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  color:var(--text);
  border-top:none;
  padding-top:1.25rem;
}
.site-footer--image::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.50), rgba(0,0,0,.68));
}
.site-footer--image .footer-grid,
.site-footer--image .footer-bottom{position:relative;z-index:1}

/* Footer link grid */
.footer-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.25rem 2rem;align-items:start;
  padding:2.25rem 1rem 1.5rem;
  max-width:var(--max-w);margin:0 auto;
}
.footer-col h4{
  margin:0 0 .5rem;font-size:1rem;letter-spacing:.02em;color:var(--accent)
}
.footer-col ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:.35rem;
}
.footer-col a{
  color:#f0f0f0;text-decoration:none;
  transition:color .15s ease,text-shadow .15s ease;
}
.footer-col a:hover{
  color:var(--accent);
  text-shadow:0 0 6px color-mix(in srgb,var(--accent) 55%, transparent);
}
.footer-col .muted{color:var(--muted)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.15);
  padding:.75rem 1rem 1.25rem;text-align:center;color:var(--muted);
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}

/* Responsive footer stacking */
@media (max-width:980px){ .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr} }

/* ========== OPTIONAL: full-bleed image strip helper (if ever needed) ========== */
.footer-photo{ margin:0;background:#000 }
.footer-photo img{
  display:block;width:100%;
  height:38vh;max-height:520px;
  object-fit:cover;object-position:center;
}

/* ========== MICRO IMAGE-POST (IG-style slider) ========== */
/* Card variant */
.card.micro.igpost { padding: 10px; }

/* Slider shell */
.igslider {
  position: relative;
  border-radius: calc(var(--radius,12px) - 2px);
  overflow: hidden;
  background: var(--card,#1b1b1b);
  border: 1px solid var(--border,#333);
}

/* Scroll-snap track (native swipe) */
.igslider .track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.igslider .track::-webkit-scrollbar { display: none; }

/* Slides */
.igslider .slide { margin: 0; scroll-snap-align: start; }
.igslider img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* Arrows */
.igslider .nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  border: 0; background: rgba(0,0,0,.35);
  color: #fff; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(2px);
}
.igslider .nav:hover { background: rgba(0,0,0,.5); }
.igslider .prev { left: 8px; }
.igslider .next { right: 8px; }

/* Dots */
.igslider .dots {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 8px; display: flex; gap: 6px; margin: 0; padding: 4px 6px;
  list-style: none; background: rgba(0,0,0,.25); border-radius: 999px;
}
.igslider .dots > li {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.5); cursor: pointer;
}
.igslider .dots > li[aria-selected="true"] { background: #fff; }


/* Ensure controls are *above* the scrolling track and receive taps */
.igslider { position: relative; }
.igslider .track { position: relative; z-index: 1; -webkit-overflow-scrolling: touch; }
.igslider .nav,
.igslider .dots { position: absolute; z-index: 5; pointer-events: auto; }

/* Improve mobile tap targets */
@media (max-width: 768px) {
  .igslider .nav { width: 44px; height: 44px; }
  .igslider .dots > li { width: 12px; height: 12px; }
}

/* Make buttons fast-tap on mobile */
.igslider .nav { touch-action: manipulation; }
.igslider .dots > li { touch-action: manipulation; }





/* Text below slider (inherits your tokens) */
.micro-title { margin:.5rem 0 0; font-size:.98rem; color:var(--text,#f2f2f2); }
.micro-cap   { margin:.15rem 0 0; font-size:.9rem; color:var(--muted,#bdbdbd); }

/* Affiliate pills (reused global) */
.aff { display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:6px 0 0; list-style:none; }
.aff a {
  display:inline-block; padding:5px 9px; border-radius:999px; font-size:.8rem; text-decoration:none;
  background: color-mix(in oklab, var(--accent,#00ff99) 18%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent,#00ff99) 45%, transparent);
}

/* A11y: reduced motion */
@media (prefers-reduced-motion: reduce) {
  .igslider .track { scroll-behavior: auto !important; }
}

/* ========== MICRO GRID (site-wide reusable) ========== */
.micro-grid-wrap { margin-block: 8px 40px; }
.micro-grid-wrap .grid-head {
  display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px;
}


/* Match Latest Logs <h2> style */
.micro-grid-wrap .grid-head h2{
  margin: 0 0 1.5rem;
  color: var(--accent);
  letter-spacing: normal;  /* keep it clean; remove any prior tweaks */
}

.micro-grid-wrap .grid-link { font-size:.9rem; color:var(--muted,#bdbdbd); text-decoration:none; }

.micro-grid {
  --gap: 16px;
  --col-min: 220px;                 /* tweak to taste */
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--col-min), 1fr));
  gap: var(--gap);
}

/* Card sizing in grid context */
.micro-grid .igpost { padding: 10px; }
.micro-grid .igpost .igslider img { aspect-ratio: 1 / 1; object-fit: cover; }


/* === Micro section with the same photo background as the footer === */
.micro-grid--image{
  position: relative;
  isolation: isolate;
  /* use same image var pattern as footer; override via inline style */
  --micro-bg: url('/assets/img/lander/background.png');
  background-image: var(--micro-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--text);
  padding: 1.25rem 0 2.5rem; /* top/bottom breathing room */
  border-top: none;
}
.micro-grid--image::before{
  /* same vibe as .site-footer--image overlay */
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,.50), rgba(0,0,0,.68));
}
/* ensure content sits above overlay */
.micro-grid--image > .container{ position: relative; z-index: 1; }

/* optional: add a subtle inner shadow around each micro card to pop off photo */
.micro-grid .igpost .igslider{
  box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.35);
}


/* === Shared image band for continuous background === */
.image-band{
  position: relative;
  isolation: isolate;
  --band-bg: url('/assets/img/lander/background.png');
  background-image: var(--band-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* one overlay across the whole band */
.image-band::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,.50), rgba(0,0,0,.68));
}

/* lift inner content above overlay */
.image-band > *{ position: relative; z-index: 1; }

/* neutralize the footer's own image overlay when inside the band */
.image-band .site-footer--image{
  background: transparent;
  background-image: none;
  border-top: 1px solid rgba(255,255,255,.15); /* keep its divider */
}
.image-band .site-footer--image::before{ display:none; }

/* micro grid itself stays transparent; cards already pop */










/* STL banner — single rounded rectangle, same font vibe as your <h2> */
.stl-banner{
  display:inline-flex;
  align-items:stretch;
  border-radius: 12px;                 /* outer rounded edges */
  overflow:hidden;                     /* clips inner corners */
  background:#000;                     /* matches your mock */
  border:1px solid var(--border,#333);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* “STL:” text block — inherit h2 styling when placed near it */
.stl-label{
  display:flex; align-items:center;
  padding: .1rem .4rem .1rem .4rem;
  color: var(--accent,#00ff99);
  font-family: inherit;                /* same family as surrounding <h2> */
  font-weight: bold;                /* same weight as <h2> if nested */
  font-size: .8em;                      /* scales if placed inside a header */
  letter-spacing:.02em;
  background:#000;                     /* solid black left cell */
}

/* Square tiles that crop rectangular images centered */
.stl-tile{
  position: relative;
  width: 24px;
  height: 24px;
  overflow: hidden;                 /* crop any overflow neatly */
  display: inline-block;            /* keep layout tight */
  background: #111;                 /* or brand colors (you already set per-site) */
  border-left:1px solid rgba(255,255,255,.06);
}

/* Make the image fill the square, centered */
.stl-tile img{
  width: 100%;
  height: 100%;
  display: block;                   /* remove inline-gap */
  object-fit: cover;                /* fill tile; allow overflow */
  object-position: center;          /* center the crop */
  filter: none;                     /* don't invert colored PNGs */
  opacity: 1;
}
.stl-tile:hover{ filter: brightness(1); transform: translateY(-1px); }

/* Brand-ish tile backgrounds (tune to taste) */
.stl-tile.mmf       { background:#43c6b6; }  /* Cults teal */
.stl-tile.cults       { background:#6c3bcf; }  /* MMF purple */
.stl-tile.printables  { background:#444444; }  /* Printables orange */
.stl-tile.makerworld  { background:#79d041; }  /* MakerWorld green */

/* Compact variant if you embed right on an <h2> line */
.h2-inline { display:flex; align-items:center; gap:.75rem; }