/* =========================================================
   Michel Herreria — redesign prototype
   ONE-PAGE app shell: top bar · content stage (columns scroll
   independently) · timeline pinned at the bottom.
   Black/white/red identity, dark + light themes.
   ========================================================= */

:root{
  /* neutral-grey dark theme (default) */
  --ink:        #0d0d0d;   /* ground                    */
  --ink-2:      #1a1a1a;   /* raised surface / panels   */
  --line:       #333333;   /* hairlines                 */
  --paper:      #f0f0f0;   /* primary text              */
  --paper-dim:  #8a8a8a;   /* muted text                */
  --red:        #d11423;   /* signature red             */
  --red-deep:   #8d0d18;
  --body:       #cfcfcf;   /* long-form essay text      */
  --hover:      #1f1f1f;   /* row hover                 */

  --sans: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Noto Serif', Georgia, serif;

  --pad: clamp(32px, 8vw, 112px);
  --topbar-h: 78px;   /* measured + updated by JS for the glass overlay */
  --tl-h: 300px;      /* timeline height, ditto                        */
}

/* neutral-grey light theme */
[data-theme="light"]{
  --ink:        #cccccc;
  --ink-2:      #bbbbbb;
  --line:       #aaaaaa;
  --paper:      #1e1e1e;
  --paper-dim:  #5b5b5b;
  --red:        #a20211;
  --red-deep:   #89000d;
  --body:       #3c3c3c;
  --hover:      #eeeeee;
}

*{ box-sizing: border-box; }
html, body{ margin:0; height:100%; }

body{
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  transition: background .3s, color .3s;
}
a{ color: inherit; text-decoration: none; }

/* discrete scrollbars everywhere — no track, thin grey thumb (never red) */
*{ scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar{ width: 6px; height: 6px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--line); border: 0; }
::-webkit-scrollbar-thumb:hover{ background: var(--paper-dim); }
::-webkit-scrollbar-button{ background: var(--line); height: 0; width: 0; }
::-webkit-scrollbar-corner{ background: transparent; }

/* ───── App shell — fixed glass bars, content scrolls behind ───── */
.app{ position: relative; height: 100vh; overflow: hidden; }

/* ───── Top bar (fixed, frosted) ───── */
.topbar{
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px var(--pad);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink) 70%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  transition: background .3s, border-color .3s;
}
.brand{ display: flex; flex-direction: column; line-height: 1.05; }
.brand__name{
  font-weight: 800; font-size: clamp(18px, 2.2vw, 24px);
  letter-spacing: -0.02em; text-transform: uppercase;
}
.brand__tag{
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper-dim); margin-top: 4px;
}
.topbar__right{ display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.nav{ display: flex; gap: clamp(10px, 1.6vw, 26px); flex-wrap: wrap; }
.nav a{
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper-dim);
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}
.nav a:hover{ color: var(--paper); border-color: var(--red); }

.theme-toggle, .view-toggle{
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line);
  color: var(--paper-dim); cursor: pointer; font-size: 17px; line-height: 1;
  transition: color .18s, border-color .18s;
}
.theme-toggle:hover, .view-toggle:hover{ color: var(--paper); border-color: var(--red); }
.view-toggle svg{
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ───── Content stage — fills the viewport; columns scroll behind the bars ───── */
.stage{ position: absolute; inset: 0; overflow: hidden; }

.detail{
  display: grid;
  grid-template-columns: minmax(0, 2.8fr) minmax(180px, 0.8fr) minmax(230px, 1fr);
  gap: clamp(28px, 3vw, 60px);
  height: 100%;
  padding: 0 var(--pad);
  align-items: stretch;
}
/* the two long columns get their own scrollbars; top/bottom padding clears the bars */
.detail__main, .detail__news{
  overflow-y: auto;
  padding-top: calc(var(--topbar-h) + 30px);
  padding-bottom: calc(var(--tl-h) + 30px);
}
.detail__main{ padding-right: 18px; }
/* docs stays put below the header, keeping its top padding */
.detail__docs{ display: flex; flex-direction: column; gap: 24px; overflow: hidden; padding-top: calc(var(--topbar-h) + 30px); }

/* ---- main column ---- */
.detail__eyebrow{ margin: 0 0 14px; }
.detail__eyebrow span{
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--red); border: 1px solid var(--red); padding: 4px 10px;
}
.detail__date{ font-size: 13px; letter-spacing: 0.16em; color: var(--paper-dim); margin: 0 0 8px; }
.detail__title{
  font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: clamp(38px, 6vw, 76px); line-height: 0.96; letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.detail__venue{
  font-size: 18px; color: var(--paper);
  border-left: 3px solid var(--red); padding-left: 12px; margin: 0 0 28px;
}
.detail__hero{ margin: 0 0 36px; border: 1px solid var(--line); background: var(--ink-2); overflow: hidden; }
.detail__hero img{ width: 100%; height: auto; display: block; }

/* essay typography */
.detail__body{ font-size: 19px; line-height: 1.7; color: var(--body); max-width: 100ch; }
.detail__body p{ margin: 0 0 1.25em; }
.detail__body p:first-of-type::first-letter{
  font-family: var(--serif); font-style: italic;
  float: left; font-size: 3.4em; line-height: 0.82; padding: 6px 12px 0 0; color: var(--red);
}
.detail__body p.is-verse{ margin: 0; line-height: 1.5; color: var(--paper-dim); font-style: italic; }
.detail__body .note{ color: var(--paper-dim); font-style: italic; }
.detail__author{ margin-top: 32px; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--paper); }
.detail__author:empty{ display: none; }
.detail__author::before{ content: "— "; color: var(--red); }

