/* Nijimi, the site. The same paper and ink as the app.
   No webfonts, no trackers, no third-party anything: the app contains no
   networking code, and a site with analytics on it would contradict that. */

:root {
  --paper:   #FDFCF9;
  --panel:   #F4F1EA;
  --ink:     #1A1613;
  --second:  #5E574E;
  --faint:   #9A9289;
  --rule:    rgba(26, 22, 19, 0.14);
  --signal:  #C8102E;
  --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:  #16130F;
    --panel:  #1E1A15;
    --ink:    #EFE9DD;
    --second: #A79F93;
    --faint:  #6E675C;
    --rule:   rgba(239, 233, 221, 0.16);
    --signal: #E8556B;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* ---- type ---- */

h1, h2, h3 { font-weight: 500; letter-spacing: -0.02em; line-height: 1.12; margin: 0; }
h1 { font-size: clamp(1.95rem, 7.4vw, 4.8rem); }
h2 { font-size: clamp(1.45rem, 4.4vw, 2.4rem); margin-bottom: 1.2rem; }
h3 { font-size: 1.05rem; letter-spacing: 0; margin-bottom: 0.35rem; }
p  { margin: 0 0 1.15rem; }
a  { color: inherit; }

.kicker {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1.6rem;
}

.lede  { font-size: clamp(1.15rem, 2.4vw, 1.45rem); line-height: 1.45; }
.muted { color: var(--second); }
.small { font-size: 0.92rem; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 4.5rem 0; }

/* ---- masthead ---- */

/* The same bar as Furlong's site: wordmark left, tabs right, and a rule under
   the tabs that follows the page or section you are in (motion.js). */
.masthead {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem 1rem;
  padding: 1.5rem 0 1.2rem;
}
.wordmark {
  font-size: 0.8rem; letter-spacing: 0.34em; font-weight: 500; text-decoration: none;
}
.masthead nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; }
.masthead nav a {
  font-size: 0.86rem; color: var(--second); text-decoration: none;
}
.masthead nav a:hover { color: var(--ink); }

/* ---- hero ---- */

.hero { padding: 4rem 0 4rem; }
.cta {
  display: inline-block; padding: 0.85rem 1.5rem; background: var(--ink); color: var(--paper);
  text-decoration: none; font-size: 1rem;
}
.cta.pending { background: transparent; color: var(--faint); border: 1px dashed var(--rule); }
.store-soon { font-size: 1.15rem; font-weight: 500; color: var(--ink); }
.store-note { margin-top: 1rem; }

/* ---- the three tangible claims ---- */

.claim { padding: 1rem 0 0; }
.claim + .claim { margin-top: 4rem; }
.claim .kicker { margin-bottom: 0.9rem; }

/* Where a recording goes. Sized to a phone so the page does not jump when the
   real thing replaces it. */
.motion {
  position: relative; width: 100%; max-width: 22rem; aspect-ratio: 393 / 660;
  background: var(--panel); border: 1px solid var(--rule); margin: 1.8rem 0 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.motion video, .motion img { width: 100%; height: 100%; object-fit: cover; display: block; }
.motion .waiting {
  font-size: 0.82rem; color: var(--faint); text-align: center; padding: 1.5rem; line-height: 1.5;
}
figure { margin: 0; }
figcaption { font-size: 0.88rem; color: var(--faint); margin-top: 0.7rem; max-width: 26rem; }

.pair { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
/* A claim that has no recording yet keeps its place in the grid with nothing in
   it, rather than showing an empty box. On a phone it takes no space. */
.nomedia { display: none; }
@media (min-width: 52rem) { .nomedia { display: block; } }
@media (min-width: 52rem) { .pair { grid-template-columns: 22rem 1fr; gap: 3rem; } }

/* ---- the research index ---- */

.papers { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 1.5rem; }
.paper {
  display: block; text-decoration: none; padding: 1.1rem 0;
  border-top: 1px solid var(--rule);
}
.paper:last-child { border-bottom: 1px solid var(--rule); }
.paper b { font-weight: 500; }
.paper span { display: block; font-size: 0.92rem; color: var(--second); margin-top: 0.2rem; }
.paper:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* ---- research cards: the page itself, not a description of it ---- */

.cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 2.2rem 1.6rem; margin-top: 1.8rem;
}
.card { display: flex; flex-direction: column; text-decoration: none; }
.card img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top left;
  border: 1px solid var(--rule); display: block; background: var(--panel);
  transition: transform 0.2s ease;
}
.card:hover img { transform: translateY(-3px); }
.card b { font-weight: 500; margin-top: 0.9rem; }
.card span { font-size: 0.9rem; color: var(--second); margin-top: 0.25rem; line-height: 1.5; }
.card:hover b { text-decoration: underline; text-underline-offset: 3px; }

