/* ========================================
   Base
======================================== */

:root {
  --color-paper: #fbfdff;
  --color-white: #ffffff;
  --color-ink: #263846;
  --color-heading: #536b7a;
  /* Kept dark enough for 4.5:1 on white/paper — don't lighten toward --color-blue. */
  --color-muted: #57707e;

  --color-blue: #8fd3eb;
  /* Same hue as --color-blue, darkened for readable label/data text (--color-blue is decoration-only). */
  --color-accent: #2d7690;
  --color-blue-soft: #dff4fb;
  --color-blue-pale: #f0faff;
  --color-line: #d7eaf2;

  --page-padding: clamp(1.5rem, 5vw, 5rem);
  --header-height: 6rem;
  --content-width: 90rem;

  --font-heading:
    "Zen Maru Gothic",
    "Hiragino Kaku Gothic ProN",
    sans-serif;
  --font-body:
    "Zen Kaku Gothic New",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    Meiryo,
    sans-serif;

  color-scheme: light;
  font-family: var(--font-body);
  font-size: 112.5%;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-paper);
}

img {
  max-width: 100%;

  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.page {
  position: relative;
  overflow: hidden;
}

.logo,
h1,
h2,
h3,
.section-label,
.hero__socials-label,
.button,
.skill-group__title,
.about-row__label,
.about-mini__label,
.about-mini__title,
.project-card__number {
  font-family: var(--font-heading);
}

.visually-hidden {
  position: absolute;

  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;

  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;

  border: 0;
}

/* ========================================
   Header
======================================== */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;

  height: var(--header-height);

  background: rgb(251 253 255 / 68%);
  backdrop-filter: blur(0.8rem);

  animation: fade-down 900ms 100ms both;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  max-width: var(--content-width);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--page-padding);
}

/* ========================================
   Masthead
======================================== */

.masthead {
  width: 100%;
  max-width: var(--content-width);
  height: clamp(12rem, 34vw, 26rem);
  margin-top: var(--header-height);
  margin-inline: auto;

  overflow: hidden;

  background: var(--color-blue-pale);
}

.masthead img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center top;
}

/*
  Reading-progress hairline. Only draws in browsers that support
  scroll-driven animations; elsewhere the element stays inert and
  invisible, so this is a pure progressive enhancement.
*/
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11;

    width: 100%;
    height: 2px;

    background: var(--color-blue);
    transform: scaleX(0);
    transform-origin: left;

    animation: scroll-progress-fill linear both;
    animation-timeline: scroll(root);
  }
}

@keyframes scroll-progress-fill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.logo {
  flex-shrink: 0;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.navigation {
  display: flex;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.navigation a {
  position: relative;

  padding-block: 0.5rem;

  color: var(--color-muted);
  font-size: 0.85rem;
  letter-spacing: 0.05em;

  transition: color 250ms ease;
}

.navigation a::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;

  height: 1px;

  background: var(--color-blue);
  transform: scaleX(0);
  transform-origin: right;

  transition: transform 300ms ease;
}

.navigation a:hover {
  color: var(--color-ink);
}

.navigation a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ========================================
   Hero
======================================== */

.hero {
  position: relative;
  isolation: isolate;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;

  width: 100%;
  max-width: var(--content-width);
  min-height: 32rem;
  margin-inline: auto;
  padding:
    clamp(2rem, 4vh, 3rem)
    var(--page-padding)
    clamp(1.5rem, 3vh, 2.5rem);
}

.hero::before {
  content: "";

  position: absolute;
  top: var(--header-height);
  left: 0;
  z-index: -1;

  width: 55%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--color-blue),
      var(--color-line)
    );

  transform-origin: left;
  animation:
    draw-line
    1.4s
    200ms
    cubic-bezier(.16, 1, .3, 1)
    both;
}

.hero__background {
  position: absolute;
  inset: 0;
  z-index: -2;

  overflow: hidden;
  pointer-events: none;
}

.hero__background::before {
  content: "";

  position: absolute;
  top: 12%;
  right: 4%;

  width: min(45rem, 60vw);
  aspect-ratio: 1;

  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgb(143 211 235 / 24%),
      rgb(223 244 251 / 10%) 48%,
      transparent 70%
    );

  filter: blur(0.4rem);
  animation:
    breathe-background
    8s
    ease-in-out
    infinite
    alternate;
}

