/* ==========================================================================
   Ehsan & Mélodie — Journal intime
   A quiet, warm, editorial journal of letters.
   Dark by default · a clean list of letters · an intimate reading page.
   ========================================================================== */

/* ---- 1. Palette & theme tokens ------------------------------------------ */
:root {
  /* the flame emblem is always warm, in every theme */
  --fl-gold: #f6c56a;
  --fl-ember: #e0592b;
  --fl-rose: #8a3b44;
  --fl-core: #fff3dd;
  --fl-wick: #17100b;

  --measure: 40rem;          /* letter column ~62–66 chars */
  --measure-list: 46rem;     /* home column */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --reveal-y: 14px;

  --serif-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --serif-body: "Spectral", "Georgia", "Times New Roman", serif;
  --serif-flourish: "Cormorant Garamond", "Spectral", "Georgia", serif;
}

/* SOIR — the default: candlelit night */
[data-theme="soir"] {
  --paper: #17100b;
  --paper-2: #211711;
  --ink: #ece3d1;
  --ash: #a2957f;
  --rose: #e59aa0;
  --gold: #f0b95c;
  --ember: #e79a4e;
  --filet: #3a2a1e;
  --seal-wax: #8a3b44;
  --glow-a: 0.6;
  --grain-a: 0.05;
  --grain-blend: overlay;
  --vignette: rgba(0, 0, 0, 0.6);
}

/* JOUR — the finely printed page */
[data-theme="jour"] {
  --paper: #faf5ec;
  --paper-2: #f5ecdb;
  --ink: #29211b;
  --ash: #6c6055;
  --rose: #8a3b44;
  --gold: #a9781f;
  --ember: #e4a96b;
  --filet: #e6dac6;
  --seal-wax: #8a3b44;
  --glow-a: 0.34;
  --grain-a: 0.045;
  --grain-blend: multiply;
  --vignette: rgba(60, 42, 26, 0.14);
}

/* the whole palette crossfades on Jour/Soir toggle */
html { transition: background-color 0.7s var(--ease-soft), color 0.7s var(--ease-soft); }

/* ---- 2. Reset & base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif-body);
  font-weight: 400;
  font-size: clamp(1.12rem, 1rem + 0.5vw, 1.28rem);
  line-height: 1.72;
  font-feature-settings: "onum" 1, "pnum" 1, "liga" 1, "kern" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 0.7s var(--ease-soft), color 0.7s var(--ease-soft);
}

svg { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }

::selection { background: color-mix(in srgb, var(--rose) 26%, transparent); }

:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; border-radius: 2px; }
/* headings/containers we move focus to for screen-reader routing shouldn't show a ring */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 100;
  padding: 0.6rem 1rem; background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--filet); border-radius: 3px;
  font-family: var(--serif-body); text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---- 3. Ambient warmth (a soft glow · vignette · paper grain) ----------- */
#ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

#ambient .glow {
  position: absolute;
  left: 50%; top: var(--glow-top, 8%);
  width: min(150vh, 190vw); height: min(150vh, 190vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--ember) 72%, transparent) 0%,
    color-mix(in srgb, var(--ember) 26%, transparent) 24%,
    transparent 58%
  );
  opacity: var(--glow-a);
  filter: blur(14px);
  animation: breathe 8s var(--ease-soft) infinite;
  will-change: transform, opacity;
}

#ambient .vignette {
  position: absolute; inset: -2px;
  background: radial-gradient(ellipse 120% 100% at 50% 40%, transparent 44%, var(--vignette) 100%);
}

#ambient .grain {
  position: absolute; inset: 0;
  opacity: var(--grain-a);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#embers { position: absolute; inset: 0; }
.ember {
  position: absolute; bottom: -12px;
  width: var(--s, 3px); height: var(--s, 3px); border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--ember) 70%, transparent);
  opacity: 0;
  animation: rise var(--dur, 10s) ease-in var(--delay, 0s) infinite;
  will-change: transform, opacity;
}

@keyframes breathe {
  0%, 100% { opacity: calc(var(--glow-a) * 0.86); transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: var(--glow-a);               transform: translate(-50%, -50%) scale(1.045); }
}
@keyframes rise {
  0%   { opacity: 0; transform: translateY(0) translateX(0) scale(0.6); }
  12%  { opacity: 0.85; }
  70%  { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-72vh) translateX(var(--drift, 14px)) scale(1); }
}

/* content sits above the ambient layer */
#app { position: relative; z-index: 1; }

/* per-view glow placement */
html[data-view="home"]   { --glow-top: -6%; }
html[data-view="letter"] { --glow-top: 0%; }
[data-theme="jour"][data-view="home"]   { --glow-a: 0.22; }
[data-theme="jour"][data-view="letter"] { --glow-a: 0.28; }

