/* ============================================
   COMPLETE BELLE ÉPOQUE CSS
   All styles in one file - Fixed version
   ============================================ */

/* ============================================
   RESET
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  hanging-punctuation: first last;
  scroll-behavior: smooth;
}

body {
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* ============================================
   COLOR PALETTE & VARIABLES
   ============================================ */
:root {
  /* Base palette */
  --dark: #222222;
  --bright: #F4F2EE;
  --gold: #BFA46F;
  --teal: #4C8888;
  --red: #B91414;
  
  /* Derived colors */
  --dark-gold: #8B7B5A;
  --light-gold: #D4C4A0;
  --pale-gold: #E8DCC8;
  
  --dark-teal: #3A6666;
  --light-teal: #6BA3A3;
  --pale-teal: #A8CBCB;
  
  --dark-red: #8A0F0F;
  --light-red: #D84444;
  
  --warm-bright: #EBE7E0;
  --cool-bright: #E8EBE9;
  
  --charcoal: #333333;
  --medium-gray: #666666;
  --light-gray: #AAAAAA;
  
  /* Layout */
  --content-width: 70ch;
  --page-padding: clamp(1rem, 5vw, 3rem);
  --grid-gap: clamp(1rem, 3vw, 2rem);
}

/* ============================================
   BASE TYPOGRAPHY
   ============================================ */
body {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  line-height: 1.75;
  color: var(--dark);
  background: var(--bright);
  font-feature-settings: 
    "liga" 1,
    "dlig" 1,
    "hlig" 1;
}

h1, h2, h3 {
  font-family: 'Italiana', serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1em;
  text-rendering: optimizeLegibility;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 5rem);
  text-align: center;
  position: relative;
  padding: 1rem 0;
  -webkit-text-stroke: 0.7px currentColor;
}

h1::before,
h1::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    var(--gold) 20%,
    var(--gold) 80%,
    transparent
  );
}

h1::before { top: 0; }
h1::after { bottom: 0; }

h2 {
  font-size: clamp(1.75rem, 3vw, 3rem);
  border-bottom: 3px double var(--gold);
  padding-bottom: 0.5rem;
  -webkit-text-stroke: 0.5px currentColor;
}

h3 {
  font-size: clamp(1.25rem, 2vw, 2rem);
  color: var(--red);
  -webkit-text-stroke: 0.3px currentColor;
}

h1, h2, h3 {
  text-wrap: balance;
}

p {
  margin-bottom: 1rem;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 2;
}

em {
  font-style: italic;
}

strong {
  font-weight: 700;
}

/* ============================================
   LINKS
   ============================================ */
a {
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  transition: all 0.3s ease;
}

a:hover {
  color: var(--teal);
  border-bottom-color: var(--red);
}

/* ============================================
   LAYOUT GRID
   ============================================ */
.page-grid {
  display: grid;
  grid-template-columns: 
    [full-start] var(--page-padding)
    [wide-start] 1fr
    [content-start] minmax(0, var(--content-width)) [content-end]
    1fr [wide-end]
    var(--page-padding) [full-end];
  row-gap: var(--grid-gap);
}

.page-grid > * {
  grid-column: content;
}

.full { grid-column: full; }
.wide { grid-column: wide; }
.breakout-left { grid-column: wide-start / content-end; }
.breakout-right { grid-column: content-start / wide-end; }

/* Split layouts */
.split {
  display: grid;
  grid-template-columns: 1fr 4fr;
  gap: var(--grid-gap);
  grid-column: content;
}

