@layer tokens {
  /*
   * Configuration - TO DO
  */
    :root {

        --reset-line-height-body: 1.6;
        --reset-line-height-heading: 1.1;
        --reset-color-scheme: light dark;
        --reset-textarea-min-height: 10em;
        --reset-scroll-margin: 5ex;


      --gutter: var(--space-s-m, 1.5rem);
      --flow-space: 1em;

      --heading-font: "Noto Serif Display", Georgia, serif;
      --heading-weight: 300;
      --heading-style: italic;
      --heading-line-height: 1.1;

      --body-font: Karla, Arial, sans-serif;
      --body-weight: 400;
      --body-line-height: 1.6;

      --mono-font: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    }

  /*
   * Fluid Type - @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
  */
    :root {
      --step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
      --step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
      --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
      --step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
      --step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
      --step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
      --step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
      --step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
    }

  /*
   * Fluid Spacing - @link https://utopia.fyi/space/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
  */
    :root {
      --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
      --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
      --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
      --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
      --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
      --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
      --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
      --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
      --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
      /* One-up pairs */
      --space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
      --space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
      --space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
      --space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
      --space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
      --space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
      --space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
      --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);
      /* Custom pairs */
      --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);
    }

}

@layer base {
  /*
   * font face for locally hosted fonts
  */

  /* noto-serif-display-300 - latin */
  @font-face {
    font-display: swap;
    font-family: 'Noto Serif Display';
    font-style: normal;
    font-weight: 300;
    src: url(/assets/fonts/NotoSerifDisplay-Italic.woff2) format('woff2');
  }

  /* karla-regular - latin */
  @font-face {
    font-display: swap;
    font-family: 'Karla';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/fonts/Karla-Regular.woff2') format('woff2');
  }

  @font-face {
    font-family: "JetBrains Mono";
    src: url("/assets/fonts/jetbrains-mono-variable.woff2") format("woff2-variations");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
  }

}