.orbit {
  position: absolute;

  border: 1px solid rgb(143 211 235 / 35%);
  border-radius: 50%;
}

.orbit--one {
  top: 19%;
  right: 16%;

  width: clamp(12rem, 24vw, 25rem);
  aspect-ratio: 1;

  animation:
    orbit-drift
    12s
    ease-in-out
    infinite
    alternate;
}

.orbit--two {
  right: 5%;
  bottom: 9%;

  width: clamp(7rem, 14vw, 14rem);
  aspect-ratio: 1;

  animation:
    orbit-drift
    9s
    1s
    ease-in-out
    infinite
    alternate-reverse;
}

.dot {
  position: absolute;

  display: block;

  border-radius: 50%;
  background: var(--color-blue);
  box-shadow:
    0 0 0 0.6rem
    rgb(143 211 235 / 12%);
}

.dot--one {
  top: 29%;
  right: 18%;

  width: 0.5rem;
  aspect-ratio: 1;

  animation:
    dot-float
    4s
    ease-in-out
    infinite;
}

.dot--two {
  right: 9%;
  bottom: 24%;

  width: 0.35rem;
  aspect-ratio: 1;

  animation:
    dot-float
    5s
    600ms
    ease-in-out
    infinite
    reverse;
}

.hero__content {
  position: relative;
  z-index: 2;

  max-width: 53rem;
}

/* Tone down hero decorations for a calmer presentation */
.hero__background {
  display: none;
}

.hero__characters {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: clamp(0.5rem, 2vw, 2rem);

  width: min(100%, 46rem);
  min-height: clamp(14rem, 32vw, 25rem);
  margin-block: 0.5rem;
}

.hero__character {
  display: block;
  width: auto;
  max-width: 50%;

  object-fit: contain;
  filter:
    drop-shadow(
      0 1.5rem 1.5rem
      rgb(83 156 181 / 12%)
    );
}

.hero__character--one {
  max-height: clamp(17rem, 42vw, 30rem);
  transform-origin: bottom center;

  animation:
    character-enter
      1.1s
      550ms
      cubic-bezier(.16, 1, .3, 1)
      both,
    character-float-one
      4s
      1.7s
      ease-in-out
      infinite;
}

.hero__character--two {
  position: relative;
  top: 1rem;

  max-height: clamp(14rem, 34vw, 25rem);
  margin-left: clamp(-2rem, -3vw, -1rem);

  transform-origin: bottom center;

  animation:
    character-enter
      1.1s
      700ms
      cubic-bezier(.16, 1, .3, 1)
      both,
    character-float-two
      4.6s
      1.9s
      ease-in-out
      infinite;
}

.hero__description {
  max-width: 38rem;
  margin: clamp(1.2rem, 3vh, 2rem) 0 0;

  color: var(--color-muted);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  line-height: 2;

  animation: reveal-up 900ms 850ms both;
}

.hero__links {
  display: flex;
  align-items: center;
  gap: 1.5rem;

  margin-top: 1.5rem;

  animation: reveal-up 900ms 1s both;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;

  min-height: 3.2rem;

  font-size: 0.9rem;
  font-weight: 700;
}

.button span {
  transition: transform 250ms ease;
}

.button:hover span {
  transform: translate(0.2rem, 0.2rem);
}

.button--primary {
  padding-inline: 1.6rem;

  border: 1px solid var(--color-blue);
  border-radius: 999px;
  background: rgb(255 255 255 / 65%);
  box-shadow:
    0 0.8rem 2.5rem
    rgb(83 156 181 / 10%);

  backdrop-filter: blur(1rem);

  transition:
    background 250ms ease,
    box-shadow 250ms ease,
    transform 250ms ease;
}

.button--primary:hover {
  background: var(--color-blue-soft);
  box-shadow:
    0 1.2rem 3rem
    rgb(83 156 181 / 16%);
  transform: translateY(-0.15rem);
}

.button--text {
  color: var(--color-muted);
}

