@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Outfit:wght@400;600;700&family=DM+Sans:wght@400;500;700&display=swap');

:root{
  --ink:#1f2a33;
  --muted:#5b6b79;

  /* Wii-plastic + paper */
  --panel:#f7f6f2;
  --panel2:#eef3f7;
  --line:rgba(0,0,0,.12);
  --shadow:0 14px 28px rgba(0,0,0,.14);
  --shadow2:0 6px 14px rgba(0,0,0,.10);

  --radius:22px;
  --radius2:16px;
}

*{box-sizing:border-box}
html {
  min-height: 100%;
  height: auto;
}
body {
  min-height: 100vh;
  height: auto;
  background-color: #b48a5a;
  background-image: url('images/corkboard.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  box-shadow: inset 0 0 80px rgba(0,0,0,0.04);
}

body{
  margin:0;
  color:var(--ink);
  font:16px/1.45 "Trebuchet MS","Verdana","Segoe UI",system-ui,-apple-system,sans-serif;

  /* Modern Wii-inspired seamless background */
}

html {
  background:
    linear-gradient(135deg, #e7c08a 0%, #c9a06d 60%, #b48956 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(45deg, rgba(120,80,40,0.06) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 18px);
  background-blend-mode: lighten, normal, normal, normal;
  background-size:
    auto 100%,
    100% 100%,
    80px 80px,
    80px 80px;
  background-repeat:
    repeat-x,
    no-repeat,
    repeat,
    repeat;
  background-attachment: scroll;

    /* background-attachment: fixed;  Removed for performance */
}

a{color:inherit}

.wrap{
  max-width:980px;
  margin:0 auto;
  padding:26px 18px 48px;
}

@media (max-width: 520px){
  .wrap{
    padding:16px 12px 32px;
  }
}

/* Channel card (the “app tile” vibe) */
.channel{
  border:1px solid rgba(255,255,255,.28);
  border-radius:var(--radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.55));
  box-shadow:var(--shadow);
  overflow:visible;

  /* thin inner stroke like Wii UI */
  outline:1px solid rgba(0,0,0,.08);
  outline-offset:-8px;
}


.channel__top{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:24px 18px 18px;
  text-align:center;
  position:relative;
}

@media (max-width: 520px){
  .channel__top{
    flex-direction:column;
    padding:16px 12px 12px;
    gap:8px;
  }
}

.channel__top .pill{
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
}

@media (max-width: 520px){
  .channel__top .pill{
    position:static;
    transform:none;
    margin-top:4px;
  }
}

.brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  width:100%;
  min-width:0;
  position:relative;
  z-index:10;
}

.icon{
  width:46px; height:46px;
  border-radius:16px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 35% 30%, #ffffff, #d7ecff 60%, #b8d2ea 100%);
  box-shadow:var(--shadow2);
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.icon svg{width:26px;height:26px;opacity:.92}

.title{
  text-align:center;
  flex:1;
}
.title h1{
  margin:0;
  font-size:48px;
  font-weight:900;
  color:#fff;
  letter-spacing:.3px;
  text-shadow:
    0 2px 6px rgba(0,0,0,0.32),
    0 1.5px 0 #3a3a3a,
    0 1px 0 #3a3a3a,
    0 0.5px 0 #3a3a3a,
    0 3px 12px rgba(0,0,0,0.18),
    0 1px 0 rgba(255,255,255,.65);
  white-space:normal;
  line-height:1.2;
}

@media (max-width: 520px){
  .title h1{
    font-size:32px;
    line-height:1.15;
  }
}
.title p{
  margin:2px 0 0;
  color:var(--muted);
  font-size:13px;
}

.pill{
  padding:10px 16px;
  border-radius:999px;
  border:3px solid #2b2b2b;
  background:transparent;
  box-shadow:0 0 0 3px #2b2b2b inset;
  color:#2b2b2b;
  font-size:15px;
  font-weight:1000;
  font-family:"Bungee", "Varela Round", "Segoe UI", sans-serif;
  white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.20);
}

@media (max-width: 520px){
  .pill{
    padding:6px 12px;
    font-size:12px;
    border:2px solid #2b2b2b;
    box-shadow:0 0 0 2px #2b2b2b inset;
  }
}

