/*
 * Base - Element defaults: reset, typography, container, cards, forms, links
 *
 * The parts of Pico CSS v2.1.1 this site uses, resolved against our tokens.
 * Pico CSS: Copyright 2019-2025 Pico, MIT License (https://picocss.com)
 *
 * Sorts before the component and page stylesheets, so they override it.
 * State rules keep the specificity of the rule they modify (the state goes
 * in :where()), so a component rule that beats the base rule also beats
 * its hover and focus variants.
 */

/* --- Document --- */

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

:root {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 100%;
  font-weight: 400;
  line-height: 1.5;
  text-underline-offset: 0.1rem;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  tab-size: 4;
}

/* rem grows with the viewport */
@media (min-width: 576px) {
  :root { font-size: 106.25%; }
}

@media (min-width: 768px) {
  :root { font-size: 112.5%; }
}

@media (min-width: 1024px) {
  :root { font-size: 118.75%; }
}

@media (min-width: 1280px) {
  :root { font-size: 125%; }
}

@media (min-width: 1536px) {
  :root { font-size: 131.25%; }
}

::selection {
  background-color: rgba(2, 154, 232, 0.25);
}

body {
  width: 100%;
  margin: 0;
}

section {
  margin-bottom: 1rem;
}

[hidden],
template {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    background-attachment: initial !important;
    animation-duration: 1ms !important;
    animation-delay: -1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 0s !important;
  }
}

/* --- Container --- */

.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 576px) {
  .container {
    max-width: 510px;
    padding-inline: 0;
  }
}

@media (min-width: 768px) {
  .container { max-width: 700px; }
}

@media (min-width: 1024px) {
  .container { max-width: 950px; }
}

@media (min-width: 1280px) {
  .container { max-width: 1200px; }
}

@media (min-width: 1536px) {
  .container { max-width: 1450px; }
}

/* --- Typography --- */

p,
ol,
ul {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--ink);
  font-style: normal;
  font-weight: 400;
}

h1,
h2,
h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 700;
}

h1 {
  font-size: 2rem;
  line-height: 1.125;
}

h2 {
  font-size: 1.75rem;
  line-height: 1.15;
}

h3 {
  font-size: 1.5rem;
  line-height: 1.175;
}

:where(ol, ul) li {
  margin-bottom: 0.25rem;
}

ul li {
  list-style: square;
}

/* --- Links --- */

:where(a) {
  outline: 0;
  background-color: transparent;
  color: var(--amber);
  text-decoration: underline;
  text-decoration-color: rgba(1, 114, 173, 0.5);
  text-underline-offset: 0.125em;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

:where(a:hover, a:active, a:focus) {
  color: #ffc233;
  text-decoration-color: #ffc233;
}

:where(a:focus-visible) {
  box-shadow: 0 0 0 0.125rem var(--focus-ring);
}

/* --- Media --- */

:where(canvas, img, svg, video) {
  vertical-align: middle;
}

:where(svg:not([fill])) {
  fill: currentColor;
}

img {
  max-width: 100%;
  height: auto;
  border-style: none;
}

canvas {
  display: inline-block;
}

/* --- Buttons --- */

button {
  margin: 0;
  overflow: visible;
  font-family: inherit;
  text-transform: none;
}

[type="button"],
[type="submit"],
button {
  -webkit-appearance: button;
  padding: 0.75rem 1rem;
  border: 0.0625rem solid var(--amber);
  border-radius: 12px;
  outline: 0;
  background-color: var(--amber);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  color: var(--ink);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

[type="button"]:where(:focus),
[type="submit"]:where(:focus),
button:where(:focus) {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0.125rem var(--focus-ring);
}

/* Turbo disables the submitter while a form submits */
:where(button, [type="submit"], [type="button"])[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* --- Inputs --- */

input {
  margin: 0;
  overflow: visible;
  border: 0.0625rem solid var(--hairline);
  border-radius: 12px;
  outline: 0;
  background-color: #ffffff;
  box-shadow: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: inherit;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

input:where(:not([type="submit"], [type="button"]):is(:active, :focus)) {
  border-color: var(--ink);
}

input:where(:not([type="submit"], [type="button"]):focus) {
  box-shadow: 0 0 0 0.0625rem var(--focus-ring);
}

input::placeholder {
  color: var(--faint);
  opacity: 1;
}

input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
  appearance: none;
  padding: 0.75rem 1rem;
}

input:not([type="checkbox"], [type="radio"], [type="range"]) {
  height: calc(1rem * 1.5 + 0.75rem * 2 + 0.0625rem * 2);
}

input:not([type="checkbox"], [type="radio"]) {
  width: 100%;
  margin-bottom: 1rem;
}

button[type="submit"] {
  width: 100%;
}

/* Firefox: no inner focus border, focus ring or invalid glow */
::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

:-moz-focusring {
  outline: 0;
}

:-moz-ui-invalid {
  box-shadow: none;
}

/* --- Details --- */

details {
  display: block;
  margin-bottom: 1rem;
}

details summary {
  line-height: 1rem;
  list-style-type: none;
  cursor: pointer;
  transition: color 0.2s ease-in-out;
}

details summary:not([role]) {
  color: var(--ink);
}

details summary::-webkit-details-marker {
  display: none;
}

details summary::marker {
  display: none;
}

details summary:focus {
  outline: 0;
}

details summary:focus:not([role]) {
  color: #ffc233;
}

details summary:focus-visible:not([role]) {
  outline: 0.125rem solid var(--focus-ring);
  outline-offset: 0.5rem;
  color: var(--amber);
}

details[open] > summary {
  margin-bottom: 1rem;
}

details[open] > summary:not([role]):not(:focus) {
  color: var(--faint);
}

/* --- Cards --- */

article {
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: 12px;
  background: #ffffff;
  box-shadow:
    0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698),
    0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024),
    0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03),
    0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036),
    0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302),
    0.5rem 1rem 6rem rgba(129, 145, 181, 0.06),
    0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
}

article > header {
  margin: -1rem -1rem 1rem;
  padding: 0.66rem 1rem;
  border-bottom: 0.0625rem solid var(--hairline);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background-color: var(--cream-dark);
}

/* --- Nav --- */

nav {
  display: flex;
  justify-content: space-between;
}

/* --- Utilities --- */

/* Read by screen readers, takes no space on screen */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}