/* styles.css */

/* ── Theme variables ── */
:root{
  --bg:#d6d3ca;;
  --paper:#fbf7ef;
  --ink:#1f1b16;
  --muted:#635242;
  --line:#e6dccf;
  --shadow:0 10px 30px rgba(31,27,22,0.08);
  --radius:18px;
  --radius2:26px;
  --max:1080px;
  --pad:22px;
  --accent:#0a4ad4;
  --accent-rgb: 10,74,212;
  --topbar-bg: rgba(243,239,230,0.82);
  --topbar-border: rgba(230,220,207,0.6);
  --card-bg: rgba(251,247,239,0.82);
  --chip-bg: rgba(251,247,239,0.55);
  --input-bg: rgba(251,247,239,0.75);
  --modal-bg: rgba(251,247,239,0.96);
}

[data-theme="jungle"]{
  --bg: #0e1710;
  --paper: #192b1d;
  --ink: #d8edd4;
  --muted: #80b888;
  --line: rgba(80,150,90,0.28);
  --shadow: 0 10px 30px rgba(0,0,0,0.45);
  --accent: #52c47a;
  --accent-rgb: 82,196,122;
  --topbar-bg: rgba(12,20,14,0.88);
  --topbar-border: rgba(80,150,90,0.22);
  --card-bg: rgba(22,38,26,0.88);
  --chip-bg: rgba(22,38,26,0.65);
  --input-bg: rgba(22,38,26,0.82);
  --modal-bg: rgba(18,30,21,0.97);
}

[data-theme="industrial"]{
  --bg: #181818;
  --paper: #222222;
  --ink: #f2ede8;
  --muted: #aaa;
  --line: rgba(255,255,255,0.12);
  --shadow: 0 10px 30px rgba(0,0,0,0.5);
  --accent: #e85d04;
  --accent-rgb: 232,93,4;
  --topbar-bg: rgba(16,16,16,0.92);
  --topbar-border: rgba(255,255,255,0.09);
  --card-bg: rgba(32,32,32,0.92);
  --chip-bg: rgba(32,32,32,0.72);
  --input-bg: rgba(32,32,32,0.88);
  --modal-bg: rgba(26,26,26,0.97);
}

[data-theme="navy"]{
  --bg: #0a1825;
  --paper: #0f2236;
  --ink: #d0e4f5;
  --muted: #6a9bbf;
  --line: rgba(100,170,230,0.18);
  --shadow: 0 10px 30px rgba(0,0,0,0.5);
  --accent: #4aaee8;
  --accent-rgb: 74,174,232;
  --topbar-bg: rgba(8,18,30,0.90);
  --topbar-border: rgba(100,170,230,0.16);
  --card-bg: rgba(14,30,48,0.90);
  --chip-bg: rgba(14,30,48,0.68);
  --input-bg: rgba(14,30,48,0.84);
  --modal-bg: rgba(10,22,36,0.97);
}

/* smooth theme transitions */
body, .topbar, .card, .modal__panel, .mini, .chip, .more,
.search input, .sort select, .pill, .btn, .aboutgallery__track,
.aboutgallery__item img, .tag, .meta, .masonry__item {
  transition:
    background 400ms ease,
    background-color 400ms ease,
    border-color 400ms ease,
    color 400ms ease,
    box-shadow 400ms ease;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background: var(--bg);
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); }

.muted{ color:var(--muted); }

.skip{
  position:absolute; left:-999px; top:0;
  background:var(--paper); border:1px solid var(--line);
  padding:10px 12px; border-radius:999px;
}
.skip:focus{ left:16px; top:16px; z-index:9999; }

.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 0;
}

.brand{ display:flex; align-items:center; gap:12px; }
.brand__mark{
  width:14px; height:14px; border-radius:6px;
  background: linear-gradient(135deg, #cdb79b, #efe1cf);
  border:1px solid rgba(31,27,22,0.18);
  box-shadow: 0 6px 14px rgba(31,27,22,0.08);
}
.brand__name{ font-weight:650; letter-spacing:0.2px; }
.brand__role{ font-size:13px; color:var(--muted); margin-top:2px; }

.nav{ display:flex; align-items:center; gap:14px; }
.nav a{ font-size:14px; color:var(--muted); }
.nav a:hover{ color:var(--ink); text-decoration:none; }

.pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background: var(--chip-bg);
  text-decoration:none !important;
}
.pill:hover{ background: var(--card-bg); }

