/* ==========================================================================
   khushin.com — sub-pages (/garden/, /kapers/, /log/, /notes/)

   The homepage is the story; these are the depth behind it. Same system,
   slightly denser: more evidence per screen, less air.
   ========================================================================== */

.rail__sub { color: var(--ink-3); letter-spacing: 0.09em; }

.ruled > .rail { position: relative; padding-top: 0.55rem; }
.ruled > .rail::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 1.75rem; height: 1px;
  background: var(--hairline-2);
}
@media (max-width: 800px) {
  .ruled > .rail { padding-top: 0; padding-bottom: 0.25rem; }
  .ruled > .rail::before { display: none; }
}

/* ---------- page head ---------- */

.phead { padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.phead .display--1 { max-width: 17ch; }
.phead__lede { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); max-width: 36rem; }

/* Status stated at the top of every product page. The site's whole claim is
   that it does not overstate, so the state of the thing comes before the
   description of it. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding: 0.45rem 0.85rem 0.45rem 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  font-size: 0.85rem;
  color: var(--ink-2);
  background: var(--paper-raise);
}
.status .dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--ember);
}
.status[data-state='soon'] .dot { background: transparent; border: 1px solid var(--hairline-2); }

/* ---------- facts ---------- */

/* A ruled definition list. Two columns of unequal weight, never cards. */
.facts { border-top: 1px solid var(--hairline); margin-top: clamp(2rem, 4vw, 3rem); }
.facts__row {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 0.35rem clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1rem, 2vw, 1.35rem);
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; color: var(--ink-2); max-width: 52ch; }
.facts dd strong { color: var(--ink); font-weight: 500; }
@media (max-width: 640px) {
  .facts__row { grid-template-columns: 1fr; }
}

/* ---------- gallery ---------- */

/* Never an even grid of three. Screens are laid out at two weights: one lead
   image that carries the page, then supporting frames at half its size. */
.gallery { margin-top: clamp(2.5rem, 5vw, 4rem); }

.gallery__lead { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.gallery__lead img { width: 100%; }

.gallery__rest {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
}
.gallery__rest .device { max-width: 260px; }

/* Two supporting frames, never three. */
.gallery__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 700px) {
  .gallery__pair { grid-template-columns: 1fr; }
}

/* The phone hangs off the left edge of the measure rather than sitting in a
   row with the desktop frames — different object, different weight. */
.gallery__aside { max-width: 230px; }

.shot--phone .device { width: 100%; }

.device {
  box-shadow: var(--lift-device);
}

/* ---------- steps ---------- */

/* Kapers' four-stage flow. A numbered sequence with a rule running through
   it — reads as a process, not a feature grid. */
.steps { counter-reset: step; margin-top: clamp(2rem, 4vw, 3rem); }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0 clamp(1rem, 2.5vw, 1.75rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  position: relative;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--ember);
  padding-top: 0.35em;
}
/* the rule that threads the sequence, stopping at the last step */
.step::after {
  content: '';
  position: absolute;
  left: 0.85rem;
  top: 2em;
  bottom: 0;
  width: 1px;
  background: var(--hairline);
}
.step:last-child::after { display: none; }
.step h3 {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 0.4rem;
}
.step p { color: var(--ink-2); max-width: 46ch; }

/* ---------- the log page ---------- */

.logpage .tally {
  margin: clamp(2rem, 4vw, 3rem) 0;
  display: grid;
  grid-template-columns: 1.15fr 1.15fr 1fr 0.9fr;
  gap: 1px;
  background: var(--hairline);
  border-block: 1px solid var(--hairline);
}
.logpage .tally__cell { background: var(--paper); padding: clamp(1rem, 2.2vw, 1.5rem) clamp(0.75rem, 1.8vw, 1.35rem); }
.logpage .tally__cell:first-child { padding-left: 0; }
.logpage .tally dt { margin-bottom: 0.5rem; }
.logpage .tally__n {
  margin: 0;
  font-family: var(--serif);
  font-feature-settings: 'tnum' 1;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.1rem);
  line-height: 1;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 0.32em;
}
.logpage .tally__of {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0;
  color: var(--ink-3);
  font-feature-settings: normal;
}
@media (max-width: 720px) {
  .logpage .tally { grid-template-columns: 1fr 1fr; }
  .logpage .tally__cell:nth-child(3) { padding-left: 0; }
}
@media (max-width: 380px) {
  .logpage .tally { grid-template-columns: 1fr; }
  .logpage .tally__cell { padding-left: 0; }
}

