/* 1. Font Faces */
@font-face {
  font-family: "Raccu Brand";
  src: url("../fonts/BrunoAceSC-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raccu Copy";
  src: url("../fonts/BIZUDPGothic-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raccu Copy Strong";
  src: url("../fonts/BIZUDPGothic-Bold.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raccu Barlow Semi Condensed";
  src: url("../fonts/BarlowSemiCondensed-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raccu Barlow Semi Condensed";
  src: url("../fonts/BarlowSemiCondensed-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raccu IBM Plex Sans Condensed";
  src: url("../fonts/IBMPlexSansCondensed-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raccu IBM Plex Sans Condensed";
  src: url("../fonts/IBMPlexSansCondensed-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* 2. Tokens */
:root {
  color-scheme: light;

  --font-brand: "Raccu Brand", sans-serif;
  --font-copy: "Raccu Copy", sans-serif;
  --font-copy-strong: "Raccu Copy Strong", sans-serif;
  --font-meta: "Raccu Barlow Semi Condensed", sans-serif;
  --font-action: "Raccu IBM Plex Sans Condensed", sans-serif;

  --accent-blue: #2b5273;
  --accent-blue-hover: #1e3d57;
  --text-main: #1d1d1b;
  --text-muted: #60615f;
  --text-soft: #949691;
  --card-bg: rgba(255, 255, 255, 0.72);
  --border-subtle: rgba(29, 29, 27, 0.08);
  --grid-line: rgba(43, 82, 115, 0.045);
  
}

/* 3. Base */
* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  overflow-y: scroll;
}

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font-copy);
  font-weight: 400;
  color: var(--text-main);

  
  line-height: 1.45;
  text-rendering: auto;
  -webkit-font-smoothing: auto;
  overflow-x: hidden;
}

/* 4. Typography Roles */
h1 {
  font-family: var(--font-brand);
  font-weight: 400;
  font-synthesis: none;
  text-transform: uppercase;
}

body,
.card,
.card p {
  font-family: var(--font-copy);
  font-weight: 400;
}

.card p:last-child {
  font-family: var(--font-copy);
  font-style: italic;
  font-synthesis: style;
}

footer {
  font-family: var(--font-meta);
  font-weight: 400;
  font-synthesis: none;
}

/* 5. Layout */
.main-container {
  flex: 1;
  width: min(100%, 740px);
  margin: 0 auto;
  padding: clamp(18px, 4.5vw, 34px) clamp(22px, 6vw, 36px) 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 6. Components */

h1 {
  margin: 0;
  font-size: clamp(2.3rem, 7vw, 3.25rem);
  line-height: 0.95;
  letter-spacing: 0.036em;
  color: var(--text-main);
}

.card {
  width: 100%;
  margin: 0 0 clamp(14px, 2.4vw, 18px);
  padding: clamp(22px, 4vw, 28px);
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(1.5px);
}

.card p {
  margin: 0 0 1rem;
  font-size: clamp(0.92rem, 1.5vw, 0.98rem);
  line-height: 1.55;
  letter-spacing: 0;
}

.card p:last-child {
  margin-bottom: 0;
  color: var(--text-muted);
}

.landing-card p:not(.release-kicker) {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.release-kicker {
  margin: 0 0 12px;
  font-family: var(--font-meta);
  font-size: 0.72rem;
  font-weight: 600;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-blue);
}

.site-note {
  margin: 14px 0 1rem;
  padding: 10px 12px;
  border-left: 3px solid var(--accent-blue);
  background: rgba(43, 82, 115, 0.045);
  font-family: var(--font-copy);
  font-size: 0.9rem;
  font-style: italic;
  font-synthesis: style;
  line-height: 1.45;
  color: var(--text-muted);
}

.card p.landing-final {
  margin-bottom: 0;
  color: var(--text-muted);
  font-style: normal;
  font-synthesis: none;
}

/* 7. Responsive */
@media (max-width: 480px) {
  .main-container {
    padding-left: 22px;
    padding-right: 22px;
  }

  .card {
    padding: 20px;
  }

}

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

/* 8. Raccu v1.1 compact brand header */
:root {
  
  --notice-warning: #d65a5a;
}

.main-container,
.release-main {
  
  margin-left: auto;
  margin-right: auto;
  padding: clamp(18px, 4vw, 34px) clamp(24px, 5vw, 34px) 18px;
  align-items: stretch;
}

.primary-nav {

  
  
  min-width: 0;
  font-family: var(--font-action);
  font-weight: 600;
  font-synthesis: none;

  
  text-transform: uppercase;
}

.primary-nav-link:focus-visible {
  outline: 3px solid rgba(43, 82, 115, 0.2);
  outline-offset: 5px;
}

.card {
  margin-top: 0;
}

.landing-card {
  margin-top: 0;
}

.landing-card p:not(.release-kicker),
.placeholder-card p:not(.release-kicker) {
  font-size: clamp(0.94rem, 1.55vw, 1rem);
  line-height: 1.48;
}

.notice {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  margin: 14px 0 1rem;
  padding: 11px 14px 11px 12px;
  border-left: 3px solid var(--notice-warning);
  background: rgba(214, 90, 90, 0.032);
  font-style: normal;
}

.notice-body {
  min-width: 0;
}

.notice .notice-title {
  margin: 0 0 4px;
  font-family: var(--font-meta);
  font-size: 0.74rem;
  font-weight: 600;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  
}

.notice p:not(.notice-title) {
  margin: 0;
  font-family: var(--font-copy);
  font-size: 0.91rem;
  font-style: italic;
  font-synthesis: style;
  line-height: 1.45;
  color: var(--text-muted);
}

.site-note {
  border-left-color: var(--notice-warning);
}

.site-footer {
  width: min(100%, var(--site-width));
  margin: 0 auto;
  padding: 28px 24px 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  
  flex-wrap: wrap;
  font-family: var(--font-meta);
  
  font-size: 0.78rem;
  font-weight: 600;
  font-synthesis: none;
  letter-spacing: 0.02em;
  text-align: center;
}

.footer-brand,
.footer-links {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.footer-links::before {
  
  color: rgba(96, 97, 95, 0.45);
  font-weight: 400;
  margin-right: 2px;
}

.footer-link {
  color: var(--text-soft);
  text-decoration: none;
}

.footer-link:focus-visible {
  outline: 2px solid rgba(43, 82, 115, 0.22);
  outline-offset: 3px;
}

@media (max-width: 760px) {

  .site-brand-wordmark {
    width: clamp(170px, 44vw, 226px);
  }

  .primary-nav {
    gap: clamp(18px, 5vw, 28px);
    
    font-size: clamp(1rem, 4.6vw, 1.2rem);
  }
}

@media (max-width: 520px) {
  .main-container,
  .release-main {
    padding-left: 18px;
    padding-right: 18px;
  }

  .primary-nav {

    
    
    align-items: center;

    
  }

  .card {
    padding: 20px;
  }

  .notice {
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 10px;
  }

  .footer-links::before {
    content: none;
  }
}

/* 9. v1.2 refinement pass: cleaner header balance, quiet section rules, calmer legal notice */
.card > .release-kicker,
.release-card > .release-kicker {
  
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  
}

.card > .release-kicker::after,
.release-card > .release-kicker::after {
  
  display: block;
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(43, 82, 115, 0.34), rgba(43, 82, 115, 0.06));
}

.notice.notice-warning {
  border-left-width: 3px;
  box-shadow: inset 0 0 0 1px rgba(214, 90, 90, 0.035);
}

.site-footer {
  flex-direction: column;

}

.footer-brand,
.footer-links {
  width: 100%;
}

.footer-brand .footer-mark::after {
  
  display: inline-block;
  width: 1px;
  height: 0.9em;
  
  vertical-align: -0.12em;
  background: rgba(96, 97, 95, 0.38);
}

@media (max-width: 520px) {

  

  .card > .release-kicker,
  .release-card > .release-kicker {
    gap: 10px;
  }

  .footer-brand .footer-mark::after {
    content: none;
  }
}

/* 10. v1.3 cleanup pass: separated brand/navigation, no decorative rules, SVG icons */

.primary-nav {

  
  padding-right: clamp(4px, 1vw, 12px);
}

.card > .release-kicker,
.release-card > .release-kicker {
  display: block;
  margin: 0 0 16px;
  white-space: normal;
}

.card > .release-kicker::after,
.release-card > .release-kicker::after {
  content: none;
}

.notice.notice-warning,
.notice {
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 12px;
  padding: 11px 14px 11px 12px;
  border-left-width: 2px;
  
  box-shadow: none;
}

.notice .notice-title {
  color: #7d5b5b;
}

@media (max-width: 760px) {

  .primary-nav {
    justify-content: flex-start;
    padding-right: 0;
  }
}

@media (max-width: 520px) {

  

  .notice.notice-warning,
  .notice {
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 10px;
  }

}

/* 11. v1.4 header correction: SVG subline, integrated controls, calmer responsive layout */
.site-header {
  width: 100%;
  margin: 0 0 clamp(20px, 3vw, 28px);
}

.primary-nav {

  position: relative;

  

  
  
}

.primary-nav::before {
  
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(43, 82, 115, 0.12), rgba(43, 82, 115, 0.28), rgba(43, 82, 115, 0.12));
}

@media (max-width: 820px) {

  .site-header-controls {

    
    padding-top: 0;
  }

  
}

@media (max-width: 520px) {

  

  

  .primary-nav::before {
    right: auto;
    width: min(100%, 330px);
  }

  
}

/* 12. v1.5 rhythm pass: align brand/subline, remove header rules, align nav to subline */

.site-brand-subline-img {
  
  margin-top: clamp(12px, 1.35vw, 16px);
  margin-left: 0;
}

@media (max-width: 520px) {

  

  .site-brand-subline-img {
    
    margin-top: 11px;
  }

  
}

/* 13. v1.5 structural header grid: wordmark/language over subline/nav */

.site-brand-wordmark-link:focus-visible {
  outline: 3px solid rgba(43, 82, 115, 0.2);
  outline-offset: 5px;
}

@media (max-width: 820px) {
  .site-header-layout {
    
    grid-template-areas:
      "language"
      "wordmark"
      "subline"
      "nav";
    
  }

  .primary-nav {
    justify-self: start;

  }
}

/* 14. v1.6 brand rhythm fix: real brand stack, tighter subline, controls aligned to subline */

.site-header-layout {
  width: 100%;

  

  
}

.site-brand-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 0;
}

.site-brand-wordmark-link {
  grid-area: auto;
  display: block;
  width: max-content;
  max-width: 100%;
  line-height: 0;
  color: var(--text-main);
  text-decoration: none;
}

.site-brand-wordmark {
  display: block;
  width: clamp(252px, 31vw, 318px);
  max-width: 100%;
  height: auto;
}

.site-brand-subline-wrap {
  grid-area: auto;
  display: block;
  width: max-content;
  max-width: 100%;

}

.site-brand-subline-img {
  display: block;
  width: clamp(252px, 30vw, 315px);
  max-width: 100%;
  height: auto;
  margin: 0;
}

.site-header-controls {
  min-width: 0;

  

  
  padding-bottom: 1px;
}

@media (max-width: 820px) {

  .site-header-controls {
    
    justify-content: flex-start;

  }

  
}

@media (max-width: 520px) {

  

  .site-brand-wordmark {
    width: clamp(222px, 68vw, 270px);
  }

  .site-brand-subline-img {
    width: clamp(218px, 66vw, 266px);
  }

  
}

/* 15. v1.7 header lockup correction: cropped SVGs, tighter brand, integrated language/nav block */

@media (max-width: 820px) {

  .site-brand-stack {
    width: clamp(232px, 58vw, 306px);
  }

  
}

/* 16. v1.8 header control reset: right-aligned controls, no floating language block */

@media (max-width: 820px) {

  .site-header-controls {

    

    padding-bottom: 0;
  }

  .primary-nav {
    align-self: stretch;

  }
}

/* 17. v1.8b navigation band correction: make the right header side intentional */

/* 18. v1.9 header correction: remove forced band, repair release width, calmer brand/control spacing */
:root {
  --site-width: 860px;
}

.main-container,
.release-main {
  width: min(100%, var(--site-width));
}

.site-header-controls {
  
  max-width: 100%;
  justify-self: end;

  
  
  justify-content: flex-end;
  
  padding: 0 clamp(6px, 0.9vw, 10px) clamp(3px, 0.35vw, 5px) 0;
}

.primary-nav {
  
  max-width: 100%;

  

  
}

.primary-nav::before {
  content: none;
}

.primary-nav-link {
  flex: 0 0 auto;
  
  padding-bottom: 3px;
}

@media (max-width: 820px) {
  .site-header-layout {
    grid-template-columns: 1fr;
    
    align-items: start;
  }

  .site-header-controls {
    width: 100%;
    align-items: stretch;
    justify-self: stretch;
    align-self: start;
    
    padding: 0;
  }

  .primary-nav {
    width: 100%;
    justify-content: flex-start;
    
  }
}

@media (max-width: 520px) {

  

  .primary-nav {
    
    grid-template-columns: repeat(3, max-content) 30px;
    
    justify-content: start;
  }
}

/* 19. v1.10 header polish: top-aligned language, lower subline, stronger slash navigation */
@media (min-width: 821px) {

  .site-header-layout {

    align-items: stretch;
  }

  .site-brand-stack {
    width: clamp(252px, 31vw, 318px);
    max-width: 100%;
    justify-content: flex-start;
  }

  .site-header-controls {
    align-self: stretch;
    justify-self: end;
    width: auto;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    
    padding: clamp(2px, 0.25vw, 4px) clamp(14px, 1.55vw, 18px) clamp(1px, 0.2vw, 3px) 0;
  }

  .primary-nav {
    --nav-gap: clamp(28px, 3.25vw, 40px);
    width: auto;
    max-width: 100%;
    align-self: flex-end;
    display: inline-flex;
    
    align-items: center;
    
    padding: 0;

  }

  .primary-nav-link {
    position: relative;
    flex: 0 0 auto;
  }

  .primary-nav-link + .primary-nav-link::before {
    content: "/";
    position: absolute;
    left: calc(var(--nav-gap) * -0.6);
    top: 50%;
    transform: translateY(-52%);
    color: rgba(43, 82, 115, 0.36);
    font-family: var(--font-action);
    font-weight: 400;
    font-size: 0.82em;
    line-height: 1;
    letter-spacing: 0;
    pointer-events: none;
  }

  
}

@media (max-width: 820px) {
  .site-brand-subline-wrap {
    margin-top: 7px;
  }

  .primary-nav {
    --nav-gap: clamp(20px, 4.7vw, 32px);
    
    letter-spacing: 0.065em;
  }
}

/* 20. v1.10b explicit slash navigation: avoid pseudo separator layout drift */
.primary-nav-link + .primary-nav-link::before {
  content: none !important;
}

@media (max-width: 820px) {
  .primary-nav {
    display: flex;
    flex-wrap: wrap;
    
  }

}

/* 21. v1.10c containment: keep slash navigation inside the shared site width */

/* 22. v1.11 navigation scale and card alignment polish */
@media (min-width: 821px) {
  .site-header {
    margin-bottom: clamp(9px, 1.05vw, 12px);
  }

  .site-header-controls {
    padding-top: 0;
    
  }

  .site-brand-subline-wrap {
    margin-top: clamp(10px, 0.95vw, 12px);
  }

  .primary-nav {

    line-height: 1;
    
    transform: translateY(2px);
  }

  .primary-nav-link {
    padding-bottom: 5px;
  }

  

}

/* 23. v1.12 test: move brand to content axis and separate navigation role color */
:root {
  --nav-text: #26313a;
  --nav-text-hover: #1e3d57;
  --nav-separator: rgba(38, 49, 58, 0.28);
}

/* 24. v1.13 nav simplification: no global search item, pipe separators, restore brand axis */
@media (min-width: 821px) {
  .site-header-layout {
    grid-template-columns: minmax(252px, 318px) minmax(0, 1fr);
    column-gap: clamp(42px, 6vw, 76px);
  }

  

  .primary-nav {
    justify-content: flex-end;
    gap: clamp(13px, 1.55vw, 19px);
    color: #171b1d;
    font-size: clamp(1.26rem, 2.05vw, 1.48rem);
    letter-spacing: 0.092em;
  }

  .primary-nav-link {
    color: #171b1d;
  }

  .primary-nav-link:hover,
  .primary-nav-link:focus-visible,
  .primary-nav-link.is-active {
    color: #111315;
  }

}

@media (max-width: 820px) {

  .primary-nav {
    color: #171b1d;
    
  }

  .primary-nav-link {
    color: #171b1d;
  }

}

@media (max-width: 420px) {
  .primary-nav {
    gap: 10px;
    font-size: clamp(0.94rem, 4.2vw, 1.05rem);
  }

}

/* 25. v1.14 header axis and responsive language tuning */
@media (min-width: 821px) {
  .site-brand-stack {
    /* Brand belongs to the page header, not to the card content axis. */
    margin-left: clamp(-14px, -1.15vw, -8px);
  }

  .site-header-controls {
    /* Keep the right control block inside the shared page rhythm. */
    padding-right: clamp(10px, 1.1vw, 14px);
    gap: clamp(10px, 1.15vw, 14px);
  }

  .primary-nav {
    margin-top: clamp(5px, 0.55vw, 8px);
  }
}

@media (max-width: 820px) {
  .site-header-layout {
    row-gap: clamp(8px, 2vw, 12px);
  }

  .site-brand-stack {
    margin-left: 0;
  }

  .site-header-controls {
    gap: 8px;
  }

  .primary-nav {
    font-size: clamp(1.02rem, 4.1vw, 1.18rem);
    gap: clamp(11px, 3vw, 16px);
  }
}

@media (max-width: 520px) {

  

  .primary-nav {
    order: 1;

    
    
  }

  
}

/* 26. v1.15 header reset: stable axes, ink navigation, clean breakpoints */

@media (min-width: 901px) {

  .site-brand-stack {
    
    max-width: 100%;
    
  }

  .site-header-controls {
    width: auto;
    max-width: 100%;
    justify-self: end;
    align-self: start;
    
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;

  }

  .primary-nav {
    order: 2;

    align-self: flex-end;

    

    

    
    
    transform: none;
  }
}

@media (max-width: 900px) {

  

  .site-brand-stack {
    
    max-width: 100%;
    
  }

  .site-brand-subline-wrap {
    margin-top: clamp(7px, 1.1vw, 10px);
  }

  .site-header-controls {
    
    max-width: 100%;

    

    
  }

  

}

/* 27. v1.16 professional surface pass: no global grid, cleaner paper surface, structured ink navigation */
:root {
  --bg-paper: #f8f7f4;
  --bg-paper-soft: #fbfaf7;

  --surface-line: rgba(29, 29, 27, 0.10);

  
  
}

body {
  background-color: var(--bg-paper);
  background-image:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.86), rgba(248,247,244,0) 38rem),
    linear-gradient(180deg, var(--bg-paper-soft) 0%, var(--bg-paper) 42%, #f6f5f1 100%);
  background-size: auto;
}

.main-container,
.release-main {
  padding-top: clamp(20px, 4vw, 34px);
}

@media (min-width: 901px) {

  

  .site-header-controls {
    padding: clamp(8px, 0.75vw, 10px) clamp(8px, 0.8vw, 10px) 0 0;
    gap: clamp(12px, 1.25vw, 16px);
  }

  
}

.notice.notice-warning,
.notice {
  background: rgba(214, 90, 90, 0.026);
}

@media (max-width: 520px) {
  body {
    background-image: linear-gradient(180deg, var(--bg-paper-soft) 0%, var(--bg-paper) 100%);
  }

  .main-container,
  .release-main {
    padding-top: 16px;
  }

  

  .primary-nav {
    width: 100%;
    
    border-top: 1px solid rgba(29, 29, 27, 0.11);
    border-bottom: 1px solid rgba(29, 29, 27, 0.07);

    
  }

  
}

/* 28. v1.17 navigation rail pass: full-width rail, credits item, stable header rhythm */
@media (min-width: 901px) {
  .site-header {
    margin-bottom: clamp(12px, 1.45vw, 18px);
  }

  

  

  

  
}

/* 29. v1.18 rail refinement: quieter navigation, clearer utility language, cleaner surfaces */
:root {
  --surface-card: rgba(255, 255, 255, 0.93);
  --surface-card-solid: #ffffff;
  --surface-line-soft: rgba(29, 29, 27, 0.055);
  --shadow-soft: 0 10px 28px rgba(31, 42, 48, 0.026);
  --nav-rail-line: rgba(29, 29, 27, 0.135);
  --nav-rail-line-soft: rgba(29, 29, 27, 0.055);
}

.card,
.release-card {
  background: rgba(255, 255, 255, 0.93);
  border-color: var(--surface-line-soft);
  box-shadow: var(--shadow-soft);
  backdrop-filter: none;
}

.landing-card,
.placeholder-card,
.release-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.91));
}

