/* ============================================================
   skream.ch — feuille de style commune
   index (hub) · histoires (liste) · pages de lecture
   ============================================================ */

:root{
  --paper:  #EBE8E3;   /* bone, légèrement froid — pas un crème chaud */
  --ink:    #19181C;   /* noir bleuté */
  --muted:  #6C6862;
  --faint:  #A8A39B;
  --rule:   #D6D1C9;
  --bruise: #7E3B54;   /* lie-de-vin — l'unique accent */
  --bruise-wash: rgba(126,59,84,.06);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Newsreader", Georgia, serif;
  font-optical-sizing:auto;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{
  max-width:660px;
  margin:0 auto;
  padding:clamp(2.2rem,7vw,5rem) clamp(1.4rem,6vw,2.2rem) 3rem;
}

/* ---- masthead ---- */
.eyebrow{
  font-family:"Spline Sans Mono", monospace;
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:lowercase;
  color:var(--muted);
  margin:0 0 clamp(2.6rem,9vw,4.2rem);
}
.eyebrow .dot{ color:var(--bruise); padding:0 .15em; }

.mark{
  font-family:"Fraunces", serif;
  font-weight:460;
  font-size:clamp(3.4rem,15vw,7.2rem);
  line-height:.92;
  letter-spacing:-.02em;
  margin:0;
}
.mark-sm{ font-size:clamp(2.4rem,9vw,3.7rem); }

/* sous-titre cliquable qui mène aux histoires */
.subtitle{
  display:inline-block;
  margin:clamp(1.1rem,3.5vw,1.6rem) 0 0;
  font-size:clamp(1.15rem,2.7vw,1.5rem);
  font-style:italic;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding-bottom:2px;
  transition:color .3s, border-color .3s;
}
.subtitle .sub-arrow{
  font-style:normal;
  color:var(--faint);
  display:inline-block;
  transition:transform .3s, color .3s;
}
.subtitle:hover, .subtitle:focus-visible{ color:var(--bruise); border-color:var(--bruise); outline:none; }
.subtitle:hover .sub-arrow, .subtitle:focus-visible .sub-arrow{ color:var(--bruise); transform:translateX(5px); }

.thesis{
  font-size:clamp(1.12rem,2.7vw,1.42rem);
  line-height:1.45;
  max-width:34ch;
  margin:clamp(1.1rem,3.5vw,1.6rem) 0 0;
}
.thesis em{ font-style:italic; color:var(--bruise); }

.label{
  font-family:"Spline Sans Mono", monospace;
  font-size:.7rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
  margin:clamp(3.4rem,11vw,5rem) 0 0;
}

/* ============================================================
   AILLEURS — liens vers les autres sites (index.html)
   ============================================================ */
.ledger{ margin-top:1.3rem; border-top:1px solid var(--rule); }

.work{
  display:grid;
  grid-template-columns:1fr auto;
  column-gap:clamp(.9rem,3vw,1.4rem);
  align-items:baseline;
  padding:clamp(1.4rem,4.2vw,1.9rem) .2rem clamp(1.1rem,3.6vw,1.5rem);
  border-bottom:1px solid var(--rule);
  text-decoration:none;
  color:inherit;
  transition:background .4s ease, border-color .4s ease, padding-left .35s ease;
}
.work:hover, .work:focus-visible{
  background:var(--bruise-wash);
  border-color:var(--bruise);
  padding-left:.7rem;
  outline:none;
}
.work:focus-visible{ box-shadow:inset 2px 0 0 var(--bruise); }

.work .domain{
  grid-column:1;
  font-family:"Fraunces", serif;
  font-weight:440;
  font-size:clamp(1.5rem,5vw,2.25rem);
  line-height:1.08;
  letter-spacing:-.01em;
}
.work:hover .domain, .work:focus-visible .domain{ color:var(--bruise); }

.work .arrow{
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
  font-family:"Newsreader", serif;
  font-size:1.5rem;
  color:var(--faint);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), color .35s ease;
}
.work:hover .arrow, .work:focus-visible .arrow{ color:var(--bruise); transform:translateX(7px); }

.work .caption{
  grid-column:1;
  font-size:1rem;
  color:var(--muted);
  margin-top:.45rem;
  max-width:48ch;
  font-style:italic;
}

/* ============================================================
   HISTOIRES — liste compacte (histoires.html)
   titre + date + temps de lecture, visibles directement
   ============================================================ */
.toc{ margin-top:clamp(1.6rem,5vw,2.2rem); border-top:1px solid var(--rule); }

.piece{
  display:grid;
  grid-template-columns:auto 1fr auto;
  column-gap:clamp(.8rem,3vw,1.2rem);
  align-items:baseline;
  padding:clamp(.85rem,2.6vw,1.05rem) .2rem;
  border-bottom:1px solid var(--rule);
  text-decoration:none;
  color:inherit;
  transition:background .35s ease, border-color .35s ease, padding-left .3s ease;
}
a.piece:hover, a.piece:focus-visible{
  background:var(--bruise-wash);
  border-color:var(--bruise);
  padding-left:.6rem;
  outline:none;
}
a.piece:focus-visible{ box-shadow:inset 2px 0 0 var(--bruise); }

