/* Kangcept: base styles, responsive layout, identity tape, stickers, cursor. */
/* Keep cascade order when editing responsive rules. */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Kalam:wght@700&family=Permanent+Marker&family=DM+Sans:wght@400;450;500;550;600;650;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');

:root {
  --paper: #f3ebdd;
  --ink: #293f39;
  --clay: #c99578;
  --pink: #e3b4a3;
  --sage: #b9c5b2;
  --teal: #648c83;
  --line: rgba(41,63,57,.23);
  --serif: 'Playfair Display',Georgia,serif;
  --sans: 'DM Sans',Arial,sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 95px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

body:after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}

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

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

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

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

button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 7px;
}

a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 7px;
}

button {
  border: 0;
}

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

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  transform: translateY(-160%);
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 15px;
}

.skip-link:focus {
  transform: translateY(0);
}

.header {
  height: 104px;
  margin: 0 4.8%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  gap: 30px;
}

.wordmark {
  display: flex;
  align-items: center;
}

nav {
  display: flex;
  gap: 44px;
  align-items: center;
  font-size: 13px;
}

nav a {
  position: relative;
}

nav a:after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--ink);
  transition: width .25s;
}

nav a:hover:after {
  width: 100%;
}

sup {
  font-size: 9px;
  margin-left: 4px;
}

.nav-connect span {
  margin-left: 14px;
}

.hero {
  position: relative;
}

h1 {
  font-family: var(--serif);
  font-size: clamp(65px,7.9vw,124px);
  line-height: 1.04;
  font-weight: 500;
  letter-spacing: -.062em;
  margin: 0 0 0 16.5%;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

h1 em {
  font-weight: 500;
  color: var(--teal);
  position: relative;
}

h1 em:after {
  content: '';
  position: absolute;
  left: 2%;
  right: 0;
  bottom: 0;
  height: 9px;
  border-top: 2px solid var(--teal);
  border-radius: 50%;
  transform: rotate(-3deg);
}

.work-link {
  font-size: 14px;
  justify-self: center;
  display: flex;
  gap: 36px;
  align-items: center;
  border-bottom: 1px solid var(--ink);
  padding: 9px 0;
}

.work-link span {
  font-size: 34px;
  transition: transform .3s;
}

.work-link:hover span {
  transform: translate(4px,4px);
}

.section {
  padding: 100px 7.5%;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 48px;
  gap: 24px;
}

.kicker {
  font-size: 9px;
  letter-spacing: 1.7px;
  margin: 0 0 20px;
}

h2 {
  font-family: var(--serif);
  font-size: clamp(44px,5.1vw,76px);
  letter-spacing: -.045em;
  line-height: 1.12;
  font-weight: 500;
  margin: 0;
}

h2 em {
  color: var(--teal);
  font-weight: 500;
}

.section-heading>p {
  font-size: 13px;
  line-height: 1.8;
  margin: 0 0 5px;
}


.work-section {
  background: #e8e6d9;
}

.projects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px 6%;
}

.project {
  background: transparent;
  padding: 0;
  text-align: left;
  min-width: 0;
}

.project-core {
  margin-top: 140px;
}

.project-cat {
  margin-top: -90px;
}

.project-cover {
  height: 390px;
  position: relative;
  overflow: hidden;
  transition: border-radius .5s,transform .5s;
  border: 1px solid #293f3918;
}

.project:hover .project-cover {
  border-radius: 50% 50% 5px 5px / 8% 8% 5px 5px;
  transform: translateY(-5px);
}

.cover-index {
  position: absolute;
  left: 24px;
  top: 24px;
  font-size: 8px;
  letter-spacing: 1.4px;
  z-index: 3;
}

.cover-caption {
  position: absolute;
  left: 24px;
  bottom: 40px;
  font-size: 9px;
  letter-spacing: 2px;
  z-index: 3;
}

.cover-disclaimer {
  position: absolute;
  left: 24px;
  bottom: 18px;
  font-size: 8px;
  opacity: .75;
  z-index: 3;
}

.joy-cover {
  background: #e3b4a3;
}

.joy-shape {
  position: absolute;
  transition: transform .6s;
}

.joy-shape-one {
  width: 330px;
  height: 330px;
  right: -110px;
  top: -100px;
  border-radius: 43% 57% 55% 45%;
}

.joy-shape-two {
  width: 220px;
  height: 220px;
  left: -80px;
  bottom: -100px;
  background: #f3ebdd;
  border-radius: 55% 45% 65% 35%;
  transform: rotate(20deg);
}

.joy-title {
  position: absolute;
  font-family: var(--serif);
  font-size: clamp(45px,5.1vw,76px);
  letter-spacing: -3px;
  line-height: 1;
  left: 12%;
  top: 25%;
  z-index: 2;
}

.joy-title em {
  font-size: 1.4em;
}

.project:hover .joy-shape-one {
  transform: rotate(30deg) scale(1.1);
}

.core-cover {
  background: var(--ink);
  color: var(--paper);
}

.core-rings {
  position: absolute;
  right: -20%;
  top: 10%;
  width: 85%;
  aspect-ratio: 1;
  transition: transform .8s;
}

.core-rings i {
  position: absolute;
  inset: 0;
  border: 1px solid #b9c5b287;
  border-radius: 50%;
  transform: rotate(-30deg);
  scale: .65 1.1;
}

.core-rings i:nth-child(2) {
  inset: 12%;
}

.core-rings i:nth-child(3) {
  inset: 24%;
}

.core-title {
  font-family: var(--serif);
  font-size: clamp(43px,4.4vw,65px);
  line-height: 1.1;
  letter-spacing: -2px;
  position: absolute;
  left: 10%;
  top: 29%;
  z-index: 2;
}

.core-title em {
  color: var(--sage);
}

.project:hover .core-rings {
  transform: rotate(18deg);
}

.cat-cover {
  background: #bdc9b6;
}

.cat-cover-art {
  position: absolute;
  right: 8%;
  top: 17%;
  width: 160px;
  height: 190px;
  transform: rotate(9deg);
  transition: transform .5s;
}

.cat-face {
  position: absolute;
  inset: 20px 0 0;
  background: var(--paper);
  border-radius: 45% 45% 42% 42%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.cat-ear {
  position: absolute;
  background: var(--paper);
  width: 70px;
  height: 90px;
  border-radius: 10% 85% 0 0;
  top: 0;
}

.cat-ear.right {
  right: 0;
  transform: scaleX(-1);
}

.cat-face i {
  width: 11px;
  height: 17px;
  border-radius: 50%;
  background: var(--ink);
}

.cat-face b {
  position: absolute;
  top: 100px;
  font-size: 25px;
  font-weight: 400;
}

.cattery-title {
  position: absolute;
  font-family: var(--serif);
  font-size: 54px;
  line-height: 1.05;
  letter-spacing: -2px;
  top: 28%;
  left: 8%;
  z-index: 3;
}

.project:hover .cat-cover-art {
  transform: rotate(-6deg);
}

.project-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0 10px;
  border-bottom: 1px solid var(--line);
}

h3 {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -.5px;
  margin: 0 0 7px;
}

.project-meta p {
  font-size: 10px;
  margin: 0;
}

.project-arrow {
  font-size: 28px;
  transition: transform .3s;
}

.project:hover .project-arrow {
  transform: translate(3px,-3px);
}

.case-status {
  display: inline-block;
  font-size: 9px;
  margin-top: 13px;
  letter-spacing: .4px;
}

.case-status:before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--teal);
  border-radius: 50%;
  margin-right: 8px;
}

.about-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12%;
  align-items: center;
  padding-top: 130px;
  padding-bottom: 130px;
}

