:root,
:root[data-dark="true"] {
  --bg1: oklch(0.2916 0.0197 311.86);
  --bg2: oklch(0.3317 0.0488 260.32);
  --fg1: oklch(0.9037 0 0);
  --fg2: oklch(0.9054 0.0455 309.91);
  --fg-inverse: oklch(0.1076 0 0);
  --sh: oklch(0.2916 0.0197 311.86);
  --stroke: oklch(0.2674 0.0049 39.4);
}

@font-face {
  font-family: BrandFont;
  src: url('../fonts/Angelic Serif.ttf') format('truetype');
}
@font-face {
  font-family: LarastelleFont;
  src: url('../fonts/PICAHMS_.ttf') format('truetype');
}

.brand-font {
  font-family: BrandFont;
  color: var(--fg2);
  text-shadow: 1px 3px var(--sh);
}
.larastelle-font {
  font-size: 1.5em;
  font-family: LarastelleFont;
  color: var(--fg2);
  text-shadow: 1px 3px var(--sh);
}

p .brand-font {
  font-size: 2em;
  font-weight: bold;
}
hr {
  margin: 0;
  height: 0;
  opacity: .5;
}


#title-stack, #title, #content, .links {
  z-index: 5;
}
#title-stroke {
  z-index: 2;
}
#ANECDOTE-img {
  background-color: white;
}

body {
  font-family: Verdana;
  width: 100%;
  padding: 0;
  margin: 0;
  background-image: radial-gradient(center, ellipse cover, var(--bg2) 0%, var(--bg1) 50%, var(--bg1) 100%);
  background: -ms-radial-gradient(center, ellipse cover, var(--bg2) 0%, var(--bg1) 50%, var(--bg1) 100%);
  background: -o-radial-gradient(center, ellipse cover, var(--bg2) 0%, var(--bg1) 50%, var(--bg1) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, var(--bg2)), color-stop(50%, var(--bg1)), color-stop(100%, var(--bg1)));
  background: -moz-radial-gradient(center, ellipse cover, var(--bg2) 0%, var(--bg1) 50%, var(--bg1) 100%);
  background: -webkit-radial-gradient(center, ellipse cover, var(--bg2) 0%, var(--bg1) 50%, var(--bg1) 100%);
  filter: 'progid:DXImageTransform.Microsoft.gradient( startColorstr=' var(--bg2) ', endColorstr=' var(--bg1) ',GradientType=1 )';
  background-position: 50% 80%;
  background-size: 150vmax 150vmax;
  background-repeat: no-repeat;
  background-color: var(--bg1);
}
#bg {
  background-image: url('../img/splatter.png');
  background-repeat: no-repeat;
  background-size: 1000px;
  background-position: 70% 0;
}
#title-stack {
  padding-top: 12em;
  padding-bottom: 15em;
  transition: padding-bottom 0.5s ease-in-out;
  white-space: nowrap;
}
@media (max-width: 1600px) {
  #title-stack { padding-bottom: 11em; }
  #title-stack h1 { font-size: 7em; }
  #access { margin-top: -77px !important; };
}
@media (max-width: 950px) {
  #title-stack { padding-bottom: 6.5em; }
  #title-stack h1 { font-size: 4em; }
  .links img, .feature img { width: 40px; }
  /* .tabs a { font-size: 1.5rem; } */
  #access { margin-top: -40px !important; };
}
@media (max-width: 550px) {
  #title-stack { padding-bottom: 5em; }
  #title-stack h1 { font-size: 3em; }
  .links img, .feature img { width: 28px; }
  #access { margin-top: -32px !important; };
}
@media (max-width: 350px) {
  #title-stack { padding-bottom: 4em; }
  #title-stack h1 { font-size: 2em; }
  .links img, .feature img { width: 18px; }
  #access { margin-top: -30px !important; };
}
#title-stack.luminosity {
  mix-blend-mode: luminosity;
}
#title, #title-stroke {
  position: absolute;
  width: 100%;
  font-size: 10em;
  text-shadow: none;
  text-stroke: 21px transparent;
  -webkit-text-stroke: 21px transparent;
  transition: font-size 0.5s ease-in-out;
}
#title-stroke {
  width: 100%;
  left: 0;
  mix-blend-mode: luminosity;
  text-stroke-color: var(--stroke);
  -webkit-text-stroke-color: var(--stroke);
}
h1 {
  font-size: 3em;
  font-weight: normal;
  text-align: center;
  margin: 0;
}
h3 {
  font-size: 2.2em;
  font-weight: normal;
}
#splatter {
  z-index: -2;
  position: absolute;
  top: -100px;
  margin-left: 20%;
}
.links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background-color: var(--sh)a5;
  gap: 0 35px;
  font-size: 1.2em;
  text-align: center;
  padding: 3px 0;
}
.links > div {
  display: flex;
}
.links button,
.links a {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
}
.links span {
  margin-left: 5px;
}
.links img {
  filter: drop-shadow(0 2px 0px #000000);
}
a {
  color: var(--fg1);
  text-decoration: none;
}
.links img,
a img {
  margin: 5px;
}
.group-label {
  display: flex !important;
}
a:hover {
  text-decoration: underline;
}

.content {
  width: 40%;
  min-width: 300px;
  max-width: 700px;
  margin: 130px auto 20px;
  background-color: #27364fd5;
  border: 2px solid #27364f;
  border-top: 2px solid #27364f40;
  padding: 8px 20px;
  border-radius: 5px;
}
.feature {
   text-align: center;
}
.feature .key {
  width: 128px;
  border: 3px solid #1a2435;
  border-radius: 5px;
  margin: -90px auto 0;
}

.content p {
  color: var(--fg2);
  line-height: 1.8em;
  margin-bottom: 2em;
}
.content pre {
  color: #dfdfdf;
  white-space: pre-wrap;
}
.content a {
  text-decoration: underline;
}

#footer {
  text-align: center;
  color: var(--fg2);
  font-size: 0.8em;
}
#footer > div, #footer > nav {
  padding: 0.5em;
}
#footer img {
  border-radius: 5px;
}

