/* ============================================================================
   peak (#noche): the terrace from the opening passes the night under the
   reader's hand. This chapter is its own night: it does not follow the page
   theme. It pins its own inks here (night values) and swaps them for the day
   values once the dawn plate takes over (.is-dawn), so the clock, the log and
   its chips flip together instead of fading through grey. It pins its type
   too (the heading weights), so when the whole page
   dawns with it (peak.js hands the dawn to theme.js) nothing inside the act
   re-tints or jumps: the chapter only ever changes at its own flip.
   ========================================================================== */

/* the log bed's soft edge: wide at night (the city reads through it), a
   paper edge at dawn; registered so the flip eases instead of jumping */
@property --pk-feather { syntax: "<length>"; inherits: true; initial-value: 20px; }

.peak {
  /* its own night, whatever the page theme is */
  --sc-ink: #DDEBE6;
  --sc-ink-soft: #A9BFB9;
  --sc-accent: #3DE0C8;        /* brand teal at night; the person stays in sodium */
  --sc-accent-ink: #061012;
  --accent-deep: #7FEBDB;
  --human: #FFB23E; --human-deep: #FFC766; --human-ink: #061012;
  --signal: #3DE0C8;
  --sc-surface: #08191C;
  --rule: rgb(221 235 230 / 0.16);
  --rule-strong: rgb(221 235 230 / 0.34);
  --pk-bed: rgb(2 13 15 / 0.62);
  --pk-dusk: #26232E;
  --pk-case: rgb(2 12 14 / 0.45);
  --pk-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --pk-flip: 560ms;
  --pk-feather: 1.25rem;
  /* crisp at night, whatever the page theme is */
  color: var(--sc-ink);
  background: var(--pk-dusk);
}
/* the day tokens, exactly, and the day's soft axes */
.peak.is-dawn {
  --sc-ink: #12261A;
  --sc-ink-soft: #4A5C4E;
  --sc-accent: #F0B23A;
  --accent-deep: #8A5800;
  --human: #F0B23A; --human-deep: #8A5800; --human-ink: #12261A;
  --signal: #2A7243;
  --sc-surface: #F6F7EE;
  --rule: rgb(18 38 26 / 0.16);
  --rule-strong: rgb(18 38 26 / 0.34);
  --pk-bed: rgb(246 247 238 / 0.96);          /* the day surface, near opaque: the small green and gold inks clear 4.5:1 on it */
  --pk-feather: 0.3rem;
  --pk-case: rgb(240 242 230 / 0.6);
}

.peak__stage { background: var(--pk-dusk); isolation: isolate; }
/* Exit: the morning holds, then the plate gives way to the next chapter's
   paper on a soft edge (as the hero does), so the terrace does not end on a
   cut. The day's --ground-2, quien's paper: the dawn is always day here. */
.peak__stage::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18vh; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, rgb(228 233 214 / 0) 0%, rgb(228 233 214 / 0.55) 50%, #E4E9D6 100%);
  opacity: var(--pk-exit, 0);
}

