/* ==========================================================================
   MasseterClass
   1. Fonts
   2. Design tokens
   3. Page styles
   4. Hover, tap feedback and motion
   5. Not-found page (404.html)
   ========================================================================== */


/* 1. Fonts ------------------------------------------------------------------
   Self-hosted Latin subsets, so the page never contacts another server.
   Source Serif 4 (the Display cut) is the font on the guide covers.
   Licenses: fonts/OFL-source-serif-4.txt, fonts/OFL-inter.txt */

@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-display-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Stand-ins shown for the moment before the fonts arrive. Resized to match
   Source Serif 4 and Inter (measured in Chrome against the heading and body
   text), so text barely moves when the real fonts replace them. */

@font-face {
  font-family: "Source Serif 4 Fallback";
  src: local("Georgia Bold"), local("Georgia-Bold");
  font-weight: 600;
  size-adjust: 79.66%;
  ascent-override: 130.56%;
  descent-override: 42.68%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Source Serif 4 Fallback";
  src: local("Georgia");
  font-weight: 400;
  size-adjust: 91.11%;
  ascent-override: 114.15%;
  descent-override: 37.32%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107.48%;
  ascent-override: 90.14%;
  descent-override: 22.44%;
  line-gap-override: 0%;
}


/* 2. Design tokens ----------------------------------------------------------
   Brand colors: off-white #F2F0EF, black #000000, orange #FF7520.
   Contrast ratios are WCAG, measured against --color-bg unless noted. */

:root {
  color-scheme: only light;

  /* Color */
  --color-bg: #F2F0EF;              /* page, free-resource panel and cards */
  --color-ink: #000000;             /* text and strong borders, 18.5:1 */
  --color-ink-muted: #5C5958;       /* secondary text, 6.1:1 */
  --color-line: #D2CFCC;            /* hairlines, decorative */
  --color-accent: #FF7520;          /* orange fill and small details. Never text: 2.4:1 */
  --color-accent-pressed: #EB6714;  /* hover and tap; black text on it is 6.5:1 */
  --color-on-accent: var(--color-ink);  /* 7.8:1 on orange; white would be 2.7:1 */
  --color-paper: #FAF9F8;           /* the mini-cover's page */
  --color-focus: var(--color-ink);  /* keyboard focus ring, 18.5:1 */
  --color-selection: rgb(255 117 32 / 0.3);

  /* Type */
  --font-serif: "Source Serif 4", "Source Serif 4 Fallback", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --text-display: 2rem;        /* 32px  name (serif) */
  --text-title: 1.625rem;      /* 26px  free resource title (serif) */
  --text-name: 1.375rem;       /* 22px  guide names (serif) */
  --text-body: 1rem;           /* 16px  bio, description, buttons, price */
  --text-small: 0.9375rem;     /* 15px  guide points, pointer line */
  --text-fine: 0.8125rem;      /* 13px  labels, disclaimer */

  --leading-display: 1.1;
  --leading-title: 1.15;
  --leading-body: 1.5;

  --weight-regular: 400;
  --weight-semibold: 600;

  --tracking-display: -0.015em;  /* large serif text sits a little tighter */
  --tracking-label: 0.08em;      /* the small uppercase labels */

  /* Space, on a 4px grid */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-section: var(--space-10);  /* between the page's sections */

  /* Layout. The side margins, the panel padding and the mini-cover are in
     px, not rem: on a phone set to large text they stay put, leaving the
     extra room for the text itself. */
  --page-max: 37.5rem;        /* 600px column on phones and tablets */
  --page-gutter: 20px;        /* side padding */
  --page-top: 24px;           /* space above the logo on phones, so the free-resource
                                 button shows on the first screen in Safari */
  --panel-pad: 16px;          /* free-resource panel padding on phones */
  --avatar-size: 5.5rem;      /* 88px */
  --cover-width: 84px;        /* free resource mini-cover on phones */
  --control-height: 3.25rem;  /* 52px free resource button */
  --control-height-sm: 3rem;  /* 48px guide buttons */
  --tap-min: 2.75rem;         /* 44px, the minimum comfortable tap target */

  /* Shape */
  --radius: 0.5rem;           /* 8px buttons */
  --radius-card: 0.75rem;     /* 12px free-resource panel and guide cards */
  --radius-paper: 0.1875rem;  /* 3px mini-cover, so it reads as paper */
  --border-hairline: 1px solid var(--color-line);
  --border-strong: 1px solid var(--color-ink);
  --focus-ring: 2px solid var(--color-focus);
  --focus-offset: 3px;
  --shadow-paper: 0 0 0 1px var(--color-line), 0 1px 2px rgb(0 0 0 / 0.05), 0 8px 18px -6px rgb(0 0 0 / 0.16);
  --shadow-paper-lift: 0 0 0 1px var(--color-line), 0 2px 4px rgb(0 0 0 / 0.06), 0 14px 26px -8px rgb(0 0 0 / 0.22);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* entrances: quick start, soft landing */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);  /* state changes */
  --dur-press: 120ms;       /* tap feedback */
  --dur-hover: 180ms;       /* hover changes */
  --dur-enter: 560ms;       /* fade-in on load */
  --stagger: 80ms;          /* delay between sections fading in */
  --enter-distance: 8px;    /* how far each section rises while fading in */
  --enter-opacity: 0.4;     /* sections start 40% visible, so the first frame already shows the page
                               (starting at 0 hides it from Google's speed measurement) */
  --press-scale: 0.98;
  --press-scale-card: 0.99;  /* whole cards and the free-resource panel press in half as far */
  --press-delay: 60ms;       /* a finger that starts a scroll never triggers the press look */
  --cover-lift: -3px;        /* the mini-cover rises this far on hover */
}

