@layer starter.reset, starter.base;

@layer starter.base {
  html {
    --base-font-size: 20px;
    --spacer: clamp(1lh, round(up, 8vi, 0.5lh), 3lh);
    --gap: clamp(0.5lh, round(up, 3vi, 0.25lh), 1lh);
    --half-gap: calc(var(--gap) / 2);
    --shim: calc(var(--gap) / 4);
    --tab-size: 2;
    --tab: calc(var(--tab-size, 2) * 1ch);
    --minor-second: calc(16/15);
    --major-second: calc(9/8);
    --minor-third: calc(6/5);
    --major-third: calc(5/4);
    --perfect-fourth: calc(4/3);
    --augmented-fourth: sqrt(2);
    --perfect-fifth: calc(3/2);
    --major-sixth: calc(5/3);
    --font-scale-ratio: var(--major-third);

    /* not fluid, just clamped by user preferences */
    font-size: clamp(1em, var(--base-font-size), 1.25em);
    font-size-adjust: from-font;
    interpolate-size: allow-keywords;
    line-height: 1.5;
    tab-size: var(--tab-size);
  }

  body {
    --button-padding-default: var(--shim) var(--half-gap);
    --banner-item-padding: var(--button-padding-default);
    --font-fluid: calc(var(--fluid-scale, 0) * 1vi);
    --font-fluid-base-factor: calc(var(--fluid-scale, 0) * 3px);
    --font-fluid-ratio: var(--perfect-fifth);
    --scale-medium: calc(1rem - var(--font-fluid-base-factor));
    --scale-small: calc(
      var(--scale-medium) * pow(var(--font-scale-ratio), -0.5)
    );
    --scale-large: calc(var(--scale-medium) * pow(var(--font-scale-ratio), 1));
    --scale-x-large: calc(
      var(--scale-medium) * pow(var(--font-scale-ratio), 2)
    );
    --scale-xx-large: calc(
      var(--scale-medium) * pow(var(--font-scale-ratio), 4)
    );
    --fluid-small: calc(var(--font-fluid) * pow(var(--font-fluid-ratio), -3));
    --fluid-medium: var(--font-fluid);
    --fluid-large: calc(var(--font-fluid) * pow(var(--font-fluid-ratio), 1));
    --fluid-x-large: calc(var(--font-fluid) * pow(var(--font-fluid-ratio), 2));
    --fluid-xx-large: calc(var(--font-fluid) * pow(var(--font-fluid-ratio), 4));
    --small: calc(var(--scale-small) + var(--fluid-small, 0px));
    --medium: calc(var(--scale-medium) + var(--fluid-medium, 0px));
    --large: calc(var(--scale-large) + var(--fluid-large, 0px));
    --x-large: calc(var(--scale-x-large) + var(--fluid-x-large, 0px));
    --xx-large: calc(var(--scale-xx-large) + var(--fluid-xx-large, 0px));

    box-sizing: border-box;
    display: grid;
    font-size: var(--medium);
    grid: 'banner' auto 'main' 1fr 'footer' auto / minmax(0, 1fr);
  }

  #main {
    container: main layout / inline-size;
    grid-area: main;
  }

  /* prose */
  h1,
  h2,
  h3 {
    line-height: 1.25;
    margin-block: 0.25rlh;
    text-wrap: balance;

    &:not([slide-canvas] *) {
      font-weight: var(--weight-bold);
    }
  }

  h3 {
    font-size: var(--large);
  }

  h2 {
    font-size: var(--x-large);
  }

  h1,
  h2:where(#page-title) {
    font-size: var(--xx-large);
  }

  strong {
    font-weight: var(--weight-bold);
  }

  small {
    font-size: var(--small);
  }

  figure {
    margin-inline: unset;
  }

  blockquote {
    margin-inline: unset;
  }

  p {
    margin-block: 0.5lh;
  }

  ol,
  ul {
    padding-inline-start: var(--list-marker-inset, var(--tab));

    &[role='list'] {
      --list-marker-inset: 0;

      list-style: none;
    }

    &[inline-list] {
      display: inline;

      > li {
        display: inline;
      }
    }
  }

  dd {
    margin-inline-start: var(--tab);
  }

  hr {
    border: 0 dotted;
    border-block-end-width: thin;
    inline-size: 100%;
    margin-block: 1.5lh;

    [slide-md] & {
      margin: unset;
    }
  }

  /* controls */
  a {
    &:any-link {
      --accent-fill: var(--accent-color);

      color: var(--link-state, var(--link-color, var(--action-color)));
      text-decoration: var(--link-decoration, underline);
      text-underline-offset: 0.2em;
      text-decoration-thickness: 1px;
      transition: text-decoration-thickness 200ms ease;
    }

    &:focus-visible,
    &:hover,
    &:active {
      --link-state: var(--accent-color);
      --accent-fill: var(--action-color);

      text-decoration: underline;
      text-decoration-thickness: 3px;
    }

    :is(h1, h2, h3) &:any-link {
      --link-decoration: none;

      color: inherit;
    }

    &[aria-current]:where(:not([aria-current='false'])) {
      --link-state: var(--active-color);
    }

    &[aria-current='true'] {
      text-decoration-style: dotted;
    }

    &[aria-current='page'] {
      text-decoration: none;
    }
  }

  button {
    background-color: var(
      --button-background-state,
      var(--button-background, transparent)
    );
    border-color: var(
      --button-border-state,
      var(--button-border, currentColor)
    );
    color: var(--button-color-state, var(--button-color, var(--text-color)));
    padding: var(--button-padding, var(--button-padding-default));

    &:focus-visible,
    &:hover,
    &:active {
      --button-background-state: var(--accent-color);
      --button-border-state: var(--accent-color);
      --button-color-state: var(--background-color);
    }

    &[aria-pressed='true'] {
      --button-background-state: var(--text-color);
      --button-color-state: var(--background-color);
    }
  }

  [popover] {
    border: medium solid var(--border-color);
    padding: var(--half-gap);

    &:not(:popover-open) {
      display: none !important;
    }
  }

  :target {
    scroll-margin: 1lh;
  }

  :focus-visible {
    outline: medium dashed var(--active-color);
    outline-offset: 4px;
  }

  form-field {
    display: grid;
    margin-block: 0.5lh;
  }

  label:not(input + label) {
    display: block;
  }

  input:where([type='text'], [type='email']),
  textarea {
    min-inline-size: 10ch;
    justify-self: stretch;
  }

  textarea {
    field-sizing: content;
    min-block-size: 4lh;
  }

  [is-switch] {
    --switch-thumb-pressed: var(--background-color);
    --switch-track-pressed: var(--accent-color);
  }

  /* tables */
  table {
    border-collapse: collapse;
    inline-size: 100%;
    font-variant-numeric: tabular-nums;
  }

  th,
  td {
    border: thin dotted;
    text-align: left;
    padding: 0.25lh 1ch;
    vertical-align: top;
  }

  /* visibility */
  [visually-hidden='skip-links']:focus-within {
    background: Canvas;
    border: thin solid grey;
    color: CanvasText;
    inset: 0 auto auto 0;
    list-style: none;
    margin: unset;
    padding: 1em;
    position: fixed;
    z-index: 10;
  }
}