/* ---- panels (docs + news) ---- */
.panel{ border: 1px solid var(--line); background: var(--ink-2); }
.panel[hidden]{ display: none; }
.panel__title{
  margin: 0; font-size: 13px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper); background: var(--ink);
  padding: 15px 18px; border-bottom: 1px solid var(--line);
}
.panel__title--accent{ color: var(--red); }
.panel__body{ padding: 20px; }
/* keep the Actualités header visible while its column scrolls */
.detail__news .panel{ display: flex; flex-direction: column; }
.detail__news .panel__title{ position: sticky; top: 0; z-index: 2; }

/* documents & links */
.linklist{ list-style: none; margin: 0; padding: 0; }
.linklist li + li{ margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.linklist a{ font-weight: 600; color: var(--paper); border-bottom: 1px solid var(--red); padding-bottom: 1px; }
.linklist a:hover{ color: var(--red); }
.linklist .ext{ font-size: 11px; color: var(--paper-dim); }
.linklist p{ margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--paper-dim); }

/* news (Actualités) — thumb on the LEFT, max a third of column width */
.news{ list-style: none; margin: 0; padding: 0; }
.news-item{
  display: grid; grid-template-columns: 32% 1fr; gap: 14px;
  align-items: start; padding: 18px;
  transition: background .15s;
}
.news-item--noimg{ display: block; }
.news-item + .news-item{ border-top: 1px solid var(--line); }
.news-item:hover{ background: var(--hover); }
.news-item__thumb{
  width: 100%; height: auto; max-height: 120px; object-fit: cover;
  display: block; border: 1px solid var(--line);
  filter: grayscale(0.3); transition: filter .2s;
}
.news-item:hover .news-item__thumb{ filter: grayscale(0); }
.news-item__date{
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper-dim); display: block; margin-bottom: 4px;
}
.news-item__title{ font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--red); margin: 0 0 7px; }
.news-item__title a:hover{ text-decoration: underline; }
.news-item__cap{ font-size: 12.5px; line-height: 1.5; color: var(--paper-dim); margin: 0; }

/* ───── Timeline — pinned at the bottom ───── */
.timeline{
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  /* mode variables (overridden in compact) */
  --tl-item-w: 92px;
  --tl-gap: 44px;
  --tl-axis-top: 162px;     /* y of the axis line, measured from item top */
  --tl-track-pt: 28px;
  --tl-pad-b: 56px;
  --tl-track-pb: 18px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink-2) 68%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 -10px 26px rgba(0,0,0,.22);
  transition: background .3s, border-color .3s;
}
.timeline.is-compact{
  --tl-item-w: 30px;
  --tl-gap: 16px;
  --tl-axis-top: 26px;
  --tl-track-pt: 18px;
  --tl-pad-b: 34px;
  --tl-track-pb: 10px;
}

.timeline__head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap;
  padding: 18px var(--pad) 6px;
}
.tabs{ display: flex; gap: clamp(16px, 2vw, 28px); }
.tab{
  font-family: var(--sans); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper-dim);
  background: transparent; border: 0; border-bottom: 1px solid transparent;
  padding: 0 0 4px; cursor: pointer;
  transition: color .18s, border-color .18s;
}
.tab:hover{ color: var(--paper); border-bottom-color: var(--red); }
.tab.is-active{ color: var(--paper); border-bottom-color: var(--red); }

.timeline__controls{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tl-btn{
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper-dim); background: transparent; border: 1px solid var(--line);
  padding: 7px 13px; cursor: pointer;
  transition: color .18s, border-color .18s;
}
.tl-btn:hover{ color: var(--paper); border-color: var(--red); }
.timeline__hint{ font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-dim); margin: 0; }

