/* ============================================================
   Ushiyutvj — creator page
   Flat black, one fluorescent accent, chunky rounded type,
   stickers that bleed off the edges.
   ============================================================ */

:root {
  --bg:          #fbf3e4;   /* warm paper */
  --surface:     #ffffff;
  --surface-2:   #fff8ec;
  --border:      rgba(21, 17, 30, 0.16);

  --ink:         #17121f;
  --muted:       #5c5470;
  --faint:       #8b8199;

  /* Two accents, not one, so the page can rank things: cyan carries structure
     and anything you interact with, pink is reserved for emphasis and the
     primary call to action. */
  --accent:      #c9b4ff;   /* lavender  — structure and anything interactive */
  --accent-2:    #ffbfa3;   /* peach     — the primary call to action */
  --accent-3:    #9ff3d2;   /* mint      — the secondary action */
  --accent-4:    #ffe6a0;   /* butter    — small highlights */
  --accent-ink:  #17121f;   /* text sitting on any accent */

  /* deepened twins — the pastels above are fills only; on paper they need
     these to survive as text, borders and small marks */
  --accent-deep:   #6b3fd4;   /* lavender */
  --accent-2-deep: #d2542a;   /* peach    */
  --accent-3-deep: #0f9b74;   /* mint     */
  --accent-4-deep: #b8860b;   /* butter   */
  --koma:        #f4ead0;   /* shogi piece stock */

  --radius:      24px;
  --radius-sm:   999px;

  --font: "Outfit", system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-ja: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }


/* ------------------------------------------------------------
   Sticky bar
   ------------------------------------------------------------ */

/* Sits directly after the hero in the document, so it simply scrolls with the
   page and pins itself once you reach it. No JS, and no duplication with the
   hero pills, which are still on screen above it. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 3.5rem;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: rgba(251, 243, 228, 0.88);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
}

.topbar__name {
  flex: 0 0 auto;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.035em;
}

.topbar__links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.topbar__links::-webkit-scrollbar { display: none; }

.topbar__links a {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
  transition: color 0.18s ease;
}

.topbar__links a:hover,
.topbar__links a:focus-visible { color: var(--accent); }

@media (max-width: 620px) {
  .topbar { padding: 0 1rem; gap: 1rem; }
  .topbar__name { display: none; }
  .topbar__links { margin-left: 0; gap: 1.125rem; }
}


/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 10vw, 7rem) 1.5rem clamp(3rem, 7vw, 5.5rem);
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}

.hero__avatar {
  width: 5.5rem;
  height: 5.5rem;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent);
}

.hero__name {
  margin: 0;
  font-size: clamp(3rem, 13vw, 6.5rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.95;
  background: linear-gradient(96deg, var(--accent) 8%, var(--accent-2) 52%, var(--accent-4) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__tagline {
  margin: 1.25rem auto 0;
  max-width: 30rem;
  color: var(--muted);
  font-size: clamp(1rem, 2.8vw, 1.25rem);
  font-weight: 500;
  line-height: 1.5;
  text-wrap: pretty;
}

.hero__tagline em { font-style: normal; font-weight: 700; }
.hero__tagline em:first-of-type { color: var(--accent-3-deep); }
.hero__tagline em:last-of-type  { color: var(--accent-2-deep); }

.hero__nav {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
}

.hero__nav a {
  padding: 0.6875rem 1.375rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.hero__nav a:hover,
.hero__nav a:focus-visible {
  background: var(--accent);
  color: var(--accent-ink);
  transform: translateY(-2px);
}


/* ------------------------------------------------------------
   Stickers
   ------------------------------------------------------------ */

.stickers {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.sticker {
  position: absolute;
  display: grid;
  place-items: center;
  color: var(--accent-ink);
  line-height: 1;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.75));
}

/* chess disc */
.sticker--disc {
  border-radius: 50%;
  background: var(--accent);
  /* the chess glyphs are only in the system symbol faces */
  font-family: "Apple Symbols", "Segoe UI Symbol", serif;
}

/* shogi koma — the classic pentagon */
.sticker--koma {
  background: var(--koma);
  clip-path: polygon(50% 0%, 78% 15%, 93% 100%, 7% 100%, 22% 15%);
}

.sticker--koma span {
  font-family: var(--font-ja);
  font-weight: 900;
  padding-top: 0.12em;
}

