/* Reflejos — Premium Light Theme (Warm Editorial)
   Palette:
   - Cream: #FDF8F3
   - Beige: #F5EDE4
   - Gold:  #C9A86C
*/

:root{
  --cream:#FDF8F3;
  --beige:#F5EDE4;
  --white:#FFFFFF;
  --ink:#1f1b16;
  --ink-2:#3a312a;
  --muted:#6f6258;
  --gold:#C9A86C;

  --shadow-sm: 0 10px 30px rgba(31,27,22,.08);
  --shadow-md: 0 18px 55px rgba(31,27,22,.12);
  --shadow-lg: 0 24px 80px rgba(31,27,22,.14);

  --radius-md: 18px;
  --radius-lg: 26px;

  --container: 1120px;
  --ease: cubic-bezier(.2,.8,.2,1);

  --glass-bg: rgba(253,248,243,.68);
  --glass-border: rgba(201,168,108,.22);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background: radial-gradient(1200px 900px at 15% 5%, rgba(201,168,108,.10), transparent 60%),
              radial-gradient(1000px 700px at 85% 10%, rgba(245,237,228,.9), transparent 55%),
              linear-gradient(180deg, var(--cream), #fff);
  color:var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  letter-spacing: .01em;
  line-height:1.5;
  overflow-x:hidden;
}

.skip-link{
  position:absolute; left:-9999px; top:12px;
  background:var(--ink); color:var(--cream);
  padding:10px 12px; border-radius:12px;
  z-index:9999;
}
.skip-link:focus{left:12px}

.container{max-width:var(--container); margin:0 auto; padding:0 22px}

/* Ambient */
.ambient{position:fixed; inset:0; pointer-events:none; z-index:-1}
.ambient__orb{
  position:absolute; filter: blur(50px);
  opacity:.65;
  transform: translate3d(0,0,0);
}
.ambient__orb--one{
  width:520px; height:520px; left:-140px; top:120px;
  background: radial-gradient(circle at 30% 30%, rgba(201,168,108,.35), rgba(245,237,228,.15) 55%, transparent 70%);
  animation: floatOne 14s var(--ease) infinite;
}
.ambient__orb--two{
  width:520px; height:520px; right:-170px; top:-80px;
  background: radial-gradient(circle at 55% 40%, rgba(245,237,228,.9), rgba(201,168,108,.14) 55%, transparent 70%);
  animation: floatTwo 18s var(--ease) infinite;
}
.ambient__grain{
  position:absolute; inset:-40%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  opacity:.10;
  mix-blend-mode:multiply;
  transform: rotate(6deg);
}

@keyframes floatOne{
  0%,100%{transform: translate(-2%,0) scale(1)}
  50%{transform: translate(5%, -4%) scale(1.03)}
}
@keyframes floatTwo{
  0%,100%{transform: translate(2%,0) scale(1)}
  50%{transform: translate(-6%, 5%) scale(1.04)}
}

/* Header (Glassmorphism) */
.site-header{
  position:sticky; top:0; z-index:50;
  padding:14px 0;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(180deg, var(--glass-bg), rgba(253,248,243,.50));
  border-bottom: 1px solid rgba(201,168,108,.18);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled{
  background: rgba(253,248,243,0.95);
  box-shadow: var(--shadow-sm);
}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:18px}
.brand{display:flex; align-items:baseline; gap:14px}
.brand__link{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.brand__mark{
  width:14px; height:14px; border-radius:6px;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(201,168,108,.45) 35%, rgba(201,168,108,.2) 60%);
  box-shadow: inset 0 0 0 1px rgba(201,168,108,.30);
}
.brand__name{
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: .02em;
}
.brand__tag{color:var(--muted); font-size:.9rem; display:none}

.nav{display:flex; gap:16px; align-items:center}
.nav__link{
  color:var(--ink-2);
  text-decoration:none;
  font-weight:500;
  font-size:.95rem;
  padding:10px 10px;
  border-radius:12px;
  transition: background .25s var(--ease), transform .25s var(--ease), color .25s var(--ease);
}
.nav__link:hover{
  background: rgba(245,237,228,.65);
  transform: translateY(-1px);
  color:var(--ink);
}

.header__actions{display:flex; align-items:center; gap:10px}
.icon-btn{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid rgba(201,168,108,.25);
  background: rgba(255,255,255,.55);
  color:var(--ink);
  padding:10px 12px;
  border-radius: 999px;
  cursor:pointer;
  box-shadow: 0 10px 30px rgba(31,27,22,.06);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.icon-btn:hover{transform: translateY(-1px); box-shadow: var(--shadow-sm); background: rgba(255,255,255,.75)}
.icon-btn:active{transform: translateY(0)}
.icon-btn__label{font-size:.95rem}

/* Main */
.main{padding-bottom:72px}

/* Hero */
.hero{position:relative; padding:44px 0 34px}
.hero__bg{
  position:absolute; inset:-160px -80px auto -80px; height:520px;
  background:
    radial-gradient(800px 380px at 20% 30%, rgba(201,168,108,.18), transparent 60%),
    radial-gradient(620px 320px at 75% 25%, rgba(245,237,228,.92), transparent 60%),
    linear-gradient(120deg, rgba(201,168,108,.14), rgba(245,237,228,.55), rgba(253,248,243,.9));
  border-bottom: 1px solid rgba(201,168,108,.14);
  filter:saturate(1.02);
  animation: heroShift 12s var(--ease) infinite;
}
@keyframes heroShift{
  0%,100%{transform: translate3d(0,0,0) scale(1)}
  50%{transform: translate3d(0,-10px,0) scale(1.01)}
}

.hero__inner{display:grid; grid-template-columns: 1.2fr .8fr; gap:26px; align-items:start}
.kicker{
  display:inline-block;
  font-size:.9rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(31,27,22,.62);
}
.hero__title{
  margin:.35rem 0 .65rem;
  font-family:"Playfair Display", ui-serif, Georgia, serif;
  font-size: clamp(2.05rem, 3.8vw, 3.25rem);
  line-height:1.08;
  letter-spacing: .01em;
}
.hero__lede{color:var(--muted); font-size:1.05rem; max-width:58ch}

.hero__meta{display:flex; flex-wrap:wrap; gap:12px; margin:18px 0 18px}
.stat{
  min-width: 140px;
  padding:12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(201,168,108,.20);
  box-shadow: 0 10px 35px rgba(31,27,22,.06);
}
.stat__value{display:block; font-weight:600; font-size:1.25rem}
.stat__label{display:block; color:var(--muted); font-size:.92rem}

.hero__cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(201,168,108,.32);
  background: linear-gradient(180deg, rgba(201,168,108,.22), rgba(201,168,108,.10));
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 12px 36px rgba(31,27,22,.08);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn:hover{transform: translateY(-2px); box-shadow: var(--shadow-md)}
.btn:active{transform: translateY(0)}
.btn--ghost{
  background: rgba(255,255,255,.55);
}
.btn--ghost:hover{background: rgba(255,255,255,.78)}

.panel{
  border-radius: var(--radius-lg);
  padding:18px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(201,168,108,.22);
  box-shadow: var(--shadow-md);
  overflow:hidden;
}

/* Sections */
.section{padding:54px 0}
.section--alt{background: linear-gradient(180deg, rgba(245,237,228,.55), rgba(253,248,243,0)); border-top:1px solid rgba(201,168,108,.10); border-bottom:1px solid rgba(201,168,108,.10)}
.section__header{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:18px}
.section__title{
  margin:.35rem 0 0;
  font-family:"Playfair Display", ui-serif, Georgia, serif;
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: .01em;
}
.section__hint{color:var(--muted); max-width:58ch}
.section__tools{display:flex; gap:10px; align-items:center}

.search{
  display:flex; align-items:center; gap:10px;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(201,168,108,.20);
  border-radius: 999px;
  padding:10px 12px;
  box-shadow: 0 12px 36px rgba(31,27,22,.06);
}
.search input{
  border:none; outline:none; background:transparent;
  width:min(320px, 55vw);
  font: inherit;
  color: var(--ink);
}
.search svg{color: rgba(31,27,22,.55)}

/* Cards */
.grid{display:grid; grid-template-columns: repeat(12, 1fr); gap:16px}
.card{
  grid-column: span 4;
  border-radius: var(--radius-lg);
  padding:18px 18px 16px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(201,168,108,.18);
  box-shadow: 0 12px 40px rgba(31,27,22,.07);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease);
}
.card::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(650px 240px at 20% 20%, rgba(201,168,108,.16), transparent 55%);
  opacity:0;
  transition: opacity .35s var(--ease);
}
.card:hover{transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(201,168,108,.34)}
.card:hover::before{opacity:1}
.card__kicker{color: rgba(31,27,22,.62); font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; position:relative}
.card__title{
  margin:.45rem 0 .55rem;
  font-family:"Playfair Display", ui-serif, Georgia, serif;
  font-size: 1.35rem;
  line-height:1.15;
  position:relative;
}
.card__excerpt{color: var(--muted); margin:0 0 .8rem; position:relative}
.card__meta{display:flex; justify-content:space-between; align-items:center; gap:10px; color: rgba(31,27,22,.55); font-size:.92rem; position:relative}
.card__pill{
  padding:6px 10px;
  border-radius:999px;
  border: 1px solid rgba(201,168,108,.24);
  background: rgba(245,237,228,.6);
  color: rgba(31,27,22,.72);
}