@media (min-width: 901px) {

  .primary-nav {
    border-top: 0;
    border-bottom: 1px solid var(--nav-rail-line);

    
    
  }

  .primary-nav-link {
    padding-bottom: 6px;
  }

  

  
}

@media (max-width: 900px) {
  .primary-nav {
    border-top: 0;
    border-bottom: 1px solid var(--nav-rail-line);
    
  }

  .primary-nav-link {
    padding-bottom: 6px;
  }

  .primary-nav-link::after {

    opacity: 0.82;
  }

  

}

@media (max-width: 520px) {

  .primary-nav {
    padding: 8px 0 10px;
    
  }

  .card,
  .release-card {
    box-shadow: 0 8px 22px rgba(31, 42, 48, 0.024);
  }
}

/* 30. v1.19 header character reset: remove corporate rail, quieter workshop navigation */
:root {
  --nav-ink: #1d1d1b;
  --nav-ink-hover: #111111;
  --nav-divider: rgba(29, 29, 27, 0.20);
}

@media (min-width: 901px) {

  

  

  .primary-nav {
    
    justify-self: start;
    
    max-width: 100%;

    
    flex-wrap: wrap;

    

    

  }

  .primary-nav-link {
    color: var(--nav-ink);
    padding: 0 0 6px;
  }

  .primary-nav-link::after {
    bottom: -2px;
    height: 2px;
    opacity: 0.78;
  }
}

@media (max-width: 900px) {

  

  .site-header-controls {

    
    
    justify-content: flex-start;

  }

  .primary-nav {

    

    align-items: center;

    
    
    color: var(--nav-ink);
    
    line-height: 1;
    
  }

  .primary-nav-link::after {
    bottom: -2px;
    height: 2px;
  }

}

/* 31. v1.20 content-rail navigation test: card-width nav directly above content */
:root {
  --nav-rail-bg: rgba(255, 255, 255, 0.82);
  --nav-rail-border: rgba(29, 29, 27, 0.075);
  --nav-rail-divider: rgba(29, 29, 27, 0.07);
  --nav-rail-hover: rgba(43, 82, 115, 0.045);
  --nav-rail-active: rgba(43, 82, 115, 0.060);
}

@media (min-width: 901px) {

  

  .site-brand-subline-wrap {
    margin-top: clamp(8px, 0.8vw, 10px);
  }

  

  .primary-nav {
    grid-area: nav;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: stretch;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--nav-rail-border);
    border-radius: 5px;
    background: linear-gradient(180deg, rgba(255,255,255,0.90), var(--nav-rail-bg));
    box-shadow: 0 8px 22px rgba(31, 42, 48, 0.018);
    overflow: hidden;
    color: var(--nav-ink);
    font-size: clamp(0.98rem, 1.35vw, 1.12rem);
    line-height: 1;
    letter-spacing: 0.09em;
  }
}

.primary-nav-link {

  

  

  
  border-left: 1px solid var(--nav-rail-divider);
  
}

.primary-nav-link:first-child {
  border-left: 0;
}

.primary-nav-link:hover,
.primary-nav-link:focus-visible {
  color: var(--nav-ink-hover);
  background: var(--nav-rail-hover);
}

.primary-nav-link.is-active {
  color: var(--nav-ink-hover);
  background: var(--nav-rail-active);
}

@media (max-width: 900px) {

  

  

  .primary-nav {

    display: grid;

    margin: 0;
    
    border: 1px solid var(--nav-rail-border);
    border-radius: 5px;
    background: linear-gradient(180deg, rgba(255,255,255,0.90), var(--nav-rail-bg));
    box-shadow: 0 7px 18px rgba(31, 42, 48, 0.016);
    overflow: hidden;
    font-size: clamp(0.86rem, 2.7vw, 1.02rem);
    letter-spacing: 0.074em;
  }

  .primary-nav-link {
    min-height: 42px;
    padding: 12px 8px 11px;
  }

  .primary-nav-link::after {
    left: 12px;
    right: 12px;
  }
}

@media (max-width: 520px) {

  

  

  .primary-nav {
    font-size: clamp(0.74rem, 3.55vw, 0.92rem);
    letter-spacing: 0.055em;
  }

  .primary-nav-link::after {
    left: 8px;
    right: 8px;
  }

}

/* 32. v1.21 Raccu Workshop Index: non-tab navigation + early project gallery component */
:root {
  --workshop-rail-line: rgba(29, 29, 27, 0.115);
  --workshop-rail-line-soft: rgba(29, 29, 27, 0.055);
  --workshop-rail-hover: rgba(43, 82, 115, 0.032);
  --workshop-card-bg: rgba(255, 255, 255, 0.72);
}

@media (min-width: 901px) {
  .site-header-layout {
    display: grid;
    grid-template-columns: minmax(252px, 318px) minmax(0, 1fr);
    grid-template-areas:
      "brand language"
      "nav nav";
    column-gap: clamp(42px, 6vw, 78px);
    row-gap: clamp(14px, 1.55vw, 18px);
    align-items: start;
  }

  .site-brand-stack {
    grid-area: brand;
    width: clamp(252px, 31vw, 318px);
    margin-left: clamp(-12px, -0.9vw, -8px);
  }

  .site-header-controls {
    display: contents;
  }

}

.primary-nav {

  

  

  border-top: 1px solid var(--workshop-rail-line-soft);
  border-bottom: 1px solid var(--workshop-rail-line);

  
  overflow: visible;
  
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0;
}

.primary-nav-link {

  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 3px;

  

  
  
  text-align: left;

}

.primary-nav-link:first-child {
  border-left: 0 !important;
}

.primary-nav-link::after {

  

  width: auto;

  

}

/* First gallery pattern for project/tool/release areas. */
.project-gallery-section {
  width: 100%;
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: clamp(22px, 4vw, 28px);
  background: linear-gradient(180deg, rgba(255,255,255,0.74), rgba(255,255,255,0.56));
  border: 1px solid var(--surface-line-soft);
  border-radius: 5px;
  box-shadow: 0 8px 24px rgba(31, 42, 48, 0.020);
}

.project-gallery-section .release-kicker {
  margin-bottom: 10px;
}

.gallery-title {
  margin: 0 0 8px;
  font-family: var(--font-copy);
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  font-weight: 400;
  line-height: 1.12;
  color: var(--text-main);
}

.project-card {
  min-height: 184px;
  display: flex;
  flex-direction: column;
  padding: 14px 13px 13px;
  border: 1px solid rgba(29, 29, 27, 0.075);
  border-radius: 4px;
  
  color: var(--text-main);
  text-decoration: none;
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.project-card:hover,
.project-card:focus-visible {
  border-color: rgba(43, 82, 115, 0.28);
  background: rgba(255, 255, 255, 0.84);
  transform: translateY(-1px);
}

.project-card:focus-visible {
  outline: 3px solid rgba(43, 82, 115, 0.22);
  outline-offset: 3px;
}

.project-card-meta {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-meta);
  font-size: 0.68rem;
  font-weight: 600;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--accent-blue);
}

.project-card h3 {
  margin: 0 0 8px;
  font-family: var(--font-copy);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--text-main);
}

.project-card p {
  margin: 0;
  font-family: var(--font-copy);
  font-size: 0.82rem;
  line-height: 1.42;
  color: var(--text-muted);
}

.project-card-link {
  display: block;
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--font-meta);
  font-size: 0.72rem;
  font-weight: 600;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--accent-blue);
}

@media (max-width: 900px) {
  .site-header-layout {
    display: grid;

    
  }

  .site-header-controls {
    width: 100%;
    display: flex;
    flex-direction: column;
    
    padding: 0;
  }

  .primary-nav {

    
    padding: 11px 0 12px;
  }

  
}

@media (max-width: 640px) {
  .primary-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
    padding: 10px 0 12px;
  }

  .primary-nav-link {
    padding: 6px 4px 8px;
  }

  .primary-nav-link::after {
    bottom: -10px;
  }
}

@media (max-width: 520px) {

  

  

  .project-gallery-section {
    padding: 20px;
  }

  .project-card {
    min-height: 0;
  }
}

/* v1.22: simplify the public navigation and move galleries to the correct section pages. */

.primary-nav {

  grid-template-columns: repeat(3, minmax(0, 1fr));

  

  
  
}

.primary-nav::before {
  display: none !important;
  content: none !important;
}

.primary-nav-link {

  

  
  border-right: 1px solid rgba(29, 29, 27, 0.07);

  

  

  
  
}

.primary-nav-link:last-child {
  border-right: 0;
}

.primary-nav-link:hover,
.primary-nav-link:focus-visible,
.primary-nav-link.is-active {
  
  background: rgba(255, 255, 255, 0.58);
}

.project-gallery-section {
  margin-top: clamp(18px, 3vw, 26px);
}

.project-card-muted {
  opacity: 0.88;
}

.page-title {
  margin: 0 0 10px;
  font-family: var(--font-copy);
  font-size: clamp(1.55rem, 3vw, 2.05rem);
  font-weight: 400;
  line-height: 1.08;
  color: var(--text-main);
}

.page-intro-card p:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {

  

  .primary-nav {
    
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  
}

@media (max-width: 520px) {
  .primary-nav-link {
    min-height: 38px;
    padding: 10px 8px 9px;

  }

  
}

/* v1.23: information architecture reset — Docs / Projects / Credits; open professional navigation. */

.site-header-controls {
  width: 100%;
  align-self: end;
  
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(16px, 2.2vw, 22px);
  padding-top: 8px;
}

.primary-nav {

  

  

  
  border-radius: 0;
  
}

/* Projects page gallery structure. */
.project-hub-section {
  margin-top: clamp(16px, 2.6vw, 22px);
}

.projects-page .project-gallery-section,
.project-hub-section {
  background: linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.72));
}

.project-card-current {
  
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72));
}

/* Section pages previously named Releases/Tools are now nested under Projects conceptually. */
.release-gallery-section.project-gallery-section {
  margin-top: clamp(16px, 2.6vw, 22px);
}

@media (max-width: 900px) {

  .site-header-controls {
    align-items: flex-start;
    gap: 10px;
    padding-top: 0;
  }

  

  .primary-nav {
    order: 1;
  }

}

@media (max-width: 520px) {

  .site-header-controls {
    gap: 9px;
  }

  .primary-nav {
    display: flex;
    flex-wrap: wrap;
    
  }

  .primary-nav-link {
    padding-bottom: 7px;

  }

  
}

/* v1.24 masthead reset: bundled brand, utility language, and primary navigation */
:root {
  --masthead-line: rgba(29, 29, 27, 0.105);
  --masthead-line-soft: rgba(29, 29, 27, 0.052);
  --masthead-accent: rgba(43, 82, 115, 0.92);
}

.site-header {
  margin-bottom: clamp(18px, 2.4vw, 26px);
  padding-bottom: clamp(13px, 1.7vw, 18px);
  
  position: relative;
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: clamp(42px, 7vw, 64px);
  height: 2px;
  background: var(--masthead-accent);
  opacity: 0.82;
}

.site-header-layout {
  display: grid;
  grid-template-columns: minmax(248px, 328px) minmax(0, 1fr);
  grid-template-areas:
    "brand language"
    "brand nav";
  column-gap: clamp(42px, 7vw, 96px);
  row-gap: clamp(16px, 2.1vw, 22px);
  align-items: stretch;
}

.site-brand-stack {
  grid-area: brand;
  width: clamp(250px, 31vw, 318px);
  max-width: 100%;
  margin-left: clamp(-10px, -0.8vw, -6px);
  align-self: start;
}

.site-brand-wordmark-link,
.site-brand-subline-wrap {
  width: 100%;
  max-width: 100%;
}

.site-brand-wordmark,
.site-brand-subline-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.site-brand-subline-wrap {
  margin-top: clamp(7px, 0.8vw, 10px);
  line-height: 0;
}

.site-header-controls {
  display: contents;
}

.primary-nav {
  grid-area: nav;
  justify-self: end;
  align-self: end;
  width: auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: clamp(36px, 5.3vw, 72px);
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--text-main);
}

.primary-nav::before,
.primary-nav::after {
  display: none !important;
  content: none !important;
}

.primary-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 0 clamp(3px, 0.45vw, 5px);
  border: 0 !important;
  background: transparent !important;
  color: var(--text-main);
  font-family: var(--font-meta);
  font-weight: 600;
  font-synthesis: none;
  font-size: clamp(0.98rem, 1.35vw, 1.10rem);
  line-height: 1;
  
  text-transform: uppercase;
  text-decoration: none;
  transition: color 140ms ease;
}

.primary-nav-link:hover,
.primary-nav-link:focus-visible,
.primary-nav-link.is-active {
  color: #111111;
  background: transparent !important;
}

.primary-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(clamp(3px, 0.45vw, 5px) * -1 - 1px);
  height: 2px;
  background: var(--accent-blue);
  opacity: 0;
  transform: scaleX(0.72);
  transform-origin: 50% 50%;
  transition: opacity 140ms ease, transform 140ms ease;
}

.primary-nav-link:hover::after,
.primary-nav-link:focus-visible::after,
.primary-nav-link.is-active::after {
  opacity: 0.82;
  transform: scaleX(1);
}

/* v1.24 project/gallery card polish: stronger archive-card identity without shop styling */
.project-gallery-section,
.project-hub-section {
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.84));
  border-color: rgba(29, 29, 27, 0.062);
  box-shadow: 0 10px 26px rgba(31, 42, 48, 0.024);
}

.project-card {
  position: relative;
  border-color: rgba(29, 29, 27, 0.085);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.76));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
}

.project-card-current {
  border-color: rgba(43, 82, 115, 0.30);
}

.project-card-current::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 3px;
  border-radius: 4px 0 0 4px;
  background: var(--accent-blue);
  opacity: 0.82;
}

.project-card-meta,
.project-card-link {
  color: var(--accent-blue);
}

@media (max-width: 900px) {
  .site-header {
    margin-bottom: clamp(16px, 2.8vw, 22px);
    padding-bottom: clamp(13px, 2.2vw, 17px);
  }

  .site-header-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "nav"
      "language";
    row-gap: clamp(11px, 2.4vw, 15px);
    align-items: start;
  }

  .site-brand-stack {
    width: clamp(230px, 56vw, 306px);
    margin-left: clamp(-6px, -1.2vw, 0px);
  }

  .primary-nav {
    justify-self: start;
    align-self: start;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: clamp(24px, 8vw, 48px);
  }

  .primary-nav-link {
    font-size: clamp(0.92rem, 3.25vw, 1.04rem);
    letter-spacing: 0.11em;
  }

}

@media (max-width: 520px) {
  .site-header {
    margin-bottom: 15px;
    padding-bottom: 14px;
  }

  .site-header::after {
    width: 46px;
  }

  .site-header-layout {
    row-gap: 11px;
  }

  .site-brand-stack {
    width: clamp(220px, 68vw, 272px);
    margin-left: 0;
  }

  .site-brand-subline-wrap {
    margin-top: 6px;
  }

  .primary-nav {
    gap: 12px 24px;
  }

  .primary-nav-link {
    font-size: clamp(0.85rem, 3.95vw, 0.96rem);
    letter-spacing: 0.095em;
  }

}

/* v1.25 masthead order correction: remove orphan blue line, later breakpoint, language above nav */
.site-header::after {
  content: none !important;
  display: none !important;
}

.site-header {
  border-bottom: 1px solid rgba(29, 29, 27, 0.105);
}

@media (min-width: 741px) and (max-width: 900px) {
  .site-header {
    margin-bottom: clamp(16px, 2.4vw, 22px);
    padding-bottom: clamp(13px, 1.9vw, 17px);
  }

  .site-header-layout {
    display: grid;
    grid-template-columns: minmax(248px, 318px) minmax(0, 1fr);
    grid-template-areas:
      "brand language"
      "brand nav";
    column-gap: clamp(36px, 5.6vw, 72px);
    row-gap: clamp(14px, 1.8vw, 18px);
    align-items: stretch;
  }

  .site-brand-stack {
    grid-area: brand;
    width: clamp(240px, 36vw, 306px);
    margin-left: clamp(-8px, -0.9vw, -4px);
  }

  .site-header-controls {
    display: contents;
  }

  .primary-nav {
    grid-area: nav;
    justify-self: end;
    align-self: end;
    width: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: clamp(26px, 4.2vw, 46px);
  }

  .primary-nav-link {
    font-size: clamp(0.9rem, 1.75vw, 1.02rem);
    letter-spacing: 0.105em;
  }
}

@media (max-width: 740px) {
  .site-header {
    margin-bottom: clamp(15px, 3.2vw, 20px);
    padding-bottom: clamp(13px, 2.8vw, 17px);
  }

  .site-header-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "language"
      "nav";
    row-gap: clamp(10px, 2.7vw, 14px);
    align-items: start;
  }

  .site-brand-stack {
    grid-area: brand;
    width: clamp(220px, 68vw, 286px);
    margin-left: 0;
  }

  .site-header-controls {
    display: contents;
  }

  .primary-nav {
    grid-area: nav;
    justify-self: start;
    align-self: start;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px clamp(22px, 8vw, 40px);
    margin: 0;
  }

  .primary-nav-link {
    padding-bottom: 7px;
  }
}

/* v1.26 masthead axis correction: align brand, controls, and cards to the same shell edges */
.site-header,
.card,
.release-card {
  width: 100%;
}

.site-brand-stack {
  margin-left: 0 !important;
}

.primary-nav {
  padding-right: 0 !important;
}

@media (min-width: 741px) and (max-width: 900px) {
  .site-brand-stack {
    margin-left: 0 !important;
  }

}

@media (max-width: 740px) {
  .site-brand-stack,
.primary-nav {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* v1.27 legal notice content pass */
.legal-card {
  max-width: var(--content-width);
}

.legal-card .page-title {
  margin-bottom: 0.55rem;
}

.legal-lead {
  margin: 0 0 1.5rem;
  color: var(--text-muted);
  font-style: italic;
}

.legal-section {
  margin: 1.55rem 0 0;
}

.legal-section:first-of-type {
  margin-top: 1.25rem;
}

.legal-section h2 {
  margin: 0 0 0.55rem;
  font-family: var(--font-meta);
  font-size: 0.82rem;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-blue);
}

.legal-section p {
  margin: 0 0 0.85rem;
}

.legal-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.4rem 1rem;
  margin: 0 0 0.85rem;
  color: var(--text-muted);
}

.legal-list dt {
  font-family: var(--font-meta);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-main);
}

.legal-list dd {
  margin: 0;
}

.legal-card a {
  color: var(--accent-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

@media (max-width: 560px) {
  .legal-list {
    grid-template-columns: 1fr;
    gap: 0.15rem 0;
  }
}

/* v1.28 legal cleanup: focused impressum and terms */
.legal-card .page-title:first-child {
  margin-top: 0;
}
.legal-card .legal-section h2 {
  letter-spacing: 0.12em;
}
.legal-card .legal-section a {
  overflow-wrap: anywhere;
}

/* v1.29 footer grouping and release usage notice */
.site-footer {
  gap: 8px;
  
}

.footer-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  
  width: 100%;
}

.footer-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
}

.footer-links::before {
  content: none;
}

.footer-link-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 11px;
}

.footer-link-row-primary {
  font-size: 0.78rem;
}

.footer-link-row-legal {
  font-size: 0.74rem;
  opacity: 0.92;
}

.footer-link {
  white-space: nowrap;
}

.release-redistribution-note {
  margin-top: 0.8rem;
  border-left-color: var(--notice-warning);
  background: rgba(214, 90, 90, 0.035);
  color: var(--text-muted);
  font-size: 0.93rem;
}

@media (max-width: 560px) {
  .site-footer {
    padding-top: 32px;
  }

  .footer-link-row {
    gap: 5px 9px;
  }

  .footer-link-row-legal {
    max-width: 22rem;
    line-height: 1.45;
  }
}

/* v1.30: reduce primary navigation to Docs/Projects and give the footer clearer hierarchy */
@media (min-width: 741px) {
  .primary-nav {
    gap: clamp(42px, 6vw, 88px);
  }
}

.primary-nav-link {
  letter-spacing: 0.13em;
}

