/* ==========================================================================
   The Enshittification Resistant Software Project
   --------------------------------------------------------------------------
   Everything you're likely to want to change lives in the :root block below.
   ========================================================================== */

:root {
  /* ---- Colour ---------------------------------------------------------- */
  --paper:        #fbfaf7;   /* page background            */
  --ink:          #121212;   /* body text + display type   */
  --ink-soft:     #5a5a56;   /* footnotes, footer, meta    */
  --accent:       #121212;   /* buttons, links, underlines */
  --accent-ink:   #fbfaf7;   /* text on top of --accent    */
  --focus:        #1e6bff;   /* keyboard focus ring        */

  /* Outcome labels on the self certify page. Darkened from the chart's own
     fills so they stay readable as text on paper. */
  --level-stop:   #9a2f2f;   /* disqualified               */
  --level-1:      #3a5bbf;   /* Level ★    (blue circle)   */
  --level-2:      #1f7a3d;   /* Level ★★   (green shield)  */
  --level-3:      #9a6b00;   /* Level ★★★  (gold ribbon)   */

  /* ---- Type families --------------------------------------------------- */
  /* Display: the fat one, up top. */
  --font-display: 'Chango', 'Chalkboard SE', 'Comic Sans MS', system-ui, sans-serif;
  /* Marker: the tilted handwriting for the section shouts.                 */
  --font-marker:  'Story Script', 'Noteworthy', 'Bradley Hand', cursive;
  /* Body: a real reading serif. 'Playfair Display' is closer to the zine,
     but far harder to read at length — Lora keeps the flavour, legibly.    */
  --font-body:    'Lora', Georgia, 'Times New Roman', serif;

  /* ---- Type scale (deliberately large) --------------------------------- */
  --size-body:    1.4375rem;  /* 23px */
  --leading-body: 1.65;
  --size-hero:    clamp(2.75rem, 10vw, 5.9rem);  /* "Software" / "PROJECT" */
  --size-marker:  clamp(2.15rem, 5.6vw, 3.4rem);
  --size-note:    1.125rem;   /* 18px */

  /* ---- Measure & rhythm ------------------------------------------------ */
  --measure:      36em;       /* ≈ 72 characters per line  */
  --gutter:       clamp(1.25rem, 5vw, 2.5rem);
  --space-para:   1.15em;
  --space-block:  clamp(3.5rem, 9vw, 6.5rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #121211;
    --ink:        #f2f0ea;
    --ink-soft:   #a3a099;
    --accent:     #f2f0ea;
    --accent-ink: #121211;
    --focus:      #7aa7ff;
    --level-stop: #f08a8a;
    --level-1:    #93aef5;
    --level-2:    #6fd18f;
    --level-3:    #e3b64a;
  }
  /* The CC badge is drawn for light backgrounds. */
  :root:not([data-theme="light"]) .licence__badge img { filter: invert(1); }
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(3rem, 8vw, 6rem);
  padding-inline: var(--gutter);

  background: var(--paper);
  color: var(--ink);

  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-body);

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.6em 1em;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  text-decoration: none;
  z-index: 10;
}
.skip-link:focus { left: var(--gutter); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  max-width: 52rem;
  margin-inline: auto;
  margin-bottom: var(--space-block);
  text-align: center;
}

.hero__the {
  margin: 0 0 0.2em;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.95rem, 2.2vw, 1.35rem);
  letter-spacing: 0.22em;
  text-indent: 0.22em;   /* compensate for trailing letter-space */
  line-height: 1;
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

/* The arced "Enshittification Resistant" line. */
.hero__arc {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  margin-bottom: -0.18em;
}

.hero__arc text {
  font-family: var(--font-display);
  font-weight: 400;
  /* Sized so the natural width lands just under the 1015-unit path; the
     textLength in the markup then only nudges, rather than squashing. */
  font-size: 58px;
  fill: var(--ink);
}

.hero__word {
  display: block;
  font-size: var(--size-hero);
}

.hero__word--caps {
  letter-spacing: 0.01em;
}

/* ==========================================================================
   Sections & prose
   ========================================================================== */

.section {
  max-width: var(--measure);
  margin-inline: auto;
  margin-bottom: var(--space-block);
}