/* per-repo breakdown: proportional bars, one row each */
.repos { border-top: 1px solid var(--hairline); margin-top: clamp(2rem, 4vw, 3rem); }
.repo {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 4.5rem;
  gap: 0.4rem clamp(1rem, 3vw, 2rem);
  align-items: center;
  padding-block: clamp(0.9rem, 1.8vw, 1.2rem);
  border-bottom: 1px solid var(--hairline);
}
.repo__name { font-weight: 500; }
.repo__bar { height: 6px; background: var(--paper-deep); border-radius: 3px; overflow: hidden; }
.repo__bar span {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: var(--ember);
  opacity: 0.75;
  transform-origin: left center;
}
.repo__n { text-align: right; color: var(--ink-2); font-size: 0.85rem; }
.repo__since { color: var(--ink-3); font-size: 0.72rem; }
@media (max-width: 600px) {
  .repo { grid-template-columns: 1fr 4.5rem; }
  .repo__bar { grid-column: 1 / -1; }
}

/* the full mark list reuses .entry from home.css, redeclared here so the
   log page does not have to load the homepage stylesheet */
.entries { border-top: 1px solid var(--hairline); margin-top: clamp(2rem, 4vw, 3rem); }
.entry {
  display: grid;
  grid-template-columns: 6.5rem 1fr auto;
  gap: 0 clamp(1rem, 3vw, 2.25rem);
  align-items: baseline;
  padding-block: clamp(0.9rem, 1.8vw, 1.15rem);
  border-bottom: 1px solid var(--hairline);
  position: relative;
}
.entry__date { color: var(--ink-3); }
.entry__title {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: -0.014em;
}
.entry__meta {
  display: flex; align-items: baseline; gap: 0.85rem;
  color: var(--ink-3); font-size: 0.72rem; white-space: nowrap;
}
.entry__n { color: var(--ink-2); }
.entry::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px; width: var(--w, 0%);
  background: var(--ember);
  opacity: 0.55;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms var(--ease-structural);
}
.entry.is-in::after { transform: scaleX(1); }
html.no-js .entry::after { transform: scaleX(1); }
@media (max-width: 640px) {
  .entry { grid-template-columns: 1fr auto; gap: 0.15rem 1rem; }
  .entry__date { grid-column: 1; font-size: 0.68rem; }
  .entry__meta { grid-column: 2; grid-row: 1; }
  .entry__title { grid-column: 1 / -1; grid-row: 2; }
}