.site-footer {
  margin-top: auto;
  padding-top: clamp(34px, 5vw, 48px);
  padding-bottom: clamp(30px, 4vw, 40px);
  color: var(--text-soft);
  position: relative;
}

.site-footer::before {
  content: "";
  display: block;
  width: min(220px, 52vw);
  height: 1px;
  margin: 0 auto 14px;
  background: linear-gradient(90deg, transparent, rgba(43, 82, 115, 0.22), transparent);
}

.footer-brand {
  gap: 8px 12px;
  line-height: 1.25;
}

.footer-mark {
  
  font-weight: 600;
}

.footer-copy {
  color: rgba(96, 97, 95, 0.82);
}

.footer-brand .footer-mark::after {
  content: "|";
  margin-left: 12px;
  color: rgba(96, 97, 95, 0.36);
  font-weight: 400;
}

.footer-link-row-primary .footer-link {
  color: rgba(43, 82, 115, 0.88);
}

.footer-link-row-legal .footer-link {
  color: rgba(96, 97, 95, 0.82);
}

.footer-link:hover,
.footer-link:focus-visible {
  color: var(--text-main);
}

@media (max-width: 560px) {
  .site-footer::before {
    width: min(180px, 48vw);
    margin-bottom: 12px;
  }

  .footer-brand {
    flex-direction: column;
    gap: 3px;
  }

  .footer-brand .footer-mark::after {
    content: none;
  }

  .footer-link-row-primary {
    margin-top: 2px;
  }
}

/* v1.31: footer brand hierarchy and privacy policy text page */
.site-footer::before {
  content: none !important;
  display: none !important;
}

.footer-mark {
  color: var(--accent-blue);
}

.legal-bullets {
  margin: 10px 0 16px 1.1rem;
  padding: 0;
}

.legal-bullets li {
  margin: 0.28em 0;
}

/* v1.32: compact privacy policy layout and source-contribution privacy scope */

.privacy-card .legal-lead {
  margin-bottom: 1.1rem;
}

.privacy-card .legal-section {
  margin-top: 1.08rem;
}

.privacy-card .legal-section:first-of-type {
  margin-top: 0.95rem;
}

.privacy-card .legal-section h2 {
  margin-bottom: 0.36rem;
  font-size: 0.76rem;
  letter-spacing: 0.105em;
}

.privacy-card .legal-section p {
  margin-bottom: 0.62rem;
  
}

.privacy-card .legal-list {
  margin-bottom: 0.7rem;
  gap: 0.22rem 0.85rem;
}

@media (max-width: 560px) {
  .privacy-card .legal-bullets {
    
    gap: 0.1rem;
  }
}

/* v1.33: privacy cleanup after source-contribution addendum */

.privacy-card .legal-section.legal-note {
  display: none;
}

.privacy-card .legal-bullets {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.06rem 1.05rem;

}

.privacy-card .legal-section p {
  font-size: 0.93rem;
  line-height: 1.43;
}

.privacy-card .legal-section h2,
.privacy-card .legal-section h3 {
  margin-top: 0.92rem;
}

.privacy-card .legal-list {
  font-size: 0.92rem;
}

@media (max-width: 560px) {
  .privacy-card .legal-bullets {
    grid-template-columns: 1fr;
    
  }
}

/* v1.34: privacy policy readability repair */
.privacy-card {
  max-width: min(100%, 800px);
}

.privacy-card .legal-bullets {
  display: block;
  columns: 1;
  column-count: 1;
  margin: 0.55rem 0 0.85rem;
  padding: 0;
  list-style: none;
  font-size: 0.93rem;
  line-height: 1.43;
}

.privacy-card .legal-bullets li {
  position: relative;
  margin: 0.18rem 0;
  padding-left: 0.95rem;
  line-height: 1.43;
  break-inside: avoid;
}

.privacy-card .legal-bullets li::before {
  content: "–";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(43, 82, 115, 0.7);
}

.privacy-card .legal-section h3 {
  margin: 0.95rem 0 0.38rem;
  font-family: var(--font-meta);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.105em;
  text-transform: uppercase;
  color: var(--accent-blue);
}

@media (max-width: 560px) {
  .privacy-card .legal-bullets {
    display: block;
    font-size: 0.93rem;
  }
}

/* v1.35: strict Raccu/NGRP terms page */
.terms-card {
  max-width: min(100%, 860px);
}

.terms-card .legal-section {
  margin-top: 1.28rem;
}

.terms-card .legal-section h2 {
  margin-bottom: 0.42rem;
}

.terms-card .legal-section p {
  margin-bottom: 0.68rem;
  line-height: 1.52;
}

.terms-card strong {
  color: var(--text-main);
  font-weight: 600;
}

.terms-label {
  margin: 0.85rem 0 0.35rem !important;
  font-family: var(--font-meta);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.105em;
  text-transform: uppercase;
  color: var(--accent-blue);
}

.terms-credit-block {
  margin: 0.35rem 0 0.9rem;
  padding: 0.75rem 0.95rem;
  border-left: 3px solid var(--accent-blue);
  background: rgba(43, 82, 115, 0.045);
}

.terms-credit-block p {
  margin: 0 !important;
  font-family: var(--font-meta);
  font-size: clamp(0.98rem, 1.25vw, 1.08rem);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.025em;
  line-height: 1.48;
  color: var(--text-main);
}

.terms-credit-block a {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.terms-bullets {
  display: block;
  columns: 1;
  column-count: 1;
  margin: 0.4rem 0 0.85rem;
  padding: 0;
  list-style: none;
  font-size: 0.94rem;
  line-height: 1.43;
}

.terms-bullets li {
  position: relative;
  margin: 0.17rem 0;
  padding-left: 0.95rem;
  break-inside: avoid;
}

.terms-bullets li::before {
  content: "–";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(43, 82, 115, 0.72);
}

.terms-enforcement {
  padding: 1rem 1.05rem 0.35rem;
  border-left: 3px solid rgba(214, 90, 90, 0.74);
  background: rgba(214, 90, 90, 0.032);
}

.terms-contact-list {
  grid-template-columns: minmax(220px, max-content) minmax(0, 1fr);
}

@media (max-width: 720px) {
  .terms-card {
    max-width: 100%;
  }

  .terms-contact-list {
    grid-template-columns: 1fr;
    gap: 0.15rem 0;
  }
}

/* v1.36 impressum contact alignment fix */

.legal-contact-list dt {
  
  align-items: center;
  min-height: 1.45rem;
  
}

.legal-contact-list dd {
  
  align-items: center;
  min-height: 1.45rem;
  
}

@media (max-width: 560px) {

  .legal-contact-list dt {
    min-height: 0;
  }

  .legal-contact-list dd {
    min-height: 0;
    
  }
}

/* v1.41 project card blueprint layer: locked to the card and contrast-prepped for visibility. */

.project-card-current.project-card-blueprint {
  box-shadow:
    inset 3px 0 0 rgba(43, 82, 115, 0.78),
    inset 0 1px 0 rgba(255,255,255,0.75);
}

.project-card-current.project-card-blueprint::before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  border-radius: inherit;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.995) 0%,
      rgba(255,255,255,0.985) 45%,
      rgba(255,255,255,0.88) 64%,
      rgba(255,255,255,0.58) 100%);
  opacity: 1;
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 700px) {

  .project-card-current.project-card-blueprint::before {
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0.995) 0%,
        rgba(255,255,255,0.985) 60%,
        rgba(255,255,255,0.80) 100%);
  }
}

/* v1.42 projects page: category filter and full-width runtime feature card. */
.projects-intro-card {
  padding-bottom: clamp(18px, 3vw, 24px);
}

.project-category-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(18px, 3vw, 24px);
  border: 1px solid rgba(29, 29, 27, 0.075);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.56);
}

.project-category-button {
  min-height: 42px;
  border: 0;
  border-right: 1px solid rgba(29, 29, 27, 0.065);
  background: transparent;
  color: var(--text-main);
  font-family: var(--font-meta);
  font-size: clamp(0.82rem, 1.4vw, 0.94rem);
  font-weight: 600;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

.project-category-button:last-child {
  border-right: 0;
}

.project-category-button:hover,
.project-category-button:focus-visible,
.project-category-button.is-active {
  background: rgba(255, 255, 255, 0.72);
  color: var(--text-main);
}

.project-category-button:focus-visible {
  outline: 3px solid rgba(43, 82, 115, 0.18);
  outline-offset: -3px;
}

.project-category-button.is-active {
  box-shadow: inset 0 -2px 0 rgba(43, 82, 115, 0.82);
}

.project-panel[hidden],
.project-card[hidden],
.project-search-empty[hidden] {
  display: none !important;
}

.project-feature-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.project-card-featured .project-card-meta {
  margin-bottom: 14px;
}

.project-card-featured h3 {
  
  margin-bottom: 0;

}

.project-card-featured .project-card-link {

  padding-top: 0;
}

.project-search-label {
  display: block;
  margin: 14px 0 8px;
  font-family: var(--font-meta);
  font-size: 0.72rem;
  font-weight: 600;
  font-synthesis: none;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--accent-blue);
}

.project-search-input {
  width: min(100%, 520px);
  min-height: 42px;
  margin: 0 0 18px;
  padding: 10px 12px;
  border: 1px solid rgba(29, 29, 27, 0.12);
  border-radius: 4px;
  background: rgba(255,255,255,0.78);
  color: var(--text-main);
  font-family: var(--font-copy);
  font-size: 0.95rem;
}

.project-search-input:focus {
  outline: 3px solid rgba(43, 82, 115, 0.18);
  border-color: rgba(43, 82, 115, 0.32);
}

.project-search-empty {
  margin: 12px 0 0;
  color: var(--text-muted);
  font-family: var(--font-copy);
  font-size: 0.92rem;
}

@media (max-width: 740px) {
  .project-category-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-category-button:nth-child(2) {
    border-right: 0;
  }

  .project-category-button:nth-child(-n/**/+2) {
    border-bottom: 1px solid rgba(29, 29, 27, 0.065);
  }

  .project-card-featured h3,
  .project-card-featured .project-card-link {
    max-width: 62%;
  }

  
}

@media (max-width: 460px) {
  .project-card-featured h3,
  .project-card-featured .project-card-link {
    max-width: 78%;
  }

}

/* v1.43 projects feature pass: cleaner intro, stronger runtime feature, better mobile header utility alignment. */
.projects-intro-card .page-title {
  margin-bottom: 8px;
  font-size: clamp(1.42rem, 2.55vw, 1.82rem);
  letter-spacing: 0.105em;
}

[data-project-panel="runtime"] .gallery-title {
  margin-bottom: clamp(12px, 2vw, 18px);
  font-size: clamp(1.55rem, 2.8vw, 2.05rem);
  letter-spacing: 0.015em;
}

.project-card-featured {
  min-height: clamp(230px, 29vw, 300px);
  justify-content: center;
  padding: clamp(24px, 4.2vw, 40px) clamp(24px, 4.4vw, 42px);
}

.project-card-featured h3 {
  max-width: 42%;
  font-size: clamp(1.65rem, 3vw, 2.45rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
}

.project-card-featured .project-card-link {
  max-width: 42%;
  margin-top: clamp(42px, 7vw, 86px);
}

.project-card-featured.project-card-blueprint::after {
  inset: -8% -1% -8% 33%;
  background-image: url("../img/projects/mh3u-mh3g-restoration-blueprint.png");
  background-size: auto 126%;
  background-position: right center;
  opacity: 0.42;
}

.project-card-featured.project-card-blueprint::before {
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.998) 0%,
      rgba(255,255,255,0.992) 39%,
      rgba(255,255,255,0.78) 58%,
      rgba(255,255,255,0.26) 100%);
}

.project-card-featured.project-card-blueprint:hover::after,
.project-card-featured.project-card-blueprint:focus-visible::after {
  opacity: 0.47;
}

@media (max-width: 740px) {

  .project-card-featured {
    min-height: 218px;
    padding: 22px 22px 20px;
  }

  .project-card-featured h3,
.project-card-featured .project-card-link {
    max-width: 64%;
  }

  .project-card-featured.project-card-blueprint::after {
    inset: -3% -26% -3% 35%;
    background-size: auto 106%;
    background-position: right center;
    opacity: 0.27;
  }

  .project-card-featured.project-card-blueprint::before {
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0.998) 0%,
        rgba(255,255,255,0.992) 58%,
        rgba(255,255,255,0.58) 100%);
  }
}

@media (max-width: 460px) {

  .project-card-featured h3,
.project-card-featured .project-card-link {
    max-width: 72%;
  }

  .project-card-featured.project-card-blueprint::after {
    inset: -2% -48% -2% 42%;
    background-size: auto 96%;
    opacity: 0.24;
  }

  .project-card-featured.project-card-blueprint::before {
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0.998) 0%,
        rgba(255,255,255,0.992) 64%,
        rgba(255,255,255,0.62) 100%);
  }
}

/* v1.48 projects title card correction: title mark, game name, version, title IDs. */

/* v1.49 projects: runtime filter already names the category, so the content panel starts directly with the title card. */

/* v1.50 projects: restore global page width and clean mobile Title ID stack. */

/* v1.51 projects: stable title-line split and consistent mobile blueprint crop. */

/* v1.52 projects: dedicated narrow/mobile title-card blueprint composition. */

/* v1.53 projects: use the single master blueprint everywhere.
   All previous derived blueprint overlays are intentionally retired. */

/* v1.54 projects: restore blueprint visibility while keeping the single master asset. */

/* v1.55 projects: restore the working title-card blueprint composition.
   The raw master image is retained as source material, but the active card
   background uses a clean white-backed title-card derivative so it does not
   collapse into an almost invisible wash or appear as a blue alpha mask in previews. */

/* v1.57 projects: restore global page width after project-card cleanup. */

.projects-page-current .projects-intro-card {
  padding-top: clamp(24px, 3.2vw, 32px);
  padding-bottom: clamp(18px, 2.4vw, 24px);
}

.projects-page-current .projects-intro-card .page-title {
  margin: 0 0 0.62rem;
  color: var(--accent-blue);
  font-family: var(--font-action);
  font-size: clamp(1.06rem, 1.72vw, 1.28rem);
  font-weight: 600;
  font-synthesis: none;
  line-height: 1.05;
  letter-spacing: 0.115em;
  text-transform: uppercase;
}

.projects-page-current .projects-intro-card > p:not(.release-kicker):not(.project-context-title) {
  max-width: 700px;
  margin-top: 0;
  font-size: clamp(0.92rem, 1.35vw, 1rem);
  line-height: 1.46;
}

.projects-page-current .project-context-quote {
  max-width: 700px;
  margin: clamp(14px, 2.1vw, 18px) 0 0;
  padding: 0.70rem 0.95rem 0.72rem;
  border-left: 3px solid rgba(43, 82, 115, 0.74);
  background:
    linear-gradient(90deg, rgba(43, 82, 115, 0.035), rgba(255,255,255,0.18));
}

.projects-page-current .project-context-quote p {
  margin: 0;
  color: var(--text-muted);
  font-family: var(--font-copy);
}

.projects-page-current .project-context-title {
  margin-bottom: 0.32rem !important;
  color: var(--accent-blue) !important;
  font-family: var(--font-meta) !important;
  font-size: 0.60rem !important;
  font-weight: 600;
  font-synthesis: none;
  letter-spacing: 0.10em;
  line-height: 1;
  text-transform: uppercase;
}

.projects-page-current .project-context-quote p:not(.project-context-title) {
  font-size: clamp(0.82rem, 1.15vw, 0.90rem);
  line-height: 1.42;
  font-style: italic;
}

.projects-page-current .project-category-nav {
  margin-top: clamp(18px, 2.5vw, 22px);
}

.projects-page-current .project-runtime-panel {
  padding-top: clamp(18px, 2.6vw, 24px);
}

.projects-page-current .project-runtime-panel .project-feature-stack {
  gap: 0;
}

.projects-page-current .project-title-card {
  min-height: clamp(178px, 18vw, 206px);
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  grid-template-columns: 1fr;
  align-content: stretch;
  padding: clamp(22px, 3vw, 28px) clamp(26px, 3.7vw, 34px) clamp(18px, 2.5vw, 23px);
}

.projects-page-current .project-title-card-name,
.projects-page-current .project-title-card-game,
.projects-page-current .project-title-card-version,
.projects-page-current .project-title-card-footer {
  position: relative;
  z-index: 2;
  max-width: 43%;
}

.projects-page-current .project-title-card-name {
  display: block;
  margin: 0 0 0.45rem;
  color: var(--accent-blue);
  font-family: var(--font-meta);
  font-size: clamp(0.62rem, 0.82vw, 0.72rem);
  font-weight: 600;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}

.projects-page-current .project-title-card-game {
  display: block;
  color: var(--text-main);
  font-family: var(--font-copy);
  font-size: clamp(1.26rem, 2.25vw, 1.64rem);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.04;
  letter-spacing: 0.018em;
}

.projects-page-current .project-title-card-series {
  display: block;
}

.projects-page-current .project-title-card-version {
  display: inline-grid;
  grid-template-columns: auto auto;
  column-gap: 0.42rem;
  align-items: baseline;
  width: max-content;
  margin-top: 0.58rem;
  color: rgba(43, 82, 115, 0.92);
  font-family: var(--font-meta);
  font-size: clamp(0.56rem, 0.74vw, 0.64rem);
  font-weight: 600;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.projects-page-current .project-title-card-version span {
  color: var(--accent-blue);
  letter-spacing: 0.105em;
}

.projects-page-current .project-title-card-footer {
  grid-row: 5;
  align-self: end;
  max-width: none;
  width: 100%;
  margin-top: clamp(20px, 4vw, 34px);
}

.projects-page-current .project-title-card-ids {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, max-content);
  column-gap: clamp(0.62rem, 1.45vw, 1.05rem);
  row-gap: 0.30rem;
  align-items: baseline;
  width: 100%;
  color: rgba(29, 29, 27, 0.70);
  font-family: var(--font-meta);
  font-size: clamp(0.54rem, 0.70vw, 0.62rem);
  font-weight: 600;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.projects-page-current .project-title-card-ids-label {
  color: var(--accent-blue);
  letter-spacing: 0.105em;
}

@media (max-width: 740px) {

  .projects-page-current .project-title-card {
    min-height: 184px;
    padding: 19px 20px 17px;
  }

  .projects-page-current .project-title-card-name {
    font-size: clamp(0.58rem, 2.2vw, 0.66rem);
    letter-spacing: 0.095em;
  }

  .projects-page-current .project-title-card-game {
    font-size: clamp(1.02rem, 4.65vw, 1.30rem);
    line-height: 1.02;
  }

  .projects-page-current .project-title-card-version,
  .projects-page-current .project-title-card-ids {
    font-size: clamp(0.50rem, 2.10vw, 0.57rem);
  }

  .projects-page-current .project-title-card-footer {
    margin-top: clamp(17px, 5vw, 26px);
  }

  .projects-page-current .project-title-card-ids {
    grid-template-columns: max-content;
    row-gap: 0.22rem;
    width: max-content;
  }

  

}

@media (max-width: 520px) {
  .projects-page-current .project-title-card {
    min-height: 184px;
    padding: 18px 19px 16px;
  }

  .projects-page-current .project-title-card-game {
    font-size: clamp(0.98rem, 5.45vw, 1.18rem);
  }

  
}

/* v1.59 projects: stabilize title-card blueprint across desktop, narrow desktop and mobile.
   Keep the same prepared title-card background and the same visibility model at all widths;
   only the text column is slightly tightened on narrow layouts so the blueprint keeps room. */
.projects-page-current .main-container {
  width: min(100%, var(--site-width));
  max-width: var(--site-width);
}

.projects-page-current .project-title-card.project-card-blueprint::after {
  inset: 0;
  background-image: url("../img/projects/mh3u-mh3g-restoration-blueprint-title-card-bg.png");
  background-size: 100% auto;
  background-position: right center;
  background-repeat: no-repeat;
  opacity: 0.56;
  filter: none;
}

.projects-page-current .project-title-card.project-card-blueprint::before {
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.998) 0%,
      rgba(255,255,255,0.996) 39%,
      rgba(255,255,255,0.84) 56%,
      rgba(255,255,255,0.30) 100%);
}

.projects-page-current .project-title-card.project-card-blueprint:hover::after,
.projects-page-current .project-title-card.project-card-blueprint:focus-visible::after {
  opacity: 0.60;
}