.button--text:hover {
  color: var(--color-ink);
}

.hero__socials {
  scroll-margin-top:
    calc(var(--header-height) + 2rem);
}

.hero__socials-label {
  margin: 0 0 0.55rem;

  color: var(--color-muted);
  font-size: 0.61rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero__socials-list {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  border-top: 1px solid var(--color-line);
}

.hero__socials-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;

  min-width: 0;
  padding:
    0.72rem
    0.1rem;

  border-bottom: 1px solid var(--color-line);

  color: var(--color-muted);
  font-size: 0.68rem;
  letter-spacing: 0.07em;

  transition:
    color 220ms ease,
    padding-inline 260ms cubic-bezier(.16, 1, .3, 1);
}

.hero__socials-name {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;

  min-width: 0;
}

.hero__socials-labels {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
}

.hero__socials-main {
  display: block;
}

.hero__socials-sub {
  display: block;
  font-size: 0.75rem;
  color: var(--color-muted);
  letter-spacing: 0.06em;
}

.hero__socials-icon {
  flex-shrink: 0;

  width: 0.95rem;
  height: 0.95rem;

  color: var(--color-blue);
}

.hero__socials-list a:nth-child(odd) {
  padding-right: 0.8rem;
}

.hero__socials-list a:nth-child(even) {
  padding-left: 0.8rem;

  border-left: 1px solid var(--color-line);
}

.hero__socials-list a:hover {
  color: var(--color-heading);
  padding-inline: 0.38rem;
}

.hero__socials-list a span:last-child {
  color: var(--color-blue);

  transition:
    transform 220ms ease;
}

.hero__socials-list a:hover span:last-child {
  transform:
    translate(0.16rem, -0.16rem);
}



.scroll-guide {
  grid-column: 1 / -1;
  justify-self: center;

  display: flex;
  align-items: center;
  gap: 0.8rem;

  margin: 0;

  color: var(--color-muted);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;

  writing-mode: vertical-rl;

  animation: reveal-up 900ms 1.3s both;
}

.scroll-guide::after {
  content: "";

  width: 1px;
  height: 3rem;

  background:
    linear-gradient(
      var(--color-blue),
      transparent
    );

  animation:
    scroll-line
    1.8s
    ease-in-out
    infinite;
}

/* ========================================
   About
======================================== */

.about {
  position: relative;
  isolation: isolate;

  display: grid;
  align-items: center;

  min-height: 100svh;
  padding:
    clamp(2.4rem, 4.2vh, 3.8rem)
    clamp(2rem, 3vw, 3.8rem);

  overflow: hidden;

  border-top: 1px solid var(--color-line);

  background:
    radial-gradient(
      circle at 10% 14%,
      rgb(143 211 235 / 15%),
      transparent 24rem
    ),
    radial-gradient(
      circle at 90% 76%,
      rgb(223 244 251 / 42%),
      transparent 28rem
    ),
    linear-gradient(
      180deg,
      var(--color-white),
      var(--color-paper)
    );
}

.about__inner {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
}

.about__header {
  display: grid;
  grid-template-columns:
    minmax(12rem, 0.42fr)
    minmax(20rem, 1.58fr);
  grid-template-areas:
    "label label"
    "title lead";
  align-items: end;
  gap: 0.7rem clamp(2.5rem, 5vw, 6rem);

  margin-bottom: clamp(2rem, 4vh, 3.2rem);
}

