/* Nenkima — field notebook × painted signboard.
   Design record: wiki/Project Records/Website Structure and Copy 2026-08-23.md
   Self-hosted latin-subset fonts, no external requests, no JavaScript. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("assets/fonts/bricolage-grotesque-var.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/public-sans-var.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/dm-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/dm-mono-500.woff2") format("woff2");
}

:root {
  --bone: #efe7d8;
  --bone-light: #f5efe3;
  --ink: #26201a;
  --ink-soft: #4d443a;
  --ink-reverse: #b9ac97;
  --solar: #e8891c;
  --acacia: #3a5a32;
  --signboard: #1f5b8a;
  --murram: #9c4a2f;
  --hairline: rgba(38, 32, 26, 0.35);
  --hairline-soft: rgba(38, 32, 26, 0.18);
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Public Sans", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
  --measure: 1120px;
  --gutter: clamp(22px, 5vw, 56px);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font: 16px/1.62 var(--body);
  -webkit-text-size-adjust: 100%;
}

/* Paper grain: inline SVG noise, ~1 KB, no image request. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 0.15  0 0 0 0 0.12  0 0 0 0 0.09  0 0 0 0.06 0"/></filter><rect width="240" height="240" filter="url(%23n)"/></svg>');
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

a {
  color: var(--signboard);
}

:focus-visible {
  outline: 2px solid var(--signboard);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip:focus {
  left: 8px;
  top: 8px;
  z-index: 20;
  background: var(--bone-light);
  border: 1px solid var(--ink);
  padding: 8px 12px;
  font: 500 12px/1 var(--mono);
}

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

h1,
h2,
h3 {
  font-family: var(--display);
  margin: 0;
}

h1 {
  font-weight: 800;
  font-size: clamp(38px, 6.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -1.6px;
  margin: 0 0 22px;
  max-width: 15em;
}

h2 {
  font-weight: 700;
  font-size: clamp(27px, 3.5vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.7px;
  margin: 0 0 22px;
}

h3 {
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.2px;
}

p {
  margin: 0 0 16px;
}

.eyebrow {
  font: 500 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--murram);
  margin: 0 0 16px;
}
.eyebrow-muted {
  color: var(--ink-soft);
}

.label {
  font: 500 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--murram);
  margin: 0 0 14px;
}

.lede {
  font-size: 17.5px;
  max-width: 34em;
}

section {
  padding: clamp(56px, 8vw, 96px) 0;
}

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

.masthead {
  border-bottom: 1px solid var(--hairline);
}
.masthead-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-top: 20px;
  padding-bottom: 16px;
}
.brand {
  font: 800 22px/1 var(--display);
  letter-spacing: -1px;
  text-decoration: none;
  color: inherit;
}
/* The period is a sun, not a full stop. Sized in em so it tracks the brand
   type, and baseline-aligned: an inline SVG's bottom edge sits on the
   baseline, and #sun-dot is trimmed so that edge is the bottom of the disc. */
.brand-dot {
  width: 0.5em;
  height: auto;
  margin-left: 0.05em;
  vertical-align: baseline;
}
.masthead nav {
  display: flex;
  gap: clamp(16px, 2.6vw, 30px);
}
.masthead nav a {
  font: 400 12.5px/1 var(--mono);
  color: var(--ink-soft);
  text-decoration: none;
}
.masthead nav a:hover,
.masthead nav a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

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

.hero {
  padding: clamp(48px, 7vw, 88px) 0 0;
}
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 32%);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
/* a hero with no roadline beneath it (site-power page) */
.hero-plain {
  padding-bottom: clamp(48px, 7vw, 88px);
}
.hero-copy {
  grid-column: 1;
  grid-row: 1;
}
.hero-sun {
  grid-column: 2;
  grid-row: 1;
  display: block;
  width: 100%;
  height: auto;
  color: var(--ink);
}
.hero h1 {
  max-width: 11em;
}
.hero .lede {
  max-width: 30em;
  margin-bottom: 24px;
}

.button {
  display: inline-block;
  padding: 14px 20px;
  background: var(--signboard);
  color: var(--bone-light);
  font: 600 13px/1 var(--body);
  letter-spacing: 0.3px;
  text-decoration: none;
}
.button:hover,
.button:focus-visible {
  background: #17466a;
}
.button span {
  margin-left: 8px;
}
/* blue signs lead to EV mobility partners, acacia green to businesses buying site power */
.button-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.button-acacia {
  background: var(--acacia);
}
.button-acacia:hover,
.button-acacia:focus-visible {
  background: #2a4424;
}