/* --------------------------------------------------------------- plates -- */
.peak__world {
  position: absolute; inset: 0; z-index: 0;
  transform-origin: var(--pk-ox, 80%) var(--pk-oy, 64%);
  will-change: transform;
}
.peak__plate {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: var(--pk-px, 62%) var(--pk-py, 60%);
  opacity: 0;
}
.peak__plate[data-plate="dusk"] { opacity: 1; }
.peak__gl, .peak__air { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.peak__gl { z-index: 1; opacity: 0; transition: opacity 600ms var(--pk-ease); }
.peak.gl-ready .peak__gl { opacity: 1; }
.peak__air { z-index: 2; }

/* --------------------------------------------------------------- scrims -- */
.peak__scrim { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.peak__scrim--night {
  background:
    /* under the clock */
    radial-gradient(38rem 15rem at calc(var(--content-l) + 11rem) calc(var(--chrome-h) + 3.6rem), rgb(4 9 12 / 0.55) 0%, rgb(4 9 12 / 0.28) 45%, transparent 72%),
    /* under the headings */
    radial-gradient(46rem 22rem at calc(var(--content-l) + 14rem) 34%, rgb(6 8 12 / 0.5) 0%, rgb(6 8 12 / 0.24) 48%, transparent 74%),
    /* density under the log only, centred on the panel, so the lit valley
       above it stays whole */
    radial-gradient(40rem 20rem at calc(var(--content-l) + 15rem) 86%, rgb(2 10 12 / 0.5) 0%, rgb(2 10 12 / 0.3) 45%, transparent 72%);
}
.peak__scrim--dawn {
  opacity: 0;
  /* low morning mist in the corner where the rail's foot sits on the dark
     foliage: the rail takes the dawn's light tone, and this is its ground */
  --pk-railmist: radial-gradient(19rem 8.5rem at 5rem 100%, rgb(246 244 232 / 0.8) 0%, rgb(246 244 232 / 0.46) 48%, transparent 78%);
  background:
    var(--pk-railmist),
    radial-gradient(40rem 17rem at calc(var(--content-l) + 11rem) calc(var(--chrome-h) + 3.6rem), rgb(246 244 232 / 0.5) 0%, rgb(246 244 232 / 0.22) 50%, transparent 74%),
    radial-gradient(52rem 24rem at calc(var(--content-l) + 15rem) 47%, rgb(246 244 232 / 0.72) 0%, rgb(246 244 232 / 0.38) 55%, transparent 80%);
}

/* the stage slides in under the silence: its first rows melt into the same
   dusk colour so the engraving's texture does not start on a hard edge */
.peak__seam {
  position: absolute; left: 0; right: 0; top: 0; height: 16vh; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, var(--pk-dusk) 0%, rgb(38 35 46 / 0.72) 30%, rgb(38 35 46 / 0.3) 62%, transparent 100%);
}

/* the leader: laptop to log, only while a task runs */
.peak__lead { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; opacity: 0; }
.peak__leadcase { fill: none; stroke: var(--pk-case); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.peak__leadpath { fill: none; stroke: var(--signal); stroke-width: 1.25; stroke-dasharray: 3 4; stroke-linecap: round; stroke-linejoin: round; }
.peak__leaddot { fill: var(--signal); }
.peak__leadring { fill: none; stroke: var(--signal); stroke-width: 1; opacity: 0.45; }

/* ---------------------------------------------------------------- clock -- */
.peak__clock {
  position: absolute; z-index: 5;
  left: var(--content-l);
  top: calc(var(--chrome-h) + 0.5rem);
  width: clamp(17rem, 24vw, 22rem);
  color: var(--sc-ink);
  transition: color var(--pk-flip) var(--pk-ease);
}
.peak__dial { display: block; width: 100%; height: auto; overflow: visible; }
.peak__hh {
  font-family: var(--sc-font-display);
  font-optical-sizing: auto;
  font-size: 92px; font-weight: 400; letter-spacing: -1.5px;
  font-variant-numeric: lining-nums;
  text-anchor: middle;               /* each figure sits centred in a fixed slot: a true tabular clock */
  fill: currentColor;
}
.peak__colon { font-weight: 340; }
.peak__hz { stroke: var(--rule-strong); stroke-width: 1; fill: none; transition: stroke var(--pk-flip) var(--pk-ease); }
.peak__refl { stroke: var(--rule); stroke-width: 1.5; stroke-linecap: round; fill: none; transition: stroke var(--pk-flip) var(--pk-ease); }
.peak__track { stroke: var(--rule-strong); stroke-width: 1; fill: none; stroke-dasharray: 1.5 4.5; transition: stroke var(--pk-flip) var(--pk-ease); }
.peak__trail {
  stroke: var(--sc-accent); stroke-width: 1.6; fill: none; stroke-linecap: round;
  stroke-dasharray: 1 1; stroke-dashoffset: var(--pk-trail, 1);
  transition: stroke var(--pk-flip) var(--pk-ease);
}
.peak__ticks { stroke: var(--sc-ink-soft); stroke-width: 1; fill: none; transition: stroke var(--pk-flip) var(--pk-ease); }
.peak__hl {
  font-family: var(--sc-font-mono); font-size: 11px; letter-spacing: 0.8px;
  fill: var(--sc-ink-soft); text-anchor: middle;
  transition: fill var(--pk-flip) var(--pk-ease);
}
.peak__body { fill: var(--sc-accent); transition: fill var(--pk-flip) var(--pk-ease); }
.peak__halo { fill: none; stroke: var(--sc-accent); stroke-width: 1; opacity: 0; transition: opacity var(--pk-flip) var(--pk-ease), stroke var(--pk-flip) var(--pk-ease); }
/* the crescent's shadow slides off at dawn and the moon becomes the sun, as in the mark */
.peak__bite { transform: translateX(0); transition: transform 900ms var(--ease-io); }
.peak.is-dawn .peak__bite { transform: translateX(13px); }
.peak.is-dawn .peak__halo { opacity: 0.45; stroke: var(--accent-deep); }
.peak.is-dawn .peak__trail { stroke: var(--accent-deep); }
.peak.is-dawn .peak__body { stroke: var(--accent-deep); stroke-width: 1; }

/* ------------------------------------------------------------- headings -- */
.peak__open, .peak__dawn {
  position: absolute; z-index: 5;
  left: var(--content-l);
  width: min(44rem, 52vw);
}
.peak__open { top: calc(var(--chrome-h) + clamp(9.25rem, 22vh, 12.5rem)); }
.peak__dawn { top: calc(var(--chrome-h) + clamp(7.2rem, 15vh, 9.5rem)); }
.peak__h {
  font-size: var(--t-h2);
  max-width: 13ch;
  color: #EEF3EF;
}
/* the heading weights of its own world, not of the page's: the core's night
   rule is (0,3,0), so these match it and win by order */
.peak .peak__h { font-weight: 420; letter-spacing: -0.016em; }
.peak.is-dawn .peak__h { font-weight: 440; letter-spacing: -0.022em; }
.peak__h--dawn { color: #12261A; }
.peak__dawn { color: #12261A; }
.peak__mine {
  margin-top: 1rem;
  font-size: clamp(1.02rem, 0.94rem + 0.3vw, 1.16rem); line-height: 1.5;
  color: #1E3325; max-width: 37rem;
}
.peak__n { font-weight: 600; color: #12261A; white-space: nowrap; }
.peak__n span { font-variant-numeric: tabular-nums; }
.peak__n span[data-sc-count] { display: inline-block; min-width: 2ch; text-align: right; }
.peak__yours {
  margin-top: 0.7rem;
  font-family: var(--sc-font-display);
  font-style: italic; font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + 0.55vw, 1.6rem); line-height: 1.2;
  color: var(--accent-deep);
}

/* -------------------------------------------------------------- the log -- */
.peak__logwrap {
  position: absolute; z-index: 5;
  left: calc(var(--content-l) - 1.1rem);
  bottom: clamp(1rem, 3vh, 2rem);
  width: min(35rem, 44vw);
  opacity: 0;
}
/* the bed: a feathered patch of darkness (of paper, at dawn) that only holds
   the text, so the lit city reads through its edges */
.peak__logbed {
  position: absolute; inset: calc(-1 * var(--pk-feather));
  background-color: var(--pk-bed);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 var(--pk-feather), #000 calc(100% - var(--pk-feather)), transparent 100%),
    linear-gradient(180deg, transparent 0, #000 var(--pk-feather), #000 calc(100% - var(--pk-feather)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 var(--pk-feather), #000 calc(100% - var(--pk-feather)), transparent 100%),
    linear-gradient(180deg, transparent 0, #000 var(--pk-feather), #000 calc(100% - var(--pk-feather)), transparent 100%);
  mask-composite: intersect;
  transition: background-color var(--pk-flip) var(--pk-ease), --pk-feather var(--pk-flip) var(--pk-ease);
}
.peak__log {
  position: relative;
  padding: 0.9rem 1.1rem 0.85rem;
  color: var(--sc-ink);
  font-family: var(--sc-font-mono);
  transition: color var(--pk-flip) var(--pk-ease);
}
.peak__log.bracket::before, .peak__log.bracket::after { --c: var(--rule-strong); }
.peak__loghead {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 0.62rem; margin-bottom: 0.2rem;
  border-bottom: 1px solid var(--rule);
  transition: border-color var(--pk-flip) var(--pk-ease);
}
/* (0,3,0): the core's night rule for h3 would otherwise set its weight and
   tracking at night and let them jump at the dawn */
.peak .peak__log .peak__logtitle {
  font: 500 0.72rem/1 var(--sc-font-mono);
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--sc-ink-soft);
  font-variation-settings: normal;
  transition: color var(--pk-flip) var(--pk-ease);
}
.peak__live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--signal) 22%, transparent);
  animation: peak-live 2.4s var(--pk-ease) infinite;
  transition: background-color var(--pk-flip) var(--pk-ease);
}
@keyframes peak-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.peak__lines { list-style: none; margin: 0; padding: 0; }
.peak__line {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr) 4.4rem;
  gap: 0 0.75rem;
  align-items: start;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  transition: border-color var(--pk-flip) var(--pk-ease);
}
.peak__line:last-child { border-bottom: 0; }
.peak__at {
  font: 500 0.78rem/1.55 var(--sc-font-mono);
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklab, var(--sc-ink-soft) 70%, transparent);
  transition: color 300ms var(--pk-ease);
}

