/* ============================================================
   Makense — one page, no framework, no build step.

   Two rewrites got this wrong before it got it right, and both
   failures are worth recording because they are easy to repeat.

   FIRST: a four-stop gradient, three drifting blurred blobs and
   frosted cards. Well made, and anonymous — the page a thousand
   SaaS startups shipped in 2021.

   SECOND: the opposite. Warm paper, near-black ink, a serif and
   hairline rules, every ornament stripped out. On its own terms
   it was correct, and it landed flat, for a reason worth being
   honest about: the section order, the copy and the single
   column were all left exactly as they were, so the page read
   as the old one with the colour taken out. And it had no
   pictures at all. A page of pure text cannot be handsome no
   matter how good the typesetting is — the blobs were ugly, but
   they were doing a job, and removing them without putting
   anything in their place left a hole.

   WHAT ACTUALLY FIXED IT. Not a third palette. Two structural
   things:

     1. REAL IMAGES, of the real product. Tizita Yearbook is a
        handsome object — a deep blue cover with a gold crest —
        and it was being described in prose on a page with
        nothing to look at. Clearleft's rule: the chrome stays
        quiet and the WORK carries the colour. Screenshots of
        the live demo, 12-35KB each, are now the brightest thing
        on the page, and they are honest.

     2. BANDS. The old page was one column on one background from
        the header to the footer, which is why every version of
        it felt the same length and the same weight. Full-bleed
        sections that alternate ink and paper give the page a
        pulse: you arrive somewhere three times on the way down.

   The serif survives from the second attempt, because the
   product's own cover is set in one and the studio should look
   related to the thing it makes.

   WHY NO WEBFONT, still. The pitch is software that works on a
   slow connection; opening with 80KB of font from a third-party
   CDN would contradict the first paragraph. Georgia is on every
   machine that will load this. The whole page — three product
   screenshots included — costs less than one webfont would.
   ============================================================ */

:root {
  /* Ink bands. Fixed in both schemes: a dark section is dark
     because the design says so, not because the OS does. */
  --ink:        #0b1020;
  --ink-lift:   #141b35;
  --on-ink:     #eef0f8;
  --on-ink-soft:#a9b0cb;
  --on-ink-faint:#8891ad;
  --ink-rule:   #222a4a;

  /* Paper bands. These DO follow the scheme — see the dark
     block below — so a dark-mode reader gets a quieter second
     tone rather than a white flash between two navy sections. */
  --paper:      #faf8f3;
  --paper-lift: #f2efe6;
  --on-paper:      #14161f;
  --on-paper-soft: #4c5063;
  --on-paper-faint:#6b6f82;
  --paper-rule: #e2ddd0;

  --accent:     #6366f1;   /* indigo: legible on ink and on paper */
  --accent-deep:#4640d8;   /* the paper-band variant, for contrast */
  --gold:       #f5b544;   /* borrowed from the yearbook's own crest */

  --display: ui-serif, Georgia, "Times New Roman", Times, serif;
  --plain:   ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 68rem;
  --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #0f131f;
    --paper-lift: #161b2b;
    --on-paper:      #eceef6;
    --on-paper-soft: #a8aec4;
    --on-paper-faint:#868ca3;
    --paper-rule: #242a3d;
    --accent-deep:#9b9cff;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--on-paper);
  font-family: var(--plain);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--accent); color: #fff; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto !important; }
  /* The tilt is decoration; a reader who asked for stillness gets
     the screens square-on rather than merely un-animated. */
  .phone { transform: none !important; }
}

/* ---- bands ------------------------------------------------ */

/* Full-bleed colour, constrained content. This is the whole
   structural idea: the page changes weight as you scroll. */
.band { padding: 5.5rem 0; }
.band > .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }

.band.ink {
  background-color: var(--ink);
  color: var(--on-ink);
  /* A single wide glow, not three drifting blobs. It sits still,
     it never animates, and it is there to lift the product shot
     off the background rather than to be looked at. */
  background-image: radial-gradient(60rem 40rem at 78% 18%,
                    color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%);
}
.band.ink h2, .band.ink h3 { color: var(--on-ink); }
.band.ink p  { color: var(--on-ink-soft); }
.band.paper  { background: var(--paper); color: var(--on-paper); }

