@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root {
  color-scheme:dark;
  --bg:#28233f;
  --panel:#302a4b;
  --panel-hover:#373052;
  --ink:#f5edda;
  --muted:#c0b8d0;
  --gold:#edca85;
  --line:#514964;
  --font:'DM Sans',system-ui,sans-serif;
  --display:'Space Grotesk',system-ui,sans-serif
}

* {
  box-sizing:border-box
}

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

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:17px/1.75 var(--font);
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit;
  text-decoration-color:#8a7c9c;
  text-underline-offset:5px
}

a:hover {
  color:var(--gold)
}

button,input,select {
  font:inherit
}

.ui-icon { display:block; width:20px; height:20px; flex-shrink:0 }

button,a {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

img {
  max-width:100%;
  height:auto
}

h1,h2,h3,h4 {
  font-family:var(--display);
  line-height:1.2;
  letter-spacing:-.035em
}

p {
  margin:0 0 1.25em
}

h1 {
  font-size:clamp(2.2rem,5.5vw,4.7rem);
  font-weight:600
}

h2 {
  font-size:1.65rem
}

::selection {
  background:var(--gold);
  color:var(--bg)
}

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

.shell {
  width:min(1240px,calc(100% - 96px));
  margin:auto
}

.masthead {
  border-bottom:1px solid var(--line);
  background:rgba(40,35,63,.96);
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(16px)
}

.nav-shell {
  width:min(1240px,calc(100% - 96px));
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:88px;
  gap:20px
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font:700 1.55rem var(--display);
  text-decoration:none;
  letter-spacing:-.06em
}

#navigation {
  display:flex;
  gap:36px
}

#navigation a {
  font-size:.85rem;
  font-weight:500;
  text-decoration:none;
  position:relative;
  padding:30px 0;
  color:var(--muted)
}

#navigation a:hover,#navigation a[aria-current] {
  color:var(--ink)
}

#navigation a[aria-current]:after {
  content:'';
  position:absolute;
  bottom:21px;
  left:0;
  right:0;
  height:2px;
  background:var(--gold)
}

.menu-toggle {
  display:none
}

.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:50;
  padding:12px;
  background:var(--gold);
  color:var(--bg)
}

.skip-link:focus {
  top:10px
}

.button,.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  border:1px solid var(--line);
  border-radius:5px;
  padding:10px 23px;
  background:transparent;
  color:var(--ink);
  text-decoration:none;
  font-size:.88rem;
  font-weight:600;
  transition:background .2s,border-color .2s
}

.button:hover,.btn:hover {
  background:var(--gold);
  color:var(--bg);
  border-color:var(--gold)
}

.home-content>.text-center {
  margin:56px 0;
  text-align:center
}

.home-content>p.text-center {
  color:var(--gold)
}

.home-content>h1,.home-content>h2 {
  font-size:2rem;
  letter-spacing:-.025em;
  text-align:left;
  margin-bottom:26px
}

.feature-row {
  margin:0 0 38px
}

.feature-item {
  min-width:0
}

.feature-center {
  padding:88px 0 18px;
  position:relative
}

.feature-center .feature-item {
  max-width:1090px;
  margin:auto
}

.intro-header {
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:66px;
  align-items:center;
  margin-bottom:36px
}

.intro-identity {
  color:var(--muted);
  font-size:1.05rem
}

.intro-identity p {
  margin:0
}

