/* Modern reset: https://piccalil.li/blog/a-more-modern-css-reset/ */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

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

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}


/* Disable animation on initial loading
---------------------------------------------- */
@starting-style {
	body * {
		animation: none !important;
		transition: none !important;
	}
}


/* Global Styles 
---------------------------------------------- */
:root {
  --gutter: var(--space-m);
  --transition-base: 250ms ease;
  --transition-movement: 200ms linear;
  --transition-fade: 300ms ease;
  --transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
  
  --radius-s: 0.2rem;
  --radius-m: 0.75rem;
  --radius-l: 2.5rem;
  --circle: 100vh;

  /* Viewport: 375px → 1200px */
  /* Space 5xs: 0px → 1px */
  --space-5xs: clamp(0rem, -0.028rem + 0.121vw, 0.063rem);
  /* Space 4xs: 1px → 2px */
  --space-4xs: clamp(0.0625rem, 0.0341rem + 0.1212vw, 0.125rem);
  /* Space 3xs: 3px → 4px */
  --space-3xs: clamp(0.1875rem, 0.1591rem + 0.1212vw, 0.25rem);
  /* Space 2xs: 6px → 8px */
  --space-2xs: clamp(0.375rem, 0.3182rem + 0.2424vw, 0.5rem);
  /* Space xs: 9px → 12px */
  --space-xs: clamp(0.5625rem, 0.4773rem + 0.3636vw, 0.75rem);
  /* Space s: 12px → 16px */
  --space-s: clamp(0.75rem, 0.6364rem + 0.4848vw, 1rem);
  /* Space m: 15px → 20px */
  --space-m: clamp(0.9375rem, 0.7955rem + 0.6061vw, 1.25rem);
  /* Space l: 18px → 24px */
  --space-l: clamp(1.125rem, 0.9545rem + 0.7273vw, 1.5rem);
  /* Space xl: 24px → 32px */
  --space-xl: clamp(1.5rem, 1.2727rem + 0.9697vw, 2rem);
  /* Space 2xl: 30px → 40px */
  --space-2xl: clamp(1.875rem, 1.5909rem + 1.2121vw, 2.5rem);
  /* Space 3xl: 36px → 48px */
  --space-3xl: clamp(2.25rem, 1.9091rem + 1.4545vw, 3rem);
  /* Space 4xl: 48px → 64px */
  --space-4xl: clamp(3rem, 2.5455rem + 1.9394vw, 4rem);
  /* Space 5xl: 60px → 80px */
  --space-5xl: clamp(3.75rem, 3.1818rem + 2.4242vw, 5rem);
  /* Space 6xl: 72px → 96px */
  --space-6xl: clamp(4.5rem, 3.8182rem + 2.9091vw, 6rem);
  /* Space 7xl: 84px → 112px */
  --space-7xl: clamp(5.25rem, 4.4545rem + 3.3939vw, 7rem);
  /* Space 8xl: 96px → 128px */
  --space-8xl: clamp(6rem, 5.0909rem + 3.8788vw, 8rem);
  
  
  --font-base: YakuHanJP, "Noto Sans JP", san-serif;
  /* 9px → 10px */ 
  --font-size-xs: clamp(0.563rem, 0.534rem + 0.121vw, 0.625rem);
  /* 10px → 12px */
  --font-size-xs: clamp(0.625rem, 0.568rem + 0.242vw, 0.75rem);
  /* 11px → 14px */
  --font-size-s: clamp(0.688rem, 0.602rem + 0.364vw, 0.875rem);
  /* 12px → 16px */
  --font-size-base: clamp(0.75rem, 0.636rem + 0.485vw, 1rem);
  /* 16px → 20px */
  --font-size-m: clamp(1rem, 0.886rem + 0.485vw, 1.25rem);
  /* 20px → 24px */
  --font-size-l: clamp(1.25rem, 1.136rem + 0.485vw, 1.5rem);
  /* 24px → 28px */
  --font-size-xl: clamp(1.5rem, 1.386rem + 0.485vw, 1.75rem);
  /* 30px → 36px */
  --font-size-2xl: clamp(1.875rem, 1.705rem + 0.727vw, 2.25rem);
  /* 40px → 48px */
  --font-size-3xl: clamp(2.5rem, 2.273rem + 0.97vw, 3rem);
  
  --bg-primary: #ffffff;
  --bg-secondary: #161815;
  --color-primary: #000000;
  --color-secondary: #a2a2a2;
  --color-tertiary: #161815;
  --text-dark: #111111;
  --text-light: #ffffff;
  --text-shadow: 0px 0px 10px rgba(20, 20, 20, 0.5), 0px 0px 15px rgba(20, 20, 20, 0.6);
  
  --stroke: 1px solid var(--text-dark);
}