@media (max-width: 740px) {
  .projects-page-current .project-title-card-name,
  .projects-page-current .project-title-card-game,
  .projects-page-current .project-title-card-version {
    max-width: 56%;
  }

  .projects-page-current .project-title-card.project-card-blueprint::after {
    inset: 0;
    background-image: url("../img/projects/mh3u-mh3g-restoration-blueprint-title-card-bg.png");
    background-size: 100% auto;
    background-position: right center;
    background-repeat: no-repeat;
    opacity: 0.56;
  }

  .projects-page-current .project-title-card.project-card-blueprint::before {
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0.998) 0%,
        rgba(255,255,255,0.996) 39%,
        rgba(255,255,255,0.84) 56%,
        rgba(255,255,255,0.30) 100%);
  }
}

@media (max-width: 520px) {
  .projects-page-current .project-title-card-name,
  .projects-page-current .project-title-card-game,
  .projects-page-current .project-title-card-version {
    max-width: 56%;
  }

  .projects-page-current .project-title-card.project-card-blueprint::after {
    inset: 0;
    background-size: 100% auto;
    background-position: right center;
    opacity: 0.56;
  }

  .projects-page-current .project-title-card.project-card-blueprint::before {
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0.998) 0%,
        rgba(255,255,255,0.996) 39%,
        rgba(255,255,255,0.84) 56%,
        rgba(255,255,255,0.30) 100%);
  }
}

/* v1.60 projects: released tools as project-index cards only.
   Tools tab shows official released tools; planned entries remain separated under PLANNED. */
.projects-page-current .project-tools-panel {
  padding-top: clamp(22px, 3vw, 28px);
}

.projects-page-current .project-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 14px);
}

.projects-page-current .project-tool-card {
  
  padding: clamp(17px, 2.5vw, 22px);
  border-color: rgba(43, 82, 115, 0.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.70));
}

.projects-page-current .project-tool-card h3 {
  margin-bottom: 0.58rem;
  font-size: clamp(1.18rem, 2vw, 1.42rem);
  letter-spacing: 0.022em;
}

.projects-page-current .project-tool-card p {
  max-width: 27rem;
  font-size: clamp(0.84rem, 1.18vw, 0.92rem);
  line-height: 1.45;
}

.projects-page-current .project-tool-card-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.52rem 0.82rem;
  
  color: rgba(29, 29, 27, 0.72);
  font-family: var(--font-meta);
  font-size: clamp(0.58rem, 0.82vw, 0.66rem);
  font-weight: 600;
  font-synthesis: none;
  line-height: 1.18;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.projects-page-current .project-tool-card-label {
  display: block;
  margin-bottom: 0.20rem;
  color: var(--accent-blue);
  letter-spacing: 0.10em;
}

/* v1.61: Tools cards no longer show a visible CTA line; the full card remains clickable. */
.projects-page-current .project-tool-card {
  min-height: clamp(158px, 15.5vw, 186px);
}

@media (max-width: 740px) {
  .projects-page-current .project-tool-grid {
    grid-template-columns: 1fr;
  }

  .projects-page-current .project-tool-card {
    min-height: 0;
  }
}

@media (max-width: 520px) {
  .projects-page-current .project-tool-card-details {
    grid-template-columns: 1fr;
  }
}

/* v1.62: Align tool-card technical metadata to the bottom edge for consistent cards. */
.projects-page-current .project-tool-card {
  display: flex;
  flex-direction: column;
}

.projects-page-current .project-tool-card p {
  margin-bottom: 0;
}

.projects-page-current .project-tool-card-details {
  margin-top: auto;
  padding-top: clamp(14px, 2vw, 18px);
}

@media (max-width: 740px) {
  .projects-page-current .project-tool-card-details {
    margin-top: clamp(18px, 4vw, 24px);
  }
}

/* v1.63: Planned tab uses project-index cards only.
   Planned entries stay separate from released runtime and tool entries. */
.projects-page-current .project-planned-panel {
  padding-top: clamp(22px, 3vw, 28px);
}

.projects-page-current .project-planned-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 14px);
}

.projects-page-current .project-planned-card {
  min-height: clamp(158px, 15.5vw, 186px);
  padding: clamp(17px, 2.5vw, 22px);
  display: flex;
  flex-direction: column;
  border-color: rgba(43, 82, 115, 0.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.64));
}

.projects-page-current .project-planned-card:hover {
  transform: none;
  border-color: rgba(43, 82, 115, 0.20);
}

.projects-page-current .project-planned-card h3 {
  margin-bottom: 0.58rem;
  font-size: clamp(1.18rem, 2vw, 1.42rem);
  letter-spacing: 0.022em;
}

.projects-page-current .project-planned-card p {
  max-width: 27rem;
  margin-bottom: 0;
  font-size: clamp(0.84rem, 1.18vw, 0.92rem);
  line-height: 1.45;
}

.projects-page-current .project-planned-card-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.52rem 0.82rem;
  margin-top: auto;
  padding-top: clamp(14px, 2vw, 18px);
  color: rgba(29, 29, 27, 0.72);
  font-family: var(--font-meta);
  font-size: clamp(0.58rem, 0.82vw, 0.66rem);
  font-weight: 600;
  font-synthesis: none;
  line-height: 1.18;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.projects-page-current .project-planned-card-label {
  display: block;
  margin-bottom: 0.20rem;
  color: var(--accent-blue);
  letter-spacing: 0.10em;
}

@media (max-width: 740px) {
  .projects-page-current .project-planned-grid {
    grid-template-columns: 1fr;
  }

  .projects-page-current .project-planned-card {
    min-height: 0;
  }

  .projects-page-current .project-planned-card-details {
    margin-top: clamp(18px, 4vw, 24px);
  }
}

@media (max-width: 520px) {
  .projects-page-current .project-planned-card-details {
    grid-template-columns: 1fr;
  }
}

/* v1.64: Planned tab mirrors the frozen Runtime/Tools card logic.
   Planned contains planned entries only: future tool areas and future restoration targets. */

/* v1.65: Planned restoration entries use the Runtime title-card pattern.
   Planned tool areas stay in the Tools-style card pattern; planned games use
   full-width title cards without version or title IDs. */
.projects-page-current .project-planned-title-card {
  grid-column: 1 / -1;
  min-height: clamp(166px, 17vw, 200px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: stretch;
  padding: clamp(22px, 3vw, 28px) clamp(26px, 3.7vw, 34px) clamp(18px, 2.5vw, 23px);
  border-color: rgba(43, 82, 115, 0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.78));
}

.projects-page-current .project-planned-title-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 48%, transparent 0 27%, rgba(43, 82, 115, 0.10) 27.3% 27.8%, transparent 28.1%),
    radial-gradient(circle at 86% 54%, rgba(43, 82, 115, 0.09), transparent 33%),
    linear-gradient(90deg, rgba(43, 82, 115, 0.050) 1px, transparent 1px),
    linear-gradient(0deg, rgba(43, 82, 115, 0.050) 1px, transparent 1px),
    linear-gradient(135deg, transparent 0 63%, rgba(43, 82, 115, 0.070) 63.15%, transparent 63.65%),
    linear-gradient(45deg, transparent 0 76%, rgba(43, 82, 115, 0.050) 76.15%, transparent 76.65%);
  background-size: auto, auto, 26px 26px, 26px 26px, auto, auto;
  background-position: right center;
  opacity: 0.82;
}

.projects-page-current .project-planned-title-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.998) 0%,
      rgba(255,255,255,0.996) 39%,
      rgba(255,255,255,0.84) 56%,
      rgba(255,255,255,0.30) 100%);
}

.projects-page-current .project-planned-title-card > * {
  position: relative;
  z-index: 2;
}

.projects-page-current .project-planned-title-card:hover::after,
.projects-page-current .project-planned-title-card:focus-visible::after {
  opacity: 0.88;
}

@media (max-width: 740px) {
  .projects-page-current .project-planned-title-card {
    min-height: 184px;
    padding: 19px 20px 17px;
  }

  .projects-page-current .project-planned-title-card::after {
    background-size: auto, auto, 24px 24px, 24px 24px, auto, auto;
    opacity: 0.82;
  }

  .projects-page-current .project-planned-title-card::before {
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0.998) 0%,
        rgba(255,255,255,0.996) 39%,
        rgba(255,255,255,0.84) 56%,
        rgba(255,255,255,0.30) 100%);
  }
}

@media (max-width: 520px) {
  .projects-page-current .project-planned-title-card {
    min-height: 184px;
    padding: 18px 19px 16px;
  }

  .projects-page-current .project-planned-title-card::after {
    background-size: auto, auto, 22px 22px, 22px 22px, auto, auto;
    opacity: 0.82;
  }
}

/* v1.66: current title-card corner cleanup.
   Roll back the failed overlay-strip approach. Keep the blueprint layers untouched
   and avoid the square-looking inset strip at the rounded edge. */

/* v1.45 legal contact baseline alignment: table-like rows for e-mail/phone. */
.legal-contact-list {
  grid-template-columns: 5.55rem minmax(0, 1fr);
  column-gap: 1.05rem;
  row-gap: 0.42rem;
  align-items: baseline;
}

.privacy-card .legal-contact-list {
  gap: 0.3rem 1.05rem;
}

.legal-contact-list dt,
.legal-contact-list dd {
  min-height: 0;
  margin: 0;
  padding: 0;
  line-height: 1.22;
}

.legal-contact-list dt {
  display: block;
  padding-top: 0.08em;
}

.legal-contact-list dd {
  display: block;
  color: var(--text-main);
}

.legal-contact-list dd a {
  display: inline-block;
  line-height: 1.22;
}

.legal-contact-list dd img {
  display: inline-block;
  width: auto;
  height: 1.18em;
  vertical-align: -0.21em;
}

@media (max-width: 560px) {
  .legal-contact-list {
    grid-template-columns: 1fr;
    row-gap: 0.16rem;
  }

  .legal-contact-list dt {
    padding-top: 0;
  }

  .legal-contact-list dd {
    margin-bottom: 0.42rem;
  }
}

/* v1.67 projects: unify current Runtime card tone with Tools/Planned cards.
   Keep the existing blueprint asset intact, but remove the stronger current-card
   tint so the MH3U / 3G card belongs visually to the same card family. */
.projects-page-current .project-title-card.project-card-current.project-card-blueprint {
  border-color: rgba(43, 82, 115, 0.18);
  border-left-color: rgba(43, 82, 115, 0.18);
  box-shadow: 0 8px 24px rgba(31, 42, 48, 0.020);
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.78));
  background-clip: border-box;
}

.projects-page-current .project-title-card.project-card-current.project-card-blueprint::before {
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.998) 0%,
      rgba(255,255,255,0.996) 39%,
      rgba(255,255,255,0.86) 56%,
      rgba(255,255,255,0.36) 100%);
}

.projects-page-current .project-title-card.project-card-current.project-card-blueprint::after {
  opacity: 0.34;
  filter: none;
}

.projects-page-current .project-title-card.project-card-current.project-card-blueprint:hover::after,
.projects-page-current .project-title-card.project-card-current.project-card-blueprint:focus-visible::after {
  opacity: 0.38;
}

@media (max-width: 740px) {
  .projects-page-current .project-title-card.project-card-current.project-card-blueprint::before {
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0.998) 0%,
        rgba(255,255,255,0.996) 50%,
        rgba(255,255,255,0.88) 68%,
        rgba(255,255,255,0.50) 100%);
  }

  .projects-page-current .project-title-card.project-card-current.project-card-blueprint::after {
    opacity: 0.28;
  }
}

/* v1.68: Projects panel spacing cleanup.
   The Search panel lost its explanatory copy, so the remaining label must sit
   at the same optical top line as the first cards in Runtime/Tools/Planned. */
.projects-page-current .project-panel {
  margin-top: clamp(18px, 3vw, 26px);
}

.projects-page-current .project-search-panel .project-search-label {
  margin: 0 0 8px;
}

.projects-page-current .project-search-panel .project-search-input {
  margin: 0 0 clamp(18px, 2.2vw, 22px);
}

@media (max-width: 520px) {
  .projects-page-current .project-panel {
    margin-top: 18px;
  }

  .projects-page-current .project-search-panel .project-search-label {
    margin-top: 0;
  }
}

/* v1.69: Projects tab-panel spacing normalization.
   Runtime, Tools, Planned and Search now share the same panel top rhythm.
   This removes the remaining optical offset caused by Runtime using a smaller
   top padding than the regular card panels. */
.projects-page-current .project-runtime-panel,
.projects-page-current .project-tools-panel,
.projects-page-current .project-planned-panel,
.projects-page-current .project-search-panel {
  margin-top: clamp(18px, 3vw, 26px);
  padding-top: clamp(22px, 3vw, 28px);
}

.projects-page-current .project-runtime-panel .project-feature-stack,
.projects-page-current .project-tool-grid,
.projects-page-current .project-planned-grid {
  margin-top: 0;
}

.projects-page-current .project-search-panel .project-search-label {
  margin-top: 0;
}

@media (max-width: 520px) {
  .projects-page-current .project-runtime-panel,
  .projects-page-current .project-tools-panel,
  .projects-page-current .project-planned-panel,
  .projects-page-current .project-search-panel {
    margin-top: 18px;
    padding-top: 22px;
  }
}

/* v1.70 Docs/Tools hub pages: current Raccu design, no legacy tool-page styling. */

/* v1.71 Docs RecordCard hub: matches Projects philosophy without image-backed title cards. */
.docs-page-v15 .main-container {
  width: min(100%, var(--site-width));
  max-width: var(--site-width);
}

.docs-page-v15 .page-title {
  margin: 0 0 0.62rem;
  color: var(--text-main);
  font-family: var(--font-copy);
  font-size: clamp(1.56rem, 2.7vw, 2.05rem);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.08;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.docs-page-v15 .page-intro-card > p:not(.project-context-title) {
  max-width: 720px;
  margin-top: 0;
  font-size: clamp(0.91rem, 1.28vw, 0.98rem);
  line-height: 1.48;
  color: var(--text-muted);
}

.docs-page-v15 .project-context-quote {
  max-width: 740px;
  margin: 1rem 0 0;
  padding: 0.78rem 1rem 0.82rem 1.1rem;
  border-left: 3px solid rgba(43, 82, 115, 0.72);
  background: linear-gradient(90deg, rgba(43, 82, 115, 0.052), rgba(255,255,255,0.38));
}

.docs-page-v15 .project-context-quote p {
  margin: 0;
}

.docs-page-v15 .project-context-title {
  margin: 0 0 0.28rem !important;
  color: var(--accent-blue);
  font-family: var(--font-meta);
  font-size: clamp(0.66rem, 0.92vw, 0.72rem) !important;
  font-weight: 600;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.docs-page-v15 .project-context-quote p:not(.project-context-title) {
  color: var(--text-muted);
  font-family: var(--font-copy);
  font-size: clamp(0.82rem, 1.08vw, 0.90rem);
  font-style: italic;
  font-synthesis: style;
  line-height: 1.43;
}

.docs-page-v15 .project-panel {
  margin-top: clamp(18px, 3vw, 26px);
  padding-top: clamp(22px, 3vw, 28px);
}

.docs-record-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.55vw, 14px);
  margin: 0;
}

.docs-record-card {
  position: relative;
  min-height: clamp(226px, 22vw, 270px);
  padding: clamp(18px, 2.7vw, 24px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  border-color: rgba(43, 82, 115, 0.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.72)),
    linear-gradient(90deg, rgba(43, 82, 115, 0.030) 1px, transparent 1px),
    linear-gradient(rgba(43, 82, 115, 0.026) 1px, transparent 1px);
  background-size: auto, 26px 26px, 26px 26px;
  text-decoration: none;
}

.docs-record-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: rgba(43, 82, 115, 0.52);
  opacity: 0.7;
}

.docs-record-kicker,
.docs-record-date,
.docs-record-label {
  color: var(--accent-blue);
  font-family: var(--font-meta);
  font-weight: 600;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}

.docs-record-kicker {
  display: block;
  margin-bottom: 0.72rem;
  font-size: clamp(0.64rem, 0.90vw, 0.72rem);
}

.docs-record-title {
  display: block;
  max-width: 92%;
  margin: 0 0 0.58rem;
  color: var(--text-main);
  font-family: var(--font-copy);
  font-size: clamp(1.18rem, 2.15vw, 1.58rem);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.10;
  letter-spacing: 0.025em;
}

.docs-record-date {
  display: block;
  margin-bottom: clamp(1.00rem, 2.1vw, 1.36rem);
  font-size: clamp(0.60rem, 0.84vw, 0.67rem);
}

.docs-record-preview {
  max-width: 94%;
  margin: 0 0 clamp(1rem, 2vw, 1.28rem);
  color: var(--text-muted);
  font-family: var(--font-copy);
  font-size: clamp(0.84rem, 1.15vw, 0.92rem);
  line-height: 1.44;
}

.docs-record-meta-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem 0.85rem;
  margin-top: auto;
  padding-top: clamp(13px, 1.8vw, 18px);
  color: rgba(29, 29, 27, 0.72);
  font-family: var(--font-meta);
  font-size: clamp(0.58rem, 0.82vw, 0.66rem);
  font-weight: 600;
  font-synthesis: none;
  line-height: 1.18;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.docs-record-label {
  display: block;
  margin-bottom: 0.20rem;
  font-size: 1em;
  letter-spacing: 0.10em;
}

.docs-record-card:hover,
.docs-record-card:focus-visible {
  border-color: rgba(43, 82, 115, 0.28);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.80)),
    linear-gradient(90deg, rgba(43, 82, 115, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(43, 82, 115, 0.030) 1px, transparent 1px);
  background-size: auto, 26px 26px, 26px 26px;
}

.docs-record-card:focus-visible {
  outline: 3px solid rgba(43, 82, 115, 0.18);
  outline-offset: 3px;
}

.docs-page-v15 .docs-search-label {
  margin: 0 0 8px;
}

.docs-page-v15 .docs-search-input {
  margin: 0 0 clamp(18px, 2.2vw, 22px);
}

.docs-page-v15 .project-search-empty {
  margin: 14px 0 0;
}

@media (max-width: 720px) {
  .docs-record-grid {
    grid-template-columns: 1fr;
  }

  .docs-record-card {
    min-height: 214px;
  }
}

@media (max-width: 520px) {
  .docs-page-v15 .project-panel {
    margin-top: 18px;
    padding-top: 22px;
  }

  .docs-record-meta-row {
    grid-template-columns: 1fr;
  }

  .docs-page-v15 .project-context-quote {
    padding: 0.72rem 0.86rem 0.76rem 0.96rem;
  }
}

/* v1.72 Docs RecordLog cleanup: full-width record cards aligned with Projects title-card rhythm. */
.docs-page-v16 .docs-record-grid {
  grid-template-columns: 1fr;
  gap: clamp(10px, 1.55vw, 14px);
}

.docs-page-v16 .docs-record-card {
  min-height: clamp(188px, 18vw, 220px);
  padding: clamp(22px, 3.4vw, 30px) clamp(24px, 4vw, 34px) clamp(18px, 2.8vw, 24px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.36fr);
  grid-template-rows: auto auto 1fr auto;
  column-gap: clamp(18px, 4vw, 40px);
  align-content: stretch;
  border-color: rgba(43, 82, 115, 0.16);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: none;
}

.docs-page-v16 .docs-record-card::before {
  width: 2px;
  background: rgba(43, 82, 115, 0.50);
  opacity: 0.72;
}

.docs-page-v16 .docs-record-kicker,
.docs-page-v16 .docs-record-title,
.docs-page-v16 .docs-record-date,
.docs-page-v16 .docs-record-preview,
.docs-page-v16 .docs-record-meta-row {
  position: relative;
  z-index: 1;
}

.docs-page-v16 .docs-record-kicker {
  grid-column: 1 / 2;
  margin-bottom: 0.58rem;
}

.docs-page-v16 .docs-record-title {
  grid-column: 1 / 2;
  max-width: 74%;
  margin-bottom: 0.62rem;
  font-size: clamp(1.32rem, 2.4vw, 1.78rem);
  line-height: 1.04;
  letter-spacing: 0.028em;
}

.docs-page-v16 .docs-record-date {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  justify-self: end;
  align-self: start;
  margin: 0;
  padding-top: 0.16rem;
}

.docs-page-v16 .docs-record-preview {
  grid-column: 1 / -1;
  max-width: min(760px, 88%);
  margin: clamp(0.28rem, 0.8vw, 0.48rem) 0 clamp(1.15rem, 2vw, 1.45rem);
  font-size: clamp(0.86rem, 1.15vw, 0.94rem);
}

.docs-page-v16 .docs-record-meta-row {
  grid-column: 1 / 2;
  align-self: end;
  grid-template-columns: repeat(3, max-content);
  column-gap: clamp(1.4rem, 4vw, 3.2rem);
  max-width: 100%;
  margin-top: 0;
  padding-top: 0;
}

