/*
  geoffmuskett.com
  A hand-written port of the "geoffmuskett2023" WordPress theme
  (wp-content/themes/geoffmuskett: _globals, _typography, _header, _home,
  _page-intro, _buttons, _footer, _flexboxgrid). Only what the static site uses.
  No build step: edit this file directly.

  Breakpoints (from _globals.scss):
    400 miniBabyBear · 600 babyBear · 768 teenBear · 1024 mamaBear · 1200 papaBear · 1400 sumoBear
*/

/* ---------------------------------------------------------------- tokens */

:root {
  --accent: #00a38a;          /* $accentColor1 — the teal */
  --accent-dark: #008a74;     /* darken($accentColor1, 5%) */
  --accent2: #1588b5;         /* $accentColor2 */
  --grey: #f2f2f2;            /* $grey — page bands, grey buttons */
  --grey-dark: #e5e5e5;       /* darken($grey, 5%) */
  --grey-darker: #7f7f7f;     /* $grey_darker */
  --body: #4f4f4f;            /* $bodyFontColor — text and headings */
  --heading: #666666;         /* $headingColor — used here for quiet text */
  --white: #fff;
  --bodyfont: "Open Sans", sans-serif;
  --serif: serif;             /* paragraphs: the browser's serif (Times on a Mac). That is the look. */
  --focus: #1588b5;
}

/* ----------------------------------------------------------------- reset */

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