.piece .num{
  grid-row:1 / span 2;
  padding-top:.2em;
  font-family:"Spline Sans Mono", monospace;
  font-size:.7rem;
  letter-spacing:.05em;
  color:var(--faint);
}
a.piece:hover .num, a.piece:focus-visible .num{ color:var(--bruise); }

.piece .t{
  grid-column:2;
  font-family:"Fraunces", serif;
  font-weight:440;
  font-size:clamp(1.2rem,3.6vw,1.55rem);
  line-height:1.12;
  letter-spacing:-.01em;
}
a.piece:hover .t, a.piece:focus-visible .t{ color:var(--bruise); }

.piece .m{
  grid-column:2;
  margin-top:.28rem;
  font-family:"Spline Sans Mono", monospace;
  font-size:.66rem;
  letter-spacing:.09em;
  text-transform:lowercase;
  color:var(--faint);
}

.piece .a{
  grid-column:3;
  grid-row:1 / span 2;
  align-self:center;
  font-family:"Newsreader", serif;
  font-size:1.3rem;
  color:var(--faint);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), color .3s ease;
}
a.piece:hover .a, a.piece:focus-visible .a{ color:var(--bruise); transform:translateX(5px); }

.piece.dormant{ color:var(--faint); }
.piece.dormant .t{ font-style:italic; font-weight:340; color:var(--faint); }
.piece.dormant .num{ color:var(--rule); }

/* ============================================================
   COLOPHON
   ============================================================ */
.colophon{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 1.2rem;
  justify-content:space-between;
  align-items:baseline;
  margin-top:clamp(3.2rem,10vw,5rem);
  font-family:"Spline Sans Mono", monospace;
  font-size:.7rem;
  letter-spacing:.1em;
  color:var(--muted);
}
.colophon a{ color:var(--muted); text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:1px; cursor:pointer; transition:color .3s, border-color .3s; }
.colophon a:hover, .colophon a:focus-visible{ color:var(--bruise); border-color:var(--bruise); outline:none; }

/* ============================================================
   PAGE DE LECTURE (chaque nouvelle)
   ============================================================ */
.read{
  max-width:38rem;                 /* ~66 caractères/ligne */
  margin:0 auto;
  padding:clamp(1.6rem,6vw,3rem) clamp(1.4rem,6vw,2rem) 4rem;
}

.back{
  display:inline-block;
  font-family:"Spline Sans Mono", monospace;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:lowercase;
  color:var(--muted);
  text-decoration:none;
  margin-bottom:clamp(3rem,10vw,5rem);
  transition:color .3s;
}
.back:hover, .back:focus-visible{ color:var(--bruise); outline:none; }

.read .sigil{
  display:block;
  font-family:"Spline Sans Mono", monospace;
  font-size:.72rem;
  letter-spacing:.18em;
  color:var(--bruise);
  margin:0 0 .9rem;
}
.read .title{
  font-family:"Fraunces", serif;
  font-weight:460;
  font-size:clamp(2.3rem,8vw,3.4rem);
  line-height:1.02;
  letter-spacing:-.015em;
  margin:0;
}
/* la date : jolie police, gris clair, en italique */
.read .date{ font-style:italic; color:var(--faint); font-size:1.05rem; margin:1rem 0 0; }
.read .meta{
  font-family:"Spline Sans Mono", monospace;
  font-size:.64rem; letter-spacing:.16em; text-transform:lowercase;
  color:var(--faint); margin:.6rem 0 0;
}

.divider{ width:2.5rem; height:1px; background:var(--rule); border:0; margin:clamp(2.4rem,7vw,3.2rem) 0; }

.story{ font-size:clamp(1.08rem,2.5vw,1.2rem); line-height:1.62; }
.story p{ margin:0; text-indent:1.5em; }
.story p.opening, .story .break + p{ text-indent:0; }
.story p.opening::first-letter{
  font-family:"Fraunces", serif; font-weight:500; float:left;
  font-size:3.4em; line-height:.82; padding:.05em .12em 0 0; color:var(--bruise);
}

.break{ border:0; text-align:center; margin:clamp(1.8rem,5vw,2.4rem) 0; color:var(--faint); overflow:visible; }
.break::before{ content:"⁂"; font-size:1.1rem; letter-spacing:.3em; }

.end{ text-align:center; margin-top:clamp(2.4rem,7vw,3.4rem); color:var(--bruise); text-indent:0; }
.end::before{ content:"◆"; font-size:.8rem; }

.read-foot{
  margin-top:clamp(2.6rem,8vw,3.6rem);
  padding-top:1.4rem;
  border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem 1rem;
  font-family:"Spline Sans Mono", monospace;
  font-size:.7rem; letter-spacing:.1em; text-transform:lowercase;
}
.read-foot a{ color:var(--muted); text-decoration:none; transition:color .3s; }
.read-foot a:hover, .read-foot a:focus-visible{ color:var(--bruise); outline:none; }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }