/* KIKAIMA V4.1 — shared visual language for all Spanish and English pages.
   Every custom property is documented here so that a non-programmer can adjust
   the design without searching through individual HTML pages. */
:root,
html[data-theme="dark"] {
  --background: #1d1d1b; /* Dark site background from the original branding. */
  --panel: #242422; /* Subtle surface for cards and menus. */
  --panel-raised: #30302c; /* Slightly stronger surface for editorial details. */
  --text: #f5f5f0; /* Main text in dark mode. */
  --logo-letter: #ffffff; /* Original wordmark letters on the dark background. */
  --muted: #c0c0b9; /* Muted but legible body text. */
  --subtle: #999a92; /* Auxiliary labels, never critical body information. */
  --line: #484943; /* Hairline separators between editorial sections. */
  --strong-line: #65655e; /* Stronger outlines for menus and image frames. */
  --header-background: rgba(29,29,27,.97); /* Translucent sticky menu. */
  --on-accent: #ffffff; /* Text on solid accent fills is always white. */
  --font-body: Arial, Helvetica, sans-serif; /* Widely available reading typeface. */
  --font-mono: Consolas, "Liberation Mono", monospace; /* Labels and UI tags. */
  --content-width: 1220px; /* Width of the widest desktop content region. */
}
html[data-theme="light"] {
  --background: #efefeb; /* Warm light gray, never pure white. */
  --panel: #f7f6f2;
  --panel-raised: #e5e4dd;
  --text: #3f3f3c; /* Dark gray text, never black. */
  --logo-letter: #3f3f3c; /* Dark gray wordmark glyphs. */
  --muted: #5e5e59;
  --subtle: #74746f;
  --line: #cecec7;
  --strong-line: #aaa9a2;
  --header-background: rgba(239,239,235,.97);
  --on-accent: #ffffff;
}
/* The exact selected swatch is applied to all accent elements without adjustment. */
html[data-accent="lime"] { --accent: #c1d100; }
html[data-accent="yellow"] { --accent: #fcb605; }
html[data-accent="orange"] { --accent: #ff4d00; }
html[data-accent="magenta"] { --accent: #f20cce; }
html[data-accent="violet"] { --accent: #4208a6; }
html[data-accent="mint"] { --accent: #008080; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; color: var(--text); background: var(--background); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
button, input { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.container { width: min(calc(100% - 96px),var(--content-width)); margin-inline: auto; }
.mono, .section-mark, .small-upper, .action-link, .nav-toggle, .draft-marker, .category-filter, .tag-chip, .tag-filter { font-family: var(--font-mono); }
.section-mark { display: inline-block; color: var(--accent); font-size: .74rem; letter-spacing: .095em; font-weight: 700; }
.skip-link { position: fixed; z-index: 500; left: 18px; top: -65px; background: var(--accent); color: var(--on-accent); padding: 12px 17px; }
.skip-link:focus { top: 12px; }
/* The site uses only the complete original wordmark in both header and footer. */
.brand-wordmark-svg { display: block; width: clamp(170px,20vw,290px); height: auto; flex: none; }
.site-header { position: sticky; top: 0; z-index: 150; border-bottom: 1px solid var(--line); background: var(--header-background); backdrop-filter: blur(14px); }
.header-content { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.header-brand { min-width: 0; display: flex; align-items: center; }
.header-brand:hover { opacity: .9; }
.header-actions { display: flex; align-items: center; gap: 21px; }
.header-preferences { display: flex; align-items: center; gap: 9px; }
/* Theme and palette controls keep the independently saved preferences from V3.3. */
.theme-control, .palette-control, .nav-control { position: relative; }
.theme-toggle, .palette-toggle { border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: flex-start; gap: 4px; padding: 5px; width: 43px; height: 37px; color: var(--text); background: transparent; }
.theme-toggle:hover, .palette-toggle:hover, .theme-toggle[aria-expanded="true"], .palette-toggle[aria-expanded="true"] { border-color: var(--accent); }
.theme-current, .palette-current, .theme-square, .accent-square { width: 20px; height: 20px; display: block; flex: none; border: 1px solid var(--strong-line); }
html[data-theme="light"] .theme-current { background: #f4f4ef; }
html[data-theme="dark"] .theme-current { background: #1d1d1b; }
.palette-current { background: var(--accent); border-color: var(--accent); }
.theme-chevron, .palette-chevron { font-size: 1rem; transform: translateY(-2px); }
.theme-popover, .palette-popover { position: absolute; top: calc(100% + 10px); right: 0; z-index: 210; display: flex; flex-direction: column; gap: 4px; padding: 7px; border: 1px solid var(--strong-line); background: var(--panel); box-shadow: 0 13px 35px rgba(0,0,0,.12); }
.theme-choice, .accent-choice { width: 35px; height: 35px; border: 1px solid transparent; background: none; padding: 6px; display: inline-flex; align-items: center; justify-content: center; }
.theme-choice:hover, .accent-choice:hover, .theme-choice[aria-pressed="true"], .accent-choice[aria-pressed="true"] { border-color: var(--accent); }
.theme-square--light { background: #f4f4ef; }
.theme-square--dark { background: #1d1d1b; }
.language-controls { display: flex; gap: 5px; align-items: center; padding-left: 11px; border-left: 1px solid var(--line); font: 700 .71rem var(--font-mono); }
.language-controls a { padding: 6px 3px; color: var(--subtle); }
.language-controls a[aria-current="true"] { color: var(--text); border-bottom: 2px solid var(--accent); }
.language-divider { color: var(--strong-line); }
/* The hamburger has no gray outline at rest. The selected accent color still
   frames it on hover, keyboard focus, and while the menu is expanded. */
.nav-toggle { height: 42px; width: 43px; display: flex; align-items: center; justify-content: center; padding: 0; color: var(--text); border: 1px solid transparent; background: none; }
.nav-toggle:hover, .nav-toggle:focus-visible, .nav-toggle[aria-expanded="true"] { border-color: var(--accent); }
.hamburger { display: flex; flex-direction: column; gap: 4px; }
.hamburger i { display: block; width: 19px; height: 2px; background: var(--accent); }
.nav-dropdown { position: absolute; right: 0; top: calc(100% + 13px); z-index: 225; width: min(350px,calc(100vw - 30px)); background: var(--panel); border: 1px solid var(--strong-line); box-shadow: 0 17px 40px rgba(0,0,0,.18); padding: 12px; }
.menu-link { display: flex; align-items: center; gap: 15px; padding: 14px 11px; border-bottom: 1px solid var(--line); font-size: .91rem; font-weight: 700; }
.menu-link > span:first-child { font: .66rem var(--font-mono); color: var(--subtle); }
.menu-link > span:last-child { margin-left: auto; color: var(--accent); }
.menu-link--active { color: var(--accent); }
.menu-sublinks { display: flex; gap: 18px; padding: 13px 10px 16px 45px; border-bottom: 1px solid var(--line); }
.menu-sublinks a { font: 700 .7rem var(--font-mono); border-bottom: 1px solid var(--accent); padding-bottom: 5px; }
/* Shared editorial typography, links, and section separators. */
.action-link { display: inline-flex; gap: 22px; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--accent); font-size: .75rem; font-weight: 700; letter-spacing: .025em; }
.action-link span { color: var(--accent); }
.action-link--filled { padding: 18px 20px; background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.action-link--filled span, .action-link--filled:hover { color: var(--on-accent); }
.action-link:hover { border-color: var(--accent); }
.small-upper { font-size: .68rem; font-weight: 700; letter-spacing: .045em; border-bottom: 1px solid var(--accent); padding-bottom: 7px; }
.section-border { border-top: 1px solid var(--line); }
.section-padding { padding-top: clamp(65px,7vw,105px); padding-bottom: clamp(65px,7vw,105px); }
.section-topline { display: flex; gap: 16px; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.section-display { font-size: clamp(2.9rem,5.4vw,5.5rem); letter-spacing: -.07em; line-height: 1.02; font-weight: 800; margin: 0 0 36px; max-width: 990px; }
.section-lead { color: var(--muted); font-size: 1.1rem; line-height: 1.65; max-width: 730px; margin: -13px 0 32px; }
/* Home page: typography and spaces instead of unrelated stock artwork. */
.home-intro { padding-top: clamp(62px,9vw,132px); padding-bottom: clamp(75px,9vw,122px); min-height: 560px; }
.home-title-lockup { display: grid; grid-template-columns: 1fr; gap: 22px; margin: 27px 0 68px; }
.home-title-lockup h1 { margin: 0; font-weight: 800; font-size: clamp(5.7rem,15vw,13.5rem); letter-spacing: -.105em; line-height: .82; }
/* Homepage wordmark uses one unified ink color: pure white on the dark
   background and theme-appropriate dark gray in light mode for readability.
   The accent color remains on the italic subtitles, not on the main title. */
.home-title-base, .home-title-accent { color: var(--logo-letter); }
/* The two manifesto-derived subtitles use the same italic accent styling. */
.home-title-sub { display: flex; flex-wrap: wrap; column-gap: 34px; row-gap: 7px; font-size: clamp(1.3rem,2.25vw,2.65rem); letter-spacing: -.03em; font-weight: 650; line-height: 1.2; font-style: italic; color: var(--accent); }
.home-intro-bottom { display: flex; justify-content: space-between; align-items: end; gap: 35px; }
.home-intro-bottom p { font-size: clamp(1.1rem,1.5vw,1.35rem); line-height: 1.66; max-width: 650px; color: var(--muted); margin: 0; }
.link-stack { display: flex; flex-direction: column; align-items: stretch; gap: 7px; flex-shrink: 0; }
.system-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.system-tile { position: relative; display: block; min-height: 330px; padding: 33px; border: 1px solid var(--line); background: var(--panel); }
.system-tile:hover { color: var(--text); border-color: var(--accent); }
.system-number { color: var(--accent); font-size: .71rem; }
.system-tile h3 { font-size: clamp(2rem,3.7vw,4.1rem); margin: 40px 0 15px; letter-spacing: -.065em; line-height: 1.04; }
/* On cards and system pages, the project name and branch form one coherent lockup. */
.system-name__project, .system-name__variant { display: block; }
.system-name__project { color: var(--logo-letter); }
.system-name__variant { color: var(--accent); margin-top: .06em; }
.system-tile p { color: var(--muted); font-size: .98rem; line-height: 1.6; max-width: 480px; }
.tile-arrow { position: absolute; right: 28px; top: 22px; color: var(--accent); font-size: 2rem; }
.home-closing { background: var(--accent); color: var(--on-accent); padding: clamp(65px,8vw,112px) 0; }
.home-closing span, .home-closing .action-link span { color: var(--on-accent); }
.home-closing > .container > span { font-size: .7rem; }
.home-closing p { font-size: clamp(2rem,4vw,4.25rem); letter-spacing: -.06em; font-weight: 750; line-height: 1.13; max-width: 980px; }
.closing-links { display: flex; gap: 35px; flex-wrap: wrap; }
.closing-links .action-link { color: var(--on-accent); border-color: var(--on-accent); }
/* All other pages open with a generous typographic header. */
.page-lead { padding-top: clamp(66px,8vw,108px); padding-bottom: clamp(43px,6vw,76px); border-bottom: 1px solid var(--line); }
.page-display { margin: 20px 0 19px; font-weight: 800; font-size: clamp(4rem,10vw,9rem); letter-spacing: -.085em; line-height: .92; }
.page-deck { max-width: 760px; color: var(--muted); line-height: 1.65; font-size: clamp(1.1rem,1.55vw,1.36rem); }
/* The two approved manifesto subtitles remain italic and identically accented on both pages. */
.manifesto-subtitle { display: grid; gap: 7px; font-size: clamp(1.4rem,2.6vw,2.9rem); letter-spacing: -.04em; font-weight: 700; font-style: italic; color: var(--accent); }
.manifesto-layout { padding-top: clamp(40px,5vw,78px); padding-bottom: 105px; display: grid; grid-template-columns: minmax(0,760px) minmax(210px,1fr); column-gap: clamp(35px,7vw,110px); }
.manifesto-prose p { margin: 0 0 1.55em; font-size: clamp(1.075rem,1.32vw,1.22rem); line-height: 1.82; }
.editorial-aside { border-left: 1px solid var(--line); padding-left: 23px; align-self: start; position: sticky; top: 130px; }
.editorial-aside p { color: var(--muted); line-height: 1.55; font-size: .87rem; }
.signature { display: grid; gap: 5px; padding-top: 21px; margin-top: 50px; border-top: 2px solid var(--accent); }
.signature strong { font-size: 1.17rem; }
.signature span { font: .78rem var(--font-mono); color: var(--muted); }
/* Systems overview and conceptual system pages. */
.systems-detail-list { padding-bottom: 110px; }
.system-detail-block { display: grid; grid-template-columns: minmax(0,1fr) minmax(120px,.7fr); align-items: center; gap: 30px; padding: 65px 0; border-bottom: 1px solid var(--line); }
.system-detail-block h2 { font-size: clamp(2.2rem,4vw,4rem); letter-spacing: -.06em; line-height: 1.05; margin: 15px 0; }
.system-detail-block .system-descriptor { font-size: 1.19rem; color: var(--text); font-weight: 600; margin: 11px 0 13px; }
.system-page-name { font-size: clamp(3.3rem,7.8vw,7.9rem); overflow-wrap: anywhere; }
.system-detail-block p { color: var(--muted); line-height: 1.68; max-width: 590px; font-size: 1.05rem; }
.system-big-type { font-size: clamp(2.5rem,5.6vw,6.3rem); letter-spacing: -.09em; text-align: right; color: var(--accent); font-weight: 800; }
.system-principles { padding-top: 35px; padding-bottom: 55px; }
.system-principle { border-bottom: 1px solid var(--line); padding: 37px 0; display: grid; grid-template-columns: 80px minmax(0,720px); gap: 30px; }
.system-principle > span { color: var(--accent); font-size: .83rem; }
.system-principle h2 { font-size: clamp(1.5rem,2.3vw,2.45rem); letter-spacing: -.045em; margin: 0 0 12px; }
.system-principle p { color: var(--muted); line-height: 1.73; font-size: 1.05rem; margin: 0; }
/* One Process archive, with three visible post categories and combinable filters. */
.category-explainers { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; padding-top: 40px; padding-bottom: 55px; }
/* The three format summaries are actual filter buttons, not inert descriptions. */
.category-explainer { display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-width: 0; border: 1px solid var(--line); border-top: 3px solid var(--accent); background: var(--panel); padding: 21px; color: var(--text); transition: border-color .15s ease; }
.category-explainer:hover, .category-explainer:focus-visible, .category-explainer[aria-pressed="true"] { border-color: var(--accent); }
.category-explainer[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--accent); }
.category-explainer strong { margin: 0 0 10px; font-size: clamp(1.2rem,1.75vw,1.6rem); }
.category-description { display: block; flex: 1; color: var(--muted); margin: 0; line-height: 1.62; font-size: .94rem; }
.category-explainer-action { display: block; margin-top: 22px; font: 700 .67rem var(--font-mono); letter-spacing: .035em; color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 5px; }
.process-archive { border-top: 1px solid var(--line); padding-top: 25px; padding-bottom: 95px; }
.archive-title-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.clear-filters { border: 0; background: none; color: var(--muted); font: .7rem var(--font-mono); text-decoration: underline; text-underline-offset: 4px; }
.archive-controls { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 25px 0; border-bottom: 1px solid var(--line); }
.category-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.category-filter { background: none; border: 1px solid transparent; color: var(--muted); padding: 11px 13px; font-size: .75rem; font-weight: 700; }
.category-filter:hover { color: var(--accent); }
.category-filter[aria-pressed="true"] { border-color: var(--accent); color: var(--text); }
.search-label { border-bottom: 1px solid var(--line); display: flex; align-items: center; min-width: min(320px,100%); }
.search-label input { width: 100%; min-width: 0; padding: 11px 1px; border: 0; background: none; outline: 0; color: var(--text); font-size: .88rem; }
.search-label input::placeholder { color: var(--subtle); }
.search-label > span:last-child { color: var(--accent); font-size: 1.5rem; }
.tag-area { padding: 24px 0; }
.tag-area > span { display: block; font-size: .65rem; color: var(--muted); margin-bottom: 12px; }
.tag-filter-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-filter, .tag-chip { display: inline-flex; align-items: center; border: 1px solid var(--line); color: var(--muted); background: transparent; padding: 9px 11px; font-size: .71rem; }
.tag-filter:hover, .tag-chip:hover { border-color: var(--accent); color: var(--text); }
.tag-filter[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.archive-results { color: var(--subtle); font: .7rem var(--font-mono); padding: 0 0 13px; }
.cards-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.process-card { min-height: 325px; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--panel); }
.process-card:hover { border-color: var(--accent); }
.process-card-top { padding: 21px 25px 0; display: flex; gap: 10px; align-items: center; justify-content: space-between; color: var(--accent); font: 700 .7rem var(--font-mono); }
.draft-marker { color: var(--subtle); font-size: .57rem; letter-spacing: .015em; text-align: right; }
.process-card-main { display: flex; flex-direction: column; flex: 1; padding: 23px 25px 25px; }
.process-card-main:hover { color: var(--text); }
.process-card-main h3 { font-size: clamp(1.65rem,2.15vw,2.45rem); line-height: 1.13; letter-spacing: -.045em; margin: 0 0 17px; }
.process-card-main p { font-size: .94rem; line-height: 1.61; color: var(--muted); margin: 0; max-width: 600px; }
.read-more { margin-top: auto; align-self: start; padding-top: 24px; font: 700 .72rem var(--font-mono); border-bottom: 1px solid var(--accent); padding-bottom: 5px; }
.process-card-tags { padding: 15px 25px 20px; border-top: 1px solid var(--line); display: flex; gap: 7px; flex-wrap: wrap; }
.process-card-tags .tag-chip { padding: 7px 8px; font-size: .64rem; }
/* All three editorial categories use the same thick accent rule at the top.
   The category still appears in text, so this styling is not the only cue. */
.process-card--research,
.process-card--devlog,
.process-card--essay { border-top: 3px solid var(--accent); }
.archive-disclaimer { font-size: .82rem; line-height: 1.6; margin-top: 28px; color: var(--subtle); }
/* Category-specific layouts are deliberately distinct, not three synonyms. */
.article-lead { padding-top: 55px; }
.back-link { font: 700 .68rem var(--font-mono); display: block; margin-bottom: 35px; color: var(--muted); }
.article-title { font-size: clamp(3.3rem,6.7vw,7.2rem); font-weight: 800; line-height: 1.01; letter-spacing: -.07em; max-width: 1120px; margin: 22px 0 25px; }
.article-summary { color: var(--muted); line-height: 1.65; font-size: clamp(1.15rem,1.7vw,1.44rem); max-width: 800px; }
.article-byline { display: flex; gap: 14px 28px; flex-wrap: wrap; margin-top: 32px; font: .72rem var(--font-mono); color: var(--subtle); }
.article-byline span:last-child { color: var(--accent); }
.article-layout { display: grid; grid-template-columns: minmax(0,820px) minmax(200px,1fr); gap: clamp(35px,6vw,95px); padding-top: 58px; padding-bottom: 55px; }
.article-content { min-width: 0; }
.article-prose p { font-size: 1.08rem; line-height: 1.83; margin: 0 0 23px; color: var(--muted); }
.article-prose h2 { font-size: clamp(1.7rem,2.5vw,2.7rem); letter-spacing: -.04em; line-height: 1.15; margin: 39px 0 15px; padding-top: 23px; border-top: 1px solid var(--line); }
.article-layout--devlog .article-prose h2 { border-left: 3px solid var(--accent); border-top: none; padding: 6px 0 6px 20px; margin: 39px 0 17px; }
.article-layout--essay .article-prose p { font-size: clamp(1.15rem,1.5vw,1.34rem); line-height: 1.84; }
.article-layout--essay .article-prose p:first-child { color: var(--text); }
.article-aside-block { padding-left: 23px; border-left: 1px solid var(--line); position: sticky; top: 130px; }
.research-aside { border-top: 1px solid var(--accent); margin-top: 23px; padding-top: 18px; }
.research-aside > span { font-size: .72rem; color: var(--accent); }
.research-aside p { color: var(--muted); line-height: 1.7; font-size: .92rem; }
.article-tag-cloud { display: flex; gap: 7px; flex-wrap: wrap; padding-top: 28px; }
.draft-warning { padding: 16px 19px; border-left: 3px solid var(--accent); background: var(--panel); color: var(--muted); font: .83rem/1.6 var(--font-body); margin: 40px 0 0; }
.authentic-visual { margin: 0 0 35px; padding: 13px; border: 1px solid var(--strong-line); background: var(--panel-raised); }
.authentic-visual img { width: 100%; height: auto; object-fit: contain; }
.authentic-visual figcaption { display: flex; justify-content: space-between; gap: 15px; flex-wrap: wrap; padding: 11px 2px 1px; color: var(--muted); font-size: .79rem; line-height: 1.5; }
.authentic-visual figcaption span { color: var(--accent); }
.related-section { padding-top: 36px; padding-bottom: 100px; border-top: 1px solid var(--line); }
.related-section .cards-grid { margin-top: 25px; }
/* The author gets a separate page with an intentionally empty photo slot. */
.artist-name span { color: var(--accent); }
.artist-layout { padding-top: 70px; padding-bottom: 120px; display: grid; grid-template-columns: minmax(0,750px) minmax(240px,1fr); gap: clamp(35px,6vw,85px); }
.artist-bio p { font-size: clamp(1.1rem,1.6vw,1.38rem); line-height: 1.8; margin: 26px 0 30px; }
.photo-frame { border: 1px solid var(--strong-line); aspect-ratio: 4/5; padding: 27px; display: flex; justify-content: end; flex-direction: column; background: var(--panel); }
.photo-frame > span { color: var(--accent); font-size: .8rem; font-weight: 700; }
.photo-frame p { font-size: .84rem; line-height: 1.65; color: var(--muted); }
.site-footer { border-top: 1px solid var(--line); }
.footer-inner { padding: 27px 0; min-height: 115px; display: flex; justify-content: space-between; align-items: center; gap: 23px; }
.footer-brand .brand-wordmark-svg { width: 190px; }
/* Copyright replaces the old footer Manifesto link, with a discreet accent. */
.footer-copyright { font: 500 .66rem var(--font-mono); color: var(--accent); letter-spacing: .015em; line-height: 1.6; }
@media (max-width: 1020px) {
  .container { width: min(calc(100% - 60px),var(--content-width)); }
  .home-intro-bottom { flex-direction: column; align-items: start; }
  .link-stack { flex-direction: row; flex-wrap: wrap; }
  .manifesto-layout, .article-layout { grid-template-columns: minmax(0,1fr); }
  .editorial-aside, .article-aside-block { position: static; border-left: 0; border-top: 1px solid var(--line); padding: 22px 0 0; }
}
@media (max-width: 750px) {
  .container { width: calc(100% - 40px); }
  .header-content { min-height: 75px; }
  .header-actions { gap: 9px; }
  .brand-wordmark-svg { width: clamp(155px,30vw,220px); }
  .system-grid, .category-explainers, .cards-grid, .artist-layout, .systems-detail-list { grid-template-columns: 1fr; }
  .system-detail-block { grid-template-columns: 1fr; }
  .system-big-type { text-align: left; font-size: clamp(2.5rem,9vw,4.4rem); }
  .home-title-lockup h1 { font-size: clamp(5rem,18vw,9rem); }
  .article-byline { gap: 10px 17px; }
  .archive-controls { flex-direction: column; align-items: stretch; }
  .search-label { min-width: 0; width: 100%; }
  .system-principle { grid-template-columns: 35px 1fr; gap: 14px; }
  .photo-frame { max-width: 520px; aspect-ratio: 5/4; }
  .footer-inner { flex-wrap: wrap; }
}
@media (max-width: 500px) {
  .container { width: calc(100% - 32px); }
  .header-content { flex-wrap: wrap; justify-content: space-between; gap: 3px; padding: 12px 0; }
  .brand-wordmark-svg { width: 180px; }
  .header-actions { width: 100%; justify-content: flex-end; }
  .header-preferences { gap: 4px; }
  .theme-toggle,.palette-toggle { width: 37px; height: 32px; padding: 4px; }
  .nav-toggle { height: 36px; width: 37px; }
  .nav-dropdown { top: calc(100% + 9px); }
  .home-intro { min-height: 0; padding-top: 45px; }
  .home-title-lockup { margin: 26px 0 45px; }
  .home-title-lockup h1 { font-size: clamp(3rem,14vw,5.5rem); }
  .home-title-sub { font-size: 1.35rem; }
  .link-stack { flex-direction: column; }
  .section-display { font-size: clamp(2.8rem,11vw,4rem); }
  .section-topline { align-items: flex-start; }
  .page-display { font-size: clamp(3.6rem,16vw,6rem); overflow-wrap: anywhere; }
  .article-title { font-size: clamp(2.8rem,11.7vw,4.3rem); overflow-wrap: anywhere; }
  .process-card-top { flex-wrap: wrap; }
  .system-tile { min-height: 275px; }
  .system-tile h3 { font-size: 3.3rem; }
  .category-filter { padding: 10px 7px; font-size: .69rem; }
  .home-closing p { font-size: 2.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* V3.6: the homepage title, both subtitle lines, and its introduction
   share one left-aligned reading axis on desktop, tablet, and mobile. */
.home-intro .home-title-lockup { text-align: left; justify-items: start; margin-bottom: 38px; }
.home-intro .home-title-lockup h1 { text-align: left; }
.home-intro .home-title-sub { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; text-align: left; row-gap: 5px; }
.home-intro .home-intro-bottom { align-items: flex-start; }
.home-intro .home-intro-bottom p { text-align: left; }

/* The long systems names now replace the two-column duplicate headings.
   Both parts use the weight of the previous large right-hand label. */
.systems-detail-list .system-detail-block { display: block; }
.systems-detail-list .system-detail-block h2 { font-size: clamp(1.85rem,5.6vw,6.3rem); font-weight: 800; letter-spacing: -.075em; line-height: 1.05; white-space: nowrap; margin: 18px 0 19px; }
.systems-detail-list .system-name__project,
.systems-detail-list .system-name__variant { display: inline; }
.systems-detail-list .system-name__variant { margin: 0 0 0 .18em; }
.systems-detail-list .system-detail-block > p:not(.system-descriptor) { max-width: 720px; }

/* Rotating, verbatim manifesto sentences on the solid accent field.
   A minimum height avoids layout jumps when quotes vary in length. */
.home-closing .manifesto-quote-gallery { min-height: clamp(190px,23vw,305px); display: flex; align-items: center; }
.home-closing .manifesto-rotating-quote { margin: 25px 0 8px; animation: quote-arrive .5s ease-out both; }
.home-closing .manifesto-quote-count { font-size: .75rem; font-weight: 700; color: var(--on-accent); opacity: .85; letter-spacing: .08em; margin: 12px 0 24px; }
@keyframes quote-arrive { from { opacity: 0; transform: translateX(25px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 500px) {
  .home-closing .manifesto-quote-gallery { min-height: 280px; }
  .systems-detail-list .system-detail-block h2 { font-size: clamp(1.85rem,7vw,2.5rem); letter-spacing: -.07em; }
}

/* V3.8: X SUMI's author-approved artist statement, without technical details.
   Reading width and line spacing match the editorial tone of the manifesto. */
.system-presentation { padding-top: clamp(44px, 5.5vw, 82px); padding-bottom: clamp(60px, 7vw, 112px); }
.system-presentation-prose { max-width: 820px; }
.system-presentation-prose p { margin: 0 0 1.55em; font-size: clamp(1.065rem, 1.33vw, 1.22rem); line-height: 1.82; color: var(--text); }
.system-presentation-prose p:first-child { font-weight: 500; }
.system-presentation-prose p:last-child { margin-bottom: 0; }
.system-translation-status { max-width: 820px; margin: 38px 0 0; border-top: 1px solid var(--line); padding-top: 18px; color: var(--muted); font: 700 .68rem var(--font-mono); letter-spacing: .07em; }


/* V3.9 — consistent project and system references in long editorial texts.
   KIKAIMA is emphasized with the normal text color; X SUMI and X MICHI use
   the exact selected accent. Bold remains visible even for light accents. */
.text-project-name { font-weight: 750; color: var(--text); }
.text-system-name { font-weight: 750; color: var(--accent); }
/* On a filled accent panel the writing stays white for sufficient contrast. */
.home-closing .text-project-name,
.home-closing .text-system-name { color: var(--on-accent); }

/* The approved SUMI introduction stays visible; the rest uses native details.
   This works with keyboard, mouse and touch, even if JavaScript is disabled. */
.system-presentation-details { margin: 6px 0 0; }
.system-presentation-toggle {
  display: inline-flex; align-items: center; gap: 19px;
  padding: 12px 0 10px; border-bottom: 2px solid var(--accent);
  font: 700 .78rem var(--font-mono); color: var(--accent);
  cursor: pointer; list-style: none;
}
.system-presentation-toggle::-webkit-details-marker { display: none; }
.system-presentation-toggle::marker { content: ""; }
.system-presentation-toggle:hover { color: var(--text); }
.system-presentation-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.system-presentation-details:not([open]) .system-toggle-less,
.system-presentation-details[open] .system-toggle-more { display: none; }
.system-toggle-icon { font-size: 1.25rem; line-height: 1; }
.system-presentation-details[open] .system-toggle-icon { transform: rotate(45deg); }
.system-presentation-expanded { padding-top: 29px; }
.system-presentation-expanded p:last-child { margin-bottom: 0; }

/* V4.0 — a source-labelled quotation rotates as one accessible unit.
   The visual source label always accompanies its quote, including without JS. */
.home-closing .manifesto-quote-item { max-width: 1010px; animation: quote-arrive .5s ease-out both; }
.home-closing .manifesto-quote-item[hidden] { display: none !important; }
.home-closing .manifesto-quote-source {
  display: inline-block; margin: 6px 0 0; padding-top: 6px;
  font-size: .76rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; opacity: .9;
}
.home-closing .manifesto-quote-item .manifesto-rotating-quote { animation: none; }

/* V4.1: SUMI and MICHI share a conceptual Japanese-character treatment.
   A heavy sans-serif CJK family is preferred. Each system uses the same
   typography, while the smaller translations remain neutral and unobtrusive.
   No external fonts are downloaded: visitors use their installed CJK fonts. */
.system-kanji {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: clamp(25px, 5vw, 72px); max-width: 820px;
  margin-top: clamp(34px, 5vw, 65px); padding-top: 24px;
  border-top: 1px solid var(--line);
}
.system-kanji-item { display: flex; flex-direction: column; min-width: 90px; }
.system-kanji-character {
  font-family: "Noto Sans CJK JP", "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Microsoft YaHei", "Meiryo", sans-serif;
  font-size: clamp(2.6rem, 4.7vw, 4.1rem); line-height: 1.15;
  color: var(--accent); font-weight: 900;
  /* A thin matching outline produces a Black-style weight when the system
     only supplies Bold (e.g., Noto Sans CJK JP and many Windows fonts). */
  -webkit-text-stroke: .65px currentColor;
}
.system-kanji-meaning {
  margin-top: 10px; color: var(--muted); font-family: var(--font-mono);
  font-size: .69rem; font-weight: 700; letter-spacing: .04em;
}
/* V4.3 mobile spacing: keep the Japanese characters grouped, rather than
   stretching them to opposite edges of the content column. */
@media (max-width: 600px) {
  .system-kanji { gap: clamp(12px, 3vw, 18px); justify-content: flex-start; }
  .system-kanji-item { min-width: 0; }
  .system-kanji-meaning { font-size: .64rem; }
}

/* V4.3: keep the conceptual kanji visually attached to the following section.
   Previous combined section padding could exceed 150px after the characters. */
.system-presentation { padding-bottom: clamp(25px, 3vw, 46px); }
.system-presentation + .section-padding { padding-top: clamp(30px, 3.5vw, 57px); }
.system-presentation .system-translation-status { margin-top: 22px; }

/* V4.3: on narrow screens the dropdown is attached to the complete header
   actions row, not the small menu button. This prevents left-side clipping. */
@media (max-width: 750px) {
  .header-actions { position: relative; }
  .nav-control { position: static; }
  .nav-dropdown {
    left: auto;
    right: 0;
    top: calc(100% + 9px);
    width: min(350px, calc(100vw - 32px));
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}