/* =====================================================================
   ULISES — Classical Design System
   A Greco-Roman theme: marble, wine-dark sea, bronze & gold, laurel.
   Typography after Roman inscriptional capitals (Cinzel) and the
   humanist book hand (Cormorant Garamond).
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Cinzel+Decorative:wght@400;700;900&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* --- Marble & parchment --- */
  --marble:      #F4ECDB;
  --marble-lit:  #FBF6EB;
  --parchment:   #EADFC7;
  --parchment-2: #E2D4B6;

  /* --- Ink --- */
  --ink:         #241D14;
  --ink-soft:    #4B3F30;
  --ink-faint:   #6E6047;

  /* --- Wine-dark sea (primary) --- */
  --wine:        #7C2233;
  --wine-deep:   #521324;
  --wine-black:  #360C18;

  /* --- Bronze & gold --- */
  --gold:        #B98A3E;
  --gold-bright: #D2A94B;
  --gold-pale:   #E7CE93;
  --bronze:      #9A6B32;

  /* --- Aegean --- */
  --aegean:      #1D5566;
  --aegean-deep: #0E3441;

  /* --- Laurel --- */
  --olive:       #5E6B3B;
  --stone:       #B7AC97;

  /* --- Roles --- */
  --bg:          var(--marble);
  --panel:       var(--marble-lit);
  --line:        rgba(154,107,50,.32);
  --line-soft:   rgba(154,107,50,.16);

  /* --- Type --- */
  --serif:  'Cormorant Garamond', 'Palatino Linotype', Georgia, serif;
  --roman:  'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --deco:   'Cinzel Decorative', 'Cinzel', serif;
  --text:   'Spectral', Georgia, 'Times New Roman', serif;
  --mono:   'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --shadow-soft: 0 18px 50px -28px rgba(54,12,24,.55);
  --shadow-lift: 0 30px 70px -30px rgba(54,12,24,.5);
  --radius: 3px;
}

/* =====================================================================
   Reset & base
   ===================================================================== */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background-color:var(--bg);
  background-image:
    radial-gradient(1200px 700px at 78% -8%, rgba(210,169,75,.10), transparent 60%),
    radial-gradient(900px 600px at 8% 4%, rgba(29,85,102,.08), transparent 55%),
    linear-gradient(rgba(244,236,219,.82), rgba(244,236,219,.88)),
    url("images/texture-marble.png");
  background-size:auto, auto, auto, 480px;
  background-repeat:no-repeat, no-repeat, no-repeat, repeat;
  color:var(--ink);
  font-family:var(--text);
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:rgba(124,34,51,.22); }

h1,h2,h3,h4{ font-family:var(--roman); font-weight:700; line-height:1.12; margin:0; color:var(--ink);
  letter-spacing:.01em; }
p{ margin:0 0 1.1rem; }

/* =====================================================================
   Ornaments & shared components
   ===================================================================== */

/* Greek-key (meander) rule */
.meander{
  height:16px; width:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16' viewBox='0 0 48 16'%3E%3Cg fill='none' stroke='%23B98A3E' stroke-width='2'%3E%3Cpath d='M0 14h6V4h8v6h-4V6h4M24 14h6V4h8v6h-4V6h4M-24 14h6V4h8v6h-4V6h4'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:center; opacity:.6;
}

/* Ornamental divider with central rosette */
.divider{
  display:flex; align-items:center; gap:1rem; justify-content:center;
  color:var(--gold); margin:2.4rem auto; max-width:520px;
}
.divider::before,.divider::after{
  content:""; height:1px; flex:1;
  background:linear-gradient(90deg,transparent,var(--gold));
}
.divider::after{ background:linear-gradient(90deg,var(--gold),transparent); }
.divider span{ font-family:var(--deco); font-size:1.1rem; letter-spacing:.3em; }

/* Eyebrow / kicker */
.eyebrow{
  font-family:var(--roman); font-weight:600;
  letter-spacing:.42em; text-transform:uppercase;
  font-size:.72rem; color:var(--wine);
  display:inline-flex; align-items:center; gap:.7rem;
}
.eyebrow::before{ content:"❦"; color:var(--gold); letter-spacing:0; font-size:.9rem; }

/* Buttons */
.btn{
  --bg-btn:var(--wine); --fg-btn:var(--marble-lit);
  font-family:var(--roman); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; font-size:.78rem;
  padding:.95em 1.9em; border-radius:var(--radius);
  display:inline-flex; align-items:center; gap:.6em; cursor:pointer;
  border:1px solid transparent; background:var(--bg-btn); color:var(--fg-btn);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow:0 10px 24px -14px rgba(82,19,36,.9);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(82,19,36,.9); }
.btn--ghost{
  background:transparent; color:var(--ink);
  border-color:var(--gold); box-shadow:none;
}
.btn--ghost:hover{ background:rgba(185,138,62,.12); }
.btn--gold{ --bg-btn:linear-gradient(180deg,var(--gold-bright),var(--bronze)); --fg-btn:#2b1a08; }

/* Section frame */
.section{ padding:clamp(4rem,8vw,7.5rem) 0; position:relative; }
.wrap{ width:min(1180px,92vw); margin-inline:auto; }
.wrap--narrow{ width:min(820px,92vw); }

/* Card w/ marble panel & gold hairline */
.panel{
  background:
    linear-gradient(180deg, rgba(251,246,235,.92), rgba(244,236,219,.88)),
    url("images/texture-parchment.png");
  background-size:auto, 420px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  position:relative;
}
.panel::after{ /* inner gold keyline */
  content:""; position:absolute; inset:5px; border:1px solid var(--line-soft);
  border-radius:2px; pointer-events:none;
}

/* Laurel bullet */
.laurel-list{ list-style:none; margin:0; padding:0; }
.laurel-list li{ position:relative; padding-left:1.7em; margin:.35em 0; }
.laurel-list li::before{
  content:"❧"; position:absolute; left:0; top:0; color:var(--gold);
}

/* Drop-cap for classical prose */
.dropcap::first-letter{
  font-family:var(--deco); font-weight:700;
  font-size:3.6em; line-height:.8; float:left;
  padding:.06em .12em 0 0; color:var(--wine);
}

/* Utility */
.center{ text-align:center; }
.muted{ color:var(--ink-soft); }
.gold-text{ color:var(--bronze); }
.small-caps{ font-variant:small-caps; letter-spacing:.06em; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
}