.roadline {
  /* Sticks to the viewport top once the hero scrolls past, so the boda's
     ride toward the camel stays in view for the whole page. Bone background
     covers section content passing underneath; stays under the grain
     overlay (z-index 10). */
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bone);
  height: clamp(64px, 9vw, 104px);
  margin-top: clamp(28px, 5vw, 56px);
  border-bottom: 1.5px solid var(--ink);
}
.camel {
  position: absolute;
  right: clamp(22px, 9vw, 140px);
  bottom: 0;
  width: clamp(96px, 13vw, 150px);
  height: auto;
  color: var(--ink);
}
.boda {
  position: absolute;
  left: clamp(18px, 8vw, 120px);
  bottom: 0;
  width: clamp(96px, 13vw, 150px);
  height: auto;
  /* the rear wheel's misregistered ring overprints the baseline rule,
     so the artwork extends past the trimmed viewBox */
  overflow: visible;
  color: var(--ink);
}
/* The boda rides toward the camel as the page scrolls — a CSS scroll
   timeline, keeping the page JavaScript-free. Browsers without
   scroll-driven animations (and reduced-motion visitors) get the static
   boda at its start position. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .boda {
      animation: boda-ride linear both;
      animation-timeline: scroll(root block);
      /* arrive a little before absolute page bottom, while the roadline
         is still on screen (tune with the footer's height) */
      animation-range: 0% 90%;
    }
    /* the wheels roll: each misregistered ring orbits its disc centre
       (the parent group's translate puts local 0,0 there) on the same
       timeline as the ride */
    .boda .wheelspin {
      animation: wheel-spin linear both;
      animation-timeline: scroll(root block);
      animation-range: 0% 90%;
    }
    /* the chassis bobs on its suspension, one bump per wheel turn, with
       uneven amplitudes and a touch of pitch; the wheels stay planted.
       Pivot sits low, near the axle line, so it rocks rather than sways.
       Settles to rest on arrival, like the rings landing on their
       printed offsets. */
    .boda .chassis {
      transform-box: fill-box;
      transform-origin: 50% 85%;
      animation: boda-jiggle ease-in-out both;
      animation-timeline: scroll(root block);
      animation-range: 0% 90%;
    }
  }
}
@keyframes boda-ride {
  to {
    /* pull up 14px short of the camel: full width minus the camel's right
       offset, the camel's width, the boda's own width, and the gap */
    left: calc(100% - clamp(22px, 9vw, 140px) - 2 * clamp(96px, 13vw, 150px) - 14px);
  }
}
@keyframes wheel-spin {
  to {
    transform: rotate(4turn);
  }
}
/* Two bumps per wheel turn, murram-grade amplitudes, occasional downward
   compression — calming just before it pulls up beside the camel. */
@keyframes boda-jiggle {
  0%     { transform: translateY(0)      rotate(0deg); }
  6.25%  { transform: translateY(-7px)   rotate(-1.6deg); }
  12.5%  { transform: translateY(-1px)   rotate(0.8deg); }
  18.75% { transform: translateY(-5.5px) rotate(1.4deg); }
  25%    { transform: translateY(0.5px)  rotate(-0.8deg); }
  31.25% { transform: translateY(-8px)   rotate(-1.2deg); }
  37.5%  { transform: translateY(-0.5px) rotate(1deg); }
  43.75% { transform: translateY(-6px)   rotate(1.8deg); }
  50%    { transform: translateY(0)      rotate(-1deg); }
  56.25% { transform: translateY(-7.5px) rotate(1.2deg); }
  62.5%  { transform: translateY(-1px)   rotate(-1.5deg); }
  68.75% { transform: translateY(-4.5px) rotate(-0.6deg); }
  75%    { transform: translateY(0.5px)  rotate(1deg); }
  81.25% { transform: translateY(-6.5px) rotate(-1.8deg); }
  87.5%  { transform: translateY(-1px)   rotate(0.6deg); }
  93.75% { transform: translateY(-3.5px) rotate(-0.8deg); }
  100%   { transform: translateY(0)      rotate(0deg); }
}

/* ---------- the opportunity ---------- */

.statement {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(20px, 2.5vw, 29px);
  line-height: 1.3;
  letter-spacing: -0.5px;
  max-width: 30em;
  margin: 0;
}

/* ---------- the model ---------- */

.model {
  border-top: 1px solid var(--hairline);
  background: var(--bone-light);
}
.section-head h2 {
  margin-bottom: 0;
}
.model-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--hairline);
}
.model-grid article {
  padding: 22px clamp(20px, 2.6vw, 34px) 6px 0;
  border-right: 1px solid var(--hairline-soft);
}
.model-grid article:last-child {
  border-right: 0;
  padding-right: 0;
}
.model-grid article:not(:first-child) {
  padding-left: clamp(20px, 2.6vw, 34px);
}
/* four steps on the site-power page */
.model-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
.idx {
  font: 500 11px/1 var(--mono);
  color: var(--murram);
  margin: 0 0 26px;
}
.model-grid h3 {
  margin-bottom: 10px;
}
.model-grid p {
  font-size: 15px;
  color: var(--ink-soft);
}