.section-label {
  grid-area: label;

  margin: 0;

  color: var(--color-accent);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.about__title {
  grid-area: title;

  margin: 0;

  color: var(--color-heading);
  font-size: clamp(3.5rem, 5.4vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
}

.about__lead {
  grid-area: lead;

  max-width: 34rem;
  margin: 0 0 0.25rem;

  color: var(--color-muted);
  font-size: 1.14rem;
  line-height: 1.8;
}

/*
  左：プロフィール＋技術
  右：補足情報の2×2
*/
.about__list {
  display: grid;
  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(32rem, 0.88fr);
  gap: clamp(3rem, 4.5vw, 6rem);
  align-items: stretch;
}

/* Profile and skills */

.about-row {
  position: relative;
  isolation: isolate;

  display: block;
  min-width: 0;
  padding-right: clamp(9rem, 18vw, 20rem);
}

.about-row__content {
  position: relative;
  z-index: 2;

  min-width: 0;
  max-width: 51rem;
}

.about-row__visual {
  position: absolute;
  top: 50%;
  right: clamp(-1rem, 1vw, 1rem);
  z-index: 1;

  width: clamp(13rem, 19vw, 20rem);
  min-height: clamp(13rem, 19vw, 20rem);

  translate: 0 -50%;

  pointer-events: none;
}

.about-row__visual::before {
  content: "";

  position: absolute;
  inset: 0;

  border: 1px solid rgb(143 211 235 / 38%);
  border-radius: 50%;

  animation:
    orbit-drift
    12s
    ease-in-out
    infinite
    alternate;
}

.about-row__visual::after {
  content: "";

  position: absolute;
  top: 19%;
  right: 8%;

  width: 0.55rem;
  aspect-ratio: 1;

  border-radius: 50%;
  background: var(--color-blue);
  box-shadow:
    0 0 0 0.7rem
    rgb(143 211 235 / 13%);

  animation:
    dot-float
    4s
    ease-in-out
    infinite;
}

.about-row__image {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;

  display: block;

  width: 145%;
  max-width: none;
  height: auto;

  object-fit: contain;

  translate: -50% -50%;

  filter:
    drop-shadow(
      0 1.2rem 1.8rem
      rgb(83 156 181 / 9%)
    );

  animation:
    workspace-float
    6s
    ease-in-out
    infinite
    alternate;
}

.about-row__label {
  margin: 0 0 0.7rem;

  color: var(--color-accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.about-row h3 {
  margin: 0;

  color: var(--color-heading);
  font-size: clamp(2.2rem, 3.25vw, 3.2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.about-row__body {
  max-width: 48rem;
  margin-top: 1.05rem;

  color: var(--color-muted);
  font-size: 0.96rem;
  line-height: 1.82;
}

.about-row__body p {
  margin: 0;
}

.about-row__body p + p {
  margin-top: 0.58rem;
}

/* Skills */

.skill-group {
  margin-top: 1.08rem;
}

.skill-group + .skill-group {
  margin-top: 0.82rem;
}

.skill-group__title {
  margin: 0 0 0.48rem;

  color: var(--color-muted);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;

  margin: 0;
  padding: 0;

  list-style: none;
}

.tag-list li {
  padding: 0.48rem 0.8rem;

  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: rgb(255 255 255 / 72%);

  color: var(--color-muted);
  font-size: 0.7rem;

  transition:
    color 250ms ease,
    border-color 250ms ease,
    background 250ms ease,
    transform 250ms ease;
}

.tag-list li:hover {
  color: var(--color-ink);
  border-color: var(--color-blue);
  background: var(--color-blue-soft);
  transform: translateY(-0.1rem);
}

/* Compact information blocks */

.about__extras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap:
    clamp(1rem, 1.6vw, 1.6rem)
    clamp(1.2rem, 2vw, 2rem);

  min-width: 0;
  margin: 0;
}

.about-mini {
  min-width: 0;
  padding: 1.3rem 1.35rem;

  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);

  background:
    linear-gradient(
      90deg,
      rgb(255 255 255 / 0%),
      rgb(255 255 255 / 48%),
      rgb(255 255 255 / 0%)
    );
}

.about-mini__label {
  margin: 0;

  color: var(--color-muted);
  font-size: 0.67rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.about-mini__title {
  margin: 0.52rem 0 0;

  color: var(--color-heading);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.about-mini__text {
  margin: 0.68rem 0 0;

  color: var(--color-muted);
  font-size: 0.76rem;
  line-height: 1.65;
}

.about-mini__text + .about-mini__text {
  margin-top: 0.52rem;
}

.about-mini__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;

  margin: 0.72rem 0 0;
  padding: 0;

  list-style: none;
}

.about-mini__list li {
  padding: 0.32rem 0.54rem;

  border: 1px solid var(--color-line);
  border-radius: 999px;

  color: var(--color-muted);
  font-size: 0.7rem;
}

.about-mini__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;

  margin-top: 0.72rem;
}

.about-mini__links a {
  color: var(--color-muted);
  font-size: 0.72rem;

  transition:
    color 250ms ease,
    transform 250ms ease;
}

.about-mini__links a:hover {
  color: var(--color-ink);
  transform: translateY(-0.08rem);
}


/* ========================================
   Works — selected projects
======================================== */

.works {
  border-top: 1px solid var(--color-line);
  background: var(--color-white);
  padding: clamp(3.4rem, 6vh, 5.5rem) var(--page-padding)
    clamp(5rem, 8vh, 7rem);
}

.works__inner {
  width: min(100%, var(--content-width));
  margin-inline: auto;
}

.works__header {
  display: grid;
  grid-template-columns: minmax(12rem, 0.42fr) minmax(20rem, 1.58fr);
  grid-template-areas:
    "label label"
    "title lead";
  align-items: end;
  gap: 0.7rem clamp(2.5rem, 5vw, 6rem);
  margin-bottom: clamp(2rem, 4vh, 3rem);
}

.works__header .section-label { grid-area: label; }

.works__title {
  grid-area: title;
  margin: 0;
  color: var(--color-heading);
  font-size: clamp(3.5rem, 5.4vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
}

.works__lead {
  grid-area: lead;
  max-width: 36rem;
  margin: 0 0 0.25rem;
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.8;
}

.works__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.8vw, 1.6rem);
  align-items: stretch;
}

.project-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.4rem, 2.2vw, 2.1rem);
  border: 1px solid var(--color-line);
  border-radius: 0.9rem;
  background: var(--color-paper);
  transition: border-color 200ms ease, transform 200ms ease;
}

.project-card:hover {
  border-color: var(--color-blue);
  transform: translateY(-0.15rem);
}

.project-card__number {
  margin: 0 0 1.5rem;
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.project-card h3 {
  margin: 0;
  color: var(--color-heading);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.project-card__description {
  flex: 1;
  margin: 1.3rem 0 0;
  color: var(--color-muted);
  font-size: 0.87rem;
  line-height: 1.9;
}

.project-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-top: 1.8rem;
}

.project-card__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-block: 0.45rem;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-heading);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  transition: color 200ms ease, border-color 200ms ease;
}