/* Tablets and up: more air above the logo. */
@media (min-width: 640px) {
  :root {
    --page-top: var(--space-10);  /* 40px */
  }
}

/* Computers: a wider page, the guides side by side, larger headings. */
@media (min-width: 960px) {
  :root {
    --page-max: 60rem;        /* 960px */
    --text-display: 2.5rem;   /* 40px */
    --text-title: 2.125rem;   /* 34px */
    --text-name: 1.5rem;      /* 24px */
    --avatar-size: 6rem;      /* 96px */
    --space-section: var(--space-16);
  }
}

/* Small phones (under 360px wide) get slightly tighter side padding. */
@media (max-width: 359.98px) {
  :root {
    --page-gutter: 16px;
  }
}

/* Visitors who turn off motion get everything in place immediately. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 0ms;
    --dur-enter: 0ms;
    --stagger: 0ms;
    --enter-distance: 0px;
    --press-scale: 1;
    --press-scale-card: 1;
    --cover-lift: 0px;
  }
}


/* 3. Page styles ------------------------------------------------------------
   Mobile-first. One centered column on phones and tablets; on computers the
   column widens to 960px and the two guides sit side by side. The header is
   centered; the free resource is a bordered panel; the guides and the footer
   each open on a hairline. */

/* Base */

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

