/* ══════════════════════════════════════════════════════════
   Skylake Observatory — site stylesheet
   No webfonts, no JS, no images. Every page links this file.
   Two faces only: a book serif for prose, a mono for anything
   the instruments produced (numbers, labels, logs, navigation).
   ══════════════════════════════════════════════════════════ */

:root{
  --paper:#e9eef0;
  --ink:#16232b;
  --teal:#1c6e76;
  --amber:#a8762a;
  --rule:rgba(22,35,43,.16);
  --panel:rgba(255,255,255,.55);

  /* Stratum ladder: one hue, darkening downward.
     Lightness itself encodes depth — no second colour needed. */
  --s1:#7fa9ad;
  --s2:#4d8288;
  --s3:#2a5a63;
  --s4:#12333b;

  --serif:"Iowan Old Style","Charter","Bitstream Charter","Palatino Linotype",Palatino,Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;

  --measure:36rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0c161c;
    --ink:#c6d4d9;
    --teal:#5aa8ad;
    --amber:#c99a4a;
    --rule:rgba(198,212,217,.18);
    --panel:rgba(255,255,255,.04);
    --s1:#5b8489;
    --s2:#436f76;
    --s3:#2d545c;
    --s4:#16333a;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.72;
  text-rendering:optimizeLegibility;
}
a{color:var(--teal);text-underline-offset:.2em;text-decoration-thickness:.5px}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ── Masthead ───────────────────────────────────────── */
.masthead{
  border-bottom:1px solid var(--rule);
  padding:1.1rem 1.5rem;
  display:flex;flex-wrap:wrap;gap:.7rem 2rem;
  align-items:baseline;justify-content:space-between;
}
.brand{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap}
.brand-mark{
  font-family:var(--mono);font-size:.8rem;letter-spacing:.34em;
  color:var(--teal);text-transform:uppercase;text-decoration:none;
}
.brand-note{font-size:.86rem;font-style:italic;opacity:.6}
.nav{font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;display:flex;gap:1.5rem}
.nav a{text-decoration:none;color:inherit;opacity:.7;text-transform:uppercase}
.nav a:hover{opacity:1;color:var(--teal)}
.nav a[aria-current]{opacity:1;color:var(--teal)}

.wrap{max-width:var(--measure);margin:0 auto;padding:0 1.5rem}

/* ── Entry masthead ─────────────────────────────────── */
.head{padding:4.5rem 0 0}
.eyebrow{
  font-family:var(--mono);font-size:.92rem;letter-spacing:.3em;
  color:var(--teal);margin:0 0 .6rem;
}
.title{
  font-weight:600;font-size:clamp(2.9rem,12vw,4.5rem);
  line-height:1.02;letter-spacing:-.015em;margin:0;
}
.title--sm{font-size:clamp(2.1rem,8.4vw,3.1rem)}
.chips{
  display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;
  margin:1.1rem 0 1.5rem;opacity:.85;text-transform:uppercase;
}
.chip-stratum{color:var(--amber)}

/* Signature element: the waterline, and the title beneath it */
.surface{position:relative;overflow:hidden;margin-bottom:2.6rem}
.surface::before{
  content:"";position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--teal) 12%,var(--teal) 88%,transparent);
  opacity:.55;
}
.echo-wrap{
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 88%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 88%);
  padding-top:.3rem;
}
.echo{
  font-weight:600;font-size:clamp(2.9rem,12vw,4.5rem);
  line-height:1.02;letter-spacing:-.015em;
  transform:scaleY(-1);
  opacity:.2;filter:blur(.5px);
  animation:breathe 11s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{opacity:.2;transform:scaleY(-1) translateY(0)}
  50%{opacity:.26;transform:scaleY(-1.03) translateY(1px)}
}
@media (prefers-reduced-motion:reduce){.echo{animation:none}}

/* Must sit after .echo: equal specificity, so source order is what decides.
   Keep this in step with .title--sm, or the echo stops matching its title. */
.echo--sm{font-size:clamp(2.1rem,8.4vw,3.1rem)}

/* ── Document fields ────────────────────────────────── */
.field{margin:0 0 2.6rem}
.field-name{
  font-family:var(--mono);font-weight:400;
  font-size:.73rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal);margin:0 0 .7rem;
}
.field p{margin:0 0 .9rem}
.field p:last-child{margin-bottom:0}

/* Loss note — the fixed closing field of every entry */
.loss{border-top:1px solid var(--rule);margin:3rem 0 0;padding:1.3rem 0 0}
.loss p{margin:0;opacity:.8}
.loss b{
  font-family:var(--mono);font-weight:400;font-size:.73rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--teal);
  display:block;margin-bottom:.5rem;
}

.appendix{
  border-left:2px solid var(--teal);
  background:var(--panel);
  padding:1.4rem;margin:0 0 2.6rem;
}
.appendix .field-name{margin-bottom:.6rem}
.appendix p{margin:0 0 .9rem}
.appendix p:last-child{margin-bottom:0}
.log{
  font-family:var(--mono);font-size:.82rem;line-height:1.7;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:.9rem 0;margin:.9rem 0;white-space:pre-wrap;
}