.track{
  position: relative;
  overflow-x: auto; overflow-y: hidden;
  padding: var(--tl-track-pt) var(--pad) var(--tl-track-pb);
  cursor: grab;
}
.track.is-dragging{ cursor: grabbing; }
.track::-webkit-scrollbar-track{ background: transparent; }

.track__inner{
  display: flex; align-items: flex-start; gap: var(--tl-gap);
  width: max-content; padding-bottom: var(--tl-pad-b); position: relative;
}
.track__axis{ display: none; }

.item{
  flex: 0 0 auto; width: var(--tl-item-w);
  background: none; border: 0; padding: 0; margin: 0;
  color: inherit; font-family: inherit; text-align: left;
  cursor: pointer; position: relative;
}
.item__thumb{
  width: var(--tl-item-w); height: var(--tl-item-w); object-fit: cover; display: block;
  background: var(--ink-2); border: 1px solid var(--line);
  filter: grayscale(0.45);
  transition: filter .2s, border-color .2s, transform .2s;
}
.item__thumb--empty{
  display: grid; place-items: center; padding: 7px;
  background: var(--ink-2);
  font-size: 10px; line-height: 1.2; color: var(--paper-dim);
  text-align: center; overflow: hidden;
}
.item__title{
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 11px; line-height: 1.2; margin-top: 8px; color: var(--paper-dim);
  height: 2.4em;
}
.timeline.is-compact .item__thumb,
.timeline.is-compact .item__title{ display: none; }

/* axis line + markers, anchored from the item TOP via --tl-axis-top
   (works in both full and compact modes) */
.item::after{
  content: ""; position: absolute; left: 0; top: var(--tl-axis-top);
  width: calc(100% + var(--tl-gap)); height: 1px;
  background: var(--line); pointer-events: none;
}
.item__post{
  position: absolute; left: 50%; top: calc(var(--tl-axis-top) - 6px);
  width: 1px; height: 12px; background: var(--paper-dim);
  transform: translateX(-50%);
}
.item__year{
  position: absolute; left: 50%; top: calc(var(--tl-axis-top) - 28px);
  transform: translateX(-50%);
  font-size: 12px; font-weight: 800; letter-spacing: 0.02em;
  color: var(--red); white-space: nowrap;
}
.item__year::before{
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 2px; height: 18px; background: var(--red);
  transform: translateX(-50%);
}

.item:hover .item__thumb{ filter: grayscale(0); border-color: var(--paper-dim); transform: translateY(-3px); }
.item.is-active .item__thumb{ filter: grayscale(0); border-color: var(--red); outline: 2px solid var(--red); outline-offset: -1px; }
.item.is-active .item__title{ color: var(--paper); }
/* compact: emphasise the active post's tick (no thumbnail to highlight) */
.timeline.is-compact .item.is-active .item__post{
  background: var(--red); width: 2px; height: 18px;
  top: calc(var(--tl-axis-top) - 9px);
}
.timeline.is-compact .item:hover .item__post{ background: var(--paper); }

/* hover tooltip (compact horizontal + vertical page) */
.tl-tip{
  position: fixed; z-index: 60; pointer-events: none;
  width: 160px; padding: 8px;
  background: var(--ink-2); border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(0,0,0,.4);
  transform: translate(-50%, -100%);
  opacity: 0; transition: opacity .12s;
}
.tl-tip.is-on{ opacity: 1; }
.tl-tip img, .tl-tip__ph{
  width: 100%; height: 110px; object-fit: cover; display: block;
  border: 1px solid var(--line);
}
.tl-tip__ph{
  display: grid; place-items: center; padding: 6px; text-align: center;
  font-size: 10px; color: var(--paper-dim); background: var(--ink);
}
.tl-tip .y{ font-size: 11px; font-weight: 800; color: var(--red); margin-top: 7px; }
.tl-tip .t{ font-size: 12px; line-height: 1.25; color: var(--paper); margin-top: 2px; }

/* ───── Responsive ───── */
@media (max-width: 900px){
  .app{ height: auto; overflow: visible; }
  .topbar{ position: sticky; top: 0; flex-wrap: wrap; gap: 12px; }
  .stage{ position: static; overflow: visible; }
  .detail{ grid-template-columns: 1fr; height: auto; padding: 24px var(--pad) 40px; }
  .detail__main, .detail__news, .detail__docs{ overflow: visible; padding: 0; }
  .timeline{ position: sticky; bottom: 0; }
}

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