/* the plot, shared with the homepage */
.gp { --live: var(--ember); width: 100%; height: auto; overflow: visible; }
.gp-grid { stroke: var(--hairline); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gp-gridlabel, .gp-ticklabel {
  font-family: var(--mono); font-size: 11px; fill: var(--ink-3); letter-spacing: 0.08em;
}
.gp-tick { stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.gp-bar { fill: var(--ink-3); opacity: 0.42; }
.gp-area { fill: url(#gpFill); }
.gp-curve {
  fill: none; stroke: var(--live); stroke-width: 2.25;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.gp-mark__halo { fill: var(--live); opacity: 0.14; }
.gp-mark__dot { fill: var(--live); stroke: var(--paper); stroke-width: 1.5; }
.gp-label line { stroke: var(--hairline-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gp-label text {
  font-family: var(--sans); font-size: 12.5px; fill: var(--ink-2);
  font-weight: 500; letter-spacing: -0.005em;
}
.gp-cursor { display: none; }

/* ---------- notes ---------- */

.note-list { border-top: 1px solid var(--hairline); margin-top: clamp(2rem, 4vw, 3rem); }
.note-row {
  display: block;
  padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
}
.note-row .phase { display: block; margin-bottom: 0.5rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.note-row h2 {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.8rem);
  letter-spacing: -0.017em;
  line-height: 1.15;
  margin-bottom: 0.4rem;
  transition: color var(--t-inplace) var(--ease-inplace);
}
.note-row p { color: var(--ink-2); max-width: 52ch; }
.note-row:hover h2 { color: var(--ember); }

.notes-empty { color: var(--ink-3); padding-block: 2rem; }

.note__h { margin-bottom: clamp(1.5rem, 3vw, 2rem); max-width: 20ch; }
.note__body { max-width: 36rem; color: var(--ink-2); }
.note__body h2 {
  font-family: var(--serif); font-size: 1.5rem; letter-spacing: -0.016em;
  color: var(--ink); margin: 2rem 0 0.75rem;
}
.note__body blockquote {
  margin: 1.5rem 0; padding-left: 1.25rem;
  border-left: 2px solid var(--hairline-2); color: var(--ink);
}
.note__back { margin-top: clamp(2rem, 4vw, 3rem); }

/* ---------- legal / support pages ----------
   /kapers/privacy/ and /kapers/support/ are App Store requirements: Apple needs
   both URLs to resolve, so they outlive any redesign. Their copy is left exactly
   as written and only the shell was moved onto this system, which is why they
   still use the older .shell / .page-head / .kicker class names. */

.shell {
  width: 100%;
  max-width: 52rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.page-head { padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.page-head h1 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 1.4rem + 2.8vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -0.021em;
  margin-bottom: 0.75rem;
}
.page-head p { color: var(--ink-3); font-size: 0.9rem; }
.kicker {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.25rem;
}
.section { padding-bottom: clamp(3rem, 6vw, 5rem); }
.section .prose { color: var(--ink-2); }
.section .prose h2 {
  font-family: var(--serif);
  font-size: 1.45rem;
  letter-spacing: -0.016em;
  color: var(--ink);
  margin: 2.25rem 0 0.65rem;
}
.section .prose p + p { margin-top: 1.1em; }
.section .prose ul { margin: 0.85rem 0; }
.section .prose li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: 0.45rem;
}
.section .prose li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 1px;
  background: var(--hairline-2);
}
.section .prose a { color: var(--ink); box-shadow: inset 0 -1px 0 var(--hairline-2); text-decoration: none; }
.section .prose a:hover { box-shadow: inset 0 -2px 0 var(--ink); }

/* ---------- shared tail ---------- */

.next-up { border-top: 1px solid var(--hairline); padding-block: clamp(2.5rem, 5vw, 4rem); }
.next-up__row { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: baseline; }

/* ---------- the fine print ----------
   One page carrying the technical detail, the privacy terms and the legal
   position for every product. It uses the same .facts rows the product pages
   use, because it is the same kind of statement — just the long version. */

/* Rows here are read, not scanned: the answer gets prose width and the term
   stays a mono label, so a five-line answer never looks like a table cell. */
.facts--plain dd { color: var(--ink-2); }
.facts--plain dd strong { color: var(--ink); font-weight: 500; }

.facts__more { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

.fineprint__toc { display: grid; gap: 0.15rem; }
.fineprint__toc .link { box-shadow: none; color: var(--ink-2); }
.fineprint__toc .link::before {
  content: '';
  width: 1.1rem;
  height: 1px;
  background: var(--hairline-2);
  transition: width var(--t-inplace) var(--ease-inplace),
              background var(--t-inplace) var(--ease-inplace);
}
.fineprint__toc .link:hover { color: var(--ink); }
.fineprint__toc .link:hover::before { width: 1.9rem; background: var(--ink); }

/* Numbered in the serif, so the four rules read as clauses rather than as a
   feature list with checkmarks. */
.fineprint__rules { counter-reset: rule; margin-top: 1.5rem; }
.fineprint__rules li {
  counter-increment: rule;
  position: relative;
  padding-left: 2.2rem;
  padding-block: 0.7rem;
  border-top: 1px solid var(--hairline);
  color: var(--ink-2);
}
.fineprint__rules li:last-child { border-bottom: 1px solid var(--hairline); }
.fineprint__rules li::before {
  content: counter(rule);
  position: absolute;
  left: 0;
  top: 0.55rem;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink-3);
}

.facts code {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 0.1em 0.35em;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--paper-2);
  color: var(--ink);
}