:root {
  --paper: #f2ead8;
  --paper-light: #fbf6e9;
  --ink: #171915;
  --muted: #6d6a5f;
  --red: #c83b24;
  --blue: #2857a4;
  --amber: #e5a526;
  --moss: #5d7149;
  --plum: #76516c;
  --teal: #23756f;
  --line: 2px solid var(--ink);
  --shadow: 7px 7px 0 var(--ink);
  --display: "Arial Narrow", "Avenir Next Condensed", "PingFang SC", sans-serif;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  --mono: "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(rgba(23, 25, 21, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 25, 21, .03) 1px, transparent 1px),
    var(--paper);
  background-size: 24px 24px;
  font-family: var(--serif);
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 20; background: var(--ink); color: #fff; padding: .8rem 1rem; }
.skip-link:focus { top: 1rem; }

.masthead {
  min-height: 92px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem clamp(1rem, 4vw, 4.5rem);
  border-bottom: var(--line);
}
.wordmark { display: flex; gap: .7rem; align-items: center; text-decoration: none; font: 800 .66rem/1 var(--display); letter-spacing: .12em; }
.wordmark-mark { display: grid; place-items: center; width: 52px; aspect-ratio: 1; border: var(--line); background: var(--red); color: var(--paper-light); font: 800 1.8rem/1 var(--serif); transform: rotate(-3deg); }
.issue { margin: 0; text-align: right; font: 700 .7rem/1.5 var(--mono); letter-spacing: .08em; }

.hero { min-height: 690px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(310px, .6fr); border-bottom: var(--line); overflow: hidden; }
.hero-copy { padding: clamp(3.5rem, 7vw, 7.5rem) clamp(1.2rem, 5vw, 5.5rem) 4rem; position: relative; }
.kicker { display: flex; gap: .8rem; align-items: center; margin: 0 0 2rem; font: 800 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.kicker span { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid currentColor; }
h1 { margin: 0; font: 900 clamp(5.4rem, 12.4vw, 11.5rem)/.75 var(--display); letter-spacing: -.075em; text-transform: uppercase; }
h1 em { color: var(--red); font-family: var(--serif); font-weight: 800; }
.hero-lede { max-width: 650px; margin: 3.5rem 0 2rem auto; font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.85; }
.text-link { display: inline-flex; gap: 1rem; border-bottom: 2px solid currentColor; padding: 0 0 .4rem; margin-left: min(44%, 22rem); font: 800 .85rem/1 var(--mono); text-decoration: none; }
.text-link span { color: var(--red); }
.hero-object { position: relative; display: grid; place-items: center; border-left: var(--line); background: var(--amber); overflow: hidden; }
.hero-object::before { content: ""; position: absolute; width: 72%; height: 130%; background: var(--red); transform: rotate(23deg); }
.hero-object::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, transparent 0 3px, rgba(23,25,21,.17) 3.5px 4px, transparent 4.5px) 0 0/24px 24px; }
.seal { z-index: 2; width: min(74%, 330px); aspect-ratio: 1; display: grid; align-content: center; justify-items: center; border-radius: 50%; border: 5px double var(--ink); background: var(--paper-light); box-shadow: 10px 12px 0 rgba(23,25,21,.9); transform: rotate(7deg); }
.seal strong { font: 900 9rem/.8 var(--display); }
.seal span { margin-top: .8rem; text-align: center; font: 900 .8rem/1.25 var(--mono); letter-spacing: .25em; }
.hero-object > p { z-index: 3; position: absolute; bottom: 2rem; font: 800 .68rem/1 var(--mono); letter-spacing: .14em; }
.orbit { position: absolute; z-index: 1; width: 120%; aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 50%; }
.orbit-two { width: 88%; }

.principles { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center; padding: 2.6rem clamp(1.2rem, 5vw, 5.5rem); border-bottom: var(--line); background: var(--ink); color: var(--paper-light); }
.principles > p { max-width: 720px; margin: 0; font-size: 1.05rem; line-height: 1.7; }
.principles dl { display: flex; margin: 0; }
.principles dl div { min-width: 105px; padding: 0 1.3rem; border-left: 1px solid rgba(255,255,255,.35); }
.principles dt { font: 900 1.8rem/1 var(--display); color: var(--amber); }
.principles dd { margin: .4rem 0 0; font-size: .72rem; }

