:root{
  --max: 980px;
  --pad: 18px;
  --radius: 16px;
  --border: rgba(0,0,0,.12);
  --muted: rgba(0,0,0,.65);
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.5;
  background:#474747;
  color:#f0eee6;
}

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

.brand{
  font-weight:700;
  letter-spacing:.2px;
}

.nav{
  margin-left: auto;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}
.nav a{
  text-decoration:none;
  color:#a4a4a4;
  font-size: 14px;
  padding:0;
  border:none;
}
.nav a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
  color:#c4c4c4;
}
.nav a + a{
  margin-left: 18px;
}
a{
  text-decoration:none;
  color:#c4c4c4;
  font-size: 14px;
  padding:0;
  border:none;
}
a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
  color:#a4a4a4;
}

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

.panel{
  border:none;
  border-radius: 0;
  margin: 26px 0;
}

.lede{
  font-size: 18px;
  color: #f0eee6;
}


.hint{
  color: #f0eee6;
  font-size: 14px;
  margin-top: 10px;
}
.ma-divider{
  display: flex;
  justify-content: center;
  margin: 7px 0;
}

.ma-divider img{
  width: 127px;
  height: auto;
  opacity: .69;
}

.carousel{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}

.viewport{
  overflow: hidden;
}

.track{
  display: flex;
  transition: transform 220ms ease;
  will-change: transform;
}

.slide{
  flex: 0 0 100%;         /* one full viewport width */
  padding: 18px 18px 14px;
  border: 1px solid rgba(240,238,230,.22);
  border-radius: 10px;
  background:  
    linear-gradient(to bottom,
      #535353 0px,
      #535353 44px,
      transparent 44px,
      transparent 100%
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(240,238,230,.00) 0px,
      rgba(240,238,230,.00) 22px,
      rgba(170,210,255,.38) 23px
    ),
    #535353;
  position: relative;
  line-height: 1.55;
}

.slide h3{
  margin: 0 0 10px;
  font-size: 16px;
  letter-spacing: .2px;
}
.slide p{ margin: 0 20px;
}
.slide::before{
  content:"";
  position:absolute;
  top: 12px;
  bottom: 12px;
  left: 22px;
  width: 2px;
  background: rgba(255, 120, 140, .35);
}
.slide img.trip{
  display: inline-block;
  width: auto;
  height: 280px;         
  object-fit: contain;
  margin: 3px auto;
  background: #505050;
  padding: 5px;
  vertical-align: top;
  border-radius: 8px;
}
.track .slide:nth-child(2){
  text-align: center;
}
.track .slide:nth-child(2) p{
  text-align: left;
  font-size: 13px;
}
.track .slide:nth-child(1) li{
  font-size: 18px;
}
.track .slide:nth-child(1) h3{
  font-size: 20px;
}

.car-btn{
  background: none;
  border: none;
  color: inherit;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  opacity: .85;
  font-size: 28px;
  line-height: 1;
}
.car-btn:hover{
  opacity: 1;
}
.car-btn:disabled{
  opacity: .35;
  cursor: default;
}

.loopcar{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}

.loop-track{
  display: flex;
  gap: 14px;
  will-change: transform;
  transition: transform 350ms cubic-bezier(.22, 1, .36, 1);
  z-index: 1;
}

/* The trick for "peek": slide is narrower than viewport */
.loop-slide{
  flex: 0 0 53%;            /* try 70–85% to control peek amount */
  border: 1px solid rgba(240,238,230,.18);
  border-radius: 12px;
  padding: 18px;
  background: rgba(0,0,0,.06);
  box-shadow: none;
}

/* Center emphasis (we’ll toggle this via JS) */
.loop-slide.is-active{
  transform: scale(1.02);
  border-color: rgba(240,238,230,.32);
  background: rgba(240,238,230,.06);
}

/* Buttons: simple carrots */
.loop-btn{
  background: none;
  border: 0;
  color: inherit;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: .85;
  z-index: 5;
}

.loop-btn:hover{
  opacity: 1;
}
.loop-viewport{
  position: relative;
  overflow: hidden;
  padding: 6px 0;
  z-index: 0;
}

.loop-viewport::before,
.loop-viewport::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 70px;
  pointer-events:none;
  z-index: 3;
}

.loop-viewport::before{
  left:0;
  background: linear-gradient(to right, #474747, rgba(71,71,71,0));
}

.loop-viewport::after{
  right:0;
  background: linear-gradient(to left, #474747, rgba(71,71,71,0));
}

.ironing-board{
  max-width: 1000px;
  margin: 30px auto;
  padding: 20px;
  padding-left: 150px;
  padding-right: 17px;
  font-size: .75rem;
  line-height: 1.65;
  background: #727272;
  border: none;
  border-radius: 34px;
  transform: translateX(-20px);

  clip-path: polygon(
    24% 0%,
    100% 0%,
    100% 100%,
    24% 100%,
    2% 64%,
    2% 36%
  );
}

.footer{
  border-top:1px solid var(--border);
  padding: 18px var(--pad);
  text-align:center;
  color: #f0eee6;
}

hr{
  border: 0;
  height: 0;
  border-top: 5px solid #323232;
  width: 74%;
}