/* ============================================================
   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. */
  /* Saturated rather than pastel: the palettes named for 2026 run to hot
     magenta, acid green and tangerine, and the rule that is called
     non-negotiable is contrast, not hue. The other three stay pastel — the
     rule of thumb is two or three loud colours, not four. */
  --accent:      #ff4fa3;   /* hot magenta — structure and anything interactive */
  --accent-2:    #ff9e1b;   /* tangerine — 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:   #c2126a;   /* magenta  */
  --accent-2-deep: #d2542a;   /* tangerine */
  --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
   ------------------------------------------------------------ */

/* The hero has no nav of its own any more, so this is the only navigation and
   it leads the page — sticky from the very top. */
.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(2.25rem, 5vw, 3.5rem) 1.5rem clamp(2.75rem, 6vw, 4rem);
}

/* Left-aligned, and as wide as the card grid below it: the name is meant to
   run the full width of the page rather than sit in a centred column. */
.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 68rem;
  margin: 0 auto;
  text-align: left;
}

/* Bigger than the largest sticker on purpose. At avatar size it read as one
   more piece in the scatter; the person has to outrank the decoration. */
.hero__avatar {
  width: clamp(9.5rem, 19vw, 15rem);
  height: clamp(9.5rem, 19vw, 15rem);
  margin: 0 0 1.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent);
}

/* nowrap is the point: the name is sized to reach both edges, and on a wide
   screen the last letter runs past them and gets cropped by .hero. */
.hero__name {
  margin: 0;
  font-size: clamp(3.75rem, 21vw, 18rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.9;
  white-space: nowrap;
  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.5rem 0 0;
  max-width: 34rem;
  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.
   Two zones are off limits now that the hero is left-aligned: the avatar box
   in the top-left corner, and the tagline block along the bottom-left. The
   giant name is fair game — it sits above the stickers and carries a shadow,
   so it stays legible over them. */
/* The top band is anchored from the RIGHT edge, not the left. The avatar is
   in a container that centres on wide screens, so it drifts rightward as the
   window grows; anything positioned with a left percentage marches toward it
   and eventually touches. Measuring from the far edge keeps the gap open. */
.s1 { width: 9rem;  height: 9rem;  top: -3rem;  right: 44%;  font-size: 4.5rem; transform: rotate(-16deg); }
.s2 { width: 6.5rem; height: 7rem;  top: 4%;    right: 30%;  font-size: 3.2rem; transform: rotate(13deg); }
.s3 { width: 7rem;  height: 7rem;  top: -2rem;  right: 8%;   font-size: 3.6rem; transform: rotate(20deg); }
.s4 { width: 8.5rem; height: 9rem;  top: 16%;   right: -3rem; font-size: 4.2rem; transform: rotate(-11deg); }
.s5 { width: 6rem;  height: 6rem;  bottom: 34%; right: 6%;   font-size: 3rem;   transform: rotate(24deg); }
/* s6 bleeds off the right, not the bottom. A koma's silhouette ends in a
   straight horizontal edge, so cropping it from below just looks like the
   shape stops — and the ink outline reads as a stray rule across the piece.
   Cropped from the side the diagonal shoulders still show, so it reads as a
   piece running off the page. */
.s6 { width: 5.5rem; height: 6rem;  bottom: 4%;  right: -2rem; font-size: 2.7rem; transform: rotate(-20deg); }
.s7 { width: 5rem;  height: 5rem;  top: 2%;     right: 20%;  font-size: 2.5rem; transform: rotate(-28deg); }
.s8 { width: 6rem;  height: 6.5rem; bottom: 12%; right: 30%; font-size: 2.9rem; transform: rotate(9deg); }

@media (max-width: 900px) {
  /* The tagline is the same width but the page is not, so the bottom-right
     corner it used to leave free has closed up. */
  .s2, .s5, .s7, .s8 { display: none; }
  .s6 { bottom: 3%; right: -2.5rem; }
}

@media (max-width: 620px) {
  /* Only the top band survives on a phone: below it the name and tagline run
     the full width, and anything placed there collides. */
  .s3, .s6 { display: none; }

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


/* ------------------------------------------------------------
   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;
}

/* Every other element on the page is an outlined shape with a hard shadow;
   the heading used to be the one exception. Now it is a badge too — filled
   with the accent, so it outranks the group badges below, which are not. */
.section__head {
  display: inline-flex;
  align-items: baseline;
  padding: 0.5rem 1.5rem 0.625rem;
  border: 3px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--accent);
  box-shadow: 6px 6px 0 var(--ink);
}

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


.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 — the same badge unfilled, so it reads as a
   level below the section without needing a size jump. */
.subhead {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 2.75rem 0 1.25rem;
  padding: 0.4375rem 1.0625rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 4px 4px 0 var(--ink);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

/* One colour per subject, so Chess reads the same in Apps and in Books. */
.subhead--chess { background: var(--accent-3); }
.subhead--shogi { background: var(--accent-4); }
.subhead--other { background: var(--accent-2); }

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




/* ------------------------------------------------------------
   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: lowercase;
  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: lowercase;
  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; }

/* 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. In em, so it keeps its weight
   against the type at every size instead of vanishing on a big screen. */
.hero__name { text-shadow: 0.05em 0.05em 0 var(--accent); }


/* the avatar sits in a ring like the discs do — heavier now that it is the
   biggest shape in the hero, so the outline holds at that size */
.hero__avatar { border: 5px solid var(--ink); box-shadow: 9px 9px 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); }


/* ============================================================
   Apps: one card leads, and the row is not perfectly square
   ============================================================ */

/* Four apps at identical size means none of them is the answer to "where do
   I start". The lead takes the whole row, so its banner is roughly four
   times the area of the others. Only once the grid actually has more than
   one column — below that every card is full width already. */
@media (min-width: 55rem) {
  .card--lead { grid-column: 1 / -1; }
}

/* No rotation here on purpose. A 2026 usability study split brutalism into
   disciplined grids and chaotic anti-design, and the chaotic version dropped
   task success to 8-10% on information-heavy pages. Four apps and eleven
   books is information-heavy, so the grid stays square. */