.feature { display: grid; grid-template-columns: 1fr; gap: 1.6rem; text-decoration: none; margin-top: 1.8rem; }
@media (min-width: 52rem) { .feature { grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: center; } }
.feature img { width: 100%; border: 1px solid var(--rule); display: block; }
.feature:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* ---- the icon, as it changed ---- */

.icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 1.6rem 1.2rem; margin-top: 1.8rem; }
.icons figure img { width: 100%; aspect-ratio: 1; border-radius: 22%; border: 1px solid var(--rule); display: block; }
.icons figcaption { font-size: 0.8rem; margin-top: 0.55rem; line-height: 1.4; }
.icons time { display: block; color: var(--faint); font-variant-numeric: tabular-nums; }

/* ---- the engine, in order ---- */

.step { display: grid; grid-template-columns: 1fr; gap: 0.4rem 2.5rem; padding: 2.6rem 0; border-top: 1px solid var(--rule); }
@media (min-width: 52rem) { .step { grid-template-columns: 9rem 1fr; } }
.step time, .step .stage { font-size: 0.8rem; color: var(--faint); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; padding-top: 0.3rem; }
.step h3 { font-size: 1.35rem; letter-spacing: -0.01em; margin-bottom: 0.9rem; }
.step figure { margin: 1.8rem 0 0.4rem; }
.step figure img { width: 100%; max-width: 40rem; border: 1px solid var(--rule); display: block; }
.verdict { font-size: 0.9rem; color: var(--second); border-left: 2px solid var(--rule); padding-left: 0.9rem; margin-top: 1.2rem; max-width: var(--measure); }
.verdict.lost { border-left-color: var(--signal); }

.demands { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.4rem 2rem; }
.demands li { border-top: 1px solid var(--rule); padding-top: 0.8rem; }
.demands b { display: block; font-weight: 500; margin-bottom: 0.25rem; }
.demands span { font-size: 0.9rem; color: var(--second); }

.bars { width: 100%; max-width: 40rem; margin-top: 1.8rem; display: block; }
.bars text { fill: var(--ink); font-size: 13px; font-family: inherit; }
.bars .label { fill: var(--second); }
.bars .bar { fill: var(--faint); }
.bars .bar.now { fill: var(--signal); }
.bars .axis { stroke: var(--rule); }

/* ---- real sheets from the phone ---- */

.marks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; margin-top: 2.6rem; max-width: 46rem; }
@media (min-width: 40rem) { .marks { grid-template-columns: repeat(4, 1fr); } }
.marks img { width: 100%; aspect-ratio: 1; display: block; border: 1px solid var(--rule); }
.marks-note { font-size: 0.85rem; color: var(--faint); margin-top: 0.8rem; max-width: 40rem; }

.then-now { display: grid; grid-template-columns: repeat(2, minmax(0, 15rem)); gap: 1.2rem; margin-top: 2.4rem; }
.then-now img { width: 100%; aspect-ratio: 393 / 660; display: block; border: 1px solid var(--rule); }

/* The title keeps to the top, where every page's title sits; the sheet beside
   it hangs down from the same line. */
.pagehead { display: grid; grid-template-columns: 1fr; gap: 1.8rem; align-items: start; }
@media (min-width: 40rem) { .pagehead { grid-template-columns: 1fr 9rem; } }
.pagehead img { width: 9rem; aspect-ratio: 393 / 660; display: block; border: 1px solid var(--rule); }

.strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; margin-top: 2.4rem; }
@media (min-width: 40rem) { .strip { grid-template-columns: repeat(4, 1fr); } }
.strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border: 1px solid var(--rule); }

/* ---- the palette chapter: cards drawn from the app's own paints ---- */

.palcards { display: grid; gap: 1.5rem; margin: 2.2rem 0 0.4rem; max-width: 34rem; }
.palcard { margin: 0; }
.palcard .swatches { display: flex; align-items: stretch; height: 3.4rem; }
.palcard .swatches span { flex: 1 1 0; }
.palcard .swatches span:first-child { border-radius: 0.55rem 0 0 0.55rem; }
.palcard .swatches span:nth-last-child(2) { border-radius: 0 0.55rem 0.55rem 0; }
.palcard .swatches i { flex: 0 0 3rem; margin-left: 0.7rem; border-radius: 0.55rem; background: #DCE7EC; border: 1px solid var(--rule); }
.palcard figcaption { font-size: 0.9rem; color: var(--second); margin-top: 0.6rem; }
.palcard figcaption b { font-weight: 500; color: var(--ink); }

.longer { font-size: 0.85rem; color: var(--faint); margin-top: 1rem; }
.longer a { color: var(--second); }

/* ---- the index of every investigation ---- */

.index { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: 0.1rem; max-width: 46rem; }
.index li { border-top: 1px solid var(--rule); padding: 0.75rem 0; display: grid; gap: 0.15rem 1.5rem; }
@media (min-width: 46rem) { .index li { grid-template-columns: 18rem 1fr; align-items: baseline; } }
.index a { text-decoration: none; }
.index a:hover { text-decoration: underline; text-underline-offset: 3px; }
.index span { font-size: 0.9rem; color: var(--second); }

/* ---- pull quote ---- */

.pull {
  font-size: clamp(1.3rem, 3.2vw, 1.9rem); line-height: 1.3; margin: 2.5rem 0;
  padding-left: 1.2rem; border-left: 2px solid var(--signal); max-width: 40rem;
}

footer {
  border-top: 1px solid var(--rule); margin-top: 5rem; padding: 2rem 0 4rem;
  font-size: 0.88rem; color: var(--faint);
}
footer a { color: var(--second); }

/* ---- motion ---------------------------------------------------------------
   Taken from Furlong's site so the two read as one family. Anchor clicks
   glide, the nav carries a rule that slides to the page or section you are
   in, content settles in as it arrives, and moving between pages fades the
   content while the bar holds still. All of it is off under Reduce Motion.
   -------------------------------------------------------------------------- */

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

/* The bar stays put. It grows a hairline and a blur once you leave the top. */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  transition: box-shadow .3s ease, background-color .3s ease;
}
.topbar.stuck {
  box-shadow: 0 1px 0 var(--rule);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(120%) blur(9px);
  -webkit-backdrop-filter: saturate(120%) blur(9px);
}

/* Moving between pages swaps <main id="page"> in place. Naming it lifts it
   out of the root snapshot, so the masthead holds still and only the content
   below it changes. Out first, then in, so it reads as a fade and not as two
   pages melting into each other. */
#page { view-transition-name: page; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(page) { animation: page-fade-out .17s ease both; }
::view-transition-new(page) { animation: page-fade-in .30s cubic-bezier(.2,.7,.3,1) .17s both; }
@keyframes page-fade-out { to { opacity: 0; transform: translateY(-5px); } }
@keyframes page-fade-in  { from { opacity: 0; transform: translateY(8px); } }

/* The same shape for browsers without View Transitions. */
#page { transition: opacity .17s ease, transform .17s ease; }
#page.page-out       { opacity: 0; transform: translateY(-5px); }
#page.page-in-start  { opacity: 0; transform: translateY(8px); transition: none; }