.feature-center .feature-image {
  width:100%;
  image-rendering:pixelated;
  filter:drop-shadow(0 14px 30px #18132980)
}

.feature-center h1 {
  font-size:clamp(2rem,4.6vw,4rem);
  margin:0 0 28px;
  max-width:700px
}

.feature-center .feature-copy {
  color:var(--muted);
  font-size:1.05rem
}

.feature-center h1 {
  color:var(--ink)
}

.feature-center .btn {
  margin:0 8px 0 0
}

.feature-center strong {
  font-weight:600
}

.feature-project {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}

.feature-project .feature-item {
  border:1px solid var(--line);
  border-radius:9px;
  overflow:hidden;
  background:var(--panel);
  transition:transform .2s,border-color .2s
}

.feature-project .feature-item:hover {
  transform:translateY(-5px);
  border-color:#8b789a
}

.feature-project .feature-image {
  width:100%;
  height:225px;
  object-fit:contain;
  background:#211d35;
  display:block;
  padding:12px
}

.feature-project .feature-copy {
  padding:24px
}

.feature-project h2 {
  font-size:1.4rem;
  margin:0 0 12px;
  letter-spacing:-.025em
}

.feature-project p {
  font-size:.85rem;
  color:var(--muted);
  min-height:44px
}

.feature-project .button {
  border:0;
  padding:0;
  color:var(--gold)
}

.feature-left,.feature-right {
  border-top:1px solid var(--line);
  padding:60px 0 0;
  margin-bottom:0
}

.feature-left .feature-item,.feature-right .feature-item {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:80px;
  align-items:center;
  max-width:950px;
  margin:auto
}

.feature-left .feature-image,.feature-right .feature-image {
  width:210px;
  image-rendering:pixelated
}

.feature-right .feature-image {
  grid-column:2;
  grid-row:1
}

.feature-right .feature-copy {
  grid-column:1;
  grid-row:1
}

.feature-right .feature-item {
  grid-template-columns:1fr 240px
}

.feature-left h2,.feature-right h2 {
  font-size:2.5rem;
  margin:0 0 22px
}

.feature-left .feature-copy,.feature-right .feature-copy {
  color:var(--muted)
}

.feature-left h2,.feature-right h2 {
  color:var(--ink)
}

.home-content {
  padding-bottom:90px
}

.text-center {
  text-align:center
}

.page-heading {
  padding:74px 0 44px;
  border-bottom:1px solid var(--line);
  margin-bottom:44px
}

.eyebrow {
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted)
}

.page-heading h1 {
  margin:14px 0 22px
}

.page-intro {
  color:var(--muted);
  max-width:620px
}

.page-intro p {
  margin:0
}

.entries {
  padding-bottom:100px
}

.project-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px
}

/* Project filters enhance the complete, unfiltered HTML listing. */
.project-browser [hidden], .home-content [hidden] { display:none!important }
.home-project-empty { text-align:center; color:var(--muted); padding:24px 0 }
.project-overview { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; padding:74px 0 44px; border-bottom:1px solid var(--line); margin-bottom:28px }
.projects-page .page-heading { padding:0; border:0; margin:0 }
.project-filters { align-self:start; min-width:0; text-align:right }
.project-filter-row { display:flex; flex-direction:column; align-items:flex-end; gap:24px }
.project-filter-top { display:flex; align-items:flex-end; justify-content:flex-end; gap:12px; max-width:100% }
.project-filter-top > .tag-filter { flex-shrink:0 }
.pinned-tags { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px }
.tag-filter {
  display:inline-flex; align-items:center; gap:9px; min-height:44px;
  padding:8px 14px; border:1px solid var(--line); border-radius:6px;
  background:transparent; color:var(--muted); font-size:.82rem;
}
.tag-filter span { font-size:.7rem; opacity:.75 }
.tag-filter:hover { border-color:var(--gold); color:var(--ink) }
.tag-filter[aria-pressed="true"] { background:var(--gold); color:var(--bg); border-color:var(--gold) }
.tag-select { width:225px; max-width:100%; min-width:0; text-align:left }
.tag-select label { display:block; color:var(--muted); font-size:.72rem; margin-bottom:6px }
.tag-select select {
  width:100%; min-height:44px; padding:9px 12px; border:1px solid var(--line);
  border-radius:6px; background:var(--panel); color:var(--ink); font-size:.85rem;
}
.project-count { font-size:.76rem; color:var(--muted); margin:18px 0 0 }
.project-tags { display:flex; flex-wrap:wrap; gap:4px 10px; list-style:none; padding:0; margin:0; color:var(--muted); font-size:.82rem }
.project-empty { padding:48px 20px 90px; text-align:center; color:var(--muted) }
@media(max-width:850px) {
  .project-overview { grid-template-columns:minmax(0,1fr); gap:30px; padding:44px 0 28px }
  .project-filters { text-align:left }
  .project-filter-row { align-items:stretch; gap:18px }
  .project-filter-top { justify-content:flex-start }
  .project-filter-top .tag-select { flex:1 }
  .pinned-tags { justify-content:flex-start }
  .tag-select { width:100% }
}

.entry-card {
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:var(--panel);
  transition:transform .2s,border-color .2s;
  display:flex;
  flex-direction:column
}

.entry-card:hover {
  transform:translateY(-4px);
  border-color:#8b789a
}