.project-card__links a:hover {
  color: var(--color-accent);
  border-color: var(--color-blue);
}

@media (max-width: 900px) {
  .works__grid { grid-template-columns: 1fr; }
}

/* ========================================
   Art — gallery (HTML/CSS only, no JS)
======================================== */

.art {
  display: grid;
  align-items: center;

  min-height: 100svh;
  padding:
    clamp(3.4rem, 6vh, 5.5rem)
    var(--page-padding)
    clamp(5rem, 9vh, 7rem);

  overflow: hidden;

  border-top: 1px solid var(--color-line);
  background: var(--color-white);
}

.art__inner {
  width: min(100%, var(--content-width));
  margin-inline: auto;
}

.art__header {
  display: grid;
  grid-template-columns:
    minmax(12rem, 0.42fr)
    minmax(20rem, 1.58fr);
  grid-template-areas:
    "label label"
    "title lead";
  align-items: end;
  gap: 0.7rem clamp(2.5rem, 5vw, 6rem);

  margin-bottom: clamp(1.8rem, 3.5vh, 2.8rem);
}

.art__header .section-label {
  grid-area: label;
}

.art__title {
  grid-area: title;

  margin: 0;

  color: var(--color-heading);
  font-size: clamp(3.5rem, 5.4vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
}

.art__lead {
  grid-area: lead;

  max-width: 36rem;
  margin: 0 0 0.25rem;

  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.8;
}

/*
  Adding a new piece = copy one .art-gallery__item link
  and its matching .art-lightbox block, then reuse the same
  #art-xxx id on both. The column count is automatic, so the
  grid never needs to be touched.
*/

.art-gallery {
  columns: 3 16rem;
  column-gap: clamp(1rem, 2vw, 1.6rem);
}

.art-gallery__item {
  display: block;

  margin-bottom: clamp(1rem, 2vw, 1.6rem);

  overflow: hidden;
  break-inside: avoid;

  border: 1px solid var(--color-line);
  background: var(--color-blue-pale);
}

.art-gallery__item img {
  display: block;

  width: 100%;
  height: auto;

  transition:
    transform 400ms cubic-bezier(.16, 1, .3, 1),
    filter 250ms ease;
}

.art-gallery__item:hover img {
  transform: scale(1.03);
}

.art-gallery__empty {
  padding: 2.4rem 1.6rem;

  border: 1px dashed var(--color-line);

  color: var(--color-muted);
  font-size: 0.85rem;
  line-height: 1.8;
  text-align: center;
}

/* Lightbox: shown only while it is the URL's :target */

.art-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;

  display: grid;
  place-items: center;

  padding: clamp(1.5rem, 5vw, 4rem);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 250ms ease,
    visibility 250ms ease;
}

.art-lightbox:target {
  opacity: 1;
  visibility: visible;
}

.art-lightbox__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;

  background: rgb(38 56 70 / 82%);
}

.art-lightbox__frame {
  position: relative;
  z-index: 1;

  max-width: min(92vw, 60rem);
  margin: 0;
}

.art-lightbox__frame img {
  display: block;

  width: 100%;
  max-height: 82vh;

  object-fit: contain;
  background: var(--color-white);
}

.art-lightbox__close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  z-index: 2;

  display: grid;
  place-items: center;

  width: 2.6rem;
  height: 2.6rem;

  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 50%;

  color: var(--color-paper);
  font-size: 1rem;

  transition:
    background 200ms ease,
    transform 200ms ease;
}

.art-lightbox__close:hover {
  background: rgb(255 255 255 / 12%);
  transform: rotate(90deg);
}

@media (max-width: 760px) {
  .art {
    min-height: auto;
    padding:
      5rem
      var(--page-padding);
  }

  .art__header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "title"
      "lead";

    gap: 0.72rem;
  }

  .art__lead {
    margin-top: 0.35rem;
  }

  .art__title {
    font-size: clamp(2.6rem, 13vw, 3.8rem);
  }

  .art-gallery {
    columns: 2 10rem;
  }
}

/* ========================================
   Contact
======================================== */

.contact {
  display: grid;
  align-items: center;

  min-height: 100svh;
  padding:
    clamp(3.4rem, 6vh, 5.5rem)
    var(--page-padding)
    clamp(5rem, 9vh, 7rem);

  overflow: hidden;

  border-top: 1px solid var(--color-line);
  background: var(--color-white);
}

.contact__inner {
  width: min(100%, var(--content-width));
  margin-inline: auto;
}

.contact__header {
  display: grid;
  grid-template-columns:
    minmax(12rem, 0.42fr)
    minmax(20rem, 1.58fr);
  grid-template-areas:
    "label label"
    "title lead";
  align-items: end;
  gap: 0.7rem clamp(2.5rem, 5vw, 6rem);

  margin-bottom: clamp(1.8rem, 3.5vh, 2.8rem);
}

.contact__header .section-label {
  grid-area: label;
}