/* The text column. Only the task that started last shows its sentence; the
   others fold to one line that holds a rule: dotted while it is scheduled,
   solid once it is done. So the panel reads as a schedule, never as
   redacted text, and stays low under the city. */
.peak__task {
  position: relative;
  display: grid; grid-template-rows: 1fr;
  min-height: 1.24rem;                         /* one line, folded or not */
  transition: grid-template-rows 460ms var(--pk-ease);
}
.peak__what {
  min-height: 0; overflow: hidden;
  font: 400 0.8rem/1.55 var(--sc-font-mono);
  letter-spacing: -0.01em;
  color: var(--sc-ink);
  transition: opacity 380ms var(--pk-ease), color var(--pk-flip) var(--pk-ease);
}
.peak__task::before {
  content: ""; position: absolute; left: 0; top: 0.62rem;
  width: var(--len, 38%);
  border-top: 1px dotted color-mix(in oklab, var(--sc-ink-soft) 80%, transparent);
  opacity: 0;
  transition: opacity 300ms var(--pk-ease), border-color 300ms var(--pk-ease);
}
.js .peak__line:not([data-open]) .peak__task { grid-template-rows: 0fr; }
.js .peak__line:not([data-open]) .peak__what { opacity: 0; }
.js .peak__line:not([data-open]) .peak__task::before { opacity: 1; }
.js .peak__line[data-state="done"]:not([data-open]) .peak__task::before {
  border-top-style: solid;
  border-top-color: color-mix(in oklab, var(--signal) 60%, transparent);
}