html {
  background: var(--color-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0 auto;
  max-width: calc(var(--page-max) + 2 * var(--page-gutter));
  padding:
    calc(var(--page-top) + env(safe-area-inset-top))
    max(var(--page-gutter), env(safe-area-inset-right))
    calc(var(--space-10) + env(safe-area-inset-bottom))
    max(var(--page-gutter), env(safe-area-inset-left));
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-synthesis: none;  /* never fake a bold or italic the fonts don't have */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul {
  margin: 0;
}

/* A safety net for very large text settings: a heading word too long for
   the screen breaks onto the next line instead of running off the side. */
h1, h2, h3 {
  overflow-wrap: break-word;
}

/* `hidden` means hidden for every element, including the inline SVG icon set */
[hidden] {
  display: none !important;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

picture {
  display: block;
}

[role="list"] {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

::selection {
  background: var(--color-selection);
  color: var(--color-ink);
}

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

/* Keeps a short phrase (like "6–12 weeks") on one line */
.nowrap {
  white-space: nowrap;
}

.icon {
  width: 1em;
  height: 1em;
  flex: none;
}

/* Header: logo, name, bio */

.profile {
  text-align: center;
}

.profile-avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  margin: 0 auto var(--space-4);
  border: var(--border-hairline);  /* defines the circle's edge against the off-white */
  border-radius: 50%;
  background: #fff;                /* the logo's own background, shown while it loads */
}

.profile-name {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.profile-bio {
  max-width: 30ch;
  margin: var(--space-2) auto 0;
  color: var(--color-ink-muted);
  text-wrap: balance;
}

/* Free resource: a bordered panel with the mini-cover, title, description
   and button. The whole panel is one tap target.
   Its layout follows the panel's own width measured in text sizes (a
   container query), so a phone set to large text gets the roomier
   stacked layout instead of a squeezed one. */

.free {
  margin-top: var(--space-section);
  container: free / inline-size;
}

/* Phones: the cover sits beside the label and title (or above them, when
   the text is set large); the description and the full-width button run
   underneath. */
.free-panel {
  position: relative;  /* anchors the full-panel tap area */
  display: grid;
  gap: var(--space-4);
  padding: var(--panel-pad);
  border: var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--color-bg);
}

.free-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.free-head {
  /* 8.5rem is about the width of "Conditions" in the title; when less room
     than that is left beside the cover, the title moves under it */
  flex: 1 1 8.5rem;
  min-width: 0;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--color-ink-muted);
  font-size: var(--text-fine);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  line-height: 1;
  text-transform: uppercase;
}

/* The orange dot before "Free resource" */
.eyebrow::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

.free-title {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: var(--text-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

/* No text-wrap: pretty here or on the guide points: iPhones apply it to the
   whole paragraph and pull lines in early, leaving a ragged gap on the right. */
.free-desc {
  color: var(--color-ink-muted);
}

.free-action {
  display: grid;
  gap: var(--space-3);
  text-align: center;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;  /* becomes visible in high-contrast modes */
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  text-decoration: none;
}

/* The whole panel is tappable: the button's invisible layer covers it. */
.free-panel .button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
}

/* The mini-cover: a small copy of the PDF's cover, drawn in SVG */
.free-cover {
  flex: none;
  display: block;
  width: var(--cover-width);
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-paper);
  background: var(--color-paper);
  box-shadow: var(--shadow-paper);
}

.free-cover text {
  fill: var(--color-ink);
}

.free-cover .cover-label {
  font-family: var(--font-sans);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 1.7px;
}

.free-cover .cover-title {
  font-family: var(--font-serif);
  font-size: 46px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.5px;
}

.free-cover .cover-sub {
  fill: var(--color-ink-muted);
  font-family: var(--font-serif);
  font-size: 14.5px;
  font-weight: var(--weight-regular);
}

.free-cover .cover-rule {
  stroke: var(--color-ink);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;  /* stays a crisp 1px at any size */
}

/* Tablets and computers (a panel at least 36 text-widths across, 576px at
   normal text size): the cover on the left, everything else stacked beside
   it and centered on it. */
@container free (min-width: 36em) {
  .free-panel {
    --cover-width: 184px;
    grid-template-columns: var(--cover-width) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas:
      "cover ."
      "cover head"
      "cover desc"
      "cover action"
      "cover .";
    gap: 0 var(--space-8);
    padding: var(--space-8);
  }

  /* The cover and the title join the panel's grid directly */
  .free-top {
    display: contents;
  }

  .free-cover {
    grid-area: cover;
    align-self: center;
  }

  .free-head {
    grid-area: head;
    margin-bottom: var(--space-3);
  }

  .free-desc {
    grid-area: desc;
    max-width: 36rem;
    margin-bottom: var(--space-6);
  }

  /* The button, sized to its label */
  .free-action {
    grid-area: action;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    text-align: left;
  }

  .free-action .button {
    min-width: 15rem;  /* 240px */
  }
}

/* Computers (896px+ at normal text size): a larger cover, more air. */
@container free (min-width: 56em) {
  .free-panel {
    --cover-width: 196px;
    column-gap: var(--space-10);
    padding: var(--space-10);
  }
}

/* "Ready to go further? See the guides" under the panel */
.pointer {
  margin-top: var(--space-3);
  color: var(--color-ink-muted);
  font-size: var(--text-small);
  text-align: center;
  text-wrap: balance;
}

.pointer a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap-min);  /* comfortable tap target */
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.pointer .icon {
  color: var(--color-accent);
  font-size: 0.875em;
}

/* The guides: label and cards. Each card: cover, name and price over a
   hairline, three points, button. */

.guides {
  margin-top: var(--space-section);
  scroll-margin-top: var(--space-6);  /* breathing room when "See the guides" jumps here */
}

/* "The guides", centered on a hairline */
.section-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  color: var(--color-ink-muted);
  font-size: var(--text-fine);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  line-height: 1;
  text-transform: uppercase;
}

.section-label::before,
.section-label::after {
  content: "";
  flex: 1;
  border-top: var(--border-hairline);
}

.guide-list {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 960px) {
  .guide-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Each list item stretches, so side-by-side cards share one height */
.guide-list > li {
  display: flex;
}

.guide {
  position: relative;  /* anchors the full-card tap area */
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  background: var(--color-bg);
}

.guide-cover {
  width: 100%;
  aspect-ratio: 16 / 9;  /* space is reserved before the image arrives */
}

.guide-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  /* 6.25% matches the left inset of the title printed on each cover,
     so the card text lines up with it at every width */
  padding: var(--space-4) 6.25% var(--space-6);
}

.guide-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-hairline);
}

.guide-name {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: var(--text-name);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.guide-price {
  font-weight: var(--weight-semibold);
  font-variant-numeric: lining-nums tabular-nums;
}

.guide-points {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-6);
  color: var(--color-ink-muted);
  font-size: var(--text-small);
}

/* Each point opens with its claim in black; the detail follows in gray. */
.guide-points strong {
  display: block;
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
  text-wrap: balance;
}

.guide-points li {
  position: relative;
  padding-left: var(--space-4);
}