/* Mid content */
.channel__mid{
  padding:0 18px 18px;
}

@media (max-width: 520px){
  .channel__mid{
    padding:0 12px 12px;
  }
}

.desc{
  margin:10px 0 12px;
  color:var(--muted);
  font-size:13px;
}

/* “Pinned snapshots” strip (more Photo Channel vibes) */
.strip{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin:4px 0 190px 0;
}
@media (max-width: 520px){
  .strip{
    margin:12px 0 65px 0;
    gap:8px;
  }
}
.snap{
  position:relative;
  height:138px;
  display:grid;
  place-items:center;
}

.snap__paper{
  width:92%;
  height:92%;
  border-radius:7px;
  border:2.5px solid #f0f0f0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(250,248,246,.95) 100%),
    linear-gradient(to bottom, rgba(255,255,255,.60) 0%, transparent 80%);
  box-shadow:
    0 14px 36px rgba(80,60,40,.32),
    0 2px 8px rgba(100,70,40,.24),
    inset 0 1px 0 rgba(255,255,255,.90),
    inset 0 -1px 0 rgba(0,0,0,.05);
  padding: 10px 10px 28px 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  transform:rotate(-2deg);
}

.snap--b .snap__paper{ transform:rotate(2deg); }
.snap--c .snap__paper{ transform:rotate(-1deg); }

.snap__img{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  border: 1.5px solid #e0e0e0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
}

/* Slight color variety like different photos */
.snap--b .snap__img{ background-size: cover; background-position: center; }
.snap--c .snap__img{ background-size: cover; background-position: center; }

.snap__cap{
  margin-top:8px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.2px;
}

/* pushpin */
.pin{
  position:absolute;
  top:6px;
  left:50%;
  transform:translateX(-50%);
  width:16px;
  height:16px;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,.15) 40%, rgba(0,0,0,.25) 100%),
    linear-gradient(180deg, #e74b4b, #b51f1f);
  box-shadow:0 8px 10px rgba(0,0,0,.20);
  border:1px solid rgba(0,0,0,.18);
}
.snap--b .pin{ background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,.15) 40%, rgba(0,0,0,.25) 100%), linear-gradient(180deg, #4bb7ff, #1d6fb1); }
.snap--c .pin{ background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,.15) 40%, rgba(0,0,0,.25) 100%), linear-gradient(180deg, #55d28f, #1f8f57); }

/* Wii-style big buttons */
.buttons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  padding:14px 18px;
  border-radius:999px;
  border:1.5px solid #7ecbff;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(235,235,235,.72));
  box-shadow:
    0 0 16px 2px #6ec6ff88,
    0 2px 0 rgba(255,255,255,.65) inset,
    0 10px 18px rgba(0,0,0,.10);
  font-weight:700;
  letter-spacing:.2px;
  transition:transform .08s ease, filter .08s ease;
  user-select:none;
}

@media (max-width: 520px){
  .btn{
    padding:16px 20px;
    font-size:15px;
    gap:8px;
  }
}
.btn:active{transform:translateY(1px); filter:saturate(1.06)}
.btn--secondary{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(235,235,235,.72));
}
.btn__icon svg{width:18px;height:18px;opacity:.9}

/* Lower panels */
.grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:14px;
  padding:0 18px 18px;
}

@media (max-width: 520px){
  .grid{
    padding:0 12px 12px;
    gap:10px;
  }
}

.panel{
  border:1.5px solid rgba(200,180,160,.35);
  border-radius:var(--radius2);
  background:
    linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(245,248,252,.80) 100%),
    linear-gradient(to bottom, rgba(255,255,255,.40) 0%, transparent 100%);
  box-shadow:
    0 4px 16px rgba(80,60,40,.12),
    inset 0 1px 0 rgba(255,255,255,.80),
    inset 0 -1px 0 rgba(0,0,0,.04);
  padding:14px 14px 12px;
}

@media (max-width: 520px){
  .panel{
    padding:12px 12px 10px;
  }
}

.panel h2{
  margin:0 0 8px;
  font-size:18px;
  font-weight:700;
  letter-spacing:.1px;
  font-family:'Outfit', sans-serif;
}
.panel p{margin:0 0 10px; color:var(--muted); font-size:14px; font-family:'DM Sans', sans-serif;}
.contact{margin:0 0 8px}
.note{margin:0;color:var(--muted);font-size:12px}