/* fill for the flipped koma now lives on ::before — see the paper block */

/* Positions are deliberately off-canvas on one edge so the shapes crop. */
.s1 { width: 9rem;  height: 9rem;  top: 4%;   left: -3rem;  font-size: 4.5rem; transform: rotate(-16deg); }
.s2 { width: 6.5rem; height: 7rem;  top: 12%;  left: 12%;    font-size: 3.2rem; transform: rotate(13deg); }
.s3 { width: 7rem;  height: 7rem;  top: 2%;   right: 8%;    font-size: 3.6rem; transform: rotate(20deg); }
.s4 { width: 8.5rem; height: 9rem;  top: 30%;  right: -3rem; font-size: 4.2rem; transform: rotate(-11deg); }
.s5 { width: 6rem;  height: 6rem;  bottom: 6%; left: 6%;    font-size: 3rem;   transform: rotate(24deg); }
.s6 { width: 5.5rem; height: 6rem;  bottom: -2rem; right: 16%; font-size: 2.7rem; transform: rotate(-20deg); }
.s7 { width: 5rem;  height: 5rem;  top: 46%;  left: 3%;     font-size: 2.5rem; transform: rotate(-28deg); }
.s8 { width: 6rem;  height: 6.5rem; bottom: 14%; right: 4%;  font-size: 2.9rem; transform: rotate(9deg); }

@media (max-width: 900px) {
  .s2, .s5, .s7 { display: none; }
}

@media (max-width: 620px) {
  /* Two stickers is what the phone hero fits. The avatar band is taken by
     these two, and below it the name and tagline run the full width — a third
     and fourth measurably collided with the tagline and with each other. */
  .s3, .s6, .s8 { display: none; }

  .s1 { width: 6.5rem; height: 6.5rem; font-size: 3.2rem; top: 2%; left: -2rem; }
  .s4 { width: 6rem; height: 6.5rem; font-size: 3rem; right: -2rem; top: 22%; }
}


/* ------------------------------------------------------------
   Sections
   ------------------------------------------------------------ */

main {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding-block: clamp(2.75rem, 7vw, 4.5rem);
  /* clears the fixed bar when you jump to an anchor */
  scroll-margin-top: 4.5rem;
}

.section__head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.section__num {
  padding: 0.3125rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.4;
}

.section__title {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3.25rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.section__count {
  margin-left: auto;
  color: var(--faint);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.section__sub {
  margin: 0.75rem 0 2rem;
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.6;
}

.section__head + .grid { margin-top: 2rem; }


/* Subject group inside a section */
.subhead {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 2.75rem 0 1.25rem;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.section__sub + .subhead { margin-top: 0; }

.subhead__title::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--accent-4-deep);
  vertical-align: 0.02em;
}

.subhead__count { margin-left: auto; color: var(--faint); }


/* ------------------------------------------------------------
   Cards
   ------------------------------------------------------------ */

.grid {
  display: grid;
  gap: 1.125rem;
}

.grid--apps  { grid-template-columns: repeat(auto-fill, minmax(min(25rem, 100%), 1fr)); }
.grid--books { grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); }
.grid--links { grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.card:hover,
.card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--accent);
  background: var(--surface-2);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  padding: 1.375rem;
}

.card__title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.25;
  text-wrap: pretty;
}

.card__desc {
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.6;
  text-wrap: pretty;
}

.card__meta {
  margin-top: 0.5rem;
  color: var(--faint);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
}


/* --- app card: the banner fills the top ------------------- */

/* 1200x630 is the og:image aspect most of these sites use. */
.card__thumb {
  display: block;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  background: #000;
}

.card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Centre by default. Artwork whose aspect differs from the box can shift
     its own crop with --thumb-pos on the card. */
  object-position: var(--thumb-pos, 50% 50%);
  transition: transform 0.4s ease;
}

.card--app:hover .card__thumb img { transform: scale(1.04); }


/* --- book card: cover tilted like a sticker --------------- */

.card__cover {
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 3;
  padding: 1.5rem 1.5rem 0.5rem;
  background: radial-gradient(75% 55% at 50% 8%, rgba(201, 180, 255, 0.15), transparent 72%);
}