.catalog { padding: clamp(5rem, 9vw, 9rem) clamp(1rem, 4vw, 4.5rem); }
.section-heading { display: grid; grid-template-columns: .75fr 1.25fr; align-items: end; margin-bottom: 4.5rem; }
.section-heading > p { margin: 0 0 .5rem; font: 800 .72rem/1 var(--mono); letter-spacing: .11em; }
h2 { margin: 0; font: 900 clamp(3.8rem, 8.5vw, 8rem)/.83 var(--display); letter-spacing: -.055em; text-transform: uppercase; }
.catalog-tools { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: minmax(280px, .7fr) 1.3fr; gap: 2rem; align-items: end; margin: 0 -.8rem; padding: 1rem .8rem; border-top: var(--line); border-bottom: var(--line); background: rgba(242,234,216,.95); backdrop-filter: blur(10px); }
.search-box, .filter-block { display: grid; gap: .65rem; font: 800 .66rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.search-row { display: flex; gap: .7rem; align-items: center; }
.search-row > span { font-size: 1.6rem; }
.search-row input { width: 100%; border: 0; border-bottom: 1px solid var(--ink); padding: .55rem .1rem; color: var(--ink); background: transparent; border-radius: 0; font: 700 1rem/1.2 var(--serif); }
.search-row input::placeholder { color: #777267; }
.filters { display: flex; flex-wrap: wrap; gap: .45rem; }
.filter { cursor: pointer; border: 1px solid var(--ink); border-radius: 999px; padding: .65rem 1rem; background: transparent; font: 800 .72rem/1 var(--mono); }
.filter:hover, .filter.is-active { background: var(--ink); color: var(--paper-light); }
.result-line { display: flex; justify-content: space-between; padding: 1rem 0 3rem; color: var(--muted); font: 700 .65rem/1 var(--mono); letter-spacing: .08em; }

.skill-grid { display: grid; gap: 3rem; }
.skill-card { --accent: var(--red); display: grid; grid-template-columns: 90px minmax(260px, .8fr) minmax(360px, 1.2fr); border: var(--line); background: var(--paper-light); box-shadow: var(--shadow); animation: card-in .55s both; animation-delay: calc(var(--order) * 70ms); }
.skill-card[data-accent="cobalt"] { --accent: var(--blue); }
.skill-card[data-accent="amber"] { --accent: var(--amber); }
.skill-card[data-accent="moss"] { --accent: var(--moss); }
.skill-card[data-accent="plum"] { --accent: var(--plum); }
.skill-card[data-accent="teal"] { --accent: var(--teal); }
.card-index { display: grid; place-items: start center; padding-top: 1.6rem; border-right: var(--line); background: var(--accent); color: var(--paper-light); font: 900 2.3rem/1 var(--display); writing-mode: vertical-rl; }
.card-main, .card-detail { padding: clamp(1.5rem, 3vw, 2.6rem); }
.card-main { border-right: var(--line); }
.card-meta { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 2.6rem; font: 800 .65rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.category { padding: .45rem .65rem; color: var(--paper-light); background: var(--ink); }
.license:empty { display: none; }
.eyebrow { margin: 0 0 .6rem; color: var(--accent); font: 800 .75rem/1.35 var(--mono); }
.skill-card h3 { margin: 0 0 1rem; font: 900 clamp(2.5rem, 4vw, 4.5rem)/.88 var(--display); letter-spacing: -.045em; }
.summary { margin: 0; font-size: 1.15rem; line-height: 1.55; font-weight: 700; }
.description { margin: 1.4rem 0 1.6rem; color: var(--muted); font-size: .92rem; line-height: 1.75; }
.tag-list { display: flex; flex-wrap: wrap; gap: .35rem; }
.tag-list span { border-bottom: 1px solid var(--ink); padding: .3rem .1rem; font: 700 .66rem/1 var(--mono); }
.card-detail { display: grid; align-content: start; gap: 1.3rem; }
.card-detail h4 { margin: 0 0 .7rem; font: 900 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.features { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1rem; margin: 0; padding: 0; list-style: none; }
.features li { position: relative; padding-left: 1.1rem; font-size: .9rem; line-height: 1.45; }
.features li::before { content: "◆"; position: absolute; left: 0; top: .15em; color: var(--accent); font-size: .58rem; }
details { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
summary { cursor: pointer; display: flex; justify-content: space-between; padding: 1rem 0; font-weight: 800; list-style: none; }
summary::-webkit-details-marker { display: none; }
details[open] summary span { transform: rotate(45deg); }
.detail-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: .4rem 0 1.4rem; }
.detail-columns ol, .detail-columns ul { margin: 0; padding-left: 1.15rem; color: var(--muted); font-size: .78rem; line-height: 1.6; }
.command-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; border: 1px solid var(--ink); background: var(--ink); }
.command-box code { min-width: 0; padding: .8rem; overflow: hidden; color: #ecf2dc; font: .68rem/1.5 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.command-box button { cursor: pointer; border: 0; border-left: 1px solid #777; padding: 0 .8rem; color: #fff; background: transparent; font: 700 .66rem/1 var(--mono); }
.download-row { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.download-button { display: inline-flex; gap: 1rem; align-items: center; padding: .9rem 1.1rem; color: var(--paper-light); background: var(--accent); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font: 900 .78rem/1 var(--mono); text-decoration: none; }
.download-button:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.download-row > p { margin: 0; text-align: right; color: var(--muted); font: 700 .62rem/1.5 var(--mono); }
.checksum { cursor: pointer; border: 0; padding: 0; color: inherit; background: transparent; font: inherit; }
.checksum code { display: inline-block; max-width: 8ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.empty-state { border: 2px dashed var(--ink); padding: 5rem 1rem; text-align: center; }
.empty-state > span { font: 900 6rem/1 var(--display); color: var(--red); }
.empty-state h3 { margin: 1rem 0 .4rem; font: 900 2.5rem/1 var(--display); }
.empty-state button { cursor: pointer; border: var(--line); padding: .7rem 1rem; background: var(--amber); box-shadow: 3px 3px 0 var(--ink); font-weight: 800; }

.install-note { position: relative; display: grid; grid-template-columns: 60px 1fr 1.1fr; gap: clamp(1rem, 4vw, 5rem); padding: clamp(4rem, 8vw, 8rem) clamp(1.2rem, 5vw, 5.5rem); color: var(--paper-light); background: var(--blue); border-top: var(--line); border-bottom: var(--line); }
.vertical-label { margin: 0; writing-mode: vertical-rl; font: 800 .66rem/1 var(--mono); letter-spacing: .15em; }
.install-note .kicker span { border-color: currentColor; }
.install-note h2 { color: var(--paper-light); }
.install-note ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.7); }
.install-note li { display: grid; grid-template-columns: 52px 1fr; gap: 1rem; padding: 1.4rem 0; border-bottom: 1px solid rgba(255,255,255,.7); }
.install-note li > span { font: 900 1.6rem/1 var(--display); color: var(--amber); }
.install-note li p { margin: 0; line-height: 1.6; }
.install-note code { padding: .1rem .3rem; color: var(--ink); background: var(--paper-light); font: .82em var(--mono); }
footer { display: flex; justify-content: space-between; gap: 2rem; padding: 3rem clamp(1.2rem, 5vw, 5.5rem); background: var(--ink); color: var(--paper-light); }
footer p { margin: 0; font: 900 1rem/1.3 var(--display); letter-spacing: .08em; }
footer p span { color: #aaa99f; font: .75rem/1.5 var(--serif); letter-spacing: 0; }
footer a { align-self: start; font: 800 .7rem/1 var(--mono); }

@keyframes card-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .hero-object { min-height: 430px; border-left: 0; border-top: var(--line); }
  .principles { grid-template-columns: 1fr; }
  .skill-card { grid-template-columns: 64px 1fr; }
  .card-main { border-right: 0; }
  .card-detail { grid-column: 2; border-top: var(--line); }
  .detail-columns { grid-template-columns: 1fr; }
  .install-note { grid-template-columns: 42px 1fr; }
  .install-note ol { grid-column: 2; }
}
@media (max-width: 640px) {
  .masthead { min-height: 78px; }
  .wordmark-mark { width: 43px; }
  .issue { font-size: .57rem; }
  .hero { min-height: auto; }
  .hero-copy { padding-top: 4rem; }
  h1 { font-size: clamp(4.6rem, 26vw, 7rem); }
  .hero-lede { margin-top: 2.5rem; }
  .text-link { margin-left: 0; }
  .hero-object { min-height: 370px; }
  .seal strong { font-size: 7rem; }
  .principles dl { width: 100%; }
  .principles dl div { flex: 1; min-width: 0; padding: 0 .55rem; }
  .principles dt { font-size: 1.35rem; }
  .principles dd { font-size: .6rem; }
  .section-heading { grid-template-columns: 1fr; gap: 1.2rem; }
  .catalog-tools { position: relative; grid-template-columns: 1fr; gap: 1.4rem; }
  .result-line span:last-child { display: none; }
  .skill-card { grid-template-columns: 42px minmax(0, 1fr); box-shadow: 4px 4px 0 var(--ink); }
  .card-index { padding-top: 1rem; font-size: 1.5rem; }
  .card-main, .card-detail { padding: 1.35rem; }
  .card-meta { margin-bottom: 1.7rem; }
  .features { grid-template-columns: 1fr; }
  .command-box { grid-template-columns: 1fr; }
  .command-box button { min-height: 42px; border-left: 0; border-top: 1px solid #777; }
  .download-row { align-items: stretch; flex-direction: column; }
  .download-button { justify-content: space-between; }
  .download-row > p { text-align: left; }
  .install-note { grid-template-columns: 26px 1fr; }
  footer { flex-direction: column; }
}