/* List rows */
.list{display:grid; gap:12px}
.row{
  border-radius: 20px;
  padding:14px 16px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(201,168,108,.16);
  box-shadow: 0 10px 30px rgba(31,27,22,.06);
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:12px;
  cursor:pointer;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.row:hover{transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(201,168,108,.30)}
.row__title{margin:0; font-family:"Playfair Display", ui-serif, Georgia, serif; font-size:1.2rem; line-height:1.15}
.row__excerpt{margin:.25rem 0 0; color:var(--muted)}
.row__meta{color: rgba(31,27,22,.58); font-size:.95rem; text-align:right}

/* About */
.about{display:grid; grid-template-columns: 1.2fr .8fr; gap:20px; align-items:start}
.prose{color:var(--ink-2); max-width:70ch}
.quote{
  border-radius: var(--radius-lg);
  padding:18px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(201,168,108,.20);
  box-shadow: 0 16px 50px rgba(31,27,22,.08);
}
.quote__text{margin:0; font-family:"Playfair Display", ui-serif, Georgia, serif; font-size:1.25rem; line-height:1.25}
.quote__by{margin:.75rem 0 0; color:var(--muted)}

/* Footer */
.footer{padding:26px 0 10px; color: rgba(31,27,22,.62)}
.footer__inner{display:flex; justify-content:space-between; align-items:center; gap:12px; border-top:1px solid rgba(201,168,108,.14); padding-top:18px}
.footer__link{color: rgba(31,27,22,.72)}
.footer__link:hover{color: var(--ink)}

/* Drawer reader */
.drawer{position:fixed; inset:0; z-index:80; display:none}
.drawer.is-open{display:block}
.drawer__backdrop{position:absolute; inset:0; background: rgba(31,27,22,.22); backdrop-filter: blur(2px)}
.drawer__panel{
  position:absolute;
  right:18px; left:18px; bottom:18px;
  max-width: 980px;
  margin:0 auto;
  max-height: calc(100vh - 36px);
  border-radius: 28px;
  background: rgba(253,248,243,.86);
  border: 1px solid rgba(201,168,108,.26);
  box-shadow: 0 40px 120px rgba(31,27,22,.22);
  overflow:hidden;
  transform: translateY(10px);
  opacity: 0;
  animation: drawerIn .28s var(--ease) forwards;
}
@keyframes drawerIn{to{transform: translateY(0); opacity:1}}
.drawer__header{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:18px 18px 12px; border-bottom:1px solid rgba(201,168,108,.16)}
.drawer__kicker{margin:0; color: rgba(31,27,22,.55); letter-spacing:.18em; text-transform:uppercase; font-size:.85rem}
.drawer__title{margin:.35rem 0 .2rem; font-family:"Playfair Display", ui-serif, Georgia, serif; font-size: 1.85rem; line-height:1.12}
.drawer__meta{margin:0; color:var(--muted)}
.drawer__body{padding: 14px 18px 18px; overflow:auto; max-height: calc(100vh - 190px)}
.drawer__footer{padding: 14px 18px 18px; border-top:1px solid rgba(201,168,108,.16); display:flex; justify-content:flex-end}

/* Reading experience typography */
.drawer .prose{
  font-size: 1.05rem;
  line-height: 1.85;
  color: rgba(31,27,22,.88);
}
.drawer .prose p{margin: 0 0 1.05rem}
.drawer .prose p:first-child::first-letter{
  font-family:"Playfair Display", ui-serif, Georgia, serif;
  float:left;
  font-size: 3.2rem;
  line-height: 1;
  padding: .25rem .55rem 0 0;
  color: rgba(201,168,108,.95);
}

/* Reveal animations */
[data-reveal], .reveal{
  opacity: 1;
  transform: translateY(0);
}
.is-revealed{
  opacity:1;
  transform: translateY(0);
}

/* Subtle entrance animation for cards */
.card, .row {
  animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Skeletons */
.skeleton{
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(245,237,228,.75), rgba(253,248,243,.95), rgba(245,237,228,.75));
  background-size: 220% 100%;
  animation: shimmer 1.15s linear infinite;
  border:1px solid rgba(201,168,108,.12);
}
@keyframes shimmer{0%{background-position: 0% 0}100%{background-position: 220% 0}}

.skeleton--line{height:14px; margin: 12px 0}
.skeleton--block{height:64px; margin: 12px 0}

/* Responsive */
@media (max-width: 980px){
  .hero__inner{grid-template-columns: 1fr;}
  .about{grid-template-columns: 1fr;}
  .card{grid-column: span 6;}
  .brand__tag{display:none}
}
@media (max-width: 680px){
  .nav{display:none}
  .icon-btn__label{display:none}
  .section__header{flex-direction:column; align-items:flex-start}
  .card{grid-column: span 12;}
  .search input{width: 62vw}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .ambient__orb--one,.ambient__orb--two,.hero__bg{animation:none}
  .btn,.card,.row,.icon-btn{transition:none}
  .is-revealed{transition:none}
  .skeleton{animation:none}
}