.about-art {
  height: 400px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-arch {
  position: absolute;
  inset: 10px 25px;
  background: var(--pink);
  border-radius: 47% 49% 3px 3px;
  transform: rotate(-7deg);
}

.about-scribble {
  font-family: var(--serif);
  font-size: 70px;
  line-height: 1.05;
  letter-spacing: -3px;
  position: relative;
  transform: rotate(-7deg);
}

.about-scribble em {
  margin-left: 32px;
}

.about-star {
  position: absolute;
  right: 5px;
  top: 15px;
  color: var(--teal);
  font-size: 100px;
  transform: rotate(12deg);
}

.art-number {
  position: absolute;
  left: 10%;
  bottom: -15px;
  font-size: 8px;
  letter-spacing: 1px;
}

.about-copy h2 {
  font-size: clamp(36px,3.5vw,54px);
  margin-bottom: 28px;
}

.about-copy>p:not(.kicker) {
  font-size: 13px;
  line-height: 1.9;
  max-width: 420px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 35px;
  border-bottom: 1px solid var(--ink);
  padding: 12px 0 8px;
  font-size: 12px;
}

.text-link span {
  font-size: 22px;
  transition: transform .3s;
}

.text-link:hover span {
  transform: translate(3px,-3px);
}

.connect-section {
  border-top: 1px solid var(--line);
  padding-top: 65px;
  padding-bottom: 60px;
  background: #dfb29f;
}

.connect-section h2 {
  font-size: clamp(65px,8.5vw,128px);
}

.connect-section h2 em {
  color: var(--ink);
}

.connect-section h2>span {
  display: inline-block;
  margin-left: 9%;
  font-family: var(--sans);
  font-weight: 400;
  color: var(--paper);
}

.connect-bottom {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-top: 45px;
  gap: 20px;
}

.connect-bottom p {
  font-size: 12px;
  line-height: 1.8;
  margin: 0;
}

.back-top {
  background: transparent;
  font-size: 10px;
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}

.footer {
  padding: 23px 4.8%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  gap: 15px;
}

.footer>span:last-child>span {
  color: var(--teal);
  font-size: 16px;
  margin-left: 8px;
}

dialog {
  border: 1px solid var(--line);
  padding: 65px;
  max-width: 600px;
  width: calc(100% - 40px);
  background: var(--paper);
  color: var(--ink);
}

dialog::backdrop {
  background: #293f3966;
  backdrop-filter: blur(7px);
}

dialog h2 {
  font-size: 48px;
  margin-bottom: 25px;
}

dialog p {
  font-size: 14px;
  line-height: 1.8;
}

.dialog-note {
  opacity: .75;
}

.dialog-close {
  position: absolute;
  right: 20px;
  top: 13px;
  font-size: 30px;
  background: transparent;
}

@media(max-width:1100px) {
  nav {
    gap: 24px;
  }

  h1 {
    font-size: 8.4vw;
    margin-left: 14%;
  }

  .project-cover {
    height: 320px;
  }

  .cattery-title {
    font-size: 43px;
  }

  .cat-cover-art {
    width: 120px;
    height: 150px;
    right: 5%;
  }

  .cat-face {
    gap: 27px;
  }

  .cat-face b {
    top: 80px;
  }

  .cat-ear {
    width: 55px;
    height: 65px;
  }

  .about-section {
    gap: 8%;
  }

  .about-scribble {
    font-size: 57px;
  }

  .about-art {
    height: 340px;
  }

  .about-star {
    font-size: 80px;
  }
}

@media(max-width:760px) {
  html {
    scroll-padding-top: 25px;
  }

  .header {
    height: 83px;
    margin: 0 6%;
  }

  nav {
    gap: 22px;
    font-size: 11px;
  }

  nav a:nth-child(2) {
    display: none;
  }

  h1 {
    font-size: clamp(58px,10vw,76px);
    margin-left: 0;
    letter-spacing: -.065em;
    line-height: 1.1;
  }

  h1 em {
    display: inline-block;
  }

  .work-link {
    font-size: 11px;
    gap: 14px;
  }

  .work-link span {
    font-size: 24px;
  }

  .section {
    padding: 65px 6%;
  }

  .section-heading {
    margin-bottom: 30px;
  }

  .section-heading>p {
    font-size: 10px;
  }

  .kicker {
    font-size: 8px;
    letter-spacing: 1.1px;
    margin-bottom: 15px;
  }

  .projects {
    display: block;
  }

  .project {
    display: block;
    width: 100%;
    margin: 0 0 38px;
  }

  .project:last-child {
    margin-bottom: 0;
  }

  .project-cover {
    height: 350px;
  }

  .joy-title {
    font-size: 65px;
    left: 12%;
    top: 25%;
  }

  .core-title {
    font-size: 60px;
  }

  .project-meta h3 {
    font-size: 23px;
  }

  .cattery-title {
    font-size: 60px;
  }

  .cat-cover-art {
    width: 145px;
    height: 180px;
    right: 8%;
    top: 19%;
  }

  .cat-face b {
    top: 97px;
  }

  .cat-ear {
    width: 65px;
    height: 90px;
  }

  .about-section {
    grid-template-columns: 1fr;
    gap: 60px;
    padding-top: 65px;
    padding-bottom: 65px;
  }

  .about-art {
    height: 310px;
    max-width: 350px;
    width: 100%;
    margin: auto;
  }

  .about-scribble {
    font-size: 65px;
  }

  .about-copy h2 {
    font-size: 44px;
  }

  .about-copy>p:not(.kicker) {
    font-size: 13px;
    max-width: none;
  }

  .connect-section h2 {
    font-size: 66px;
  }

  .connect-section h2>span {
    margin-left: 6%;
  }

  .connect-bottom {
    flex-wrap: wrap;
    align-items: start;
    margin-top: 30px;
    gap: 20px;
  }

  .connect-bottom p {
    font-size: 11px;
  }

  .connect-bottom .text-link {
    font-size: 11px;
    gap: 15px;
  }

  .back-top {
    width: 100%;
    text-align: left;
    margin-top: 10px;
  }

  .footer {
    padding: 20px 6%;
    font-size: 8px;
    flex-wrap: wrap;
  }

  .footer>span:nth-child(2) {
    display: none;
  }

  dialog {
    padding: 50px 25px 30px;
  }

  dialog h2 {
    font-size: 36px;
  }
}

@media(max-width:390px) {
  h1 {
    font-size: 55px;
  }

  .connect-section h2 {
    font-size: 58px;
  }

  .cattery-title {
    font-size: 51px;
  }

  .cat-cover-art {
    width: 125px;
  }
}

@media(min-width:761px) {
  h1 {
    font-size: clamp(65px,7vw,106px);
  }
}

@media(max-width:760px) {
  h1 em {
    margin-top: 86px;
  }
}

@media(max-width:350px) {
  h1 {
    font-size: 49px;
  }

  .work-link {
    gap: 7px;
  }

  .cat-cover-art {
    right: 3%;
    width: 110px;
  }

  .cattery-title {
    font-size: 45px;
  }

  .connect-section h2 {
    font-size: 51px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    animation: none!important;
    transition: none!important;
  }

  *:before {
    animation: none!important;
    transition: none!important;
  }

  *:after {
    animation: none!important;
    transition: none!important;
  }
}

html:has(body.quiet) {
  scroll-behavior: auto;
}

body.quiet * {
  animation: none!important;
  transition: none!important;
}

body.quiet *:before {
  animation: none!important;
  transition: none!important;
}

body.quiet *:after {
  animation: none!important;
  transition: none!important;
}

.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;
}

.handwritten {
  font-family: 'Segoe Print','Bradley Hand','Chalkboard SE',cursive;
  font-weight: 400;
}

.hero {
  padding: 25px 4.8% 0;
}

.name-dot {
  color: var(--clay);
}

.identity-line {
  display: flex;
  gap: 22px;
  align-items: center;
  margin-top: 20px;
  position: relative;
}