/* ---- header ----------------------------------------------- */

.bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 1.6rem;
  max-width: var(--wrap); margin: 0 auto; padding: 1.8rem 1.5rem 0;
}
/* The name is a picture now (img/makense-wordmark.svg), so the row centres on
   it instead of lining up text baselines. The height is in rem, not the width
   in px, so it grows with the reader's own type size like the nav beside it.
   The wordmark's hard shadow is black and disappears into the ink band; that
   is intended, the band is the only thing it ever sits on. */
.bar .mark { display: block; margin-right: auto; line-height: 0; }
.bar .mark img { display: block; height: 4rem; width: auto; }
.bar nav a { white-space: nowrap; }
/* The wordmark is wider than the old text, so on a phone the nav goes under
   it rather than being squeezed until "How we work" breaks over three lines. */
@media (max-width: 600px) {
  .bar { flex-wrap: wrap; row-gap: .6rem; }
  .bar .mark img { height: 3.2rem; }
}
.bar nav { display: flex; gap: 1.3rem; }
.bar nav a {
  color: var(--on-ink-soft); text-decoration: none;
  font-size: .87rem; padding-bottom: .15rem;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.bar nav a:hover { color: var(--on-ink); border-bottom-color: var(--gold); }

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

.kicker {
  margin: 0 0 1.4rem;
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold);
}
.band.paper .kicker { color: var(--accent-deep); }

h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.8rem, 6.4vw, 4.6rem);
  line-height: 1.03; letter-spacing: -.03em;
  margin: 0 0 1.5rem; text-wrap: balance;
}
h1 em { font-style: normal; color: var(--gold); }

h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.8rem, 3.8vw, 2.6rem);
  line-height: 1.12; letter-spacing: -.025em;
  margin: 0 0 1.1rem; max-width: 18em; text-wrap: balance;
}

h3 {
  font-family: var(--plain); font-size: 1.02rem; font-weight: 650;
  letter-spacing: -.005em; margin: 0 0 .45rem;
}

p { margin: 0 0 1.05rem; max-width: var(--measure); text-wrap: pretty;
    color: var(--on-paper-soft); }
p:last-child { margin-bottom: 0; }

.lead { font-size: 1.18rem; line-height: 1.6; max-width: 34rem; }

.eyebrow {
  display: flex; align-items: baseline; gap: .8rem;
  margin: 0 0 2.4rem; max-width: none;
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--on-paper-faint);
}
.band.ink .eyebrow { color: var(--on-ink-faint); }
.eyebrow b { color: var(--accent-deep); font-weight: 500; }
.band.ink .eyebrow b { color: var(--gold); }
.eyebrow::after {
  content: ""; flex: 1; height: 1px; background: var(--paper-rule);
  transform: translateY(-.2em);
}
.band.ink .eyebrow::after { background: var(--ink-rule); }

/* ---- calls to action -------------------------------------- */