/* ── Canon page ─────────────────────────────────────── */
.doc-head{padding:4.5rem 0 0}
.doc-title{font-weight:600;font-size:clamp(2.1rem,7vw,2.9rem);line-height:1.14;letter-spacing:-.015em;margin:0 0 2rem}
.epigraph{
  font-size:1.1rem;line-height:1.85;font-style:italic;
  border-left:2px solid var(--teal);
  padding:.2rem 0 .2rem 1.2rem;margin:0 0 3.5rem;
}
.clause{margin:0 0 3rem}
.clause-no{
  font-family:var(--mono);font-size:.73rem;letter-spacing:.2em;
  color:var(--teal);display:block;margin-bottom:.4rem;
}
.clause h2{font-weight:600;font-size:1.35rem;letter-spacing:-.01em;margin:0 0 .8rem;line-height:1.3}
.clause p{margin:0 0 .9rem}
.clause p:last-child{margin-bottom:0}

/* Signature element: the stratum section (canon page only) */
.strata{margin:1.6rem 0 0;border-top:1px solid var(--rule)}
.stratum{
  display:grid;grid-template-columns:1rem 1fr;gap:0 1.1rem;
  border-bottom:1px solid var(--rule);padding:1.15rem 0;
}
.stratum-bar{border-radius:1px}
.s-1 .stratum-bar,.row-bar.s-1{background:var(--s1)}
.s-2 .stratum-bar,.row-bar.s-2{background:var(--s2)}
.s-3 .stratum-bar,.row-bar.s-3{background:var(--s3)}
.s-4 .stratum-bar,.row-bar.s-4{background:var(--s4)}
.stratum-name{font-weight:600;font-size:1.08rem;letter-spacing:-.01em;margin:0}
.stratum-dn{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;opacity:.7;margin:.15rem 0 .55rem;
}
.stratum-text{margin:0;font-size:.96rem;line-height:1.68}
.stratum-text em{font-style:italic;color:var(--teal)}

.iron{border:1px solid var(--teal);padding:1.3rem 1.4rem;margin:1.3rem 0 0}
.iron p{margin:0 0 .7rem}
.iron p:last-child{margin-bottom:0}
.iron b{font-weight:600}

/* ── Footer ─────────────────────────────────────────── */
.foot{
  border-top:1px solid var(--rule);
  margin-top:4rem;padding:2rem 0 4rem;
  font-family:var(--mono);font-size:.74rem;line-height:1.9;letter-spacing:.02em;
}
.byline{margin:0 0 1.1rem;text-transform:uppercase;letter-spacing:.1em}
.license{opacity:.6;margin:0 0 1.6rem;max-width:32rem;text-transform:none;letter-spacing:.01em;line-height:1.75}
.pager{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;text-transform:uppercase;letter-spacing:.08em}
.pager a{text-decoration:none}

@media (max-width:34rem){
  body{font-size:16.5px}
  .head,.doc-head{padding-top:3rem}
}

/* ── Home: hero + entry index ───────────────────────── */
.hero{padding:4.5rem 0 0}
.hero-title{font-weight:600;font-size:clamp(3.2rem,15vw,5.4rem);line-height:1;letter-spacing:-.02em;margin:0}
.hero-echo{font-weight:600;font-size:clamp(3.2rem,15vw,5.4rem);line-height:1;letter-spacing:-.02em}
.lede{margin:2.6rem 0 0;font-size:1.02rem}
.lede p{margin:0 0 .9rem}
.lede p:last-child{margin-bottom:0}

.section-label{
  font-family:var(--mono);font-size:.73rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--teal);
  margin:3.6rem 0 .2rem;padding-bottom:.7rem;
  border-bottom:1px solid var(--rule);
}
.list{display:block}
.row{
  display:grid;
  grid-template-columns:.85rem 6.4rem 1fr;
  gap:.1rem 1rem;align-items:baseline;
  border-bottom:1px solid var(--rule);
  padding:1rem 0;text-decoration:none;color:inherit;
}
.row:hover .row-title{color:var(--teal)}
.row-bar{grid-row:1/3;align-self:stretch;border-radius:1px;min-height:2.4rem}
.row-no{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;opacity:.65}
.row-title{font-size:1.14rem;font-weight:600;letter-spacing:-.01em}
.row-meta{
  grid-column:3;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;opacity:.6;
}
.row-note{grid-column:3;font-size:.95rem;opacity:.8;margin:.3rem 0 0}
.legend{
  font-family:var(--mono);font-size:.71rem;line-height:1.8;
  letter-spacing:.03em;opacity:.55;margin:1.4rem 0 0;
}

/* ── Tales ──────────────────────────────────────────── */
.tale-head{padding:4.5rem 0 2.6rem;border-bottom:1px solid var(--rule);margin-bottom:2.6rem}
.tale-title{font-weight:600;font-size:clamp(2.1rem,8vw,3.1rem);line-height:1.1;letter-spacing:-.015em;margin:.5rem 0 0}
.tale-body{font-size:1.06rem;line-height:1.78}
.tale-body p{margin:0 0 1.15rem}
.tale-body p:last-child{margin-bottom:0}
.tale-body .beat{text-align:center;letter-spacing:.5em;color:var(--teal);opacity:.6;margin:2rem 0}

/* ── Not found ──────────────────────────────────────── */
.nf{padding:6rem 0 0;text-align:center}
.nf-code{font-family:var(--mono);font-size:.78rem;letter-spacing:.3em;color:var(--teal);margin:0 0 1rem}
.nf-title{font-weight:600;font-size:clamp(1.8rem,6vw,2.4rem);line-height:1.2;margin:0 0 1.2rem}
.nf p{margin:0 auto;max-width:26rem;opacity:.75}