.peak__st { position: relative; display: grid; justify-items: end; align-items: center; min-height: 1.24rem; }
.peak__st > * { grid-area: 1 / 1; }
/* scheduled: a hollow ring, the same place the "listo" chip will take */
.peak__st::before {
  content: ""; grid-area: 1 / 1;
  width: 7px; height: 7px; margin-right: 0.35rem; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--sc-ink-soft) 85%, transparent);
  opacity: 0;
  transition: opacity 240ms var(--pk-ease), border-color var(--pk-flip) var(--pk-ease);
}
.js .peak__line[data-state="wait"] .peak__st::before { opacity: 1; }
.peak__bar {
  width: 100%; height: 3px; border-radius: 2px; overflow: hidden;
  background: var(--rule);
  opacity: 0;
  transition: opacity 240ms var(--pk-ease);
}
.peak__bar i {
  display: block; height: 100%; width: 100%;
  background: var(--signal);
  transform-origin: 0 50%; transform: scaleX(var(--k, 0));
}
.peak__ok {
  opacity: 0; transform: scale(0.94);
  transition: opacity 260ms var(--pk-ease), transform 260ms var(--pk-ease), color var(--pk-flip) var(--pk-ease), border-color var(--pk-flip) var(--pk-ease), background-color var(--pk-flip) var(--pk-ease);
  background: color-mix(in oklab, var(--sc-surface) 70%, transparent);   /* the shared chip; the border and ink carry the state */
  line-height: 1; padding: 0.32em 0.55em;       /* one text line tall: rows stay low */
}