.entry-meta { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; min-height:26px }
.project-featured-badge { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; padding:6px; border-radius:4px; background:#edca851a; color:var(--gold); font:600 .7rem/1.5 var(--display); letter-spacing:.04em }
.project-featured-badge .ui-icon { width:14px; height:14px; fill:currentColor; stroke-width:1 }
.entry-card.is-featured { border-color:var(--gold); background:#36304c; box-shadow:0 0 0 1px #edca8526,0 6px 24px #18132940 }
.entry-card.is-featured:hover { border-color:#ffe3ad; box-shadow:0 0 0 1px #edca8559,0 8px 28px #18132960 }

.entry-image {
  display:block;
  background:#211d35
}

.entry-image img {
  width:100%;
  height:220px;
  object-fit:contain;
  padding:12px;
  display:block
}

.entry-copy {
  padding:24px;
  display:flex;
  flex-direction:column;
  flex:1
}

.entry-date {
  color:var(--muted);
  font-size:.7rem;
  letter-spacing:.07em
}

.entry-card h2 {
  font-size:1.38rem;
  margin:12px 0
}

.entry-card h2 a {
  text-decoration:none
}

.entry-excerpt {
  font-size:.86rem;
  color:var(--muted);
  overflow-wrap:anywhere
}

.entry-excerpt p {
  margin-bottom:20px
}

.entry-link {
  color:var(--gold);
  text-decoration:none;
  font-size:.8rem;
  font-weight:600;
  margin-top:auto;
  display:flex;
  justify-content:space-between
}

.journal-list {
  display:grid;
  gap:24px
}

.journal-list .entry-card {
  display:grid;
  grid-template-columns:1fr 310px
}

.journal-list .entry-image {
  grid-column:2;
  grid-row:1;
  display:flex;
  align-items:center;
  padding:12px
}

.journal-list .entry-image img {
  height:180px;
  padding:0;
  object-fit:contain
}

.journal-list .entry-copy {
  grid-column:1;
  grid-row:1;
  padding:28px 32px
}

.journal-list h2 {
  font-size:1.7rem
}

.journal-list .entry-excerpt {
  font-size:.96rem
}

.journal-list .text-only {
  grid-template-columns:1fr
}

.journal-list .entry-link {
  justify-content:flex-start;
  gap:12px
}

.document-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:38px 0;
  border-bottom:1px solid var(--line);
  margin-bottom:45px
}

.back-link {
  text-decoration:none;
  font-size:.9rem;
  color:var(--gold)
}

.document-layout {
  max-width:850px;
  margin:0 auto 90px
}

.document-layout.with-sidebar {
  max-width:none;
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  gap:64px
}

.document-heading h1 {
  font-size:clamp(2rem,4.4vw,3.7rem);
  margin:0 0 46px;
  line-height:1.12
}

.document {
  min-width:0
}

.linked-project { margin:-24px 0 36px; color:var(--muted); font-size:.9rem }
.linked-project a { color:var(--gold) }
.linked-devlogs { border-top:1px solid var(--line); padding-top:24px }
.linked-devlogs ul { list-style:none; padding:0; margin:0 }
.linked-devlogs li { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:12px 0; border-bottom:1px solid var(--line) }
.linked-devlogs a { color:var(--ink); font-family:var(--display); font-weight:500; overflow-wrap:anywhere }
.linked-devlogs a:hover { color:var(--gold) }
@media(max-width:650px) {
  .linked-project { margin-top:-12px }
}

.project-sidebar {
  border-left:1px solid var(--line);
  padding-left:28px;
  font-size:.85rem;
  color:var(--muted);
  overflow-wrap:anywhere
}

.project-sidebar h2 {
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 12px
}

.project-sidebar section {
  margin-bottom:30px
}

.project-sidebar p {
  margin-bottom:0
}

.prose {
  overflow-wrap:anywhere;
  font-size:1.05rem;
  line-height:1.85
}

.prose h2 {
  font-size:1.95rem;
  margin:2em 0 .8em
}

.prose h3 {
  font-size:1.5rem;
  margin:1.6em 0 .7em
}

.prose p {
  margin-bottom:1.5em
}

.prose img {
  display:inline-block;
  border-radius:5px;
  vertical-align:middle
}

.prose iframe {
  display:block;
  max-width:100%;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  border:0;
  margin:30px 0;
  border-radius:5px;
  background:#1b172a
}

.prose blockquote {
  margin:28px 0;
  padding:15px 24px;
  border-left:3px solid var(--gold);
  color:var(--muted);
  background:var(--panel)
}

.prose blockquote p:last-child {
  margin:0
}

.prose pre {
  overflow:auto;
  background:#1b172a;
  padding:20px;
  border-radius:5px
}

.prose code {
  font-size:.86em;
  background:#211d35;
  padding:2px 5px;
  border-radius:3px
}

.prose pre code {
  padding:0
}

.prose table {
  display:block;
  overflow:auto;
  border-collapse:collapse
}

.prose th,.prose td {
  border:1px solid var(--line);
  padding:10px 14px
}

.prose hr {
  border:0;
  border-top:1px solid var(--line);
  margin:40px 0
}

.gallery {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:28px 0
}

.gallery.half {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.gallery img {
  width:100%;
  height:100%;
  object-fit:contain;
  background:#211d35;
  max-height:300px
}

.gallery>a:only-child,.gallery>img:only-child {
  grid-column:1/-1
}

.gallery a {
  display:block
}

.comments {
  border-top:1px solid var(--line);
  padding-top:25px;
  margin-top:60px
}

.comments h2 {
  font-size:1.3rem
}

.standalone {
  max-width:850px;
  min-height:50vh;
  margin:70px auto
}

.site-footer {
  border-top:1px solid var(--line);
  background:#221d35;
  padding:44px 0 28px
}

.footer-top {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-bottom:26px
}

.footer-name {
  font-family:var(--display);
  font-size:1.08rem;
  font-weight:600;
  text-decoration:none
}

.site-footer nav {
  display:flex;
  flex-wrap:wrap;
  gap:16px 30px;
  font-size:.82rem
}

.site-footer nav a {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  text-decoration:none;
  color:var(--muted)
}

.site-footer nav a:hover {
  color:var(--gold)
}

.copyright {
  font-size:.7rem;
  color:var(--muted);
  margin:32px 0 0
}

.lightbox {
  border:0;
  background:#171323;
  padding:50px 20px 20px;
  border-radius:8px;
  max-width:95vw;
  max-height:95vh
}

.lightbox::backdrop {
  background:#000d
}

.lightbox img {
  max-height:80vh;
  display:block
}

.lightbox-close {
  position:absolute;
  right:12px;
  top:8px;
  border:0;
  background:transparent;
  color:var(--ink);
  font-size:14px
}

@media(min-width:1500px) {
  .feature-center {
    padding-top:105px;
    padding-bottom:35px
  }
}

@media(max-width:1000px) {
  .shell,.nav-shell {
    width:calc(100% - 56px)
  }
  .intro-header {
    grid-template-columns:130px minmax(0,1fr);
    gap:35px
  }
  .feature-project {
    gap:16px
  }
  .feature-project .feature-image {
    height:180px
  }
  .feature-project .feature-copy {
    padding:18px
  }
  .project-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .document-layout.with-sidebar {
    grid-template-columns:minmax(0,1fr) 210px;
    gap:32px
  }
  .feature-left .feature-item,.feature-right .feature-item {
    gap:45px
  }
  .journal-list .entry-card {
    grid-template-columns:1fr 240px
  }
  .journal-list .text-only {
    grid-template-columns:1fr
  }
}

@media(max-width:650px) {
  body {
    font-size:16px
  }
  .shell,.nav-shell {
    width:calc(100% - 36px)
  }
  .nav-shell {
    min-height:72px
  }
  .brand {
    font-size:1rem;
    gap:8px
  }
  .menu-toggle {
    display:block;
    border:1px solid var(--line);
    border-radius:4px;
    padding:5px 12px;
    background:transparent;
    color:var(--ink);
    font-size:.8rem
  }
  .menu-toggle span {
    margin-left:12px
  }
  #navigation {
    display:none;
    position:absolute;
    top:72px;
    left:0;
    right:0;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    padding:12px 18px;
    gap:0;
    flex-direction:column
  }
  #navigation.is-open {
    display:flex
  }
  #navigation a {
    padding:12px
  }
  #navigation a[aria-current]:after {
    bottom:8px;
    left:12px;
    right:12px
  }
  .feature-center {
    padding:48px 0 0
  }
  .intro-header {
    grid-template-columns:72px minmax(0,1fr);
    gap:20px;
    margin-bottom:28px
  }
  .feature-center h1 {
    font-size:clamp(1.5rem,5vw,2.4rem);
    margin-bottom:14px
  }
  .feature-center .feature-copy,.intro-identity {
    font-size:1rem
  }
  .home-content>.text-center {
    margin:35px 0
  }
  .feature-project {
    grid-template-columns:1fr;
    gap:22px
  }
  .feature-project .feature-image {
    height:230px
  }
  .feature-project .feature-copy {
    padding:24px
  }
  .feature-project p {
    min-height:0
  }
  .feature-left .feature-item,.feature-right .feature-item {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:28px
  }
  .feature-left .feature-image,.feature-right .feature-image {
    width:100px
  }
  .feature-left,.feature-right {
    padding-top:40px
  }
  .feature-left h2,.feature-right h2 {
    font-size:2rem
  }
  .page-heading {
    padding:44px 0 30px;
    margin-bottom:28px
  }
  .page-heading h1 {
    font-size:3rem
  }
  .project-grid {
    grid-template-columns:1fr
  }
  .entries {
    padding-bottom:55px
  }
  .journal-list .entry-card {
    display:flex
  }
  .journal-list .entry-image {
    padding:14px
  }
  .journal-list .entry-image img {
    height:180px
  }
  .journal-list .entry-copy {
    padding:22px
  }
  .journal-list h2 {
    font-size:1.4rem
  }
  .document-top {
    padding:26px 0;
    gap:12px;
    margin-bottom:30px
  }
  .document-top .eyebrow {
    font-size:.6rem;
    text-align:right
  }
  .document-heading h1 {
    margin-bottom:30px
  }
  .document-layout.with-sidebar {
    display:flex;
    flex-direction:column;
    gap:40px
  }
  .project-sidebar {
    border-left:0;
    border-top:1px solid var(--line);
    padding:30px 0 0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
  }
  .project-sidebar section {
    margin:0
  }
  .project-sidebar section:first-child,.project-sidebar section:last-child {
    grid-column:1/-1
  }
  .prose {
    font-size:1rem
  }
  .prose h2 {
    font-size:1.6rem
  }
  .gallery {
    gap:7px
  }
  .footer-top {
    flex-direction:column;
    gap:15px
  }
  .site-footer {
    padding-top:30px
  }
  .site-footer nav {
    gap:13px 23px
  }
  .home-content {
    padding-bottom:55px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    transition:none!important
  }
}

