/* The Digital Horn Diaries — shared stylesheet
   by Sebastián Rivas · Temuco · for Danley Sound Labs */

:root{
  --ink:#f3f6fb;
  --ink-soft:#c3cdda;
  --ink-mute:#6d7988;
  --paper:#05070b;
  --paper-2:#0c1118;
  --paper-3:#141a24;
  --brass:#4a7dff;
  --brass-bright:#8fb0ff;
  --brass-deep:#2a4db0;
  --rule:rgba(74,125,255,0.20);
  --shadow:0 30px 80px -20px rgba(0,0,0,0.75);
  --serif:"EB Garamond","Cormorant Garamond",Georgia,serif;
  --display:"Cormorant Garamond","EB Garamond",Georgia,serif;
  --ui:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --measure:38rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:19px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body{
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(200,149,106,0.10), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(200,149,106,0.06), transparent 60%),
    linear-gradient(180deg, #0a0908 0%, #100c08 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.78  0 0 0 0 0.58  0 0 0 0 0.41  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.55;mix-blend-mode:overlay;
}

a{color:var(--brass-bright);text-decoration:none}
a:hover{color:var(--ink)}

/* ---------- TOP BAR ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 32px;
  font-family:var(--ui);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ink-mute);
  background:linear-gradient(180deg, rgba(10,9,8,0.85), rgba(10,9,8,0));
  backdrop-filter:blur(6px);
}
.topbar a{color:inherit;text-decoration:none}
.topbar .brand{color:var(--brass);font-weight:600;letter-spacing:0.32em}
.topbar .brand span{color:var(--ink-mute);font-weight:400;margin-left:14px;letter-spacing:0.22em}
.topbar .meta{display:flex;gap:22px}
.topbar .meta a{color:var(--ink-mute);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:.3s}
.topbar .meta a:hover{color:var(--brass-bright);border-bottom-color:var(--brass)}

/* ---------- HERO ---------- */
.hero{
  position:relative;min-height:100vh;
  display:grid;grid-template-rows:1fr auto;
  padding:140px 8vw 64px;
  z-index:1;
}
.hero .eyebrow{
  font-family:var(--ui);font-size:11px;letter-spacing:0.5em;text-transform:uppercase;
  color:var(--brass);margin-bottom:48px;
  display:flex;align-items:center;gap:18px;
}
.hero .eyebrow::before{content:"";display:inline-block;width:42px;height:1px;background:var(--brass)}
.hero h1{
  font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(56px, 9.5vw, 158px);line-height:0.92;letter-spacing:-0.018em;
  color:var(--ink);max-width:14ch;
}
.hero h1 .tit{display:block;font-style:normal;font-weight:400}
.hero h1 .small{display:block;font-size:0.42em;font-style:normal;letter-spacing:0.04em;color:var(--brass-bright);margin-top:24px;font-weight:400}
.hero .below{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;
  padding-top:80px;border-top:1px solid var(--rule);margin-top:64px;
}
.hero .below .lead{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(22px,2.4vw,30px);line-height:1.4;color:var(--ink-soft);max-width:32ch;
}
.hero .below .signoff{
  font-family:var(--ui);font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-mute);
  text-align:right;line-height:2;
}
.hero .below .signoff strong{color:var(--brass);font-weight:600;letter-spacing:0.22em;display:block}
.hero .below .signoff em{font-style:normal;color:var(--ink-soft)}
.stamp{
  position:absolute;top:140px;right:8vw;
  border:1px solid var(--brass);color:var(--brass);
  padding:14px 22px;
  font-family:var(--ui);font-size:10px;letter-spacing:0.32em;text-transform:uppercase;
  transform:rotate(2deg);
  background:rgba(200,149,106,0.04);
}
.stamp strong{display:block;font-size:22px;font-family:var(--display);font-style:italic;font-weight:400;letter-spacing:0;text-transform:none;color:var(--brass-bright);margin-top:6px}
.cue{
  position:absolute;left:50%;bottom:38px;transform:translateX(-50%);
  color:var(--ink-mute);font-family:var(--ui);font-size:10px;letter-spacing:0.4em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.cue .line{width:1px;height:54px;background:linear-gradient(180deg,var(--brass),transparent);animation:drip 2.4s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- MAIN / CHAPTER ---------- */
main{position:relative;z-index:1;padding:120px 8vw 0}
.chapter-intro{display:grid;grid-template-columns:240px 1fr;gap:80px;max-width:1200px;margin:0 auto 120px;align-items:start}
.chapter-intro .num{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:128px;line-height:0.9;color:var(--brass);
  border-top:1px solid var(--rule);padding-top:24px;
}
.chapter-intro .num small{display:block;font-family:var(--ui);font-size:10px;letter-spacing:0.4em;text-transform:uppercase;color:var(--ink-mute);font-style:normal;margin-bottom:18px}
.chapter-intro .head h2{
  font-family:var(--display);font-weight:400;font-style:italic;
  font-size:clamp(36px,4.6vw,64px);line-height:1.05;letter-spacing:-0.012em;color:var(--ink);
  margin-bottom:28px;max-width:18ch;
}
.chapter-intro .head .deck{
  font-family:var(--display);font-style:italic;font-weight:300;color:var(--ink-soft);
  font-size:clamp(20px,2.1vw,26px);line-height:1.45;max-width:42ch;
}
article.body{max-width:var(--measure);margin:0 auto;padding-bottom:160px}
article.body p{margin:0 0 1.4em;color:var(--ink-soft);font-size:1.05em}
article.body p strong{color:var(--ink);font-weight:600}
article.body em{color:var(--ink)}
article.body h3.section{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(28px,3.4vw,42px);color:var(--ink);margin:80px 0 28px;letter-spacing:-0.01em;
}
article.body .dropcap::first-letter{
  font-family:var(--display);font-weight:400;font-style:normal;
  font-size:5.2em;line-height:0.86;float:left;padding:0.06em 0.16em 0 0;color:var(--brass-bright);
}

/* Pull quote */
.pull{
  margin:80px -8vw;padding:64px 8vw;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:linear-gradient(180deg, rgba(200,149,106,0.04), transparent);
  text-align:center;
}
.pull blockquote{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(28px,4vw,52px);line-height:1.18;color:var(--ink);
  max-width:22ch;margin:0 auto;letter-spacing:-0.01em;
}
.pull blockquote::before{content:"“";color:var(--brass);font-size:2em;line-height:0.1;display:block;margin-bottom:0.2em}
.pull cite{
  display:block;margin-top:36px;font-family:var(--ui);font-style:normal;
  font-size:10px;letter-spacing:0.4em;text-transform:uppercase;color:var(--brass);
}

/* Figures */
figure.fig{margin:64px -4vw;position:relative}
figure.fig.full{margin:96px -8vw}
figure.fig .frame{
  position:relative;background:var(--paper-2);border:1px solid var(--rule);padding:18px;
  box-shadow:var(--shadow);
}
figure.fig .frame::before,figure.fig .frame::after{
  content:"";position:absolute;width:14px;height:14px;border:1px solid var(--brass);
}
figure.fig .frame::before{top:-7px;left:-7px;border-right:none;border-bottom:none}
figure.fig .frame::after{bottom:-7px;right:-7px;border-left:none;border-top:none}
figure.fig img{display:block;width:100%;height:auto;filter:contrast(1.02) saturate(0.95)}
figure.fig figcaption{
  margin-top:22px;
  display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:baseline;
  font-family:var(--ui);font-size:13px;color:var(--ink-mute);
}
figure.fig figcaption .tag{
  font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:var(--brass);
  border:1px solid var(--brass);padding:5px 10px;
}
figure.fig figcaption p{margin:0;font-style:italic;color:var(--ink-soft);font-family:var(--serif);font-size:16px;line-height:1.5}

.note{
  font-family:var(--ui);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--brass);border-left:1px solid var(--brass);padding:6px 0 6px 16px;margin:48px 0;
}
.endmark{
  text-align:center;margin:120px 0 160px;color:var(--brass);font-family:var(--display);font-size:42px;
  letter-spacing:0.6em;
}

/* Table rendering for structured tables from docs */
.data{
  margin:48px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:13px;color:var(--ink-soft);
  width:100%;border-collapse:collapse;
}
.data td,.data th{padding:10px 14px;border-bottom:1px solid rgba(200,149,106,0.08);text-align:left}
.data th{color:var(--brass);font-weight:500;letter-spacing:0.08em;text-transform:uppercase;font-size:10px}

/* Inter-chapter pager */
.pager{
  max-width:1200px;margin:0 auto;padding:60px 0;
  display:grid;grid-template-columns:1fr 1fr;gap:40px;border-top:1px solid var(--rule);
}
.pager a{
  display:block;padding:28px;border:1px solid var(--rule);text-decoration:none;color:var(--ink-soft);
  transition:.4s;background:rgba(255,255,255,0.01);
}
.pager a:hover{border-color:var(--brass);color:var(--ink);background:rgba(200,149,106,0.04)}
.pager small{display:block;font-family:var(--ui);font-size:10px;letter-spacing:0.4em;text-transform:uppercase;color:var(--brass);margin-bottom:8px}
.pager strong{font-family:var(--display);font-style:italic;font-weight:400;font-size:24px;color:var(--ink);display:block}
.pager .prev{text-align:left}
.pager .next{text-align:right}
.pager .prev::before{content:"← "}
.pager .next::after{content:" →"}

/* ---------- FOOTER ---------- */
footer{
  position:relative;z-index:1;
  padding:80px 8vw 60px;border-top:1px solid var(--rule);
  background:linear-gradient(180deg, transparent, rgba(0,0,0,0.4));
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:60px;align-items:start;
  font-family:var(--ui);font-size:12px;color:var(--ink-mute);letter-spacing:0.06em;
}
footer h4{font-family:var(--ui);font-size:10px;letter-spacing:0.4em;text-transform:uppercase;color:var(--brass);margin-bottom:18px;font-weight:600}
footer .colofon{font-family:var(--display);font-style:italic;font-size:18px;color:var(--ink-soft);line-height:1.55;max-width:46ch}
footer ul{list-style:none}
footer li{margin-bottom:10px;color:var(--ink-soft)}
footer .magical{
  grid-column:1/-1;margin-top:60px;padding-top:36px;border-top:1px solid var(--rule);
  text-align:center;
}
footer .magical a{
  font-family:var(--display);font-style:italic;font-weight:400;font-size:24px;
  color:var(--brass-bright);text-decoration:none;letter-spacing:0.02em;
  border-bottom:1px solid var(--brass-deep);padding-bottom:6px;
  transition:.4s;
}
footer .magical a:hover{color:var(--ink);border-bottom-color:var(--brass-bright)}
footer .magical small{display:block;margin-top:14px;font-family:var(--ui);font-size:10px;letter-spacing:0.4em;text-transform:uppercase;color:var(--ink-mute)}

/* ---------- REVEAL ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1.1s ease, transform 1.1s ease}
.rv.in{opacity:1;transform:translateY(0)}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}

/* ---------- HORN ORNAMENT ---------- */
.horn-orn{
  position:absolute;right:-200px;top:-100px;width:920px;height:920px;
  pointer-events:none;z-index:0;opacity:.35;
  animation:slowSpin 120s linear infinite;
}
@keyframes slowSpin{to{transform:rotate(360deg)}}

/* ---------- ARCHIVE / HOME ---------- */
.archive{
  max-width:1280px;margin:0 auto;padding:60px 8vw 120px;position:relative;z-index:1;
}
.archive .head{
  display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px;
  border-bottom:1px solid var(--rule);padding-bottom:40px;margin-bottom:60px;
}
.archive .head h2{
  font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(40px,5.6vw,80px);
  line-height:1;color:var(--ink);letter-spacing:-0.015em;
}
.archive .head .count{
  font-family:var(--ui);font-size:11px;letter-spacing:0.4em;text-transform:uppercase;color:var(--brass);
}
.entries{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--rule)}
.entry{
  display:grid;grid-template-columns:160px 1fr auto;gap:40px;align-items:start;
  padding:36px 20px;border-bottom:1px solid var(--rule);
  text-decoration:none;color:inherit;transition:.4s;
  position:relative;
}
.entry:hover{background:rgba(200,149,106,0.04)}
.entry .date{
  font-family:var(--ui);font-size:10px;letter-spacing:0.32em;text-transform:uppercase;color:var(--brass);
  padding-top:6px;
}
.entry .date strong{display:block;font-family:var(--display);font-style:italic;font-weight:400;font-size:40px;color:var(--ink);letter-spacing:0;text-transform:none;line-height:1;margin-top:6px}
.entry .body h3{
  font-family:var(--display);font-weight:400;font-style:italic;font-size:clamp(26px,2.8vw,36px);
  line-height:1.1;color:var(--ink);margin-bottom:14px;letter-spacing:-0.01em;
}
.entry .body p{
  font-family:var(--serif);color:var(--ink-soft);font-size:17px;line-height:1.55;max-width:58ch;
}
.entry .meta{
  text-align:right;font-family:var(--ui);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-mute);
  white-space:nowrap;padding-top:10px;
}
.entry .meta span{display:block;margin-bottom:8px}
.entry .meta strong{color:var(--brass)}
.entry .arrow{
  position:absolute;right:0;bottom:36px;
  width:30px;height:1px;background:var(--brass);transition:.5s;
}
.entry:hover .arrow{width:60px}

/* Responsive */
@media (max-width: 980px){
  .hero{padding:120px 6vw 48px}
  .hero .below{grid-template-columns:1fr;gap:36px;text-align:left}
  .hero .below .signoff{text-align:left}
  .stamp{position:relative;display:inline-block;top:auto;right:auto;margin-bottom:32px}
  .chapter-intro{grid-template-columns:1fr;gap:24px}
  .chapter-intro .num{font-size:72px}
  main{padding:64px 6vw 0}
  article.body{padding-bottom:80px}
  figure.fig{margin:48px -2vw}
  figure.fig.full{margin:64px -6vw}
  .pull{margin:48px -6vw;padding:48px 6vw}
  footer{grid-template-columns:1fr;gap:40px}
  .horn-orn{display:none}
  .entry{grid-template-columns:1fr;gap:14px;padding:28px 14px}
  .entry .meta{text-align:left}
  .entry .arrow{display:none}
  .pager{grid-template-columns:1fr}
}