@layer starter.reset {
  html {
    block-size: 100%;
    color-scheme: light dark;
    overflow-wrap: break-word;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  body {
    margin: unset;
    min-block-size: 100%;
  }

  pre {
    /* old syntax */
    white-space: pre-wrap;

    /* new syntax */
    white-space: preserve wrap;
  }

  /* media */
  picture {
    display: contents;
  }

  source {
    display: none;
  }

  iframe {
    border: none;
  }

  img,
  video,
  iframe {
    display: block;
    block-size: auto;
    max-inline-size: 100%;
  }

  svg {
    fill: currentColor;
  }

  /* controls */
  summary {
    color: var(--open-summary-color, var(--action-color));
    max-inline-size: max-content;

    &:focus-visible,
    &:hover,
    &:active {
      --open-summary-color: var(--active-color);
    }

    [open] > & {
      margin-block-end: 1lh;
    }
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  button,
  input:where([type='submit'], [type='reset'], [type='button']) {
    background: CanvasText;
    color: Canvas;
    border: thin solid grey;
  }

  [aria-expanded='true'],
  [aria-pressed='true'] {
    background: SelectedItem;
    border-color: CanvasText;
    color: SelectedItemText;
  }

  /* visibility */
  /* stylelint-disable declaration-no-important */
  [hidden] {
    display: none !important;
  }

  /* Auth-gated visibility: <html data-loggedin> is set by store.ts from $auth
     (the Clerk session). data-auth="show" is visible only when signed in;
     data-auth="hide" is hidden when signed in. */
  [data-loggedin='false'] [data-auth='show'],
  [data-loggedin='true'] [data-auth='hide'] {
    display: none !important;
  }

  /* Purchase-gated visibility: <html data-purchased> is set by store.ts from
     $access (the courses the signed-in user has paid for). data-access='show'
     is a buyer-only variant (e.g. the "Go to the course" CTA);
     data-access='hide' is the not-purchased variant ("Register now", the price
     banner). The default (data-purchased='false', shipped in the HTML) is the
     not-purchased view, so a paid buyer never flashes both CTAs before the
     access sync resolves. */
  [data-purchased='false'] [data-access='show'],
  [data-purchased='true'] [data-access='hide'] {
    display: none !important;
  }

  visually-hidden,
  [visually-hidden]:not(:focus-within, :active) {
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }

  /* stylelint-enable declaration-no-important */
}

@layer theme {
  @view-transition {
    navigation: auto;
  }

  html {
    /* brand colors */
    --brand-blue: hsl(195deg 52% 31%);
    --brand-orange: hsl(24deg 100% 62%);
    --brand-pink: hsl(330deg 100% 45%);
    --neutral: hsl(195deg 10% 50%);

    /* generic */
    --color-light: hsl(200deg 12% 95.098%);
    --color-dark: hsl(200deg 12% 4.902%);
    --color-light-callout: hsl(193deg 28% 87%);
    --color-dark-callout: hsl(192.59deg 23.914% 12%);
    --color-light-accent: hsl(337.28deg 98.75% 79.203%);
    --color-dark-accent: hsl(330.2deg 67.742% 42.549%);
    --color-light-action: hsl(196.57deg 76.878% 80.38%);
    --color-dark-action: hsl(195deg 53% 27%);
    --color-light-active: hsl(330deg 52.857% 75%);
    --color-dark-active: hsl(330deg 52.857% 35%);
    --color-light-feature: hsl(194.07deg 82.555% 45.938%);
    --color-dark-feature: hsl(193.69deg 99.455% 22.7%);

    /* background colors */
    --background-color: var(--color-light, Canvas);
    --callout-color: var(--color-light-callout);
    --background-accent: var(--color-light-accent, AccentColor);
    --background-feature: var(--color-light-feature, AccentColor);

    /* content colors */
    --text-color: var(--color-dark, CanvasText);
    --accent-color: var(--color-dark-accent, AccentColor);
    --border-color: var(--neutral, gray);
    --shadow-color: black;
    --action-color: var(--color-dark-action, LinkText);
    --active-color: var(--color-dark-active, ActiveText);
    --feature-color: var(--color-dark-feature, AccentColor);
    --feature-gradient: linear-gradient(
      24deg in oklch,
      var(--accent-color),
      var(--feature-color)
    );
    --oddbird-title-slide-background:
      radial-gradient(
        oklch(from var(--color-dark) l c h / 50%),
        var(--shadow-color)
      ),
      linear-gradient(
        to bottom right,
        var(--color-dark-feature),
        var(--color-dark-accent) 49% 50%,
        transparent 50%
      ),
      radial-gradient(
        circle at 100% 100%,
        var(--color-dark-feature),
        var(--shadow-color)
      );

    color-scheme: light;
    filter: brightness(var(--filter-brightness, 1))
      contrast(var(--filter-contrast, 1));
    font-family: 'Frigga Variable', Georgia, serif;
  }

  html,
  [color-scheme] {
    color-scheme: light dark;
    background-color: var(--background-color);
    color: var(--text-color);

    @supports (color: light-dark(pink, teal)) {
      /* background colors */
      --background-color: light-dark(
        var(--color-light, Canvas),
        var(--color-dark, Canvas)
      );
      --background-accent: light-dark(
        var(--color-light-accent, Canvas),
        var(--color-dark-accent, Canvas)
      );
      --background-feature: light-dark(
        var(--color-light-feature, Canvas),
        var(--color-dark-feature, Canvas)
      );
      --callout-color: light-dark(
        var(--color-light-callout),
        var(--color-dark-callout)
      );

      /* content colors */
      --text-color: light-dark(
        var(--color-dark, CanvasText),
        var(--color-light, CanvasText)
      );
      --accent-color: light-dark(
        var(--color-dark-accent, AccentColor),
        var(--color-light-accent, AccentColor)
      );
      --action-color: light-dark(
        var(--color-dark-action, LinkText),
        var(--color-light-action, LinkText)
      );
      --active-color: light-dark(
        var(--color-dark-active, ActiveText),
        var(--color-light-active, ActiveText)
      );
      --feature-color: light-dark(
        var(--color-dark-feature, AccentColor),
        var(--color-light-feature, AccentColor)
      );
    }
  }

  [color-scheme='light'] {
    color-scheme: light;
  }

  [color-scheme='dark'] {
    color-scheme: dark;
  }
}
@layer patterns {
  @property --column {
    syntax: '*';
    initial-value: main;
    inherits: false;
  }

  body {
    --line-length: 60ch;
    --content-grid: [full-start] minmax(var(--gap), 1fr) [pull-start]
      minmax(0, var(--pull-size, 0)) [main-start]
      minmax(0, min(100%, var(--line-length, 60ch))) [main-end]
      minmax(0, var(--pull-size, 0)) [pull-end] minmax(var(--gap), 1fr)
      [full-end];

    @media (width > 45em) {
      --pull-size: min(5vi, 10ch);
    }
  }

  layout-container,
  [layout-container] {
    container: layout / inline-size;
  }

  [page-layout~='prose'],
  [prose-block] {
    h1,
    h2:where(#page-title) {
      font-weight: var(--weight-heavy);
    }

    :is(h1, h2, h3):not(call-out *) {
      background: var(--feature-gradient);
      color: var(--background-color);
      max-inline-size: max-content;

      @supports (background-clip: text) {
        background-clip: text;
        color: transparent;
      }
    }
  }

  [page-layout~='content-grid'] {
    align-self: start;
    display: grid;
    grid-template-columns: var(--content-grid);
    margin-block-end: var(--spacer);
    padding-block: var(--gap);
    row-gap: var(--content-grid-gap, var(--gap));

    [grid-full] {
      --column: full;
    }

    [grid-full='subgrid'] {
      display: grid;
      grid-template-columns: inherit;
      grid-template-columns: subgrid;
    }

    [grid-pull] {
      --column: pull;
    }

    > *,
    [grid-full='subgrid'] > * {
      grid-column: var(--column, main);
      margin-block: unset;

      > :first-child {
        margin-block-start: unset;
      }

      > :last-child {
        margin-block-end: unset;
      }
    }
  }

  [page-layout~='twoup'] {
    display: grid;
    gap: var(--gap) var(--spacer);
    padding: var(--gap);
    place-content: center;

    @media (width > 55em) {
      grid-template-columns: minmax(min-content, 40ch) minmax(20ch, 40ch);
    }
  }

  page-summary {
    display: block;
    font-size: var(--large);
  }

  by-line {
    display: block;
    text-wrap: balance;
  }

  call-out {
    background-color: var(--callout-color);
    display: block;
    padding: var(--gap);

    &:not([no-border]) {
      border: medium solid var(--feature-color);
      border-image: var(--feature-gradient) 1;
    }

    &[no-border='inline'] {
      border-block: medium solid var(--feature-color);
      border-image: var(--feature-gradient) 1;
    }

    > :first-child {
      margin-block-start: unset;
    }

    > :last-child {
      margin-block-end: unset;
    }
  }

  [line-length] {
    max-inline-size: var(--line-length, 60ch);
  }

  a[link-action] {
    --link-color: var(--text-color);

    border: thin solid;
    display: inline-block;
    padding: var(--button-padding-default);
  }

  [data-icon] {
    block-size: 1lh;
    inline-size: auto;
  }

  [data-svg='signature'] {
    block-size: 3lh;
    display: block;
    inline-size: auto;
  }

  grid-block {
    --column: full;

    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(var(--item-size, 20ch), 100%), 1fr)
    );
    padding: var(--grid-block-padding, 0 var(--gap));
    place-content: center;
  }

  [image-crop] {
    overflow: clip;
    object-fit: cover;
  }

  [image-crop='circle'] {
    aspect-ratio: 1;
    clip-path: circle();
  }

  media-block,
  [media-block] {
    container: media-block / inline-size;
    display: grid;
    gap: var(--gap);
    grid:
      'image' auto
      'content' auto
      / minmax(0, 1fr);
    justify-self: stretch;

    @container (inline-size > 35ch) {
      grid: 'image content' auto / var(--media-size, minmax(150px, 1fr)) minmax(
          min-content,
          4fr
        );
    }
  }

  [media-image] {
    grid-area: image;
    place-self: start center;
    max-inline-size: 100%;
  }

  media-content {
    grid-area: content;

    > :first-child {
      margin-block-start: unset;
    }

    > :last-child {
      margin-block-end: unset;
    }
  }

  button[link-like],
  button[popovertarget] {
    --button-background-state: transparent;
    --button-border-state: transparent;
    --button-color: var(--action-color);

    text-align: start;

    &:focus-visible,
    &:hover,
    &:active {
      --button-color-state: var(--accent-color);
    }
  }
}
/**
 * CSS for Frigga Variable Regular
 *
 * Generated by Wakamai Fondue - https://wakamaifondue.com
 * by Roel Nieskens/PixelAmbacht - https://pixelambacht.nl
 */