/* ---- 4. Shared pieces --------------------------------------------------- */
.kicker {
  font-family: var(--serif-body);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ash);
}

.flame { color: var(--gold); filter: drop-shadow(0 0 14px color-mix(in srgb, var(--fl-ember) 55%, transparent)); }
.flame svg, .flame use { overflow: visible; }
.flame-flicker { transform-box: fill-box; transform-origin: 50% 92%; animation: flicker 4.6s ease-in-out infinite; }
.flame-halo    { transform-box: fill-box; transform-origin: 50% 62%; animation: halo 5.5s ease-in-out infinite; }

@keyframes flicker {
  0%   { transform: scaleY(1) scaleX(1) skewX(0deg); filter: brightness(1); }
  20%  { transform: scaleY(1.05) scaleX(0.97) skewX(1.4deg); filter: brightness(1.08); }
  40%  { transform: scaleY(0.97) scaleX(1.02) skewX(-1.1deg); filter: brightness(0.96); }
  60%  { transform: scaleY(1.03) scaleX(0.99) skewX(0.7deg); filter: brightness(1.05); }
  80%  { transform: scaleY(0.99) scaleX(1.01) skewX(-0.6deg); filter: brightness(0.99); }
  100% { transform: scaleY(1) scaleX(1) skewX(0deg); filter: brightness(1); }
}
@keyframes halo {
  0%, 100% { opacity: 0.82; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

.seal { color: var(--seal-wax); }
.seal-wax { fill: var(--seal-wax); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.28)); }
.seal-rim { stroke: color-mix(in srgb, var(--gold) 85%, #fff 10%); stroke-width: 1.4; opacity: 0.85; }
.seal-mono {
  font-family: var(--serif-flourish); font-weight: 500;
  font-size: 27px; letter-spacing: 0.02em;
  fill: color-mix(in srgb, var(--gold) 80%, #fff 12%);
}

/* a hairline filet with a small flame node */
.filet {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  width: min(15rem, 60%); margin: 0 auto; color: var(--gold);
}
.filet::before, .filet::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(to var(--dir, right), transparent, color-mix(in srgb, var(--gold) 60%, transparent));
}
.filet::before { --dir: left; }
.filet .node { width: 15px; height: 15px; opacity: 0.9; }

/* a plain centred hairline (no ornament) — used on the home */
.rule-line {
  width: clamp(3rem, 12vw, 5rem); height: 1px; margin: 0 auto;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--gold) 55%, transparent), transparent);
}

/* Jour / Soir toggle */
.toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--filet) 90%, transparent);
  color: var(--ash);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.toggle:hover { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.toggle svg { width: 18px; height: 18px; }
.toggle .t-sun { display: none; }
.toggle .t-moon { display: block; }
[data-theme="soir"] .toggle .t-sun { display: block; }
[data-theme="soir"] .toggle .t-moon { display: none; }

/* ---- 5. Home — the journal as a list ------------------------------------ */
.theme-corner {
  position: fixed; top: clamp(1rem, 3vw, 1.6rem); right: clamp(1rem, 3vw, 1.6rem);
  z-index: 30;
}

.home {
  width: min(var(--measure-list), 100% - 2.6rem);
  margin-inline: auto;
  padding: clamp(4.5rem, 13vh, 8rem) 0 clamp(3rem, 8vh, 5rem);
}

.masthead { text-align: center; display: grid; justify-items: center; gap: 1.1rem; }
.masthead .kicker { color: var(--gold); }
.site-title {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 1.9rem + 4vw, 5rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--ink);
  text-shadow: 0 0 40px color-mix(in srgb, var(--ember) 20%, transparent);
}
.site-title .amp {
  font-style: italic; font-weight: 400; font-size: 1.06em;
  color: var(--gold); padding: 0 0.05em;
}
.home-statement {
  max-width: 36rem;
  margin: 0.5rem auto 0;
  font-family: var(--serif-body);
  font-size: clamp(1.06rem, 0.98rem + 0.5vw, 1.26rem);
  line-height: 1.78;
  color: color-mix(in srgb, var(--ink) 88%, var(--ash));
  text-wrap: pretty;
}

.masthead + .rule-line { margin-top: clamp(2.6rem, 6vh, 4.2rem); margin-bottom: 0.6rem; }

.letter-list { list-style: none; padding: 0; margin: 0; }