.specs{
  margin:10px 0 0;
  padding:10px 12px;
  border-radius:14px;
  border:1px dashed rgba(0,0,0,.18);
  background:rgba(255,255,255,.55);
  color:var(--muted);
  font-size:13px;
}

/* Portfolio section */
.section{
  margin-top:16px;
  border:1.5px solid rgba(200,180,160,.25);
  border-radius:var(--radius);
  background:
    linear-gradient(135deg, rgba(255,255,255,.88) 0%, rgba(245,248,252,.75) 100%),
    linear-gradient(to bottom, rgba(255,255,255,.50) 0%, transparent 80%);
  box-shadow:
    0 8px 28px rgba(80,60,40,.15),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -2px 0 rgba(0,0,0,.02);
  overflow:hidden;
}

.section__head{
  padding:14px 18px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid rgba(0,0,0,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.22));
}

@media (max-width: 520px){
  .section__head{
    padding:12px 12px;
  }
}
.section__head h2{margin:0; font-size:16px}
.section__head span{color:var(--muted); font-size:13px}

.gallery{
  padding:16px 18px 18px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}

@media (max-width: 520px){
  .gallery{
    padding:12px 12px 12px;
    gap:10px;
  }
}

figure{
  margin:0;
  border-radius:3px;
  border:none;
  background: #fff;
  box-shadow:
    0 14px 36px rgba(80,60,40,.32),
    0 2px 8px rgba(100,70,40,.24),
    inset 0 1px 0 rgba(255,255,255,.85);
  overflow:hidden;
  padding:12px;
  padding-bottom:28px;
  display:flex;
  flex-direction:column;
}

figure:nth-child(1) { transform: rotate(0.8deg); }
figure:nth-child(2) { transform: rotate(-1.1deg); }
figure:nth-child(3) { transform: rotate(1.3deg); }
figure:nth-child(4) { transform: rotate(-1.5deg); }
figure:nth-child(5) { transform: rotate(1.2deg); }
figure:nth-child(6) { transform: rotate(-0.8deg); }

figure img{
  display:block;
  width:100%;
  height:160px;
  object-fit:cover;
  background:linear-gradient(135deg, rgba(130,190,240,.55), rgba(240,200,140,.55));
  border-radius:2px;
  cursor:zoom-in;
}

figcaption{
  padding:12px 8px 4px 8px;
  font-size:12px;
  font-weight:500;
  color:var(--muted);
  text-align:center;
  letter-spacing:0.3px;
}

/* Footer */
.footer{
  margin-top:14px;
  color:rgba(20,30,38,.72);
  font-size:12px;
  text-align:center;
  opacity:.95;
}
.footer a{color:inherit}
.dot{padding:0 6px; opacity:.6}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(12,14,18,.78);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index:1000;
  backdrop-filter:blur(3px);
}
.lightbox.is-open{
  opacity:1;
  pointer-events:auto;
}
.lightbox__img{
  max-width:min(960px, 92vw);
  max-height:86vh;
  width:auto;
  height:auto;
  border-radius:10px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.lightbox__close{
  position:absolute;
  top:16px;
  right:18px;
  border:none;
  width:40px;
  height:40px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  color:#1f2a33;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.lightbox__close:hover{filter:brightness(.95)}

/* Responsive */
@media (max-width: 860px){
  .grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2, 1fr)}
  .strip{grid-template-columns:repeat(3, 1fr)}
  .snap{height:120px}
  figure img{height:170px}
}
@media (max-width: 520px){
  .grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .snap{height:90px}
  .snap__paper{padding:6px 6px 18px 6px}
  .snap__cap{font-size:10px; margin-top:4px}
  .pin{width:12px; height:12px; top:4px}
  figure{padding:10px; padding-bottom:20px}
  figure img{height:auto; aspect-ratio:4/3}
  figcaption{font-size:11px; padding:8px 4px 2px 4px}
  .panel h2{font-size:16px}
  .panel p{font-size:13px}
  .btn{width:100%}
  .section__head h2{font-size:15px}
  .lightbox{padding:16px}
  .lightbox__img{max-width:95vw; max-height:80vh}
  .buttons{gap:10px}
}