@media print {
  .masthead,.site-footer,.comments,.document-top,.lightbox {
    display:none
  }
  body {
    background:#fff;
    color:#111
  }
  .shell {
    width:100%
  }
  .document-layout.with-sidebar {
    display:block
  }
  .prose a {
    color:inherit
  }
  .project-sidebar {
    border:0
  }
}

/* Articles and devlogs share a chronological journal layout. */
.journal-year-group + .journal-year-group {
  margin-top: 32px;
}

.journal-year {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  color: var(--gold);
  font-family: var(--font);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: 0;
}

.journal-year::after {
  content: '';
  flex: 0 0 56px;
  height: 3px;
  border-radius: 2px;
  background: var(--gold);
}

.journal-entry {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.journal-entry:last-child {
  border-bottom: 0;
}

.journal-date {
  padding-top: 4px;
  color: var(--muted);
  font-size: .85rem;
  white-space: nowrap;
}

.journal-copy h3 {
  margin: 0 0 9px;
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.25;
}

.journal-copy h3 a {
  text-decoration: none;
}

.journal-copy h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.journal-entry:hover h3 a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.journal-entry:focus-within {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
}

.journal-excerpt {
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.journal-excerpt p {
  margin: 0;
}

.journal-excerpt a {
  position: relative;
  z-index: 1;
}

@media (max-width: 650px) {
  .journal-entry {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }
  .journal-copy h3 {
    font-size: 1.375rem;
  }
  .journal-year-group + .journal-year-group {
    margin-top: 26px;
  }
}

/* Homepage feature links and paired journal sections. */
.feature-project .feature-item {
  position: relative;
}

.feature-project-link {
  text-decoration: none;
}

.feature-project-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.feature-project .feature-item:focus-within {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.feature-project .feature-copy > p:last-child {
  margin-bottom: 0;
  min-height: 0;
}

.home-journals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 0;
  padding-top: 48px;
}

.home-journals > .feature-row {
  border-top: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.home-journals > .feature-row:first-child {
  padding-right: 32px;
}

.home-journals > .feature-row + .feature-row {
  border-left: 1px solid var(--line);
  padding-left: 32px;
}

.home-journals .feature-item {
  display: grid;
  grid-template-columns: clamp(80px, 8vw, 112px) minmax(0, 1fr);
  align-items: stretch;
  gap: 24px;
  height: 100%;
  max-width: none;
}

.home-journals .feature-image {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: auto;
  object-fit: contain;
  align-self: start;
}

.home-journals .feature-copy {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.home-journals h2 {
  font-size: 2rem;
}

.home-journals .button {
  margin-top: auto;
}

.home-content > .feature-project {
  margin-bottom: 0;
}

/* Shared rows keep both descriptions, latest links, and buttons aligned. */
@media (min-width: 761px) {
  .home-journals {
    grid-template-rows: auto auto auto auto;
    row-gap: 24px;
  }
  .home-journals > .feature-row,
  .home-journals .feature-item,
  .home-journals .feature-copy {
    display: grid;
    grid-row: 1 / span 4;
    grid-template-rows: subgrid;
  }
  .home-journals > .feature-row:first-child {
    grid-column: 1;
  }
  .home-journals > .feature-row + .feature-row {
    grid-column: 2;
  }
  .home-journals .feature-item {
    margin: 0;
  }
  .home-journals .feature-copy {
    row-gap: 24px;
  }
  .home-journals .feature-image {
    grid-row: 1 / span 2;
  }
  .home-journals .feature-copy > * {
    margin: 0;
  }
  .home-journals .feature-copy > p:nth-of-type(2) {
    padding-top: 24px;
  }
  .home-journals .button {
    justify-self: start;
    align-self: start;
  }
}

@media (max-width: 760px) {
  .home-journals {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
    padding-top: 36px;
  }
  .home-journals > .feature-row:first-child {
    padding-right: 0;
  }
  .home-journals > .feature-row + .feature-row {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 36px;
  }
  .home-journals .feature-item {
    grid-template-columns: 80px minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .home-journals .feature-item {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
  }
  .home-journals h2 {
    font-size: 1.6rem;
  }
}

/* Role-first introduction card. */
.home .feature-center {
  padding: 40px 0 0;
  margin-bottom: 48px;
}

.home .feature-center .feature-item {
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--panel);
  box-shadow: none;
}

.home .feature-center .feature-item {
  max-width: none;
  padding: 32px;
}

.home .intro-header {
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 28px;
  margin-bottom: 26px;
}

.home .feature-center .feature-image {
  padding: 0;
  border: 0;
  background: transparent;
  filter: none;
}

.home .feature-center h1 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  margin: 0;
  max-width: none;
  color: var(--gold);
}

.home .intro-name { font-family:var(--display); font-size:.9rem; font-weight:500; letter-spacing:.04em; color:var(--ink); margin:0 0 14px }
.home-cat-slot { width:100%; aspect-ratio:1 }
.home-cat { display:block; position:relative; z-index:25; width:100%; height:100%; padding:0; border:0; background:transparent; border-radius:12px; transform-origin:top left; transition:background-color .32s,box-shadow .32s }
.home-cat .feature-image { display:block; width:100%; height:100%; object-fit:contain }
.home-cat.is-floating { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; position:fixed; right:max(20px, env(safe-area-inset-right)); top:var(--cat-top, 104px); width:64px; height:96px; padding:8px; z-index:25; color:var(--gold); background:var(--panel); border:1px solid var(--line); box-shadow:0 4px 18px #18132960 }
.home .home-cat.is-floating .feature-image { width:36px; height:36px }
.cat-up,.cat-top-label { position:absolute; opacity:0; pointer-events:none; transition:opacity .25s }
.home-cat.is-floating .cat-up,.home-cat.is-floating .cat-top-label { position:static; opacity:1 }
.cat-top-label { font:600 10px/1.2 var(--display); letter-spacing:.1em; text-transform:uppercase }
.home-cat:hover { background:var(--panel-hover) }
@media (prefers-reduced-motion:reduce) { .home-cat,.cat-up,.cat-top-label { transition:none } }
.intro-footer { display:flex; align-items:center; justify-content:center; margin-top:28px }
.intro-specialties { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:28px 0 0 }
.specialty-button { min-height:44px; padding:9px 20px; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--ink); font-family:var(--display); font-size:.95rem; font-weight:500; transition:background .2s,border-color .2s,transform .2s }
.specialty-button:hover { background:var(--panel-hover); border-color:var(--gold); color:var(--gold) }
.specialty-button[aria-pressed="true"] { background:var(--gold); border-color:var(--gold); color:var(--bg) }
.specialty-button:active { transform:translateY(2px) }
.intro-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:16px 36px }
.intro-action { display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:6px 0; color:var(--ink); font-weight:500; font-size:.95rem; text-decoration:none }
.intro-action > span:not(.action-arrow) { text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:7px; text-decoration-thickness:1px }
.intro-action:first-child { color:#c4b5ed }
.intro-action:hover { color:var(--gold) }
.intro-action:hover > span:not(.action-arrow) { text-decoration-color:currentColor }
.action-arrow { font-size:.85em }
.intro-tagline { color:var(--muted); font-size:.9rem; margin-top:20px }
.intro-tagline p { margin:0 }

.home .feature-center .feature-copy {
  font-size: 1rem;
  max-width: 720px;
}

.home .feature-center .feature-copy > p:last-child {
  margin-bottom: 0;
}

.project-headline-devlog {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding:28px 32px;
  margin:0 0 44px;
  background:var(--panel);
  border:1px solid var(--line);
  border-left:4px solid var(--gold);
  border-radius:8px;
  transition:background-color .2s,border-color .2s;
}
.project-headline-devlog:hover { background:var(--panel-hover); border-color:var(--gold) }
.project-headline-devlog .eyebrow { color:var(--gold); margin:0 0 10px }
.project-headline-devlog h2 { margin:0; font-size:clamp(1.4rem,3vw,2rem); overflow-wrap:anywhere }
.project-headline-devlog h2 a { text-decoration:none }
.project-headline-devlog h2 a::after { content:''; position:absolute; inset:0; border-radius:8px }
.project-headline-devlog:focus-within { outline:3px solid var(--gold); outline-offset:4px }
.headline-devlog-excerpt { color:var(--muted); margin:12px 0 0; max-width:70ch; font-size:.95rem }
.headline-devlog-cta { flex-shrink:0; color:var(--gold); font-size:.9rem; font-weight:600 }
.headline-devlog-cta span { margin-left:12px }
@media(max-width:650px) {
  .project-headline-devlog { align-items:flex-start; flex-direction:column; gap:20px; padding:24px 20px; margin-bottom:32px }
}

@media (max-width: 650px) {
  .intro-specialties { gap:8px; margin-top:26px; padding-right:64px }
  .home-cat.is-floating { right:max(12px, env(safe-area-inset-right)); width:54px }
  .specialty-button { padding:9px 13px; font-size:.9rem }
  .home .feature-center {
    padding-top: 28px;
    margin-bottom: 38px;
  }
  .home .feature-center .feature-item {
    padding: 22px 18px;
  }
  .home .intro-header {
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: 18px;
    align-items: start;
  }
  .home .feature-center .feature-image {
    padding: 0;
  }
  .home .feature-center h1 {
    font-size: clamp(1.7rem, 5vw, 2rem);
  }
  .home .intro-identity {
    font-size: .9rem;
  }
}

/* Full-width homepage projects; the archive retains its compact grid. */
.home .feature-project { grid-template-columns: minmax(0, 1fr); gap: 24px }
.home .feature-project .feature-item { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: stretch }
.home .feature-project .feature-item:hover { transform: translateY(-2px) }
.home .feature-project .feature-image { height: 100%; min-height: 240px; aspect-ratio: 16 / 10; padding: 20px; object-fit: contain }
.home .feature-project .feature-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 32px }
.home .feature-project .feature-copy:only-child { grid-column: 1 / -1 }
.home .feature-project h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); margin-bottom: 14px }
.feature-devlog { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line) }
.feature-devlog-label { display: block; margin-bottom: 8px; color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase }
.feature-devlog a { position: relative; z-index: 1; color: var(--gold); text-underline-offset: 4px }
.feature-devlog a:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px }
@media (max-width: 650px) {
  .home .feature-project .feature-item { grid-template-columns: minmax(0, 1fr) }
  .home .feature-project .feature-image { height: auto; min-height: 0; aspect-ratio: 16 / 9; padding: 16px }
  .home .feature-project .feature-copy { padding: 24px }
}