.docs-page-v16 .docs-record-card:hover,
.docs-page-v16 .docs-record-card:focus-visible {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(43, 82, 115, 0.28);
}

.docs-page-v16 .docs-empty-panel {
  min-height: clamp(60px, 8vw, 90px);
}

.docs-page-v16 .docs-empty-panel .docs-record-grid {
  min-height: 0;
}

@media (max-width: 740px) {
  .docs-page-v16 .docs-record-card {
    min-height: 190px;
    padding: 19px 20px 17px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto 1fr auto auto;
  }

  .docs-page-v16 .docs-record-title {
    max-width: 100%;
    font-size: clamp(1.08rem, 4.9vw, 1.34rem);
  }

  .docs-page-v16 .docs-record-date {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: start;
    margin-bottom: clamp(0.8rem, 3vw, 1.0rem);
  }

  .docs-page-v16 .docs-record-preview {
    max-width: 100%;
    margin-bottom: clamp(1rem, 4vw, 1.2rem);
  }

  .docs-page-v16 .docs-record-meta-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 0.65rem;
  }

}

@media (max-width: 520px) {
  .docs-page-v16 .docs-record-meta-row {
    grid-template-columns: 1fr;
    row-gap: 0.46rem;
  }
}

/* v1.73 Docs RecordLog design sync: DOCS mirrors PROJECTS intro rhythm and title-card geometry. */
.docs-page-v17 .main-container {
  width: min(100%, var(--site-width));
  max-width: var(--site-width);
}

.docs-page-v17 .projects-intro-card {
  padding-top: clamp(24px, 3.2vw, 32px);
  padding-bottom: clamp(18px, 2.4vw, 24px);
}

.docs-page-v17 .projects-intro-card .page-title {
  margin: 0 0 0.62rem;
  color: var(--accent-blue);
  font-family: var(--font-action);
  font-size: clamp(1.06rem, 1.72vw, 1.28rem);
  font-weight: 600;
  font-synthesis: none;
  line-height: 1.05;
  letter-spacing: 0.115em;
  text-transform: uppercase;
}

.docs-page-v17 .projects-intro-card > p:not(.release-kicker):not(.project-context-title) {
  max-width: 700px;
  margin-top: 0;
  font-size: clamp(0.92rem, 1.35vw, 1rem);
  line-height: 1.46;
}

.docs-page-v17 .project-context-quote {
  max-width: 700px;
  margin: clamp(14px, 2.1vw, 18px) 0 0;
  padding: 0.70rem 0.95rem 0.72rem;
  border-left: 3px solid rgba(43, 82, 115, 0.74);
  background: linear-gradient(90deg, rgba(43, 82, 115, 0.035), rgba(255,255,255,0.18));
}

.docs-page-v17 .project-context-quote p {
  margin: 0;
  color: var(--text-muted);
  font-family: var(--font-copy);
}

.docs-page-v17 .project-context-title {
  margin-bottom: 0.32rem !important;
  color: var(--accent-blue) !important;
  font-family: var(--font-meta) !important;
  font-size: 0.60rem !important;
  font-weight: 600;
  font-synthesis: none;
  letter-spacing: 0.10em;
  line-height: 1;
  text-transform: uppercase;
}

.docs-page-v17 .project-context-quote p:not(.project-context-title) {
  font-size: clamp(0.82rem, 1.15vw, 0.90rem);
  font-style: italic;
  line-height: 1.42;
}

.docs-page-v17 .project-category-nav {
  margin-top: clamp(18px, 2.5vw, 22px);
}

.docs-page-v17 .project-panel {
  margin-top: clamp(18px, 3vw, 26px);
  padding-top: clamp(22px, 3vw, 28px);
}

.docs-page-v17 .docs-record-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
}

.docs-page-v17 .docs-record-card.project-title-card {
  min-height: clamp(178px, 18vw, 206px);
  display: grid;
  grid-template-columns: minmax(0, 43%) minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr auto;
  align-content: stretch;
  column-gap: clamp(18px, 4vw, 40px);
  padding: clamp(22px, 3vw, 28px) clamp(26px, 3.7vw, 34px) clamp(18px, 2.5vw, 23px);
  border-color: rgba(43, 82, 115, 0.16);
  background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.66));
  box-shadow: none;
  overflow: hidden;
}

.docs-page-v17 .docs-record-card.project-title-card::before,
.docs-page-v17 .docs-record-card.project-title-card::after {
  content: none;
}

.docs-page-v17 .docs-record-kicker,
.docs-page-v17 .docs-record-title,
.docs-page-v17 .docs-record-date,
.docs-page-v17 .docs-record-preview,
.docs-page-v17 .docs-record-card-footer {
  position: relative;
  z-index: 2;
}

.docs-page-v17 .docs-record-kicker {
  grid-column: 1 / 2;
  display: block;
  max-width: 100%;
  margin: 0 0 0.45rem;
  color: var(--accent-blue);
  font-family: var(--font-meta);
  font-size: clamp(0.62rem, 0.82vw, 0.72rem);
  font-weight: 600;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}

.docs-page-v17 .docs-record-title {
  grid-column: 1 / 2;
  display: block;
  max-width: 100%;
  margin: 0;
  color: var(--text-main);
  font-family: var(--font-copy);
  font-size: clamp(1.26rem, 2.25vw, 1.64rem);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.04;
  letter-spacing: 0.018em;
}

.docs-page-v17 .docs-record-title .project-title-card-series {
  display: block;
}

.docs-page-v17 .docs-record-date {
  grid-column: 1 / 2;
  display: inline-grid;
  grid-template-columns: auto auto;
  column-gap: 0.42rem;
  align-items: baseline;
  width: max-content;
  margin: 0.58rem 0 0;
  color: rgba(43, 82, 115, 0.92);
  font-family: var(--font-meta);
  font-size: clamp(0.56rem, 0.74vw, 0.64rem);
  font-weight: 600;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.docs-page-v17 .docs-record-date span {
  color: var(--accent-blue);
  letter-spacing: 0.105em;
}

.docs-page-v17 .docs-record-preview {
  grid-column: 2 / 3;
  grid-row: 1 / 5;
  align-self: center;
  max-width: 100%;
  margin: 0;
  color: var(--text-muted);
  font-family: var(--font-copy);
  font-size: clamp(0.84rem, 1.14vw, 0.92rem);
  line-height: 1.44;
}

.docs-page-v17 .docs-record-card-footer {
  grid-column: 1 / -1;
  grid-row: 5;
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(12px, 2vw, 22px);
  align-items: end;
  width: 100%;
  margin-top: clamp(20px, 4vw, 34px);
}

.docs-page-v17 .docs-record-meta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, max-content);
  column-gap: clamp(0.62rem, 1.45vw, 1.05rem);
  row-gap: 0.30rem;
  align-items: baseline;
  width: 100%;
  margin: 0;
  padding: 0;
  color: rgba(29, 29, 27, 0.70);
  font-family: var(--font-meta);
  font-size: clamp(0.54rem, 0.70vw, 0.62rem);
  font-weight: 600;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.docs-page-v17 .docs-record-meta-heading,
.docs-page-v17 .docs-record-label {
  color: var(--accent-blue);
  letter-spacing: 0.105em;
}

.docs-page-v17 .docs-record-label {
  display: inline;
  margin: 0 0.30rem 0 0;
  font-size: 1em;
}

.docs-page-v17 .docs-record-meta-item {
  display: inline-grid;
  grid-template-columns: auto auto;
  column-gap: 0.30rem;
  white-space: nowrap;
}

.docs-page-v17 .docs-record-card.project-title-card:hover,
.docs-page-v17 .docs-record-card.project-title-card:focus-visible {
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(43, 82, 115, 0.28);
}

.docs-page-v17 .docs-empty-panel {
  min-height: clamp(60px, 8vw, 90px);
}

.docs-page-v17 .docs-search-label {
  margin: 0 0 8px;
}

.docs-page-v17 .docs-search-input {
  margin: 0 0 clamp(18px, 2.2vw, 22px);
}

@media (max-width: 740px) {

  .docs-page-v17 .docs-record-card.project-title-card {
    min-height: 184px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto 1fr auto;
    padding: 19px 20px 17px;
  }

  .docs-page-v17 .docs-record-kicker,
  .docs-page-v17 .docs-record-title,
  .docs-page-v17 .docs-record-date,
  .docs-page-v17 .docs-record-preview {
    grid-column: 1 / -1;
  }

  .docs-page-v17 .docs-record-kicker {
    font-size: clamp(0.58rem, 2.2vw, 0.66rem);
    letter-spacing: 0.095em;
  }

  .docs-page-v17 .docs-record-title {
    font-size: clamp(1.02rem, 4.65vw, 1.30rem);
    line-height: 1.02;
  }

  .docs-page-v17 .docs-record-date {
    font-size: clamp(0.50rem, 2.10vw, 0.57rem);
  }

  .docs-page-v17 .docs-record-preview {
    grid-row: auto;
    align-self: start;
    margin-top: clamp(0.82rem, 3vw, 1rem);
  }

  .docs-page-v17 .docs-record-card-footer {
    grid-column: 1 / -1;
    grid-row: auto;
    grid-template-columns: 1fr;
    row-gap: 0.82rem;
    margin-top: clamp(17px, 5vw, 26px);
  }

  .docs-page-v17 .docs-record-meta-row {
    grid-template-columns: max-content;
    row-gap: 0.22rem;
    width: max-content;
  }

  .docs-page-v17 .docs-record-meta-heading {
    display: none;
  }

  .docs-page-v17 .docs-record-meta-item {
    grid-template-columns: 3.4rem max-content;
    column-gap: 0.22rem;
  }

}

@media (max-width: 520px) {
  .docs-page-v17 .docs-record-card.project-title-card {
    min-height: 184px;
    padding: 18px 19px 16px;
  }

  .docs-page-v17 .docs-record-title {
    font-size: clamp(0.98rem, 5.45vw, 1.18rem);
  }
}

/* v1.74 Docs RecordLog calm pass + title-card click stability.
   RecordLogs now use the same calm full-width title-card rhythm as Projects,
   without the split two-column preview layout. Project title cards also no longer
   translate on hover/click, preventing the visible one-pixel card jump before navigation. */
.projects-page-current .project-title-card:hover,
.projects-page-current .project-title-card:focus-visible,
.projects-page-current .project-planned-title-card:hover,
.projects-page-current .project-planned-title-card:focus-visible {
  transform: none;
}

.docs-page-v18 .docs-record-card.project-title-card {
  min-height: clamp(172px, 17vw, 198px);
  display: grid;

  align-content: stretch;
  row-gap: 0;
  padding: clamp(22px, 3vw, 28px) clamp(26px, 3.7vw, 34px) clamp(18px, 2.5vw, 23px);
  border-color: rgba(43, 82, 115, 0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.78));
  box-shadow: 0 8px 24px rgba(31, 42, 48, 0.020);
  transform: none;
}

.docs-page-v18 .docs-record-card.project-title-card:hover,
.docs-page-v18 .docs-record-card.project-title-card:focus-visible {
  border-color: rgba(43, 82, 115, 0.28);
  background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(255,255,255,0.84));
  transform: none;
}

.docs-page-v18 .docs-record-kicker,
.docs-page-v18 .docs-record-title,
.docs-page-v18 .docs-record-date,
.docs-page-v18 .docs-record-preview,
.docs-page-v18 .docs-record-card-footer {
  grid-column: 1 / -1;
  position: relative;
  z-index: 2;
}

.docs-page-v18 .docs-record-title {

  font-size: clamp(1.26rem, 2.25vw, 1.64rem);
  line-height: 1.04;
}

.docs-page-v18 .docs-record-date {
  
  margin-top: 0.58rem;
}

.docs-page-v18 .docs-record-preview {
  
  align-self: start;
  max-width: 42rem;
  margin: clamp(0.88rem, 1.6vw, 1.08rem) 0 0;
  font-size: clamp(0.84rem, 1.12vw, 0.92rem);
  line-height: 1.45;
}

.docs-page-v18 .docs-record-card-footer {
  
  align-self: end;
  display: grid;
  
  column-gap: clamp(12px, 2vw, 22px);
  align-items: end;
  width: 100%;
  margin-top: clamp(18px, 3.6vw, 30px);
}

.docs-page-v18 .docs-record-meta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, max-content);
  column-gap: clamp(0.62rem, 1.45vw, 1.05rem);
  row-gap: 0.30rem;
  align-items: baseline;
  width: 100%;
}

@media (max-width: 740px) {
  .docs-page-v18 .docs-record-card.project-title-card {
    min-height: 184px;
    padding: 19px 20px 17px;
  }

  .docs-page-v18 .docs-record-kicker,
  .docs-page-v18 .docs-record-title,
  .docs-page-v18 .docs-record-date,
  .docs-page-v18 .docs-record-preview {
    max-width: 100%;
  }

  .docs-page-v18 .docs-record-title {
    font-size: clamp(1.02rem, 4.65vw, 1.30rem);
  }

  .docs-page-v18 .docs-record-card-footer {
    grid-template-columns: 1fr;
    row-gap: 0.82rem;
    margin-top: clamp(17px, 5vw, 26px);
  }

  .docs-page-v18 .docs-record-meta-row {
    grid-template-columns: max-content;
    row-gap: 0.22rem;
    width: max-content;
  }

  .docs-page-v18 .docs-record-meta-heading {
    display: none;
  }

  .docs-page-v18 .docs-record-meta-item {
    grid-template-columns: 3.4rem max-content;
    column-gap: 0.22rem;
  }

}

@media (max-width: 520px) {
  .docs-page-v18 .docs-record-card.project-title-card {
    padding: 18px 19px 16px;
  }

  .docs-page-v18 .docs-record-title {
    font-size: clamp(0.98rem, 5.45vw, 1.18rem);
  }
}

/* v1.76 Docs RecordLog alignment: keep record kicker and date on the same top baseline. */
.docs-page-v18 .docs-record-card.project-title-card {
  grid-template-columns: minmax(0, 1fr) max-content;
  grid-template-rows: auto auto auto 1fr auto;
  column-gap: clamp(14px, 2.8vw, 28px);
}

.docs-page-v18 .docs-record-kicker {
  grid-column: 1 / 2;
  grid-row: 1;
  align-self: start;
  max-width: none;
  margin: 0 0 0.48rem;
}

.docs-page-v18 .docs-record-date {
  grid-column: 2 / 3;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  width: max-content;
  max-width: none;
  margin: 0;
  padding-top: 0;
}

.docs-page-v18 .docs-record-title {
  grid-column: 1 / -1;
  grid-row: 2;
  max-width: 70%;
  margin: 0;
}

.docs-page-v18 .docs-record-preview {
  grid-column: 1 / -1;
  grid-row: 3;
}

.docs-page-v18 .docs-record-card-footer {
  grid-column: 1 / -1;
  grid-row: 5;
}

@media (max-width: 740px) {
  .docs-page-v18 .docs-record-card.project-title-card {
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  .docs-page-v18 .docs-record-title,
  .docs-page-v18 .docs-record-preview {
    max-width: 100%;
  }
}

@media (max-width: 520px) {
  .docs-page-v18 .docs-record-card.project-title-card {
    grid-template-columns: 1fr;
  }

  .docs-page-v18 .docs-record-kicker,
  .docs-page-v18 .docs-record-date,
  .docs-page-v18 .docs-record-title,
  .docs-page-v18 .docs-record-preview {
    grid-column: 1 / -1;
  }

  .docs-page-v18 .docs-record-date {
    justify-self: start;
    margin-top: 0.36rem;
  }
}

/* v1.77 Docs RecordLog footer cleanup: RecordCards are already clickable, so no explicit Open-* action label is shown. The metadata line can use the full footer width and settle to the right like a calm archive marker. */
.docs-page-v18 .docs-record-card-footer {
  grid-template-columns: 1fr;
}

/* v1.78 legal title scale correction: design-only, no legal text/HTML changes.
   Legal pages use the same calm section-title scale as PROJECTS/DOCS instead
   of oversized standalone h1 lettering. Also neutralizes the abandoned
   pseudo-kicker if an earlier legal harmonization patch is present. */
.legal-card::before {
  content: none !important;
  display: none !important;
}

.legal-card .page-title {
  margin: 0 0 0.62rem !important;
  color: var(--accent-blue) !important;
  font-family: var(--font-action) !important;
  font-size: clamp(1.06rem, 1.72vw, 1.28rem) !important;
  font-weight: 600 !important;
  font-synthesis: none !important;
  line-height: 1.05 !important;
  letter-spacing: 0.115em !important;
  text-transform: uppercase !important;
}

.legal-card .legal-lead {
  margin-top: 0;
  max-width: 760px;
}

@media (max-width: 560px) {
  .legal-card .page-title {
    font-size: clamp(1.02rem, 5.8vw, 1.22rem) !important;
    letter-spacing: 0.105em !important;
  }
}

/* v1.79 legal-source notice alignment: use the same calm warning language on
   Landing, Project Index and Documentation. Visual-only; no text/HTML changes. */
.landing-card .notice.notice-warning.site-note {
  display: block;
  margin: 14px 0 1rem;
  padding: 0.76rem 1.02rem 0.78rem;
  border-left: 3px solid var(--notice-warning);
  background: linear-gradient(90deg, rgba(214, 90, 90, 0.052), rgba(255,255,255,0.18));
}

.landing-card .notice.notice-warning.site-note .notice-body {
  min-width: 0;
}

.landing-card .notice.notice-warning.site-note .notice-title {
  margin: 0 0 0.34rem;
  color: var(--notice-warning);
}

.projects-page-current .project-context-quote,
.docs-page-v17 .project-context-quote {
  border-left-color: var(--notice-warning) !important;
  background: linear-gradient(90deg, rgba(214, 90, 90, 0.052), rgba(255,255,255,0.18)) !important;
}

.projects-page-current .project-context-title,
.docs-page-v17 .project-context-title {
  color: var(--notice-warning) !important;
}

.projects-page-current .project-context-quote p:not(.project-context-title),
.docs-page-v17 .project-context-quote p:not(.project-context-title),
.landing-card .notice.notice-warning.site-note p:not(.notice-title) {
  color: var(--text-muted);
}

/* v1.80 legal warning gradient + title typography sync
   Design-only: no HTML, text, links, scripts or images changed.
   Uses the same calm red legal-warning treatment for Landing, Project Index and Documentation. */
.landing-card .notice.notice-warning.site-note,
.projects-page-current .project-context-quote,
.docs-page-v17 .project-context-quote {
  border-left: 3px solid var(--notice-warning) !important;
  
}

.landing-card .notice.notice-warning.site-note .notice-title,
.projects-page-current .project-context-title,
.docs-page-v17 .project-context-title {
  margin: 0 0 0.34rem !important;

  

  

}

.landing-card .notice.notice-warning.site-note p:not(.notice-title),
.projects-page-current .project-context-quote p:not(.project-context-title),
.docs-page-v17 .project-context-quote p:not(.project-context-title) {
  color: var(--text-muted) !important;
}

/* v1.81 notice system fill consistency
   Design-only: no HTML, text, links, scripts or images changed.
   Kicker-based legal notices now use a solid full-width surface instead of a fading gradient. */
.landing-card .notice.notice-warning.site-note,
.projects-page-current .project-context-quote,
.docs-page-v17 .project-context-quote {
  background: rgba(214, 90, 90, 0.055) !important;
}

.landing-card .notice.notice-warning.site-note .notice-title,
.projects-page-current .project-context-title,
.docs-page-v17 .project-context-title {
  color: var(--notice-warning) !important;
  font-family: var(--font-meta) !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  font-synthesis: none !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.release-redistribution-note {
  background: rgba(214, 90, 90, 0.055) !important;
  border-left-color: var(--notice-warning) !important;
}

/* v1.81: Project search result cards mirror their source tab card families.
   Tool results now use the same two-column card rhythm and metadata structure
   as the Tools panel instead of the older compact three-column search cards. */

/* v1.82 footer language + credits page pass
   Design/content pass for the Credits page only. No images touched. */
.credits-page .credits-intro-card > p:not(.project-context-title) {
  max-width: 790px;
}

/* v1.82 e-mail address visual consistency and privacy address correction support.
   Design-only for links: e-mail addresses use the same calm Datenschutz link treatment
   across Legal, Credits and content cards. */
a[href^="mailto:"] {
  color: var(--accent-blue);
  font-family: var(--font-copy);
  font-size: inherit;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  line-height: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a[href^="mailto:"]:hover,
a[href^="mailto:"]:focus-visible {
  color: var(--accent-blue-hover);
}

.legal-list a[href^="mailto:"],
.legal-contact-list a[href^="mailto:"],
.terms-contact-list a[href^="mailto:"],
.placeholder-card a[href^="mailto:"],
.card a[href^="mailto:"] {
  color: var(--accent-blue);
  font-family: var(--font-copy);
  font-size: inherit;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
}

/* v1.83 e-mail address size lock: all mailto links use the same Datenschutz-derived visual scale.
   Design-only: no HTML, legal text, links, scripts or images changed. */
a[href^="mailto:"] {
  font-size: clamp(0.92rem, 1.5vw, 0.98rem) !important;
  line-height: 1.32 !important;
}

.legal-contact-list dd a[href^="mailto:"],
.terms-contact-list dd a[href^="mailto:"] {
  font-size: clamp(0.92rem, 1.5vw, 0.98rem) !important;
  line-height: 1.22 !important;
}

.legal-section p a[href^="mailto:"] {
  font-size: clamp(0.92rem, 1.5vw, 0.98rem) !important;
}

/* v1.84 credits page system pass
   Credits now use the same category-panel and full-width RecordCard logic as Docs/Projects.
   Design/content pass only; no images touched. */
.credits-page-v40 .credits-intro-card > p:not(.project-context-title) {
  max-width: 790px;
}

/* v1.85 credits contributed source records
   Search was removed from Credits. Contributors now include a concise source-record table
   so duplicate physical/source contributions can be avoided. Design-only CSS; no images. */

.credits-page-v40 .credits-source-kicker {
  margin-bottom: 0.58rem;
}

.credits-page-v40 .credits-source-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-top: 1px solid rgba(43, 82, 115, 0.14);
}

.credits-page-v40 .credits-source-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  font-family: var(--font-copy);
  font-size: clamp(0.78rem, 1.04vw, 0.86rem);
  line-height: 1.38;
}

.credits-page-v40 .credits-source-table th,
.credits-page-v40 .credits-source-table td {
  padding: 0.74rem 0.68rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(43, 82, 115, 0.1);
}

.credits-page-v40 .credits-source-table th {
  color: var(--accent-blue);
  font-family: var(--font-meta);
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  white-space: nowrap;
}

.credits-page-v40 .credits-source-table td {
  color: var(--text-main);
}

.credits-page-v40 .credits-source-table code {
  color: var(--text-main);
  font-family: var(--font-meta);
  font-size: 0.96em;
  letter-spacing: 0.01em;
  background: transparent;
  padding: 0;
}

/* v1.86 credits contributor panel cleanup
   Credits follows the Docs/Projects record rhythm: no individual source-contributor card;
   contribution process comes first, followed by the contributed-source table. */
.credits-page-v42 .credits-source-table-wrap {
  min-width: 0;
  max-width: 100%;
}

.credits-page-v42 .credits-source-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
}

