/* Reset & base */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  width: 100%;
  background: linear-gradient(250.59deg,#F6D8CE 0%,#F2F5A9 28.53%, #81F7BE 75.52%);
  font-family: "IBM Plex Mono", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #111;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
.sr-only { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.skip-link { position:absolute; top:-40px; left:0; background:#000; color:#fff; padding:.5rem; z-index:10000; }
.skip-link:focus { top:0; }

/* Breadcrumbs */
.breadcrumbs { padding: .5rem 1rem; font-size: .9rem; }
.breadcrumbs ol { display:flex; gap:.5rem; list-style:none; flex-wrap:wrap; }
.breadcrumbs li::after { content: "›"; margin: 0 .4rem; opacity:.6; }
.breadcrumbs li:last-child::after { content: ""; }
.breadcrumbs a { text-decoration: underline; }

/* Wrapper & Header */
.wrapper { width: 100%; position: relative; left: 0; transition: .3s; }
header {
  position: sticky; top: 0; left: 0; z-index: 1000;
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,.85); backdrop-filter: blur(6px);
  border-bottom: 1px solid #eee;
}
header img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; transition: transform .25s ease; }
header img:hover { transform: scale(1.04); }
header .toggle {
  font-size: 36px; color: #d00; cursor: pointer; line-height: 1;
  background: transparent; border: none; display: inline-flex; align-items: center; justify-content: center;
}
header .toggle.active{
  width: 50px; height: 50px; color: transparent;
  background: url(folder-img/crrr.jpg) center/cover no-repeat;
  border-radius: 40%; border: 2px solid #0b610b;
}

/* Sidebar (dropdown style) */
.sidebar {
  position: fixed; inset: 56px 0 auto 0;
  height: 0; overflow: hidden;
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
  transition: height .3s ease;
}
.sidebar.active { height: 180px; }
.sidebar ul { height:100%; display:flex; gap:.75rem; justify-content:center; align-items:center; }
.sidebar a{
  font-size: clamp(1rem, 3vw, 1.25rem);
  text-transform: uppercase; font-weight: 700;
  -webkit-text-fill-color:white; -webkit-text-stroke:1px #000;
  padding:.35rem .75rem; border-radius: 12px;
}

/* STORIES SELECTOR */
.stories-select{
  width: min(100%, 1100px);
  margin: 16px auto 0;
  padding: 16px 16px 0;
}
.stories-select h1{
  text-align:center;
  font-family: "Permanent Marker", cursive;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  -webkit-text-stroke: 2px #000;
  -webkit-text-fill-color: transparent;
  margin-bottom: .5rem;
}
.story-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 8px 0 6px;
}
.story-card{
  background:#fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  border: 1px solid #eee;
  display:flex; flex-direction: column;
}
.story-pick{
  display:block; width:100%;
  border: none; background: transparent; text-align: left; cursor: pointer;
}
.story-pick img{ width:100%; aspect-ratio: 3/2; object-fit: cover; }
.story-name{
  display:block; font-weight:700; padding:.6rem .8rem;
  font-size: clamp(1rem, 2.6vw, 1.15rem);
}
.story-desc{ padding: 0 .8rem .8rem; color:#333; font-size:.95rem; }
.hint{ text-align:center; font-size:.95rem; color:#333; margin: 6px 0 8px; }

/* Individual story panes */
.story-pane{ margin-top: 6px; }
.story-pane.is-active { display:block; }
.story-pane[hidden] { display:none !important; }

/* Story blocks (reused from previous design) */
.section3{
  width: min(100%, 1100px);
  margin: 10px auto 16px;
  padding: clamp(16px, 4vw, 32px);
  border-radius: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
}
.section3 .bbb{
  font-family: "Permanent Marker", cursive;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  text-align: center; letter-spacing:.5px;
  -webkit-text-stroke:2px #000; -webkit-text-fill-color:transparent;
  margin-bottom: .25rem;
}
.section3 h2 { text-align:center; }

.section3 .start{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: start;
  padding: 16px 0;
}
p { font-size: clamp(1rem, 2.6vw, 1.2rem); line-height: 1.6; }
p.intro, p.part1 {
  border: 2px solid #000;
  padding: 14px 16px;
  margin: 12px 0;
  text-transform: none;
  border-radius: 14px;
  background:#fff;
}
p.intro:first-letter, p.part1:first-letter{
  font-size: 2.6rem; float: left; line-height: .9;
  margin: .1rem .6rem 0 0;
  color: #AC58FA; -webkit-text-stroke: 2px #000; -webkit-text-fill-color: transparent;
}
.start .intro1{
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  border: 1px solid seagreen;
  width: min(220px, 40vw);
}
img.part1{
  width: 100%;
  border-radius: 16px;
  margin: 10px 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* Gallery */
.section4 { width: 100%; padding: 0 1rem; }
.section4 h2{
  text-align:center;
  font-family: "Karla", system-ui; font-weight:700;
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin: .5rem auto 0;
}
.wrap{
  width: min(100%, 900px);
  margin: 12px auto 24px;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
  background:#fff;
}
.holder{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.slide{ scroll-snap-align: center; }
.slide figure{ margin:0; }
.slide img{ width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display:block; }
.slide figcaption{
  padding: .5rem .75rem; font-size: .95rem; background:#fff; border-top: 1px solid #eee;
}

/* Dots */
.button-holder{ display:flex; justify-content:center; gap:.45rem; margin: .5rem auto 2rem; }
.button-holder .dot{
  width: 12px; height: 12px; border-radius: 999px; background:#fff; border:1px solid #000;
}
.button-holder .dot[aria-selected="true"]{ background:#000; }

/* Responsive */
@media (max-width: 980px){
  .story-cards{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px){
  .story-cards{ grid-template-columns: 1fr; }
  header img { width: 48px; height: 48px; }
  .section3{ border-radius: 16px; }
  .section3 .start{ grid-template-columns: 1fr; }
  .start .intro1{ width: min(260px, 65vw); justify-self:center; }
}
@media (max-width: 380px){
  .sidebar a{ -webkit-text-stroke: .8px #000; }
}

/* Reduced motion */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after{
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}