/* =========================================================
   Éclat Liste Online — Stylesheet
   Editorial / paper aesthetic. Light, warm, readable.
   ========================================================= */

:root{
  --paper:      #f6f1e7;
  --paper-card: #fbf8f1;
  --ink:        #241f1a;
  --ink-soft:   #5c5249;
  --ink-faint:  #8a7e72;
  --line:       #e3d9c8;
  --line-soft:  #ece4d6;
  --accent:     #b0543f;   /* terracotta */
  --accent-deep:#823a2b;
  --gold:       #ac8546;
  --shadow:     0 1px 2px rgba(60,45,30,.05), 0 12px 30px -18px rgba(60,45,30,.25);
  --radius:     14px;
  --maxw:       1080px;
  --read:       40rem;     /* article column */
  --serif-disp: "Fraunces", Georgia, "Times New Roman", serif;
  --serif-text: "Newsreader", Georgia, serif;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif-text);
  font-size:1.12rem;
  line-height:1.7;
  font-optical-sizing:auto;
  /* faint paper grain */
  background-image:
    radial-gradient(circle at 20% 0%, rgba(176,84,63,.04), transparent 45%),
    radial-gradient(circle at 90% 10%, rgba(172,133,70,.05), transparent 40%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block}
a{color:var(--accent-deep); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--accent)}

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

/* ---------- skip link ---------- */
.skip{position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:10px 16px; z-index:99}
.skip:focus{left:8px; top:8px}

/* ---------- header / nav ---------- */
.topline{height:4px; background:linear-gradient(90deg,var(--accent),var(--gold))}

.site-head{
  position:sticky; top:0; z-index:40;
  background:rgba(246,241,231,.86);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.head-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 22px; max-width:var(--maxw); margin:0 auto}

.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand .mark{width:30px; height:38px; flex:0 0 auto}
.brand .name{display:flex; flex-direction:column; line-height:1.05}
.brand .name b{font-family:var(--serif-disp); font-weight:600; font-size:1.28rem; letter-spacing:.2px}
.brand .name span{font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint)}

.nav{display:flex; align-items:center; gap:6px}
.nav a{
  text-decoration:none; color:var(--ink-soft); font-family:var(--serif-disp);
  font-size:1rem; padding:8px 13px; border-radius:8px; transition:.18s;
}
.nav a:hover{color:var(--ink); background:var(--line-soft)}
.nav a.active{color:var(--accent-deep)}

.nav-toggle{display:none; background:none; border:1px solid var(--line); border-radius:9px;
  width:42px; height:40px; cursor:pointer; align-items:center; justify-content:center}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:""; display:block; width:19px; height:2px; background:var(--ink); position:relative; transition:.2s}
.nav-toggle span::before{position:absolute; top:-6px}
.nav-toggle span::after{position:absolute; top:6px}

/* ---------- hero / featured ---------- */
.featured{padding:56px 0 30px}
.feat-card{
  display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center;
  background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:44px; box-shadow:var(--shadow);
}
.eyebrow{font-family:var(--serif-disp); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin:0 0 14px}
.feat-card h1{
  font-family:var(--serif-disp); font-weight:600; font-size:clamp(2rem,4.4vw,3.15rem);
  line-height:1.06; margin:0 0 16px; letter-spacing:-.5px;
}
.feat-card h1 a{color:inherit; text-decoration:none}
.feat-card h1 a:hover{color:var(--accent-deep)}
.feat-card .dek{font-size:1.16rem; color:var(--ink-soft); margin:0 0 22px}
.meta{display:flex; flex-wrap:wrap; gap:10px; align-items:center; color:var(--ink-faint); font-size:.92rem; margin-bottom:24px}
.meta .dot{width:4px; height:4px; border-radius:50%; background:var(--ink-faint); display:inline-block}
.btn{
  display:inline-block; font-family:var(--serif-disp); font-weight:500; font-size:1rem;
  background:var(--ink); color:var(--paper); text-decoration:none; padding:12px 22px; border-radius:10px;
  transition:.2s;
}
.btn:hover{background:var(--accent-deep); color:var(--paper); transform:translateY(-1px)}

.feat-art{aspect-ratio:1/1.06; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(150deg,#f0e3cf,#ecd9c2 55%,#e7cbb4);
  border:1px solid var(--line);}
.feat-art svg{width:58%; height:auto}

/* ---------- section heading ---------- */
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin:46px 0 22px; padding-bottom:12px; border-bottom:1px solid var(--line)}
.sec-head h2{font-family:var(--serif-disp); font-weight:600; font-size:1.55rem; margin:0; letter-spacing:-.3px}
.sec-head a{font-size:.95rem; white-space:nowrap}