@media (max-width: 768px) {
  .split {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   NAVIGATION
   ============================================ */
.deco-nav {
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 2rem;
  background: var(--dark);
  border-bottom: 4px solid var(--gold);
  position: sticky;
  top: 0;
  z-index: 100;
}

.deco-nav a {
  padding: 1rem 2rem;
  font-family: 'Italiana', serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
  text-decoration: none;
  border: 2px solid transparent;
  border-bottom: none;
  border-left: 2px solid var(--dark-gold);
  position: relative;
  transition: all 0.3s ease;
}

.deco-nav a:first-child {
  border-left: none;
}

.deco-nav a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.deco-nav a:hover {
  color: var(--bright);
  background: var(--red);
}

.deco-nav a:hover::before {
  width: 80%;
}

.deco-nav a.active {
  background: var(--red);
  color: var(--bright);
  border-color: var(--gold);
}

.deco-nav a.active::after {
  content: '◆';
  position: absolute;
  bottom: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gold);
}

/* ============================================
   HERO SECTION
   ============================================ */
.poster-hero {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 4rem 2rem;
  background: linear-gradient(180deg, var(--red) 0%, var(--dark) 100%);
  overflow: hidden;
  text-align: center;
}

.poster-hero::before {
  content: '';
  position: absolute;
  inset: 2rem;
  border: 4px double var(--gold);
  pointer-events: none;
}

.poster-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      transparent 0deg,
      rgba(191, 164, 111, 0.05) 5deg,
      transparent 10deg
    );
  pointer-events: none;
}

.poster-title {
  font-family: 'Italiana', serif;
  font-size: clamp(3rem, 10vw, 8rem);
  line-height: 0.9;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
  font-weight: 400;
  -webkit-text-stroke: 0.5px var(--gold);
  text-shadow: 
    2px 2px 0 var(--red),
    4px 4px 0 rgba(34, 34, 34, 0.5);
  position: relative;
  z-index: 1;
}

.poster-subtitle {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1rem, 3vw, 2rem);
  color: var(--bright);
  margin-top: 2rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

.poster-subtitle::before,
.poster-subtitle::after {
  content: '◆';
  margin: 0 1rem;
  color: var(--gold);
}

/* Flourishes */
.flourish-top,
.flourish-bottom {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 50px;
  z-index: 1;
  pointer-events: none;
}

.flourish-top {
  top: 3rem;
  border-top: 2px solid var(--gold);
  border-left: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
}

.flourish-top::before,
.flourish-top::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid var(--gold);
  border-radius: 50%;
}

.flourish-top::before {
  top: -10px;
  left: -25px;
}

.flourish-top::after {
  top: -10px;
  right: -25px;
}

.flourish-bottom {
  bottom: 3rem;
  border-bottom: 2px solid var(--gold);
  border-left: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
}

.flourish-bottom::before,
.flourish-bottom::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid var(--gold);
  border-radius: 50%;
}

.flourish-bottom::before {
  bottom: -10px;
  left: -25px;
}

.flourish-bottom::after {
  bottom: -10px;
  right: -25px;
}

/* ============================================
   BREADCRUMBS
   ============================================ */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  font-size: 0.9rem;
  color: var(--dark-gold);
}

.breadcrumbs a {
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.breadcrumbs a:hover {
  border-bottom-color: var(--gold);
}

.breadcrumbs::before {
  content: '⟡';
  color: var(--gold);
  margin-right: 0.5rem;
}

.breadcrumbs > *:not(:last-child)::after {
  content: '▸';
  margin-left: 1rem;
  color: var(--gold);
}

/* ============================================
   TYPOGRAPHY ELEMENTS
   ============================================ */

/* Drop Cap */
.drop-cap::first-letter {
  font-family: 'Italiana', serif;
  float: left;
  font-size: 4.5em;
  line-height: 0.85;
  margin: 0.1em 0.1em 0 0;
  color: var(--red);
  text-shadow: 2px 2px 0 var(--gold);
}

/* Auto drop-cap for first paragraph in content */
.content-body > p:first-of-type {
  font-size: 1.2rem;
  line-height: 1.8;
  text-indent: 0;
}

.content-body > p:first-of-type::first-letter {
  font-family: 'Italiana', serif;
  float: left;
  font-size: 4.5em;
  line-height: 0.85;
  margin: 0.1em 0.1em 0 0;
  color: var(--red);
  text-shadow: 2px 2px 0 var(--gold);
}

/* Versal (decorated initial) */
.versal {
  float: left;
  font-family: 'Italiana', serif;
  font-size: 5em;
  line-height: 0.8;
  margin: 0.1em 0.15em 0 0;
  color: var(--red);
  text-shadow: 2px 2px 0 var(--gold);
  position: relative;
}

.versal::before {
  content: '';
  position: absolute;
  inset: -0.1em;
  border: 2px solid var(--gold);
  z-index: -1;
}

/* Chapter number */
.chapter-number {
  font-family: 'Italiana', serif;
  font-size: 8rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.2;
  position: absolute;
  top: -2rem;
  left: -1rem;
  z-index: -1;
  font-weight: 400;
}

/* Divider */
.divider {
  text-align: center;
  margin: 3rem 0;
  position: relative;
}

.divider::before {
  content: '◆';
  font-size: 1.5rem;
  color: var(--gold);
  padding: 0 1rem;
  background: var(--bright);
  position: relative;
  z-index: 1;
}

.divider::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold);
  z-index: 0;
}