/* The marker "shouts" sit slightly askew, like the zine. */
.marker {
  margin: 0 auto 1.1em;
  max-width: 20ch;                       /* forces the short, stacked lines */
  font-family: var(--font-marker);
  font-weight: 400;
  font-size: var(--size-marker);
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  transform: rotate(-2.5deg);
  transform-origin: center center;
}

.marker--tilt-left {
  transform: rotate(-1.5deg);
}

@media (prefers-reduced-motion: reduce) {
  .marker { transform: none; }
}

.asterisk {
  color: inherit;
  text-decoration: none;
}
.asterisk:hover { text-decoration: underline; }

p {
  margin: 0 0 var(--space-para);
  text-align: left;              /* never justify: no hyphenation on the web */
  hyphens: none;
  overflow-wrap: break-word;
}

p:last-child { margin-bottom: 0; }

a {
  color: var(--accent);
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.18em;
}

em { font-style: italic; }

/* ==========================================================================
   Call to action
   ========================================================================== */

.cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* centred on the text column, not the page */
  gap: 0.9rem;
}

.btn {
  display: inline-block;
  padding: 0.7em 1.35em;

  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.25;
  text-decoration: none;

  color: var(--ink);
  background: transparent;
  border: 2px solid var(--accent);
  border-radius: 999px;

  /* The button holds still; the shadow drops away beneath it. */
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow 150ms ease, background-color 120ms ease, color 120ms ease;
}

.btn:hover,
.btn:focus-visible { box-shadow: 0 6px 10px rgba(0, 0, 0, 0.22); }

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* ==========================================================================
   Footnote & footer
   ========================================================================== */

.note {
  position: relative;
  color: var(--ink-soft);
  font-size: var(--size-note);
  line-height: 1.6;
}

.note__mark { font-weight: 600; }

.footer {
  max-width: var(--measure);
  margin-inline: auto;
  color: var(--ink-soft);
  font-size: var(--size-note);
  line-height: 1.55;
}

.footer__name {
  margin-bottom: 1.5rem;
  font-family: var(--font-display);
  font-weight: 400;
}

.licence {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 0.9rem 1.25rem;
}

.licence__badge {
  flex: none;
  display: block;
  line-height: 0;
}

.licence__badge img {
  display: block;
  width: 88px;
  height: 31px;
}

.licence__text {
  flex: 1 1 22ch;
  margin: 0;
  font-size: 0.9375rem;   /* 15px */
}

/* ==========================================================================
   Small screens
   ========================================================================== */

@media (max-width: 40rem) {
  :root {
    --size-body:  1.1875rem;  /* 19px */
  }
  .marker { max-width: 100%; }
  .btn { width: 100%; text-align: center; }
}

/* ==========================================================================
   Self certify page
   ========================================================================== */

.subhero {
  max-width: var(--measure);
  margin: 0 auto var(--space-block);
  text-align: center;
}

.backlink {
  margin: 0 0 2.5rem;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--size-note);
}

.backlink a { color: var(--ink-soft); }

.subhero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--size-hero);
  line-height: 1.02;
}

.marker--sub {
  margin-top: 0.4em;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
}

/* ---- the chart ---------------------------------------------------------- */

.chart {
  margin: 0 0 var(--space-block);
}

/* Wraps the scroller rather than sitting inside it: .chart__scroll sets
   overflow-x, which makes overflow-y compute to auto as well, and that would
   clip the shadow off. */
.chart__sheet {
  position: relative;
  max-width: 68rem;
  margin-inline: auto;
}

/* Two blurred slabs tucked behind the sheet and tilted in opposite directions.
   The shadow is deepest along the middle of the bottom edge and lifts away
   towards each corner, so the chart reads as paper curling up at its edges. */
.chart__sheet::before,
.chart__sheet::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 24px;
  width: 48%;
  height: 26%;
  max-height: 140px;
  box-shadow: 0 26px 24px rgba(0, 0, 0, 0.4);
}

/* Pivoted at the outer bottom corner, so that corner stays pinned to the page
   while the inner end swings down - the shadow deepens towards the middle. */
.chart__sheet::before {
  left: 10px;
  transform: rotate(-3.4deg);
  transform-origin: 0 100%;
}

.chart__sheet::after {
  right: 10px;
  transform: rotate(3.4deg);
  transform-origin: 100% 100%;
}

/* The chart is 842 units wide and full of small labels. Rather than letting it
   shrink to an unreadable smudge on a phone, hold it at a legible width and
   let that one element scroll sideways. */