/* hero */
.hero{ padding:56px 0 22px; }
.hero__inner{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:24px;
  align-items:start;
}

.frame--image{
  padding:0;
  width: 300px;
  flex-shrink: 0;
}

.frame--image img{
  width: 300px;
  height: auto;
  display:block;
  border-radius: var(--radius2);
  object-fit: contain;
}


h1{
  font-size:44px; line-height:1.05; margin:0 0 14px;
  letter-spacing:-0.5px;
}
.lead{
  margin:0 0 18px;
  font-size:16px; color:var(--muted); max-width:62ch;
}
.hero__cta{ display:flex; gap:10px; margin:16px 0 20px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(31,27,22,0.18);
  background: var(--paper);
  box-shadow: 0 10px 22px rgba(31,27,22,0.08);
  font-weight:600;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}
.btn:hover{ transform: translateY(-1px); }

.btn--ghost{
  background: transparent;
  border: 1px solid var(--line);
  box-shadow:none;
  color:var(--muted);
}

.hero__meta{ display:flex; gap:14px; flex-wrap:wrap; }
.meta{
  padding:12px 14px;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: var(--chip-bg);
}
.meta__k{ font-size:12px; color:var(--muted); }
.meta__v{ font-size:14px; margin-top:4px; }

.hero__right .frame{
  height:100%;
  min-height:220px;
  border-radius: var(--radius2);
  border:1px solid rgba(31,27,22,0.12);
  background: linear-gradient(180deg, rgba(251,247,239,0.85), rgba(251,247,239,0.55));
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.frame__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(31,27,22,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,27,22,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at 30% 20%, rgba(0,0,0,0.9), transparent 70%);
}
.frame__line{
  position:absolute; left:-40%; top:20%;
  width:180%; height:2px;
  background: linear-gradient(90deg, transparent, rgba(31,27,22,0.16), transparent);
  transform: rotate(-10deg);
}
.frame__line:nth-child(2){ top:52%; transform: rotate(6deg); }
.frame__line:nth-child(3){ top:78%; transform: rotate(-4deg); }

/* controls */
.controls{ padding:18px 0 12px; }
.controls__inner{ display:flex; flex-direction:column; gap:12px; }

.search input{
  width:100%;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background: var(--input-bg);
  color: var(--ink);
  outline:none;
}
.search input:focus{
  border-color: rgba(31,27,22,0.25);
  box-shadow: 0 0 0 4px rgba(205,183,155,0.25);
}

.filters{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
}

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: var(--chip-bg);
  font-size:13px;
  color:var(--muted);
  cursor:pointer;
  user-select:none;
}
.chip[aria-pressed="true"]{
  background: rgba(205,183,155,0.35);
  color: var(--ink);
  border-color: rgba(31,27,22,0.18);
}

.sort select{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background: var(--input-bg);
  color: var(--ink);
}

/* Projects */
.projects{ padding:18px 0 50px; }

.sectionhead{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  margin:10px 0 16px;
}
h2{ margin:0; font-size:22px; letter-spacing:-0.2px; }

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:22px;
}

.card{
  border-radius: var(--radius2);
  border:1px solid rgba(31,27,22,0.10);
  background: var(--card-bg);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 250px;
  transition: transform 160ms ease, box-shadow 160ms ease;
  position: relative;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(31,27,22,0.14);
}

/* Featured badge */
.card__badge{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  border: 1px solid rgba(var(--accent-rgb),0.4);
  pointer-events: none;
}

.card__thumb{
  height:150px;
  background:
    radial-gradient(600px 220px at 20% 20%, rgba(205,183,155,0.45), transparent 55%),
    radial-gradient(600px 220px at 80% 60%, rgba(239,225,207,0.65), transparent 60%),
    linear-gradient(180deg, rgba(31,27,22,0.05), transparent);
  border-bottom: 1px solid rgba(31,27,22,0.08);
}