/* ---------- card grid ---------- */
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; padding-bottom:30px}
.card{
  background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 26px 22px; display:flex; flex-direction:column; transition:.22s; box-shadow:var(--shadow);
}
.card:hover{transform:translateY(-3px); border-color:var(--gold)}
.card .eyebrow{margin-bottom:11px}
.card h3{font-family:var(--serif-disp); font-weight:600; font-size:1.32rem; line-height:1.18; margin:0 0 10px}
.card h3 a{color:inherit; text-decoration:none}
.card h3 a:hover{color:var(--accent-deep)}
.card p{color:var(--ink-soft); margin:0 0 16px; font-size:1.02rem}
.card .more{margin-top:auto; font-family:var(--serif-disp); font-size:.95rem; text-decoration:none; color:var(--accent-deep)}
.card .more:hover{color:var(--accent)}
.card .more::after{content:" \2192"; transition:.2s}
.card:hover .more::after{margin-left:3px}

/* ---------- article / reading page ---------- */
.article{padding:40px 0 10px}
.article-head{max-width:var(--read); margin:0 auto}
.article-head h1{
  font-family:var(--serif-disp); font-weight:600; font-size:clamp(2rem,4.6vw,3rem);
  line-height:1.08; letter-spacing:-.6px; margin:10px 0 16px;
}
.article-head .dek{font-size:1.22rem; color:var(--ink-soft); margin:0 0 20px; line-height:1.55}
.byline{display:flex; align-items:center; gap:12px; padding:16px 0; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); color:var(--ink-faint); font-size:.95rem; flex-wrap:wrap}
.avatar{width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(140deg,var(--accent),var(--gold)); display:grid; place-items:center;
  color:#fff; font-family:var(--serif-disp); font-weight:600; font-size:1rem}
.byline b{color:var(--ink); font-weight:500}

.art-banner{max-width:var(--read); margin:28px auto; aspect-ratio:16/8; border-radius:12px;
  background:linear-gradient(150deg,#f0e3cf,#ecd9c2 55%,#e7cbb4); border:1px solid var(--line);
  display:grid; place-items:center}
.art-banner svg{width:120px; height:auto; opacity:.92}

.prose{max-width:var(--read); margin:0 auto; padding-top:8px}
.prose > p:first-of-type{font-size:1.16rem}
.prose p{margin:0 0 1.25em}
.prose h2{font-family:var(--serif-disp); font-weight:600; font-size:1.7rem; line-height:1.2;
  letter-spacing:-.3px; margin:1.9em 0 .55em}
.prose h3{font-family:var(--serif-disp); font-weight:600; font-size:1.28rem; margin:1.5em 0 .4em}
.prose ul,.prose ol{margin:0 0 1.3em; padding-left:1.3em}
.prose li{margin:.4em 0}
.prose strong{font-weight:600}
.prose blockquote{margin:1.6em 0; padding:6px 0 6px 22px; border-left:3px solid var(--accent);
  font-style:italic; color:var(--ink-soft); font-size:1.18rem}
.prose a{color:var(--accent-deep); font-weight:500}

/* comparison table */
.dupe-table{width:100%; border-collapse:collapse; margin:1.6em 0; font-size:1.02rem;
  background:var(--paper-card); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.dupe-table th,.dupe-table td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--line-soft)}
.dupe-table thead th{font-family:var(--serif-disp); background:#f1e6d4; color:var(--ink); font-weight:600; font-size:.95rem}
.dupe-table tr:last-child td{border-bottom:none}
.dupe-table tbody tr:hover{background:#f4ecdd}
.dupe-table td:first-child{font-weight:500}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

.note{max-width:var(--read); margin:30px auto; background:#f1e8d8; border:1px solid var(--line);
  border-radius:12px; padding:18px 22px; font-size:1rem; color:var(--ink-soft)}
.note b{color:var(--ink)}

/* related */
.related{max-width:var(--read); margin:46px auto 0; padding-top:26px; border-top:1px solid var(--line)}
.related h2{font-family:var(--serif-disp); font-weight:600; font-size:1.3rem; margin:0 0 16px}
.related ul{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.related a{display:flex; gap:12px; align-items:baseline; text-decoration:none; color:var(--ink);
  padding:14px 16px; background:var(--paper-card); border:1px solid var(--line); border-radius:10px; transition:.18s}
.related a:hover{border-color:var(--gold); transform:translateX(3px)}
.related a .k{font-family:var(--serif-disp); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); white-space:nowrap}

.back{max-width:var(--read); margin:0 auto; padding:8px 0}
.back a{font-family:var(--serif-disp); text-decoration:none; color:var(--ink-soft); font-size:.95rem}
.back a:hover{color:var(--accent-deep)}
.back a::before{content:"\2190 "}

/* ---------- generic page (about / list) ---------- */
.page{padding:46px 0}
.page-head{max-width:var(--read); margin:0 auto 8px}
.page-head .eyebrow{margin-bottom:12px}
.page-head h1{font-family:var(--serif-disp); font-weight:600; font-size:clamp(2rem,4.5vw,2.8rem);
  line-height:1.1; margin:0 0 14px; letter-spacing:-.5px}
.page-head .dek{font-size:1.18rem; color:var(--ink-soft); margin:0}

.list-row{display:grid; grid-template-columns:auto 1fr; gap:22px; max-width:var(--read); margin:0 auto;
  padding:26px 0; border-bottom:1px solid var(--line)}
.list-row .num{font-family:var(--serif-disp); font-size:1.3rem; color:var(--gold); padding-top:2px}
.list-row h2{font-family:var(--serif-disp); font-weight:600; font-size:1.4rem; margin:0 0 8px; line-height:1.2}
.list-row h2 a{color:inherit; text-decoration:none}
.list-row h2 a:hover{color:var(--accent-deep)}
.list-row p{margin:0 0 8px; color:var(--ink-soft)}
.list-row .meta{margin:0; font-size:.85rem}

/* ---------- footer ---------- */
.site-foot{margin-top:64px; background:#efe6d5; border-top:1px solid var(--line)}
.foot-inner{max-width:var(--maxw); margin:0 auto; padding:46px 22px 30px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px}
.foot-inner h4{font-family:var(--serif-disp); font-weight:600; font-size:1.05rem; margin:0 0 12px}
.foot-inner p{color:var(--ink-soft); font-size:1rem; margin:0 0 10px}
.foot-inner ul{list-style:none; margin:0; padding:0}
.foot-inner li{margin:7px 0}
.foot-inner a{text-decoration:none; color:var(--ink-soft)}
.foot-inner a:hover{color:var(--accent-deep)}
.foot-brand .mini{display:flex; align-items:center; gap:9px; margin-bottom:12px}
.foot-brand .mini b{font-family:var(--serif-disp); font-size:1.15rem}
.foot-bottom{border-top:1px solid var(--line); text-align:center; padding:16px; color:var(--ink-faint); font-size:.85rem}

/* ---------- entrance animation ---------- */
.fade{opacity:0; transform:translateY(14px); animation:fade .7s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.13s}.d3{animation-delay:.21s}.d4{animation-delay:.29s}.d5{animation-delay:.37s}
@keyframes fade{to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.fade{animation:none; opacity:1; transform:none}}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .feat-card{grid-template-columns:1fr; padding:30px; gap:26px}
  .feat-art{order:-1; aspect-ratio:16/9; max-height:230px}
  .foot-inner{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  body{font-size:1.06rem}
  .nav{position:fixed; inset:60px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line); padding:8px 14px 16px;
    transform:translateY(-130%); transition:transform .28s ease; box-shadow:var(--shadow)}
  .nav.open{transform:translateY(0)}
  .nav a{padding:13px 10px; border-bottom:1px solid var(--line-soft); border-radius:0}
  .nav-toggle{display:flex}
  .cards{grid-template-columns:1fr}
  .featured{padding:34px 0 18px}
  .foot-inner{grid-template-columns:1fr}
  .sec-head h2{font-size:1.35rem}
}

/* ===== full list: finder, toc, list tables ===== */
.finder{max-width:var(--read); margin:0 auto 24px; background:var(--paper-card);
  border:1px solid var(--line); border-radius:12px; padding:18px 20px; box-shadow:var(--shadow)}
.finder label{display:block; font-family:var(--serif-disp); font-size:.95rem; color:var(--ink-soft); margin-bottom:8px}
.finder input{width:100%; font-family:var(--serif-text); font-size:1.05rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:9px; padding:11px 14px}
.finder input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(176,84,63,.14)}
.finder-count{margin:.6em 0 0; font-size:.9rem; color:var(--ink-faint); min-height:1.1em}

.toc{max-width:var(--read); margin:0 auto 10px; background:#f1e8d8; border:1px solid var(--line);
  border-radius:12px; padding:16px 20px}
.toc strong{font-family:var(--serif-disp); display:block; font-size:.95rem; margin-bottom:8px;
  text-transform:uppercase; letter-spacing:.14em; color:var(--ink-soft); font-size:.72rem}
.toc ol{margin:0; padding-left:1.2em}
.toc li{margin:5px 0}
.toc a{text-decoration:none; color:var(--ink); font-family:var(--serif-disp)}
.toc a:hover{color:var(--accent-deep)}
.toc em{font-style:normal; color:var(--ink-faint); font-size:.85em}

.dupe-table.list{font-size:.98rem}
.dupe-table.list td{padding:10px 14px; vertical-align:top}
.dupe-table.list td:first-child{white-space:nowrap; width:1%}
.dupe-table.list .code{font-family:var(--serif-disp); font-weight:600; color:var(--accent-deep)}
.dupe-table.list .tag{display:inline-block; font-family:var(--serif-disp); font-size:.62rem;
  letter-spacing:.08em; background:var(--gold); color:#fff; padding:2px 6px; border-radius:5px;
  vertical-align:middle; margin-left:4px}
.list-empty{max-width:var(--read); margin:0 auto; text-align:center; color:var(--ink-faint);
  padding:24px; font-style:italic; display:none}