@layer reset {
  /*
   * reset
  */

  /* Box-sizing: everyone agrees on this one.
     Source: Piccalilli / Josh Comeau / Jake Lazaroff */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Prevent iOS/Android font-size inflation on orientation change.
     Source: Piccalilli (via Kilian Valkhof) */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  /* Auto light/dark form controls, scrollbars, etc.
     Source: mayank99/reset.css */
  html {
    color-scheme: var(--reset-color-scheme);
  }

  /* Remove default margin from (almost) everything, keeping <dialog>'s
     centering margin intact.
     Source: Josh Comeau (dialog exception added Dec 2025) */
  :where(*:not(dialog)) {
    margin: 0;
  }

  /* Kerning & font smoothing for crisper type.
     Source: Mike Mai */
  *,
  *::before,
  *::after {
    font-kerning: normal;
    font-feature-settings: "kern";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Opt in to animating to/from `auto` / `fit-content` etc.
     Gated behind reduced-motion so it never surprises anyone.
     Source: Josh Comeau / Jake Lazaroff */
  @media (prefers-reduced-motion: no-preference) {
    html {
      interpolate-size: allow-keywords;
      scroll-behavior: smooth; /* Source: Mike Mai */
    }
  }

  /* Core body defaults: legible line-height, sensible min-height.
     Source: Piccalilli */
  body {
    min-height: 100vh;
    line-height: var(--reset-line-height-body);
  }

  /* Shorter line-height for headings & interactive elements so large type
     doesn't create huge gaps.
     Source: Piccalilli */
  :where(h1, h2, h3, h4, .h1-text, .h2-text, .h3-text, .h4-text, button, input, label) {
    line-height: var(--reset-line-height-heading);
  }

  /* Remove default margin in favour of better control in authored CSS
     Source: Piccalilli */
  body, h1, h2, h3, h4, h5, h6, .h1-text, .h2-text, .h3-text, .h4-text, p, figure, blockquote, dl, dd {
    margin-block-end: 0;
  }

  /* Balance heading wraps, prettify paragraph wraps.
     Source: Piccalilli (balance) + Josh Comeau (pretty added Oct 2024) */
  :where(h1, h2, h3, h4, .h1-text, .h2-text, .h3-text, .h4-text) {
    text-wrap: balance;
  }
  p {
    text-wrap: pretty;
  }

  /* Prevent long unbroken strings (URLs, tokens) from blowing out layout.
     Source: Josh Comeau */
  :where(p, h1, h2, h3, h4, .h1-text, .h2-text, .h3-text, .h4-text) {
    overflow-wrap: break-word;
  }

  /* Unstyled <a> keeps sane decoration behaviour and inherits color.
     Source: Piccalilli */
  a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
  }

  /* Media elements: block-level, never overflow their container.
     Logical properties + broader element list than the original.
     Source: Josh Comeau (element list) + Mike Mai (logical properties) */
  :where(img, picture, video, canvas, svg) {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  /* Form controls inherit typography instead of using tiny system fonts
     (also fixes iOS auto-zoom-on-focus).
     Source: Piccalilli + Jake Lazaroff (extra inherited properties) */
  :where(input, button, textarea, select) {
    font: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    color: currentColor;
  }

  /* Show a pointer on anything clickable — easy to forget when no hover
     style has been designed yet.
     Source: Mike Mai */
  :where(
    input[type="checkbox"],
    input[type="radio"],
    select,
    label,
    button
  ) {
    cursor: pointer;
  }

  /* Windows High Contrast Mode fallback: buttons need a visible edge.
     Source: Mike Mai */
  @media (forced-colors: active) {
    button {
      border: 1px solid;
    }
  }

  /* Textareas without an explicit rows attribute shouldn't be tiny. */
  textarea:not([rows]) {
    min-height: var(--reset-textarea-min-height);
  }

  /* Lists that opt out of semantics via role="list" also lose default
     bullets/numbers. Reset back with `revert` if a role is later added.
     Source: Piccalilli + Jake Lazaroff (revert nuance) */
  :where(ul, ol)[role="list"] {
    list-style: none;
  }

  /* Give anchored/scrolled-to targets a bit of breathing room. */
  :target {
    scroll-margin-block: var(--reset-scroll-margin);
  }

  /* Root stacking context so modals/tooltips never lose a z-index battle.
     Adjust the selector to match your framework's mount node.
     Source: Josh Comeau */
  :where(#root, #__next) {
    isolation: isolate;
  }


}

/*
 * accessibility
*/

/* Standard modern visually-hidden pattern */

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


@layer base {
  /*
   * typography
  */

  body {
    text-rendering: optimizeSpeed;
    font-family: var(--body-font);
    font-size: var(--step-0);
    font-weight: var(--body-weight);
    line-height: var(--body-line-height);
  }

  h1, h2, h3, h4, h5, h6, .xl-text, .h1-text, .h2-text, .h3-text, .h4-text {
    color: var(--color-text);
    font-family: var(--heading-font);
    font-weight: var(--heading-weight);
    font-style:  var(--heading-style);
    line-height: var(--heading-line-height);
  }

      .xl-text { font-size: var(--step-5); }
  h1, .h1-text { font-size: var(--step-4); }
  h2, .h2-text { font-size: var(--step-3); }
  h3, .h3-text { font-size: var(--step-2); }
  h4, .h4-text { font-size: var(--step-1); }

  :where(pre, code, kbd, samp, .mono) {
    font-family: var(--mono-font);
    font-weight: 400;
    color: var(--color-text);
    background-color: var(--color-surface2, yellow);
    border: 1px solid var(--color-border, blue);
  }

  :where(strong) { font-weight: 700; }

  :where(small) { font-size: var(--step--1); }

  :where(em) { font-style: italic; }

  .muted-text {
    color: magenta;
    x-font-weight: 400;
  }

  /* proposition (promotion) text, the first paragraph after the <h1> */
  h1+p, .prop-text  {
    font-size: var(--step-2);
    x-font-weight: 500;
    color: magenta;
  }

  /* the last paragraph in a section */
  section p:last-of-type {
    padding-bottom: var(--space-l);
  }

}

/*
 * links
*/


/**
 * wrapper - https://piccalil.li/blog/use-css-clamp-to-create-a-more-flexible-wrapper-utility/
 * Sets a max width, adds a consistent gutter and horizontally centers the contents
 * For "clamp" see https://web.dev/articles/min-max-clamp
 * Alternate:   max-width: clamp(16rem, var(--wrapper-max-width, 100vw), 80rem);

 */
.wrapper {
  --gutter: var(--space-s-m, 1.5rem);

  width: 90vw;
  width: clamp(16rem, 90vw, 70rem);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;

  outline: 2px solid magenta; /* testing */
  outline-offset: 2px;        /* testing */

}

/**
 * flow - https://piccalil.li/blog/flow-utility/
 *
*/
.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}




/**
 * prose - https://piccalil.li/blog/my-favourite-3-lines-of-css/
 *       - https://github.com/Set-Creative-Studio/cube-boilerplate/tree/main/src/css
*/
.prose {
  --flow-space: var(--space-m, 1em);
}