.go {
  display: inline-flex; align-items: baseline; gap: .5rem;
  font-size: 1.02rem; font-weight: 600; text-decoration: none;
  color: var(--accent-deep);
  border-bottom: 1px solid color-mix(in srgb, var(--accent-deep) 40%, transparent);
  padding-bottom: .12rem;
  transition: border-color .15s;
}
.band.ink .go { color: var(--gold); border-bottom-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.go::after { content: "\2192"; transition: transform .15s; }
.go:hover::after { transform: translateX(3px); }
.go:hover { border-bottom-color: currentColor; }

/* The one filled control on the page, so it is unmistakably the
   thing to press. */
.cta {
  display: inline-block; text-decoration: none;
  background: var(--gold); color: #17130a;
  font-weight: 700; font-size: 1rem;
  padding: .85rem 1.7rem; border-radius: 3px;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 .8rem 2rem -.8rem color-mix(in srgb, var(--gold) 80%, transparent);
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 1.1rem 2.4rem -.8rem color-mix(in srgb, var(--gold) 90%, transparent); }

/* ---- the phone mockup ------------------------------------- */

/* A frame, not a photograph of a phone: a rounded rect with a
   hairline and a shadow. Cheaper than a device PNG, sharper at
   every density, and it never dates the way a real handset does. */
.phone {
  position: relative;
  width: 100%; max-width: 17rem;
  border-radius: 1.8rem;
  padding: .45rem;
  background: linear-gradient(160deg, #2b3357, #151a30);
  box-shadow: 0 2.4rem 4rem -1.2rem rgba(0,0,0,.6),
              0 0 0 1px rgba(255,255,255,.07) inset;
}
.phone img { border-radius: 1.4rem; }
.phone::after {
  /* the speaker slot — one small detail is enough to read as a phone */
  content: ""; position: absolute; top: .95rem; left: 50%;
  transform: translateX(-50%);
  width: 3.4rem; height: .28rem; border-radius: 99px;
  background: rgba(255,255,255,.22);
}

.stage { display: flex; justify-content: center; gap: 1.2rem; }
.stage .phone:first-child { transform: rotate(-4deg); }
.stage .phone:last-child  { transform: rotate(4deg) translateY(1.6rem); }
.stage .phone:only-child  { transform: rotate(-3deg); }

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

.hero { padding-top: 3.5rem; padding-bottom: 5.5rem; }
.hero .wrap {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 3rem; align-items: center;
}
.hero .cta { margin-top: .6rem; }
.hero .lead { color: var(--on-ink-soft); margin-bottom: 1.8rem; }

@media (max-width: 52rem) {
  .hero .wrap { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero .stage { justify-content: flex-start; }
}

/* ---- what we build ---------------------------------------- */

.grid { display: grid; gap: 2.2rem 3rem; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 44rem) { .grid { grid-template-columns: 1fr; } }

/* Two tokens per item, not one. --tint paints a 2px rule, which is
   decoration and has no contrast floor; --tint-text paints an 11px
   letter, which is text and needs 4.5:1. Measured against both band
   colours: the single shared value failed as text at three of the
   four hues in light and two in dark, while looking perfectly good
   as a rule. Splitting them keeps the colour coding and passes. */
.grid article { border-top: 2px solid var(--tint); padding-top: 1.1rem; }
.grid article:nth-child(1) { --tint: #5457e8; --tint-text: #4b4ed9; }
.grid article:nth-child(2) { --tint: #cf3a70; --tint-text: #b32c59; }
.grid article:nth-child(3) { --tint: #0c8f8f; --tint-text: #0a6a6a; }
.grid article:nth-child(4) { --tint: #c2741a; --tint-text: #90530e; }
.grid h3 span {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  color: var(--tint-text); margin-right: .55rem;
}

/* Placed HERE, not up with the other dark-scheme tokens, and that is
   not tidiness — a media query adds no specificity, so the generic
   block at the top of the file lost to these same-weight selectors
   purely on source order and the dark values silently never applied.
   The rules keep their saturated hue; only the 11px letters lift. */
@media (prefers-color-scheme: dark) {
  .grid article:nth-child(1) { --tint-text: #9b9cff; }
  .grid article:nth-child(2) { --tint-text: #ff8fb3; }
  .grid article:nth-child(3) { --tint-text: #3ecfcf; }
  .grid article:nth-child(4) { --tint-text: #ffb14a; }
}
.grid p { margin: 0; font-size: .96rem; max-width: 26rem; }

/* ---- the work band ---------------------------------------- */

.feature {
  display: grid; grid-template-columns: .95fr 1.05fr;
  gap: 3.5rem; align-items: center;
}
@media (max-width: 56rem) {
  .feature { grid-template-columns: 1fr; gap: 2.5rem; }
  .feature .stage { order: 2; }
}
/* Specificity, not preference: this lives inside .band.ink, whose
   `p` rule is (0,2,1) and was repainting the tag's text in the
   band's soft grey — dark-grey-on-gold, effectively invisible.
   Matching that weight is the fix; !important would have hidden
   the reason from whoever reads this next. */
.band.ink p.tag,
.tag {
  display: inline-block; margin: 0 0 1rem; max-width: none;
  font-family: var(--mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: #17130a; background: var(--gold);
  padding: .26rem .6rem; border-radius: 2px;
}
.feature h3 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  line-height: 1.08; letter-spacing: -.028em; margin: 0 0 1rem;
}
.feature p { max-width: 34rem; }
.feature .go { margin-top: .4rem; }

/* A second product, separated by a rule and mirrored: text left,
   screens right. Without the flip the two blocks are the same shape
   one above the other and read as a repeat, not as more work. */
.feature + .feature {
  margin-top: 5.5rem; padding-top: 5.5rem;
  border-top: 1px solid var(--ink-rule);
}
.feature.flip { grid-template-columns: 1.05fr .95fr; }
.feature.flip .stage { order: 2; }
@media (max-width: 56rem) {
  .feature.flip { grid-template-columns: 1fr; }
  .feature + .feature { margin-top: 4rem; padding-top: 4rem; }
}

/* ---- how we work ------------------------------------------ */

.steps { margin: 0; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step; list-style: none;
  display: grid; grid-template-columns: 3rem 1fr; gap: 0 1.1rem;
  padding: 1.5rem 0; border-top: 1px solid var(--paper-rule);
}
.steps li:first-child { border-top: 0; padding-top: 0; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--display); font-size: 1.5rem;
  color: var(--accent-deep); line-height: 1.2;
}
.steps h3 { margin: 0 0 .35rem; }
.steps p { margin: 0; font-size: .97rem; max-width: 36rem; }
@media (max-width: 30rem) {
  .steps li { grid-template-columns: 1fr; gap: .2rem; }
}

/* ---- contact ----------------------------------------------- */

.contact .wrap { text-align: center; }
.contact h2 { margin-left: auto; margin-right: auto; }
.contact p  { margin-left: auto; margin-right: auto; }
.reach {
  font-family: var(--display); font-size: clamp(1.7rem, 4.5vw, 2.4rem);
  letter-spacing: -.02em; margin: 1.8rem 0 0; max-width: none;
}
.reach a {
  color: var(--on-ink); text-decoration: none;
  border-bottom: 2px solid var(--gold); padding-bottom: .06em;
  transition: color .15s;
}
.reach a:hover { color: var(--gold); }
.reach small {
  display: block; margin-top: .9rem;
  font-family: var(--plain); font-size: .9rem;
  color: var(--on-ink-faint); letter-spacing: 0;
}

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

footer { background: var(--ink); color: var(--on-ink-faint); border-top: 1px solid var(--ink-rule); }
footer .wrap {
  max-width: var(--wrap); margin: 0 auto;
  padding: 1.8rem 1.5rem 2.6rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem;
  font-size: .86rem;
}
footer p { margin: 0; max-width: none; color: inherit; }
footer a { color: var(--on-ink-soft); text-decoration: none; border-bottom: 1px solid var(--ink-rule); }
footer a:hover { color: var(--gold); border-bottom-color: var(--gold); }

@media (max-width: 34rem) {
  body { font-size: 16px; }
  .band { padding: 3.5rem 0; }
  .hero { padding-top: 2.5rem; padding-bottom: 3.5rem; }
  .stage { gap: .6rem; }
  .stage .phone:last-child { transform: rotate(4deg) translateY(.8rem); }
  /* A 390px viewport less its gutters is ~342px. Two phones at their
     desktop 17rem ran the second one off the right edge — and the tilt
     pushed it further than the box model admitted, so it did not show
     up as overflow until it was looked at. */
  .stage .phone { max-width: 9.6rem; border-radius: 1.1rem; padding: .3rem; }
  .stage .phone img { border-radius: .85rem; }
  .stage .phone::after { width: 2rem; height: .2rem; top: .62rem; }
  /* The hero shows one phone, so it can stay generous. */
  .hero .stage .phone { max-width: 13rem; border-radius: 1.5rem; padding: .4rem; }
  .hero .stage .phone img { border-radius: 1.2rem; }
  .hero .stage .phone::after { width: 2.8rem; height: .24rem; top: .85rem; }
}