/* Aperture North — startrail.click — hand-built dark line system (do not copy to other projects) */
:root {
  --stc-ink: #0b0c0f;
  --stc-slab: #12151c;
  --stc-mist: #c8d0e0;
  --stc-dim: #7f8899;
  --stc-trace: #2b3242;
  --stc-beam: #7aa2ff;
  --stc-rail: 1.02rem;
  --stc-measure: 68ch;
  --stc-font: "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
  --stc-serif: "Georgia", "Palatino", serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.stc {
  margin: 0;
  min-height: 100vh;
  color: var(--stc-mist);
  background: radial-gradient(1200px 600px at 50% 0%, #151a25 0%, var(--stc-ink) 60%);
  font-family: var(--stc-font);
  line-height: 1.7;
  letter-spacing: 0.01em;
  font-kerning: normal;
  font-synthesis: none;
}

a { color: var(--stc-beam); text-decoration-thickness: 0.04em; text-underline-offset: 0.2em; }
a:hover { color: #9bb6ff; }
a:focus-visible { outline: 2px solid #9bb6ff; outline-offset: 3px; }

.stc-skip {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.stc-skip:focus { left: 1rem; top: 1rem; width: auto; height: auto; padding: 0.5rem 0.8rem; background: #0e1118; z-index: 200; }

.stc-outer {
  display: block;
  min-height: 100vh;
}

.stc-topline {
  border-top: 1px solid var(--stc-trace);
  background: linear-gradient(90deg, rgba(122,162,255,0.1), rgba(18,21,28,0) 30%, rgba(18,21,28,0) 70%, rgba(122,162,255,0.1));
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--stc-dim);
  text-align: center;
  padding: 0.55rem 1rem;
}

.stc-brandplate {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.4rem 1.25rem 0.2rem;
  text-align: center;
}

.stc-crest {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9ba6b8;
}
.stc-crest img { width: 36px; height: 36px; display: block; }

.stc-mast {
  text-align: center;
  max-width: 920px;
  margin: 0 auto 1.4rem;
  padding: 0.6rem 1.25rem 0;
}
.stc-mast h1, .stc-mast .stc-ledger {
  font-family: var(--stc-serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.1vw, 2.1rem);
  line-height: 1.2;
  margin: 0.4rem 0 0.2rem;
  letter-spacing: 0.02em;
  color: #eef2f8;
}
.stc-ledger { font-size: 1rem; color: #a8b0c0; }

.stc-undertier {
  max-width: 1100px;
  margin: 0 auto 2.2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem 0.6rem;
  border-top: 1px solid var(--stc-trace);
  border-bottom: 1px solid var(--stc-trace);
  padding: 0.7rem 0.5rem 0.75rem;
}
.stc-undertier a {
  color: #ccd4e0;
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
}
.stc-undertier a[aria-current="page"] {
  color: var(--stc-ink);
  background: #dfe6f7;
  font-weight: 600;
}
.stc-undertier a:hover { color: #fff; }

.stc-ribbon {
  max-width: 1200px;
  margin: 0 auto 3rem;
  padding: 0 1.25rem 2rem;
}

.stc-hero {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,0.8fr);
  gap: 2.2rem;
  align-items: end;
  margin-bottom: 3.2rem;
}
@media (max-width: 960px) {
  .stc-hero { grid-template-columns: 1fr; }
}

.stc-hero-figure {
  position: relative;
  margin: 0;
  border: 1px solid var(--stc-trace);
  background: #0a0b10;
  padding: 0.5rem;
}
.stc-hero-figure figcaption {
  font-size: 0.8rem;
  color: #8e97a6;
  margin-top: 0.4rem;
  line-height: 1.4;
  max-width: 46ch;
}
.stc-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.stc-lead {
  font-size: 1.05rem;
  color: #b7c0d1;
  max-width: 42ch;
}
.stc-annotation {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6a7385;
}
.stc-lead p { margin: 0.9rem 0; }

.stc-ledger-block {
  max-width: var(--stc-measure);
  border-left: 2px solid var(--stc-beam);
  padding: 0.4rem 0 0.4rem 1rem;
  margin: 0 0 1.1rem 0.2rem;
  color: #9aa3b2;
  font-size: 0.95rem;
}

.stc-essay {
  display: block;
  margin-bottom: 3.4rem;
}
.stc-essay h2 {
  font-family: var(--stc-serif);
  font-size: 1.45rem;
  color: #f0f3f8;
  margin: 0 0 0.8rem;
  font-weight: 500;
}
.stc-essay p {
  max-width: var(--stc-measure);
  color: #b9c1cf;
  margin: 0.7rem 0 0.6rem;
}
.stc-essay p strong { color: #e1e6ef; }

.stc-bisect {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin: 2.5rem 0 0;
}
.stc-bisect img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--stc-trace);
}

.stc-coda {
  margin-top: 3rem;
  border-top: 1px solid var(--stc-trace);
  padding-top: 1.5rem;
  color: #8f98a6;
  font-size: 0.95rem;
}
.stc-coda a { color: #d4daf0; }
.stc-foot {
  max-width: 1200px;
  margin: 0 auto 4.5rem;
  padding: 0 1.25rem 2rem;
  display: grid;
  grid-template-columns: 1.1fr 0.7fr 0.8fr;
  gap: 1.5rem;
  border-top: 1px solid #1e2430;
  padding-top: 2.2rem;
  font-size: 0.88rem;
  color: #7d8593;
}
@media (max-width: 880px) {
  .stc-foot { grid-template-columns: 1fr; }
}
.stc-foot h3 { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em; color: #9ba4b0; margin: 0 0 0.5rem; }
.stc-mono { font-size: 0.85rem; line-height: 1.5; }
.stc-disclaim {
  font-size: 0.82rem;
  line-height: 1.55;
  color: #6f7785;
}

.stc-legal { max-width: 780px; margin: 0 auto; padding: 0 1.25rem 3.5rem; }
.stc-legal h1 { font-family: var(--stc-serif); color: #eef2f8; }
.stc-legal h2 { font-size: 1.1rem; margin-top: 1.4rem; color: #d6dce8; }
.stc-legal p, .stc-legal li { color: #a9b1bf; }
.stc-legal ul { padding-left: 1.1rem; }

.stc-article-hero { margin: 0 0 1.2rem; }
.stc-article-hero figure { margin: 0; }
.stc-article-hero figcaption { font-size: 0.8rem; color: #7d8693; margin-top: 0.3rem; }

.stc-brick {
  background: #0d1017;
  border: 1px solid var(--stc-trace);
  padding: 1.2rem 1.3rem 1.3rem;
  margin: 0 0 1.1rem;
}
.stc-brick p { max-width: none; }
.stc-brick h3 { margin: 0.2rem 0 0.4rem; font-size: 1.05rem; color: #e1e5ee; }
.stc-tile {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.stc-tile a {
  display: block;
  border: 1px solid #222836;
  padding: 0.8rem 0.9rem;
  text-decoration: none;
  color: #dbe1ec;
  background: #0e1016;
  transition: border-color 0.2s, background 0.2s;
}
.stc-tile a:hover { border-color: #3b465c; background: #11141c; }

.stc-cookie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 150;
  display: none;
  padding: 0.7rem 1rem;
  background: #0e1018;
  border-top: 1px solid #262d3a;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.4);
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1.2rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: #aeb6c2;
}
.stc-cookie[aria-hidden="false"] { display: flex; }
.stc-cookie p { max-width: 64ch; margin: 0; }
.stc-cookie .stc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 0.9rem; border-radius: 4px;
  border: 1px solid #3c4656; background: #151922; color: #e6eaf2;
  font: inherit; cursor: pointer;
}
.stc-cookie .stc-btn-accept { background: #dfe6f7; color: #0b0c0f; border-color: #dfe6f7; }
.stc-cookie .stc-btn:hover { filter: brightness(1.08); }
.stc-cookie a { color: #9bb0ff; }

.stc-breadcrumb {
  max-width: 1200px; margin: 0 auto; padding: 0.2rem 1.25rem 0;
  font-size: 0.85rem; color: #6f7887;
}
.stc-breadcrumb a { color: #9ba8c0; }
.stc-breadcrumb[aria-label="Breadcrumb"] ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.stc-breadcrumb li + li::before { content: "/"; margin-right: 0.35rem; color: #4b5363; }
.stc-breadcrumb{ margin-bottom:0.2rem; }

form.stc-form { max-width: 34rem; }
form.stc-form label { display: block; margin: 0.4rem 0 0.2rem; color: #b6becb; }
form.stc-form input, form.stc-form textarea { width: 100%; padding: 0.55rem 0.6rem; border: 1px solid #2b3240; background: #0a0b10; color: #e0e4ec; font: inherit; border-radius: 3px; }
form.stc-form textarea { min-height: 7rem; resize: vertical; }
form.stc-form .stc-btn, form.stc-form button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 0.9rem; border-radius: 4px;
  border: 1px solid #3c4656; background: #151922; color: #e6eaf2;
  font: inherit; cursor: pointer; margin-top: 0.6rem;
}
form.stc-form .stc-btn-accept, form.stc-form button.stc-btn-accept {
  background: #dfe6f7; color: #0b0c0f; border-color: #dfe6f7;
}
form.stc-form .stc-btn:hover { filter: brightness(1.05); }
.stc-breadcrumb + .stc-ribbon h1, .stc-ribbon h1 { font-family: var(--stc-serif); font-size: 1.8rem; color: #f0f3f7; }
.stc-ribbon p { color: #b0b8c5; }
.stc-ribbon{ padding-top:0.5rem; }

.stc-ribbon p.stc-abstract { color: #9aa1ae; }