.contact__title {
  grid-area: title;

  margin: 0;

  color: var(--color-heading);
  font-size: clamp(3.5rem, 5.4vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
}

.contact__lead {
  grid-area: lead;

  max-width: 36rem;
  margin: 0 0 0.25rem;

  color: var(--color-muted);
  font-size: clamp(1rem, 1vw, 1.1rem);
  line-height: 1.8;
}

.contact__list {
  width: min(100%, 42rem);
}

.contact__list .hero__socials-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ========================================
   Blog
======================================== */

.blog-index {
  padding:
    calc(var(--header-height) + clamp(3rem, 6vh, 4.5rem))
    var(--page-padding)
    clamp(5rem, 9vh, 7rem);

  min-height: 100svh;

  background: var(--color-white);
}

.blog-index__inner {
  width: min(100%, var(--content-width));
  margin-inline: auto;
}

.blog-index__header {
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
}

.blog-index__title {
  margin: 0.7rem 0 0;

  color: var(--color-heading);
  font-size: clamp(3.5rem, 5.4vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
}

.blog-index__lead {
  max-width: 36rem;
  margin: 1.1rem 0 0;

  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.8;
}

.blog-list {
  margin: 0;
  padding: 0;

  list-style: none;

  border-top: 1px solid var(--color-heading);
}

.blog-list__item {
  border-bottom: 1px solid var(--color-line);
}

.blog-list__item a {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;

  padding: 1.4rem 0.2rem;

  transition: padding-inline 260ms cubic-bezier(.16, 1, .3, 1);
}

.blog-list__item a:hover {
  padding-inline: 0.6rem;
}

.blog-list__date {
  flex-shrink: 0;

  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}

.blog-list__title {
  flex: 1;
  min-width: 0;

  color: var(--color-heading);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 700;
}

.blog-list__arrow {
  flex-shrink: 0;

  color: var(--color-blue);

  transition: transform 220ms ease;
}

.blog-list__item a:hover .blog-list__arrow {
  transform: translate(0.16rem, -0.16rem);
}

.blog-list__empty {
  padding: 2.4rem 0;

  color: var(--color-muted);
  font-size: 0.9rem;
}

/* Post */

.post {
  padding:
    calc(var(--header-height) + clamp(3rem, 6vh, 4.5rem))
    var(--page-padding)
    clamp(5rem, 9vh, 7rem);

  min-height: 100svh;

  background: var(--color-white);
}

.post__inner {
  width: min(100%, 42rem);
  margin-inline: auto;
}

.post__title {
  margin: 0.7rem 0 0;

  color: var(--color-heading);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.post__meta {
  margin: 0.9rem 0 0;

  color: var(--color-muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.post__body {
  margin-top: clamp(2.5rem, 5vh, 3.5rem);

  color: var(--color-ink);
  font-size: 1rem;
  line-height: 2;
}

.post__body p {
  margin: 0 0 1.4em;
}

.post__body h2 {
  margin: 2.2em 0 0.8em;

  color: var(--color-heading);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.post__body h3 {
  margin: 1.8em 0 0.7em;

  color: var(--color-heading);
  font-size: 1.15rem;
  font-weight: 700;
}

.post__body a {
  color: var(--color-heading);
  text-decoration: underline;
  text-decoration-color: var(--color-blue);
  text-underline-offset: 0.2em;
}

.post__body ul,
.post__body ol {
  margin: 0 0 1.4em;
  padding-left: 1.4em;
}

.post__body li + li {
  margin-top: 0.4em;
}

.post__body blockquote {
  margin: 0 0 1.4em;
  padding-left: 1.2em;

  border-left: 2px solid var(--color-line);

  color: var(--color-muted);
}

.post__body code {
  padding: 0.15em 0.4em;

  border-radius: 0.3em;
  background: var(--color-blue-pale);

  font-size: 0.88em;
}

.post__body pre {
  overflow-x: auto;

  margin: 0 0 1.4em;
  padding: 1rem 1.2rem;

  border: 1px solid var(--color-line);
  border-radius: 0.5rem;
  background: var(--color-blue-pale);
}

.post__body pre code {
  padding: 0;
  background: none;
}

.post__body img {
  display: block;

  width: 100%;
  height: auto;
  margin: 1.6em 0;
}

.post__back {
  margin-top: clamp(3rem, 6vh, 4rem);
  padding-top: 1.6rem;

  border-top: 1px solid var(--color-line);
}

.post__back a {
  color: var(--color-muted);
  font-size: 0.85rem;

  transition: color 220ms ease;
}

.post__back a:hover {
  color: var(--color-heading);
}

@media (max-width: 760px) {
  .blog-index,
  .post {
    padding-top: calc(var(--header-height) + 2rem);
  }

  .blog-index__title {
    font-size: clamp(2.6rem, 13vw, 3.8rem);
  }

  .post__title {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }

  .blog-list__item a {
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
  }
}

/* ========================================
   Animations
======================================== */

@keyframes fade-down {
  from {
    opacity: 0;
    transform: translateY(-1rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes draw-line {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes breathe-background {
  from {
    transform:
      scale(0.96)
      translateY(0);
  }

  to {
    transform:
      scale(1.06)
      translateY(-1rem);
  }
}

@keyframes orbit-drift {
  from {
    transform:
      translate(0, 0)
      rotate(0deg);
  }

  to {
    transform:
      translate(-1.5rem, 1rem)
      rotate(8deg);
  }
}

@keyframes dot-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-1rem);
  }
}

@keyframes scroll-line {
  0%,
  100% {
    opacity: 0.3;
    transform: scaleY(0.55);
    transform-origin: top;
  }

  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes character-enter {
  from {
    opacity: 0;
    transform:
      translateY(2rem)
      scale(0.94);
    filter: blur(0.4rem);
  }

  to {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
    filter: blur(0);
  }
}

@keyframes character-float-one {
  0%,
  100% {
    translate: 0 0;
    rotate: -0.5deg;
  }

  50% {
    translate: 0 -0.45rem;
    rotate: 0.5deg;
  }
}

@keyframes character-float-two {
  0%,
  100% {
    translate: 0 -0.15rem;
    rotate: 0.7deg;
  }

  50% {
    translate: 0 -0.65rem;
    rotate: -0.4deg;
  }
}


@keyframes workspace-float {
  from {
    transform:
      translateY(0)
      rotate(-0.35deg);
  }

  to {
    transform:
      translateY(-0.55rem)
      rotate(0.35deg);
  }
}

/* ========================================
   Responsive
======================================== */

@media (max-width: 1200px) {
  .about {
    min-height: auto;
  }

  .about__list {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .about-row {
    padding-right: clamp(10rem, 26vw, 19rem);
  }

  .about__extras {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .about__header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "title"
      "lead";

    gap: 0.72rem;
  }

  .about__lead {
    margin-top: 0.35rem;
  }

  .about__extras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  :root {
    --header-height: 5rem;
  }

  .navigation {
    gap: 0.65rem;
  }

  .navigation a {
    font-size: 0.75rem;
  }

  .navigation a:nth-child(2),
  .navigation a:nth-child(3) {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr;
    align-content: end;
    align-items: initial;

    padding-bottom: 5rem;
  }

  .hero__background::before {
    top: 15%;
    right: -30%;

    width: 100vw;
  }

  .hero__characters {
    justify-content: center;
    gap: 0;

    width: 100%;
    min-height: 15rem;
  }

  .hero__character--one {
    max-width: 54%;
    max-height: 16rem;
  }

  .hero__character--two {
    top: 0.5rem;

    max-width: 45%;
    max-height: 13rem;
    margin-left: -1rem;
  }

  .scroll-guide {
    display: none;
  }

  .about {
    min-height: auto;
    padding:
      5rem
      var(--page-padding);
  }

  .about__header {
    margin-bottom: 3.5rem;
  }

  .about__title {
    font-size: clamp(2.6rem, 13vw, 3.8rem);
  }

  .about-row {
    padding-right: 0;
    padding-bottom: 14rem;
  }

  .about-row h3 {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }

  .about-row__visual {
    top: auto;
    right: 50%;
    bottom: 0;

    width: 12rem;
    min-height: 12rem;

    translate: 50% 0;
  }

  .about-row__image {
    width: 145%;
  }

  .about__extras {
    grid-template-columns: 1fr;

    width: min(100%, 25rem);
    margin-inline: auto;
  }
}


@media (max-width: 900px) {
  .works__header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "title"
      "lead";
    gap: 0.72rem;
  }

  .works__lead { margin-top: 0.35rem; }
}

@media (max-width: 760px) {
  .works { padding: 5rem var(--page-padding); }
  .works__header { margin-bottom: 3rem; }
  .works__title { font-size: clamp(2.6rem, 13vw, 3.8rem); }
}

@media (max-width: 760px) {
  .contact {
    min-height: auto;
    padding:
      5rem
      var(--page-padding);
  }

  .contact__header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "title"
      "lead";

    gap: 0.72rem;
  }

  .contact__lead {
    margin-top: 0.35rem;
  }

  .contact__title {
    font-size: clamp(2.6rem, 13vw, 3.8rem);
  }

  .contact__list .hero__socials-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


@media (max-width: 760px) {
  .hero__socials-list {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

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