/* The orange dot, centered on the first line */
.guide-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--leading-body) * 0.5em - 2.5px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
}

.guide-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height-sm);
  margin-top: auto;  /* side-by-side cards keep their buttons on one line */
  padding: var(--space-2) var(--space-4);
  border: var(--border-strong);
  border-radius: var(--radius);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  text-decoration: none;
}

/* The whole card is tappable: the link's invisible layer covers the card. */
.guide-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Footer: social icons on a hairline, like the section label; disclaimer */

.site-footer {
  margin-top: var(--space-section);
  text-align: center;
}

/* No gap: each icon's 44px tap area already leaves 11px around the drawing,
   close to the 12px between the section label and its hairlines. */
.social {
  display: flex;
  align-items: center;
  justify-content: center;
}

.social::before,
.social::after {
  content: "";
  flex: 1;
  border-top: var(--border-hairline);
}

.social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius);
  color: var(--color-ink-muted);
}

.social .icon {
  font-size: 1.375rem;  /* 22px */
}

.disclaimer {
  margin-top: var(--space-3);
  color: var(--color-ink-muted);
  font-size: var(--text-fine);
}


/* 4. Hover, tap feedback and motion -----------------------------------------
   Hover only on devices with a pointer that can hover (not phones, where
   hover states would stick after a tap). */

@media (hover: hover) {
  .free-panel:hover .button {
    background: var(--color-accent-pressed);
  }

  .free-panel:hover .free-cover {
    box-shadow: var(--shadow-paper-lift);
    transform: translateY(var(--cover-lift));
  }

  .pointer a:hover {
    text-decoration-color: currentColor;
  }

  .guide:hover {
    border-color: var(--color-ink);
  }

  .guide:hover .guide-link {
    background: var(--color-ink);
    color: var(--color-bg);
  }

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

.free-panel,
.free-cover,
.button,
.guide,
.guide-link,
.social a,
.pointer a {
  transition-property: background-color, border-color, box-shadow, color, text-decoration-color, transform;
  transition-duration: var(--dur-hover), var(--dur-hover), var(--dur-hover), var(--dur-hover), var(--dur-hover), var(--dur-press);
  transition-timing-function: var(--ease-standard);
}

.free-cover {
  transition-duration: var(--dur-hover), var(--dur-hover), var(--dur-hover), var(--dur-hover), var(--dur-hover), var(--dur-hover);
}

/* Tap feedback: a tap anywhere on the free-resource panel or a guide card
   presses the whole thing in slightly and darkens its button. The button
   itself never moves, so the tap area stays put under the finger.
   (Reduced motion keeps the color change and drops the movement.) */

.free-panel:has(.button:active) {
  transform: scale(var(--press-scale-card));
}

.free-panel:has(.button:active) .button {
  background: var(--color-accent-pressed);
}

.guide:has(.guide-link:active) {
  border-color: var(--color-ink);
  transform: scale(var(--press-scale-card));
}

.guide:has(.guide-link:active) .guide-link {
  background: var(--color-ink);
  color: var(--color-bg);
}

.social a:active {
  color: var(--color-ink);
  transform: scale(var(--press-scale));
}

.pointer a:active {
  text-decoration-color: currentColor;
}

/* The press look waits a beat before starting (release is instant), so
   touching a card or button to scroll the page doesn't make it flinch. */
.free-panel:has(.button:active),
.guide:has(.guide-link:active),
.social a:active {
  transition-delay: var(--press-delay);
}

/* With the script running, that feedback replaces the browser's gray tap flash. */
.js a {
  -webkit-tap-highlight-color: transparent;
}

/* Sections fade in (from 40% visible) and rise on load, one after another,
   and the "See the guides" jump scrolls smoothly. None of it runs for
   visitors whose device asks for reduced motion. */

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

  .profile,
  .free,
  .guides,
  .site-footer {
    animation: enter var(--dur-enter) var(--ease-out) both;
  }

  .free        { animation-delay: var(--stagger); }
  .guides      { animation-delay: calc(var(--stagger) * 2); }
  .site-footer { animation-delay: calc(var(--stagger) * 3); }
}

@keyframes enter {
  from {
    opacity: var(--enter-opacity);
    transform: translateY(var(--enter-distance));
  }
}


/* 5. Not-found page ---------------------------------------------------------
   404.html, shown for any address that doesn't exist. */

/* Sized to its label and centered, not stretched across the page */
.not-found .button {
  width: fit-content;
  min-width: 15rem;  /* 240px */
  margin: var(--space-8) auto 0;
}

@media (hover: hover) {
  .not-found .button:hover {
    background: var(--color-accent-pressed);
  }
}

.not-found .button:active {
  background: var(--color-accent-pressed);
}