html {
  font-size: 1em;
  line-height: 1.4;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

body,
div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, figure,
ol, ul, li, dl, dt, dd, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, footer, header, nav, section, main {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

ul {
  list-style: none;
}

img,
video,
canvas,
svg,
iframe,
embed,
object {
  max-width: 100%;
}

img,
video,
canvas {
  height: auto;
  vertical-align: middle;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

pre {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

pre, code, kbd, samp {
  font-family: monospace, sans-serif;
}

strong, b {
  font-weight: bold;
}

small {
  font-size: 85%;
}

/* sup/sub that don't push lines apart */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }

button {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  font: inherit;
  font-family: var(--bodyfont);
  font-weight: 400;
  font-size: 1em;
  letter-spacing: 0;
  color: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

[hidden] {
  display: none !important;
}

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

body {
  font-family: var(--bodyfont);
  font-size: 14px;
  line-height: 1.7;
  color: var(--body);
  background-color: var(--white);
}

@media (min-width: 768px) {
  body { font-size: 16px; }
}

@media (min-width: 1200px) {
  body { font-size: 17px; }
}

h1 {
  font-size: 2em;
  line-height: 1.2;
  font-weight: bold;
}

h2 {
  font-size: 1.76em;
  line-height: 1.2;
  font-weight: bold;
}

h3 {
  font-size: 1.3em;
  line-height: 1.4;
  font-weight: bold;
}

h4 {
  font-size: 1.1em;
  line-height: 1.4;
  font-weight: bold;
}

h5,
h6 {
  font-size: 1.1em;
  font-weight: bold;
}

@media (min-width: 768px) {
  h1 { font-size: 2.5em; }
  h2 { font-size: 1.8em; }
  h3 { font-size: 1.5em; }
  h4 { font-size: 1.2em; }
}

p {
  font-family: var(--serif);
}

p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, table, figure {
  margin-bottom: 1.5rem;
}

a,
a:visited {
  color: var(--accent);
}

a:hover,
a:focus,
a:active {
  color: var(--body);
}

a.no-underline {
  text-decoration: none;
}

a.no-underline:hover,
a.no-underline:focus,
a.no-underline:active {
  text-decoration: underline;
}

a.font-colour,
a.font-colour:visited {
  color: var(--body);
}

/* Visible keyboard focus everywhere (the old theme had outline: 0 on buttons). */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Less movement for people who ask for it. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.page-content p,
.page-content ul,
.page-content ol,
.page-content blockquote {
  font-size: 1.2em;
  font-family: var(--serif);
}

.page-content ul {
  list-style: disc;
  margin-left: 1em;
}

.page-content ol {
  margin-left: 1em;
}

.page-content li > p,
.page-content li > ul,
.page-content li > ol {
  font-size: 1em;
}

.page-content blockquote {
  border-left: 3px solid var(--grey-dark);
  padding-left: 1em;
}

.greybg .page-content blockquote {
  border-left-color: #d9d9d9;
}

.page-content blockquote p {
  font-size: 1em;
}

.page-content img {
  display: block;
  margin: 0 auto;
}

.page-content table {
  width: 100%;
  border: 1px solid var(--grey);
}

.page-content tr {
  border-bottom: 1px solid var(--grey);
}

.page-content td,
.page-content th {
  padding: 0.5em;
  border-right: 1px solid var(--grey);
  vertical-align: middle;
}

.page-content hr {
  margin: 2rem 0;
}

.page-content iframe {
  display: block;
  max-width: 100%;
}

.page-content pre {
  font-size: 0.9em;
}

.page-content > :last-child,
.post_feed_item > :last-child {
  margin-bottom: 0;
}

/* Long URLs and words never push the page sideways. */
.page-content,
h1, h2, h3 {
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------- helpers */

.bodyfont { font-family: var(--bodyfont); }
.greybg { background-color: var(--grey); }
.aligncenter { text-align: center; }
.alignleft { text-align: left; }
.smaller-text { font-size: 0.85em; }
.position-relative { position: relative; }

.margin-bottom { margin-bottom: 2rem; }
.margin-bottom-double { margin-bottom: 4rem; }
.margin-bottom05 { margin-bottom: 0.5rem; }
.margin-bottom1 { margin-bottom: 1rem; }

@media (min-width: 1024px) {
  .margin-bottom { margin-bottom: 3rem; }
  .margin-bottom-double { margin-bottom: 6rem; }
}

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

/* --------------------------------------------------------------- layout */

.wrapper {
  width: 100%;
  overflow-x: hidden; /* the wall is wider than the page on purpose */
  overflow-x: clip;
}

.content-max-width {
  width: 100%;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}

.pad {
  padding: 2.5em 1.75em;
}

@media (min-width: 768px) {
  .pad { padding: 5em 3.5em; }
}

@media (min-width: 1200px) {
  .pad { padding: 7em 3.5em; }
}

.pad.pad--nopadtop { padding-top: 0; }
.pad.pad--nopadbottom { padding-bottom: 0; }

.main-pad-left--home {
  padding-top: 5em;
  padding-bottom: 0; /* the footer's own top padding is gap enough */
}

@media (min-width: 768px) {
  .main-pad-left--home { padding-top: 7em; }
}

@media (min-width: 1200px) {
  .main-pad-left { padding-left: 17.5em; }
  .main-pad-left--home { padding-top: 3em; }
}

main:focus {
  outline: none;
}

/* Grid: the bits of flexboxgrid the templates use (same class names as the theme) */

.row {
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: -1rem;
  margin-left: -1rem;
}

.col-xs-4,
.col-xs-12 {
  flex: 0 0 auto;
  padding-right: 1rem;
  padding-left: 1rem;
  min-width: 0;
}

.col-xs-4 { flex-basis: 33.333%; max-width: 33.333%; }
.col-xs-12 { flex-basis: 100%; max-width: 100%; }

@media (min-width: 600px) {
  .row {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

  .col-xs-4,
  .col-xs-12 {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

@media (min-width: 768px) {
  .col-md-3 { flex-basis: 25%; max-width: 25%; }
  .col-md-8 { flex-basis: 66.667%; max-width: 66.667%; }
  .col-md-10 { flex-basis: 83.333%; max-width: 83.333%; }
  .col-md-offset-0 { margin-left: 0; }
}

@media (min-width: 1024px) {
  .col-lg-2 { flex-basis: 16.667%; max-width: 16.667%; }
  .col-lg-7 { flex-basis: 58.333%; max-width: 58.333%; }
}

/* ------------------------------------------------------------ skip link */

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  border-radius: 3em;
  background: var(--body);
  color: var(--white);
  font-weight: bold;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus,
.skip-link:visited:focus {
  transform: none;
  color: var(--white);
}

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

.header {
  position: relative;
  z-index: 1;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: left;
  padding: 1em;
  height: 3em;
  font-size: 0.9em;
}

.nav__logo {
  display: block;
  width: 6em;
  flex-shrink: 0;
  position: relative;
  font-size: 0.9em;
  border-radius: 50%;
}

.nav__logo img {
  display: block;
  width: 100%;
}

.nav__logo__mainimage {
  border-radius: 50%;
}

.nav__logo__secondimage {
  border-radius: 50%;
  position: absolute;
  bottom: -0.5em;
  right: -0.5em;
  width: 2.5em;
  height: 2.5em;
  border: 2px solid var(--white);
}

.nav__logo .nav__logo__secondimage {
  width: 2.5em;
}

@media (min-width: 600px) {
  .nav__logo { font-size: 1em; }
}

@media (min-width: 768px) {
  .nav { flex-wrap: nowrap; }
  .nav__logo { font-size: 1em; }
}

@media (min-width: 1200px) {
  .nav__logo { font-size: 1.1em; }
}

/* Home: the big avatar, sitting to the left of the content (from _home.scss) */
@media (min-width: 768px) {
  .nav.nav--home {
    padding: 3em;
  }

  .nav.nav--home .nav__logo {
    font-size: 1.3em;
    position: relative;
    top: 3em;
  }
}

@media (min-width: 1200px) {
  .nav.nav--home .nav__logo {
    font-size: 2em;
    top: 6em;
  }
}

/* Every other page: the small avatar, top left */
.nav--page {
  height: auto;
}

.nav__logo--page {
  width: 4em;
  height: 4em;
}

.nav__logo--page .nav__logo__secondimage,
.nav__logo.nav__logo--page .nav__logo__secondimage {
  width: 2em;
  height: 2em;
}

/* -------------------------------------------------------------- buttons */

a.btn,
.btn,
button.btn {
  text-decoration: none;
  color: var(--body);
  padding: 0.8rem 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  border: 0;
  text-align: center;
  line-height: 1.2;
  font-family: var(--bodyfont);
  font-weight: bold;
  position: relative;
  border-radius: 3em;
  vertical-align: middle;
}

a.btn--grey,
.btn--grey,
button.btn--grey {
  background-color: var(--grey);
  color: var(--body);
}

a.btn--grey:hover,
a.btn--grey:focus,
a.btn--grey:active,
.btn--grey:hover,
.btn--grey:focus,
.btn--grey:active {
  background-color: var(--grey-dark);
  color: var(--body);
}

/* On a grey band a grey button needs to be a shade darker to show. */
.greybg .btn--grey {
  background-color: var(--grey-dark);
}

.greybg .btn--grey:hover,
.greybg .btn--grey:focus,
.greybg .btn--grey:active {
  background-color: #d8d8d8;
}

a.btn--accentColour1,
a.btn--accentColour1:visited,
.btn--accentColour1,
button.btn--accentColour1 {
  background-color: var(--accent);
  color: var(--white);
}

a.btn--accentColour1:hover,
a.btn--accentColour1:focus,
a.btn--accentColour1:active,
.btn--accentColour1:hover,
.btn--accentColour1:focus,
.btn--accentColour1:active {
  background-color: var(--accent-dark);
  color: var(--white);
}

a.btn.btn--thinner,
button.btn.btn--thinner {
  padding: 0.4em 0.9em;
}

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

/* One link per line, in the same serif and size as the paragraphs (.page-content p).
   The size goes on the words, not the footer, so its em padding still lines up with the page. */
.site-footer__nav ul,
.site-footer__copyright {
  font-family: var(--serif);
  font-size: 1.2em;
}

.site-footer__nav ul {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  line-height: 2;
}

.site-footer__copyright {
  margin: 0;
}

.site-footer__nav a,
.site-footer__nav a:visited {
  color: var(--body);
  text-decoration: none;
}

.site-footer__nav a:hover,
.site-footer__nav a:focus {
  color: var(--accent-dark);
  text-decoration: underline;
}

.site-footer__nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

/* ---------------------------------------------------------- page intro */

.page-intro__icon {
  display: block;
  width: 100%;
  border-radius: 50%;
  margin: 0 0 2em 0;
  max-width: 12em;
}

@media (min-width: 768px) {
  .page-intro__icon { margin: 0; }
}

/* ------------------------------------------------------ notes to self */

.post_feed_item h2 {
  margin-bottom: 1.5rem;
}

.notes-random {
  margin-top: -0.25rem;
}

.note-meta {
  font-size: 0.85em;
  color: var(--heading);
  margin-top: 1.5rem;
}

h1 + .note-meta {
  margin-top: 0;
}

.note-meta--draft {
  margin-bottom: 1.5rem;
}

.note-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.note-nav__next {
  margin-left: 0;
}

/* -------------------------------------------------- wall of creativity */

.wall-of-creativity__row {
  display: flex;
  flex-wrap: wrap;
}

.wall-of-creativity__row__item {
  display: block;
  margin: 4px;
  height: auto;
  background-color: var(--grey);
}

@media (prefers-reduced-motion: no-preference) {
  .wall-of-creativity__row__item {
    transition: opacity 0.25s ease;
  }
}

.wall-of-creativity__row__item.is-hidden {
  opacity: 0;
}

/* Keep the wall out of sight until wall.js has shuffled it, so it never visibly
   jumps from one order to another. If the script never runs, it appears anyway. */
.js .js-wall:not(.is-ready) {
  opacity: 0;
  animation: wall-fallback 0s linear 2s forwards;
}

@keyframes wall-fallback {
  to { opacity: 1; }
}

/* The brick pattern: rows overhang the page; every other row is shifted half a tile.
   The ranges must not overlap (.98), or two sets of nth-child margins stack and leave holes. */
@media (max-width: 767.98px) {
  .wall-of-creativity__row {
    margin-left: -25%;
    width: 150%;
  }

  .wall-of-creativity__row__item {
    width: calc(33.33% - 12px);
  }

  .wall-of-creativity__row__item:nth-child(5n + 4) {
    margin-left: calc(16.665% + 8px);
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .wall-of-creativity__row {
    margin-left: -16.66%;
    width: 132.5%;
  }

  .wall-of-creativity__row__item {
    width: calc(25% - 8px);
  }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
  .wall-of-creativity__row {
    margin-left: -12.5%;
    width: calc(125% - 8px);
  }

  .wall-of-creativity__row__item {
    width: calc(20% - 8px);
  }

  .wall-of-creativity__row__item:nth-child(9n + 6) {
    margin-left: calc(10% + 8px);
  }
}

@media (min-width: 1200px) {
  .wall-of-creativity__row {
    margin-left: calc(-10% + 1px);
    width: calc(120% - 4px);
  }

  .wall-of-creativity__row__item {
    width: calc(16.667% - 9px);
  }

  .wall-of-creativity__row__item:nth-child(11n + 7) {
    margin-left: calc(8.3% + 8px);
  }
}

.wall-of-creativity__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 1rem;
}

/* ------------------------------------------------------------ notes
   Footnotes as words you tap to open a small box. Markup (lib/sidenotes.js), inside a paragraph:
     <span class="fn">
       <button class="fn__ref" popovertarget="fn-x-1">
         <span class="fn__phrase">Time4Good</span><sup class="fn__num">1</sup>
       </button>
       <span class="fn__note" id="fn-x-1" popover>…the note… <button class="fn__close">×</button></span>
     </span>
   The browser opens and closes the box (a popover), so it works without JavaScript: the box
   shows in the middle of the screen. src/js/sidenotes.js adds .fn-js to <html> and moves an
   open box next to its words. */

.fn__ref {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0.15em;
  background: none;
  font: inherit;
  line-height: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  transition: none; /* the site-wide button transition would animate its size on resize */
}

.fn__phrase {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 0.09em;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.22em;
}

.fn__num {
  top: 0; /* raised by vertical-align alone, not also by the site-wide sup offset */
  margin-left: 0.1em;
  font-family: var(--bodyfont);
  font-size: 0.62em;
  font-weight: 700;
  line-height: 0;
  vertical-align: super;
  color: var(--accent);
}

.fn__ref:hover .fn__phrase,
.fn__ref.is-open .fn__phrase,
:root:not(.fn-js) .fn:has(.fn__note:popover-open) .fn__phrase {
  text-decoration-style: solid;
}

.fn__ref:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The box. These override the browser's own popover styles. */
.fn__note {
  box-sizing: border-box;
  width: max-content;
  max-width: min(21rem, calc(100vw - 2rem));
  margin: auto;
  padding: 0.8rem 2.4rem 0.85rem 1rem;
  overflow: visible;
  border: 1px solid var(--grey-dark);
  border-radius: 0.6rem;
  background-color: var(--white);
  box-shadow: 0 0.6rem 1.8rem rgba(0, 0, 0, 0.12), 0 0.1rem 0.35rem rgba(0, 0, 0, 0.06);
  font-family: var(--bodyfont);
  font-size: 0.9rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.55;
  color: var(--body);
  text-align: left;
  white-space: normal;
}

.fn__note::backdrop {
  background: transparent;
}

.fn__body {
  display: block;
}

.fn__p {
  display: block;
}

.fn__p + .fn__p {
  margin-top: 0.5em;
}

.fn__note a {
  color: #007f6c; /* the teal, darkened to 4.9:1 on white for the smaller text */
}

.fn__note a:hover,
.fn__note a:focus {
  color: var(--body);
}

.fn__close {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  font-family: var(--bodyfont);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--grey-darker);
  cursor: pointer;
}

.fn__close:hover {
  background-color: var(--grey);
  color: var(--body);
}

.fn__close:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 0;
}

/* With the script: placed next to its words, with a pointer towards them. */
.fn-js .fn__note {
  position: absolute;
  inset: auto;
  margin: 0;
  opacity: 0;
}

.fn-js .fn__note.is-placed {
  opacity: 1;
}

.fn-js .fn__note::before {
  content: "";
  position: absolute;
  top: -6px;
  left: var(--fn-pointer, 1.5rem);
  width: 10px;
  height: 10px;
  margin-left: -6px;
  border-top: 1px solid var(--grey-dark);
  border-left: 1px solid var(--grey-dark);
  background-color: var(--white);
  transform: rotate(45deg);
}

.fn-js .fn__note.is-above::before {
  top: auto;
  bottom: -6px;
  transform: rotate(225deg);
}

@media (prefers-reduced-motion: no-preference) {
  .fn-js .fn__note.is-placed {
    animation: fn-in 0.15s ease-out;
  }
}

@keyframes fn-in {
  from { opacity: 0; transform: translateY(-0.2rem); }
  to { opacity: 1; transform: none; }
}

/* Browsers without popovers (rare now): each note reads inline, in brackets. */
@supports not selector(:popover-open) {
  .fn__note,
  .fn__body,
  .fn__p {
    display: inline;
  }

  .fn__note {
    position: static;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
    font-size: 0.85em;
  }

  .fn__body::before { content: " ("; }
  .fn__body::after { content: ")"; }
  .fn__p + .fn__p::before { content: " "; }

  .fn__ref {
    cursor: auto;
  }

  .fn__close {
    display: none;
  }
}

/* --------------------------------------------------------------- 404 */

.not-found__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ------------------------------------------------------------- print */

@media print {
  .header,
  .site-footer__nav,
  .note-nav,
  .notes-random,
  .skip-link,
  .wall-of-creativity__buttons {
    display: none !important;
  }

  .greybg {
    background: none;
  }

  /* Notes print inline, in brackets, straight after their words. */
  .fn__note {
    display: inline !important;
    position: static !important;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
    font-size: 0.85em;
    opacity: 1 !important;
    animation: none !important;
  }

  .fn__body,
  .fn__p {
    display: inline;
  }

  .fn__body::before { content: " ("; }
  .fn__body::after { content: ")"; }
  .fn__p + .fn__p::before { content: " "; }

  .fn__note::before,
  .fn__close {
    display: none !important;
  }
}

/* ==========================================================================
   Habit tracker (/habits/)
   ========================================================================== */
.habit { margin: 0 0 3em; }
.habit h2 { margin-bottom: 0.2em; }
.page-content .habit__count {
  margin: 0;
  font-family: var(--bodyfont);
  font-weight: 800;
  font-size: 3em;
  line-height: 1.1;
  color: var(--accent);
}
.page-content .habit__sentence { margin: 0.1em 0 0.9em; }
.page-content .habit__facts,
.page-content .habit__legend {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5em;
  font-family: var(--bodyfont);
  font-size: 0.85em;
  color: var(--heading);
}
.habit__facts li { display: inline; }
.habit__facts li + li::before { content: " · "; }
.habit__grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, auto);
  grid-auto-columns: 1fr;
  gap: 2px;
}
.habit__day { display: block; aspect-ratio: 1; border-radius: 2px; background: var(--accent); }
.habit__day--future { background: transparent; }
.page-content .habit__legend { margin: 0.75em 0 0; font-size: 0.8em; }
.habit__legend li { display: inline-flex; align-items: center; gap: 0.4em; margin-right: 1.2em; }
.habit__legend .habit__day { width: 0.8em; height: 0.8em; }
@media (min-width: 768px) {
  .page-content .habit__count { font-size: 4em; }
  .habit__grid { gap: 3px; }
}

/* Productive days (/habits/): the same squares, green / amber / red. Amber and red were
   picked to stay apart from green for colour-blind readers; each square's title says its level. */
.habit__day--high { background: #3cc45f; }
.habit__day--medium { background: #e39400; }
.habit__day--low { background: #a61f1f; }
.habit__day--none { background: var(--white); }

/* Bar chart under a habit: days done per year / month / week (src/js/habit-chart.js). */
.hchart {
  --hc-grid: #ececec;
  --hc-baseline: #c4c4c4;
  position: relative;
  margin: 1.5em 0 0.75em;
  padding: 16px;
  border-radius: 12px;
  background: var(--white);
  font-family: var(--bodyfont);
}
/* It's drawn by JavaScript: without it, there's nothing to show. */
html:not(.js) .hchart { display: none; }
.hchart__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 0 14px;
}
.hchart__seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--grey);
}
.hchart__btn {
  min-width: 2.75em;
  padding: 0.4em 0.75em;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--heading);
  font: 600 0.85rem/1.2 var(--bodyfont);
  cursor: pointer;
}
.hchart__btn:hover { color: var(--body); background: var(--grey-dark); }
.hchart__btn[aria-pressed="true"],
.hchart__btn[aria-pressed="true"]:hover {
  background: var(--body);
  color: var(--white);
}
.hchart__btn:focus-visible,
.hchart__plot:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.hchart__plot { position: relative; border-radius: 4px; touch-action: pan-y; }
.hchart__svg { display: block; max-width: none; overflow: visible; }
.hchart__svg text { font-family: var(--bodyfont); }
.hchart__axis { font-size: 11px; fill: var(--heading); font-variant-numeric: tabular-nums; }
.hchart__axis--sub { fill: var(--grey-darker); }
.hchart__value { font-size: 11px; font-weight: 600; fill: var(--body); font-variant-numeric: tabular-nums; }
.hchart__value--in { fill: var(--white); }
.hchart__grid { stroke: var(--hc-grid); stroke-width: 1; }
.hchart__baseline { stroke: var(--hc-baseline); stroke-width: 1; }
.hchart__hover { fill: rgba(0, 0, 0, 0.045); }
.hchart__bar { fill: var(--accent); }

.hchart__tip {
  position: absolute;
  z-index: 2;
  min-width: 10em;
  max-width: 16em;
  padding: 0.6em 0.75em;
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06);
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--heading);
  pointer-events: none;
}
.hchart__tip[hidden] { display: none; }
.page-content .hchart__tip p { margin: 0; font-family: var(--bodyfont); font-size: inherit; line-height: inherit; }
.page-content .hchart__tip .hchart__tip-title { margin-bottom: 0.3em; font-weight: 700; color: var(--body); }
.page-content .hchart__tip .hchart__tip-row { padding-left: 16px; text-indent: -16px; }
.hchart__tip-row strong { color: var(--body); font-weight: 700; }
/* Line key: a short stroke of the bar colour. */
.hchart__tip-key { display: inline-block; width: 10px; height: 3px; margin-right: 6px; border-radius: 2px; vertical-align: middle; text-indent: 0; background: var(--hc-baseline); }
.hchart__tip-key--done { background: var(--accent); }
@media (max-width: 599px) {
  .hchart { margin-left: -6px; margin-right: -6px; padding: 12px; }
  .hchart__btn { min-width: 2.4em; padding: 0.4em 0.55em; }
}

/* Accent-coloured words */
.accent { color: var(--accent); }

/* Homepage title: the phrases start light grey, light up in the accent colour
   one after another, then settle to the normal heading colour. The last one
   stays lit. With "reduce motion" on, only the last one is coloured. */
.cycle {
  --cycle-waiting: #bdbdbd;
  animation: cycle-flash 1.4s ease-in-out both;
  animation-delay: calc(0.65s + var(--i) * 1.15s);
}
.cycle--last {
  animation-name: cycle-settle;
  animation-duration: 0.75s;
}
@keyframes cycle-flash {
  0% { color: var(--cycle-waiting); }
  35%, 65% { color: var(--accent); }
}
@keyframes cycle-settle {
  from { color: var(--cycle-waiting); }
  to { color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
  .cycle { animation: none; }
  .cycle--last { color: var(--accent); }
}

/* ------------------------------------------------------ photo pinwheel
   Four photos and a sticker (src/index.md). On phones: one wide photo, two
   portraits side by side, one wide. From 600px: a pinwheel, wide + narrow
   on top, narrow + wide underneath, with the sticker slapped on where they
   meet. From 1024px it reaches out of the text column into the empty space
   on the right.
     <figure class="pinwheel">
       <div class="pinwheel__photo"> <img> <img class="pinwheel__sticker"> </div>
       <img class="pinwheel__photo" style="--focus: 60% 50%"> ×3
     </figure>
   --focus is the part of a photo to keep when it's cropped (object-position). */

.pinwheel {
  --gap: 0.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  margin: 0 0 1.5rem;
}

.pinwheel > :first-child,
.pinwheel > :last-child {
  grid-column: 1 / -1;
}

.pinwheel__photo {
  position: relative;
  min-width: 0;
}

/* Every photo, including the one inside the first tile */
.page-content .pinwheel img:not(.pinwheel__sticker) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  border-radius: 0.4rem;
  background: var(--grey);
}

.page-content .pinwheel > :first-child img:not(.pinwheel__sticker),
.page-content .pinwheel > img:last-child {
  aspect-ratio: 4 / 3;
}

/* The sticker: centred on the bottom edge of the first photo, tilted. */
.page-content .pinwheel__sticker {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: calc(var(--gap) / -2);
  width: 40%;
  margin: 0;
  padding: 1.75%;
  background: var(--white);
  border-radius: 12%;
  box-shadow:
    0 0.15rem 0.3rem rgb(0 0 0 / 0.14),
    0 0.8rem 1.6rem rgb(0 0 0 / 0.2);
  translate: -50% 50%;
  rotate: -8deg;
  transition: rotate 0.3s, scale 0.3s;
  transition-timing-function: cubic-bezier(0.3, 1.5, 0.5, 1);
}

.page-content .pinwheel__sticker:hover {
  rotate: -2deg;
  scale: 1.06;
}

/* src/js/sticker.js: hidden until it comes into view, then slapped down. */
.pinwheel__sticker.is-waiting {
  opacity: 0;
}

.pinwheel__sticker.is-stuck {
  animation: sticker-on 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.25) backwards;
}