.card__body{
  padding:14px 14px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.card__top{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.card__title{ font-weight:700; letter-spacing:-0.2px; }
.card__date{ font-size:12px; color:var(--muted); white-space:nowrap; }
.card__desc{ margin:0; color:var(--muted); font-size:14px; line-height:1.35; }

.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.tag{
  font-size:12px;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background: var(--chip-bg);
  color: var(--muted);
}

.card__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}


.card__footer{
  display:flex; gap:10px; align-items:center; justify-content:space-between;
  padding:12px 14px 14px;
}
.linkrow{ display:flex; gap:10px; flex-wrap:wrap; }
.link{
  font-size:13px;
  color: var(--ink);
  text-decoration:none !important;
  border-bottom: 1px solid var(--line);
}
.link:hover{ border-bottom-color: var(--muted); }

.more{
  font-size:16px;
  color: #fff;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(var(--accent-rgb),0.4);
  background: rgba(var(--accent-rgb), 0.5);
  cursor:pointer;
}
.more:hover{ background: var(--accent); color: #fff; }

/* --- modal scroll --- */
/* modal base */
.modal{
  position: fixed;
  inset: 0;
  z-index: 80;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity 160ms ease, visibility 160ms ease;
}

.modal[aria-hidden="false"]{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* backdrop fade */
.modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(31,27,22,0.45);
  opacity: 0;
  transition: opacity 160ms ease;
}

.modal[aria-hidden="false"] .modal__backdrop{
  opacity: 1;
}

/* panel popout */
.modal__panel{
  position: relative;
  max-width: 1100px;
  margin: 6vh auto;
  border-radius: 28px;
  border: 1px solid rgba(31,27,22,0.12);
  background: var(--modal-bg);
  box-shadow: 0 30px 70px rgba(31,27,22,0.22);
  overflow: hidden;
  max-height: 88vh;

  transform: translateY(10px) scale(0.985);
  opacity: 0;
  transition: transform 180ms ease, opacity 180ms ease;
}

.modal[aria-hidden="false"] .modal__panel{
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal__content{
  max-height: 88vh;
  overflow-y: auto;
  padding: 18px;
}


/* --- gallery grid inside modal --- */
.masonry{
  column-count: 3;
  column-gap: 10px;
  margin-top: 10px;
}

@media (max-width: 900px){
  .masonry{ column-count: 2; }
}

@media (max-width: 600px){
  .masonry{ column-count: 1; }
}

.masonry__item{
  break-inside: avoid;
  margin: 0 0 10px;
  border-radius: 14px;
  border: 1px solid rgba(31,27,22,0.10);
  background: rgba(251,247,239,0.7);
  overflow: hidden;
}

.masonry__item img{
  width: 100%;
  display: block;
  max-height: 340px;
  object-fit: cover;
  cursor: zoom-in;
  transition: opacity 120ms ease;
}
.masonry__item img:hover{ opacity: 0.88; }

.masonry__cap{
  padding: 6px 8px;
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid rgba(31,27,22,0.06);
}


/* about + contact */
.about, .contact{ padding:46px 0; }

.about__cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
  margin-top:14px;
}

.mini{
  border-radius: var(--radius2);
  border:1px solid rgba(31,27,22,0.10);
  background: var(--card-bg);
  padding:14px;
}
.mini h3{ margin:0 0 8px; font-size:15px; }
.mini p{ margin:0; color:var(--muted); line-height:1.45; }

.contact__row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }

/* footer */
.footer{ padding:28px 0 36px; border-top:1px solid rgba(230,220,207,0.8); }
.footer__inner{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }


.iconbtn{
  position:absolute; right:14px; top:14px;
  width:40px; height:40px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(251,247,239,0.9);
  cursor:pointer;
}
.iconbtn:hover{ background: rgba(251,247,239,0.98); }


.modal__top{ padding-right:48px; }
.modal__top h3{ margin:0 0 6px; font-size:20px; letter-spacing:-0.2px; }
.modal__top p{ margin:0; }

.modal__cols{
  display:grid;
  grid-template-columns: 1.6fr 0.9fr;
  gap:18px;
  margin-top:14px;
}

.modal__side{
  border-left: 1px solid rgba(31,27,22,0.08);
  padding-left: 16px;
}

h4{
  margin:14px 0 8px;
  font-size:13px;
  color:var(--ink);
  text-transform:uppercase;
  letter-spacing:0.08em;
}

.bullets{ margin:0; padding-left:18px; color:var(--muted); }
.bullets li{ margin:6px 0; }

.kv{
  display:flex; justify-content:space-between; gap:12px;
  padding:10px 0;
  border-bottom: 1px solid rgba(31,27,22,0.07);
}
.kv__k{ color:var(--muted); font-size:13px; }
.kv__v{ font-size:13px; text-align:right; }

.modal__links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }

/* screen-reader only */
.sr{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* responsive */
@media (max-width: 980px){
  .hero__inner{ grid-template-columns: 1fr; }
  .hero__right{ display: none; }
  h1{ font-size:38px; }
  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .about__cards{ grid-template-columns: 1fr; }
  .modal__cols{ grid-template-columns: 1fr; }
  .modal__side{
    border-left:none;
    padding-left:0;
    border-top:1px solid rgba(31,27,22,0.08);
    padding-top:12px;
  }
}

@media (max-width: 560px){
  h1{ font-size:32px; }
  .grid{ grid-template-columns: 1fr; }
  .nav{ gap:10px; }
  .nav a{ font-size:13px; }
}


.aboutgallery{
  position: relative;
  margin: 14px 0 10px;
}

.aboutgallery__track{
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior:smooth;
  padding: 10px;
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background: var(--chip-bg);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.aboutgallery__track::-webkit-scrollbar{ display:none; }

.aboutgallery__item{
  flex: 0 0 auto;
}

.aboutgallery__item img{
  height: 380px;
  width: 260px;
  object-fit: cover;
  display: block;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 22px rgba(31,27,22,0.06);
}

.aboutgallery__btn{
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, var(--accent) 0%, rgba(var(--accent-rgb), 0.8) 100%);
  color: #fff;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
  transition: all 200ms ease;
  padding: 0;
}
.aboutgallery__btn--left{ left: 10px; }
.aboutgallery__btn--right{ right: 10px; }
.aboutgallery__btn:hover{ 
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
}
.aboutgallery__btn:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 560px){
  .aboutgallery__item img{ height: 280px; width: 200px; }
}

.masonry__item--pdf {
  grid-column: 1 / -1;
}

.masonry__item--pdf iframe {
  width: 100%;
  height: 780px;
  border: none;
  border-radius: 6px;
  display: block;
}

/* ── Customize dropdown ── */
.customize{
  position: relative;
}