@font-face {
  font-family: 'Frigga Variable';
  src: url('/fonts/FriggaVariable.woff2');
  font-weight: 30 215;
  font-style: normal;
}

@font-face {
  font-family: 'Frigga Variable';
  src: url('/fonts/FriggaVariable-Italic.woff2');
  font-weight: 30 215;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Georgia;
  src: local('Georgia');
  size-adjust: 105%;
}

/**
 * OpenType Layout Features
 */
@layer tools {
  html {
    /* Initial values for the variable axes */
    --wght: var(--weight-deck);

    font-weight: var(--wght);

    /* Initial values for the layout features */
    --aalt: off;
    --c2sc: off;
    --case: off;
    --dnom: off;
    --numr: off;
    --salt: off;
    --sinf: off;
    --ss01: off;
    --ss02: off;
    --ss03: off;
    --ss04: off;
    --ss05: off;
    --ss06: off;
    --ss07: off;
    --swsh: off;
    --weight-thin: 30;
    --weight-light: 60;
    --weight-normal: 90;
    --weight-deck: 100;
    --weight-bold: 135;
    --weight-extra-bold: 160;
    --weight-black: 185;
    --weight-heavy: 215;
  }

  /* Classes to apply the layout features */
  .access-all-alternates {
    --aalt: 1; /* Use value 1 to 9 for all alternates */
  }

  .small-capitals-from-capitals {
    --c2sc: on;
  }

  .case-sensitive-forms {
    --case: on;
  }

  .discretionary-ligatures {
    font-variant-ligatures: discretionary-ligatures;
  }

  .denominators {
    --dnom: on;
  }

  .fractions {
    font-variant-numeric: diagonal-fractions;
  }

  .historical-ligatures {
    font-variant-ligatures: historical-ligatures;
  }

  .lining-figures {
    font-variant-numeric: lining-nums;
  }

  .numerators {
    --numr: on;
  }

  .oldstyle-figures {
    font-variant-numeric: oldstyle-nums;
  }

  .ordinals {
    font-variant-numeric: ordinal;
  }

  .proportional-figures {
    font-variant-numeric: proportional-nums;
  }

  .stylistic-alternates {
    --salt: on;
  }

  .scientific-inferiors {
    --sinf: on;
  }

  .small-capitals {
    font-variant-caps: small-caps;
  }

  .alternative-capitals {
    --ss01: on;
  }

  .circled-numbers {
    --ss02: on;
  }

  .alternative-arrows {
    --ss03: on;
  }

  .alternative-guillemet {
    --ss04: on;
  }

  .frames-set-1 {
    --ss05: on;
  }

  .frames-set-2 {
    --ss06: on;
  }

  .ornaments {
    --ss07: on;
  }

  .subscript {
    font-variant-position: sub;
  }

  .superscript {
    font-variant-position: super;
  }

  .swash {
    --swsh: on;
  }

  .tabular-figures {
    font-variant-numeric: tabular-nums;
  }

  .slashed-zero {
    font-variant-numeric: slashed-zero;
  }

  /* Apply the layout features set by the classes */
  .access-all-alternates,
  .small-capitals-from-capitals,
  .case-sensitive-forms,
  .denominators,
  .numerators,
  .stylistic-alternates,
  .scientific-inferiors,
  .alternative-capitals,
  .circled-numbers,
  .alternative-arrows,
  .alternative-guillemet,
  .frames-set-1,
  .frames-set-2,
  .ornaments,
  .swash {
    font-feature-settings:
      'aalt' var(--aalt),
      'c2sc' var(--c2sc),
      'case' var(--case),
      'dnom' var(--dnom),
      'numr' var(--numr),
      'salt' var(--salt),
      'sinf' var(--sinf),
      'ss01' var(--ss01),
      'ss02' var(--ss02),
      'ss03' var(--ss03),
      'ss04' var(--ss04),
      'ss05' var(--ss05),
      'ss06' var(--ss06),
      'ss07' var(--ss07),
      'swsh' var(--swsh);
  }

  /**
   * Variable axes
   */

  /* Classes to apply the variable instances */
  .thin {
    --wght: 30;
  }

  .extralight {
    --wght: 43;
  }

  .light {
    --wght: 60;
  }

  .regular {
    --wght: 90;
  }

  .deck {
    --wght: 100;
  }

  .medium {
    --wght: 120;
  }

  .bold {
    --wght: 135;
  }

  .extrabold {
    --wght: 160;
  }

  .black {
    --wght: 185;
  }

  .heavy {
    --wght: 215;
  }

  /* Apply the variable axes set by the classes */
  .thin,
  .extralight,
  .light,
  .regular,
  .deck,
  .medium,
  .bold,
  .extrabold,
  .black,
  .heavy {
    font-weight: var(--wght);
  }

  strong:not([slide-canvas] *) {
    font-weight: var(--weight-bold);
  }
}
body { --fluid-scale: 0.3;