/* states: wait (scheduled) / run (its hour) / done (listo) */
.js .peak__line[data-state="run"] .peak__at,
.js .peak__line[data-open][data-state="done"] .peak__at { color: var(--accent-deep); }
.js .peak__line[data-state="done"]:not([data-open]) .peak__at { color: var(--sc-ink-soft); }
.js .peak__line[data-state="run"] .peak__bar { opacity: 1; }
.js .peak__line[data-state="done"] .peak__ok { opacity: 1; transform: none; }
html:not(.js) .peak__ok { opacity: 1; transform: none; }
html:not(.js) .peak__logwrap { opacity: 1; }
/* without scripts the chapter shows its resolved morning */
html:not(.js) .peak__plate[data-plate="dawn"] { opacity: 1; }
html:not(.js) :is(.peak__clock, .peak__open, .peak__seam, .peak__scrim--night) { display: none; }
html:not(.js) .peak__scrim--dawn { opacity: 1; }
html:not(.js) .peak__stage::after { opacity: 1; }

.peak__fine {
  margin-top: 0.35rem; padding-top: 0.55rem;
  border-top: 1px solid var(--rule);
  font: 400 0.68rem/1.45 var(--sc-font-mono);
  letter-spacing: 0.01em;
  color: var(--sc-ink-soft);
  transition: color var(--pk-flip) var(--pk-ease), border-color var(--pk-flip) var(--pk-ease);
}

/* ------------------------------------------------------ reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .peak__world { transform: none !important; }
  .peak__ok { transform: none; }
  .peak__live { animation: none; }
  .peak__bite { transition-duration: 1ms; }
  .peak__task { transition-duration: 1ms; }
}

/* --------------------------------------------------------------- narrow -- */
@media (max-width: 1100px) {
  .peak__scrim--dawn { --pk-railmist: linear-gradient(transparent, transparent); }   /* no rail here */
  .peak__logwrap { width: min(36rem, calc(100% - var(--content-l) - var(--content-r) + 1.1rem)); }
  .peak__open, .peak__dawn { width: auto; right: var(--content-r); }
}
@media (max-width: 700px) {
  .peak { --pk-px: 80%; }
  .peak__clock { width: 13.5rem; top: calc(var(--chrome-h) + 0.4rem); }
  .peak__open, .peak__dawn { top: calc(var(--chrome-h) + 6.2rem); }
  .peak__h { font-size: clamp(2rem, 1.4rem + 3vw, 2.5rem); }
  .peak__mine { font-size: 0.95rem; margin-top: 0.8rem; }
  .peak__yours { font-size: 1.15rem; margin-top: 0.6rem; }
  .peak__logwrap { left: 0.6rem; right: 0.6rem; width: auto; bottom: 0.6rem; }
  .peak__log { padding: 0.75rem 0.8rem 0.7rem; }
  .peak__line { grid-template-columns: 2.9rem minmax(0, 1fr) 3.6rem; gap: 0 0.55rem; padding: 0.42rem 0; }
  .peak__what, .peak__at { font-size: 0.7rem; line-height: 1.42; }
  .peak__task { min-height: 0.994rem; }
  .peak__task::before { top: 0.5rem; }
  .peak__fine { font-size: 0.62rem; }
}