/* Rainbow border button from uiverse.io */
.customize__trigger{
  --border-radius: 12px;
  --border-width: 2px;
  appearance: none;
  position: relative;
  padding: 8px 14px;
  border: 0;
  background-color: #212121;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  z-index: 2;
  border-radius: var(--border-radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.customize__trigger::after{
  --m-i: linear-gradient(#000, #000);
  --m-o: content-box, padding-box;
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  padding: var(--border-width);
  border-radius: var(--border-radius);
  background-image: conic-gradient(
    #488cfb, #29dbbc, #ddf505,
    #ff9f0e, #e440bb, #655adc, #488cfb
  );
  -webkit-mask-image: var(--m-i), var(--m-i);
  mask-image: var(--m-i), var(--m-i);
  -webkit-mask-origin: var(--m-o);
  mask-origin: var(--m-o);
  -webkit-mask-clip: var(--m-o);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  filter: hue-rotate(0);
  animation: rotate-hue linear 500ms infinite;
  animation-play-state: paused;
  box-sizing: border-box;
}
.customize__trigger:hover::after{
  animation-play-state: running;
}
.customize__trigger:active{
  --border-width: 3px;
}
@keyframes rotate-hue{
  to{ filter: hue-rotate(1turn); }
}

.customize__gear{
  width: 15px; height: 15px;
  flex-shrink: 0;
}

/* Panel */
.customize__panel{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 220px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
  padding: 14px;
  z-index: 100;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scale(0.97);
  transition: opacity 160ms ease, visibility 160ms ease, transform 160ms ease;
}
.customize__panel.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.customize__section{ display: flex; flex-direction: column; gap: 8px; }
.customize__label{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.customize__themes{ display: flex; flex-direction: column; gap: 6px; }

.customize__theme{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease;
}
.customize__theme:hover{
  background: rgba(128,128,128,0.1);
}
.customize__theme.is-active{
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}

.customize__swatch{
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(128,128,128,0.2);
  flex-shrink: 0;
}

.customize__divider{
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

/* Toggle switches */
.customize__toggle{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.customize__toggle input{ display: none; }
.customize__toggle-track{
  width: 34px; height: 18px;
  border-radius: 999px;
  background: rgba(128,128,128,0.25);
  border: 1px solid var(--line);
  position: relative;
  flex-shrink: 0;
  transition: background 200ms ease;
}
.customize__toggle-track::after{
  content: "";
  position: absolute;
  left: 2px; top: 2px;
  width: 12px; height: 12px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 200ms ease;
}
.customize__toggle input:checked + .customize__toggle-track{
  background: var(--accent);
}
.customize__toggle input:checked + .customize__toggle-track::after{
  transform: translateX(16px);
}

/* Reduce motion — only kill animations, never affect opacity/visibility */
body.reduce-motion *{
  animation-duration: 0.001ms !important;
  animation-delay: 0.001ms !important;
  transition-duration: 0.001ms !important;
}
body.reduce-motion img,
body.reduce-motion .card__thumb img,
body.reduce-motion .aboutgallery__item img,
body.reduce-motion .masonry__item img {
  opacity: 1 !important;
  filter: none !important;
}

/* ── Social icon buttons ── */
.nav__social{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--chip-bg);
  color: var(--ink);
  text-decoration: none !important;
  overflow: hidden;
  position: relative;
  transition: background 180ms ease, width 220ms ease, border-color 180ms ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav__social:hover{
  width: auto;
  padding: 0 14px;
  background: var(--card-bg);
  text-decoration: none !important;
}
.nav__social svg{
  width: 16px; height: 16px;
  flex-shrink: 0;
}
.nav__social__label{
  max-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  transition: max-width 220ms ease, margin 220ms ease;
  margin-left: 0;
}
.nav__social:hover .nav__social__label{
  max-width: 80px;
  margin-left: 6px;
}

/* Tools button — distinct from social icons */
.nav__social--tools{
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent);
}
.nav__social--tools:hover{
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ── YouTube section ── */
.videos{
  padding: 10px 0 50px;
}
.videos__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 22px;
  margin-top: 16px;
}
.video__card{
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background: var(--card-bg);
  box-shadow: var(--shadow);
  max-width: 523px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.video__card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.video__thumb{
  position: relative;
  width: 520px;
  height: 280px;
  background: var(--chip-bg);
  cursor: pointer;
  overflow: hidden;
}

.video__thumb img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 200ms ease;
}
.video__card:hover .video__thumb img{
  transform: scale(1.02);
}
.video__play{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.2);
  transition: background 160ms ease;
}
.video__card:hover .video__play{
  background: rgba(0,0,0,0.08);
}
.video__play svg{
  width: 68px; height: 48px;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5));
  transition: transform 160ms ease;
}
.video__card:hover .video__play svg{
  transform: scale(1.08);
}
.video__info{
  padding: 14px 16px 16px;
}
.video__title{
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.3;
}
.video__sub{
  font-size: 13px;
  color: var(--muted);
}
/* Inline iframe embed */
.video__iframe-wrap{
  position: absolute;
  inset: 0;
  display: none;
}
.video__iframe-wrap.is-active{
  display: block;
}
.video__iframe-wrap iframe{
  width: 100%; height: 100%;
  border: none;
}
@media (max-width:700px){
  .videos__grid{ grid-template-columns: 1fr; }
  .video__thumb{ height: 260px; }
}

/* Cursor dot */
#cursorDot{
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 200ms ease;
  mix-blend-mode: screen;
}
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20,16,12,0.92);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}
.lightbox.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.lightbox__img{
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  transform: scale(0.96);
  transition: transform 200ms ease;
}
.lightbox.is-open .lightbox__img{
  transform: scale(1);
}
.lightbox__close{
  position: absolute;
  top: 18px; right: 18px;
  width: 42px; height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 140ms ease;
}
.lightbox__close:hover{ background: rgba(255,255,255,0.22); }
.lightbox__nav{
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 140ms ease;
  user-select: none;
}
.lightbox__nav:hover{ background: rgba(255,255,255,0.22); }
.lightbox__nav--prev{ left: 18px; }
.lightbox__nav--next{ right: 18px; }
.lightbox__counter{
  position: absolute;
  bottom: 18px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  letter-spacing: 0.04em;
}