:root{--bg:#f8efef;--brand:#0b2a59;--text:#1e293b;--muted:#6b7280;--card:#fff;--shadow:0 10px 25px rgba(0,0,0,.12)}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.container{max-width:1100px;margin:0 auto;padding:20px}
.site-header{position:sticky;top:0;background:#9ddad4;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;z-index:10;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.site-header .nav-left{display:flex;align-items:center;gap:16px}
.site-header .insta{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px}
.site-header .insta img{width:28px;height:28px}
.main-nav a{margin:0 8px;font-weight:600}
.brand-wrap{position:absolute;right:3px;top:-8px;height:140px;pointer-events:none}
.brand{height:140px}
@media (max-width: 768px){
  .brand-wrap{top:4px;right:3px;transform:scale(.6);transform-origin:top right}
}
.note{color:var(--muted);font-size:.95rem;margin-top:10px}
.site-footer{padding:40px 16px;text-align:center;color:var(--muted)}


main#carousel {
  grid-row: 1 / 2;
  grid-column: 1 / 8;
  width: 100vw;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 600px;
  --items: 5;
  --middle: 3;
  --position: 1;
  pointer-events: none;
}

div.item {
  position: absolute;
  width: 300px;
  height: 400px;
  background-color: coral;
  --r: calc(var(--position) - var(--offset));
  --abs: max(calc(var(--r) * -1), var(--r));
  transition: all 0.25s linear;
  transform: rotateY(calc(-10deg * var(--r)))
  translateX(calc(-300px * var(--r)));
  z-index: calc((var(--position) - var(--abs)));
}

div.item:nth-of-type(1) {
  --offset: 1;
  background-color: #90f1ef;
}
div.item:nth-of-type(2) {
  --offset: 2;
  background-color: #ff70a6;
}
div.item:nth-of-type(3) {
  --offset: 3;
  background-color: #ff9770;
}
div.item:nth-of-type(4) {
  --offset: 4;
  background-color: #ffd670;
}
div.item:nth-of-type(5) {
  --offset: 5;
  background-color: #e9ff70;
}

input:nth-of-type(1) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
input:nth-of-type(1):checked ~ main#carousel {
  --position: 1;
}

input:nth-of-type(2) {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}
input:nth-of-type(2):checked ~ main#carousel {
  --position: 2;
}

input:nth-of-type(3) {
  grid-column: 4 /5;
  grid-row: 2 / 3;
}
input:nth-of-type(3):checked ~ main#carousel {
  --position: 3;
}

input:nth-of-type(4) {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}
input:nth-of-type(4):checked ~ main#carousel {
  --position: 4;
}

input:nth-of-type(5) {
  grid-column: 6 / 7;
  grid-row: 2 / 3;
}
input:nth-of-type(5):checked ~ main#carousel {
  --position: 5;
}

/* Carousel controls and responsive look */
.carousel-wrap { position: relative; max-width:100vw; overflow:visible; display:flex; align-items:center; justify-content:center; padding-bottom:48px; /* space for controls */ }

.carousel-controls { position: absolute; left: 50%; transform: translateX(-50%); bottom: 8px; display:flex; gap:10px; align-items:center; justify-content:center; z-index:20; }

/* hide native radios */
.carousel-controls input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

/* visual dots (labels) */
.carousel-controls .dot {
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:50%;
  background: rgba(255,255,255,0.75);
  border: 2px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: all .18s ease;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}

/* active dot — using :checked + label adjacency when input is directly before label */
.carousel-controls input[type="radio"]:checked + label { 
  width:18px;
  height:18px;
  background: var(--brand);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}

/* make dots focusable for keyboard users */
.carousel-controls label:focus {
  outline: 3px solid rgba(11,42,89,0.12);
  outline-offset: 3px;
}

/* arrows */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  z-index: 25;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  -webkit-tap-highlight-color: transparent;
}

.carousel-arrow.prev { left: 12px; }
.carousel-arrow.next { right: 12px; }

.carousel-arrow:hover { transform: translateY(-50%) scale(1.04); box-shadow: 0 8px 22px rgba(0,0,0,0.14); }
.carousel-arrow:active { transform: translateY(-50%) scale(.98); }
.carousel-arrow:focus { outline: 3px solid rgba(11,42,89,0.12); outline-offset: 4px; }

/* responsive phone styling: larger dots and more spacing for touch */
@media (max-width: 700px) {
  .carousel-controls { gap:14px; bottom: 12px; }
  .carousel-controls .dot { width:16px; height:16px; background: rgba(255,255,255,0.9); border: 2px solid rgba(0,0,0,0.06); }
  .carousel-controls input[type="radio"]:checked + label { width:22px; height:22px; }

  .carousel-arrow { width:56px; height:56px; font-size:26px; }
  .carousel-arrow.prev { left: 8px; }
  .carousel-arrow.next { right: 8px; }
}