@font-face {
  font-family: "KoddiUDOnGothic";
  src: url("/fonts/KoddiUDOnGothic-Regular.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "KoddiUDOnGothic";
  src: url("/fonts/KoddiUDOnGothic-Bold.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "KoddiUDOnGothic";
  src: url("/fonts/KoddiUDOnGothic-ExtraBold.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 800;
}

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

html,
body {
  overflow-x: clip;
}

html {
  scroll-behavior: smooth;
  overflow-y: scroll;
}

body {
  min-block-size: 100dvh;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
}

.site-shell {
  min-block-size: 100dvh;
  background: var(--color-paper);
  color: var(--color-ink);
}

::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0ms;
}

::selection {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

a {
  color: inherit;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: var(--rule-hairline);
  text-underline-offset: var(--space-2xs);
}

.arrow-link {
  gap: var(--space-xs);
}

.arrow-link--right {
  --arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m9 3 5 5-5 5-1.4-1.4 2.6-2.6H2V7h8.2L7.6 4.4 9 3Z'/%3E%3C/svg%3E");
}

.arrow-link--up-right,
.destination-row,
.project-row {
  --arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3h10v10h-2V6.4l-7.3 7.3-1.4-1.4L9.6 5H3V3Z'/%3E%3C/svg%3E");
}

.arrow-link--down {
  --arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 2h2v8.2l2.6-2.6L13 9l-5 5-5-5 1.4-1.4 2.6 2.6V2Z'/%3E%3C/svg%3E");
}

.arrow-link--left {
  --arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 3 2 8l5 5 1.4-1.4L5.8 9H14V7H5.8l2.6-2.6L7 3Z'/%3E%3C/svg%3E");
}

.arrow-link:not(.arrow-link--left)::after,
.arrow-link--left::before,
.destination-row::after,
.project-row::after {
  inline-size: 1em;
  block-size: 1em;
  flex: none;
  background: currentColor;
  content: "";
  -webkit-mask: var(--arrow-icon) center / contain no-repeat;
  mask: var(--arrow-icon) center / contain no-repeat;
}

a:focus-visible,
button:focus-visible,
select:focus-visible {
  outline: var(--rule-strong) solid var(--color-focus);
  outline-offset: var(--space-2xs);
}

a:active,
button:active {
  transform: translateY(var(--rule-hairline));
}

button,
select {
  color: inherit;
  font: inherit;
}

button:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

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

h1,
h2,
h3,
p,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3 {
  min-inline-size: 0;
  font-family: var(--font-display);
  font-style: normal;
  overflow-wrap: anywhere;
}

h1 {
  max-inline-size: 100%;
  font-size: var(--text-display);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.98;
  word-break: keep-all;
}

h2 {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.skip-link {
  position: fixed;
  z-index: var(--z-sticky);
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-sm);
  min-block-size: 2.75rem;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-ink);
  color: var(--color-paper);
  transform: translateY(-160%);
  transition: transform var(--dur-short) var(--ease-out);
  white-space: nowrap;
}

.skip-link:focus {
  transform: translateY(0);
}
.route-header,
.site-footer,
.hub-main,
.dev-main,
.projects-main,
.project-detail-main,
.blog-main,
.blog-post-main {
  position: relative;
  z-index: var(--z-raised);
  inline-size: min(100%, var(--layout-max));
  margin-inline: auto;
  padding-inline: max(var(--page-gutter), env(safe-area-inset-left));
}

.route-header {
  display: flex;
  min-block-size: 4rem;
  align-items: center;
  border-block-end: var(--rule-hairline) solid var(--color-rule);
  background: var(--color-paper);
}

.route-header__wordmark {
  min-block-size: 2.75rem;
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hub-intro,
.projects-intro {
  display: grid;
  gap: var(--space-lg);
  padding-block: var(--space-2xl) var(--space-3xl);
}

.case-study__period {
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hub-intro__lede,
.projects-intro p,
.case-study__summary {
  max-inline-size: 52ch;
  font-size: var(--text-lg);
  line-height: 1.55;
}