.row { border-bottom: 1px solid var(--filet); }
.row a {
  display: grid;
  grid-template-columns: minmax(6.5rem, 8.5rem) 1fr auto;
  align-items: baseline;
  gap: 0.4rem 1.6rem;
  padding: clamp(1.7rem, 4vw, 2.5rem) 0.2rem;
  text-decoration: none; color: inherit;
  position: relative;
  transition: padding-left 0.4s var(--ease);
}
.row a::before {
  content: ""; position: absolute; inset: -1px 0;
  background: radial-gradient(ellipse 70% 100% at 18% 50%, color-mix(in srgb, var(--ember) 12%, transparent), transparent 72%);
  opacity: 0; transition: opacity 0.5s var(--ease); pointer-events: none;
}
.row a:hover::before, .row a:focus-visible::before { opacity: 1; }
.row a:hover, .row a:focus-visible { padding-left: 0.9rem; }

.r-date {
  font-family: var(--serif-body);
  font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ash); white-space: nowrap; padding-top: 0.55rem;
}
.r-main { min-width: 0; }
.r-title {
  display: block;
  font-family: var(--serif-display); font-weight: 400;
  font-size: clamp(1.5rem, 1.25rem + 1.3vw, 2.3rem);
  line-height: 1.12; color: var(--ink);
  transition: color 0.4s var(--ease);
}
.row a:hover .r-title, .row a:focus-visible .r-title { color: var(--rose); }
.r-incipit {
  display: block; margin-top: 0.5rem;
  font-family: var(--serif-body); font-style: italic;
  color: var(--ash); font-size: 0.98em; line-height: 1.55;
  max-width: 38rem;
}
.r-go {
  align-self: center;
  font-family: var(--serif-body); font-size: 1.4rem; color: var(--gold);
  opacity: 0.5; transform: translateX(-2px);
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.row a:hover .r-go, .row a:focus-visible .r-go { opacity: 1; transform: translateX(4px); }

.site-foot {
  margin-top: clamp(3.5rem, 9vh, 6rem);
  display: grid; justify-items: center; gap: 1.6rem; text-align: center;
}
.foot-whisper {
  font-family: var(--serif-flourish); font-style: italic;
  color: var(--ash); font-size: 1.15rem;
}

/* ---- 6. Persistent top bar (letter only) -------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding: 0.85rem clamp(1rem, 4vw, 2.4rem);
  background: color-mix(in srgb, var(--paper) 76%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid color-mix(in srgb, var(--filet) 70%, transparent);
}
.topbar .home {
  display: inline-flex; align-items: center; gap: 0.5rem; justify-self: start;
  text-decoration: none; color: var(--ash);
  font-family: var(--serif-body); font-size: 0.8rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: color 0.3s var(--ease);
}
.topbar .home:hover { color: var(--gold); }
.topbar .home-arrow { font-size: 1rem; transition: transform 0.3s var(--ease); }
.topbar .home:hover .home-arrow { transform: translateX(-3px); }
.topbar .running {
  justify-self: center; font-family: var(--serif-flourish); font-style: italic;
  font-size: 1.1rem; color: var(--ash);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw;
}
.topbar .toggle { justify-self: end; }

/* ---- 7. A single letter / la lettre ------------------------------------- */
.letter {
  width: min(var(--measure), 100% - 2.8rem);
  margin-inline: auto;
  padding: clamp(2.6rem, 7vh, 5rem) 0 2rem;
  position: relative;
}

/* the reading-progress wick in the margin */
.wick-track {
  position: fixed; top: 16vh; bottom: 16vh;
  left: max(1.4rem, calc(50vw - 0.5 * var(--measure) - 2.4rem));
  width: 2px; z-index: 5; border-radius: 2px;
  background: color-mix(in srgb, var(--filet) 80%, transparent);
  overflow: hidden;
}
.wick-track .wick-fill {
  position: absolute; top: 0; left: 0; right: 0; height: var(--wick, 0%);
  background: linear-gradient(to bottom, var(--gold), var(--ember));
  box-shadow: 0 0 10px color-mix(in srgb, var(--ember) 70%, transparent);
}
.wick-track .wick-bead {
  position: absolute; left: 50%; top: var(--wick, 0%);
  width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--fl-core);
  box-shadow: 0 0 12px 3px color-mix(in srgb, var(--fl-ember) 80%, transparent);
}

.letter-head {
  text-align: center; display: grid; justify-items: center; gap: 1.1rem;
  margin-bottom: clamp(2rem, 5vh, 3.4rem);
}
.letter-emblem .l-flame { width: 46px; height: auto; margin-bottom: 0.4rem; }
.letter-head .l-kicker { color: var(--gold); }
.letter-title {
  font-family: var(--serif-display); font-weight: 400;
  font-size: clamp(2.2rem, 1.8rem + 2.4vw, 3.6rem);
  line-height: 1.06; color: var(--ink); max-width: 18ch;
}
.letter-date {
  font-family: var(--serif-body); font-size: 0.82rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ash);
  display: inline-flex; gap: 0.7rem; align-items: center;
}
.letter-date .dot { color: var(--gold); }