/* Chevron divider */
.chevron-divider {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 30px solid var(--gold);
  margin: 2rem auto;
}

/* Diamond divider */
.diamond {
  width: 60px;
  height: 60px;
  background: var(--red);
  transform: rotate(45deg);
  margin: 2rem auto;
  position: relative;
}

.diamond::before {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--gold);
}

/* Bordered content */
.bordered {
  border: 3px solid var(--gold);
  border-image: repeating-linear-gradient(
    45deg,
    var(--gold),
    var(--gold) 10px,
    var(--dark-gold) 10px,
    var(--dark-gold) 20px
  ) 3;
  padding: 2rem;
  position: relative;
}

.bordered::before,
.bordered::after {
  content: '❖';
  position: absolute;
  color: var(--gold);
  font-size: 1.5rem;
  background: var(--bright);
  padding: 0 0.5rem;
}

.bordered::before {
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
}

.bordered::after {
  bottom: -0.75rem;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

/* Pullquote */
.pullquote {
  font-family: 'Italiana', serif;
  font-size: 1.5em;
  line-height: 1.4;
  text-align: center;
  padding: 2rem;
  margin: 2rem 0;
  border-top: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
  position: relative;
}

.pullquote::before {
  content: '"';
  font-size: 4rem;
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--red);
  line-height: 1;
}

blockquote {
  font-family: 'Italiana', serif;
  font-size: 1.5em;
  line-height: 1.4;
  text-align: center;
  padding: 2rem;
  margin: 2rem 0;
  border-top: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
  position: relative;
}

blockquote::before {
  content: '"';
  font-size: 4rem;
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--red);
  line-height: 1;
}

/* Framed images */
.framed {
  border: 8px solid var(--dark);
  box-shadow: 
    inset 0 0 0 2px var(--gold),
    inset 0 0 0 10px var(--bright),
    0 10px 30px rgba(34, 34, 34, 0.3);
  padding: 1rem;
  background: var(--bright);
}

.framed img {
  display: block;
  width: 100%;
}

figcaption {
  font-family: 'Italiana', serif;
  text-align: center;
  font-size: 0.9em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 1rem;
  color: var(--dark-gold);
}

/* Oldstyle numerals */
.oldstyle-nums {
  font-feature-settings: "onum" 1;
}

/* True small caps */
.true-small-caps {
  font-feature-settings: "smcp" 1;
  letter-spacing: 0.05em;
}

/* Small caps utility */
.small-caps {
  font-variant: small-caps;
  letter-spacing: 0.05em;
}

/* Swash characters */
.swash {
  font-feature-settings: "swsh" 1;
}

/* Optical margin */
.optical-margin {
  text-indent: -0.05em;
}

/* Ornate first line */
.ornate-first::first-line {
  font-variant: small-caps;
  letter-spacing: 0.15em;
  font-size: 1.1em;
}

/* ============================================
   CODE BLOCKS
   ============================================ */
.code-frame {
  background: var(--dark);
  border: 4px solid var(--gold);
  box-shadow: 
    inset 0 0 0 1px var(--bright),
    inset 0 0 0 8px var(--dark),
    0 8px 24px rgba(34, 34, 34, 0.4);
  margin: 2rem 0;
  position: relative;
  overflow: hidden;
}

.code-frame::before {
  content: '⬡ ' attr(data-language) ' ⬡';
  display: block;
  background: linear-gradient(135deg, var(--red), var(--dark-gold));
  color: var(--bright);
  padding: 0.5rem 1rem;
  font-family: 'Italiana', serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  text-align: center;
  border-bottom: 2px solid var(--gold);
}

.code-frame pre {
  margin: 0;
  padding: 1.5rem;
  overflow-x: auto;
  background: var(--dark);
  color: var(--bright);
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 1.1rem;
  line-height: 1.6;
  text-decoration: none;
}

.code-frame pre code {
  text-decoration: none;
  border: none;
  background: transparent;
  padding: 0;
}

/* Prism.js syntax highlighting with belle époque color scheme */

/* Override Prism.js default theme with our custom colors */
.code-frame pre[class*="language-"] {
  background: var(--dark) !important;
  color: var(--bright) !important;
  font-family: 'Courier Prime', 'Courier New', monospace !important;
  font-size: 1.1rem !important;
  line-height: 1.4 !important;
  text-shadow: none !important;
  margin: 0 !important;
  padding: 1.5rem !important;
}

.code-frame code[class*="language-"] {
  line-height: 1.4 !important;
  font-size: 1.1rem !important;
  text-decoration: none !important;
  border: none !important;
}

/* Remove any borders or decorations from code elements and spans */
.code-frame pre[class*="language-"] *,
.code-frame code[class*="language-"] * {
  text-decoration: none !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Prism.js token colors - ir_black inspired */
.code-frame pre[class*="language-"] .token.keyword,
.code-frame pre[class*="language-"] .token.boolean,
.code-frame pre[class*="language-"] .token.constant,
.code-frame pre[class*="language-"] .token.important {
  color: #96CBFE !important; /* ir_black blue - bright and distinctive */
  font-weight: bold;
}

.code-frame pre[class*="language-"] .token.string,
.code-frame pre[class*="language-"] .token.char,
.code-frame pre[class*="language-"] .token.attr-value {
  color: #A8FF60 !important; /* ir_black green - vibrant and clear */
}

.code-frame pre[class*="language-"] .token.number,
.code-frame pre[class*="language-"] .token.hexcode {
  color: #FF73FD !important; /* ir_black magenta - stands out beautifully */
}

.code-frame pre[class*="language-"] .token.comment,
.code-frame pre[class*="language-"] .token.prolog,
.code-frame pre[class*="language-"] .token.doctype,
.code-frame pre[class*="language-"] .token.cdata {
  color: #7C7C7C !important; /* ir_black gray - subtle and readable */
  font-style: italic;
}

.code-frame pre[class*="language-"] .token.function,
.code-frame pre[class*="language-"] .token.function-name {
  color: #FFD2A7 !important; /* ir_black peach - warm and inviting */
}

.code-frame pre[class*="language-"] .token.operator,
.code-frame pre[class*="language-"] .token.entity,
.code-frame pre[class*="language-"] .token.url {
  color: var(--bright) !important; /* white - clean and simple */
}

.code-frame pre[class*="language-"] .token.variable,
.code-frame pre[class*="language-"] .token.parameter,
.code-frame pre[class*="language-"] .token.property {
  color: #C6C5FE !important; /* ir_black light purple - soft and readable */
}

.code-frame pre[class*="language-"] .token.class-name,
.code-frame pre[class*="language-"] .token.type {
  color: #FFFFB6 !important; /* ir_black yellow - bright and clear */
}

.code-frame pre[class*="language-"] .token.symbol,
.code-frame pre[class*="language-"] .token.selector,
.code-frame pre[class*="language-"] .token.tag {
  color: #C6C5FE !important; /* ir_black light purple - consistent with variables */
}

/* Delimiters in gold - belle époque aesthetic */
.code-frame pre[class*="language-"] .token.punctuation,
.code-frame pre[class*="language-"] .token.delimiter,
.code-frame pre[class*="language-"] .token.bracket {
  color: var(--gold) !important; /* gold - matches your belle époque theme */
}

/* Special elements in warm colors */
.code-frame pre[class*="language-"] .token.special,
.code-frame pre[class*="language-"] .token.builtin {
  color: #E18964 !important; /* ir_black brown - good for special elements */
}

/* Copy button styling */
.code-frame .copy-to-clipboard-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: var(--gold);
  color: var(--dark);
  border: none;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.3s ease;
}

.code-frame .copy-to-clipboard-button:hover {
  background: var(--bright);
  color: var(--dark);
}

/* Force our custom colors to override Prism theme - highest priority */
.code-frame pre[class*="language-"] .token.keyword { 
  color: #96CBFE !important; 
  font-weight: bold !important; 
}

.code-frame pre[class*="language-"] .token.string { 
  color: #A8FF60 !important; 
}

.code-frame pre[class*="language-"] .token.number { 
  color: #FF73FD !important; 
}

.code-frame pre[class*="language-"] .token.comment { 
  color: #7C7C7C !important; 
  font-style: italic !important; 
}

.code-frame pre[class*="language-"] .token.function { 
  color: #FFD2A7 !important; 
}

.code-frame pre[class*="language-"] .token.operator { 
  color: #F4F2EE !important; 
}

.code-frame pre[class*="language-"] .token.variable { 
  color: #C6C5FE !important; 
}

.code-frame pre[class*="language-"] .token.class-name { 
  color: #FFFFB6 !important; 
}

.code-frame pre[class*="language-"] .token.symbol { 
  color: #C6C5FE !important; 
}

.code-frame pre[class*="language-"] .token.punctuation { 
  color: #BFA46F !important; 
}

.code-frame pre[class*="language-"] .token.special { 
  color: #E18964 !important; 
}

code {
  background: var(--dark);
  color: var(--gold);
  padding: 0.15em 0.4em;
  border-radius: 0;
  font-family: 'Courier Prime', monospace;
  font-size: 0.9em;
  
  text-decoration: none;
}

/* Remove borders from code elements inside code frames */
.code-frame code {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.terminal {
  background: var(--dark);
  color: var(--light-teal);
  font-family: 'Courier Prime', monospace;
  padding: 1.5rem;
  border: 3px double var(--gold);
  position: relative;
  overflow: hidden;
}

.terminal::before {
  content: '◆◆◆';
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  color: var(--gold);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
}

.terminal .prompt { color: var(--gold); }
.terminal .output { color: var(--light-teal); }

/* ============================================
   GALLERY COMPONENTS
   ============================================ */

/* Salon wall hanging */
.salon-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(1rem, 3vw, 3rem);
  padding: 2rem;
  background: 
    repeating-linear-gradient(
      0deg,
      var(--bright),
      var(--bright) 2px,
      transparent 2px,
      transparent 40px
    ),
    repeating-linear-gradient(
      90deg,
      var(--bright),
      var(--bright) 2px,
      transparent 2px,
      transparent 40px
    );
  background-color: var(--charcoal);
}

.salon-wall figure {
  grid-column: span 1;
  position: relative;
}

.salon-wall figure:nth-child(3n) {
  grid-column: span 2;
  grid-row: span 2;
}

/* Ornate frame */
.ornate-frame {
  padding: 1.5rem;
  background: 
    linear-gradient(45deg, var(--dark-gold) 0%, var(--gold) 50%, var(--dark-gold) 100%);
  box-shadow: 
    inset 0 0 0 2px var(--dark),
    inset 0 0 0 4px var(--bright),
    inset 0 0 0 12px var(--dark-gold),
    inset 0 0 0 14px var(--dark),
    0 10px 40px rgba(34, 34, 34, 0.5);
  position: relative;
}

.ornate-frame::before,
.ornate-frame::after {
  content: '❈';
  position: absolute;
  color: var(--red);
  font-size: 2rem;
  text-shadow: 1px 1px 0 var(--gold);
}

