/* Basic layout and navigation */
:root{
  --bg:#fbf6ef; /* light parchment tone so PNG alpha looks natural */
  --text:#1a1a1a; /* charcoal black */
  --accent:#6b4423; /* deep chocolate brown */
  --accent-light:#d4a574; /* beeswax gold */
  --link:#b8860b; /* dark goldenrod */
  --link-hover:#8b7355; /* taupe brown */
  --muted:#666;
  --ribbon:#2d2d2d; /* dark gray */
}

body{font-family:Segoe UI, Roboto, Arial, sans-serif;margin:0;color:var(--text);background:var(--bg);background-image:radial-gradient(rgba(0,0,0,0.01) 1px, transparent 1px);background-size:18px 18px}
/* Heading styles */
h1,h2,h3,h4,h5,h6{color:var(--accent);margin:1.5rem 0 1rem 0;font-weight:700}
h1{font-size:2rem}
h2{font-size:1.75rem}
h3{font-size:1.5rem}
h4{font-size:1.25rem}
h5{font-size:1.1rem}
h6{font-size:1rem}
.container{max-width:1000px;margin:0 auto;padding:1rem}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{margin:0;font-size:2rem;color:var(--accent);font-family:'Playfair Display',serif;font-weight:700}
.nav{display:flex;gap:0.75rem}
.nav a{display:inline-block;padding:0.5rem 0.6rem;color:var(--text);text-decoration:none;border-radius:4px}
.nav a:hover{background:#f3f3f3}
.nav a.active{background:var(--accent-light);color:#fff}
.nav-toggle{display:none;background:transparent;border:0;font-size:1.25rem}
.hero{padding:2rem 0}
/* Centered image and intro text for "What is wax?" section */
.what-is-wax{padding:1.5rem 0;border-top:1px solid #f0e9e3;margin-top:1rem}
.hero-image{text-align:center;margin:0.75rem 0;max-width:40ch;margin-left:auto;margin-right:auto}
.hero-image img{max-width:100%;height:auto;display:block;margin:0 auto}
.intro-text{max-width:760px;margin:0.75rem auto;color:var(--text);line-height:1.55;margin-top:2rem}
.intro-text p{margin:0.75rem 0}
/* Links page styling */
.links-list{margin-top:2rem}
.link-item{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid #e8dfd6}
.link-item p{margin:0 0 0.75rem 0;color:var(--text)}
.link-item strong{color:var(--accent)}
.link-item a{color:var(--link);text-decoration:none;font-weight:500}
.link-item a:hover{color:var(--link-hover);text-decoration:underline}
/* Collection page styling */
.collection-item{margin:2rem 0;padding:2rem 0;border-bottom:2px solid #e8dfd6}
.collection-item:last-child{border-bottom:none}
.collection-item h3{margin-top:0}
.item-images{display:flex;gap:1.5rem;margin:1.5rem 0;flex-wrap:wrap}
.image-wrapper{flex:1;min-width:250px;overflow:hidden}
.lightbox-image{width:100%;height:300px;object-fit:cover;display:block;cursor:pointer;border-radius:6px;transition:transform 0.2s}
.lightbox-image:hover{transform:scale(1.02)}
.image-wrapper:nth-child(2) .lightbox-image{object-position:center 50%}

/* Collection item layout options */
/* Default: images-top (images above text) */
.collection-item.collection-layout{display:block}
.collection-item.collection-layout .item-images{display:flex;gap:1.5rem;margin:1.5rem 0;flex-wrap:wrap}
.collection-item.collection-layout .image-wrapper{flex:1;min-width:250px;overflow:hidden}
.collection-item.collection-layout .lightbox-image{width:100%;height:300px;object-fit:cover;cursor:pointer;border-radius:6px;transition:transform 0.2s;display:block}
.collection-item.collection-layout .lightbox-image:hover{transform:scale(1.02)}

/* images-right: text on left (1/1), images on right (1/1) */
.collection-item.images-right{display:flex;gap:3rem;align-items:flex-start}
.collection-item.images-right > :first-child{flex:1;min-width:250px}
.collection-item.images-right > :last-child{flex:1;min-width:250px;display:flex;justify-content:flex-end}
.collection-item.images-right .item-images{width:100%;max-width:450px;flex-direction:row;gap:1rem;margin:0}
.collection-item.images-right .image-wrapper{flex:1;min-width:150px;overflow:hidden}
.collection-item.images-right .lightbox-image{width:100%;height:300px;object-fit:cover;cursor:pointer;border-radius:6px;transition:transform 0.2s;display:block}
.collection-item.images-right .lightbox-image:hover{transform:scale(1.02)}
@media(max-width:768px){.collection-item.images-right{flex-direction:column}.collection-item.images-right > :last-child{flex:1;justify-content:center}.collection-item.images-right .item-images{max-width:100%;flex-direction:row}}

/* images-right-single: text on left (1/1), single image on right (1/1) */
.collection-item.images-right-single{display:flex;gap:3rem;align-items:flex-start}
.collection-item.images-right-single > :first-child{flex:1;min-width:250px}
.collection-item.images-right-single > :last-child{flex:1;min-width:250px;display:flex;justify-content:flex-end}
.collection-item.images-right-single .lightbox-image{width:100%;max-width:400px;height:500px;object-fit:cover;cursor:pointer;border-radius:6px;transition:transform 0.2s;display:block}
.collection-item.images-right-single .lightbox-image:hover{transform:scale(1.02)}
@media(max-width:768px){.collection-item.images-right-single{flex-direction:column}.collection-item.images-right-single > :last-child{flex:1;justify-content:center}}

/* Wax stories styling */
.wax-story{margin:2rem 0;padding:2rem 0;border-bottom:2px solid #e8dfd6}
.wax-story:last-child{border-bottom:none}
.wax-story h3{margin-top:0}
.story-date{color:var(--muted);font-style:italic;margin-top:-0.5rem;margin-bottom:1.5rem}
.story-image{margin:2rem 0;text-align:center}
.story-image img{max-width:100%;height:auto;border-radius:6px}
.story-content{line-height:1.6;color:var(--text)}
.story-content p{margin:1.25rem 0}
.story-content a{color:var(--link);text-decoration:none;font-weight:500}
.story-content a:hover{color:var(--link-hover);text-decoration:underline}
.story-content strong{color:var(--accent);font-weight:700}
.story-table{width:100%;border-collapse:collapse;margin:1.5rem 0}
.story-table th,.story-table td{padding:0.75rem;text-align:left;border-bottom:1px solid #e8dfd6}
.story-table th{background-color:#f5f1ea;color:var(--text);font-weight:700}
.story-table tr:hover{background-color:#faf7f2}
.story-table td{color:var(--text)}

/* Lightbox modal */
.lightbox{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.85);z-index:1000;align-items:center;justify-content:center;padding:2rem}
.lightbox.active{display:flex}
.lightbox img{max-width:90vw;max-height:90vh;object-fit:contain}
/* Black ribbon section - 17 lines tall */
.black-ribbon{background-color:var(--ribbon);width:100vw;height:calc(17 * 1.5rem);margin-left:calc(-50vw + 50%);position:relative}
/* Bee wax background section */
.beeswax-section{width:100%;min-height:500px;background-size:cover;background-position:center;background-attachment:fixed;margin-top:calc(3 * 1.5rem);display:flex;align-items:center;justify-content:center;padding:2rem;background-color:#fbf6ef}
.beeswax-content{display:flex;gap:2rem;max-width:900px;width:100%;align-items:center;flex-direction:row}
.beeswax-column{flex:1;min-width:0}
.beeswax-column h3{margin-top:0;color:var(--text)}
.beeswax-column p{color:var(--text);line-height:1.55}
.beeswax-column img{width:100%;height:auto;display:block;border-radius:6px}
figcaption{font-size:0.9rem;color:#000;font-style:italic;margin-top:0.5rem;text-align:center}
@media (max-width:768px){
  .beeswax-content{flex-direction:column;gap:1.5rem}
  .beeswax-section{background-attachment:scroll;min-height:auto;padding:1.5rem;background-image:none}
}
@media (min-width:769px){
  .beeswax-section{margin:0 1.6rem;width:calc(100% - 3.2rem);border:15px solid rgba(0,0,0,0.08)}
}
footer.footer{padding:1rem 0;border-top:1px solid #eee;color:var(--muted)}

/* Responsive */
@media (max-width:700px){
  .nav{position:absolute;left:0;right:0;top:64px;background:#fff;flex-direction:column;padding:1rem;display:none}
  .nav.open{display:flex}
  .nav-toggle{display:inline-block}
  .header-inner{position:relative}
}