.credits-page-v42 .credits-source-table {
  min-width: 780px;
}

.credits-page-v42 .credits-source-table th,
.credits-page-v42 .credits-source-table td {
  padding-right: 0.54rem;
  padding-left: 0.54rem;
}

@media (max-width: 740px) {
  .credits-page-v42 .credits-source-table {
    min-width: 820px;
  }
}

/* v1.87 credits source table consolidation
   Keep the contributed-source list readable: product code already identifies localisation,
   and Title ID/Product Code are grouped in one identifiers column. */
.credits-page-v43 .credits-source-table {
  min-width: 660px;
  table-layout: fixed;
}

.credits-page-v43 .credits-source-table th:nth-child(1),
.credits-page-v43 .credits-source-table td:nth-child(1) {
  width: 12%;
}

.credits-page-v43 .credits-source-table th:nth-child(2),
.credits-page-v43 .credits-source-table td:nth-child(2) {
  width: 30%;
}

.credits-page-v43 .credits-source-table th:nth-child(3),
.credits-page-v43 .credits-source-table td:nth-child(3) {
  width: 16%;
}

.credits-page-v43 .credits-source-table th:nth-child(4),
.credits-page-v43 .credits-source-table td:nth-child(4) {
  width: 17%;
}

.credits-page-v43 .credits-source-table th:nth-child(5),
.credits-page-v43 .credits-source-table td:nth-child(5) {
  width: 25%;
}

.credits-page-v43 .credits-source-user {
  color: var(--accent-blue);
  font-family: var(--font-meta);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.credits-page-v43 .credits-source-identifiers span {
  display: block;
  margin: 0 0 0.28rem;
}

.credits-page-v43 .credits-source-identifiers span:last-child {
  margin-bottom: 0;
}

.credits-page-v43 .credits-source-identifiers strong {
  display: block;
  margin: 0 0 0.08rem;
  color: var(--accent-blue);
  font-family: var(--font-meta);
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.credits-page-v43 .credits-source-identifiers code {
  display: block;
  line-height: 1.25;
}

@media (max-width: 740px) {
  .credits-page-v43 .credits-source-table {
    min-width: 640px;
  }
}

/* v1.88 credits source table header cleanup
   Contribution process is the header/context for the source-record table, not a separate RecordLog. */

.credits-page-v44 .credits-source-title {
  display: block;
  margin: 0 0 clamp(10px, 1.5vw, 14px);
  max-width: 760px;
}

.credits-page-v44 .credits-source-table-wrap {
  margin-top: clamp(14px, 1.8vw, 18px);
}

/* v1.89 Credits source hierarchy and link-action cleanup
   The contribution process is context, while source contributions are the table heading.
   Links are rendered as quiet action fields instead of raw inline underlined links. */

.credits-page-v45 .credits-source-kicker {
  display: block;
  margin: 0 0 0.52rem;
  color: var(--accent-blue);
  font-family: var(--font-meta);
  font-size: clamp(0.68rem, 0.88vw, 0.76rem);
  font-weight: 600;
  letter-spacing: 0.085em;
  text-transform: uppercase;
}

.credits-page-v45 .credits-source-title {
  display: block;
  margin: 0 0 clamp(8px, 1.2vw, 12px);
  max-width: 760px;
  color: var(--text-main);
  font-family: var(--font-brand);
  font-size: clamp(1.34rem, 2.45vw, 1.78rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.04em;
  text-transform: none;
}

.credits-page-v45 .credits-source-table-wrap {
  margin-top: 0;
}

@media (max-width: 740px) {

  .credits-page-v45 .credits-source-title {
    font-size: clamp(1.24rem, 6.2vw, 1.52rem);
  }
}

/* v1.90 Credits contribution contacts and source-title typography cleanup
   Add legal contact for privacy/withdrawal handling and keep source section titles out of the RACCU wordmark font. */
.credits-page-v46 .credits-source-title {
  color: var(--text-main);
  font-family: var(--font-copy);
  font-size: clamp(1.18rem, 2.0vw, 1.46rem);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.16;
  letter-spacing: 0.018em;
}

/* v1.91 Credits source-contact and source-title hierarchy cleanup
   Contacts are not card actions; source records keep a simple text hierarchy. */

.credits-page-v47 .credits-source-title {
  margin: 0 0 clamp(8px, 1.2vw, 12px);
  color: var(--text-main);
  font-family: var(--font-copy);
  
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.16;
  
  text-transform: none;
}

/* v1.92 Credits source section line reduction
   Keep the data table structure, but remove surplus separator lines in the contribution context area. */

.credits-page-v47 .credits-source-table-wrap {
  border-top: 0;
  
}

/* v1.93 Credits source hierarchy recovery
   Restore orientation after line reduction without returning to a noisy separator layout. */

/* v1.94 Credits source panel rollback and frame removal
   Step back from the highlighted contribution-process block and remove the inner source-panel frame. */

.credits-page-v47 .credits-source-title {
  margin-bottom: clamp(8px, 1.2vw, 12px);
  font-size: clamp(1.04rem, 1.68vw, 1.28rem);
  letter-spacing: 0.04em;
}

.credits-page-v47 .credits-source-table-wrap {
  margin-top: clamp(10px, 1.5vw, 14px);
}

/* v1.95 Credits source page restructure
   Split the contribution explanation and contributed-source list into two full-width cards.
   Contacts use neutral quote blocks; the table keeps a compact Title/Platform column. */
.credits-page-v51 .credits-contributors-panel {
  width: 100%;
  margin: clamp(28px, 4.2vw, 42px) 0 0;
  display: flex;
  flex-direction: column;
  
}

.credits-page-v51 .credits-content-card {
  width: 100%;
  margin: 0;
  
  cursor: default;
}

.credits-page-v51 .credits-section-copy {
  max-width: 850px;
  margin: 0 0 clamp(14px, 1.9vw, 18px);
  color: var(--text-muted);
  font-family: var(--font-copy);
  font-size: clamp(0.9rem, 1.25vw, 0.98rem);
  line-height: 1.52;
  font-style: normal;
}

.credits-page-v51 .credits-source-kicker {
  display: block;
  margin: 0 0 0.56rem;
  color: var(--accent-blue);
  font-family: var(--font-meta);
  font-size: clamp(0.68rem, 0.88vw, 0.76rem);
  font-weight: 600;
  letter-spacing: 0.085em;
  line-height: 1.08;
  text-transform: uppercase;
}

.credits-page-v51 .credits-source-title {
  margin: 0 0 clamp(8px, 1.15vw, 12px);
  color: var(--text-main);
  font-family: var(--font-copy);
  font-size: clamp(1.08rem, 1.74vw, 1.34rem);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.18;
  letter-spacing: 0.038em;
  text-transform: none;
}

.credits-page-v51 .credits-source-table-wrap {
  width: 100%;
  
  overflow-x: auto;
  overflow-y: hidden;
  border-top: 1px solid rgba(43, 82, 115, 0.12);
}

.credits-page-v51 .credits-source-table {
  width: 100%;
  min-width: 620px;
  table-layout: fixed;
  border-collapse: collapse;
}

.credits-page-v51 .credits-source-title-platform strong,
.credits-page-v51 .credits-source-title-platform span {
  display: block;
}

.credits-page-v51 .credits-source-title-platform strong {
  font-weight: 400;
  color: var(--text-main);
}

.credits-page-v51 .credits-source-title-platform span {
  margin-top: 0.18rem;
  color: var(--text-muted);
}

@media (max-width: 860px) {

  .credits-page-v51 .credits-content-card {
    padding: 20px;
  }

  .credits-page-v51 .credits-source-table {
    min-width: 680px;
  }
}

/* v1.96 Credits source-card spacing and continuous contact quote
   Reduce the oversized gap after the intro card, let contributor content use the full card width,
   and render the contact/enclosure area as one continuous neutral quote block. */

.credits-page-v51 .credits-content-card {
  padding: clamp(22px, 3vw, 30px);
}

.credits-page-v51 .credits-contribution-card .credits-section-copy,
.credits-page-v51 .credits-source-list-card .credits-section-copy {
  max-width: 100%;
}

.credits-page-v51 .credits-source-table-wrap {
  margin-top: clamp(12px, 1.6vw, 16px);
}

@media (max-width: 860px) {
  .credits-page-v51 .credits-contributors-panel {
    margin-top: 18px;
    gap: 12px;
  }

}

/* v1.97 Credits spacing + flattened contact quote
   Credits only. Restores the standard card rhythm, removes nested quote styling
   from the contact/enclosure row, and keeps the contact labels in Raccu blue. */
.credits-page-v51 .credits-contributors-panel {
  margin-top: 0;
  padding-top: 0;
  gap: clamp(14px, 2.4vw, 18px);
}

.credits-page-v51 .credits-contact-quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
  width: 100%;
  max-width: none;
  margin-top: clamp(12px, 1.7vw, 16px);
  padding: 0.9rem 1rem;
  border-left: 3px solid rgba(43, 82, 115, 0.42);
  background: rgba(43, 82, 115, 0.035);
}

.credits-page-v51 .credits-contact-item {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.credits-page-v51 .credits-contact-title {
  margin: 0 0 0.24rem;
  color: var(--accent-blue);
  font-family: var(--font-meta);
  font-size: clamp(0.62rem, 0.78vw, 0.7rem);
  font-weight: 600;
  font-synthesis: none;
  letter-spacing: 0.08em;
  line-height: 1.08;
  text-transform: uppercase;
}

.credits-page-v51 .credits-contact-item p:last-child {
  margin: 0;
  font-style: normal;
}

.credits-page-v51 .credits-contact-item a {
  color: var(--accent-blue);
  font-family: var(--font-copy);
  font-size: clamp(0.9rem, 1.2vw, 0.98rem) !important;
  line-height: 1.32 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

@media (max-width: 860px) {
  .credits-page-v51 .credits-contact-quotes {
    grid-template-columns: 1fr;
    gap: 0.72rem;
    padding: 0.86rem 0.92rem;
  }
}

/* v1.98 Credits source table micro-balance
   Move the identifiers column slightly to the right by giving Source Type a little more room. */
.credits-page-v51 .credits-source-table th:nth-child(1),
.credits-page-v51 .credits-source-table td:nth-child(1) {
  width: 17%;
}

.credits-page-v51 .credits-source-table th:nth-child(2),
.credits-page-v51 .credits-source-table td:nth-child(2) {
  width: 34%;
}

.credits-page-v51 .credits-source-table th:nth-child(3),
.credits-page-v51 .credits-source-table td:nth-child(3) {
  width: 26%;
}

.credits-page-v51 .credits-source-table th:nth-child(4),
.credits-page-v51 .credits-source-table td:nth-child(4) {
  width: 23%;
}

/* v1.99 Credits category records
   Fill Testing, Research and Special Thanks with consent-based public credit records
   using the same calm card/table rhythm as Source contributions. */
.credits-page-v51 .credits-credit-panel {
  width: 100%;
  margin-top: 0;
  padding-top: 0;
}

.credits-page-v51 .credits-credit-list-card {
  width: 100%;
  margin: 0;
}

.credits-page-v51 .credits-credit-table-wrap {
  margin-top: clamp(12px, 1.6vw, 16px);
}

.credits-page-v51 .credits-credit-table {
  min-width: 620px;
  table-layout: fixed;
}

.credits-page-v51 .credits-credit-table th:nth-child(1),
.credits-page-v51 .credits-credit-table td:nth-child(1) {
  width: 24%;
}

.credits-page-v51 .credits-credit-table th:nth-child(2),
.credits-page-v51 .credits-credit-table td:nth-child(2) {
  width: 52%;
}

.credits-page-v51 .credits-credit-table th:nth-child(3),
.credits-page-v51 .credits-credit-table td:nth-child(3) {
  width: 24%;
}

@media (max-width: 860px) {
  .credits-page-v51 .credits-credit-table {
    min-width: 680px;
  }
}

/* v1.100 Credits special-thanks text trim
   Keep the Special Thanks record concise with two columns only. */
.credits-page-v51 .credits-special-thanks-table th:nth-child(1),
.credits-page-v51 .credits-special-thanks-table td:nth-child(1) {
  width: 34%;
}

.credits-page-v51 .credits-special-thanks-table th:nth-child(2),
.credits-page-v51 .credits-special-thanks-table td:nth-child(2) {
  width: 66%;
}

/* v1.102 bilingual legal toolbar
   Keep the language controls and convenience-translation notice outside the legal body.
   German legal content remains the authoritative version; JS only toggles visibility. */
.legal-controlbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(18px, 3vw, 28px);
  margin: 0 0 clamp(24px, 3vw, 30px);
  padding-bottom: clamp(20px, 2.8vw, 26px);
  border-bottom: 1px solid rgba(43, 82, 115, 0.14);
}

.legal-controlbar-note {
  max-width: 600px;
  margin: 0;
}

.legal-lang-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.62rem;
  margin: 0;
}

.legal-lang-label {
  color: var(--text-soft);
  font-family: var(--font-meta);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}

.legal-lang-buttons {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(43, 82, 115, 0.18);
  background: rgba(255, 255, 255, 0.56);
}

.legal-lang-button {
  appearance: none;
  border: 0;
  border-right: 1px solid rgba(43, 82, 115, 0.14);
  margin: 0;
  padding: 0.36rem 0.62rem 0.34rem;
  background: transparent;
  color: var(--accent-blue);
  cursor: pointer;
  font-family: var(--font-meta);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
}

.legal-lang-button:last-child {
  border-right: 0;
}

.legal-lang-button[aria-pressed="true"] {
  background: var(--accent-blue);
  color: #fff;
}

.legal-lang-button:focus-visible {
  outline: 2px solid rgba(43, 82, 115, 0.34);
  outline-offset: 2px;
}

.legal-version + .legal-version {
  margin-top: clamp(30px, 4.6vw, 44px);
  padding-top: clamp(24px, 3.6vw, 34px);
  border-top: 1px solid rgba(43, 82, 115, 0.14);
}

.legal-js .legal-version[hidden],
.legal-js [data-legal-note][hidden] {
  display: none !important;
}

.legal-translation-note {
  
  border-left: 3px solid rgba(43, 82, 115, 0.46);
  
}

.legal-translation-note h2 {
  margin: 0 0 0.48rem !important;
  font-family: var(--font-meta);
  
  line-height: 1.2;
  
  text-transform: uppercase;
  color: var(--accent-blue);
}

.legal-translation-note p:last-child {
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .legal-controlbar {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .legal-lang-toolbar {
    justify-content: space-between;
  }
}

@media (max-width: 560px) {
  .legal-lang-button {
    padding-inline: 0.58rem;
  }
}

/* v1.103 bilingual legal toolbar correction
   Keep the convenience-translation notice permanently visible as a control note,
   reduce its visual weight, and prevent a second divider when JS shows one language. */
.legal-js .legal-version + .legal-version {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legal-controlbar {
  margin-bottom: clamp(22px, 2.8vw, 28px);
}

.legal-translation-note {
  max-width: 560px;
  padding: 0.68rem 0.86rem 0.7rem;
  border-left-color: rgba(43, 82, 115, 0.32);
  background: rgba(43, 82, 115, 0.038);
}

.legal-translation-note h2 {
  margin-bottom: 0.36rem !important;
  font-size: 0.66rem;
  letter-spacing: 0.085em;
}

.legal-translation-note p {
  margin: 0;
  max-width: 520px;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.42;
}

@media (max-width: 700px) {
  .legal-translation-note {
    max-width: none;
  }
}

/* Stage 12: Project Index notice hierarchy
   Legal context remains warning/red; required programs and support are technical/info notes. */
.projects-page-current .project-context-quote.project-context-legal {
  border-left-color: var(--notice-warning) !important;
  background: rgba(214, 90, 90, 0.055) !important;
}

.projects-page-current .project-context-quote.project-context-legal .project-context-title {
  color: var(--notice-warning) !important;
}

.projects-page-current .project-context-quote.project-context-info {
  margin-top: 10px;
  border-left-color: rgba(43, 82, 115, 0.74) !important;
  background: rgba(43, 82, 115, 0.045) !important;
}

.projects-page-current .project-context-quote.project-context-info .project-context-title {
  color: var(--accent-blue) !important;
}

/* v1.66 STRICT About intro axis alignment.
   Keep About aligned with Docs / Projects intro cards without changing content. */
.about-page .main-container {
  width: min(100%, var(--site-width));
  max-width: var(--site-width);
}

.about-page .page-intro-card.projects-intro-card {
  padding-top: clamp(24px, 3.2vw, 32px);
  padding-bottom: clamp(18px, 2.4vw, 24px);
}

.about-page .page-intro-card.projects-intro-card .page-title {
  margin: 0 0 0.62rem;
  color: var(--accent-blue);
  font-family: var(--font-action);
  font-size: clamp(1.06rem, 1.72vw, 1.28rem);
  font-weight: 600;
  font-synthesis: none;
  line-height: 1.05;
  letter-spacing: 0.115em;
  text-transform: uppercase;
}

.about-page .page-intro-card.projects-intro-card > p:not(.release-kicker):not(.project-context-title) {
  max-width: 700px;
  margin-top: 0;
  font-size: clamp(0.92rem, 1.35vw, 1rem);
  line-height: 1.46;
}

/* v1.83: Projects Runtime card as neutral project data sheet.
   No blueprint background, no current-card notice stripe, no version state. */
.projects-page-current .project-title-card-datasheet {
  
  display: grid;

  
  gap: clamp(18px, 3.0vw, 30px);
  padding: clamp(22px, 3.0vw, 28px) clamp(24px, 3.5vw, 34px);
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.78));
  border-color: rgba(29, 29, 27, 0.085);
  box-shadow: 0 8px 24px rgba(31, 42, 48, 0.020);
}

.projects-page-current .project-title-card-datasheet::after {
  content: none !important;
  display: none !important;
  background-image: none !important;
}

.projects-page-current .project-title-card-datasheet::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

.projects-page-current .project-title-card-datasheet .project-title-card-main,
.projects-page-current .project-title-card-datasheet .project-title-card-name,
.projects-page-current .project-title-card-datasheet .project-title-card-game,
.projects-page-current .project-title-card-datasheet .project-title-card-footer {
  position: relative;
  z-index: 2;
  max-width: none;
}

.projects-page-current .project-title-card-datasheet .project-title-card-main {
  display: grid;
  align-content: start;
  min-width: 0;
}

.projects-page-current .project-title-card-datasheet .project-title-card-name {
  margin: 0 0 0.50rem;
}

.projects-page-current .project-title-card-datasheet .project-title-card-series {
  display: inline;
}

.projects-page-current .project-title-card-datasheet .project-title-card-native {
  display: block;
  margin-top: 0.22rem;
  color: rgba(29, 29, 27, 0.66);
  font-family: var(--font-copy);
  font-size: clamp(0.74rem, 0.98vw, 0.86rem);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.16;
  letter-spacing: 0.018em;
}

.projects-page-current .project-title-card-meta-grid {
  display: grid;
  gap: 0.34rem;
  margin-top: clamp(0.72rem, 1.4vw, 0.96rem);
  max-width: 100%;
  color: rgba(29, 29, 27, 0.70);
  font-family: var(--font-meta);
  font-size: clamp(0.56rem, 0.72vw, 0.64rem);
  font-weight: 600;
  font-synthesis: none;
  line-height: 1.08;
  letter-spacing: 0.052em;
  text-transform: uppercase;
}

.projects-page-current .project-title-card-meta-row {
  display: grid;
  grid-template-columns: minmax(10.5rem, auto) minmax(0, 1fr);
  gap: 0.70rem;
  align-items: baseline;
}

.projects-page-current .project-title-card-meta-row > span:first-child {
  color: var(--accent-blue);
  letter-spacing: 0.082em;
}

.projects-page-current .project-title-card-datasheet .project-title-card-ids {
  grid-template-columns: minmax(0, max-content);
  row-gap: 0.36rem;
  width: max-content;
  font-size: clamp(0.56rem, 0.72vw, 0.64rem);
  line-height: 1.08;
}

.projects-page-current .project-title-card-datasheet .project-title-card-ids-label {
  margin-bottom: 0.12rem;
}

@media (max-width: 740px) {
  .projects-page-current .project-title-card-datasheet {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: clamp(16px, 4.6vw, 22px);
    padding: 19px 20px 17px;
  }

  .projects-page-current .project-title-card-datasheet .project-title-card-name,
  .projects-page-current .project-title-card-datasheet .project-title-card-game,
  .projects-page-current .project-title-card-datasheet .project-title-card-footer {
    max-width: none;
  }

  .projects-page-current .project-title-card-datasheet .project-title-card-game {
    font-size: clamp(1.02rem, 4.2vw, 1.22rem);
  }

  .projects-page-current .project-title-card-datasheet .project-title-card-native {
    font-size: clamp(0.72rem, 2.7vw, 0.84rem);
  }

  .projects-page-current .project-title-card-meta-grid,
  .projects-page-current .project-title-card-datasheet .project-title-card-ids {
    font-size: clamp(0.51rem, 2.08vw, 0.58rem);
  }

  .projects-page-current .project-title-card-meta-row {
    grid-template-columns: minmax(8.9rem, auto) minmax(0, 1fr);
    gap: 0.54rem;
  }

  .projects-page-current .project-title-card-datasheet .project-title-card-footer {
    justify-self: start;
  }

  .projects-page-current .project-title-card-datasheet .project-title-card-ids {
    width: max-content;
  }
}

@media (max-width: 520px) {
  .projects-page-current .project-title-card-datasheet {
    padding: 18px 19px 16px;
  }

  .projects-page-current .project-title-card-meta-row {
    grid-template-columns: 1fr;
    gap: 0.12rem;
  }
}

/* v1.84 projects: runtime datasheet card lets the official title span the card; Title IDs sit bottom right. */
.projects-page-current .project-title-card-datasheet {
  
  grid-template-columns: 1fr;
  
  align-items: stretch;
}

.projects-page-current .project-title-card-datasheet .project-title-card-main {
  grid-row: 1;
  grid-column: 1;
  width: 100%;
}

.projects-page-current .project-title-card-datasheet .project-title-card-game {
  max-width: 100%;
  font-size: clamp(1.16rem, 1.62vw, 1.44rem);
  line-height: 1.06;
}

.projects-page-current .project-title-card-datasheet .project-title-card-footer {
  grid-row: 3;
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: clamp(16px, 3vw, 28px);
  align-items: end;
  justify-self: stretch;
  align-self: end;
  width: 100%;
  
}

.projects-page-current .project-title-card-datasheet .project-title-card-meta-grid {
  margin-top: 0;
  align-self: end;
}

.projects-page-current .project-title-card-datasheet .project-title-card-ids {
  justify-self: end;
  align-self: end;
}

@media (max-width: 740px) {
  .projects-page-current .project-title-card-datasheet {
    grid-template-rows: auto auto;
  }

  .projects-page-current .project-title-card-datasheet .project-title-card-footer {
    grid-row: auto;
    grid-template-columns: 1fr;
    gap: clamp(14px, 4vw, 20px);
    
  }

  .projects-page-current .project-title-card-datasheet .project-title-card-ids {
    justify-self: start;
  }
}

/* v1.85 projects: tighten Runtime datasheet card vertical rhythm.
   TITLE IDS stay bottom-right, but the footer no longer floats away from the title block. */
.projects-page-current .project-title-card-datasheet {
  min-height: clamp(136px, 11.8vw, 154px);
  grid-template-rows: auto auto;
}

.projects-page-current .project-title-card-datasheet .project-title-card-footer {
  margin-top: clamp(10px, 1.55vw, 15px);
}

@media (max-width: 740px) {
  .projects-page-current .project-title-card-datasheet .project-title-card-footer {
    margin-top: clamp(12px, 3.6vw, 18px);
  }
}

/* v1.86 projects: compact Runtime datasheet card after moving Title IDs bottom-right.
   The previous pass reduced values too weakly because the inherited featured-card min-height still created a large dead zone. */

/* v1.87 projects: runtime datasheet final spacing and Search-card parity.
   Restore a controlled title/footer gap after v1.86 over-tightened the datasheet,
   keep meta data and Title IDs bottom-aligned, and let the Search entry use the same
   neutral datasheet layout as Runtime. */
.projects-page-current .project-title-card-datasheet {
  min-height: 0 !important;
  grid-template-rows: auto auto !important;
  row-gap: 0 !important;
  padding-top: clamp(19px, 2.4vw, 24px) !important;
  padding-bottom: clamp(17px, 2.15vw, 22px) !important;
}

.projects-page-current .project-title-card-datasheet .project-title-card-footer {
  
  align-self: end !important;
  align-items: end !important;
}

.projects-page-current .project-title-card-datasheet .project-title-card-meta-grid,
.projects-page-current .project-title-card-datasheet .project-title-card-ids {
  align-self: end !important;
}

@media (max-width: 740px) {
  .projects-page-current .project-title-card-datasheet {
    padding-top: 18px !important;
    padding-bottom: 17px !important;
  }

  .projects-page-current .project-title-card-datasheet .project-title-card-footer {
    
    align-items: start !important;
  }

  .projects-page-current .project-title-card-datasheet .project-title-card-meta-grid,
  .projects-page-current .project-title-card-datasheet .project-title-card-ids {
    align-self: start !important;
  }
}

/* v1.88 projects: place TITLE IDS as the first label column of the ID rows.
   This removes the extra header line, pulls the datasheet footer one rhythm step
   closer to the Japanese title, and keeps Runtime/Search cards aligned. */
.projects-page-current .project-title-card-datasheet .project-title-card-footer {
  margin-top: clamp(10px, 1.45vw, 15px) !important;
}

.projects-page-current .project-title-card-datasheet .project-title-card-ids {
  display: grid !important;
  grid-template-columns: max-content 2.0rem max-content !important;
  column-gap: clamp(0.38rem, 0.82vw, 0.62rem) !important;
  row-gap: 0.34rem !important;
  align-items: baseline !important;
  width: max-content !important;
}

.projects-page-current .project-title-card-datasheet .project-title-card-ids-label {
  grid-column: 1 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  padding-right: clamp(0.16rem, 0.45vw, 0.32rem) !important;
  align-self: baseline !important;
}

@media (max-width: 740px) {
  .projects-page-current .project-title-card-datasheet .project-title-card-footer {
    margin-top: clamp(13px, 3.7vw, 18px) !important;
  }

  .projects-page-current .project-title-card-datasheet .project-title-card-ids {
    grid-template-columns: max-content 2.0rem max-content !important;
    row-gap: 0.28rem !important;
  }
}

/* v1.73: Projects cleanup after removing the Projects SEARCH tab.
   Projects now uses three purpose tabs only: Runtime, Tools, Planned. */
.projects-page-current .project-category-nav {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.projects-page-current .project-category-button:nth-child(3) {
  border-right: 0;
}

@media (max-width: 740px) {
  .projects-page-current .project-category-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .projects-page-current .project-category-button:nth-child(2) {
    border-right: 1px solid rgba(29, 29, 27, 0.065);
  }

  .projects-page-current .project-category-button:nth-child(-n/**/+2) {
    border-bottom: 0;
  }

  .projects-page-current .project-category-button:nth-child(3) {
    border-right: 0;
  }
}

/* v1.74: Tool cards use the same compact datasheet rhythm as the Runtime card.
   STATUS was removed because tool category already implies an official tool entry. */
.projects-page-current .project-tool-card-datasheet {
  min-height: clamp(176px, 16vw, 202px);
  padding: clamp(18px, 2.6vw, 23px) clamp(20px, 3vw, 26px);
  border-color: rgba(43, 82, 115, 0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.76));
}

.projects-page-current .project-tool-card-datasheet .project-card-meta {
  margin-bottom: 0.52rem;
}

.projects-page-current .project-tool-card-datasheet h3 {
  margin: 0 0 0.52rem;
  font-size: clamp(1.38rem, 2.15vw, 1.68rem);
  line-height: 1.04;
  letter-spacing: 0.030em;
}

.projects-page-current .project-tool-card-datasheet p {
  max-width: 33rem;
  margin: 0;
  color: var(--text-muted);
  font-size: clamp(0.86rem, 1.18vw, 0.94rem);
  line-height: 1.42;
}

.projects-page-current .project-tool-card-datasheet .project-tool-card-details {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.48rem clamp(1.0rem, 2.0vw, 1.38rem);
  margin-top: auto;
  padding-top: clamp(16px, 2.4vw, 20px);
  font-size: clamp(0.58rem, 0.78vw, 0.64rem);
}

.projects-page-current .project-tool-card-datasheet .project-tool-card-label {
  margin-bottom: 0.18rem;
}

@media (max-width: 740px) {
  .projects-page-current .project-tool-card-datasheet {
    min-height: 0;
  }

  .projects-page-current .project-tool-card-datasheet .project-tool-card-details {
    margin-top: clamp(18px, 4vw, 24px);
  }
}

@media (max-width: 520px) {
  .projects-page-current .project-tool-card-datasheet .project-tool-card-details {
    grid-template-columns: 1fr;
  }
}

/* v1.75 projects: Tools use the same neutral datasheet card form as Runtime.
   Content stays unchanged; only the card geometry, type scale, spacing, and footer rhythm are aligned. */
.projects-page-current .project-tool-grid {
  grid-template-columns: 1fr !important;
  gap: clamp(14px, 2vw, 20px) !important;
}

.projects-page-current .project-tool-card-datasheet {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto !important;
  min-height: 0 !important;
  padding: clamp(19px, 2.4vw, 24px) clamp(26px, 3.4vw, 34px) clamp(17px, 2.15vw, 22px) !important;
  border-color: rgba(43, 82, 115, 0.14) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.76)) !important;
  align-items: start !important;
}