.ornate-frame::before { top: 0.5rem; left: 0.5rem; }
.ornate-frame::after { bottom: 0.5rem; right: 0.5rem; }

.ornate-frame img {
  display: block;
  width: 100%;
  border: 2px solid var(--dark);
}

/* Triptych layout */
.triptych {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 1rem;
  margin: 3rem 0;
}

.triptych figure {
  border: 6px solid var(--gold);
  padding: 0.5rem;
  background: var(--dark);
}

.triptych figure:nth-child(2) {
  transform: scale(1.1);
  z-index: 1;
  box-shadow: 0 20px 60px rgba(34, 34, 34, 0.6);
}

/* Comparison slider */
.comparison {
  position: relative;
  overflow: hidden;
  border: 4px solid var(--gold);
}

.comparison img {
  display: block;
  width: 100%;
}

.comparison .after {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  border-right: 4px solid var(--red);
}

.comparison .slider {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background: var(--gold);
  cursor: ew-resize;
  z-index: 10;
}

.comparison .slider::before {
  content: '◆';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--red);
  font-size: 2rem;
  background: var(--bright);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--gold);
  border-radius: 50%;
}

/* ============================================
   BOOK COMPONENTS
   ============================================ */

/* Book card */
.book-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  padding: 2rem;
  background: var(--bright);
  border: 3px solid var(--red);
  border-left: 20px solid var(--red);
  position: relative;
  margin: 2rem 0;
}

.book-card::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 0;
  bottom: 0;
  width: 20px;
  background: 
    repeating-linear-gradient(
      0deg,
      var(--dark-gold),
      var(--dark-gold) 2px,
      var(--red) 2px,
      var(--red) 4px
    );
}

.book-spine {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'Italiana', serif;
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 1rem 0.5rem;
  background: var(--red);
  color: var(--gold);
  border: 2px solid var(--gold);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-content h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--red);
}

.book-meta {
  font-size: 0.9rem;
  color: var(--dark-gold);
  margin-bottom: 1rem;
  font-style: italic;
}

.book-quote {
  border-left: 4px double var(--gold);
  padding-left: 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--dark);
}

/* Progress bar */
.progress-bar {
  height: 8px;
  background: var(--bright);
  border: 2px solid var(--gold);
  margin-top: 1rem;
  position: relative;
  overflow: hidden;
}

.progress-bar::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--progress, 0%);
  background: linear-gradient(
    90deg,
    var(--red),
    var(--gold),
    var(--red)
  );
  transition: width 0.3s ease;
}

.progress-bar::after {
  content: attr(data-progress);
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  color: var(--dark-gold);
  font-family: 'Italiana', serif;
}

/* Bookshelf */
.bookshelf {
  display: flex;
  gap: 0.5rem;
  padding: 2rem;
  background: var(--charcoal);
  border: 4px solid var(--dark-gold);
  border-bottom: 20px solid var(--dark-gold);
  overflow-x: auto;
  position: relative;
}

.bookshelf::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  height: 20px;
  background: repeating-linear-gradient(
    90deg,
    var(--dark-gold),
    var(--dark-gold) 10px,
    var(--gold) 10px,
    var(--gold) 20px
  );
}