/* the prose */
.prose { color: var(--ink); }
.prose p { margin: 0; text-wrap: pretty; hanging-punctuation: first last; }
.prose p + p { text-indent: 1.6em; margin-top: 0.35rem; }

/* illuminated drop cap */
.prose > p:first-of-type::first-letter {
  font-family: var(--serif-flourish); font-weight: 600;
  float: left; font-size: 4.4em; line-height: 0.72;
  padding: 0.05em 0.12em 0 0; margin-top: 0.06em;
  color: var(--rose);
}

/* a pivotal sentence lifted onto its own line */
.prose .line {
  text-indent: 0 !important; text-align: left;
  font-family: var(--serif-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.15rem);
  line-height: 1.32; color: var(--rose);
  margin: clamp(2.2rem, 5vh, 3.4rem) auto;
  max-width: 26ch; padding-left: 1.2rem;
  border-left: 2px solid color-mix(in srgb, var(--gold) 70%, transparent);
}

/* a flame divider between movements */
.movement-rule {
  display: flex; align-items: center; justify-content: center;
  margin: clamp(2rem, 5vh, 3.2rem) 0; color: var(--gold);
}
.movement-rule .node { width: 20px; height: 26px; opacity: 0.8; }
.movement-rule > span {
  width: 34px; height: 1px; margin: 0 1.1rem;
  background: color-mix(in srgb, var(--gold) 55%, transparent);
}

/* signature + close */
.letter-close { margin-top: clamp(2.6rem, 6vh, 4rem); display: grid; justify-items: center; gap: 1.6rem; position: relative; }
.close-arch { position: relative; width: clamp(200px, 60%, 340px); height: 90px; color: var(--gold); display: grid; place-items: end center; }
.close-arch svg { width: 100%; height: 100%; opacity: 0.4; }
.close-arch .arch-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 100% at 50% 100%, color-mix(in srgb, var(--ember) 22%, transparent), transparent 70%);
}
.signature {
  font-family: var(--serif-flourish); font-style: italic; font-weight: 500;
  font-size: clamp(2.4rem, 2rem + 2vw, 3.4rem); color: var(--gold);
  line-height: 1; align-self: end;
  text-shadow: 0 0 24px color-mix(in srgb, var(--fl-ember) 26%, transparent);
}
.close-seal { width: 74px; height: 74px; }

/* prev / next nav */
.letter-nav {
  margin-top: clamp(3rem, 8vh, 5rem); padding-top: 2rem;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  border-top: 1px solid var(--filet); font-family: var(--serif-body);
}
.letter-nav a { text-decoration: none; color: var(--ash); transition: color 0.3s var(--ease); font-size: 0.9rem; }
.letter-nav a:hover, .letter-nav a:focus-visible { color: var(--gold); }
.letter-nav .prev { justify-self: start; text-align: left; }
.letter-nav .next { justify-self: end; text-align: right; }
.letter-nav .to-index { justify-self: center; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.76rem; }
.letter-nav .nl { display: block; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); opacity: 0.75; margin-bottom: 0.2rem; }
.letter-nav .disabled { opacity: 0.32; pointer-events: none; }

/* ---- 8. Scroll-reveal --------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(var(--reveal-y)); }
.reveal.in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }

/* ---- 9. Entrance -------------------------------------------------------- */
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
[data-view="home"] #app > *,
[data-view="letter"] #app > * { animation: view-in 0.6s var(--ease) both; }

/* ---- 10. Responsive ----------------------------------------------------- */
@media (max-width: 640px) {
  .row a { grid-template-columns: 1fr auto; grid-template-areas: "date go" "main main"; gap: 0.35rem 1rem; }
  .r-date { grid-area: date; align-self: center; padding-top: 0; }
  .r-go { grid-area: go; }
  .r-main { grid-area: main; }
  .topbar .running { max-width: 40vw; font-size: 1rem; }
  .topbar .home-label { display: none; }
  .wick-track { left: 0.7rem; top: 12vh; bottom: 12vh; }
  .prose .line { padding-left: 0.9rem; }
}

@media (max-width: 380px) {
  .topbar { grid-template-columns: auto 1fr auto; }
  .topbar .running { display: none; }
}

/* ---- 11. Reduced motion — settle to a steady warm glow ------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  #ambient .glow { animation: none; opacity: var(--glow-a); }
  .flame-flicker, .flame-halo { animation: none; }
  .ember { display: none; }
  .reveal { opacity: 1; transform: none; }
  html, body { transition: background-color 0.5s ease, color 0.5s ease !important; }
}

/* ---- 12. Print — a real letter on real paper ---------------------------- */
@media print {
  #ambient, .topbar, .theme-corner, .letter-nav, .wick-track, .skip-link { display: none !important; }
  html, body { background: #fff; color: #1a1a1a; }
  .letter { width: 100%; }
  .signature { color: #6b3b1f; }
}