@charset "UTF-8";
.shinchan-sticker { object-fit: contain; pointer-events: none; user-select: none; }
.namecard-identity { display: grid; grid-template-columns: minmax(0, 1fr) 44%; align-items: center; gap: 13px; margin-top: 20px; }
.namecard-identity .namecard-name { font-size: clamp(29px, 3.2vw, 45px); letter-spacing: 4px; white-space: nowrap; margin-top: 0; }
.namecard-identity .namecard-english { font-size: 8px; letter-spacing: 2.4px; }
.work-sticker { width: 100%; max-width: 178px; justify-self: end; transform: rotate(-3deg); }
.travel-sticker { width: 230px; max-width: 75%; margin-top: 24px; transform: rotate(-3deg); }
.about-main { align-items: center; }
.journal-count { display: flex; align-items: center; gap: 18px; padding-bottom: 0; }
.journal-count > span { white-space: nowrap; }
.journal-sticker { width: 104px; height: 104px; transform: rotate(5deg); }
.letter-greeting { display: flex; flex-wrap: wrap; align-items: center; gap: 17px; }
.letter-greeting h2 { flex: 0 0 auto; white-space: nowrap; }
.letter-sticker { width: clamp(72px, 7vw, 108px); height: auto; flex-shrink: 0; transform: rotate(5deg); }
/* Small geometric doodles use CSS/SVG, separate from the generated illustrations. */
.portal-card, .profile-namecard, .letter-paper, .plan-book, .about-dream-intro, .home-closing { position: relative; }
.portal-card::before {
  content: ""; position: absolute; width: 56px; height: 18px; left: 35px; top: -10px;
  background: repeating-linear-gradient(100deg, #fff9ddba 0 7px, #f2c77eaf 7px 9px);
  border: 1px solid #d5af746b; transform: rotate(-7deg); pointer-events: none;
}
.portal-life::before { left: auto; right: 80px; background: repeating-linear-gradient(100deg, #fff9ddbb 0 7px, #9cbe9f70 7px 9px); transform: rotate(6deg); }
.profile-namecard::before {
  content: ""; position: absolute; width: 65px; height: 21px; top: -12px; left: calc(50% - 32px);
  background: repeating-linear-gradient(105deg, #fff1bccc 0 8px, #e9c978aa 8px 10px);
  border: 1px solid #bf9c5e55; transform: rotate(-5deg); pointer-events: none;
}
.section-kicker { display: flex; align-items: center; gap: 11px; }
.section-kicker::after {
  content: ""; display: inline-block; width: 16px; height: 16px; flex-shrink: 0; background: #f5c35f;
  clip-path: polygon(50% 0, 62% 35%, 100% 38%, 71% 60%, 82% 100%, 50% 77%, 18% 100%, 29% 60%, 0 38%, 38% 35%);
  transform: rotate(12deg); opacity: .85; pointer-events: none;
}
.profile-section:nth-of-type(even) .section-kicker::after { background: #e8a394; transform: rotate(-12deg); }
.about-dream-intro::after {
  content: ""; position: absolute; width: 44px; height: 33px; top: -21px; right: 40px;
  background: url("assets/doodle-cloud.svg") center / contain no-repeat; transform: rotate(7deg); pointer-events: none;
}
.letter-paper::after {
  content: ""; position: absolute; width: 24px; height: 24px; bottom: 20px; left: 20px;
  background: url("assets/doodle-heart.svg") center / contain no-repeat; transform: rotate(-14deg); opacity: .65; pointer-events: none;
}
.home-closing::before {
  content: ""; display: block; margin: 0 auto 22px; width: 58px; height: 40px;
  background: url("assets/doodle-cloud.svg") center / contain no-repeat; transform: rotate(-4deg); pointer-events: none;
}
.plan-tabs button { position: relative; }
.plan-tabs button[aria-selected=true]::after {
  content: ""; position: absolute; right: 9px; top: 7px; width: 7px; height: 7px;
  border: 1.5px solid #fff6d3; border-radius: 50%; opacity: .8; pointer-events: none;
}
@media(max-width: 1100px) {
  .namecard-identity { gap: 10px; }
  .journal-sticker { width: 90px; height: 90px; }
  .letter-greeting { gap: 12px; }
}
@media(max-width: 760px) {
  .namecard-identity .namecard-name { font-size: 34px; }
  .namecard-identity { margin-top: 18px; grid-template-columns: minmax(0, 1fr) 43%; }
  .travel-sticker { width: 190px; max-width: 70%; margin: 20px auto 6px; transform: rotate(-2deg); }
  .about-dream-intro::after { right: 16px; top: -10px; width: 38px; height: 29px; }
  .journal-count { gap: 16px; align-self: flex-end; margin-top: -6px; }
  .journal-sticker { width: 88px; height: 88px; }
  .letter-sticker { width: 76px; }
  .letter-greeting { gap: 12px; }
  .letter-greeting h2 { font-size: 26px; }
  .letter-paper::after { width: 20px; height: 20px; left: auto; right: 18px; bottom: 18px; }
  .portal-card::before { left: 26px; width: 48px; height: 16px; top: -9px; }
  .portal-life::before { left: auto; right: 76px; }
  .section-kicker::after { width: 14px; height: 14px; }
  .home-closing::before { width: 48px; height: 34px; margin-bottom: 18px; }
}
@media(max-width: 370px) {
  .namecard-identity .namecard-name { font-size: 29px; }
  .namecard-identity .namecard-english { font-size: 7px; letter-spacing: 1.6px; }
  .letter-sticker { width: 64px; }
  .letter-greeting { gap: 9px; }
  .letter-greeting h2 { font-size: 24px; }
  .journal-sticker { width: 78px; height: 78px; }
}
/* Each homepage portal has its own illustration and a different set of doodles. */
.portal-work-note { display: grid; grid-template-columns: minmax(0, 1fr) 160px; align-items: center; gap: 18px; min-height: 180px; position: relative; }
.portal-role-info { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.portal-company { font-size: 11px; }
.portal-work-note .portal-shinchan { width: 160px; height: 160px; justify-self: end; transform: rotate(4deg); }
.portal-life-note { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 18px; min-height: 180px; position: relative; }
.portal-life-note > span { font-size: 17px; letter-spacing: 1px; white-space: nowrap; }
.portal-life-note .portal-shinchan { width: 100%; max-width: 160px; height: auto; border: 0; border-radius: 0; box-shadow: none; transform: rotate(-4deg); justify-self: end; }
.home-portals .portal-work::before { width: 26px; height: 44px; top: -15px; left: 34px; background: url("assets/portal-paperclip.svg") center / contain no-repeat; border: 0; transform: rotate(16deg); }
.home-portals .portal-life::before { width: 57px; height: 31px; top: -16px; right: 41px; left: auto; background: url("assets/portal-bow.svg") center / contain no-repeat; border: 0; transform: rotate(8deg); }
.portal-work-note::after { content: ""; position: absolute; width: 23px; height: 23px; top: 0; right: 2px; background: url("assets/portal-check.svg") center / contain no-repeat; transform: rotate(-9deg); pointer-events: none; }
.portal-life-note::after { content: ""; position: absolute; width: 34px; height: 24px; top: -1px; right: 0; background: url("assets/portal-shooting-star.svg") center / contain no-repeat; transform: rotate(9deg); pointer-events: none; }
@media(max-width: 1100px) {
  .portal-work-note { grid-template-columns: minmax(0, 1fr) 135px; gap: 12px; min-height: 180px; }
  .portal-work-note .portal-shinchan { width: 135px; height: 155px; }
  .portal-company { font-size: 10px; letter-spacing: 0; }
  .portal-life-note { grid-template-columns: minmax(0, 1fr) 135px; gap: 12px; }
  .portal-life-note > span { grid-area: 1 / 1; font-size: 15px; line-height: 1.55; align-self: center; }
  .portal-life-note .portal-shinchan { grid-area: 1 / 2; max-width: 135px; }
}
@media(max-width: 760px) {
  .portal-work-note { grid-template-columns: minmax(0, 1fr) 125px; gap: 12px; min-height: 165px; margin: 20px 0; }
  .portal-work-note .portal-shinchan { width: 125px; height: 150px; }
  .portal-role-info { gap: 10px; }
  .portal-work-note .portal-role { font-size: 24px; letter-spacing: 2px; }
  .portal-company { font-size: 10px; line-height: 1.9; }
  .portal-life-note { grid-template-columns: minmax(0, 1fr) 125px; min-height: 170px; margin: 20px 0; gap: 12px; }
  .portal-life-note .portal-shinchan { max-width: 125px; }
  .portal-life-note > span { font-size: 15px; }
  .home-portals .portal-work::before { left: 26px; }
  .home-portals .portal-life::before { right: 32px; }
}
@media(max-width: 370px) {
  .portal-work-note { grid-template-columns: minmax(0, 1fr) 105px; gap: 8px; }
  .portal-work-note .portal-shinchan { width: 105px; height: 140px; }
  .portal-work-note .portal-role { font-size: 22px; }
  .portal-company { font-size: 9px; }
  .portal-life-note { grid-template-columns: minmax(0, 1fr) 105px; gap: 8px; }
  .portal-life-note > span { font-size: 14px; }
}