.book-spine-mini {
  width: 80px;
  height: 280px;
  background: var(--red);
  border: 3px solid var(--dark);
  border-bottom: none;
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.book-spine-mini:hover {
  transform: translateY(-15px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.5);
}

.book-spine-mini::before {
  content: attr(data-title);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  position: absolute;
  inset: 1.5rem 0;
  font-family: 'Italiana', serif;
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  font-weight: 400;
  color: var(--bright);
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.book-spine-mini:nth-child(3n+1) { 
  background: var(--teal); 
}

.book-spine-mini:nth-child(3n+1)::before {
  color: var(--bright);
}

.book-spine-mini:nth-child(3n+2) { 
  background: var(--dark); 
}

.book-spine-mini:nth-child(3n+2)::before {
  color: var(--gold);
}

.book-spine-mini:nth-child(3n) { 
  background: var(--red); 
}

.book-spine-mini:nth-child(3n)::before {
  color: var(--bright);
}

/* ============================================
   ESSAY COMPONENTS
   ============================================ */

/* Float images - FIXED SPACING */
.float-left {
  float: left;
  width: min(45%, 350px);
  margin: 0.5rem 2rem 1.5rem 0;
  shape-outside: margin-box;
}

.float-right {
  float: right;
  width: min(45%, 350px);
  margin: 0.5rem 0 1.5rem 2rem;
  shape-outside: margin-box;
}

.clearfix::after,
article::after {
  content: "";
  display: table;
  clear: both;
}

/* Sidenotes - FIXED RESPONSIVE */
.sidenote-container {
  position: relative;
}

.sidenote {
  position: static;
  width: 100%;
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 1rem;
  margin: 1rem 0;
  background: var(--warm-bright);
  border-left: 4px solid var(--red);
  color: var(--dark);
}

.sidenote::before {
  content: attr(data-number);
  position: absolute;
  left: -1.5rem;
  top: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--red);
  color: var(--bright);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: bold;
}

@media (min-width: 1400px) {
  .sidenote {
    position: absolute;
    left: calc(100% + 2rem);
    width: 250px;
    margin: 0;
    top: 0;
  }
}

/* Footnotes */
.footnotes {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 3px double var(--gold);
}

.footnotes ol {
  list-style: none;
  counter-reset: footnote;
}

.footnotes li {
  counter-increment: footnote;
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

.footnotes li::before {
  content: counter(footnote);
  position: absolute;
  left: 0;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--red);
  color: var(--bright);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: bold;
}

/* Callout boxes */
.callout {
  padding: 2rem;
  margin: 2rem 0;
  background: var(--bright);
  border: 4px solid var(--red);
  position: relative;
}

.callout::before {
  content: '✦';
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--red);
  color: var(--gold);
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  border: 2px solid var(--gold);
  border-radius: 50%;
}

.callout-important {
  border-color: var(--gold);
  background: linear-gradient(135deg, var(--bright) 0%, var(--warm-bright) 100%);
}

.callout-important::before {
  content: '⚠';
  background: var(--gold);
  color: var(--dark);
}

/* Margin notes */
.margin-note {
  width: 100%;
  margin: 1rem 0;
  padding: 1rem;
  font-size: 0.85rem;
  line-height: 1.4;
  font-family: 'Playfair Display', serif;
  color: var(--red);
  background: var(--warm-bright);
  border-left: 3px solid var(--gold);
}

@media (min-width: 1200px) {
  .margin-note {
    float: right;
    width: 200px;
    margin: 0 -230px 1rem 1.5rem;
    padding: 0.75rem;
    background: transparent;
  }
}

/* Thought links */
.thought-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--warm-bright);
  border: 2px solid var(--gold);
  padding: 0.4rem 0.8rem;
  color: var(--red);
  text-decoration: none;
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.3s ease;
  margin: 0.25rem;
}

.thought-link::before {
  content: '⇢';
  color: var(--gold);
  font-size: 1.1em;
  transition: transform 0.3s ease;
}

.thought-link:hover {
  background: var(--red);
  color: var(--bright);
  border-color: var(--red);
  transform: translateX(2px);
}

.thought-link:hover::before {
  content: '⇨';
  color: var(--gold);
  transform: translateX(3px);
}

/* ============================================
   TAGS & NAVIGATION
   ============================================ */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0;
}

.tag {
  padding: 0.3rem 0.8rem;
  background: var(--dark);
  color: var(--gold);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid var(--gold);
  clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.tag:hover {
  background: var(--red);
  color: var(--bright);
  border-color: var(--red);
}

/* ============================================
   PATTERNS
   ============================================ */
.pattern-zigzag {
  background-image: 
    repeating-linear-gradient(
      45deg,
      var(--gold) 0,
      var(--gold) 10px,
      var(--dark) 10px,
      var(--dark) 20px
    );
  padding: 0.5rem;
}

.pattern-sunburst {
  background: 
    radial-gradient(circle at center,
      transparent 30%,
      var(--gold) 30%,
      var(--gold) 31%,
      transparent 31%
    ),
    conic-gradient(
      from 0deg,
      var(--bright) 0deg,
      var(--gold) 22.5deg,
      var(--bright) 45deg,
      var(--gold) 67.5deg,
      var(--bright) 90deg,
      var(--gold) 112.5deg,
      var(--bright) 135deg,
      var(--gold) 157.5deg,
      var(--bright) 180deg,
      var(--gold) 202.5deg,
      var(--bright) 225deg,
      var(--gold) 247.5deg,
      var(--bright) 270deg,
      var(--gold) 292.5deg,
      var(--bright) 315deg,
      var(--gold) 337.5deg,
      var(--bright) 360deg
    );
}

/* ============================================
   EFFECTS & ANIMATIONS
   ============================================ */

/* Halftone effect */
.halftone {
  position: relative;
  overflow: hidden;
}

.halftone img {
  filter: contrast(1.2);
}

.halftone::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle, transparent 30%, var(--dark) 30%) 0 0 / 8px 8px;
  mix-blend-mode: multiply;
  opacity: 0.3;
  pointer-events: none;
}

/* Duotone effect */
.duotone {
  filter: 
    grayscale(100%) 
    contrast(1.2) 
    brightness(1.1);
  mix-blend-mode: multiply;
  background: linear-gradient(135deg, var(--red), var(--gold));
}

/* Hover effects */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(34, 34, 34, 0.3);
}

.hover-glow {
  transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 
    0 0 20px rgba(191, 164, 111, 0.5),
    inset 0 0 20px rgba(191, 164, 111, 0.1);
}

/* Button lift */
.button-lift {
  display: inline-block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(34, 34, 34, 0.2);
}

.button-lift:active {
  transform: translateY(0);
}

/* Image zoom */
.zoom-hover {
  overflow: hidden;
}

.zoom-hover img {
  transition: transform 0.5s ease;
}

.zoom-hover:hover img {
  transform: scale(1.05);
}

/* Shine effect */
.shine {
  position: relative;
  overflow: hidden;
}

.shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s ease;
}

.shine:hover::before {
  left: 100%;
}

/* Pulse animation */
@keyframes pulse {
  0%, 100% { 
    box-shadow: 0 0 0 0 rgba(191, 164, 111, 0.7);
  }
  50% { 
    box-shadow: 0 0 0 10px rgba(191, 164, 111, 0);
  }
}

.pulse {
  animation: pulse 2s infinite;
}

/* Parallax layers */
@media (prefers-reduced-motion: no-preference) {
  .parallax-layer {
    transform: translateZ(0);
    will-change: transform;
  }
}

/* ============================================
   UTILITIES
   ============================================ */
.mt-4 { margin-top: 3rem; }
.mb-4 { margin-bottom: 3rem; }
.text-center { text-align: center; }

article {
  margin: 2rem 0;
}

section {
  margin: 4rem 0;
}

/* Demo labels */
.demo-label {
  display: inline-block;
  background: var(--teal);
  color: var(--bright);
  padding: 0.3rem 0.8rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
  border: 1px solid var(--dark-teal);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
  .deco-nav {
    flex-wrap: wrap;
    padding: 1rem;
  }
  
  .deco-nav a {
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
  }
  
  .float-left,
  .float-right {
    float: none;
    width: 100%;
    margin: 1rem 0;
  }
  
  .triptych {
    grid-template-columns: 1fr;
  }
  
  .book-card {
    grid-template-columns: 1fr;
  }
  
  .salon-wall {
    grid-template-columns: 1fr;
  }
  
  .salon-wall figure:nth-child(3n) {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  .deco-nav,
  .demo-label {
    display: none;
  }
  
  body {
    background: white;
    color: black;
  }
  
  a {
    color: black;
    text-decoration: underline;
  }
}