/* The nav rule. One element, moved with a transform so it never reflows. */
.masthead nav { position: relative; padding-bottom: 0.45rem; }
.masthead nav a { position: relative; transition: color .28s ease; }
.masthead nav a.is-active { color: var(--ink); }
.nav-ink {
  position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--ink); opacity: 0; pointer-events: none;
  transition: transform .44s cubic-bezier(.22,.7,.24,1),
              width     .44s cubic-bezier(.22,.7,.24,1),
              opacity   .25s ease;
}

/* Content settles in. Only applied when JS is running, so nothing can be
   left invisible if the script fails to load. */
.js .reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .62s cubic-bezier(.2,.7,.3,1),
              transform .62s cubic-bezier(.2,.7,.3,1);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---- the mark ----

   The entry motion, the same as Furlong's and Neshi's: the icon's lines drawn
   across the full width at the top of the home page, each line drawing itself
   in. Nijimi's lines also ripple into their resting shape (tools/site-mark.mjs).
   Full-bleed band: without the wrapper the bare <svg> contributes its
   1000-unit viewBox as an intrinsic width and pushes the page wider. */
.markband { width: 100%; max-width: 100%; overflow: hidden; line-height: 0; }
.mark { display: block; width: 100%; height: clamp(120px, 22vw, 210px); }
.mark path {
  fill: none; stroke-linecap: round; stroke-width: 1.8;
  /* Must exceed the true path length, or the tail of each line lands in the
     dash gap and never draws. */
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
  animation: draw 1.1s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* The marks below the headline arrive the way ink does, soft and small, then
   settling into their edge. */
.marks img { animation: bleed 1.2s cubic-bezier(.2,.7,.3,1) both; }
.marks img:nth-child(2) { animation-delay: .12s; }
.marks img:nth-child(3) { animation-delay: .24s; }
.marks img:nth-child(4) { animation-delay: .36s; }
.then-now img { animation: bleed 1.2s cubic-bezier(.2,.7,.3,1) both; }
.then-now img + img { animation-delay: .18s; }
@keyframes bleed {
  from { opacity: 0; filter: blur(10px); transform: scale(.94); }
  to   { opacity: 1; filter: none; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #page { view-transition-name: none; }
  #page, #page.page-out, #page.page-in-start {
    opacity: 1; transform: none; transition: none;
  }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .nav-ink { transition: none; }
  .marks img, .then-now img { animation: none; }
  .mark path { animation: none; stroke-dashoffset: 0; }
}

/* A decision that has not been made yet, marked so it cannot ship by accident. */
.todo {
  background: rgba(200, 16, 46, 0.08); border: 1px dashed var(--signal);
  padding: 0.9rem 1.1rem; font-size: 0.88rem; color: var(--second); margin: 1.5rem 0;
}
.todo b { color: var(--signal); font-weight: 500; }

/* ---- research: a second bar with every page ---- */

/* Under the main bar and stuck to it, so the pages stay one tap away however
   far down the list you are. motion.js keeps --bar-h at the main bar's height,
   which changes when its tabs wrap. One row that scrolls sideways on a phone
   rather than a block of links that pushes the page down. The row scrolls
   inside the page's margins, not across them, so its first and last links
   line up with the bar above. */
.subnav {
  position: sticky; top: var(--bar-h, 4.2rem); z-index: 9;
  background: var(--paper); border-bottom: 1px solid var(--rule);
}
.subnav-row {
  display: flex; align-items: baseline; gap: 1.1rem;
  overflow-x: auto; white-space: nowrap; scrollbar-width: none;
  padding-top: 0.75rem; padding-bottom: 0.75rem;
}
.subnav-row::-webkit-scrollbar { display: none; }
.subnav a { font-size: 0.82rem; color: var(--second); text-decoration: none; flex: none; }
.subnav a:hover, .subnav a:focus-visible { color: var(--ink); }
.subnav-group {
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint);
  flex: none; padding-left: 0.4rem; border-left: 1px solid var(--rule);
}
.subnav-group:first-child { padding-left: 0; border-left: 0; }
h2[id] { scroll-margin-top: 8rem; }