.site-page .brand { flex-wrap: nowrap; }
.site-page .topbar-link[aria-current="page"] { color: var(--manga-ink); background: #ffffff; box-shadow: 4px 4px 0 var(--manga-red); }

.page-intro { position: relative; overflow: hidden; padding: 68px 0 64px; color: #ffffff; background: var(--manga-ink); border-bottom: 8px solid var(--manga-ink); }
.page-intro::before { content: ""; position: absolute; inset: -30%; opacity: .2; background: repeating-conic-gradient(from 224deg at 50% 48%, transparent 0deg 2.4deg, rgba(255,255,255,.15) 2.5deg 2.7deg, transparent 2.8deg 6.3deg); pointer-events: none; }
.page-intro-panel { position: relative; z-index: 1; width: min(820px, 100%); min-height: 300px; margin: 0 auto; padding: 62px 62px 44px; overflow: hidden; color: var(--manga-ink); background: var(--manga-paper); border: 4px solid #ffffff; box-shadow: 12px 12px 0 #b9b4a9, 18px 18px 0 #ffffff; text-align: center; }
.page-intro-panel::before { content: ""; position: absolute; inset: 12px; border: 2px solid var(--manga-ink); background: radial-gradient(circle at 50% 42%, #ffffff 0, transparent 62%); pointer-events: none; }
.page-intro-panel > * { position: relative; z-index: 1; }
.page-chapter { position: absolute; left: 22px; top: 22px; display: grid; min-width: 64px; border: 2px solid var(--manga-ink); background: var(--manga-paper); box-shadow: 4px 4px 0 var(--manga-ink); transform: rotate(-2deg); }
.page-chapter span { padding: 4px 8px; color: #fff; background: var(--manga-ink); font: 700 .62rem/1 "Noto Sans JP", sans-serif; letter-spacing: .12em; }
.page-chapter strong { padding: 4px 8px 2px; font: 400 1.55rem/1 "Bebas Neue", sans-serif; letter-spacing: .08em; }
.page-eyebrow { margin: 0 0 8px; color: #373631; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.page-eyebrow span { display: inline-block; padding: 3px 6px; color: #fff; background: var(--manga-ink); font-family: "Noto Sans JP", sans-serif; }
.page-intro-panel h1 { margin: 0; font: 400 clamp(5rem, 11vw, 7.5rem)/.86 "Bebas Neue", Impact, sans-serif; letter-spacing: .04em; text-shadow: 4px 4px 0 rgba(196,20,45,.22); }
.page-intro-panel > p:last-of-type { width: min(56ch, 100%); margin: 18px auto 0; color: #34332f; font-weight: 500; line-height: 1.6; }

.projects-page-content { padding-block: 76px 94px; }
.projects-page-content .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.projects-page-content .project-category { padding-block: 24px; }

.projects-page body { height: 100vh; height: 100dvh; overflow: hidden; }
.projects-page main { height: calc(100vh - 76px); height: calc(100dvh - 76px); min-height: 0; }
.projects-page .page-intro { display: grid; height: 100%; padding: 22px 0 30px; }
.projects-page .page-intro > .container { display: grid; min-height: 0; place-items: center; }
.projects-page .page-intro-panel { width: min(1120px, 100%); max-height: 100%; min-height: 0; padding: 36px 46px 32px; overflow-x: hidden; overflow-y: auto; }
.projects-page .page-intro-panel h1 { font-size: clamp(4rem, 7vw, 5.5rem); }
.projects-page .page-intro-panel > p:last-of-type { margin-top: 8px; }

.projects-panel-categories { display: grid; gap: 10px; margin-top: 16px; counter-reset: manga-panel; text-align: left; }
.projects-panel-category { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: stretch; }
.projects-panel-category > h2 { display: flex; flex-direction: column; justify-content: center; gap: 4px; margin: 0; padding: 8px 10px; color: #fff; background: var(--manga-ink); font: 400 1.05rem/1 "Bebas Neue", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.projects-panel-category > h2 span { color: var(--manga-red); font-size: .65rem; letter-spacing: .16em; }
.projects-panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.projects-panel-grid .project-card { display: grid; grid-template-columns: 34% minmax(0, 1fr); gap: 0; min-width: 0; padding: 0; border-width: 2px; box-shadow: 4px 4px 0 var(--manga-ink); }
.projects-panel-grid .project-card::before { position: absolute; inset: 0 auto 0 0; height: auto; }
.projects-panel-grid .project-media { width: 100%; min-width: 0; height: 100%; min-height: 72px; aspect-ratio: auto; border-right: 2px solid var(--manga-ink); border-bottom: 0; }
.projects-panel-grid .project-body { gap: 3px; padding: 9px 11px 10px; }
.projects-panel-grid .project-body h3 { overflow: hidden; font-size: 1.05rem; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.projects-panel-grid .project-body > p { overflow: hidden; font-size: .66rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.projects-panel-grid .roblox-game-stats { gap: 4px; margin-top: 2px; }
.projects-panel-grid .roblox-game-stats p { gap: 0; padding: 3px 5px; border-radius: 0; }
.projects-panel-grid .roblox-game-stats span { font-size: .5rem; }
.projects-panel-grid .roblox-game-stats strong { font-size: .68rem; }

.blog-feed { position: relative; padding: 78px 0 100px; color: var(--manga-ink); background: var(--manga-paper); }
.blog-placeholder { position: relative; width: min(780px, 100%); margin: 0 auto; padding: 46px 52px; overflow: hidden; color: var(--manga-ink); background: #f6f2e8; border: 3px solid var(--manga-ink); box-shadow: 9px 9px 0 var(--manga-ink); }
.blog-placeholder::before { content: ""; position: absolute; inset: 0; opacity: .16; background: radial-gradient(circle at 1px 1px, #080808 1px, transparent 1.2px); background-size: 8px 8px; pointer-events: none; }
.blog-placeholder > * { position: relative; z-index: 1; }
.blog-placeholder-number { position: absolute; right: 18px; top: 14px; color: var(--manga-red); font: 400 1rem/1 "Bebas Neue", sans-serif; letter-spacing: .16em; }
.blog-status { display: inline-block; margin: 0 0 18px; padding: 5px 9px; color: #fff; background: var(--manga-red); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.blog-placeholder h3 { margin: 0; font: 400 clamp(2.8rem, 7vw, 4.8rem)/.95 "Bebas Neue", sans-serif; letter-spacing: .03em; }
.blog-placeholder h3 + p { width: min(58ch, 100%); margin: 20px 0 0; color: #34332f; line-height: 1.7; }
.blog-placeholder-mark { display: block; margin-top: 30px; padding-top: 14px; border-top: 3px solid var(--manga-ink); color: var(--manga-red); font: 700 .82rem/1 "Noto Sans JP", sans-serif; letter-spacing: .18em; text-align: right; }

.blog-page body { height: 100vh; height: 100dvh; overflow: hidden; }
.blog-page main { height: calc(100vh - 76px); height: calc(100dvh - 76px); min-height: 0; }
.blog-page .page-intro { display: grid; height: 100%; padding: 28px 0 34px; }
.blog-page .page-intro > .container { display: grid; min-height: 0; place-items: center; }
.blog-page .page-intro-panel { width: min(1000px, 100%); max-height: 100%; min-height: 0; padding: 42px 52px 38px; overflow-x: hidden; overflow-y: auto; }
.blog-page .page-intro-panel h1 { font-size: clamp(4.2rem, 8vw, 6rem); }
.blog-page .page-intro-panel > p:last-of-type { margin-top: 10px; }
.blog-panel-entry { width: min(760px, 100%); margin: 22px auto 0; padding: 22px 28px 20px; box-shadow: 6px 6px 0 var(--manga-ink); text-align: left; }
.blog-panel-entry .blog-status { margin-bottom: 10px; }
.blog-panel-entry h3 { font-size: clamp(2rem, 4vw, 3rem); }
.blog-panel-entry h3 + p { margin-top: 10px; font-size: .82rem; line-height: 1.45; }
.blog-panel-entry .blog-placeholder-mark { margin-top: 12px; padding-top: 9px; }

@media (max-width: 700px) {
  .site-page .topbar-inner { padding-block: 10px; }
  .site-page .brand { width: 100%; gap: 7px; }
  .site-page .topbar-link { flex: 1 1 auto; justify-content: center; padding: 8px 7px; font-size: .82rem; }
  .page-intro { padding: 44px 0 50px; }
  .page-intro-panel { min-height: 270px; padding: 64px 24px 34px; box-shadow: 8px 8px 0 #b9b4a9, 12px 12px 0 #fff; }
  .page-intro-panel::before { inset: 9px; }
  .page-chapter { left: 16px; top: 16px; }
  .page-eyebrow { font-size: .62rem; letter-spacing: .13em; }
  .page-intro-panel h1 { font-size: clamp(4.4rem, 23vw, 5.8rem); }
  .page-intro-panel > p:last-of-type { margin-top: 14px; font-size: .9rem; }
  .projects-page-content { padding-block: 52px 70px; }
  .projects-page-content .projects-grid { grid-template-columns: 1fr; }
  .projects-page main { height: calc(100vh - 67px); height: calc(100dvh - 67px); }
  .projects-page .page-intro { padding: 14px 0 20px; }
  .projects-page .page-intro-panel { padding: 52px 18px 24px; }
  .projects-page .page-intro-panel h1 { font-size: clamp(3.7rem, 19vw, 4.8rem); }
  .projects-panel-categories { gap: 12px; margin-top: 16px; }
  .projects-panel-category { display: block; }
  .projects-panel-category > h2 { display: flex; flex-direction: row; justify-content: flex-start; gap: 7px; margin-bottom: 7px; padding: 6px 8px; font-size: .82rem; }
  .projects-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .projects-panel-grid .project-card { box-shadow: 3px 3px 0 var(--manga-ink); }
  .projects-panel-grid .project-card { display: grid; grid-template-columns: 1fr; }
  .projects-panel-grid .project-media { min-height: 0; aspect-ratio: 16 / 5.5; border-right: 0; border-bottom: 2px solid var(--manga-ink); }
  .projects-panel-grid .project-body { padding: 7px 8px 8px; }
  .projects-panel-grid .project-body h3 { font-size: .82rem; }
  .projects-panel-grid .project-body > p { display: none; }
  .blog-feed { padding: 54px 0 76px; }
  .blog-feed .section-title { display: block; }
  .blog-feed .section-kicker { position: static; display: block; margin-bottom: 12px; }
  .blog-feed .section-title h2 { font-size: clamp(3.2rem, 17vw, 4.2rem); }
  .blog-feed .underline { width: 100%; margin-top: 14px; }
  .blog-placeholder { padding: 38px 24px 32px; }
  .blog-page main { height: calc(100vh - 67px); height: calc(100dvh - 67px); }
  .blog-page .page-intro { padding: 14px 0 20px; }
  .blog-page .page-intro-panel { padding: 52px 18px 24px; }
  .blog-page .page-intro-panel h1 { font-size: clamp(3.8rem, 20vw, 5rem); }
  .blog-panel-entry { margin-top: 17px; padding: 18px 16px 16px; }
  .blog-panel-entry h3 { font-size: 1.85rem; }
  .blog-panel-entry h3 + p { font-size: .72rem; }
}

@media (max-height: 720px) {
  .projects-page .page-intro-panel { padding-top: 48px; }
  .projects-page .page-eyebrow,
  .projects-page .page-intro-panel > p:last-of-type { display: none; }
  .projects-page .page-intro-panel h1 { font-size: 3.5rem; }
  .projects-panel-categories { margin-top: 12px; }
  .projects-panel-grid .project-media { aspect-ratio: 16 / 4.5; }
  .blog-page .page-intro-panel { padding-top: 48px; }
  .blog-page .page-eyebrow,
  .blog-page .page-intro-panel > p:last-of-type { display: none; }
  .blog-page .page-intro-panel h1 { font-size: 3.6rem; }
  .blog-panel-entry { margin-top: 12px; }
}