@keyframes sticker-on {
  from {
    opacity: 0;
    transform: rotate(-18deg) scale(1.45);
  }
  35% { opacity: 1; }
}

@media (min-width: 600px) {
  .pinwheel {
    /* minmax(0, …) so the photos' own heights can't stretch the square */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    aspect-ratio: 1;
  }

  .pinwheel > :nth-child(1) { grid-column: 1 / 5; }
  .pinwheel > :nth-child(2) { grid-column: 5 / 7; }
  .pinwheel > :nth-child(3) { grid-column: 1 / 3; }
  .pinwheel > :nth-child(4) { grid-column: 3 / 7; }

  /* The grid sets each photo's size now; the photos just fill their cell. */
  .page-content .pinwheel img:not(.pinwheel__sticker),
  .page-content .pinwheel > :first-child img:not(.pinwheel__sticker),
  .page-content .pinwheel > img:last-child {
    height: 100%;
    aspect-ratio: auto;
  }

  /* 75% along the first photo is the middle of the whole pinwheel. */
  .page-content .pinwheel__sticker {
    left: 75%;
    width: 34%;
  }
}

@media (min-width: 1024px) {
  /* Out of the 7/12 text column to 10/12 of the row (the columns are padded 1.5rem each side). */
  .pinwheel {
    width: min(calc((100% + 3rem) * 10 / 7 - 3rem), 56rem);
    --gap: 0.6rem;
  }
}

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

@media print {
  .pinwheel__sticker.is-waiting { opacity: 1; }
}