/* Covers vary from 281 to 371px wide at 500 tall, so constrain BOTH axes
   and let the intrinsic ratio pick which one binds. */
.card__cover img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 3px;
  box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.9);
  transform: rotate(-2deg);
  transition: transform 0.28s ease;
}

.card--book:hover .card__cover img { transform: rotate(0deg) scale(1.04); }

.card--book .card__title { font-size: 1rem; }
.card--book .card__desc  { font-size: 0.8125rem; }
.card--book .card__body  { padding: 1.125rem 1.25rem 1.375rem; }

/* Japanese titles and subtitles: proper JP face, phrase-aware breaks. */
.card__title:lang(ja),
.card__desc:lang(ja) {
  font-family: var(--font-ja);
  word-break: auto-phrase;
}

.card__title:lang(ja) { font-weight: 900; line-height: 1.5; letter-spacing: -0.01em; }
.card__desc:lang(ja)  { font-weight: 500; line-height: 1.7; }


/* --- link card: big lime pill ----------------------------- */

.card--compact {
  flex-direction: row;
  align-items: center;
  gap: 0.875rem;
  padding: 1.125rem 1.375rem;
  border-radius: var(--radius-sm);
  border-color: transparent;
  background: var(--surface-2);
}

.card--compact:hover,
.card--compact:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-4px);
}

.card__icon {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  line-height: 1;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  transition: background 0.22s ease, color 0.22s ease;
}

/* Official brand marks, inlined from Simple Icons (the icon set is CC0; the
   marks themselves stay the property of each service). They follow
   currentColor so they invert with the pill on hover. */
.card__icon svg {
  width: 1.125rem;
  height: 1.125rem;
  display: block;
}

.card--compact:hover .card__icon { background: var(--accent-ink); color: var(--accent); }

.card--compact .card__body { gap: 0; padding: 0; }
.card--compact .card__title { font-size: 1.0625rem; }
.card--compact .card__meta { margin-top: 0.0625rem; }

.card--compact:hover .card__title,
.card--compact:hover .card__meta { color: var(--accent-ink); }


/* ------------------------------------------------------------
   Contact
   ------------------------------------------------------------ */

.contact {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius);
  background: var(--accent-2);
  color: var(--accent-ink);
  transition: transform 0.22s ease, filter 0.22s ease;
}

.contact:hover,
.contact:focus-visible {
  transform: translateY(-4px);
  filter: brightness(1.06);
}

.contact__label {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.62;
}