.projects-page-current .project-tool-card-datasheet .project-card-meta {
  margin: 0 0 0.28rem !important;
}

.projects-page-current .project-tool-card-datasheet h3 {
  margin: 0 !important;
  font-size: clamp(1.16rem, 1.62vw, 1.44rem) !important;
  line-height: 1.06 !important;
  letter-spacing: 0.030em !important;
}

.projects-page-current .project-tool-card-datasheet p {
  max-width: min(100%, 44rem) !important;
  margin: 0.34rem 0 0 !important;
  color: var(--text-muted) !important;
  font-size: clamp(0.78rem, 1.00vw, 0.86rem) !important;
  line-height: 1.38 !important;
}

.projects-page-current .project-tool-card-datasheet .project-tool-card-details {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.36rem clamp(1.0rem, 2.0vw, 1.38rem) !important;
  margin-top: clamp(10px, 1.45vw, 15px) !important;
  padding-top: 0 !important;
  color: rgba(29, 29, 27, 0.72) !important;
  font-size: clamp(0.56rem, 0.70vw, 0.62rem) !important;
  line-height: 1.18 !important;
}

.projects-page-current .project-tool-card-datasheet .project-tool-card-label {
  margin-bottom: 0.16rem !important;
}

@media (max-width: 740px) {
  .projects-page-current .project-tool-card-datasheet {
    padding: 18px 19px 17px !important;
  }

  .projects-page-current .project-tool-card-datasheet .project-tool-card-details {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-top: clamp(13px, 3.7vw, 18px) !important;
  }
}

@media (max-width: 520px) {
  .projects-page-current .project-tool-card-datasheet .project-tool-card-details {
    grid-template-columns: 1fr !important;
  }
}

/* v1.76 projects: force TOOLS into the same full-width datasheet card form as RUNTIME.
   The tool content stays unchanged; only card geometry, type scale and footer rhythm are unified. */
body.projects-page-current .project-tool-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(14px, 2vw, 20px) !important;
}

body.projects-page-current .project-tool-card-datasheet {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto !important;
  min-height: 0 !important;
  padding: clamp(19px, 2.4vw, 24px) clamp(26px, 3.4vw, 34px) clamp(17px, 2.15vw, 22px) !important;
  border-color: rgba(29, 29, 27, 0.085) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.78)) !important;
  box-shadow: 0 8px 24px rgba(31, 42, 48, 0.020) !important;
  align-items: start !important;
}

body.projects-page-current .project-tool-card-datasheet .project-card-meta {
  margin: 0 0 0.50rem !important;
  color: var(--accent-blue) !important;
  font-family: var(--font-meta) !important;
  font-size: clamp(0.62rem, 0.82vw, 0.72rem) !important;
  font-weight: 600 !important;
  font-synthesis: none !important;
  line-height: 1 !important;
  letter-spacing: 0.105em !important;
  text-transform: uppercase !important;
}

body.projects-page-current .project-tool-card-datasheet h3 {
  margin: 0 !important;
  color: var(--text-main) !important;
  font-family: var(--font-copy) !important;
  font-size: clamp(1.16rem, 1.62vw, 1.44rem) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  line-height: 1.06 !important;
  letter-spacing: 0.018em !important;
}

body.projects-page-current .project-tool-card-datasheet p {
  max-width: min(100%, 48rem) !important;
  margin: 0.34rem 0 0 !important;
  color: rgba(29, 29, 27, 0.66) !important;
  font-family: var(--font-copy) !important;
  font-size: clamp(0.78rem, 1.00vw, 0.86rem) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  line-height: 1.38 !important;
  letter-spacing: 0.018em !important;
}

body.projects-page-current .project-tool-card-datasheet .project-tool-card-details {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.36rem clamp(1.0rem, 2.0vw, 1.38rem) !important;
  margin-top: clamp(10px, 1.45vw, 15px) !important;
  padding-top: 0 !important;
  color: rgba(29, 29, 27, 0.72) !important;
  font-family: var(--font-meta) !important;
  font-size: clamp(0.56rem, 0.70vw, 0.62rem) !important;
  font-weight: 600 !important;
  font-synthesis: none !important;
  line-height: 1.18 !important;
  letter-spacing: 0.052em !important;
  text-transform: uppercase !important;
}

body.projects-page-current .project-tool-card-datasheet .project-tool-card-label {
  display: block !important;
  margin-bottom: 0.16rem !important;
  color: var(--accent-blue) !important;
  letter-spacing: 0.082em !important;
}

@media (max-width: 740px) {
  body.projects-page-current .project-tool-card-datasheet {
    padding: 18px 19px 17px !important;
  }

  body.projects-page-current .project-tool-card-datasheet .project-tool-card-details {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-top: clamp(13px, 3.7vw, 18px) !important;
  }
}

@media (max-width: 520px) {
  body.projects-page-current .project-tool-card-datasheet .project-tool-card-details {
    grid-template-columns: 1fr !important;
  }
}

/* v1.77 projects: PLANNED cards now use the same neutral full-width datasheet rhythm as RUNTIME/TOOLS.
   Old blueprint placeholder cards are replaced by compact planning datasheets. */
body.projects-page-current .project-planned-datasheet-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(14px, 2vw, 20px) !important;
}

body.projects-page-current .project-planned-card-datasheet {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto !important;
  min-height: 0 !important;
  padding: clamp(19px, 2.4vw, 24px) clamp(26px, 3.4vw, 34px) clamp(17px, 2.15vw, 22px) !important;
  border: 1px solid rgba(29, 29, 27, 0.085) !important;
  border-radius: 5px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.78)) !important;
  box-shadow: 0 8px 24px rgba(31, 42, 48, 0.020) !important;
  align-items: start !important;
}

body.projects-page-current .project-planned-card-datasheet:hover {
  border-color: rgba(43, 82, 115, 0.18) !important;
}

body.projects-page-current .project-planned-card-datasheet .project-card-meta {
  margin: 0 0 0.50rem !important;
  color: var(--accent-blue) !important;
  font-family: var(--font-meta) !important;
  font-size: clamp(0.62rem, 0.82vw, 0.72rem) !important;
  font-weight: 600 !important;
  font-synthesis: none !important;
  line-height: 1 !important;
  letter-spacing: 0.105em !important;
  text-transform: uppercase !important;
}

body.projects-page-current .project-planned-card-datasheet h3 {
  margin: 0 !important;
  color: var(--text-main) !important;
  font-family: var(--font-copy) !important;
  font-size: clamp(1.16rem, 1.62vw, 1.44rem) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  line-height: 1.06 !important;
  letter-spacing: 0.018em !important;
}

body.projects-page-current .project-planned-card-datasheet p {
  max-width: min(100%, 48rem) !important;
  margin: 0.34rem 0 0 !important;
  color: rgba(29, 29, 27, 0.66) !important;
  font-family: var(--font-copy) !important;
  font-size: clamp(0.78rem, 1.00vw, 0.86rem) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  line-height: 1.38 !important;
  letter-spacing: 0.018em !important;
}

body.projects-page-current .project-planned-card-datasheet .project-planned-card-details {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.36rem clamp(1.0rem, 2.0vw, 1.38rem) !important;
  margin-top: clamp(10px, 1.45vw, 15px) !important;
  padding-top: 0 !important;
  color: rgba(29, 29, 27, 0.72) !important;
  font-family: var(--font-meta) !important;
  font-size: clamp(0.56rem, 0.70vw, 0.62rem) !important;
  font-weight: 600 !important;
  font-synthesis: none !important;
  line-height: 1.18 !important;
  letter-spacing: 0.052em !important;
  text-transform: uppercase !important;
}

body.projects-page-current .project-planned-card-datasheet .project-planned-card-label {
  display: block !important;
  margin-bottom: 0.16rem !important;
  color: var(--accent-blue) !important;
  letter-spacing: 0.082em !important;
}

@media (max-width: 740px) {
  body.projects-page-current .project-planned-card-datasheet {
    padding: 18px 19px 17px !important;
  }

  body.projects-page-current .project-planned-card-datasheet .project-planned-card-details {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-top: clamp(13px, 3.7vw, 18px) !important;
  }
}

@media (max-width: 520px) {
  body.projects-page-current .project-planned-card-datasheet .project-planned-card-details {
    grid-template-columns: 1fr !important;
  }
}

/* v1.78 projects: PLANNED restoration targets use the same neutral title-datasheet grammar as RUNTIME.
   Planned tool areas stay as compact planned-tool datasheets; planned NGRP/restoration targets expose title context and planned Title IDs. */