body {
  margin: 0;
  background: var(--bg-primary);
  line-height: 1;
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  font-size-adjust: from-font;
  color: var(--text-dark);
}

h1 {
  font-size: var(--font-size-3xl);
}
h2 {
  font-size: var(--font-size-2xl);
}
h3 {
  font-size: var(--font-size-xl);
}
:is(h4, h5, h6) {
  font-size: var(--font-size-m);
}
:is(h1, h2, h3, h4) rt {
  font-size: 40%;
  zoom: 0.75;
}

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

ins {
  text-decoration: none;
  background: var(--color-primary);
  color: var(--color-dark);
  padding-inline: 0.3em;
}

:is(code, kbd, samp) {
  font-family: var(--font-mono);
  padding: 0.2em 0.2em 0.05em 0.2em;
  hyphens: none;
  tab-size: 2;
  text-align: left;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  box-decoration-break: clone;
}
@supports not (font-size-adjust: from-font) {
  :is(code, kbd, samp) {
    font-size: 0.8em;
  }
}
pre:has(code) {
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
}
pre code {
  border: none;
  background: none;
  padding: 0;
}
kbd {
  border: 1px solid;
  padding-block-end: 0.1em;
}
var {
  font-style: normal;
  font-weight: var(--font-medium);
}

q {
  font-style: italic;
}

ul:not([class]) {
  padding-inline-start: 1.7ch;
  list-style-type: disc;
}
ul:not([class]) > li {
  padding-inline-start: var(--space-xs);
}
ul ::marker {
  font-size: 0.8lh;
}
ol ::marker {
  font-size: 1em;
  font-weight: var(--font-bold);
}

[role='list'][class],
[role='tablist'][class] {
  margin-block: 0;
  padding: 0;
}

dt {
  font-weight: var(--font-medium);
}
dt + dd {
  margin-block-start: var(--space-xs);
}
dd + dt {
  margin-block-start: var(--space-s);
}
dd {
  margin-inline-start: 1.5ch;
}

blockquote {
  margin-inline: 0;
  color: var(--color-light);
}
blockquote footer {
  margin-block-start: var(--space-s);
  color: var(--color-primary);
  font-size: var(--size-step-0);
}
blockquote q {
  font-style: normal;
}

:is(video, iframe[src*='youtube']) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

img {
  height: auto;
  max-width: 100%;
  display: block;
}

figcaption {
  padding-block-start: 0.5em;
  font-size: var(--size-step-0);
  font-family: monospace;
}

table {
  border: var(--stroke);
  border-collapse: collapse;
  width: 100%;
}
th {
  text-align: left;
  font-weight: var(--font-bold);
  line-height: var(--leading-fine);
}
thead th {
  padding-block: var(--space-s);
}
td,
th {
  padding: var(--space-xs) var(--space-s);
}
th:not(:only-of-type) {
  border-block-end: var(--stroke);
}
th:only-of-type {
  border-inline-end: var(--stroke);
}
:is(th, td) ~ :is(th, td) {
  border-inline-start: var(--stroke);
}
tr + tr :is(th, td) {
  border-block-start: var(--stroke);
}

caption {
  caption-side: bottom;
  margin-block-start: var(--space-s);
}

a:not([class]) {
  text-underline-offset: 0.15lh;
  color: var(--color-primary);
}
a:not([class]):hover {
  text-underline-offset: 0.1lh;
  color: var(--color-secondary);
}

:is(h1, h2, h3, h4) a:not([class]) {
  text-decoration-thickness: 0.1ex;
  text-underline-offset: 0.2ex;
}
:is(h1, h2, h3, h4) a:not([class]):hover {
  text-underline-offset: 0.2ex;
}

:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--color-primary, currentColor);
  outline-offset: var(--focus-offset, 0.2lh);
}
@supports (-moz-appearance: none) {
  :root {
    --focus-offset: 0.08em;
  }
}

:target {
  scroll-margin-block: 5lh;
}

::selection {
  color: var(--text-light);
  background: var(--color-primary);
}

hr {
  border: none;
  border-block-start: var(--stroke);
  margin-block: var(--flow-space, var(--space-xl));
}

svg:not([class]) {
  width: auto;
  height: 1lh;
}
svg {
  flex-shrink: 0;
}
svg[role='img'][width][height] {
  width: revert;
  height: revert;
}

summary {
  font-weight: var(--font-bold);
  cursor: pointer;
}
details[open] summary {
  margin-block-end: var(--space-s);
}