.contact__value {
  font-size: clamp(1.125rem, 3.4vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.contact__arrow {
  margin-left: auto;
  font-size: 1.375rem;
  font-weight: 700;
  transition: transform 0.18s ease;
}

.contact:hover .contact__arrow { transform: translate(3px, -3px); }

@media (max-width: 620px) {
  .contact { flex-wrap: wrap; gap: 0.375rem 1rem; }
  .contact__label { width: 100%; }
  .contact__arrow { margin-left: auto; }
}


/* ------------------------------------------------------------
   Support
   ------------------------------------------------------------ */

/* Same bar as Contact so the two read as a pair, but outlined rather than
   filled — Contact stays the louder of the two, and asking for money should
   not shout. Its own section, not a pill buried in Elsewhere. */
.support {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}

.support:hover,
.support:focus-visible {
  transform: translateY(-4px);
  background: var(--accent-3);
  color: var(--accent-ink);
}

.support__label {
  flex: 0 0 auto;
  color: var(--accent-3-deep);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.22s ease, opacity 0.22s ease;
}

.support:hover .support__label { color: var(--accent-ink); opacity: 0.62; }

.support__value {
  font-size: clamp(1.125rem, 3.4vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.support__arrow {
  margin-left: auto;
  font-size: 1.375rem;
  font-weight: 700;
  transition: transform 0.18s ease;
}

.support:hover .support__arrow { transform: translate(3px, -3px); }

@media (max-width: 620px) {
  .support { flex-wrap: wrap; gap: 0.375rem 1rem; }
  .support__label { width: 100%; }
  .support__arrow { margin-left: auto; }
}


/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */

.footer {
  padding: 3rem 1.5rem 3.5rem;
  text-align: center;
  color: var(--faint);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.footer p { margin: 0; }


/* ------------------------------------------------------------
   Phone layout
   ------------------------------------------------------------ */

@media (max-width: 620px) {
  /* Eleven book cards stacked one-up made the page 13+ screens tall, and the
     Books section alone was two thirds of it. Two-up roughly halves that. */
  .grid--books {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .card--book .card__cover { padding: 0.875rem 0.875rem 0.25rem; }
  .card--book .card__body  { padding: 0.875rem 0.875rem 1rem; }
  .card--book .card__title { font-size: 0.875rem; line-height: 1.35; }
  .card--book .card__desc  { font-size: 0.75rem; }
  .card--book .card__meta  { margin-top: 0.375rem; font-size: 0.6875rem; }

  .card--book .card__title:lang(ja) { font-size: 0.8125rem; line-height: 1.45; }
  .card--book .card__desc:lang(ja)  { font-size: 0.6875rem; }
}


/* ------------------------------------------------------------
   A11y / motion
   ------------------------------------------------------------ */

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

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


/* candy: the discs alternate rather than all sharing one colour */
.s3, .s7 { background: var(--accent-3); }
.s5      { background: var(--accent-4); }
/* fill for the flipped koma now lives on ::before — see the paper block */


/* ============================================================
   Hard-edged pass: thick borders, offset shadows with no blur,
   no hairlines. This is the part that actually reads Gen-Z —
   1px borders and soft shadows read as dark-mode SaaS.
   ============================================================ */

.card {
  border-width: 2px;
  border-color: #17121f;
}

.card:hover,
.card:focus-visible {
  border-color: var(--accent);
  box-shadow: 7px 7px 0 #17121f;
  transform: translate(-3px, -3px);
}

.hero__nav a {
  border: 2px solid #17121f;
}

.hero__nav a:hover,
.hero__nav a:focus-visible {
  border-color: var(--accent);
  box-shadow: 4px 4px 0 #17121f;
  transform: translate(-2px, -2px);
}

.contact,
.support { border-width: 3px; border-style: solid; }
.contact { border-color: var(--ink); box-shadow: 8px 8px 0 #17121f; }
.support { box-shadow: 8px 8px 0 #17121f; }

.contact:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 #17121f; }
.support:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 #17121f; }

.section__num { border: 2px solid var(--accent-ink); }

/* covers and banners get the same hard edge */
.card__cover img { box-shadow: 6px 6px 0 #17121f; }
.sticker { filter: none; }

/* Discs are only rounded, so a real border and shadow both work. */
.sticker--disc {
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}

/* clip-path clips border, box-shadow AND the result of filter — the render
   order is filter first, then the clip — so anything drawn outside the
   pentagon is cut away no matter which property draws it. That is why the
   koma had neither outline nor shadow while the discs had both.

   So the element keeps no shape of its own: it is an unclipped wrapper that
   owns the drop-shadow, and the two pseudo layers carry the shape — ::before
   is the ink outline, ::after is the fill inset by the outline width. */
.sticker--koma {
  background: transparent;
  clip-path: none;
  box-shadow: none;
  filter: drop-shadow(6px 6px 0 var(--ink));
}

.sticker--koma::before,
.sticker--koma::after {
  content: "";
  position: absolute;
  clip-path: polygon(50% 0%, 78% 15%, 93% 100%, 7% 100%, 22% 15%);
}

.sticker--koma::before { inset: 0;   background: var(--ink); }
.sticker--koma::after  { inset: 3px; background: var(--accent-4); }

.sticker--koma.is-flipped::after { background: var(--accent-2); }

.sticker--koma span { position: relative; z-index: 1; }

/* on paper the display type needs ink, not a pale gradient */
.hero__name { background: none; -webkit-text-fill-color: currentColor; color: var(--ink); }
.card__thumb { background: #17121f; }


/* ---- paper-specific ------------------------------------- */

/* The name gets the same hard shadow as everything else — this is the most
   playful move available and it costs nothing. */
.hero__name { text-shadow: 6px 6px 0 var(--accent); }


/* the avatar sits in a ring like the discs do */
.hero__avatar { border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--accent); }

/* the wash behind a book cover was tuned for a dark card */
.card__cover { background: radial-gradient(75% 55% at 50% 8%, rgba(107, 63, 212, 0.10), transparent 72%); }

/* section pills and the topbar rule read as ink on paper */
.topbar { border-bottom: 2px solid var(--ink); }