body.projects-page-current .project-planned-title-card.project-title-card-datasheet {
  grid-column: 1 / -1 !important;
  border: 1px solid rgba(29, 29, 27, 0.085) !important;
  border-radius: 5px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.78)) !important;
  box-shadow: 0 8px 24px rgba(31, 42, 48, 0.020) !important;
  isolation: auto !important;
  overflow: visible !important;
}

body.projects-page-current .project-planned-title-card.project-title-card-datasheet::before,
body.projects-page-current .project-planned-title-card.project-title-card-datasheet::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

body.projects-page-current .project-planned-title-card.project-title-card-datasheet > * {
  position: relative !important;
  z-index: 1 !important;
}

body.projects-page-current .project-planned-title-card.project-title-card-datasheet .project-title-card-name {
  color: var(--accent-blue) !important;
}

body.projects-page-current .project-planned-title-card.project-title-card-datasheet .project-title-card-game {
  max-width: 100% !important;
}

body.projects-page-current .project-planned-title-card.project-title-card-datasheet .project-title-card-series {
  display: inline !important;
}

body.projects-page-current .project-planned-title-card.project-title-card-datasheet .project-title-card-native {
  display: block !important;
}

body.projects-page-current .project-planned-title-card.project-title-card-datasheet:hover {
  border-color: rgba(43, 82, 115, 0.18) !important;
}

/* v1.79 projects: lock datasheet metadata into fixed label/value columns.
   Prevent long labels such as PUBLISHER / RIGHTS HOLDER from creating
   per-row value offsets at different viewport widths. Applies to Runtime and
   Planned restoration target title cards. */
body.projects-page-current .project-title-card-datasheet .project-title-card-meta-grid {
  --project-meta-label-col: clamp(10.7rem, 21vw, 12.4rem);
  max-width: min(100%, 34rem) !important;
}

body.projects-page-current .project-title-card-datasheet .project-title-card-meta-row {
  display: grid !important;
  grid-template-columns: var(--project-meta-label-col) minmax(0, 1fr) !important;
  gap: clamp(0.54rem, 1.1vw, 0.76rem) !important;
  align-items: baseline !important;
}

body.projects-page-current .project-title-card-datasheet .project-title-card-meta-row > span:first-child {
  min-width: 0 !important;
  white-space: nowrap !important;
}

body.projects-page-current .project-title-card-datasheet .project-title-card-meta-row > span:last-child {
  min-width: 0 !important;
  white-space: nowrap !important;
}

@media (max-width: 740px) {
  body.projects-page-current .project-title-card-datasheet .project-title-card-meta-grid {
    --project-meta-label-col: clamp(10.3rem, 31vw, 11.7rem);
  }
}

@media (max-width: 520px) {
  body.projects-page-current .project-title-card-datasheet .project-title-card-meta-grid {
    --project-meta-label-col: 1fr;
  }

  body.projects-page-current .project-title-card-datasheet .project-title-card-meta-row {
    grid-template-columns: 1fr !important;
    gap: 0.12rem !important;
  }

  body.projects-page-current .project-title-card-datasheet .project-title-card-meta-row > span:first-child,
  body.projects-page-current .project-title-card-datasheet .project-title-card-meta-row > span:last-child {
    white-space: normal !important;
  }
}

/* v1.80 global hub rhythm: unify section and entry spacing across Projects and Docs.
   Projects and Docs use the same outer section gap, and lists inside TOOLS,
   PLANNED and DOCS use the same compact entry gap so card stacks no longer
   jump between different visual rhythms. */
:root {
  --raccu-hub-section-gap: clamp(22px, 3vw, 28px);
  --raccu-hub-entry-gap: clamp(10px, 1.45vw, 14px);
}

body.projects-page-current .project-runtime-panel,
body.projects-page-current .project-tools-panel,
body.projects-page-current .project-planned-panel,
body.docs-page-v17 .project-panel,
body.docs-page-v18 .project-panel {
  margin-top: var(--raccu-hub-section-gap) !important;
}

body.projects-page-current .project-feature-stack,
body.projects-page-current .project-tool-grid,
body.projects-page-current .project-planned-datasheet-grid,
body.docs-page-v17 .docs-record-grid,
body.docs-page-v18 .docs-record-grid,
body.docs-page-v17 .docs-search-results,
body.docs-page-v18 .docs-search-results {
  gap: var(--raccu-hub-entry-gap) !important;
}

body.projects-page-current .project-tool-grid,
body.projects-page-current .project-planned-datasheet-grid,
body.docs-page-v17 .docs-record-grid,
body.docs-page-v18 .docs-record-grid {
  margin-top: 0 !important;
}

body.projects-page-current .project-card,
body.docs-page-v17 .docs-record-card.project-title-card,
body.docs-page-v18 .docs-record-card.project-title-card {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 740px) {
  :root {
    --raccu-hub-section-gap: 22px;
    --raccu-hub-entry-gap: 12px;
  }
}

/* v1.91 mobile targeted compact polish: keep the desktop datasheet grammar readable on phones.
   This pass does not use CSS zoom. It only tightens mobile geometry where the first 85%-style pass
   still collapsed metadata too aggressively into single-column stacks. */
@media (max-width: 760px) {
  .main-container {
    width: 100% !important;
    max-width: none !important;
    padding-left: clamp(9px, 2.7vw, 14px) !important;
    padding-right: clamp(9px, 2.7vw, 14px) !important;
  }

  .card,
  body.projects-page-current .project-panel,
  body.docs-page-v17 .project-panel,
  body.docs-page-v18 .project-panel {
    width: 100% !important;
  }

  body.projects-page-current .project-title-card-datasheet,
  body.projects-page-current .project-tool-card-datasheet,
  body.projects-page-current .project-planned-card-datasheet {
    padding: 16px 16px 15px !important;
  }

  body.projects-page-current .project-title-card-datasheet .project-title-card-game {
    font-size: clamp(1.02rem, 4.55vw, 1.26rem) !important;
    line-height: 1.05 !important;
  }

  body.projects-page-current .project-title-card-datasheet .project-title-card-native {
    margin-top: 0.18rem !important;
    font-size: clamp(0.66rem, 2.45vw, 0.80rem) !important;
  }

  body.projects-page-current .project-title-card-datasheet .project-title-card-footer {
    gap: clamp(0.74rem, 3vw, 1.05rem) !important;
    margin-top: clamp(10px, 3vw, 14px) !important;
  }

  body.projects-page-current .project-title-card-datasheet .project-title-card-meta-grid {
    
    max-width: 100% !important;
  }

  body.projects-page-current .project-title-card-datasheet .project-title-card-meta-row {
    
    gap: 0.42rem !important;
    
  }

  body.projects-page-current .project-title-card-datasheet .project-title-card-meta-row > span:first-child,
  body.projects-page-current .project-title-card-datasheet .project-title-card-meta-row > span:last-child {
    white-space: normal !important;
  }

  body.projects-page-current .project-title-card-datasheet .project-title-card-ids,
  body.projects-page-current .project-title-card-datasheet .project-title-card-meta-grid,
  body.projects-page-current .project-tool-card-datasheet .project-tool-card-details,
  body.projects-page-current .project-planned-card-datasheet .project-planned-card-details {
    font-size: clamp(0.50rem, 1.9vw, 0.58rem) !important;
  }

}

@media (max-width: 420px) {
  body.projects-page-current .project-title-card-datasheet .project-title-card-footer {
    grid-template-columns: 1fr !important;
  }

  body.projects-page-current .project-title-card-datasheet .project-title-card-ids {
    justify-self: start !important;
    width: max-content !important;
    max-width: 100% !important;
  }

  body.projects-page-current .project-tool-card-datasheet .project-tool-card-details,
  body.projects-page-current .project-planned-card-datasheet .project-planned-card-details {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 360px) {
  body.projects-page-current .project-tool-card-datasheet .project-tool-card-details,
  body.projects-page-current .project-planned-card-datasheet .project-planned-card-details {
    grid-template-columns: 1fr !important;
  }
}

/* v1.92 mobile datasheet axis cleanup: keep Title IDs on the same label/value axis as the other metadata rows, and prevent Docs record dates from sharing the kicker row on narrow screens. */
@media (max-width: 760px) {
  body.projects-page-current .project-title-card-datasheet {
    --project-mobile-label-col: clamp(6.8rem, 30vw, 8.5rem);
  }

  

  

  
}

@media (max-width: 740px) {
  body.docs-page-v18 .docs-record-card.project-title-card {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto auto !important;
  }

  body.docs-page-v18 .docs-record-kicker {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  body.docs-page-v18 .docs-record-date {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    margin: 0.30rem 0 0.58rem !important;
  }

  body.docs-page-v18 .docs-record-title {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }

  body.docs-page-v18 .docs-record-preview {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
  }

  body.docs-page-v18 .docs-record-card-footer {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
  }
}

@media (max-width: 420px) {
  body.projects-page-current .project-title-card-datasheet {
    --project-mobile-label-col: clamp(5.7rem, 29vw, 6.8rem);
  }

  
}

/* v1.93 mobile correction: keep Title ID values visually tied together on the same
   metadata value axis, and keep Docs record dates in the header without a separate
   displaced DATE label. */
@media (max-width: 760px) {

  

  body.docs-page-v18 .docs-record-card.project-title-card {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto auto !important;
    align-items: start !important;
  }

  body.docs-page-v18 .docs-record-kicker {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body.docs-page-v18 .docs-record-date {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: baseline !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  body.docs-page-v18 .docs-record-date span {
    display: none !important;
  }

  body.docs-page-v18 .docs-record-title {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    margin-top: 0.34rem !important;
  }

  body.docs-page-v18 .docs-record-preview {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }

  body.docs-page-v18 .docs-record-card-footer {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
  }
}

/* v1.94 mobile datasheet/title-date correction: align TITLE IDS with the same
   value column used by Platform/Publisher/Release, and make Docs dates a small
   header-side datum instead of a displaced second label row. */
@media (max-width: 760px) {

  

  

  .docs-record-card.project-title-card {
    grid-template-columns: minmax(0, 1fr) max-content !important;
    grid-template-rows: auto auto auto auto !important;
    align-items: start !important;
  }

  .docs-record-card.project-title-card .docs-record-kicker {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  .docs-record-card.project-title-card .docs-record-date {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: baseline !important;
    margin: 0 0 0 0.75rem !important;
    white-space: nowrap !important;
    opacity: 0.82 !important;
  }

  .docs-record-card.project-title-card .docs-record-date span {
    display: none !important;
  }

  .docs-record-card.project-title-card .docs-record-title {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    margin-top: 0.32rem !important;
  }

  .docs-record-card.project-title-card .docs-record-preview {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }

  .docs-record-card.project-title-card .docs-record-card-footer {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
  }
}

@media (max-width: 420px) {
  body.projects-page-current .project-title-card-datasheet .project-title-card-ids {
    grid-template-columns: var(--project-meta-label-col) minmax(0, 1fr) !important;
    
  }

}

/* v1.95 mobile datasheet Title-ID axis fix.
   The Title-ID rows now use the same label/value column as PLATFORM, PUBLISHER and 3DS RELEASE.
   The region code (USA/EUR/JPN) starts at the value axis; the ID follows inside that value cell. */
@media (max-width: 760px) {
  body.projects-page-current .project-title-card-datasheet {
    --project-meta-label-col: clamp(7.1rem, 32vw, 8.8rem) !important;
  }

  body.projects-page-current .project-title-card-datasheet .project-title-card-ids {

    

    justify-self: stretch !important;

  }

  

  
}

@media (max-width: 420px) {
  body.projects-page-current .project-title-card-datasheet {
    --project-meta-label-col: clamp(6.35rem, 31vw, 7.4rem) !important;
  }

  body.projects-page-current .project-title-card-datasheet .project-title-card-ids {
    column-gap: 0.36rem !important;
  }

}

/* v1.96 mobile Title-ID axis repair.
   Use explicit region/code spans so the region starts exactly on the same
   value axis as PLATFORM / PUBLISHER / 3DS RELEASE instead of becoming a
   separate centered mini-stack. */
@media (max-width: 760px) {
  body.projects-page-current .project-title-card-datasheet {
    --project-mobile-meta-label-col: clamp(7.6rem, 35vw, 9.2rem) !important;
  }

  body.projects-page-current .project-title-card-datasheet .project-title-card-meta-grid {
    --project-meta-label-col: var(--project-mobile-meta-label-col) !important;
  }

  

  

  

  

}

@media (max-width: 420px) {
  body.projects-page-current .project-title-card-datasheet {
    --project-mobile-meta-label-col: clamp(7.1rem, 34vw, 8.4rem) !important;
  }

  body.projects-page-current .project-title-card-datasheet .project-title-card-ids,
  body.projects-page-current .project-title-card-datasheet .project-title-card-meta-row {
    column-gap: 0.40rem !important;
  }

}

/* v1.98 final mobile Title-ID table alignment.
   Previous mobile overrides used display: contents and nth-child grid placement;
   that could split region/code onto separate rows. This resets the block to a
   normal two-column datasheet row: label column + value column. */
@media (max-width: 760px) {
  body.projects-page-current .project-title-card-datasheet {
    --project-mobile-label-axis-final: clamp(7.2rem, 34vw, 8.6rem) !important;
  }

  

  body.projects-page-current .project-title-card-datasheet .project-title-card-ids-label {

    

    
    align-self: baseline !important;
  }

  

  

  

}

@media (max-width: 420px) {
  body.projects-page-current .project-title-card-datasheet {
    --project-mobile-label-axis-final: clamp(6.95rem, 33vw, 7.95rem) !important;
  }

}

/* v1.99 mobile metadata rhythm: stack tool/doc metadata entries vertically.
   Desktop keeps the horizontal datasheet rhythm. On mobile, long values such as
   Charm Table editing workflows need full-line width instead of compressed
   two-column meta tiles. Restoration-target Title IDs keep their own table rules. */

/* v2.00 mobile datasheet meta-axis correction.
   Keep the compact desktop-style datasheet logic on mobile:
   every metadata entry is one label/value row. This replaces the earlier
   stacked label-over-value experiment for tool cards and docs records. */
@media (max-width: 760px) {

  

  body.docs-page-v17 .docs-record-card-footer,
  body.docs-page-v18 .docs-record-card-footer {
    display: block !important;
  }

  body.docs-page-v17 .docs-record-meta-row,
  body.docs-page-v18 .docs-record-meta-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.30rem !important;
    align-items: start !important;
    justify-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: clamp(12px, 3.2vw, 16px) !important;
  }

  body.docs-page-v17 .docs-record-meta-heading,
  body.docs-page-v18 .docs-record-meta-heading {
    display: none !important;
  }

  body.docs-page-v17 .docs-record-meta-item,
  body.docs-page-v18 .docs-record-meta-item {
    display: grid !important;
    grid-template-columns: clamp(4.3rem, 22vw, 5.6rem) minmax(0, 1fr) !important;
    column-gap: 0.50rem !important;
    align-items: baseline !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  body.docs-page-v17 .docs-record-label,
  body.docs-page-v18 .docs-record-label {
    display: block !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
}

/* v2.01 mobile project Title-ID axis: keep Title IDs as a normal
   label/value datasheet row. Region starts on the same value axis as
   Nintendo 3DS, publisher, and release date; the numeric ID follows it. */
@media (max-width: 760px) {
  body.projects-page-current .project-title-card-datasheet {
    --project-mobile-label-axis-clean: clamp(7.7rem, 35vw, 9.0rem) !important;
  }

  body.projects-page-current .project-title-card-datasheet .project-title-card-ids {
    display: grid !important;
    grid-template-columns: var(--project-mobile-label-axis-clean) 1.72rem max-content !important;
    column-gap: 0.42rem !important;
    row-gap: 0.16rem !important;
    align-items: baseline !important;
    justify-content: start !important;
    justify-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.projects-page-current .project-title-card-datasheet .project-title-card-ids-label {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  

  

  body.projects-page-current .project-title-card-datasheet .project-title-region,
  body.projects-page-current .project-title-card-datasheet .project-title-code {
    display: block !important;
    align-self: baseline !important;
    justify-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  body.projects-page-current .project-title-card-datasheet .project-title-region {
    grid-column: 2 !important;
  }

  body.projects-page-current .project-title-card-datasheet .project-title-code {
    grid-column: 3 !important;
  }
}

/* v2.03 current-mobile Title-ID/table stabilization.
   Uses the dedicated .project-title-card-ids-values wrapper inserted in projects/index.html.
   TITLE IDS stays in the label column; region + numeric ID stay together in
   the value column and never overlap the label. */
.projects-page-current .project-title-card-datasheet .project-title-card-ids-table {
  display: grid !important;
  grid-template-columns: auto max-content !important;
  column-gap: 0.62rem !important;
  row-gap: 0.18rem !important;
  align-items: start !important;
  justify-content: start !important;
  justify-items: start !important;
  width: max-content !important;
  max-width: 100% !important;
}
.projects-page-current .project-title-card-datasheet .project-title-card-ids-table .project-title-card-ids-label {
  grid-column: 1 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  align-self: baseline !important;
}
.projects-page-current .project-title-card-datasheet .project-title-card-ids-values {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, max-content) !important;
  row-gap: 0.18rem !important;
  align-items: baseline !important;
  justify-items: start !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.projects-page-current .project-title-card-datasheet .project-title-card-id-line {
  display: grid !important;
  grid-template-columns: 1.78rem max-content !important;
  column-gap: 0.42rem !important;
  align-items: baseline !important;
  justify-content: start !important;
  justify-items: start !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}
.projects-page-current .project-title-card-datasheet .project-title-card-id-line .project-title-region,
.projects-page-current .project-title-card-datasheet .project-title-card-id-line .project-title-code {
  display: block !important;
  grid-row: auto !important;
  grid-column: auto !important;
  justify-self: start !important;
  align-self: baseline !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
}
@media (max-width: 760px) {
  body.projects-page-current .project-title-card-datasheet {
    --project-final-mobile-label-col: clamp(7.2rem, 34vw, 8.6rem) !important;
  }
  body.projects-page-current .project-title-card-datasheet .project-title-card-meta-row {
    display: grid !important;
    grid-template-columns: var(--project-final-mobile-label-col) minmax(0, 1fr) !important;
    column-gap: 0.52rem !important;
    align-items: baseline !important;
  }
  body.projects-page-current .project-title-card-datasheet .project-title-card-ids-table {
    display: grid !important;
    grid-template-columns: var(--project-final-mobile-label-col) minmax(0, 1fr) !important;
    column-gap: 0.52rem !important;
    row-gap: 0 !important;
    align-items: start !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body.projects-page-current .project-title-card-datasheet .project-title-card-ids-values {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    row-gap: 0.16rem !important;
    justify-self: start !important;
    width: max-content !important;
    max-width: 100% !important;
  }
  body.projects-page-current .project-title-card-datasheet .project-title-card-id-line {
    grid-template-columns: 1.62rem max-content !important;
    column-gap: 0.40rem !important;
  }

  
}
@media (max-width: 420px) {
  body.projects-page-current .project-title-card-datasheet {
    --project-final-mobile-label-col: clamp(6.75rem, 33vw, 7.55rem) !important;
  }
  body.projects-page-current .project-title-card-datasheet .project-title-card-id-line {
    grid-template-columns: 1.46rem max-content !important;
    column-gap: 0.34rem !important;
  }
}

/* v2.04 mobile tool/planned meta axis repair.
   The label/value rows for TOOLS and PLANNED TOOL AREA must use the same
   compact two-column axis as the restoration datasheets, not label-over-value
   stacking and not a horizontal four-column desktop table. */
@media (max-width: 760px) {
  body.projects-page-current {
    --project-mobile-row-label-col: clamp(7.2rem, 34vw, 8.6rem) !important;
  }

  body.projects-page-current .project-tool-card-datasheet .project-tool-card-details,
  body.projects-page-current .project-planned-card-datasheet .project-planned-card-details {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.30rem !important;
    margin-top: clamp(10px, 2.8vw, 14px) !important;
  }

  body.projects-page-current .project-tool-card-datasheet .project-tool-card-details > span,
  body.projects-page-current .project-planned-card-datasheet .project-planned-card-details > span {
    display: grid !important;
    grid-template-columns: var(--project-mobile-row-label-col) minmax(0, 1fr) !important;
    column-gap: 0.52rem !important;
    align-items: baseline !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  body.projects-page-current .project-tool-card-datasheet .project-tool-card-label,
  body.projects-page-current .project-planned-card-datasheet .project-planned-card-label {
    display: block !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 420px) {
  body.projects-page-current {
    --project-mobile-row-label-col: clamp(6.75rem, 33vw, 7.55rem) !important;
  }
}