.chart__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
}

.chart__img {
  display: block;
  position: relative;   /* paints over the shadow slabs behind the sheet */
  width: 100%;
  min-width: 46rem;
  height: auto;
  margin-inline: auto;
  /* The chart is drawn on white; on a dark page it needs its own ground. */
  background: #fff;
}

.chart__caption {
  max-width: var(--measure);
  margin: 1rem auto 0;
  color: var(--ink-soft);
  font-size: var(--size-note);
  text-align: center;
}

/* ---- the written-out flow ----------------------------------------------- */

.flow {
  margin: 0 0 var(--space-para);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.flow > li {
  counter-increment: step;
  margin-bottom: 2.25rem;
}

.flow__q {
  margin: 0 0 0.5em;
  font-weight: 600;
}

.flow__q::before {
  content: counter(step) ". ";
  font-family: var(--font-display);
  font-weight: 400;
}

.flow__a {
  margin: 0 0 0.25em;
  padding-left: 1.6em;
}

.flow__a b { font-weight: 600; }

.out {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.9em;
  white-space: nowrap;
}

.out--stop { color: var(--level-stop); }
.out--1    { color: var(--level-1); }
.out--2    { color: var(--level-2); }
.out--3    { color: var(--level-3); }

.flow__end {
  margin-top: 2rem;
  font-weight: 600;
}

@media (max-width: 40rem) {
  .chart__img { min-width: 40rem; }
}

/* ==========================================================================
   Help link — the circled ? in the corner
   ========================================================================== */

.helplink {
  position: fixed;
  top: clamp(0.75rem, 2.5vw, 1.5rem);
  right: clamp(0.75rem, 2.5vw, 1.5rem);
  z-index: 5;

  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;

  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;

  /* Matches the buttons: the disc holds still, the shadow drops beneath it. */
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow 150ms ease;
}

.helplink:hover,
.helplink:focus-visible { box-shadow: 0 5px 9px rgba(0, 0, 0, 0.22); }

.helplink__mark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1;
  /* Chango's question mark sits low in the box; nudge it back to the middle. */
  transform: translateY(-0.04em);
}

@media (prefers-reduced-motion: reduce) {
  .helplink { transition: none; }
}

/* ==========================================================================
   About page
   ========================================================================== */

.about__h {
  margin: 0 0 0.6em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
}

/* The about page is several short sections rather than a few long ones, so a
   full --space-block between each leaves it looking like scattered fragments.
   Scoped: the other pages keep their wide breathing room. */
.about .section + .section { margin-top: calc(var(--space-block) * -0.45); }

/* ---- Buy Me a Coffee, rebuilt locally ----------------------------------- */

.bmc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;

  padding: 0.62em 1.15em;

  background: #ffdd00;
  color: #000;
  border: 2px solid #000;
  border-radius: 999px;

  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;

  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow 150ms ease;
}

.bmc-btn:hover,
.bmc-btn:focus-visible { box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3); }

@media (prefers-reduced-motion: reduce) {
  .bmc-btn { transition: none; }
}

/* ---- font colophon ------------------------------------------------------ */

.font-credits {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.6em 1.5em;
  margin: 0;
}

.font-credits dt { margin: 0; }
.font-credits dd { margin: 0; font-size: var(--size-note); }

/* Each name wears its own face. Sized optically rather than to one number:
   the script has a small x-height and the display face a large one, so equal
   point sizes would not look equal. */
.fc-name { line-height: 1.3; }
.fc-chango      { font-family: var(--font-display); font-size: 1.45rem; }
.fc-storyscript { font-family: var(--font-marker);  font-size: 1.75rem; }
.fc-lora        { font-family: var(--font-body);    font-size: 1.5rem; }

@media (max-width: 40rem) {
  .helplink { width: 2.15rem; height: 2.15rem; }
  .font-credits { grid-template-columns: 1fr; gap: 0.2em 0; }
  .font-credits dd { margin-bottom: 0.9em; }
}

/* ==========================================================================
   Footer navigation
   ========================================================================== */

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 1.4em;
  margin-bottom: 1.6rem;
}

.footer__nav a { color: var(--ink); }

/* The current page stays in the list so the set always reads the same, but it
   is not a link to where you already are. */
.footer__nav [aria-current="page"] {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.18em;
}