*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
          text-size-adjust: none;
}
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
body {
  min-height: 100vh;
  line-height: 1.5;
}
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.25;
}
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  color: currentColor;
}
img,
picture {
  max-width: 100%;
  display: block;
}
input,
button,
textarea,
select {
  font: inherit;
}
textarea:not([rows]) {
  min-height: 10em;
}
:target {
  scroll-margin-block: 5ex;
}
:is(ul, ol)[class] {
  list-style-type: "";
  padding: 0;
}
:root {
  --color-primary: rgb(241, 114, 51);

  --color-bg: hsl(39 93% 99% / 1);
  --color-bg-highlight: hsl(39 93% 90% / 1);

  --color-text: #352621;
  --color-text-highlight: hsl(19.89deg 52.75% 47.03%);

  --color-border: var(--color-primary);
  --font-base: rooney-web, serif;
  --font-heading: rooney-web, serif;
  --gutter: var(--space-s-l);
  --line-height: 1.6;
  --measure: 60ch;
  --radius: 8px;
  --weight-heading: 500;--step-5: clamp(1.9125rem, 0.8189rem + 5.4679vi, 4.5097rem);--step-4: clamp(1.7386rem, 0.9872rem + 3.757vi, 3.5232rem);--step-3: clamp(1.5806rem, 1.0871rem + 2.4673vi, 2.7525rem);--step-2: clamp(1.4369rem, 1.1364rem + 1.5022vi, 2.1504rem);--step-1: clamp(1.3063rem, 1.1489rem + 0.7868vi, 1.68rem);--step-0: clamp(1.1875rem, 1.1349rem + 0.2632vi, 1.3125rem);--step--1: clamp(1.0254rem, 1.1023rem + -0.114vi, 1.0795rem);--step--2: clamp(0.8011rem, 1.0573rem + -0.3796vi, 0.9814rem);--space-2xs: clamp(0.4375rem, 0.3849rem + 0.2632vi, 0.5625rem);--space-xs: clamp(0.6875rem, 0.6086rem + 0.3947vi, 0.875rem);--space-s: clamp(0.875rem, 0.7697rem + 0.5263vi, 1.125rem);--space-m: clamp(1.3125rem, 1.1546rem + 0.7895vi, 1.6875rem);--space-l: clamp(1.75rem, 1.5395rem + 1.0526vi, 2.25rem);--space-xl: clamp(2.625rem, 2.3092rem + 1.5789vi, 3.375rem);--space-2xl: clamp(3.5rem, 3.0789rem + 2.1053vi, 4.5rem);--space-3xl: clamp(6.125rem, 5.3882rem + 3.6842vi, 7.875rem);--space-2xs-xs: clamp(0.4375rem, 0.2533rem + 0.9211vi, 0.875rem);--space-xs-s: clamp(0.6875rem, 0.5033rem + 0.9211vi, 1.125rem);--space-s-m: clamp(0.875rem, 0.5329rem + 1.7105vi, 1.6875rem);--space-m-l: clamp(1.3125rem, 0.9178rem + 1.9737vi, 2.25rem);--space-l-xl: clamp(1.75rem, 1.0658rem + 3.4211vi, 3.375rem);--space-xl-2xl: clamp(2.625rem, 1.8355rem + 3.9474vi, 4.5rem);--space-2xl-3xl: clamp(3.5rem, 1.6579rem + 9.2105vi, 7.875rem);--space-s-l: clamp(0.875rem, 0.2961rem + 2.8947vi, 2.25rem);--space-l-2xl: clamp(1.75rem, 0.5921rem + 5.7895vi, 4.5rem);
}
html {
  background-color: var(--color-bg);
}
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: var(--step-0);
  font-family: var(--font-base);
  line-height: var(--line-height);
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
}
h1 {
  font-size: var(--step-4);
}
h2 {
  font-size: var(--step-3);
}
h3 {
  font-size: var(--step-2);
}
h4 {
  font-size: var(--step-1);
}
time {
  display: block;
}
h1,
h2,
h3,
h4,
ul,
li,
p {
  max-inline-size: var(--measure);
}
a {
  color: var(--color-text);
  text-decoration-color: var(--color-primary);
}
header {
  margin-block-end: var(--space-l-xl);
}
pre {
  background-color: var(--color-bg);
  color: var(--color-light);
  padding: var(--space-xs-s);
  font-size: var(--step--1);
  border-radius: var(--radius);
  -moz-tab-size: 2;
    -o-tab-size: 2;
       tab-size: 2;
  overflow-x: auto;
}
time {
  font-size: var(--step--1);
}
em {
  font-weight: bold;
}
blockquote {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: var(--step-1);
  /* font-style: italic; */
  border-inline-start: 3px solid var(--color-primary);
  padding-inline-start: var(--space-s-l);
}
:not(pre) > code {
  background: var(--color-bg-highlight);
  color: var(--color-text-highlight);
  font-size: var(--step--1);
  display: inline-block;
  padding-inline: 0.65ch;
  border-radius: 0.5ch;
  line-height: 1.28;
}
abbr {
  font-size: 0.9em;
}
hr {
  border: none;
  border-top: 1px solid var(--color-primary);
}
.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}
.wrap {
  margin-inline: auto;
  max-width: clamp(16rem, var(--wrap-max-width, 100vw), 90rem);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
}
.cluster {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space-s));
}
.center {
  margin-inline: auto;
  width: 100%;
  max-width: var(--measure);
}
.fifty {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: var(--gutter);
}
.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}
.sidebar > :first-child {
  flex-basis: 20rem;
  flex-grow: 1;
}
.sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: 50%;
}
.box {
  padding: var(--gutter);
}
.repel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter);
  align-items: center;
  justify-content: space-between;
}
/* Background */
.bg { color: #e0def4; background-color: #232136; }
/* PreWrapper */
.chroma { color: #e0def4; background-color: #232136; }
/* Other */
.chroma .x {  }
/* Error */
.chroma .err { color: #eb6f92 }
/* CodeLine */
.chroma .cl {  }
/* LineLink */
.chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
/* LineTableTD */
.chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */
.chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
/* LineHighlight */
.chroma .hl { background-color: #39374a }
/* LineNumbersTable */
.chroma .lnt { white-space: pre; -webkit-user-select: none; -moz-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* LineNumbers */
.chroma .ln { white-space: pre; -webkit-user-select: none; -moz-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* Line */
.chroma .line { display: flex; }
/* Keyword */
.chroma .k { color: #3e8fb0 }
/* KeywordConstant */
.chroma .kc { color: #3e8fb0 }
/* KeywordDeclaration */
.chroma .kd { color: #3e8fb0 }
/* KeywordNamespace */
.chroma .kn { color: #c4a7e7 }
/* KeywordPseudo */
.chroma .kp { color: #3e8fb0 }
/* KeywordReserved */
.chroma .kr { color: #3e8fb0 }
/* KeywordType */
.chroma .kt { color: #3e8fb0 }
/* Name */
.chroma .n { color: #ea9a97 }
/* NameAttribute */
.chroma .na { color: #ea9a97 }
/* NameBuiltin */
.chroma .nb { color: #ea9a97 }
/* NameBuiltinPseudo */
.chroma .bp { color: #ea9a97 }
/* NameClass */
.chroma .nc { color: #9ccfd8 }
/* NameConstant */
.chroma .no { color: #f6c177 }
/* NameDecorator */
.chroma .nd { color: #908caa }
/* NameEntity */
.chroma .ni { color: #ea9a97 }
/* NameException */
.chroma .ne { color: #3e8fb0 }
/* NameFunction */
.chroma .nf { color: #ea9a97 }
/* NameFunctionMagic */
.chroma .fm { color: #ea9a97 }
/* NameLabel */
.chroma .nl { color: #ea9a97 }
/* NameNamespace */
.chroma .nn { color: #ea9a97 }
/* NameOther */
.chroma .nx {  }
/* NameProperty */
.chroma .py { color: #ea9a97 }
/* NameTag */
.chroma .nt { color: #ea9a97 }
/* NameVariable */
.chroma .nv { color: #ea9a97 }
/* NameVariableClass */
.chroma .vc { color: #ea9a97 }
/* NameVariableGlobal */
.chroma .vg { color: #ea9a97 }
/* NameVariableInstance */
.chroma .vi { color: #ea9a97 }
/* NameVariableMagic */
.chroma .vm { color: #ea9a97 }
/* Literal */
.chroma .l { color: #f6c177 }
/* LiteralDate */
.chroma .ld { color: #f6c177 }
/* LiteralString */
.chroma .s { color: #f6c177 }
/* LiteralStringAffix */
.chroma .sa { color: #f6c177 }
/* LiteralStringBacktick */
.chroma .sb { color: #f6c177 }
/* LiteralStringChar */
.chroma .sc { color: #f6c177 }
/* LiteralStringDelimiter */
.chroma .dl { color: #f6c177 }
/* LiteralStringDoc */
.chroma .sd { color: #f6c177 }
/* LiteralStringDouble */
.chroma .s2 { color: #f6c177 }
/* LiteralStringEscape */
.chroma .se { color: #3e8fb0 }
/* LiteralStringHeredoc */
.chroma .sh { color: #f6c177 }
/* LiteralStringInterpol */
.chroma .si { color: #f6c177 }
/* LiteralStringOther */
.chroma .sx { color: #f6c177 }
/* LiteralStringRegex */
.chroma .sr { color: #f6c177 }
/* LiteralStringSingle */
.chroma .s1 { color: #f6c177 }
/* LiteralStringSymbol */
.chroma .ss { color: #f6c177 }
/* LiteralNumber */
.chroma .m { color: #f6c177 }
/* LiteralNumberBin */
.chroma .mb { color: #f6c177 }
/* LiteralNumberFloat */
.chroma .mf { color: #f6c177 }
/* LiteralNumberHex */
.chroma .mh { color: #f6c177 }
/* LiteralNumberInteger */
.chroma .mi { color: #f6c177 }
/* LiteralNumberIntegerLong */
.chroma .il { color: #f6c177 }
/* LiteralNumberOct */
.chroma .mo { color: #f6c177 }
/* Operator */
.chroma .o { color: #908caa }
/* OperatorWord */
.chroma .ow { color: #908caa }
/* Punctuation */
.chroma .p { color: #908caa }
/* Comment */
.chroma .c { color: #6e6a86 }
/* CommentHashbang */
.chroma .ch { color: #6e6a86 }
/* CommentMultiline */
.chroma .cm { color: #6e6a86 }
/* CommentSingle */
.chroma .c1 { color: #6e6a86 }
/* CommentSpecial */
.chroma .cs { color: #6e6a86 }
/* CommentPreproc */
.chroma .cp { color: #6e6a86 }
/* CommentPreprocFile */
.chroma .cpf { color: #6e6a86 }
/* Generic */
.chroma .g {  }
/* GenericDeleted */
.chroma .gd { color: #eb6f92 }
/* GenericEmph */
.chroma .ge { font-style: italic }
/* GenericError */
.chroma .gr {  }
/* GenericHeading */
.chroma .gh {  }
/* GenericInserted */
.chroma .gi { color: #9ccfd8 }
/* GenericOutput */
.chroma .go {  }
/* GenericPrompt */
.chroma .gp {  }
/* GenericStrong */
.chroma .gs { font-weight: bold }
/* GenericSubheading */
.chroma .gu { color: #c4a7e7 }
/* GenericTraceback */
.chroma .gt {  }
/* GenericUnderline */
.chroma .gl {  }
/* TextWhitespace */
.chroma .w {  }
.site-header {
  padding-block: var(--gutter);
}
.site-header h1 {
  font-size: var(--step-1);
}
.home-sidebar-topics {
  gap: 1ex;
}
@media screen and (max-width: 460px) {
  .site-header > * {
    justify-content: center;
    gap: var(--space-l);
  }
  .site-header h1 {
    font-size: var(--step-4);
  }
  .site-footer ul {
    flex-direction: column;
  }
  .home-sidebar {
    text-align: center;
  }
  .profile-pic {
    margin-inline: auto;
  }
  .home-sidebar-topics {
    justify-content: center;
  }
  .fifty {
    display: block;
  }
}
.profile-pic {
  margin-block-start: calc(var(--gutter) * -1 - 5ch);
  max-width: 13ch;
  border-radius: 0ch;
  border: 2px solid var(--color-bg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.site-footer {
  margin-block-start: var(--space-l-xl);
}
.prose {
  --flow-space: 1.5em;
}
.hashtag {
  background: var(--color-bg-highlight);
  padding-inline: 0.3em;
  line-height: 0.65;
  color: var(--color-text-highlight);
  display: inline-block;
  font-size: var(--step--1);
  font-style: italic;
  transition: all 130ms;

  &:hover {
    filter: saturate(170%) brightness(97%);
  }
}
.read-next {
  background: var(--color-bg);
  /* box-shadow: 0px 1px 4px -1px var(--color-text-highlight); */
  padding: var(--gutter);
  border-radius: 8px;
  /* border: 1px solid var(--color-primary); */
}
.note {
  font-size: var(--step--1);
  background-color: var(--color-bg-highlight);
  padding: var(--gutter);

  h6 {
    text-transform: uppercase;
    font-size: var(--step--2);
    margin: 0;
    color: var(--color-primary);
    font-weight: 700;
  }
}
.w-full {
  width: 100%;
}
.items-start {
  align-items: flex-start;
}
.text-balance {
  text-wrap: balance;
}
.text-center {
  text-align: center;
}
.font-normal {
  font-weight: 400;
}
.uppercase {
  text-transform: uppercase;
}
.italic {
  font-style: italic;
}
.no-underline {
  text-decoration-line: none;
}
/* 
VISUALLY HIDDEN UTILITY
Info: https://piccalil.li/quick-tip/visually-hidden/ 
*/
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
/* 
REGION UTILITY
Consistent block padding for page sections
*/
.region {
  padding-block: var(--region-space, var(--space-2xl));
}
.initial-cap {
  font-feature-settings: "swsh", "smcp";
}
.font-base {
  font-family: var(--font-base);
}
.step--1 {
  font-size: var(--step--1);
}
.step--2 {
  font-size: var(--step--2);
}
.bg-highlight {
  background: var(--color-bg-highlight);
}
.text-highlight {
  color: var(--color-text-highlight);
}
.overlap {
  margin-block-start: -6rem;
}