.identity-tape {
  position: relative;
  display: block;
  flex: 0 0 310px;
  height: 90px;
  padding: 0;
  background: transparent;
  perspective: 900px;
  transform: rotate(4deg);
  isolation: isolate;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media(max-width:1100px) and (min-width:761px) {
  .identity-tape {
    flex-basis: 270px;
  }
}

@media(max-width:760px) {
  .hero {
    padding: 23px 6% 0;
  }

  .identity-line {
    gap: 12px;
    margin-top: 29px;
  }

  .identity-tape {
    flex-basis: 205px;
    height: 72px;
  }
}

@media(max-width:350px) {
  .identity-tape {
    flex-basis: 175px;
    height: 65px;
  }

  .identity-line {
    gap: 9px;
  }
}

:root {
  --bronze-surface: url('assets/green-bronze.svg');
}

.joy-shape-one {
  background: #bc856f;
  mix-blend-mode: multiply;
  opacity: .3;
}

.joy-shape-two {
  opacity: .8;
}

.core-cover {
  background-image: linear-gradient(#1c3c32c2,#1c3c32b3),var(--bronze-surface);
  background-size: cover;
}

.cat-cover {
  background-image: linear-gradient(#d4debf24,#d4debf24),var(--bronze-surface);
  background-size: cover;
}

.connect-section {
  background-color: #dfb29f;
}

.wordmark {
  gap: 11px;
  font-family: var(--serif);
  font-style: normal;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -1.4px;
  flex-shrink: 0;
}

.wordmark img {
  display: block;
  width: 50px;
  height: 50px;
  object-fit: contain;
  transition: transform .3s;
}

.wordmark:hover img {
  transform: rotate(-7deg);
}

@media(max-width:760px) {
  .wordmark {
    font-size: 23px;
    gap: 8px;
    letter-spacing: -1px;
  }

  .wordmark img {
    width: 40px;
    height: 40px;
  }

  .header {
    gap: 12px;
  }

  .header nav .nav-connect {
    display: inline-flex;
  }
}

@media(max-width:350px) {
  .wordmark {
    font-size: 21px;
    gap: 6px;
  }

  .wordmark img {
    width: 36px;
    height: 36px;
  }

  .header nav {
    font-size: 10px;
  }
}

.brand-name {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  white-space: nowrap;
}

.brand-kang {
  font-family: var(--sans);
  font-size: .92em;
  font-weight: 650;
  letter-spacing: -1.4px;
  color: #426c5e;
}

.brand-cept {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.12em;
  font-weight: 500;
  letter-spacing: -1.5px;
  color: #aa6e60;
}

@media(max-width:760px) {
  .brand-kang {
    letter-spacing: -1.1px;
  }

  .brand-cept {
    letter-spacing: -1.2px;
  }
}

:root {
  --ceramic-surface: url('assets/pink-clay-original.png');
}

.joy-cover {
  background-image: var(--ceramic-surface);
  background-size: 140px 100px;
  background-repeat: repeat;
  background-position: 0 0;
}

.about-arch {
  background-image: var(--ceramic-surface);
  background-size: 140px 100px;
  background-repeat: repeat;
  background-position: 0 0;
}

.connect-section {
  background-image: var(--ceramic-surface);
  background-size: 140px 100px;
  background-repeat: repeat;
  background-position: 0 0;
}

.hero {
  background: none;
}

.intro-canvas {
  display: grid;
  align-items: center;
  max-width: 1260px;
  min-height: min(760px,calc(100svh - 129px));
  margin: 0 auto;
  padding: 70px 3% 85px;
}

.intro-copy {
  min-width: 0;
}

.intro-greeting {
  font-size: 26px;
  color: #765544;
  margin: 0 0 18px;
  transform: rotate(-3deg);
  transform-origin: left;
}

.intro-copy h1 {
  font: 500 clamp(74px,7.5vw,112px)/1.12 var(--serif);
  letter-spacing: -.06em;
  margin: 0;
  white-space: nowrap;
  pointer-events: auto;
}

.intro-copy .identity-line {
  margin-top: 32px;
  gap: 21px;
}

.intro-copy .identity-tape {
  flex-basis: 245px;
  height: 76px;
  transform: rotate(-2deg);
}

.intro-copy .work-link {
  display: inline-flex;
  margin-top: 60px;
  gap: 45px;
  font-size: 13px;
}

.personal-illustration {
  width: 100%;
  max-height: 560px;
}

.personal-illustration:empty {
  display: none;
}

.personal-illustration img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
}

@media(max-width:760px) {
  .intro-greeting {
    font-size: 22px;
  }

  .intro-copy h1 {
    font-size: clamp(58px,13.5vw,90px);
  }

  .intro-copy .identity-line {
    margin-top: 29px;
    gap: 15px;
  }

  .intro-copy .identity-tape {
    flex-basis: 205px;
    height: 70px;
  }
}

@media(max-width:350px) {
  .intro-canvas {
    min-height: 510px;
  }

  .intro-copy h1 {
    font-size: 57px;
  }

  .intro-copy .identity-tape {
    flex-basis: 175px;
    height: 65px;
  }

  .intro-copy .identity-line {
    gap: 10px;
  }
}

.intro-canvas {
  grid-template-columns: 1fr 1.08fr;
  gap: 2.5%;
  padding-left: 1%;
  padding-right: 0;
}

.personal-illustration.sticker-collage {
  position: relative;
  width: 100%;
  max-height: none;
  aspect-ratio: 1/1;
  isolation: isolate;
}

.collage-sticker {
  position: absolute;
  display: block;
  padding: 0;
  margin: 0;
  background: none;
  transform: rotate(var(--angle,0deg));
  transform-origin: 50% 65%;
  z-index: var(--layer,2);
  transition: transform .35s cubic-bezier(.2,.8,.2,1),filter .35s;
  outline-offset: 3px;
  touch-action: manipulation;
}

.sticker-art {
  display: block;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
  filter: drop-shadow(0 3px 2px #433b3014);
  pointer-events: none;
}

.personal-illustration .collage-sticker img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  user-select: none;
}

.sticker-character {
  left: 12%;
  top: 0%;
  width: 76%;
  --angle: -2deg;
  --layer: 3;
}

.sticker-junimo {
  left: 21%;
  top: 78%;
  width: 16%;
  --angle: -11deg;
  --layer: 6;
}

.sticker-journal {
  left: 7%;
  top: 61%;
  width: 24%;
  --angle: -18deg;
  --layer: 4;
}

.sticker-badminton {
  right: 3%;
  top: 53%;
  width: 22%;
  --angle: 21deg;
  --layer: 2;
}

body.quiet .collage-sticker .sticker-art {
  transform: none;
  animation: none;
}

@media(min-width:1500px) {
  .sticker-collage {
    max-width: 570px;
  }
}

@media(max-width:1100px) and (min-width:761px) {
  .intro-canvas {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .intro-copy h1 {
    font-size: 7.6vw;
  }

  .intro-copy .identity-line {
    gap: 10px;
  }

  .intro-copy .identity-tape {
    flex-basis: 190px;
  }
}

@media(max-width:760px) {
  .intro-canvas {
    grid-template-columns: 1fr;
    gap: 38px;
    padding: 48px 0 45px;
    min-height: 0;
  }

  .personal-illustration.sticker-collage {
    width: 100%;
    max-width: 470px;
    justify-self: center;
  }

  .intro-copy .work-link {
    margin-top: 30px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .collage-sticker .sticker-art {
    transform: none!important;
    animation: none;
  }
}

.hero .intro-canvas {
  display: block;
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 72px 0 80px;
  isolation: isolate;
}

.hero .intro-copy {
  position: relative;
  z-index: 4;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  pointer-events: none;
}

.hero .intro-copy button {
  pointer-events: auto;
}

.hero .intro-copy a {
  pointer-events: auto;
}

.hero .intro-greeting {
  transform: rotate(-3deg);
  transform-origin: center;
  margin-bottom: 14px;
}

.hero .intro-copy .identity-line {
  justify-content: center;
}

.hero .intro-copy .work-link {
  gap: 30px;
}

.hero .personal-illustration.sticker-collage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  pointer-events: none;
}

.hero .collage-sticker {
  pointer-events: auto;
}

@media(max-width:760px) {
  .hero .intro-canvas {
    padding: 45px 0 35px;
  }

  .hero .intro-copy {
    width: 100%;
  }

  .hero .intro-greeting {
    font-size: 22px;
  }
}

.hero .intro-copy .identity-line {
  align-items: center;
}

.hero .intro-copy .identity-tape {
  transform: none;
  overflow: visible;
  isolation: isolate;
}

.identity-strip {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #283f4d;
  transform-origin: 94% 50%;
}

.identity-strip:after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath d='M0 0h90v90H0z' filter='url(%23g)' opacity='.7'/%3E%3C/svg%3E");
}

.identity-strip>span {
  position: relative;
  z-index: 1;
}

.strip-yellow {
  background-color: #f6cf31;
}

.strip-blue {
  background-color: #55a9ee;
}

.identity-strip.is-peeling {
  pointer-events: none;
}

.identity-strip.is-peeled {
  display: none;
}

@media(max-width:760px) {
  .identity-designer {
    font-size: 38px;
  }

  .identity-strip {
    font-size: 27px;
  }
}

@media(max-width:350px) {
  .identity-designer {
    font-size: 34px;
  }
}

.hero .intro-copy h1 {
  font-weight: 600;
}

.hero .intro-copy .identity-line {
  font: 600 var(--hero-type)/1.12 var(--serif);
  letter-spacing: -.045em;
}

.identity-article {
  font: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
}

.identity-designer {
  font: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
}

.hero .intro-copy .identity-tape {
  font: inherit;
}

.identity-strip {
  font: inherit;
  letter-spacing: -.045em;
}

.identity-strip>span {
  text-shadow: none;
}

.strip-yellow {
  color: #30290e;
  background-image: radial-gradient(circle,#f9e391 1.6px,transparent 1.9px);
  background-size: 20px 20px;
}

.strip-blue {
  color: #142d43;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='22' viewBox='0 0 48 22'%3E%3Cpath d='M-12 11Q0 3 12 11T36 11T60 11' fill='none' stroke='%237cb8eb' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size: 48px 22px;
}

.identity-strip:after {
  opacity: .07;
}

.hero .intro-copy {
  --hero-type: clamp(54px,5.4vw,76px);
}

.hero .intro-copy h1 {
  font-size: var(--hero-type);
  line-height: 1.14;
}

.strip-yellow {
  z-index: 4;
}

.strip-blue {
  z-index: 3;
}

.strip-orange {
  color: #49250f;
  background-color: #f5a14a;
  background-image: repeating-linear-gradient(115deg,transparent 0 20px,#ffc27b 20px 22px);
}

@media(max-width:760px) {
  .hero .intro-copy {
    --hero-type: clamp(36px,6.6vw,50px);
  }
}

@media(max-width:540px) {
  .hero .intro-copy .identity-line {
    row-gap: .12em;
  }
}

.hero .intro-copy .identity-line {
  font-size: calc(var(--hero-type) * .8);
  gap: .19em;
  margin-top: 23px;
  flex-wrap: nowrap;
}

.hero .intro-copy .identity-tape {
  flex: 0 0 4.1em;
  transition: none;
  cursor: grab;
}

.hero .intro-copy .identity-tape:active {
  cursor: grabbing;
}

.identity-designer {
  flex-basis: auto;
}

.identity-strip {
  clip-path: none;
  box-shadow: none;
  backface-visibility: visible;
  background: transparent!important;
  pointer-events: none;
}

.identity-strip>span {
  visibility: visible;
}

.identity-strip.is-current>span {
  visibility: visible;
}

.identity-strip:after {
  display: none;
}

.strip-yellow {
  --washi-size: 31px 29px;
}

.strip-blue {
  --washi-size: 19px 19px;
}

.tape-face {
  position: absolute!important;
  inset: 0;
  background-color: var(--washi-color);
  background-image: var(--washi-pattern);
  background-size: var(--washi-size);
  box-shadow: inset 0 1px 2px #fffa,inset 0 -1px 3px #574b3033;
  clip-path: polygon(2% 1%,10% 0,21% 2%,33% 0,47% 2%,60% 0,76% 2%,88% 0,98% 2%,97% 12%,100% 23%,97% 35%,100% 47%,97% 59%,100% 72%,97% 84%,99% 98%,87% 100%,73% 98%,60% 100%,45% 98%,32% 100%,18% 98%,1% 100%,3% 86%,0 73%,3% 62%,0 49%,3% 37%,0 25%,3% 13%);
}

.tape-face:after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath d='M0 0h90v90H0z' filter='url(%23g)' opacity='.7'/%3E%3C/svg%3E");
}

.identity-strip.is-peeling {
  animation: none;
  z-index: 7;
}

@media(max-width:760px) {
  .hero .intro-copy .identity-line {
    font-size: calc(var(--hero-type) * .8);
    gap: .16em;
  }

  .identity-designer {
    flex-basis: auto;
  }
}

@media(max-width:350px) {
  .hero .intro-copy .identity-line {
    font-size: calc(var(--hero-type) * .74);
    gap: .12em;
  }
}

.hero .intro-copy .identity-tape {
  flex-basis: 3.9em;
  width: 3.9em;
  height: 1.12em;
}

.identity-strip {
  inset: auto;
  top: 50%;
  height: 92%;
  transform: translate(var(--shift-x),calc(-50% + var(--shift-y))) rotate(var(--tilt));
}

.strip-yellow {
  left: 12%;
  width: 76%;
  height: 88%;
  --shift-x: -2px;
  --shift-y: -4px;
}

.strip-blue {
  left: 5%;
  width: 90%;
  height: 94%;
  --shift-x: 2px;
  --shift-y: 2px;
}

.strip-orange {
  left: 2%;
  width: 96%;
  height: 90%;
  --shift-x: 0px;
  --shift-y: 7px;
  --washi-size: 32px 32px;
  z-index: 2;
}

.tape-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 .61em/1 var(--sans);
  letter-spacing: -.025em;
  color: #25382e;
  white-space: nowrap;
  pointer-events: none;
}

@media(max-width:760px) {
  .hero .intro-copy .identity-tape {
    flex-basis: 3.9em;
    width: 3.9em;
    height: 1.12em;
  }
}

.strip-yellow {
  --washi-color: #dfc66b;
  --washi-back: #f3e6af;
  --washi-pattern: radial-gradient(circle,#f5e6ae 5px,transparent 5.5px);
}

.strip-blue {
  --washi-color: #91b2cb;
  --washi-back: #d5e4ec;
  --washi-pattern: linear-gradient(#deebf080 2px,transparent 2px),linear-gradient(90deg,#deebf080 2px,transparent 2px);
}

.strip-orange {
  --washi-color: #d6a17e;
  --washi-back: #efcfb8;
  --washi-pattern: repeating-linear-gradient(110deg,transparent 0 15px,#efd3bb66 15px 18px);
}

.tape-face {
  opacity: 1;
  filter: none;
  transition: none;
}

.tape-label {
  opacity: 1;
  filter: none;
  transition: none;
}

.tape-label {
  font-size: .66em;
  text-shadow: none;
}

.strip-yellow .tape-label {
  font-family: 'Kalam','Segoe Print','Bradley Hand',cursive;
  font-weight: 700;
  color: #49332d;
  letter-spacing: -.025em;
}

.strip-blue .tape-label {
  font-family: 'Caveat','Segoe Print','Bradley Hand',cursive;
  font-weight: 700;
  color: #233e59;
  font-size: .76em;
  letter-spacing: .005em;
}

.strip-orange .tape-label {
  font-family: 'Permanent Marker','Segoe Print','Bradley Hand',cursive;
  font-weight: 400;
  color: #653b42;
  font-size: .59em;
  letter-spacing: -.025em;
}

.identity-strip.strip-yellow {
  left: 50%;
  top: 50%;
  height: 92%;
  transform: translate(-50%,-50%) rotate(var(--tilt));
  transform-origin: center center;
}

.identity-strip.strip-blue {
  left: 50%;
  top: 50%;
  height: 92%;
  transform: translate(-50%,-50%) rotate(var(--tilt));
  transform-origin: center center;
}

.identity-strip.strip-orange {
  left: 50%;
  top: 50%;
  height: 92%;
  transform: translate(-50%,-50%) rotate(var(--tilt));
  transform-origin: center center;
}

.strip-yellow {
  --tilt: -9deg;
}

.strip-blue {
  --tilt: 7deg;
}

.strip-orange {
  --tilt: -1deg;
}

.hero .intro-copy .identity-tape {
  perspective: 850px;
  perspective-origin: 50% 50%;
}

.identity-strip {
  transform-style: preserve-3d;
}

.identity-strip.is-peeling .tape-face {
  animation: none;
  visibility: hidden;
}

.tape-mesh {
  position: absolute!important;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  pointer-events: none;
}

.tape-mesh-cell {
  position: absolute;
  display: block;
  overflow: hidden;
  transform-style: flat;
  transform-origin: 50% 50%;
  backface-visibility: visible;
  will-change: transform;
}

.identity-strip.is-peeling .tape-mesh-cell .tape-face {
  position: absolute!important;
  inset: auto;
  display: block;
  visibility: visible;
  animation: none;
  box-shadow: none;
  opacity: 1;
  filter: none;
  transform: none;
}

.tape-mesh-cell .tape-face:after {
  display: none;
}

.hero .personal-illustration.sticker-collage {
  z-index: 5;
}

.hero .collage-sticker {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: filter .2s;
  transform: rotate(var(--angle,0deg));
}

.hero .collage-sticker.is-dragging {
  cursor: grabbing;
  transform: rotate(var(--angle,0deg)) scale(1.025);
  filter: drop-shadow(3px 9px 5px #433b3024);
}

.hero .intro-canvas {
  max-width: 1200px;
  min-height: 680px;
  padding-top: 104px;
  padding-bottom: 70px;
}

.hero .sticker-character {
  left: auto;
  right: 0%;
  top: 16%;
  width: 23%;
  --angle: 3deg;
  --layer: 3;
}

.hero .sticker-journal {
  left: 4%;
  right: auto;
  top: 19%;
  width: 11%;
  --angle: -12deg;
  --layer: 3;
}

.hero .sticker-badminton {
  left: 7%;
  right: auto;
  top: 45%;
  width: 13%;
  --angle: 10deg;
  --layer: 2;
}

.hero .sticker-junimo {
  left: 5%;
  right: auto;
  top: 75%;
  width: 9%;
  --angle: -8deg;
  --layer: 4;
}

.hero .collage-sticker:focus {
  outline: none;
  box-shadow: none;
}

.hero .collage-sticker:focus-visible:not(.is-dragging) {
  outline: 2px dashed #648c8370;
  outline-offset: 5px;
  border-radius: 12px;
}

.hero .collage-sticker.is-dragging {
  outline: none;
  box-shadow: none;
}

.hero .collage-sticker.is-dragging:focus-visible {
  outline: none;
  box-shadow: none;
}

@media(max-width:1100px) and (min-width:761px) {
  .hero .intro-canvas {
    min-height: 650px;
    padding-top: 100px;
  }
}

@media(max-width:760px) {
  .hero .intro-canvas {
    padding-top: 95px;
  }

  .hero .sticker-character {
    right: 2%;
    top: 53%;
    width: 37%;
    --angle: 3deg;
  }

  .hero .sticker-journal {
    left: 1%;
    top: 5%;
    width: 18%;
    --angle: -15deg;
  }

  .hero .sticker-badminton {
    left: 0%;
    top: 52%;
    --angle: 6deg;
  }

  .hero .sticker-junimo {
    left: 10%;
    top: 78%;
  }
}

@media(max-width:1100px) and (min-width:761px) {
  .hero .sticker-journal {
    --angle: -12deg;
  }

  .hero .sticker-badminton {
    --angle: 10deg;
  }

  .hero .sticker-junimo {
    --angle: -8deg;
  }

  .hero .sticker-character {
    --angle: 3deg;
  }
}

.hero .intro-copy {
  left: 0;
  text-align: center;
}

.hero .sticker-logo-cat {
  left: auto;
  right: -1%;
  top: 60%;
  width: 10%;
  --angle: 10deg;
  --layer: 5;
}

.reset-stickers {
  position: absolute;
  z-index: 8;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  color: #52685e;
  font: 500 11px/1.2 var(--sans);
}

.reset-stickers>span {
  font-size: 20px;
  line-height: 1;
}

@media(max-width:760px) {
  .hero .intro-copy {
    left: 0;
  }

  .hero .sticker-logo-cat {
    left: auto;
    right: 0%;
    top: 73%;
    width: 17%;
  }

  .reset-stickers {
    font-size: 10px;
  }

  .hero .intro-canvas {
    padding-bottom: 55px;
  }
}

.hero .intro-copy h1 .surname {
  color: #aa6e60;
}

@media(max-width:540px) {
  .hero .intro-copy h1 {
    font-size: min(var(--hero-type),8.7vw);
  }
}

.sticker-box {
  position: absolute;
  background: none;
  z-index: 9;
  pointer-events: auto;
  cursor: pointer;
  isolation: isolate;
}

.sticker-box svg {
  display: block;
  width: 100%;
  height: auto;
}

.hero .surprise-sticker {
  width: clamp(88px,9vw,132px);
  --angle: 0deg;
  --layer: 8;
}

.surprise-sticker svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.surprise-sticker svg text {
  font: 700 23px 'Caveat','Segoe Print',cursive;
  text-anchor: middle;
  fill: #493e35;
  stroke: none;
}

@media(max-width:760px) {
  .hero .surprise-sticker {
    width: 90px;
  }

  .hero .intro-canvas {
    min-height: 770px;
  }
}

.sticker-box {
  transform: rotate(-11deg);
  transform-origin: 50% 60%;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}

.sticker-box:before {
  content: '';
  position: absolute;
  inset: 10px 15px 0 1px;
  z-index: -1;
  background: #fffaf1;
  border-radius: 46% 38% 42% 35% / 38% 35% 45% 48%;
  box-shadow: 1px 3px 3px #433b3015;
  transform: rotate(3deg);
}

.sticker-box:is(:hover,:focus-visible) {
  transform: rotate(-11deg) scale(1.09);
}

.sticker-box:active {
  transform: rotate(-11deg) scale(1.04);
}

.sticker-box:before {
  display: none;
}

.sticker-box {
  top: 77%;
  translate: -50% 0;
}

.reset-stickers {
  padding: 0;
  gap: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: transform .25s;
  isolation: isolate;
}

.reset-stickers svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(1px 2px 1px #433b3018);
}

.reset-stickers:hover {
  background: none;
}

.reset-stickers:focus-visible {
  background: none;
}

@media(max-width:760px) {
  .sticker-box {
    top: 73%;
  }

  .reset-stickers {
    padding: 0;
  }
}

.sticker-box {
  width: 154px;
  padding: 0 48px 0 0;
  filter: url('#box-sticker-outline') drop-shadow(0 2px 1px #433b3015);
}

.sticker-box svg {
  filter: none;
}

@media(max-width:760px) {
  .sticker-box {
    width: 124px;
    padding: 0 43px 0 0;
  }
}

.reset-stickers {
  right: auto;
  top: calc(77% + 35px);
  bottom: auto;
  width: 58px;
  height: 58px;
  transform: rotate(9deg);
}

.reset-stickers:hover {
  transform: rotate(-7deg) scale(1.1);
}

.reset-stickers:focus-visible {
  transform: rotate(-7deg) scale(1.1);
}

.reset-stickers:active {
  transform: rotate(-7deg) scale(1.03);
}

@media(max-width:760px) {
  .reset-stickers {
    right: auto;
    top: calc(73% + 27px);
    bottom: auto;
    width: 47px;
    height: 47px;
  }
}

.sticker-box {
  left: calc(50% - 43px);
}

.reset-stickers {
  left: calc(50% + 62px);
}

@media(max-width:760px) {
  .sticker-box {
    left: calc(50% - 32px);
  }

  .reset-stickers {
    left: calc(50% + 46px);
  }
}

.sticker-controls {
  position: absolute;
  top: 77%;
  z-index: 9;
  pointer-events: none;
}

.sticker-controls .sticker-box {
  position: relative;
  inset: auto;
  translate: none;
  padding: 0;
  justify-self: center;
  transform: rotate(-11deg);
  pointer-events: auto;
}

.sticker-controls .sticker-box svg {
  width: 100%;
  height: auto;
}

.box-open {
  display: none;
}

.sticker-box:is(:hover,:focus-visible,.is-dispensing) .box-closed {
  display: none;
}

.sticker-box:is(:hover,:focus-visible,.is-dispensing) .box-open {
  display: inline;
}

.sticker-controls .sticker-box:is(:hover,:focus-visible) {
  transform: rotate(-11deg) scale(1.09);
}

.sticker-controls .reset-stickers {
  position: relative;
  inset: auto;
  padding: 0;
  justify-self: center;
  pointer-events: auto;
}

.click-sticker {
  display: block;
  justify-self: center;
  font: 700 29px/1 'Caveat','Segoe Print',cursive;
  transform: rotate(-7deg);
  paint-order: stroke fill;
  pointer-events: none;
  white-space: nowrap;
}

@media(max-width:760px) {
  .sticker-controls {
    top: 73%;
  }

  .sticker-controls .sticker-box {
    padding: 0;
  }

  .sticker-controls .reset-stickers {
    padding: 0;
  }
}

.hero {
  overflow: visible;
}

.sticker-controls {
  grid-template-columns: 72px 108px 72px;
}

.click-sticker {
  position: relative;
  padding: 4px 7px 7px;
  color: #8b5749;
  -webkit-text-stroke: 5px #fffaf1;
  filter: drop-shadow(1px 3px 1px #7d574b22);
}

.click-sticker:before {
  content: '✦';
  position: absolute;
  font: 16px/1 var(--serif);
  -webkit-text-stroke: 2px #fffaf1;
  paint-order: stroke fill;
  color: #8da18a;
  pointer-events: none;
}

.click-sticker:after {
  content: '✦';
  position: absolute;
  font: 16px/1 var(--serif);
  -webkit-text-stroke: 2px #fffaf1;
  paint-order: stroke fill;
  pointer-events: none;
}

.click-sticker:before {
  transform: rotate(-15deg);
}

.click-sticker:after {
  right: -3px;
  bottom: 1px;
  font-size: 12px;
  color: #c89b65;
  transform: rotate(13deg);
}

.sticker-controls:has(button:hover) .click-sticker {
  animation: none;
  transform: rotate(-4deg) scale(1.08);
}

@media(max-width:760px) {
  .sticker-controls {
    grid-template-columns: 60px 90px 60px;
  }

  .click-sticker:before {
    font-size: 13px;
  }

  .click-sticker:after {
    font-size: 10px;
  }
}

@media(min-width:1101px) {
  .hero .sticker-journal {
    left: 3.5%;
    right: auto;
    top: 15%;
    width: 11%;
    --angle: -12deg;
  }

  .hero .sticker-badminton {
    left: 5.5%;
    right: auto;
    top: 32%;
    --angle: 10deg;
  }

  .hero .sticker-junimo {
    left: 4%;
    right: auto;
    top: 60%;
    --angle: -8deg;
  }

  .hero .sticker-character {
    left: auto;
    right: -1%;
    top: 10%;
    width: 25%;
    --angle: 3deg;
  }

  .hero .sticker-logo-cat {
    left: auto;
    right: -4%;
    top: 62%;
    width: 10%;
    --angle: 10deg;
  }
}

@media(max-width:1100px) and (min-width:761px) {
  .hero .sticker-journal {
    left: 2%;
    right: auto;
    top: 15%;
    width: 12%;
  }

  .hero .sticker-badminton {
    left: 3%;
    right: auto;
    top: 33%;
  }

  .hero .sticker-junimo {
    left: 3%;
    right: auto;
    top: 60%;
  }

  .hero .sticker-character {
    left: auto;
    right: -1%;
    top: 12%;
    width: 26%;
  }

  .hero .sticker-logo-cat {
    left: auto;
    right: -3%;
    top: 63%;
    width: 11%;
  }
}

.click-sticker:before {
  left: 3px;
  top: 5px;
}

.sticker-controls {
  display: flex;
  width: max-content;
  align-items: center;
  justify-content: center;
  left: 50%;
  translate: -50% 0;
}

.sticker-controls>.sticker-box {
  flex-shrink: 0;
}

.sticker-controls>.click-sticker {
  flex-shrink: 0;
}

.sticker-controls>.reset-stickers {
  flex-shrink: 0;
}

.sticker-controls .sticker-box svg {
  overflow: visible;
}

.hero .surprise-sticker {
  aspect-ratio: 1/1;
}

.hero .surprise-sticker .sticker-art {
  display: block;
  width: 100%;
  height: 100%;
}

.hero .surprise-sticker img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sticker-controls.is-empty:after {
  content: 'All found! Click the flower to reset.';
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  width: max-content;
  max-width: 270px;
  text-align: center;
  color: #765544;
  font: 500 11px/1.5 var(--sans);
  pointer-events: none;
}

.custom-cursor {
  position: fixed;
  left: 0;
  top: 0;
  display: none;
  z-index: 1000;
  pointer-events: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  filter: none;
  transform-origin: center;
  rotate: none;
  scale: none;
  background: transparent;
  transition: none;
}

@media(pointer:fine) {
  body {
    cursor: default;
  }

  body * {
    cursor: default;
  }

  body.custom-cursor-ready {
    cursor: none;
  }

  body.custom-cursor-ready * {
    cursor: none;
  }

  .hero .collage-sticker {
    cursor: url('assets/tweezers-open.svg') 11 33,grab;
  }

  .hero .collage-sticker.is-dragging {
    cursor: url('assets/tweezers-closed.svg') 11 33,grabbing;
  }

  .hero .collage-sticker:active {
    cursor: url('assets/tweezers-closed.svg') 11 33,grabbing;
  }
}

@media(pointer:fine) {
  html {
    cursor: default;
  }
}

@media(min-width:1101px) {
  .hero .sticker-badminton {
    width: 11%;
  }
}

@media(max-width:1100px) and (min-width:761px) {
  .hero .sticker-badminton {
    width: 12%;
  }
}

@media(max-width:760px) {
  .hero .sticker-badminton {
    width: 19.5%;
  }
}

@media(min-width:1101px) {
  .hero .sticker-junimo {
    width: 6.5%;
  }
}

@media(max-width:1100px) and (min-width:761px) {
  .hero .sticker-junimo {
    width: 7.225%;
  }
}

@media(max-width:760px) {
  .hero .sticker-junimo {
    width: 10.84%;
  }
}

@media(pointer:fine) {
  body.custom-cursor-ready .hero .collage-sticker {
    cursor: none;
  }

  body.custom-cursor-ready .hero .collage-sticker:active {
    cursor: none;
  }

  body.custom-cursor-ready.over-sticker-art .hero .collage-sticker {
    cursor: none;
  }

  body.custom-cursor-ready.holding-sticker-art .hero .collage-sticker {
    cursor: none;
  }
}

.custom-cursor.is-tweezers {
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: transparent url('assets/tweezers-open.svg') center/contain no-repeat;
  transition: none;
  rotate: 0deg;
  scale: 1;
}

.custom-cursor.is-tweezers.is-gripping {
  background-image: url('assets/tweezers-closed.svg');
}

@media(pointer:fine) {
  body.custom-cursor-ready .hero .intro-copy .identity-tape {
    cursor: none;
  }

  body.custom-cursor-ready .hero .intro-copy .identity-tape * {
    cursor: none;
  }
}

.hero .intro-copy .work-link {
  position: relative;
  display: inline-block;
  margin-top: 29px;
  padding: 5px 5px 19px;
  border: 0;
  color: var(--ink);
  font: 700 27px/1.2 'Caveat','Segoe Print','Bradley Hand',cursive;
  letter-spacing: .01em;
  transform: rotate(-2deg);
  transition: transform .25s ease;
}

.work-doodle {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 26px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.work-underline {
  opacity: .7;
}

.hero .intro-copy .work-link:is(:hover,:focus-visible) {
  transform: rotate(0deg) translateY(-2px);
}

@media(prefers-reduced-motion:reduce) {
  .hero .intro-copy .work-link {
    transition: none;
  }

  .hero .intro-copy .work-link:is(:hover,:focus-visible) {
    transform: rotate(-2deg);
  }
}

.header nav a {
  display: inline-block;
  transition: transform .25s ease,color .25s ease;
}

.header nav a:after {
  left: -3%;
  bottom: -10px;
  width: 106%;
  height: 9px;
  border: 0;
  background: currentColor;
  opacity: .75;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 12'%3E%3Cpath d='M3 7Q39 2 78 6T157 5M17 10Q66 7 126 9' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  transform: scaleX(0) rotate(-1deg);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
  pointer-events: none;
}

.header nav a:is(:hover,:focus-visible) {
  transform: translateY(-2px) rotate(-1.5deg);
}

.header nav a:nth-child(2):is(:hover,:focus-visible) {
  transform: translateY(-2px) rotate(1.5deg);
}

.header nav a:is(:hover,:focus-visible):after {
  width: 106%;
  transform: scaleX(1) rotate(-1deg);
}

.header nav a:active {
  transform: translateY(0) scale(.97);
}

.header .nav-connect span {
  display: inline-block;
  transition: transform .25s ease;
}

.header .nav-connect:is(:hover,:focus-visible) span {
  transform: translate(2px,-2px) rotate(6deg);
}

@media(prefers-reduced-motion:reduce) {
  .header nav a {
    transition: none;
  }

  .header nav a:after {
    transition: none;
  }

  .header .nav-connect span {
    transition: none;
  }

  .header nav a:is(:hover,:focus-visible,:active) {
    transform: none;
  }

  .header nav a:nth-child(2):is(:hover,:focus-visible) {
    transform: none;
  }

  .header .nav-connect:is(:hover,:focus-visible) span {
    transform: none;
  }
}

.sticker-controls {
  gap: 12.6px;
}

.sticker-controls .sticker-box {
  width: 54px;
}

.sticker-controls .reset-stickers {
  width: 52.2px;
  height: 52.2px;
}

.click-sticker {
  font-size: 46.8px;
  animation: none;
}

@media(max-width:760px) {
  .sticker-controls {
    gap: 9.9px;
  }

  .sticker-controls .sticker-box {
    width: 45px;
  }

  .sticker-controls .reset-stickers {
    width: 42.3px;
    height: 42.3px;
  }

  .click-sticker {
    font-size: 39.6px;
  }
}

.custom-cursor .cursor-droplet {
  display: block;
  position: absolute;
  left: -16px;
  top: -16px;
  width: 40px;
  height: 40px;
  overflow: visible;
  fill: #293f39;
  transform-origin: 50% 50%;
  transition: opacity .28s ease,transform .35s ease;
}

.custom-cursor.is-tweezers .cursor-droplet {
  display: none;
}

.custom-cursor.is-bulb .cursor-droplet {
  opacity: 0;
  animation: dot-to-bulb .35s ease-out both;
}

.custom-cursor .cursor-bulb {
  position: absolute;
  display: block;
  left: -10px;
  top: -10px;
  width: 28px;
  height: 33.6px;
  overflow: visible;
  opacity: 0;
  transform: rotate(14deg) scale(.45,.65);
  transform-origin: 50% 42%;
  transition: opacity .28s ease,transform .35s cubic-bezier(.2,.75,.25,1);
  color: var(--ink);
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.custom-cursor.is-bulb .cursor-bulb {
  opacity: 1;
  transform: rotate(14deg) scale(1);
  animation: bulb-unfold .35s ease-out both;
}

.custom-cursor.is-tweezers .cursor-bulb {
  display: none;
}

.cursor-bulb .bulb-glass {
  fill: var(--pink);
  fill-opacity: 0;
  stroke: none;
  transition: fill-opacity .12s ease,filter .2s ease;
}

.cursor-bulb .bulb-rays {
  stroke: var(--pink);
  stroke-width: 2.1;
  opacity: 0;
  transition: opacity .18s ease;
}

.custom-cursor.is-lit .bulb-glass {
  fill-opacity: .22;
  filter: drop-shadow(0 0 5px var(--pink));
}

.custom-cursor.is-lit .bulb-rays {
  opacity: 1;
}

@media(prefers-reduced-motion:reduce) {
  .custom-cursor .cursor-bulb {
    transition: none;
  }

  .custom-cursor .cursor-droplet {
    transition: none;
  }

  .cursor-bulb .bulb-glass {
    transition: none;
  }

  .cursor-bulb .bulb-rays {
    transition: none;
  }
}

@keyframes dot-to-bulb {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  45% {
    opacity: .45;
    transform: rotate(14deg) scale(.8,1.45);
  }

  100% {
    opacity: 0;
    transform: rotate(14deg) scale(.5,1.7);
  }
}

@keyframes bulb-unfold {
  0% {
    opacity: 0;
    transform: rotate(14deg) scale(.45,.65);
  }

  40% {
    opacity: .5;
    transform: rotate(14deg) scale(.8,1.05);
  }

  100% {
    opacity: 1;
    transform: rotate(14deg) scale(1);
  }
}

@media(prefers-reduced-motion:reduce) {
  .custom-cursor.is-bulb .cursor-droplet {
    animation: none;
  }

  .custom-cursor.is-bulb .cursor-bulb {
    animation: none;
  }
}

/* Compact mobile landing layout. */
@media(max-width:760px){
  .header{height:76px;gap:10px}
  .header nav{gap:14px;font-size:11px;flex-shrink:0}
  .header nav a:nth-child(2){display:inline-flex}
  .hero .intro-canvas{min-height:600px;padding-top:76px;padding-bottom:40px}
  .hero .intro-copy{--hero-type:clamp(36px,7.8vw,50px);width:100%}
  .hero .intro-copy h1{font-size:var(--hero-type);margin-inline:0}
  .hero .intro-copy .identity-line{flex-wrap:nowrap;font-size:calc(var(--hero-type) * .70);gap:.15em}
  .hero .sticker-character{top:53%;right:5%;width:34%}
  .hero .sticker-logo-cat{top:76%;right:5%;width:16%}
  .hero .sticker-journal{top:3%;left:1%;width:17%}
  .hero .sticker-badminton{top:52%;left:3%;width:21%}
  .hero .sticker-junimo{top:75%;left:8%;width:16%}
}
@media(max-width:380px){
  .header{margin-inline:5%;gap:8px}
  .header .wordmark{font-size:21px;gap:5px}
  .header .wordmark img{width:32px;height:32px}
  .header nav{gap:11px;font-size:10px}
  .hero .intro-copy{--hero-type:clamp(30px,8.7vw,36px)}
  .hero .intro-canvas{min-height:560px}
}

/* Target the sticker on hover; grip it only while dragging. */
.custom-cursor.is-crosshair{width:24px;height:24px;border:0;border-radius:0;rotate:0deg;scale:1;background:linear-gradient(#293f39,#293f39) center/1px 22px no-repeat,linear-gradient(#293f39,#293f39) center/22px 1px no-repeat;transition:none}
.custom-cursor.is-crosshair .cursor-droplet{display:none}

.flower-top{position:fixed;right:24px;bottom:24px;z-index:100;width:70px;height:70px;border:0;padding:0;background:transparent;cursor:pointer;filter:drop-shadow(0 4px 5px #293f3925);transition:transform .2s}.flower-top svg{width:100%;height:100%;display:block}.flower-top:hover{transform:rotate(12deg) translateY(-3px)}.flower-top:focus-visible{outline:2px solid #426c5e;outline-offset:4px;border-radius:50%}@media(max-width:760px){.flower-top{width:58px;height:58px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom))}}@media(prefers-reduced-motion:reduce){.flower-top{transition:none}}

.kc-cover{background:#dce2d1}.kc-cover-screens{height:100%;display:flex;justify-content:center;align-items:center;gap:16px;padding:60px 25px 25px}.kc-cover-screens img{width:28%;max-height:100%;object-fit:contain;filter:drop-shadow(0 8px 8px #293f3922)}.kc-cover-screens img:nth-child(2){transform:translateY(15px)}.project-kc{text-decoration:none;display:block}.project-kc .project-meta p{max-width:350px;line-height:1.6}@media(max-width:760px){.kc-cover-screens{gap:10px;padding:50px 14px 25px}}

.flower-top-tooltip{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(4px);padding:7px 12px;border:1px solid #293f3933;border-radius:7px;background:#f3ebdd;color:#293f39;font:13px/1.4 'DM Sans',Arial,sans-serif;white-space:nowrap;box-shadow:0 3px 12px #293f3912;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,transform .15s}.flower-top:hover .flower-top-tooltip,.flower-top:focus-visible .flower-top-tooltip{opacity:1;visibility:visible;transform:translateY(-50%)}

.corelab-live-cover{display:flex;align-items:center;justify-content:center;background:#e8e6d9}.corelab-live-cover>img{height:82%;width:auto;max-width:80%;object-fit:contain;border-radius:8px;box-shadow:0 8px 22px #293f3922}

.corelab-live-cover .cover-index{color:#293f39;z-index:2}.corelab-cover-layout{display:flex;align-items:center;justify-content:center;gap:9%;width:100%;height:100%;padding:55px 7% 25px}.corelab-phone{height:100%;aspect-ratio: .49;background:#f9f7f0;border:2px solid #293f39;border-radius:25px;padding:12px 7px 10px;box-shadow:9px 13px 0 #293f3910;transform:rotate(-5deg);display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}.corelab-phone>img{min-height:0;flex:1;width:100%;object-fit:cover;object-position:top;border:1px solid #293f3920;border-radius:3px}.corelab-phone-speaker{width:23%;height:3px;border-radius:10px;background:#293f39;flex-shrink:0}.corelab-phone-home{width:13px;height:13px;border:1px solid #293f3950;border-radius:50%;flex-shrink:0}.corelab-cover-side{display:flex;flex-direction:column;align-items:flex-start;max-width:52%;gap:6px}.corelab-cover-name{font-family:var(--serif);font-size:clamp(25px,3.1vw,46px);line-height:1.2}.corelab-cover-note{font-family:'Caveat',cursive;font-size:22px}.corelab-cover-side>img{width:100%;max-width:230px;height:auto;margin:25px 0 15px}.corelab-cover-caption{font-size:9px;letter-spacing:1px;line-height:1.5}@media(max-width:760px){.corelab-cover-layout{gap:8%;padding:55px 7% 25px}.corelab-cover-name{font-size:31px}.corelab-cover-note{font-size:19px}.corelab-cover-side>img{margin:22px 0 12px}.corelab-phone{border-radius:21px}}

/* CoreLab cover: stronger contrast between the paper, device and project label. */
.corelab-live-cover{background:#c6d2bf;border:1px solid #6e8677}
.corelab-live-cover .cover-index{color:#243c32;font-weight:700;opacity:1}
.corelab-cover-name{color:#213b30;font-weight:600}
.corelab-cover-note{color:#304d3d}
.corelab-cover-caption{color:#243c32;font-weight:700;letter-spacing:.7px}
.corelab-phone{background:#fffaf1;border-color:#243c32;box-shadow:9px 13px 0 #425c4430}

.joy-project-cover{background:#e4d6c4;padding:60px 9% 0}.joy-project-cover .cover-index{color:#293f39;opacity:1}.joy-cover-window{height:100%;overflow:hidden;border:5px solid #fffaf1;border-radius:10px 10px 0 0;box-shadow:8px 10px 0 #293f3915;transform:rotate(-2deg)}.joy-cover-window img{display:block;width:100%;height:auto}

/* Joy Studio cover: completed workshop pages in a layered browser composition. */
.joy-project-cover{padding:0;background:#dccbb8;isolation:isolate}.joy-project-cover .cover-index{z-index:5;color:#293f39}.joy-mock-composition{position:relative;width:100%;height:100%;overflow:hidden;background:radial-gradient(ellipse at 50% 55%,#f5eddd 0%,transparent 65%)}.joy-mock-window{position:absolute;overflow:hidden;background:#fffaf1;border:1px solid #52644a55;border-radius:8px;box-shadow:0 12px 24px #3b493a30}.joy-mock-bar{height:20px;display:flex;align-items:center;gap:3px;padding:0 7px;background:#f3ebdd;border-bottom:1px solid #293f3920}.joy-mock-bar i{width:3px;height:3px;border-radius:50%;background:#aa6e60}.joy-mock-bar span{font:6px/1 'DM Sans',sans-serif;color:#3c5145;margin-left:5px;white-space:nowrap}.joy-mock-window img{display:block;width:100%;height:auto}.joy-mock-left{width:39%;height:80%;left:4%;top:18%;transform:rotate(-9deg)}.joy-mock-right{width:39%;height:80%;right:4%;top:15%;transform:rotate(9deg)}.joy-mock-front{width:51%;height:79%;left:24.5%;top:26%;z-index:3;box-shadow:0 14px 30px #293f3940}.project-joy:hover .joy-mock-front{transform:translateY(-5px)}.joy-mock-front{transition:transform .3s ease}@media(max-width:760px){.joy-mock-left{top:20%;height:75%}.joy-mock-right{top:17%;height:75%}.joy-mock-front{top:29%;height:75%}.joy-mock-bar{height:18px}.joy-mock-bar span{font-size:5px}}@media(prefers-reduced-motion:reduce){.joy-mock-front{transition:none}}

/* DreamPurr: published course website cover */
.dream-cover{background:#cbdde0;padding:65px 6% 28px;display:flex;align-items:center;justify-content:center}.dream-cover .cover-index{color:#293f39;opacity:1;z-index:2}.dream-cover-pages{display:flex;align-items:center;justify-content:center;gap:5%;width:100%;height:100%;max-height:300px}.dream-page{margin:0;width:29%;flex:0 1 29%;background:white;border:1px solid #293f3930;box-shadow:0 12px 20px #293f3920;border-radius:4px;overflow:hidden}.dream-page img{display:block;width:100%;height:auto}.dream-cover-bar{padding:6px 3px;text-align:center;background:#eff4f4;font:7px/1.2 'DM Sans',sans-serif;color:#293f39;border-bottom:1px solid #293f3920}.dream-page-list{transform:rotate(-7deg);max-width:80px}.dream-page-home{transform:translateY(-8px);max-width:102px}.dream-page-detail{transform:rotate(7deg);max-width:95px}.project-cat:hover .dream-cover{border-radius:0;transform:translateY(-5px)}@media(max-width:700px){.dream-cover{padding:55px 8% 25px}.dream-cover-pages{max-height:260px}.dream-page-list{max-width:66px}.dream-page-home{max-width:83px}.dream-page-detail{max-width:77px}.dream-cover-bar{font-size:6px}}

/* Mad Dragon Music Group project cover */
.project-mad{display:block;text-decoration:none}.mad-cover{background:#c9c7df;padding:65px 6% 28px;display:flex;align-items:center;justify-content:center}.mad-cover .cover-index{color:#293f39;opacity:1}.mad-cover-pages{display:flex;align-items:center;justify-content:center;gap:5%;width:100%;height:100%}.mad-cover-pages img{width:29%;max-height:100%;object-fit:contain;filter:drop-shadow(0 10px 9px #26314830)}.mad-cover-pages img:first-child{transform:rotate(-5deg)}.mad-cover-pages img:last-child{transform:rotate(5deg)}@media(max-width:700px){.mad-cover{padding:55px 6% 25px}}