/* ---------- where we are now ---------- */

.stage {
  border-top: 1px solid var(--hairline);
}
.stage-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(32px, 6vw, 84px);
  /* The landscape plate is narrower than the copy; centring keeps the
     leftover height as margin above and below rather than one dead block. */
  align-items: center;
}
.stage p {
  max-width: 34em;
}
.landscape {
  margin: 0;
  border: 1px solid var(--hairline);
  background: var(--bone-light);
  padding: 20px 18px 14px;
  color: var(--ink);
}
.landscape > svg {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 0 auto;
}
.landscape .landscape-sun {
  color: var(--ink);
}
.landscape .landscape-acacia {
  color: var(--acacia);
}

/* ---------- for partners ---------- */

.partners {
  border-top: 1px solid var(--hairline);
  background: var(--bone-light);
}
.partners-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(30px, 5vw, 68px);
  margin-top: clamp(34px, 5vw, 54px);
  align-items: start;
}
.ledger {
  list-style: none;
  counter-reset: row;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.ledger li {
  counter-increment: row;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 15.5px;
}
.ledger li::before {
  content: counter(row, decimal-leading-zero);
  font: 500 11px/1.7 var(--mono);
  color: var(--murram);
}
.note {
  border-left: 2px solid var(--murram);
  padding-left: clamp(16px, 2vw, 24px);
}
.note-boda {
  display: block;
  width: min(200px, 70%);
  height: auto;
  margin-bottom: 18px;
  overflow: visible;
  color: var(--ink);
}
.note p {
  font-size: 15.5px;
  color: var(--ink-soft);
  margin: 0;
}
.partners .button {
  margin-top: clamp(34px, 5vw, 54px);
}

.partner-proof {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  margin-top: clamp(42px, 6vw, 68px);
  padding: clamp(18px, 2.5vw, 26px) 0 0;
  border-top: 1px solid var(--hairline-soft);
}
.partner-logo {
  display: block;
  width: 220px;
  padding: 6px;
  border: 1px solid var(--hairline-soft);
}
.partner-logo img {
  display: block;
  width: 100%;
  height: auto;
}
.partner-statement {
  max-width: 31em;
  margin: 0;
  font: 600 clamp(18px, 2vw, 22px)/1.35 var(--display);
  letter-spacing: -0.25px;
}

/* ---------- who we are ---------- */

.about {
  border-top: 1px solid var(--hairline);
}
.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.about p {
  max-width: 34em;
}
.contact {
  border: 1px solid var(--hairline);
  background: var(--bone-light);
  padding: 22px clamp(18px, 2vw, 26px);
}
.contact dl {
  margin: 0;
}
.contact dt {
  font: 500 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--ink-soft);
  padding-top: 12px;
  border-top: 1px solid var(--hairline-soft);
}
.contact dd {
  margin: 6px 0 16px;
}
.contact dd a {
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.contact dd span {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* ---------- footer ---------- */

footer {
  background: var(--ink);
  color: var(--ink-reverse);
  padding: clamp(38px, 5vw, 56px) 0;
}
.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
}
footer .brand {
  color: var(--bone);
  display: inline-block;
  margin-bottom: 14px;
}
footer p {
  margin: 0;
  font-size: 13.5px;
  max-width: 24em;
}
footer .fine {
  margin-top: 8px;
  font: 400 11.5px/1.6 var(--mono);
  color: #8d8172;
}
.footer-acacia {
  width: clamp(120px, 16vw, 190px);
  height: auto;
  color: var(--bone);
  opacity: 0.9;
  flex: none;
}

/* ---------- narrow screens ---------- */

@media (max-width: 900px) {
  .stage-grid,
  .partners-grid,
  .partner-proof,
  .about-grid {
    grid-template-columns: 1fr;
  }
  .landscape {
    max-width: 320px;
  }
  .model-grid,
  .model-grid-4 {
    grid-template-columns: 1fr;
  }
  .model-grid article,
  .model-grid article:not(:first-child) {
    border-right: 0;
    border-bottom: 1px solid var(--hairline-soft);
    padding: 20px 0 18px;
  }
  .model-grid article:last-child {
    border-bottom: 0;
  }
  .idx {
    margin-bottom: 14px;
  }
}

@media (max-width: 620px) {
  .masthead nav {
    display: none;
  }
  .masthead-row {
    padding-bottom: 18px;
  }
  .hero {
    padding-top: 32px;
  }
  .hero .wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
  }
  .hero-sun {
    width: 132px;
  }
  h1 {
    letter-spacing: -1px;
  }
  .lede {
    font-size: 16.5px;
  }
  .footer-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-acacia {
    width: 140px;
  }
}