.pro {
  border: 0;
  border-bottom: 2px solid #27364f;
  border-top: 2px solid #27364f40;
  background-color: #27364fd5;
}
.media {
  border: 0;
  border-bottom: 2px solid #4f274f;
  border-top: 2px solid #4f274f40;
  background-color: #4f274fd5;
}
/* The projects row. .pro is #27364f and .media is #4f274f -- the same two
   channel values permuted -- so the third band keeps that weight and drops the
   hue instead of reaching for another colour. A strong tint here starts
   reading as a status message, and the splatter behind it is already carrying
   plenty of colour. Slightly violet so it still belongs to the splatter,
   neutral enough not to blur into the navy directly above it. */
.journal {
  border: 0;
  border-bottom: 2px solid #4a4654;
  border-top: 2px solid #4a465440;
  background-color: #3a3742d5;
}
:root[data-dark="false"] .journal {
  border: 0;
  border-bottom: 2px solid oklch(71.583% 0.04787 313.133);
  border-top: 2px solid oklch(71.583% 0.04787 313.133 / 25%);
  background-color: oklch(71.583% 0.04787 313.133 / 65%);
}
.transparent {
  border: 0;
  background-color: transparent;
}

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

/* Album minis in the menu. Baked at 144px so they stay sharp on 3x displays
   while rendering at the same size as the other link icons; the width
   attribute and the existing responsive rules keep them in step. */
.links img.mini {
  border-radius: 4px;
  aspect-ratio: 1;
  object-fit: cover;
}
.links .act {
  margin-left: 5px;
  align-self: center;
}

/* A label long enough to wrap fights the row's centring: .links is
   text-align:center, so the wrapped text centres inside a span that now spans
   most of the row while the icon stays pinned at flex-start, and the icon
   reads as ejected. Breaking it deliberately into two balanced lines, left
   aligned so it stays beside its icon, and a size down so two lines occupy
   about the height of one label elsewhere. */
.links .stacked {
  font-size: 0.78em;
  line-height: 1.15;
  text-align: left;
}