/* Perspectives: the same Graphite world, with room for long-form reading. */
.pov-page {
  background:var(--paper); color:var(--ink); color-scheme:dark;
  font-family:'Space Grotesk',sans-serif;
  --reading-edge:rgba(166,240,200,.2);
}
.pov-page ::selection { background:var(--signal); color:var(--on-signal); }
.pov-shell { background:var(--paper) !important; }
.pov-noise { display:none; }
.pov-page #progressBar { background:var(--signal) !important; }
.pov-page a { color:var(--fluency); }
.pov-page a:hover { color:var(--signal); }
.pov-page a:focus-visible, .pov-mobile-nav summary:focus-visible {
  outline:3px solid var(--signal); outline-offset:6px;
}
.pov-page h1, .pov-page h2, .pov-page h3 { color:var(--ink); }
.pov-page .pov-highlight {
  background:none !important; color:var(--signal) !important;
  padding:0 !important; box-shadow:none !important;
}
.pov-page .pov-callout {
  position:relative; border-left:3px solid var(--signal);
  background:#172B23 !important; color:var(--ink) !important;
  box-shadow:6px 6px 0 #0B1511;
}
.pov-callout::after {
  content:''; position:absolute; width:6px; height:6px; background:var(--signal);
  top:16px; right:16px; box-shadow:-10px 0 0 rgba(191,255,111,.3);
}
.pov-signal-block { background:var(--signal) !important; }
.pov-attempt-block { background:#709C83 !important; }
.pov-signal-block svg rect[fill="#95D7AE"] { fill:#203C2D; }
.pov-signal-block svg rect[fill="#5B7A58"] { fill:#486B37; }
.pov-signal-block svg rect[fill="#1F3933"] { fill:var(--signal); }
.pov-page #dotsGrid svg rect[fill="#95D7AE"] { fill:var(--signal); }
.pov-chart-frame > div { min-width:0; }
.pov-page .hov-lift, .pov-page .hov-cta, .pov-nav-cta {
  background:var(--signal) !important; color:var(--on-signal) !important;
  border:1px solid var(--signal) !important; box-shadow:4px 4px 0 #3D6338;
  text-decoration:none; transition:background .2s ease,box-shadow .2s ease;
}
.pov-page .hov-lift:hover, .pov-page .hov-cta:hover, .pov-nav-cta:hover {
  background:var(--signal-hover) !important; color:var(--on-signal) !important;
  box-shadow:6px 6px 0 #3D6338 !important;
}
.pov-page .hov-lift span, .pov-page .hov-cta span { color:inherit !important; }

/* Compact navigation keeps the essays usable on narrow screens. */
.pov-nav {
  position:sticky; top:0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; gap:24px; padding:16px 28px;
  background:#111A1F; border-bottom:1px solid var(--reading-edge);
  box-shadow:none; font-size:12px; line-height:1.5;
}
.pov-logo { flex-shrink:0; }
.pov-nav-links { display:flex; align-items:center; gap:clamp(16px,2.3vw,32px); }
.pov-nav-links a, .pov-mobile-links > a:not(.pov-nav-cta) {
  color:var(--ink); text-decoration:none; text-transform:uppercase;
  letter-spacing:.04em; font-size:12px;
}
.pov-nav-links a { padding:7px 0; border-bottom:2px solid transparent; }
.pov-nav-links a[aria-current] { border-bottom-color:var(--signal); }
.pov-nav-links a:hover { color:var(--signal); border-bottom-color:var(--signal); }
.pov-nav-cta { padding:10px 14px; white-space:nowrap; font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.pov-mobile-nav { display:none; }
.pov-back-link {
  display:inline-block; margin-bottom:28px; font-size:11px;
  text-decoration:none; text-transform:uppercase; letter-spacing:.1em;
}

/* The chapter margins carry the playful details, away from the text. */
.pov-section { scroll-margin-top:90px; }
.pov-hero { isolation:isolate; overflow:hidden; }
.pov-hero::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at 95% 75%,rgba(166,240,200,.055),transparent 48%);
}
.pov-hero-visitor {
  position:absolute; right:max(40px,calc((100% - 1040px)/2)); bottom:78px;
  width:100px; height:110px; pointer-events:none;
}
.pov-hero-visitor img, .pov-closing-crew img, .pov-index-visitor img {
  display:block; width:100%; height:auto; image-rendering:pixelated;
  filter:drop-shadow(0 8px 0 #0A1511);
}
.pov-spark { position:absolute; left:-24px; top:34px; width:7px; height:7px; background:var(--signal); }
.pov-spark::after { content:''; position:absolute; right:146px; top:22px; width:4px; height:4px; background:#A6F0C8; opacity:.5; }
.pov-chapter::after {
  content:''; position:absolute; left:max(36px,calc((100% - 1120px)/2)); top:114px;
  width:6px; height:6px; background:var(--signal); pointer-events:none;
  box-shadow:11px 0 0 rgba(191,255,111,.4),22px 0 0 rgba(191,255,111,.15);
}
.pov-section:nth-of-type(4)::after, .pov-section:nth-of-type(7)::after {
  width:48px; height:54px; top:106px; box-shadow:none;
  background:url('../assets/graphite-blink.svg') center / contain no-repeat;
  image-rendering:pixelated; opacity:.85;
}
.pov-feature {
  background:#101F19 !important;
  border-top:1px solid #365345; border-bottom:1px solid #365345;
}
.pov-feature::before {
  content:''; position:absolute; top:-3px; left:max(28px,calc((100% - 984px)/2));
  width:54px; height:5px; background:var(--signal);
  box-shadow:64px 0 0 #466F44;
}
.pov-closing { background:#101C18 !important; border-top:1px solid #365345; }
.pov-closing-crew { display:flex; justify-content:center; gap:14px; margin:0 auto 40px; }
.pov-closing-crew img { width:52px; }
.pov-closing-crew img:first-child { transform:rotate(-7deg); }
.pov-closing-crew img:last-child { transform:rotate(7deg); }
.pov-next {
  position:relative; z-index:2; max-width:1040px; margin:0 auto;
  padding:58px 28px; display:grid; grid-template-columns:1fr auto; gap:14px 28px;
  border-top:1px solid var(--reading-edge);
}
.pov-next > span { grid-column:1/-1; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.pov-next > a { font-family:'Instrument Serif',serif; font-size:clamp(28px,3vw,38px); line-height:1.15; text-decoration:none; color:var(--ink); }
.pov-next > a span { color:var(--signal); }
.pov-next .pov-all { font-family:'Space Grotesk',sans-serif; font-size:11px; align-self:end; text-transform:uppercase; letter-spacing:.07em; color:var(--fluency); }
.pov-page footer { background:#0D1612; border-top-color:#294532 !important; }
.pov-page footer a { color:#C5D7CF !important; }
.pov-page footer a:hover { color:var(--signal) !important; }

/* The library feels like a pair of editions from the same studio. */
.pov-index main { position:relative; }
.pov-index-hero { position:relative; padding-right:120px; }
.pov-index-visitor { position:absolute; right:36px; top:135px; width:82px; pointer-events:none; }
.pov-index .essay-card { background:#1C292F; border-color:#4F6C60; box-shadow:5px 5px 0 #BFFF6F; }
.pov-index .card-link:hover .essay-card { background:#21342C; border-color:var(--signal); box-shadow:8px 8px 0 #BFFF6F; }
.pov-index .card-link:nth-child(2) .essay-card { box-shadow:5px 5px 0 #68CAA0; }
.pov-index .read-arrow { border-color:var(--signal) !important; color:var(--signal); }
.pov-index .card-link:hover .read-arrow { background:var(--signal); color:var(--on-signal); }

@media (max-width:1100px) {
  .pov-nav { gap:18px; padding-inline:22px; }
  .pov-nav-links { gap:16px; }
  .pov-nav-links a { font-size:10px; }
  .pov-chapter::after, .pov-section:nth-of-type(4)::after, .pov-section:nth-of-type(7)::after { display:none; }
  .pov-hero-visitor { right:40px; width:70px; height:77px; bottom:42px; }
}
@media (max-width:960px) {
  .pov-nav > .pov-nav-links, .pov-nav > .pov-nav-cta { display:none; }
  .pov-mobile-nav { display:block; margin-left:auto; }
  .pov-mobile-nav summary { display:flex; flex-direction:column; gap:5px; padding:12px 4px; list-style:none; cursor:pointer; }
  .pov-mobile-nav summary::-webkit-details-marker { display:none; }
  .pov-mobile-nav summary span { width:24px; height:2px; background:var(--fluency); }
  .pov-mobile-links {
    position:absolute; top:100%; left:0; right:0; display:flex; flex-direction:column;
    align-items:flex-start; gap:22px; padding:26px; background:#111A1F;
    border-bottom:1px solid #466553; box-shadow:0 12px 20px rgba(0,0,0,.25);
  }
  .pov-hero-visitor { width:52px; height:58px; bottom:28px; right:28px; }
  .pov-spark { width:4px; height:4px; left:-14px; top:22px; }
  .pov-spark::after { display:none; }
}
@media (max-width:760px) {
  .pov-page .keep, .pov-page .one-line { white-space:normal; }
  .pov-page .stack { grid-template-columns:minmax(0,1fr) !important; gap:20px !important; }
  .pov-page .stack > .vs { flex-direction:row !important; padding:4px 0 !important; }
  .pov-page .stack > div { min-width:0; }
  .pov-figure { padding:24px 20px !important; margin-inline:16px !important; }
  .pov-chart-frame { grid-template-columns:16px minmax(0,1fr) !important; gap:10px !important; }
  .pov-chart-series, .pov-chart-labels { gap:8px !important; padding-left:0 !important; }
  .pov-chart-labels > div { font-size:8px !important; letter-spacing:.02em !important; overflow-wrap:anywhere; }
  .pov-chart-frame [data-comment-anchor] { font-size:8px !important; letter-spacing:.02em !important; }
  .pov-page #dotsGrid { grid-template-columns:repeat(10,1fr) !important; }
  .pov-next { grid-template-columns:1fr; gap:18px; }
  .pov-page footer > div:last-child { flex-wrap:wrap; row-gap:14px; }
}
@media (max-width:500px) {
  .pov-nav { padding:14px 20px; }
  .pov-back-link { margin-bottom:24px; }
  .pov-hero { padding-top:44px !important; padding-bottom:96px !important; }
  .pov-hero-visitor { bottom:20px; }
  .pov-section { scroll-margin-top:86px; }
  .pov-index-hero { padding-right:0; }
  .pov-index-visitor { top:24px; right:26px; width:44px; }
  .pov-closing .hov-lift, .pov-index .hov-cta { font-size:10px !important; }
}
@media (prefers-reduced-motion:reduce) {
  .pov-page { scroll-behavior:auto; }
  .pov-page *, .pov-page *::before, .pov-page *::after { animation:none !important; transition:none !important; }
}
@media print {
  .pov-nav, .pov-next, #progressBar, .pov-hero-visitor, .pov-closing-crew { display:none !important; }
  .pov-page, .pov-shell { color:#17271F !important; background:white !important; }
  .pov-page [style*="color:"] { color:#17271F !important; }
  .pov-page [style*="background:"], .pov-feature, .pov-closing { background:white !important; }
}